From 25b5d176cd47318e0c7125cb5c591e0478954171 Mon Sep 17 00:00:00 2001
From: yangdx <gzdaniel@me.com>
Date: Sun, 31 Aug 2025 02:54:39 +0800
Subject: [PATCH] Fix label selection with leading/trailing whitespace
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Fix AsyncSelect value trimming issue
• Preserve whitespace in label display
• Use safe keys for command items
• Add GraphControl dependency fix
• Add debug logging for graph labels
---
 lightrag/api/routers/graph_routes.py          |  5 +++
 .../src/components/graph/GraphControl.tsx     |  2 +-
 .../src/components/graph/GraphLabels.tsx      |  4 +-
 .../src/components/ui/AsyncSelect.tsx         | 44 ++++++++++++-------
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/lightrag/api/routers/graph_routes.py b/lightrag/api/routers/graph_routes.py
index f02779df..42c20e6a 100644
--- a/lightrag/api/routers/graph_routes.py
+++ b/lightrag/api/routers/graph_routes.py
@@ -66,6 +66,11 @@ def create_graph_routes(rag, api_key: Optional[str] = None):
             Dict[str, List[str]]: Knowledge graph for label
         """
         try:
+            # Log the label parameter to check for leading spaces
+            logger.debug(
+                f"get_knowledge_graph called with label: '{label}' (length: {len(label)}, repr: {repr(label)})"
+            )
+
             return await rag.get_knowledge_graph(
                 node_label=label,
                 max_depth=max_depth,
diff --git a/lightrag_webui/src/components/graph/GraphControl.tsx b/lightrag_webui/src/components/graph/GraphControl.tsx
index 8211178a..af7cf250 100644
--- a/lightrag_webui/src/components/graph/GraphControl.tsx
+++ b/lightrag_webui/src/components/graph/GraphControl.tsx
@@ -142,7 +142,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
 
     // Register the events
     registerEvents(events)
-  }, [registerEvents, enableEdgeEvents])
+  }, [registerEvents, enableEdgeEvents, sigma])
 
   /**
    * When edge size settings change, recalculate edge sizes and refresh the sigma instance
diff --git a/lightrag_webui/src/components/graph/GraphLabels.tsx b/lightrag_webui/src/components/graph/GraphLabels.tsx
index 9321a14e..4938ee05 100644
--- a/lightrag_webui/src/components/graph/GraphLabels.tsx
+++ b/lightrag_webui/src/components/graph/GraphLabels.tsx
@@ -140,9 +140,9 @@ const GraphLabels = () => {
         searchInputClassName="max-h-8"
         triggerTooltip={t('graphPanel.graphLabels.selectTooltip')}
         fetcher={fetchData}
-        renderOption={(item) => <div>{item}</div>}
+        renderOption={(item) => <div style={{ whiteSpace: 'pre' }}>{item}</div>}
         getOptionValue={(item) => item}
-        getDisplayValue={(item) => <div>{item}</div>}
+        getDisplayValue={(item) => <div style={{ whiteSpace: 'pre' }}>{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')}
diff --git a/lightrag_webui/src/components/ui/AsyncSelect.tsx b/lightrag_webui/src/components/ui/AsyncSelect.tsx
index c42d60b7..9a5a17f8 100644
--- a/lightrag_webui/src/components/ui/AsyncSelect.tsx
+++ b/lightrag_webui/src/components/ui/AsyncSelect.tsx
@@ -245,22 +245,34 @@ export function AsyncSelect<T>({
                 </CommandEmpty>
               ))}
             <CommandGroup>
-              {options.map((option) => (
-                <CommandItem
-                  key={getOptionValue(option)}
-                  value={getOptionValue(option)}
-                  onSelect={handleSelect}
-                  className="truncate"
-                >
-                  {renderOption(option)}
-                  <Check
-                    className={cn(
-                      'ml-auto h-3 w-3',
-                      selectedValue === getOptionValue(option) ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                </CommandItem>
-              ))}
+              {options.map((option, index) => {
+                const optionValue = getOptionValue(option);
+                // Use index as a safe value that won't be trimmed by cmdk
+                const safeValue = `option-${index}-${optionValue.length}`;
+
+                return (
+                  <CommandItem
+                    key={optionValue}
+                    value={safeValue}
+                    onSelect={(selectedSafeValue) => {
+                      // Extract the original value from the safe value
+                      const selectedIndex = parseInt(selectedSafeValue.split('-')[1]);
+                      const originalValue = getOptionValue(options[selectedIndex]);
+                      console.log(`CommandItem onSelect: safeValue='${selectedSafeValue}', originalValue='${originalValue}' (length: ${originalValue.length})`);
+                      handleSelect(originalValue);
+                    }}
+                    className="truncate"
+                  >
+                    {renderOption(option)}
+                    <Check
+                      className={cn(
+                        'ml-auto h-3 w-3',
+                        selectedValue === optionValue ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                  </CommandItem>
+                );
+              })}
             </CommandGroup>
           </CommandList>
         </Command>