From b003d613eed40775fdfa64f65e9ee0ede71d1320 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Sun, 6 Apr 2025 15:53:04 +0800
Subject: [PATCH] Add initial value display for AsyncSelect

---
 .../src/components/graph/GraphLabels.tsx           | 12 ++++++------
 lightrag_webui/src/components/ui/AsyncSelect.tsx   | 14 +++++++++++++-
 lightrag_webui/src/hooks/useLightragGraph.tsx      |  7 -------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/lightrag_webui/src/components/graph/GraphLabels.tsx b/lightrag_webui/src/components/graph/GraphLabels.tsx
index 29ff798e..25de04bc 100644
--- a/lightrag_webui/src/components/graph/GraphLabels.tsx
+++ b/lightrag_webui/src/components/graph/GraphLabels.tsx
@@ -57,20 +57,20 @@ const GraphLabels = () => {
     [getSearchEngine]
   )
 
-  // Show queryLabel validation status
+  // Validate label
   useEffect(() => {
 
     if (labelsFetchAttempted) {
       if (allDatabaseLabels.length > 1) {
         if (label && label !== '*' && !allDatabaseLabels.includes(label)) {
-          console.log(`Label "${label}" not in available labels`);
-          // useSettingsStore.getState().setQueryLabel('*');
+          console.log(`Label "${label}" not in available labels, setting to "*"`);
+          useSettingsStore.getState().setQueryLabel('*');
         } else {
           console.log(`Label "${label}" is valid`);
         }
-      } else if (allDatabaseLabels.length <= 1 && label && label !== '*') {
-        console.log('Available labels list is empty');
-        // useSettingsStore.getState().setQueryLabel('');
+      } else if (label && allDatabaseLabels.length <= 1 && label && label !== '*') {
+        console.log('Available labels list is empty, setting label to empty');
+        useSettingsStore.getState().setQueryLabel('');
       }
       useGraphStore.getState().setLabelsFetchAttempted(false)
     }
diff --git a/lightrag_webui/src/components/ui/AsyncSelect.tsx b/lightrag_webui/src/components/ui/AsyncSelect.tsx
index 37c50185..e0eec5f4 100644
--- a/lightrag_webui/src/components/ui/AsyncSelect.tsx
+++ b/lightrag_webui/src/components/ui/AsyncSelect.tsx
@@ -96,12 +96,24 @@ export function AsyncSelect<T>({
   const [searchTerm, setSearchTerm] = useState('')
   const debouncedSearchTerm = useDebounce(searchTerm, preload ? 0 : 150)
   const [originalOptions, setOriginalOptions] = useState<T[]>([])
+  const [initialValueDisplay, setInitialValueDisplay] = useState<React.ReactNode | null>(null)
 
   useEffect(() => {
     setMounted(true)
     setSelectedValue(value)
   }, [value])
 
+  // Add an effect to handle initial value display
+  useEffect(() => {
+    if (value && (!options.length || !selectedOption)) {
+      // Create a temporary display until options are loaded
+      setInitialValueDisplay(<div>{value}</div>)
+    } else if (selectedOption) {
+      // Once we find the actual selectedOption, clear the temporary display
+      setInitialValueDisplay(null)
+    }
+  }, [value, options.length, selectedOption])
+
   // Initialize selectedOption when options are loaded and value exists
   useEffect(() => {
     if (value && options.length > 0) {
@@ -194,7 +206,7 @@ export function AsyncSelect<T>({
           tooltip={triggerTooltip}
           side="bottom"
         >
-          {selectedOption ? getDisplayValue(selectedOption) : placeholder}
+          {selectedOption ? getDisplayValue(selectedOption) : (initialValueDisplay || placeholder)}
           <ChevronsUpDown className="opacity-50" size={10} />
         </Button>
       </PopoverTrigger>
diff --git a/lightrag_webui/src/hooks/useLightragGraph.tsx b/lightrag_webui/src/hooks/useLightragGraph.tsx
index 12bbea8f..d5b66300 100644
--- a/lightrag_webui/src/hooks/useLightragGraph.tsx
+++ b/lightrag_webui/src/hooks/useLightragGraph.tsx
@@ -450,13 +450,6 @@ const useLightrangeGraph = () => {
           state.setRawGraph(data);
           state.setGraphIsEmpty(false);
 
-          // ensusre GraphLabels show the current label on first load
-          const lastSuccessfulQueryLabel = useGraphStore.getState().lastSuccessfulQueryLabel;
-          if (!lastSuccessfulQueryLabel){
-            useSettingsStore.getState().setQueryLabel('');
-            useSettingsStore.getState().setQueryLabel(queryLabel);
-            console.log('Set queryLabel after query on page first load');
-          }
           // Update last successful query label
           state.setLastSuccessfulQueryLabel(currentQueryLabel);