Fix: Preserve Leading Spaces in Graph Label Selection

[danielaskdd]

Fix: Preserve Leading Spaces in Graph Label Selection

🐛 Problem Description

The graph label dropdown was losing leading spaces when users selected labels that contained leading whitespace characters. This caused:

• Labels with leading spaces truncated
• Graph data loading failures due to mismatched label names

🔍 Root Cause Analysis

Through comprehensive debugging, we identified that the issue was caused by the cmdk library's CommandItem component internally trimming the value attribute, which stripped leading spaces from label values during the selection process.

✅ Solution

Implemented a robust fix with three key components:

1. Safe Value Mapping in AsyncSelect Component

• Modified CommandItem to use safe index-based values (option-${index}-${optionValue.length}) that won't be trimmed
• Added value mapping logic to extract original values with preserved leading spaces
• Maintained backward compatibility with existing functionality

2. CSS Display Preservation

• Added whiteSpace: 'pre' styling to both renderOption and getDisplayValue functions
• Ensures leading spaces are visually preserved in the dropdown and selected value display

3. Enhanced Debugging Support

• Added comprehensive logging in the backend API to track label parameter handling

📁 Files Modified

• lightrag_webui/src/components/ui/AsyncSelect.tsx: Core fix for value preservation
• lightrag_webui/src/components/graph/GraphLabels.tsx: Display styling improvements
• lightrag/api/routers/graph_routes.py: Enhanced debugging support

🔧 Technical Details

The solution uses an elegant index-mapping approach that bypasses the cmdk library's internal string trimming while maintaining all existing functionality. The safe value format (option-${index}-${optionValue.length}) ensures uniqueness and prevents conflicts.