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
- for (const nodeId of nodesWithDiscardedEdges) {
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);