Merge branch 'ui-speedup'

Author: danielaskdd

lightrag_webui/src/components/graph/GraphControl.tsx

@@ -37,12 +37,26 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
   const selectedEdge = useGraphStore.use.selectedEdge()
   const focusedEdge = useGraphStore.use.focusedEdge()
   const sigmaGraph = useGraphStore.use.sigmaGraph()
+  const graphEdgeCount = useGraphStore.use.graphEdgeCount()
+
+  // Mirror GraphViewer's gating: above EDGE_PERF_LIMIT the sigma instance is
+  // (re)built without the edge picking buffer, so edge events cannot fire even
+  // though the user setting may be on. Use this — not the raw setting — for
+  // event registration and the reducers, so we never run the costly edge-focus
+  // path against a graph that can't actually pick edges.
+  const effectiveEdgeEvents = enableEdgeEvents && graphEdgeCount <= Constants.EDGE_PERF_LIMIT
 
   // The graph the initial FA2 layout has already been run for. Used to run the
   // layout once PER GRAPH, not once per sigma instance (a theme change rebuilds
   // the instance and re-runs the bind effect with the SAME graph).
   const laidOutGraphRef = useRef<unknown>(null)
 
+  // Last (sigma instance, curved decision) the edge-type effect applied. A
+  // rebuild (theme toggle / edge-events gating) creates a fresh sigma whose
+  // defaultEdgeType reverts to its construction default ('rect'), so we must
+  // re-apply when the INSTANCE changed too — not only when the decision flips.
+  const edgeTypeRef = useRef<{ sigma: unknown; curved: boolean } | null>(null)
+
   /**
    * When component mounts or the graph changes
    * => bind graph to sigma and run the initial layout
@@ -76,8 +90,13 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     // effect with the SAME graph, which already carries settled positions —
     // re-running FA2 there would replay the relaxation animation on every theme
     // switch. Only (re)bind in that case; skip the layout.
+    //
+    // The ref is marked "laid out" only when the budget timer fires (layout
+    // settled), NOT before start: if a rebuild interrupts the layout mid-run
+    // (e.g. edge-events gating crosses the threshold during the first load),
+    // the new instance re-runs FA2 from where it was instead of freezing on a
+    // half-relaxed layout. Rebuilds after settling still match and skip.
     if (laidOutGraphRef.current === sigmaGraph) return
-    laidOutGraphRef.current = sigmaGraph
 
     let layout: { start: () => void; stop: () => void; kill: () => void } | null = null
     try {
@@ -100,6 +119,9 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     const timer = window.setTimeout(() => {
       try {
         layout?.stop()
+        // Mark this graph as laid out only now (settled), so a rebuild during
+        // the budget window re-runs the layout rather than skipping it.
+        laidOutGraphRef.current = sigmaGraph
         console.log('FA2 worker layout stopped after budget')
         // Release the shared slot so the store invariant "activeLayoutSupervisor
         // != null => a layout is running" holds (the budget just stopped this
@@ -129,7 +151,13 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
   useEffect(() => {
     if (sigma) {
       const currentInstance = useGraphStore.getState().sigmaInstance
-      if (!currentInstance) {
+      // Update when the instance CHANGED, not only when it's unset. A theme
+      // toggle, an effectiveEdgeEvents flip, or crossing the edge threshold
+      // rebuilds the SigmaContainer (old instance killed, new one created); if
+      // we only wrote on an empty store the killed instance would linger there
+      // and consumers (e.g. expand reading sigmaInstance.getCamera()) would act
+      // on a dead Sigma.
+      if (currentInstance !== sigma) {
         console.log('Setting sigma instance from GraphControl')
         useGraphStore.getState().setSigmaInstance(sigma)
       }
@@ -182,6 +210,45 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     }
   }, [sigma])
 
+  /**
+   * Adapt edge geometry to graph size: curves for small graphs (nicer to read),
+   * straight rectangles above EDGE_PERF_LIMIT (curve tessellation is costly).
+   *
+   * Edges carry no per-edge `type`, so switching `defaultEdgeType` + a full
+   * `refresh()` (which re-adds edges through applyEdgeDefaults) re-selects the
+   * program for the whole graph without touching attributes or rebuilding.
+   *
+   * The ref tracks BOTH the sigma instance and the decision: re-apply when the
+   * instance changed (a rebuild resets defaultEdgeType to 'rect') OR when the
+   * curved/straight decision flipped; skip otherwise so routine expand/prune
+   * within one band don't trigger a full refresh.
+   */
+  useEffect(() => {
+    if (!sigma) return
+    const curved = graphEdgeCount > 0 && graphEdgeCount <= Constants.EDGE_PERF_LIMIT
+    const prev = edgeTypeRef.current
+    if (prev && prev.sigma === sigma && prev.curved === curved) return
+    edgeTypeRef.current = { sigma, curved }
+    setSettings({ defaultEdgeType: curved ? 'curvedNoArrow' : 'rect' })
+    try {
+      sigma.refresh()
+    } catch {
+      /* sigma instance already killed */
+    }
+  }, [sigma, graphEdgeCount, setSettings])
+
+  /**
+   * When edge events become gated off (count crossed above EDGE_PERF_LIMIT),
+   * drop any residual edge focus/selection so the UI (property panel, reducers)
+   * doesn't keep a now-unpickable edge highlighted. Node selection is untouched.
+   */
+  useEffect(() => {
+    if (effectiveEdgeEvents) return
+    const { selectedEdge, focusedEdge, setSelectedEdge, setFocusedEdge } = useGraphStore.getState()
+    if (selectedEdge !== null) setSelectedEdge(null)
+    if (focusedEdge !== null) setFocusedEdge(null)
+  }, [effectiveEdgeEvents])
+
   /**
    * When component mounts
    * => register events
@@ -217,7 +284,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
       clickStage: () => clearSelection()
     }
 
-    if (enableEdgeEvents) {
+    if (effectiveEdgeEvents) {
       events.clickEdge = (event: EdgeEvent) => {
         setSelectedEdge(event.edge)
         setSelectedNode(null)
@@ -235,7 +302,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     }
 
     registerEvents(events)
-  }, [registerEvents, enableEdgeEvents, sigma])
+  }, [registerEvents, effectiveEdgeEvents, sigma])
 
   /**
    * When edge size settings change, recalculate edge sizes.
@@ -297,11 +364,16 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     const effectiveRenderLabels = renderLabels && graphOrder <= Constants.LABEL_RENDER_LIMIT
 
     const _focusedNode = focusedNode || selectedNode
-    const _focusedEdge = focusedEdge || selectedEdge
+    // Ignore any residual edge focus/selection when edge events are gated off
+    // (e.g. an edge was selected on a small graph, then expand pushed it past
+    // EDGE_PERF_LIMIT): otherwise the edge-focused reducer branch below would
+    // still run the per-edge highlight pass on a large graph — exactly the cost
+    // we disabled edge events to avoid.
+    const _focusedEdge = effectiveEdgeEvents ? focusedEdge || selectedEdge : null
 
     if (disableHoverEffect || (!_focusedNode && !_focusedEdge)) {
       setSettings({
-        enableEdgeEvents,
+        enableEdgeEvents: effectiveEdgeEvents,
         renderEdgeLabels,
         renderLabels: effectiveRenderLabels,
         nodeReducer: null,
@@ -331,7 +403,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
       : Constants.edgeColorHighlightedLightTheme
 
     setSettings({
-      enableEdgeEvents,
+      enableEdgeEvents: effectiveEdgeEvents,
       renderEdgeLabels,
       renderLabels: effectiveRenderLabels,
 
@@ -403,7 +475,7 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     disableHoverEffect,
     isDarkTheme,
     hideUnselectedEdges,
-    enableEdgeEvents,
+    effectiveEdgeEvents,
     renderEdgeLabels,
     renderLabels
   ])

lightrag_webui/src/components/graph/Settings.tsx

@@ -5,7 +5,7 @@ import Button from '@/components/ui/Button'
 import Separator from '@/components/ui/Separator'
 import Input from '@/components/ui/Input'
 
-import { controlButtonVariant } from '@/lib/constants'
+import { controlButtonVariant, EDGE_PERF_LIMIT } from '@/lib/constants'
 import { useSettingsStore } from '@/stores/settings'
 import { useGraphStore } from '@/stores/graph'
 import useRandomGraph from '@/hooks/useRandomGraph'
@@ -19,18 +19,27 @@ import { useTranslation } from 'react-i18next';
 const LabeledCheckBox = ({
   checked,
   onCheckedChange,
-  label
+  label,
+  disabled,
+  title
 }: {
   checked: boolean
   onCheckedChange: () => void
   label: string
+  disabled?: boolean
+  title?: string
 }) => {
   // Create unique ID using the label text converted to lowercase with spaces removed
   const id = `checkbox-${label.toLowerCase().replace(/\s+/g, '-')}`;
 
+  // The label's peer-disabled:* classes don't fire — Checkbox carries no `peer`
+  // class — so grey the WHOLE row explicitly when disabled, not just the box.
   return (
-    <div className="flex items-center gap-2">
-      <Checkbox id={id} checked={checked} onCheckedChange={onCheckedChange} />
+    <div
+      className={`flex items-center gap-2${disabled ? ' cursor-not-allowed opacity-50' : ''}`}
+      title={title}
+    >
+      <Checkbox id={id} checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} />
       <label
         htmlFor={id}
         className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -177,6 +186,7 @@ export default function Settings() {
   const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
   const showNodeLabel = useSettingsStore.use.showNodeLabel()
   const enableEdgeEvents = useSettingsStore.use.enableEdgeEvents()
+  const graphEdgeCount = useGraphStore.use.graphEdgeCount()
   const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
   const enableHideUnselectedEdges = useSettingsStore.use.enableHideUnselectedEdges()
   const showEdgeLabel = useSettingsStore.use.showEdgeLabel()
@@ -325,6 +335,12 @@ export default function Settings() {
               checked={enableEdgeEvents}
               onCheckedChange={setEnableEdgeEvents}
               label={t('graphPanel.sideBar.settings.edgeEvents')}
+              disabled={graphEdgeCount > EDGE_PERF_LIMIT}
+              title={
+                graphEdgeCount > EDGE_PERF_LIMIT
+                  ? t('graphPanel.sideBar.settings.edgeEventsDisabledHint', { count: EDGE_PERF_LIMIT })
+                  : undefined
+              }
             />
 
             <div className="flex flex-col gap-2">

lightrag_webui/src/components/graph/SettingsDisplay.tsx

@@ -1,4 +1,5 @@
 import { useSettingsStore } from '@/stores/settings'
+import { useGraphStore } from '@/stores/graph'
 import { useTranslation } from 'react-i18next'
 
 /**
@@ -8,12 +9,17 @@ import { useTranslation } from 'react-i18next'
 const SettingsDisplay = () => {
   const { t } = useTranslation()
   const graphQueryMaxDepth = useSettingsStore.use.graphQueryMaxDepth()
-  const graphMaxNodes = useSettingsStore.use.graphMaxNodes()
+  // Live counts of the rendered graph (reactive: updated on build/expand/prune).
+  // Reading sigmaGraph.order/.size directly would not re-render, since
+  // expand/prune mutate the graph in place.
+  const graphNodeCount = useGraphStore.use.graphNodeCount()
+  const graphEdgeCount = useGraphStore.use.graphEdgeCount()
 
   return (
     <div className="absolute bottom-4 left-[calc(1rem+2.5rem)] flex items-center gap-2 text-xs text-gray-400">
       <div>{t('graphPanel.sideBar.settings.depth')}: {graphQueryMaxDepth}</div>
-      <div>{t('graphPanel.sideBar.settings.max')}: {graphMaxNodes}</div>
+      <div>{t('graphPanel.sideBar.settings.node')}: {graphNodeCount}</div>
+      <div>{t('graphPanel.sideBar.settings.edge')}: {graphEdgeCount}</div>
     </div>
   )
 }

lightrag_webui/src/features/GraphViewer.tsx

@@ -30,7 +30,7 @@ import LegendButton from '@/components/graph/LegendButton'
 import { useSettingsStore } from '@/stores/settings'
 import { useGraphStore } from '@/stores/graph'
 import useIsDarkMode from '@/hooks/useIsDarkMode'
-import { labelColorDarkTheme, labelColorLightTheme, edgeColorDarkTheme } from '@/lib/constants'
+import { labelColorDarkTheme, labelColorLightTheme, edgeColorDarkTheme, EDGE_PERF_LIMIT } from '@/lib/constants'
 
 import '@react-sigma/core/lib/style.css'
 import '@react-sigma/graph-search/lib/style.css'
@@ -158,6 +158,14 @@ const GraphViewer = () => {
   const showLegend = useSettingsStore.use.showLegend()
   const theme = useSettingsStore.use.theme()
   const enableEdgeEvents = useSettingsStore.use.enableEdgeEvents()
+  const graphEdgeCount = useGraphStore.use.graphEdgeCount()
+
+  // Edge events are disabled above EDGE_PERF_LIMIT regardless of the user
+  // setting: the picking buffer renders edges to an extra frame buffer every
+  // frame, which is too costly on large graphs. The user setting is preserved
+  // (Settings greys the menu item but keeps its value), so dropping back below
+  // the limit auto-restores edge events.
+  const effectiveEdgeEvents = enableEdgeEvents && graphEdgeCount <= EDGE_PERF_LIMIT
 
   const [isThemeSwitching, setIsThemeSwitching] = useState(false)
 
@@ -172,8 +180,8 @@ const GraphViewer = () => {
   // enableEdgeEvents is in the deps because it must be baked in at construction
   // (the picking buffer can't be added later); toggling it rebuilds the instance.
   const memoizedSigmaSettings = useMemo(
-    () => createSigmaSettings(isDarkMode, enableEdgeEvents),
-    [isDarkMode, enableEdgeEvents]
+    () => createSigmaSettings(isDarkMode, effectiveEdgeEvents),
+    [isDarkMode, effectiveEdgeEvents]
   )
 
   // Detect theme changes and briefly show a loading overlay to avoid flash of

lightrag_webui/src/hooks/useLightragGraph.tsx

@@ -184,8 +184,14 @@ const fetchGraph = async (label: string, maxDepth: number, maxNodes: number) =>
     console.log(`Fetching graph label: ${queryLabel}, depth: ${maxDepth}, nodes: ${maxNodes}`)
     rawData = await queryGraphs(queryLabel, maxDepth, maxNodes)
   } catch (e) {
+    // Record the backend error, then RETHROW so the caller's .catch() runs its
+    // bounded-retry path. Returning null here would resolve the promise
+    // "successfully" and the .then() handler would treat a transient
+    // network/API failure as an empty graph (reset state, render the "Graph Is
+    // Empty" placeholder, stamp the signature as succeeded) — and retries would
+    // never fire. A genuinely empty result still resolves normally below.
     useBackendState.getState().setErrorMessage(errorMessage(e), 'Query Graphs Error!')
-    return null
+    throw e
   }
 
   let rawGraph = null
@@ -521,6 +527,9 @@ const useLightrangeGraph = () => {
             // Set graph to store
             state.setSigmaGraph(emptyGraph)
             state.setRawGraph(null)
+            // The placeholder carries one synthetic node; the graph is logically
+            // empty, so override the reactive counts back to 0/0.
+            state.setGraphCounts(0, 0)
 
             // Still mark graph as empty for other logic
             state.setGraphIsEmpty(true)
@@ -1059,6 +1068,11 @@ const useLightrangeGraph = () => {
         // Reset search engine to force rebuild
         useGraphStore.getState().resetSearchEngine()
 
+        // The graph was mutated in place (addNode/addEdge), which does NOT
+        // re-notify the store. Refresh the reactive counts so the status bar and
+        // the edge-count adaptive behavior react to the new size.
+        useGraphStore.getState().setGraphCounts(sigmaGraph.order, sigmaGraph.size)
+
         // Update sizes for all nodes and edges
         updateNodeSizes(sigmaGraph, nodesWithDiscardedEdges, minDegree, maxDegree)
         updateEdgeSizes(sigmaGraph, minWeight, maxWeight)
@@ -1166,6 +1180,12 @@ const useLightrangeGraph = () => {
         // Reset search engine to force rebuild
         useGraphStore.getState().resetSearchEngine()
 
+        // In-place dropNode/dropEdge does NOT re-notify the store; refresh the
+        // reactive counts so the status bar and edge-count adaptive behavior
+        // react to the smaller graph (and auto-recover curves/edge events when
+        // the edge count drops back to <= EDGE_PERF_LIMIT).
+        useGraphStore.getState().setGraphCounts(sigmaGraph.order, sigmaGraph.size)
+
         // Show notification if we deleted more than just the selected node
         if (nodesToDelete.size > 1) {
           toast.info(

lightrag_webui/src/lib/constants.ts

@@ -107,6 +107,14 @@ export const LABEL_RENDER_LIMIT = 2000
 // animating: animateNodes interpolates every node per frame on the main thread.
 export const ANIMATE_NODE_LIMIT = 5000
 
+// Edge-count threshold that switches the graph between "small-graph experience"
+// and "large-graph performance". At or below it edges render as curves and edge
+// events (hover/click picking) follow the user setting; above it edges render
+// straight and edge events are fully disabled (no picking buffer allocated).
+// Shared by GraphControl (defaultEdgeType), GraphViewer (enableEdgeEvents
+// gating) and Settings (greying the Edge Events menu item) so they cannot drift.
+export const EDGE_PERF_LIMIT = 5000
+
 // Time budget (ms) a relaxing worker layout runs before it is stopped. Scales
 // with graph size, capped so huge graphs don't run unbounded.
 export const workerBudgetMs = (order: number): number => Math.min(1500 + order / 10, 10000)

lightrag_webui/src/locales/ar.json

@@ -251,12 +251,14 @@
         "showEdgeLabel": "إظهار تسمية الحافة",
         "hideUnselectedEdges": "إخفاء الحواف غير المحددة",
         "edgeEvents": "أحداث الحافة",
+        "edgeEventsDisabledHint": "معطّل للرسوم البيانية التي تحتوي على أكثر من {{count}} حافة",
         "maxQueryDepth": "أقصى عمق للاستعلام",
         "maxNodes": "الحد الأقصى للعقد",
         "resetToDefault": "إعادة التعيين إلى الافتراضي",
         "edgeSizeRange": "نطاق حجم الحافة",
         "depth": "D",
-        "max": "Max",
+        "node": "عقدة",
+        "edge": "حافة",
         "degree": "الدرجة",
         "apiKey": "مفتاح واجهة برمجة التطبيقات",
         "enterYourAPIkey": "أدخل مفتاح واجهة برمجة التطبيقات الخاص بك",

lightrag_webui/src/locales/de.json

@@ -251,12 +251,14 @@
         "showEdgeLabel": "Kantenbezeichnung anzeigen",
         "hideUnselectedEdges": "Nicht ausgewählte Kanten ausblenden",
         "edgeEvents": "Kanten-Ereignisse",
+        "edgeEventsDisabledHint": "Deaktiviert für Graphen mit mehr als {{count}} Kanten",
         "maxQueryDepth": "Maximale Abfragetiefe",
         "maxNodes": "Maximale Knotenanzahl",
         "resetToDefault": "Auf Standard zurücksetzen",
         "edgeSizeRange": "Kantengrößenbereich",
         "depth": "T",
-        "max": "Max",
+        "node": "Knoten",
+        "edge": "Kante",
         "degree": "Grad",
         "apiKey": "API-Schlüssel",
         "enterYourAPIkey": "Geben Sie Ihren API-Schlüssel ein",