add graph depth and layout iteration settings

lightrag_webui/src/components/graph/GraphControl.tsx

@@ -26,8 +26,10 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
   const registerEvents = useRegisterEvents<NodeType, EdgeType>()
   const setSettings = useSetSettings<NodeType, EdgeType>()
   const loadGraph = useLoadGraph<NodeType, EdgeType>()
+  
+  const maxIterations = useSettingsStore.use.graphLayoutMaxIterations()
   const { assign: assignLayout } = useLayoutForceAtlas2({
-    iterations: 20
+    iterations: maxIterations
   })
 
   const { theme } = useTheme()

lightrag_webui/src/components/graph/GraphLabels.tsx

@@ -1,67 +1,81 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import { AsyncSelect } from '@/components/ui/AsyncSelect'
 import { getGraphLabels } from '@/api/lightrag'
 import { useSettingsStore } from '@/stores/settings'
+import { useGraphStore } from '@/stores/graph'
+import { labelListLimit } from '@/lib/constants'
 import MiniSearch from 'minisearch'
 
+const lastGraph: any = {
+  graph: null,
+  searchEngine: null,
+  labels: []
+}
+
 const GraphLabels = () => {
   const label = useSettingsStore.use.queryLabel()
-  const [labels, setLabels] = useState<{
-    labels: string[]
-    searchEngine: MiniSearch | null
-  }>({
-    labels: [],
-    searchEngine: null
-  })
-  const [fetched, setFetched] = useState(false)
+  const graph = useGraphStore.use.sigmaGraph()
+
+  const getSearchEngine = useCallback(async () => {
+    if (lastGraph.graph == graph) {
+      return {
+        labels: lastGraph.labels,
+        searchEngine: lastGraph.searchEngine
+      }
+    }
+    const labels = ['*'].concat(await getGraphLabels())
+
+    // Ensure query label exists
+    if (!labels.includes(useSettingsStore.getState().queryLabel)) {
+      useSettingsStore.getState().setQueryLabel(labels[0])
+    }
+
+    // Create search engine
+    const searchEngine = new MiniSearch({
+      idField: 'id',
+      fields: ['value'],
+      searchOptions: {
+        prefix: true,
+        fuzzy: 0.2,
+        boost: {
+          label: 2
+        }
+      }
+    })
+
+    // Add documents
+    const documents = labels.map((str, index) => ({ id: index, value: str }))
+    searchEngine.addAll(documents)
+
+    lastGraph.graph = graph
+    lastGraph.searchEngine = searchEngine
+    lastGraph.labels = labels
+
+    return {
+      labels,
+      searchEngine
+    }
+  }, [graph])
 
   const fetchData = useCallback(
     async (query?: string): Promise<string[]> => {
-      let _labels = labels.labels
-      let _searchEngine = labels.searchEngine
+      const { labels, searchEngine } = await getSearchEngine()
 
-      if (!fetched || !_searchEngine) {
-        _labels = ['*'].concat(await getGraphLabels())
-
-        // Ensure query label exists
-        if (!_labels.includes(useSettingsStore.getState().queryLabel)) {
-          useSettingsStore.getState().setQueryLabel(_labels[0])
-        }
-
-        // Create search engine
-        _searchEngine = new MiniSearch({
-          idField: 'id',
-          fields: ['value'],
-          searchOptions: {
-            prefix: true,
-            fuzzy: 0.2,
-            boost: {
-              label: 2
-            }
-          }
-        })
-
-        // Add documents
-        const documents = _labels.map((str, index) => ({ id: index, value: str }))
-        _searchEngine.addAll(documents)
-
-        setLabels({
-          labels: _labels,
-          searchEngine: _searchEngine
-        })
-        setFetched(true)
-      }
-      if (!query) {
-        return _labels
+      let result: string[] = labels
+      if (query) {
+        // Search labels
+        result = searchEngine.search(query).map((r) => labels[r.id])
       }
 
-      // Search labels
-      return _searchEngine.search(query).map((result) => _labels[result.id])
+      return result.length <= labelListLimit
+        ? result
+        : [...result.slice(0, labelListLimit), `And ${result.length - labelListLimit} others`]
     },
-    [labels, fetched, setLabels, setFetched]
+    [getSearchEngine]
   )
 
   const setQueryLabel = useCallback((label: string) => {
+    if (label.startsWith('And ') && label.endsWith(' others')) return
     useSettingsStore.getState().setQueryLabel(label)
   }, [])
 

lightrag_webui/src/components/graph/GraphSearch.tsx

@@ -46,7 +46,7 @@ export const GraphSearchInput = ({
 }) => {
   const graph = useGraphStore.use.sigmaGraph()
 
-  const search = useMemo(() => {
+  const searchEngine = useMemo(() => {
     if (lastGraph.graph == graph) {
       return lastGraph.searchEngine
     }
@@ -83,9 +83,9 @@ export const GraphSearchInput = ({
   const loadOptions = useCallback(
     async (query?: string): Promise<OptionItem[]> => {
       if (onFocus) onFocus(null)
-      if (!query || !search) return []
-      const result: OptionItem[] = search.search(query).map((result) => ({
-        id: result.id,
+      if (!query || !searchEngine) return []
+      const result: OptionItem[] = searchEngine.search(query).map((r) => ({
+        id: r.id,
         type: 'nodes'
       }))
 
@@ -101,7 +101,7 @@ export const GraphSearchInput = ({
           }
         ]
     },
-    [search, onFocus]
+    [searchEngine, onFocus]
   )
 
   return (

lightrag_webui/src/components/graph/LayoutsControl.tsx

@@ -13,6 +13,7 @@ import Button from '@/components/ui/Button'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
 import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/Command'
 import { controlButtonVariant } from '@/lib/constants'
+import { useSettingsStore } from '@/stores/settings'
 
 import { GripIcon, PlayIcon, PauseIcon } from 'lucide-react'
 
@@ -75,13 +76,15 @@ const LayoutsControl = () => {
   const sigma = useSigma()
   const [layout, setLayout] = useState<LayoutName>('Circular')
   const [opened, setOpened] = useState<boolean>(false)
+  
+  const maxIterations = useSettingsStore.use.graphLayoutMaxIterations()
 
   const layoutCircular = useLayoutCircular()
   const layoutCirclepack = useLayoutCirclepack()
   const layoutRandom = useLayoutRandom()
   const layoutNoverlap = useLayoutNoverlap({ settings: { margin: 1 } })
-  const layoutForce = useLayoutForce({ maxIterations: 20 })
-  const layoutForceAtlas2 = useLayoutForceAtlas2({ iterations: 20 })
+  const layoutForce = useLayoutForce({ maxIterations: maxIterations })
+  const layoutForceAtlas2 = useLayoutForceAtlas2({ iterations: maxIterations })
   const workerNoverlap = useWorkerLayoutNoverlap()
   const workerForce = useWorkerLayoutForce()
   const workerForceAtlas2 = useWorkerLayoutForceAtlas2()

lightrag_webui/src/components/graph/Settings.tsx

@@ -1,9 +1,10 @@
+import { useState, useCallback, useEffect } from 'react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
 import Checkbox from '@/components/ui/Checkbox'
 import Button from '@/components/ui/Button'
 import Separator from '@/components/ui/Separator'
 import Input from '@/components/ui/Input'
-import { useState, useCallback, useEffect } from 'react'
+
 import { controlButtonVariant } from '@/lib/constants'
 import { useSettingsStore } from '@/stores/settings'
 import { useBackendState } from '@/stores/state'
@@ -35,6 +36,74 @@ const LabeledCheckBox = ({
   )
 }
 
+/**
+ * Component that displays a number input with a label.
+ */
+const LabeledNumberInput = ({
+  value,
+  onEditFinished,
+  label,
+  min,
+  max
+}: {
+  value: number
+  onEditFinished: (value: number) => void
+  label: string
+  min: number
+  max?: number
+}) => {
+  const [currentValue, setCurrentValue] = useState<number | null>(value)
+
+  const onValueChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const text = e.target.value.trim()
+      if (text.length === 0) {
+        setCurrentValue(null)
+        return
+      }
+      const newValue = Number.parseInt(text)
+      if (!isNaN(newValue) && newValue !== currentValue) {
+        if (min !== undefined && newValue < min) {
+          return
+        }
+        if (max !== undefined && newValue > max) {
+          return
+        }
+        setCurrentValue(newValue)
+      }
+    },
+    [currentValue, min, max]
+  )
+
+  const onBlur = useCallback(() => {
+    if (currentValue !== null && value !== currentValue) {
+      onEditFinished(currentValue)
+    }
+  }, [value, currentValue, onEditFinished])
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label
+        htmlFor="terms"
+        className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {label}
+      </label>
+      <Input
+        value={currentValue || ''}
+        onChange={onValueChange}
+        className="h-6 w-full min-w-0"
+        onBlur={onBlur}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            onBlur()
+          }
+        }}
+      />
+    </div>
+  )
+}
+
 /**
  * Component that displays a popover with settings options.
  */
@@ -45,11 +114,12 @@ export default function Settings() {
   const showPropertyPanel = useSettingsStore.use.showPropertyPanel()
   const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
   const showNodeLabel = useSettingsStore.use.showNodeLabel()
-
   const enableEdgeEvents = useSettingsStore.use.enableEdgeEvents()
   const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
   const enableHideUnselectedEdges = useSettingsStore.use.enableHideUnselectedEdges()
   const showEdgeLabel = useSettingsStore.use.showEdgeLabel()
+  const graphQueryMaxDepth = useSettingsStore.use.graphQueryMaxDepth()
+  const graphLayoutMaxIterations = useSettingsStore.use.graphLayoutMaxIterations()
 
   const enableHealthCheck = useSettingsStore.use.enableHealthCheck()
   const apiKey = useSettingsStore.use.apiKey()
@@ -102,6 +172,16 @@ export default function Settings() {
     []
   )
 
+  const setGraphQueryMaxDepth = useCallback((depth: number) => {
+    if (depth < 1) return
+    useSettingsStore.setState({ graphQueryMaxDepth: depth })
+  }, [])
+
+  const setGraphLayoutMaxIterations = useCallback((iterations: number) => {
+    if (iterations < 1) return
+    useSettingsStore.setState({ graphLayoutMaxIterations: iterations })
+  }, [])
+
   const setApiKey = useCallback(async () => {
     useSettingsStore.setState({ apiKey: tempApiKey || null })
     await useBackendState.getState().check()
@@ -129,6 +209,14 @@ export default function Settings() {
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
         <div className="flex flex-col gap-2">
+          <LabeledCheckBox
+            checked={enableHealthCheck}
+            onCheckedChange={setEnableHealthCheck}
+            label="Health Check"
+          />
+
+          <Separator />
+
           <LabeledCheckBox
             checked={showPropertyPanel}
             onCheckedChange={setShowPropertyPanel}
@@ -172,11 +260,18 @@ export default function Settings() {
           />
 
           <Separator />
-
-          <LabeledCheckBox
-            checked={enableHealthCheck}
-            onCheckedChange={setEnableHealthCheck}
-            label="Health Check"
+          <LabeledNumberInput
+            label="Max Query Depth"
+            min={1}
+            value={graphQueryMaxDepth}
+            onEditFinished={setGraphQueryMaxDepth}
+          />
+          <LabeledNumberInput
+            label="Max Layout Iterations"
+            min={1}
+            max={20}
+            value={graphLayoutMaxIterations}
+            onEditFinished={setGraphLayoutMaxIterations}
           />
 
           <Separator />

lightrag_webui/src/components/retrieval/ChatMessage.tsx

@@ -2,6 +2,7 @@ import { ReactNode, useCallback } from 'react'
 import { Message } from '@/api/lightrag'
 import useTheme from '@/hooks/useTheme'
 import Button from '@/components/ui/Button'
+import { cn } from '@/lib/utils'
 
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -101,7 +102,10 @@ const CodeHighlight = ({ className, children, node, ...props }: CodeHighlightPro
       {String(children).replace(/\n$/, '')}
     </SyntaxHighlighter>
   ) : (
-    <code className={className} {...props}>
+    <code
+      className={cn(className, 'mx-1 rounded-xs bg-black/10 px-1 dark:bg-gray-100/20')}
+      {...props}
+    >
       {children}
     </code>
   )