yangdx
commited on
Commit
·
fd16503
1
Parent(s):
36dab67
fix: improve graph zoom control and node expansion functionality
Browse files• Fix container padding in zoom calculation
• Extract node size update into helper fn
• Update node sizes for empty expansions
lightrag_webui/src/components/graph/ZoomControl.tsx
CHANGED
@@ -4,7 +4,6 @@ import Button from '@/components/ui/Button'
|
|
4 |
import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
|
5 |
import { controlButtonVariant } from '@/lib/constants'
|
6 |
import { useTranslation } from 'react-i18next';
|
7 |
-
import { combine } from 'zustand/middleware'
|
8 |
|
9 |
/**
|
10 |
* Component that provides zoom controls for the graph viewer.
|
@@ -67,8 +66,8 @@ const ZoomControl = () => {
|
|
67 |
|
68 |
// Calculate base scale
|
69 |
const scale = Math.min(
|
70 |
-
(containerWidth - containerPadding) / width,
|
71 |
-
(containerHeight - containerPadding) / height
|
72 |
)
|
73 |
// Apply scaling factor (just don't know why)
|
74 |
const ratio = (1 / scale) * 10
|
|
|
4 |
import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
|
5 |
import { controlButtonVariant } from '@/lib/constants'
|
6 |
import { useTranslation } from 'react-i18next';
|
|
|
7 |
|
8 |
/**
|
9 |
* Component that provides zoom controls for the graph viewer.
|
|
|
66 |
|
67 |
// Calculate base scale
|
68 |
const scale = Math.min(
|
69 |
+
(containerWidth - containerPadding * 2) / width,
|
70 |
+
(containerHeight - containerPadding * 2) / height
|
71 |
)
|
72 |
// Apply scaling factor (just don't know why)
|
73 |
const ratio = (1 / scale) * 10
|
lightrag_webui/src/hooks/useLightragGraph.tsx
CHANGED
@@ -475,8 +475,35 @@ const useLightrangeGraph = () => {
|
|
475 |
}
|
476 |
}
|
477 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
478 |
// If no new connectable nodes found, show toast and return
|
479 |
if (nodesToAdd.size === 0) {
|
|
|
480 |
toast.info(t('graphPanel.propertiesView.node.noNewNodes'));
|
481 |
return;
|
482 |
}
|
@@ -577,26 +604,7 @@ const useLightrangeGraph = () => {
|
|
577 |
searchCache.searchEngine = null;
|
578 |
|
579 |
// Update sizes for all nodes with discarded edges
|
580 |
-
|
581 |
-
if (sigmaGraph.hasNode(nodeId)) {
|
582 |
-
// Get the new degree of the node
|
583 |
-
let newDegree = sigmaGraph.degree(nodeId);
|
584 |
-
newDegree += 1; // Add +1 for discarded edges
|
585 |
-
|
586 |
-
// Calculate new size for the node
|
587 |
-
const newSize = Math.round(
|
588 |
-
Constants.minNodeSize + scale * Math.pow((newDegree - minDegree) / range, 0.5)
|
589 |
-
);
|
590 |
-
|
591 |
-
// Get current size
|
592 |
-
const currentSize = sigmaGraph.getNodeAttribute(nodeId, 'size');
|
593 |
-
|
594 |
-
// Only update if new size is larger
|
595 |
-
if (newSize > currentSize) {
|
596 |
-
sigmaGraph.setNodeAttribute(nodeId, 'size', newSize);
|
597 |
-
}
|
598 |
-
}
|
599 |
-
}
|
600 |
|
601 |
} catch (error) {
|
602 |
console.error('Error expanding node:', error);
|
|
|
475 |
}
|
476 |
}
|
477 |
|
478 |
+
// Helper function to update node sizes
|
479 |
+
const updateNodeSizes = (
|
480 |
+
sigmaGraph: DirectedGraph,
|
481 |
+
nodesWithDiscardedEdges: Set<string>,
|
482 |
+
minDegree: number,
|
483 |
+
range: number,
|
484 |
+
scale: number
|
485 |
+
) => {
|
486 |
+
for (const nodeId of nodesWithDiscardedEdges) {
|
487 |
+
if (sigmaGraph.hasNode(nodeId)) {
|
488 |
+
let newDegree = sigmaGraph.degree(nodeId);
|
489 |
+
newDegree += 1; // Add +1 for discarded edges
|
490 |
+
|
491 |
+
const newSize = Math.round(
|
492 |
+
Constants.minNodeSize + scale * Math.pow((newDegree - minDegree) / range, 0.5)
|
493 |
+
);
|
494 |
+
|
495 |
+
const currentSize = sigmaGraph.getNodeAttribute(nodeId, 'size');
|
496 |
+
|
497 |
+
if (newSize > currentSize) {
|
498 |
+
sigmaGraph.setNodeAttribute(nodeId, 'size', newSize);
|
499 |
+
}
|
500 |
+
}
|
501 |
+
}
|
502 |
+
};
|
503 |
+
|
504 |
// If no new connectable nodes found, show toast and return
|
505 |
if (nodesToAdd.size === 0) {
|
506 |
+
updateNodeSizes(sigmaGraph, nodesWithDiscardedEdges, minDegree, range, scale);
|
507 |
toast.info(t('graphPanel.propertiesView.node.noNewNodes'));
|
508 |
return;
|
509 |
}
|
|
|
604 |
searchCache.searchEngine = null;
|
605 |
|
606 |
// Update sizes for all nodes with discarded edges
|
607 |
+
updateNodeSizes(sigmaGraph, nodesWithDiscardedEdges, minDegree, range, scale);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
608 |
|
609 |
} catch (error) {
|
610 |
console.error('Error expanding node:', error);
|