add graph depth and layout iteration settings

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)
   }, [])