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

refactor: reorder icons order in control bool bar

Browse Source
This commit is contained in:
yangdx
2025-03-15 23:45:23 +08:00
parent ce6ad75b23
commit 64dfa65455
6 changed files with 91 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
lightrag/api/webui/assets/index-DG6MIDBJ.js → lightrag/api/webui/assets/index-C2KLWNK3.js
View File

File diff suppressed because one or more lines are too long

2
lightrag/api/webui/index.html
View File

@@ -8,7 +8,7 @@
<link rel="icon" type="image/svg+xml" href="./logo.png" /> <link rel="icon" type="image/svg+xml" href="./logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lightrag</title> <title>Lightrag</title>
<script type="module" crossorigin src="./assets/index-DG6MIDBJ.js"></script> <script type="module" crossorigin src="./assets/index-C2KLWNK3.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-TPDyec81.css"> <link rel="stylesheet" crossorigin href="./assets/index-TPDyec81.css">
</head> </head>
<body> <body>

17
lightrag_webui/src/components/graph/LayoutsControl.tsx
View File

@@ -15,7 +15,7 @@ import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui
import { controlButtonVariant } from '@/lib/constants' import { controlButtonVariant } from '@/lib/constants'
import { useSettingsStore } from '@/stores/settings' import { useSettingsStore } from '@/stores/settings'
import { GripIcon, PlayIcon, PauseIcon } from 'lucide-react' import { GripIcon, PlayIcon, PauseIcon, RefreshCwIcon } from 'lucide-react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
type LayoutName = type LayoutName =
@@ -138,8 +138,23 @@ const LayoutsControl = () => {
[layouts, sigma] [layouts, sigma]
) )
const refreshLayout = useCallback(() => {
if (!sigma) return
const graph = sigma.getGraph()
const positions = layoutForceAtlas2.positions()
animateNodes(graph, positions, { duration: 500 })
}, [sigma, layoutForceAtlas2])
return ( return (
<> <>
<Button
variant={controlButtonVariant}
tooltip={t('graphPanel.sideBar.settings.refreshLayout')}
size="icon"
onClick={refreshLayout}
>
<RefreshCwIcon />
</Button>
<div> <div>
{layouts[layout] && 'worker' in layouts[layout] && ( {layouts[layout] && 'worker' in layouts[layout] && (
<WorkerLayoutControl layout={layouts[layout].worker!} /> <WorkerLayoutControl layout={layouts[layout].worker!} />

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

@@ -8,11 +8,8 @@ import Input from '@/components/ui/Input'
import { controlButtonVariant } from '@/lib/constants' 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 { useSigma } from '@react-sigma/core'
import { useLayoutForceAtlas2 } from '@react-sigma/layout-forceatlas2'
import { animateNodes } from 'sigma/utils'
import { SettingsIcon, RefreshCwIcon } from 'lucide-react' import { SettingsIcon } from 'lucide-react'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
/** /**
@@ -117,16 +114,6 @@ 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 sigma = useSigma()
const maxIterations = useSettingsStore.use.graphLayoutMaxIterations()
const layout = useLayoutForceAtlas2({ iterations: maxIterations })
const refreshLayout = useCallback(() => {
if (!sigma) return
const graph = sigma.getGraph()
const positions = layout.positions()
animateNodes(graph, positions, { duration: 500 })
}, [sigma, layout])
const showPropertyPanel = useSettingsStore.use.showPropertyPanel() const showPropertyPanel = useSettingsStore.use.showPropertyPanel()
const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar() const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
@@ -222,14 +209,6 @@ export default function Settings() {
return ( return (
<> <>
<Button
variant={controlButtonVariant}
tooltip={t('graphPanel.sideBar.settings.refreshLayout')}
size="icon"
onClick={refreshLayout}
>
<RefreshCwIcon />
</Button>
<Popover open={opened} onOpenChange={setOpened}> <Popover open={opened} onOpenChange={setOpened}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant={controlButtonVariant} tooltip={t('graphPanel.sideBar.settings.settings')} size="icon"> <Button variant={controlButtonVariant} tooltip={t('graphPanel.sideBar.settings.settings')} size="icon">

25
lightrag_webui/src/components/graph/ZoomControl.tsx
View File

@@ -33,19 +33,6 @@ const ZoomControl = () => {
return return
} }
// Get container dimensions for aspect ratio
const container = sigma.getContainer()
const containerWidth = container.offsetWidth
const containerHeight = container.offsetHeight
const containerPadding = 30
console.log('Container W:', containerWidth, 'H:', containerHeight)
if (containerWidth < 100|| containerHeight < 100) {
// Use reset() for zero size case
reset()
return
}
sigma.getCamera().animate( sigma.getCamera().animate(
{ x: 0.5, y: 0.5, ratio: 1.1 }, { x: 0.5, y: 0.5, ratio: 1.1 },
{ duration: 1000 } { duration: 1000 }
@@ -59,12 +46,6 @@ const ZoomControl = () => {
return ( return (
<> <>
<Button variant={controlButtonVariant} onClick={handleZoomIn} tooltip={t('graphPanel.sideBar.zoomControl.zoomIn')} size="icon">
<ZoomInIcon />
</Button>
<Button variant={controlButtonVariant} onClick={handleZoomOut} tooltip={t('graphPanel.sideBar.zoomControl.zoomOut')} size="icon">
<ZoomOutIcon />
</Button>
<Button <Button
variant={controlButtonVariant} variant={controlButtonVariant}
onClick={handleResetZoom} onClick={handleResetZoom}
@@ -73,6 +54,12 @@ const ZoomControl = () => {
> >
<FullscreenIcon /> <FullscreenIcon />
</Button> </Button>
<Button variant={controlButtonVariant} onClick={handleZoomIn} tooltip={t('graphPanel.sideBar.zoomControl.zoomIn')} size="icon">
<ZoomInIcon />
</Button>
<Button variant={controlButtonVariant} onClick={handleZoomOut} tooltip={t('graphPanel.sideBar.zoomControl.zoomOut')} size="icon">
<ZoomOutIcon />
</Button>
</> </>
) )
} }

4
lightrag_webui/src/features/GraphViewer.tsx
View File

@@ -236,10 +236,10 @@ const GraphViewer = () => {
</div> </div>
<div className="bg-background/60 absolute bottom-2 left-2 flex flex-col rounded-xl border-2 backdrop-blur-lg"> <div className="bg-background/60 absolute bottom-2 left-2 flex flex-col rounded-xl border-2 backdrop-blur-lg">
<Settings />
<ZoomControl />
<LayoutsControl /> <LayoutsControl />
<ZoomControl />
<FullScreenControl /> <FullScreenControl />
<Settings />
{/* <ThemeToggle /> */} {/* <ThemeToggle /> */}
</div> </div>