gardel/lightrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added refresh layout button to graph settings

Browse Source
This commit is contained in:
yangdx
2025-03-12 06:22:39 +08:00
parent c910ba1d28
commit dad36e948f
2 changed files with 132 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
lightrag_webui/src/components/graph/Settings.tsx
View File

@@ -9,7 +9,7 @@ import { controlButtonVariant } from '@/lib/constants'
import { useSettingsStore } from '@/stores/settings' import { useSettingsStore } from '@/stores/settings'
import { useBackendState } from '@/stores/state' import { useBackendState } from '@/stores/state'
import { SettingsIcon } from 'lucide-react' import { SettingsIcon, RefreshCwIcon } from 'lucide-react'
/** /**
* Component that displays a checkbox with a label. * Component that displays a checkbox with a label.
@@ -113,6 +113,7 @@ const LabeledNumberInput = ({
export default function Settings() { export default function Settings() {
const [opened, setOpened] = useState<boolean>(false) const [opened, setOpened] = useState<boolean>(false)
const [tempApiKey, setTempApiKey] = useState<string>('') const [tempApiKey, setTempApiKey] = useState<string>('')
const refreshLayout = useSettingsStore.use.refreshLayout()
const showPropertyPanel = useSettingsStore.use.showPropertyPanel() const showPropertyPanel = useSettingsStore.use.showPropertyPanel()
const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar() const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
@@ -205,117 +206,127 @@ export default function Settings() {
) )
return ( return (
<Popover open={opened} onOpenChange={setOpened}> <>
<PopoverTrigger asChild> <Button
<Button variant={controlButtonVariant} tooltip="Settings" size="icon"> variant={controlButtonVariant}
<SettingsIcon /> tooltip="Refresh Layout"
</Button> size="icon"
</PopoverTrigger> onClick={refreshLayout}
<PopoverContent
side="right"
align="start"
className="mb-2 p-2"
onCloseAutoFocus={(e) => e.preventDefault()}
> >
<div className="flex flex-col gap-2"> <RefreshCwIcon />
<LabeledCheckBox </Button>
checked={enableHealthCheck} <Popover open={opened} onOpenChange={setOpened}>
onCheckedChange={setEnableHealthCheck} <PopoverTrigger asChild>
label="Health Check" <Button variant={controlButtonVariant} tooltip="Settings" size="icon">
/> <SettingsIcon />
</Button>
<Separator /> </PopoverTrigger>
<PopoverContent
<LabeledCheckBox side="right"
checked={showPropertyPanel} align="start"
onCheckedChange={setShowPropertyPanel} className="mb-2 p-2"
label="Show Property Panel" onCloseAutoFocus={(e) => e.preventDefault()}
/> >
<LabeledCheckBox
checked={showNodeSearchBar}
onCheckedChange={setShowNodeSearchBar}
label="Show Search Bar"
/>
<Separator />
<LabeledCheckBox
checked={showNodeLabel}
onCheckedChange={setShowNodeLabel}
label="Show Node Label"
/>
<LabeledCheckBox
checked={enableNodeDrag}
onCheckedChange={setEnableNodeDrag}
label="Node Draggable"
/>
<Separator />
<LabeledCheckBox
checked={showEdgeLabel}
onCheckedChange={setShowEdgeLabel}
label="Show Edge Label"
/>
<LabeledCheckBox
checked={enableHideUnselectedEdges}
onCheckedChange={setEnableHideUnselectedEdges}
label="Hide Unselected Edges"
/>
<LabeledCheckBox
checked={enableEdgeEvents}
onCheckedChange={setEnableEdgeEvents}
label="Edge Events"
/>
<Separator />
<LabeledNumberInput
label="Max Query Depth"
min={1}
value={graphQueryMaxDepth}
onEditFinished={setGraphQueryMaxDepth}
/>
<LabeledNumberInput
label="Minimum Degree"
min={0}
value={graphMinDegree}
onEditFinished={setGraphMinDegree}
/>
<LabeledNumberInput
label="Max Layout Iterations"
min={1}
max={20}
value={graphLayoutMaxIterations}
onEditFinished={setGraphLayoutMaxIterations}
/>
<Separator />
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<label className="text-sm font-medium">API Key</label> <LabeledCheckBox
<form className="flex h-6 gap-2" onSubmit={(e) => e.preventDefault()}> checked={enableHealthCheck}
<div className="w-0 flex-1"> onCheckedChange={setEnableHealthCheck}
<Input label="Health Check"
type="password" />
value={tempApiKey}
onChange={handleTempApiKeyChange} <Separator />
placeholder="Enter your API key"
className="max-h-full w-full min-w-0" <LabeledCheckBox
autoComplete="off" checked={showPropertyPanel}
/> onCheckedChange={setShowPropertyPanel}
</div> label="Show Property Panel"
<Button />
onClick={setApiKey} <LabeledCheckBox
variant="outline" checked={showNodeSearchBar}
size="sm" onCheckedChange={setShowNodeSearchBar}
className="max-h-full shrink-0" label="Show Search Bar"
> />
Save
</Button> <Separator />
</form>
<LabeledCheckBox
checked={showNodeLabel}
onCheckedChange={setShowNodeLabel}
label="Show Node Label"
/>
<LabeledCheckBox
checked={enableNodeDrag}
onCheckedChange={setEnableNodeDrag}
label="Node Draggable"
/>
<Separator />
<LabeledCheckBox
checked={showEdgeLabel}
onCheckedChange={setShowEdgeLabel}
label="Show Edge Label"
/>
<LabeledCheckBox
checked={enableHideUnselectedEdges}
onCheckedChange={setEnableHideUnselectedEdges}
label="Hide Unselected Edges"
/>
<LabeledCheckBox
checked={enableEdgeEvents}
onCheckedChange={setEnableEdgeEvents}
label="Edge Events"
/>
<Separator />
<LabeledNumberInput
label="Max Query Depth"
min={1}
value={graphQueryMaxDepth}
onEditFinished={setGraphQueryMaxDepth}
/>
<LabeledNumberInput
label="Minimum Degree"
min={0}
value={graphMinDegree}
onEditFinished={setGraphMinDegree}
/>
<LabeledNumberInput
label="Max Layout Iterations"
min={1}
max={20}
value={graphLayoutMaxIterations}
onEditFinished={setGraphLayoutMaxIterations}
/>
<Separator />
<div className="flex flex-col gap-2">
<label className="text-sm font-medium">API Key</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"
className="max-h-full w-full min-w-0"
autoComplete="off"
/>
</div>
<Button
onClick={setApiKey}
variant="outline"
size="sm"
className="max-h-full shrink-0"
>
Save
</Button>
</form>
</div>
</div> </div>
</div> </PopoverContent>
</PopoverContent> </Popover>
</Popover> </>
) )
} }

11
lightrag_webui/src/stores/settings.ts
View File

@@ -3,12 +3,14 @@ import { persist, createJSONStorage } from 'zustand/middleware'
import { createSelectors } from '@/lib/utils' import { createSelectors } from '@/lib/utils'
import { defaultQueryLabel } from '@/lib/constants' import { defaultQueryLabel } from '@/lib/constants'
import { Message, QueryRequest } from '@/api/lightrag' import { Message, QueryRequest } from '@/api/lightrag'
import { useGraphStore } from '@/stores/graph'
type Theme = 'dark' | 'light' | 'system' type Theme = 'dark' | 'light' | 'system'
type Tab = 'documents' | 'knowledge-graph' | 'retrieval' | 'api' type Tab = 'documents' | 'knowledge-graph' | 'retrieval' | 'api'
interface SettingsState { interface SettingsState {
// Graph viewer settings // Graph viewer settings
refreshLayout: () => void
showPropertyPanel: boolean showPropertyPanel: boolean
showNodeSearchBar: boolean showNodeSearchBar: boolean
@@ -57,6 +59,15 @@ const useSettingsStoreBase = create<SettingsState>()(
persist( persist(
(set) => ({ (set) => ({
theme: 'system', theme: 'system',
refreshLayout: () => {
const graphState = useGraphStore.getState();
const currentGraph = graphState.sigmaGraph;
graphState.clearSelection();
graphState.setSigmaGraph(null);
setTimeout(() => {
graphState.setSigmaGraph(currentGraph);
}, 10);
},
showPropertyPanel: true, showPropertyPanel: true,
showNodeSearchBar: true, showNodeSearchBar: true,