Merge branch 'main' into multi-language

lightrag_webui/src/api/lightrag.ts

@@ -161,8 +161,12 @@ axiosInstance.interceptors.response.use(
 )
 
 // API methods
-export const queryGraphs = async (label: string, maxDepth: number): Promise<LightragGraphType> => {
-  const response = await axiosInstance.get(`/graphs?label=${label}&max_depth=${maxDepth}`)
+export const queryGraphs = async (
+  label: string,
+  maxDepth: number,
+  minDegree: number
+): Promise<LightragGraphType> => {
+  const response = await axiosInstance.get(`/graphs?label=${encodeURIComponent(label)}&max_depth=${maxDepth}&min_degree=${minDegree}`)
   return response.data
 }
 

lightrag_webui/src/components/graph/GraphControl.tsx

@@ -40,18 +40,21 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
   const focusedEdge = useGraphStore.use.focusedEdge()
 
   /**
-   * When component mount
-   * => load the graph
+   * When component mount or maxIterations changes
+   * => load the graph and apply layout
    */
   useEffect(() => {
     // Create & load the graph
     const graph = lightrageGraph()
     loadGraph(graph)
-    if (!(graph as any).__force_applied) {
-      assignLayout()
-      Object.assign(graph, { __force_applied: true })
-    }
+    assignLayout()
+  }, [assignLayout, loadGraph, lightrageGraph, maxIterations])
 
+  /**
+   * When component mount
+   * => register events
+   */
+  useEffect(() => {
     const { setFocusedNode, setSelectedNode, setFocusedEdge, setSelectedEdge, clearSelection } =
       useGraphStore.getState()
 
@@ -87,7 +90,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
       },
       clickStage: () => clearSelection()
     })
-  }, [assignLayout, loadGraph, registerEvents, lightrageGraph])
+  }, [registerEvents])
 
   /**
    * When component mount or hovered node change

lightrag_webui/src/components/graph/Settings.tsx

@@ -91,9 +91,12 @@ const LabeledNumberInput = ({
         {label}
       </label>
       <Input
-        value={currentValue || ''}
+        type="number"
+        value={currentValue === null ? '' : currentValue}
         onChange={onValueChange}
-        className="h-6 w-full min-w-0"
+        className="h-6 w-full min-w-0 pr-1"
+        min={min}
+        max={max}
         onBlur={onBlur}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
@@ -120,6 +123,7 @@ export default function Settings() {
   const enableHideUnselectedEdges = useSettingsStore.use.enableHideUnselectedEdges()
   const showEdgeLabel = useSettingsStore.use.showEdgeLabel()
   const graphQueryMaxDepth = useSettingsStore.use.graphQueryMaxDepth()
+  const graphMinDegree = useSettingsStore.use.graphMinDegree()
   const graphLayoutMaxIterations = useSettingsStore.use.graphLayoutMaxIterations()
 
   const enableHealthCheck = useSettingsStore.use.enableHealthCheck()
@@ -178,6 +182,11 @@ export default function Settings() {
     useSettingsStore.setState({ graphQueryMaxDepth: depth })
   }, [])
 
+  const setGraphMinDegree = useCallback((degree: number) => {
+    if (degree < 0) return
+    useSettingsStore.setState({ graphMinDegree: degree })
+  }, [])
+
   const setGraphLayoutMaxIterations = useCallback((iterations: number) => {
     if (iterations < 1) return
     useSettingsStore.setState({ graphLayoutMaxIterations: iterations })
@@ -274,7 +283,7 @@ export default function Settings() {
             min={0}
             value={graphMinDegree}
             onEditFinished={setGraphMinDegree}
-          />   
+          />
           <LabeledNumberInput
             label={t("graphPanel.sideBar.settings.maxLayoutIterations")}
             min={1}
@@ -282,7 +291,6 @@ export default function Settings() {
             value={graphLayoutMaxIterations}
             onEditFinished={setGraphLayoutMaxIterations}
           />
-
           <Separator />
 
           <div className="flex flex-col gap-2">

lightrag_webui/src/components/ui/Input.tsx

@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm [&::-webkit-inner-spin-button]:opacity-100 [&::-webkit-outer-spin-button]:opacity-100',
           className
         )}
         ref={ref}

lightrag_webui/src/hooks/useLightragGraph.tsx

@@ -50,11 +50,11 @@ export type NodeType = {
 }
 export type EdgeType = { label: string }
 
-const fetchGraph = async (label: string, maxDepth: number) => {
+const fetchGraph = async (label: string, maxDepth: number, minDegree: number) => {
   let rawData: any = null
 
   try {
-    rawData = await queryGraphs(label, maxDepth)
+    rawData = await queryGraphs(label, maxDepth, minDegree)
   } catch (e) {
     useBackendState.getState().setErrorMessage(errorMessage(e), 'Query Graphs Error!')
     return null
@@ -161,13 +161,14 @@ const createSigmaGraph = (rawGraph: RawGraph | null) => {
   return graph
 }
 
-const lastQueryLabel = { label: '', maxQueryDepth: 0 }
+const lastQueryLabel = { label: '', maxQueryDepth: 0, minDegree: 0 }
 
 const useLightrangeGraph = () => {
   const queryLabel = useSettingsStore.use.queryLabel()
   const rawGraph = useGraphStore.use.rawGraph()
   const sigmaGraph = useGraphStore.use.sigmaGraph()
   const maxQueryDepth = useSettingsStore.use.graphQueryMaxDepth()
+  const minDegree = useSettingsStore.use.graphMinDegree()
 
   const getNode = useCallback(
     (nodeId: string) => {
@@ -185,13 +186,16 @@ const useLightrangeGraph = () => {
 
   useEffect(() => {
     if (queryLabel) {
-      if (lastQueryLabel.label !== queryLabel || lastQueryLabel.maxQueryDepth !== maxQueryDepth) {
+      if (lastQueryLabel.label !== queryLabel ||
+          lastQueryLabel.maxQueryDepth !== maxQueryDepth ||
+          lastQueryLabel.minDegree !== minDegree) {
         lastQueryLabel.label = queryLabel
         lastQueryLabel.maxQueryDepth = maxQueryDepth
+        lastQueryLabel.minDegree = minDegree
 
         const state = useGraphStore.getState()
         state.reset()
-        fetchGraph(queryLabel, maxQueryDepth).then((data) => {
+        fetchGraph(queryLabel, maxQueryDepth, minDegree).then((data) => {
           // console.debug('Query label: ' + queryLabel)
           state.setSigmaGraph(createSigmaGraph(data))
           data?.buildDynamicMap()
@@ -203,7 +207,7 @@ const useLightrangeGraph = () => {
       state.reset()
       state.setSigmaGraph(new DirectedGraph())
     }
-  }, [queryLabel, maxQueryDepth])
+  }, [queryLabel, maxQueryDepth, minDegree])
 
   const lightrageGraph = useCallback(() => {
     if (sigmaGraph) {

lightrag_webui/src/stores/settings.ts

@@ -22,6 +22,9 @@ interface SettingsState {
   graphQueryMaxDepth: number
   setGraphQueryMaxDepth: (depth: number) => void
 
+  graphMinDegree: number
+  setGraphMinDegree: (degree: number) => void
+
   graphLayoutMaxIterations: number
   setGraphLayoutMaxIterations: (iterations: number) => void
 
@@ -66,6 +69,7 @@ const useSettingsStoreBase = create<SettingsState>()(
       enableEdgeEvents: false,
 
       graphQueryMaxDepth: 3,
+      graphMinDegree: 0,
       graphLayoutMaxIterations: 10,
 
       queryLabel: defaultQueryLabel,
@@ -107,6 +111,8 @@ const useSettingsStoreBase = create<SettingsState>()(
 
       setGraphQueryMaxDepth: (depth: number) => set({ graphQueryMaxDepth: depth }),
 
+      setGraphMinDegree: (degree: number) => set({ graphMinDegree: degree }),
+
       setEnableHealthCheck: (enable: boolean) => set({ enableHealthCheck: enable }),
 
       setApiKey: (apiKey: string | null) => set({ apiKey }),

lightrag_webui/src/vite-env.d.ts

@@ -1 +1,11 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_PROXY: string
+  readonly VITE_API_ENDPOINTS: string
+  readonly VITE_BACKEND_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

lightrag_webui/tsconfig.json

@@ -26,5 +26,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"]
+  "include": ["src", "vite.config.ts"]
 }

lightrag_webui/vite.config.ts

@@ -14,6 +14,21 @@ export default defineConfig({
   },
   base: './',
   build: {
-    outDir: path.resolve(__dirname, '../lightrag/api/webui')
+    outDir: path.resolve(__dirname, '../lightrag/api/webui'),
+    emptyOutDir: true
+  },
+  server: {
+    proxy: import.meta.env.VITE_API_PROXY === 'true' && import.meta.env.VITE_API_ENDPOINTS ?
+      Object.fromEntries(
+        import.meta.env.VITE_API_ENDPOINTS.split(',').map(endpoint => [
+          endpoint,
+          {
+            target: import.meta.env.VITE_BACKEND_URL || 'http://localhost:9621',
+            changeOrigin: true,
+            rewrite: endpoint === '/api' ?
+              (path) => path.replace(/^\/api/, '') : undefined
+          }
+        ])
+      ) : {}
   }
 })