feat (graph settings): Add edge thickness range configuration function

lightrag_webui/src/components/graph/GraphControl.tsx

@@ -36,6 +36,8 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
   const enableEdgeEvents = useSettingsStore.use.enableEdgeEvents()
   const renderEdgeLabels = useSettingsStore.use.showEdgeLabel()
   const renderLabels = useSettingsStore.use.showNodeLabel()
+  const minEdgeSize = useSettingsStore.use.minEdgeSize()
+  const maxEdgeSize = useSettingsStore.use.maxEdgeSize()
   const selectedNode = useGraphStore.use.selectedNode()
   const focusedNode = useGraphStore.use.focusedNode()
   const selectedEdge = useGraphStore.use.selectedEdge()
@@ -136,6 +138,51 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     registerEvents(events)
   }, [registerEvents, enableEdgeEvents])
 
+  /**
+   * When edge size settings change, recalculate edge sizes and refresh the sigma instance
+   * to ensure changes take effect immediately
+   */
+  useEffect(() => {
+    if (sigma && sigmaGraph) {
+      // Get the graph from sigma
+      const graph = sigma.getGraph()
+
+      // Find min and max weight values
+      let minWeight = Number.MAX_SAFE_INTEGER
+      let maxWeight = 0
+
+      graph.forEachEdge(edge => {
+        // Get original weight (before scaling)
+        const weight = graph.getEdgeAttribute(edge, 'originalWeight') || 1
+        if (typeof weight === 'number') {
+          minWeight = Math.min(minWeight, weight)
+          maxWeight = Math.max(maxWeight, weight)
+        }
+      })
+
+      // Scale edge sizes based on weight range and current min/max edge size settings
+      const weightRange = maxWeight - minWeight
+      if (weightRange > 0) {
+        const sizeScale = maxEdgeSize - minEdgeSize
+        graph.forEachEdge(edge => {
+          const weight = graph.getEdgeAttribute(edge, 'originalWeight') || 1
+          if (typeof weight === 'number') {
+            const scaledSize = minEdgeSize + sizeScale * Math.pow((weight - minWeight) / weightRange, 0.5)
+            graph.setEdgeAttribute(edge, 'size', scaledSize)
+          }
+        })
+      } else {
+        // If all weights are the same, use default size
+        graph.forEachEdge(edge => {
+          graph.setEdgeAttribute(edge, 'size', minEdgeSize)
+        })
+      }
+
+      // Refresh the sigma instance to apply changes
+      sigma.refresh()
+    }
+  }, [sigma, sigmaGraph, minEdgeSize, maxEdgeSize])
+
   /**
    * When component mount or hovered node change
    * => Setting the sigma reducers

lightrag_webui/src/components/graph/Settings.tsx

@@ -120,6 +120,8 @@ export default function Settings() {
   const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
   const enableHideUnselectedEdges = useSettingsStore.use.enableHideUnselectedEdges()
   const showEdgeLabel = useSettingsStore.use.showEdgeLabel()
+  const minEdgeSize = useSettingsStore.use.minEdgeSize()
+  const maxEdgeSize = useSettingsStore.use.maxEdgeSize()
   const graphQueryMaxDepth = useSettingsStore.use.graphQueryMaxDepth()
   const graphMinDegree = useSettingsStore.use.graphMinDegree()
   const graphLayoutMaxIterations = useSettingsStore.use.graphLayoutMaxIterations()
@@ -269,6 +271,40 @@ export default function Settings() {
               label={t('graphPanel.sideBar.settings.edgeEvents')}
             />
 
+            <div className="flex flex-col gap-2">
+              <label className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                {t('graphPanel.sideBar.settings.edgeSizeRange')}
+              </label>
+              <div className="flex items-center gap-2">
+                <Input
+                  type="number"
+                  value={minEdgeSize}
+                  onChange={(e) => {
+                    const newValue = Number(e.target.value);
+                    if (!isNaN(newValue) && newValue >= 1 && newValue <= maxEdgeSize) {
+                      useSettingsStore.setState({ minEdgeSize: newValue });
+                    }
+                  }}
+                  className="h-6 w-16 min-w-0 pr-1"
+                  min={1}
+                  max={maxEdgeSize}
+                />
+                <span>-</span>
+                <Input
+                  type="number"
+                  value={maxEdgeSize}
+                  onChange={(e) => {
+                    const newValue = Number(e.target.value);
+                    if (!isNaN(newValue) && newValue >= minEdgeSize && newValue >= 1) {
+                      useSettingsStore.setState({ maxEdgeSize: newValue });
+                    }
+                  }}
+                  className="h-6 w-16 min-w-0 pr-1"
+                  min={minEdgeSize}
+                />
+              </div>
+            </div>
+
             <Separator />
             <LabeledNumberInput
               label={t('graphPanel.sideBar.settings.maxQueryDepth')}