diff --git a/lightrag_webui/src/components/graph/Settings.tsx b/lightrag_webui/src/components/graph/Settings.tsx index a7fe84ab..de50d276 100644 --- a/lightrag_webui/src/components/graph/Settings.tsx +++ b/lightrag_webui/src/components/graph/Settings.tsx @@ -1,4 +1,4 @@ -import { useState, useCallback, useEffect } from 'react' +import { useState, useCallback} from 'react' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover' import Checkbox from '@/components/ui/Checkbox' import Button from '@/components/ui/Button' @@ -7,7 +7,6 @@ import Input from '@/components/ui/Input' import { controlButtonVariant } from '@/lib/constants' import { useSettingsStore } from '@/stores/settings' -import { useBackendState } from '@/stores/state' import { SettingsIcon } from 'lucide-react' import { useTranslation } from 'react-i18next'; @@ -113,7 +112,6 @@ const LabeledNumberInput = ({ */ export default function Settings() { const [opened, setOpened] = useState(false) - const [tempApiKey, setTempApiKey] = useState('') const showPropertyPanel = useSettingsStore.use.showPropertyPanel() const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar() @@ -127,12 +125,7 @@ export default function Settings() { const graphLayoutMaxIterations = useSettingsStore.use.graphLayoutMaxIterations() const enableHealthCheck = useSettingsStore.use.enableHealthCheck() - const apiKey = useSettingsStore.use.apiKey() - - useEffect(() => { - setTempApiKey(apiKey || '') - }, [apiKey, opened]) - + const setEnableNodeDrag = useCallback( () => useSettingsStore.setState((pre) => ({ enableNodeDrag: !pre.enableNodeDrag })), [] @@ -180,11 +173,22 @@ export default function Settings() { const setGraphQueryMaxDepth = useCallback((depth: number) => { if (depth < 1) return useSettingsStore.setState({ graphQueryMaxDepth: depth }) + const currentLabel = useSettingsStore.getState().queryLabel + useSettingsStore.getState().setQueryLabel('') + setTimeout(() => { + useSettingsStore.getState().setQueryLabel(currentLabel) + }, 300) }, []) const setGraphMinDegree = useCallback((degree: number) => { if (degree < 0) return useSettingsStore.setState({ graphMinDegree: degree }) + const currentLabel = useSettingsStore.getState().queryLabel + useSettingsStore.getState().setQueryLabel('') + setTimeout(() => { + useSettingsStore.getState().setQueryLabel(currentLabel) + }, 300) + }, []) const setGraphLayoutMaxIterations = useCallback((iterations: number) => { @@ -192,26 +196,21 @@ export default function Settings() { useSettingsStore.setState({ graphLayoutMaxIterations: iterations }) }, []) - const setApiKey = useCallback(async () => { - useSettingsStore.setState({ apiKey: tempApiKey || null }) - await useBackendState.getState().check() - setOpened(false) - }, [tempApiKey]) - - const handleTempApiKeyChange = useCallback( - (e: React.ChangeEvent) => { - setTempApiKey(e.target.value) - }, - [setTempApiKey] - ) - const { t } = useTranslation(); + + const saveSettings = () => setOpened(false); + const toggleSettings = () => setOpened(!opened); return ( <> - + - @@ -293,30 +292,15 @@ export default function Settings() { onEditFinished={setGraphLayoutMaxIterations} /> + -
- -
e.preventDefault()}> -
- -
- -
-