feat: Add legend components and toggle buttons

lightrag_webui/src/stores/graph.ts

@@ -77,6 +77,8 @@ interface GraphState {
   graphIsEmpty: boolean
   lastSuccessfulQueryLabel: string
 
+  typeColorMap: Map<string, string>
+
   // Global flags to track data fetching attempts
   graphDataFetchAttempted: boolean
   labelsFetchAttempted: boolean
@@ -136,6 +138,8 @@ const useGraphStoreBase = create<GraphState>()((set) => ({
   sigmaInstance: null,
   allDatabaseLabels: ['*'],
 
+  typeColorMap: new Map<string, string>(),
+
   searchEngine: null,
 
   setGraphIsEmpty: (isEmpty: boolean) => set({ graphIsEmpty: isEmpty }),
@@ -166,7 +170,6 @@ const useGraphStoreBase = create<GraphState>()((set) => ({
       searchEngine: null,
       moveToSelectedNode: false,
       graphIsEmpty: false
-      // Do not reset lastSuccessfulQueryLabel here as it's used to track query history
     });
   },
 
@@ -199,6 +202,8 @@ const useGraphStoreBase = create<GraphState>()((set) => ({
 
   setSigmaInstance: (instance: any) => set({ sigmaInstance: instance }),
 
+  setTypeColorMap: (typeColorMap: Map<string, string>) => set({ typeColorMap }),
+
   setSearchEngine: (engine: MiniSearch | null) => set({ searchEngine: engine }),
   resetSearchEngine: () => set({ searchEngine: null }),
 

lightrag_webui/src/stores/settings.ts

@@ -16,6 +16,8 @@ interface SettingsState {
   // Graph viewer settings
   showPropertyPanel: boolean
   showNodeSearchBar: boolean
+  showLegend: boolean
+  setShowLegend: (show: boolean) => void
 
   showNodeLabel: boolean
   enableNodeDrag: boolean
@@ -68,6 +70,7 @@ const useSettingsStoreBase = create<SettingsState>()(
       language: 'en',
       showPropertyPanel: true,
       showNodeSearchBar: true,
+      showLegend: false,
 
       showNodeLabel: true,
       enableNodeDrag: true,
@@ -145,7 +148,8 @@ const useSettingsStoreBase = create<SettingsState>()(
           querySettings: { ...state.querySettings, ...settings }
         })),
 
-      setShowFileName: (show: boolean) => set({ showFileName: show })
+      setShowFileName: (show: boolean) => set({ showFileName: show }),
+      setShowLegend: (show: boolean) => set({ showLegend: show })
     }),
     {
       name: 'settings-storage',