Feat: replace min_degree with max_nodes in webui

2025-04-02 18:35:32 +08:00
parent d7d04a0d94
commit 1a1f934e27
9 changed files with 34 additions and 30 deletions
--- a/lightrag_webui/src/api/lightrag.ts
+++ b/lightrag_webui/src/api/lightrag.ts
@@ -221,9 +221,9 @@ axiosInstance.interceptors.response.use(
 export const queryGraphs = async (
  label: string,
  maxDepth: number,
-  minDegree: number
+  maxNodes: number
 ): Promise<LightragGraphType> => {
-  const response = await axiosInstance.get(`/graphs?label=${encodeURIComponent(label)}&max_depth=${maxDepth}&min_degree=${minDegree}`)
+  const response = await axiosInstance.get(`/graphs?label=${encodeURIComponent(label)}&max_depth=${maxDepth}&max_nodes=${maxNodes}`)
  return response.data
 }

--- a/lightrag_webui/src/components/graph/Settings.tsx
+++ b/lightrag_webui/src/components/graph/Settings.tsx
@@ -121,7 +121,7 @@ export default function Settings() {
  const enableHideUnselectedEdges = useSettingsStore.use.enableHideUnselectedEdges()
  const showEdgeLabel = useSettingsStore.use.showEdgeLabel()
  const graphQueryMaxDepth = useSettingsStore.use.graphQueryMaxDepth()
-  const graphMinDegree = useSettingsStore.use.graphMinDegree()
+  const graphMaxNodes = useSettingsStore.use.graphMaxNodes()
  const graphLayoutMaxIterations = useSettingsStore.use.graphLayoutMaxIterations()

  const enableHealthCheck = useSettingsStore.use.enableHealthCheck()
@@ -180,15 +180,14 @@ export default function Settings() {
    }, 300)
  }, [])

-  const setGraphMinDegree = useCallback((degree: number) => {
-    if (degree < 0) return
-    useSettingsStore.setState({ graphMinDegree: degree })
+  const setGraphMaxNodes = useCallback((nodes: number) => {
+    if (nodes < 1 || nodes > 1000) return
+    useSettingsStore.setState({ graphMaxNodes: nodes })
    const currentLabel = useSettingsStore.getState().queryLabel
    useSettingsStore.getState().setQueryLabel('')
    setTimeout(() => {
      useSettingsStore.getState().setQueryLabel(currentLabel)
    }, 300)
-
  }, [])

  const setGraphLayoutMaxIterations = useCallback((iterations: number) => {
@@ -277,10 +276,11 @@ export default function Settings() {
              onEditFinished={setGraphQueryMaxDepth}
            />
            <LabeledNumberInput
-              label={t('graphPanel.sideBar.settings.minDegree')}
-              min={0}
-              value={graphMinDegree}
-              onEditFinished={setGraphMinDegree}
+              label={t('graphPanel.sideBar.settings.maxNodes')}
+              min={1}
+              max={1000}
+              value={graphMaxNodes}
+              onEditFinished={setGraphMaxNodes}
            />
            <LabeledNumberInput
              label={t('graphPanel.sideBar.settings.maxLayoutIterations')}
--- a/lightrag_webui/src/components/graph/SettingsDisplay.tsx
+++ b/lightrag_webui/src/components/graph/SettingsDisplay.tsx
@@ -8,12 +8,12 @@ import { useTranslation } from 'react-i18next'
 const SettingsDisplay = () => {
  const { t } = useTranslation()
  const graphQueryMaxDepth = useSettingsStore.use.graphQueryMaxDepth()
-  const graphMinDegree = useSettingsStore.use.graphMinDegree()
+  const graphMaxNodes = useSettingsStore.use.graphMaxNodes()

  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.degree')}: {graphMinDegree}</div>
+      <div>{t('graphPanel.sideBar.settings.maxNodes')}: {graphMaxNodes}</div>
    </div>
  )
 }
--- a/lightrag_webui/src/hooks/useLightragGraph.tsx
+++ b/lightrag_webui/src/hooks/useLightragGraph.tsx
@@ -70,7 +70,7 @@ export type NodeType = {
 }
 export type EdgeType = { label: string }

-const fetchGraph = async (label: string, maxDepth: number, minDegree: number) => {
+const fetchGraph = async (label: string, maxDepth: number, maxNodes: number) => {
  let rawData: any = null;

  // Check if we need to fetch all database labels first
@@ -89,8 +89,8 @@ const fetchGraph = async (label: string, maxDepth: number, minDegree: number) =>
  const queryLabel = label || '*';

  try {
-    console.log(`Fetching graph label: ${queryLabel}, depth: ${maxDepth}, deg: ${minDegree}`);
-    rawData = await queryGraphs(queryLabel, maxDepth, minDegree);
+    console.log(`Fetching graph label: ${queryLabel}, depth: ${maxDepth}, nodes: ${maxNodes}`);
+    rawData = await queryGraphs(queryLabel, maxDepth, maxNodes);
  } catch (e) {
    useBackendState.getState().setErrorMessage(errorMessage(e), 'Query Graphs Error!');
    return null;
@@ -218,7 +218,7 @@ const useLightrangeGraph = () => {
  const rawGraph = useGraphStore.use.rawGraph()
  const sigmaGraph = useGraphStore.use.sigmaGraph()
  const maxQueryDepth = useSettingsStore.use.graphQueryMaxDepth()
-  const minDegree = useSettingsStore.use.graphMinDegree()
+  const maxNodes = useSettingsStore.use.graphMaxNodes()
  const isFetching = useGraphStore.use.isFetching()
  const nodeToExpand = useGraphStore.use.nodeToExpand()
  const nodeToPrune = useGraphStore.use.nodeToPrune()
@@ -292,14 +292,14 @@ const useLightrangeGraph = () => {
      // Use a local copy of the parameters
      const currentQueryLabel = queryLabel
      const currentMaxQueryDepth = maxQueryDepth
-      const currentMinDegree = minDegree
+      const currentMaxNodes = maxNodes

      // Declare a variable to store data promise
      let dataPromise;

      // 1. If query label is not empty, use fetchGraph
      if (currentQueryLabel) {
-        dataPromise = fetchGraph(currentQueryLabel, currentMaxQueryDepth, currentMinDegree);
+        dataPromise = fetchGraph(currentQueryLabel, currentMaxQueryDepth, currentMaxNodes);
      } else {
        // 2. If query label is empty, set data to null
        console.log('Query label is empty, show empty graph')
@@ -384,7 +384,7 @@ const useLightrangeGraph = () => {
        state.setLastSuccessfulQueryLabel('') // Clear last successful query label on error
      })
    }
-  }, [queryLabel, maxQueryDepth, minDegree, isFetching, t])
+  }, [queryLabel, maxQueryDepth, maxNodes, isFetching, t])

  // Handle node expansion
  useEffect(() => {
@@ -407,7 +407,7 @@ const useLightrangeGraph = () => {
        }

        // Fetch the extended subgraph with depth 2
-        const extendedGraph = await queryGraphs(label, 2, 0);
+        const extendedGraph = await queryGraphs(label, 2, 1000);

        if (!extendedGraph || !extendedGraph.nodes || !extendedGraph.edges) {
          console.error('Failed to fetch extended graph');
--- a/lightrag_webui/src/locales/ar.json
+++ b/lightrag_webui/src/locales/ar.json
@@ -148,7 +148,7 @@
        "hideUnselectedEdges": "إخفاء الحواف غير المحددة",
        "edgeEvents": "أحداث الحافة",
        "maxQueryDepth": "أقصى عمق للاستعلام",
-        "minDegree": "الدرجة الدنيا",
+        "maxNodes": "الحد الأقصى للعقد",
        "maxLayoutIterations": "أقصى تكرارات التخطيط",
        "depth": "العمق",
        "degree": "الدرجة",
--- a/lightrag_webui/src/locales/en.json
+++ b/lightrag_webui/src/locales/en.json
@@ -148,7 +148,7 @@
        "hideUnselectedEdges": "Hide Unselected Edges",
        "edgeEvents": "Edge Events",
        "maxQueryDepth": "Max Query Depth",
-        "minDegree": "Minimum Degree",
+        "maxNodes": "Max Nodes",
        "maxLayoutIterations": "Max Layout Iterations",
        "depth": "Depth",
        "degree": "Degree",
--- a/lightrag_webui/src/locales/fr.json
+++ b/lightrag_webui/src/locales/fr.json
@@ -148,7 +148,7 @@
        "hideUnselectedEdges": "Masquer les arêtes non sélectionnées",
        "edgeEvents": "Événements des arêtes",
        "maxQueryDepth": "Profondeur maximale de la requête",
-        "minDegree": "Degré minimum",
+        "maxNodes": "Nombre maximum de nœuds",
        "maxLayoutIterations": "Itérations maximales de mise en page",
        "depth": "Profondeur",
        "degree": "Degré",
--- a/lightrag_webui/src/locales/zh.json
+++ b/lightrag_webui/src/locales/zh.json
@@ -148,7 +148,7 @@
        "hideUnselectedEdges": "隐藏未选中的边",
        "edgeEvents": "边事件",
        "maxQueryDepth": "最大查询深度",
-        "minDegree": "最小邻边数",
+        "maxNodes": "最大返回节点数",
        "maxLayoutIterations": "最大布局迭代次数",
        "depth": "深度",
        "degree": "邻边",
--- a/lightrag_webui/src/stores/settings.ts
+++ b/lightrag_webui/src/stores/settings.ts
@@ -27,8 +27,8 @@ interface SettingsState {
  graphQueryMaxDepth: number
  setGraphQueryMaxDepth: (depth: number) => void

-  graphMinDegree: number
-  setGraphMinDegree: (degree: number) => void
+  graphMaxNodes: number
+  setGraphMaxNodes: (nodes: number) => void

  graphLayoutMaxIterations: number
  setGraphLayoutMaxIterations: (iterations: number) => void
@@ -77,7 +77,7 @@ const useSettingsStoreBase = create<SettingsState>()(
      enableEdgeEvents: false,

      graphQueryMaxDepth: 3,
-      graphMinDegree: 0,
+      graphMaxNodes: 1000,
      graphLayoutMaxIterations: 15,

      queryLabel: defaultQueryLabel,
@@ -130,7 +130,7 @@ const useSettingsStoreBase = create<SettingsState>()(

      setGraphQueryMaxDepth: (depth: number) => set({ graphQueryMaxDepth: depth }),

-      setGraphMinDegree: (degree: number) => set({ graphMinDegree: degree }),
+      setGraphMaxNodes: (nodes: number) => set({ graphMaxNodes: nodes }),

      setEnableHealthCheck: (enable: boolean) => set({ enableHealthCheck: enable }),

@@ -150,7 +150,7 @@ const useSettingsStoreBase = create<SettingsState>()(
    {
      name: 'settings-storage',
      storage: createJSONStorage(() => localStorage),
-      version: 9,
+      version: 10,
      migrate: (state: any, version: number) => {
        if (version < 2) {
          state.showEdgeLabel = false
@@ -196,6 +196,10 @@ const useSettingsStoreBase = create<SettingsState>()(
        if (version < 9) {
          state.showFileName = false
        }
+        if (version < 10) {
+          delete state.graphMinDegree // 删除废弃参数
+          state.graphMaxNodes = 1000  // 添加新参数
+        }
        return state
      }
    }