Merge branch 'feat-node-expand' into webui-node-expansion

2025-03-17 21:16:42 +08:00
parent 17f4d3a5ab a2cdfcb803
commit 5e1c9f93ca
6 changed files with 176 additions and 139 deletions
--- a/lightrag/api/webui/assets/index-DuxTk-ly.js
+++ b/lightrag/api/webui/assets/index-DuxTk-ly.js
--- a/lightrag/api/webui/index.html
+++ b/lightrag/api/webui/index.html
@@ -8,7 +8,7 @@
    <link rel="icon" type="image/svg+xml" href="./logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lightrag</title>
-    <script type="module" crossorigin src="./assets/index-BpDMZCmZ.js"></script>
+    <script type="module" crossorigin src="./assets/index-DuxTk-ly.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-BEGlBF11.css">
  </head>
  <body>
--- a/lightrag_webui/src/components/graph/GraphLabels.tsx
+++ b/lightrag_webui/src/components/graph/GraphLabels.tsx
@@ -2,14 +2,17 @@ import { useCallback, useEffect, useRef } from 'react'
 import { AsyncSelect } from '@/components/ui/AsyncSelect'
 import { useSettingsStore } from '@/stores/settings'
 import { useGraphStore } from '@/stores/graph'
-import { labelListLimit } from '@/lib/constants'
+import { labelListLimit, controlButtonVariant } from '@/lib/constants'
 import MiniSearch from 'minisearch'
 import { useTranslation } from 'react-i18next'
+import { RefreshCw } from 'lucide-react'
+import Button from '@/components/ui/Button'

 const GraphLabels = () => {
  const { t } = useTranslation()
  const label = useSettingsStore.use.queryLabel()
  const allDatabaseLabels = useGraphStore.use.allDatabaseLabels()
+  const rawGraph = useGraphStore.use.rawGraph()
  const labelsLoadedRef = useRef(false)

  // Track if a fetch is in progress to prevent multiple simultaneous fetches
@@ -83,47 +86,70 @@ const GraphLabels = () => {
    [getSearchEngine]
  )

+  const handleRefresh = useCallback(() => {
+    const currentLabel = useSettingsStore.getState().queryLabel
+
+    useGraphStore.getState().setGraphDataFetchAttempted(false)
+
+    useGraphStore.getState().reset()
+
+    useSettingsStore.getState().setQueryLabel(currentLabel)
+  }, [])
+
  return (
-    <AsyncSelect<string>
-      className="ml-2"
-      triggerClassName="max-h-8"
-      searchInputClassName="max-h-8"
-      triggerTooltip={t('graphPanel.graphLabels.selectTooltip')}
-      fetcher={fetchData}
-      renderOption={(item) => <div>{item}</div>}
-      getOptionValue={(item) => item}
-      getDisplayValue={(item) => <div>{item}</div>}
-      notFound={<div className="py-6 text-center text-sm">No labels found</div>}
-      label={t('graphPanel.graphLabels.label')}
-      placeholder={t('graphPanel.graphLabels.placeholder')}
-      value={label !== null ? label : '*'}
-      onChange={(newLabel) => {
-        const currentLabel = useSettingsStore.getState().queryLabel
+    <div className="flex items-center">
+      {rawGraph && (
+        <Button
+          size="icon"
+          variant={controlButtonVariant}
+          onClick={handleRefresh}
+          tooltip={t('graphPanel.graphLabels.refreshTooltip')}
+          className="mr-1"
+        >
+          <RefreshCw className="h-4 w-4" />
+        </Button>
+      )}
+      <AsyncSelect<string>
+        className="ml-2"
+        triggerClassName="max-h-8"
+        searchInputClassName="max-h-8"
+        triggerTooltip={t('graphPanel.graphLabels.selectTooltip')}
+        fetcher={fetchData}
+        renderOption={(item) => <div>{item}</div>}
+        getOptionValue={(item) => item}
+        getDisplayValue={(item) => <div>{item}</div>}
+        notFound={<div className="py-6 text-center text-sm">No labels found</div>}
+        label={t('graphPanel.graphLabels.label')}
+        placeholder={t('graphPanel.graphLabels.placeholder')}
+        value={label !== null ? label : '*'}
+        onChange={(newLabel) => {
+          const currentLabel = useSettingsStore.getState().queryLabel

-        // select the last item means query all
-        if (newLabel === '...') {
-          newLabel = '*'
-        }
+          // select the last item means query all
+          if (newLabel === '...') {
+            newLabel = '*'
+          }

-        // Reset the fetch attempted flag to force a new data fetch
-        useGraphStore.getState().setGraphDataFetchAttempted(false)
+          // Reset the fetch attempted flag to force a new data fetch
+          useGraphStore.getState().setGraphDataFetchAttempted(false)

-        // Clear current graph data to ensure complete reload when label changes
-        if (newLabel !== currentLabel) {
-          const graphStore = useGraphStore.getState();
-          // Reset the all graph objects and status
-          graphStore.reset();
-        }
+          // Clear current graph data to ensure complete reload when label changes
+          if (newLabel !== currentLabel) {
+            const graphStore = useGraphStore.getState();
+            // Reset the all graph objects and status
+            graphStore.reset();
+          }

-        if (newLabel === currentLabel && newLabel !== '*') {
-          // reselect the same itme means qery all
-          useSettingsStore.getState().setQueryLabel('*')
-        } else {
-          useSettingsStore.getState().setQueryLabel(newLabel)
-        }
-      }}
-      clearable={false}  // Prevent clearing value on reselect
-    />
+          if (newLabel === currentLabel && newLabel !== '*') {
+            // reselect the same itme means qery all
+            useSettingsStore.getState().setQueryLabel('*')
+          } else {
+            useSettingsStore.getState().setQueryLabel(newLabel)
+          }
+        }}
+        clearable={false}  // Prevent clearing value on reselect
+      />
+    </div>
  )
 }

--- a/lightrag_webui/src/components/graph/LayoutsControl.tsx
+++ b/lightrag_webui/src/components/graph/LayoutsControl.tsx
@@ -203,10 +203,19 @@ const LayoutsControl = () => {
  const layoutCircular = useLayoutCircular()
  const layoutCirclepack = useLayoutCirclepack()
  const layoutRandom = useLayoutRandom()
-  const layoutNoverlap = useLayoutNoverlap({ settings: { margin: 1 } })
+  const layoutNoverlap = useLayoutNoverlap({
+    maxIterations: maxIterations,
+    settings: {
+      margin: 2,
+      expansion: 1.1,
+      gridSize: 5,
+      ratio: 1,
+      speed: 3,
+    }
+  })
  // Add parameters for Force Directed layout to improve convergence
  const layoutForce = useLayoutForce({
-    maxIterations: maxIterations * 3, // Triple the iterations for better convergence
+    maxIterations: maxIterations,
    settings: {
      attraction: 0.0003,  // Lower attraction force to reduce oscillation
      repulsion: 0.05,     // Lower repulsion force to reduce oscillation
--- a/lightrag_webui/src/locales/en.json
+++ b/lightrag_webui/src/locales/en.json
@@ -182,7 +182,8 @@
      "noLabels": "No labels found",
      "label": "Label",
      "placeholder": "Search labels...",
-      "andOthers": "And {count} others"
+      "andOthers": "And {count} others",
+      "refreshTooltip": "Reload graph data"
    }
  },
  "retrievePanel": {
--- a/lightrag_webui/src/locales/zh.json
+++ b/lightrag_webui/src/locales/zh.json
@@ -179,7 +179,8 @@
      "noLabels": "未找到标签",
      "label": "标签",
      "placeholder": "搜索标签...",
-      "andOthers": "还有 {count} 个"
+      "andOthers": "还有 {count} 个",
+      "refreshTooltip": "重新加载图形数据"
    }
  },
  "retrievePanel": {