From 3efcf4684ca27fb465f06e9d6b1d574cda271ce8 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Mon, 17 Mar 2025 21:12:29 +0800
Subject: [PATCH] Added data reload button to graph labels component

---
 .../src/components/graph/GraphLabels.tsx      | 100 +++++++++++-------
 lightrag_webui/src/locales/en.json            |   3 +-
 lightrag_webui/src/locales/zh.json            |   3 +-
 3 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/lightrag_webui/src/components/graph/GraphLabels.tsx b/lightrag_webui/src/components/graph/GraphLabels.tsx
index e7b955c6..606a2d60 100644
--- 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>
   )
 }
 
diff --git a/lightrag_webui/src/locales/en.json b/lightrag_webui/src/locales/en.json
index 6b80327c..ea1e9a19 100644
--- 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": {
diff --git a/lightrag_webui/src/locales/zh.json b/lightrag_webui/src/locales/zh.json
index 26a11fa2..196124ff 100644
--- 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": {