Added Minimum Degree

lightrag_webui/src/components/graph/Settings.tsx

@@ -10,6 +10,7 @@ import { useSettingsStore } from '@/stores/settings'
 import { useBackendState } from '@/stores/state'
 
 import { SettingsIcon } from 'lucide-react'
+import { useTranslation } from "react-i18next";
 
 /**
  * Component that displays a checkbox with a label.
@@ -195,10 +196,12 @@ export default function Settings() {
     [setTempApiKey]
   )
 
+  const { t } = useTranslation();
+
   return (
     <Popover open={opened} onOpenChange={setOpened}>
       <PopoverTrigger asChild>
-        <Button variant={controlButtonVariant} tooltip="Settings" size="icon">
+        <Button variant={controlButtonVariant} tooltip={t("graphPanel.sideBar.settings.settings")} size="icon">
           <SettingsIcon />
         </Button>
       </PopoverTrigger>
@@ -212,7 +215,7 @@ export default function Settings() {
           <LabeledCheckBox
             checked={enableHealthCheck}
             onCheckedChange={setEnableHealthCheck}
-            label="Health Check"
+            label={t("graphPanel.sideBar.settings.healthCheck")}
           />
 
           <Separator />
@@ -220,12 +223,12 @@ export default function Settings() {
           <LabeledCheckBox
             checked={showPropertyPanel}
             onCheckedChange={setShowPropertyPanel}
-            label="Show Property Panel"
+            label={t("graphPanel.sideBar.settings.showPropertyPanel")}
           />
           <LabeledCheckBox
             checked={showNodeSearchBar}
             onCheckedChange={setShowNodeSearchBar}
-            label="Show Search Bar"
+            label={t("graphPanel.sideBar.settings.showSearchBar")}
           />
 
           <Separator />
@@ -233,12 +236,12 @@ export default function Settings() {
           <LabeledCheckBox
             checked={showNodeLabel}
             onCheckedChange={setShowNodeLabel}
-            label="Show Node Label"
+            label={t("graphPanel.sideBar.settings.showNodeLabel")}
           />
           <LabeledCheckBox
             checked={enableNodeDrag}
             onCheckedChange={setEnableNodeDrag}
-            label="Node Draggable"
+            label={t("graphPanel.sideBar.settings.nodeDraggable")}
           />
 
           <Separator />
@@ -246,28 +249,34 @@ export default function Settings() {
           <LabeledCheckBox
             checked={showEdgeLabel}
             onCheckedChange={setShowEdgeLabel}
-            label="Show Edge Label"
+            label={t("graphPanel.sideBar.settings.showEdgeLabel")}
           />
           <LabeledCheckBox
             checked={enableHideUnselectedEdges}
             onCheckedChange={setEnableHideUnselectedEdges}
-            label="Hide Unselected Edges"
+            label={t("graphPanel.sideBar.settings.hideUnselectedEdges")}
           />
           <LabeledCheckBox
             checked={enableEdgeEvents}
             onCheckedChange={setEnableEdgeEvents}
-            label="Edge Events"
+            label={t("graphPanel.sideBar.settings.edgeEvents")}
           />
 
           <Separator />
           <LabeledNumberInput
-            label="Max Query Depth"
+            label={t("graphPanel.sideBar.settings.maxQueryDepth")}
             min={1}
             value={graphQueryMaxDepth}
             onEditFinished={setGraphQueryMaxDepth}
           />
           <LabeledNumberInput
-            label="Max Layout Iterations"
+            label={t("graphPanel.sideBar.settings.minDegree")}
+            min={0}
+            value={graphMinDegree}
+            onEditFinished={setGraphMinDegree}
+          />   
+          <LabeledNumberInput
+            label={t("graphPanel.sideBar.settings.maxLayoutIterations")}
             min={1}
             max={20}
             value={graphLayoutMaxIterations}
@@ -277,14 +286,14 @@ export default function Settings() {
           <Separator />
 
           <div className="flex flex-col gap-2">
-            <label className="text-sm font-medium">API Key</label>
+            <label className="text-sm font-medium">{t("graphPanel.sideBar.settings.apiKey")}</label>
             <form className="flex h-6 gap-2" onSubmit={(e) => e.preventDefault()}>
               <div className="w-0 flex-1">
                 <Input
                   type="password"
                   value={tempApiKey}
                   onChange={handleTempApiKeyChange}
-                  placeholder="Enter your API key"
+                  placeholder={t("graphPanel.sideBar.settings.enterYourAPIkey")}
                   className="max-h-full w-full min-w-0"
                   autoComplete="off"
                 />
@@ -295,7 +304,7 @@ export default function Settings() {
                 size="sm"
                 className="max-h-full shrink-0"
               >
-                Save
+                {t("graphPanel.sideBar.settings.save")}
               </Button>
             </form>
           </div>