yangdx commited on
Commit
958ad51
·
1 Parent(s): 588a416

Optimize node spread animation with better spacing and randomized angle offset

Browse files
lightrag_webui/src/hooks/useLightragGraph.tsx CHANGED
@@ -487,6 +487,17 @@ const useLightrangeGraph = () => {
487
  const scale = Constants.maxNodeSize - Constants.minNodeSize;
488
 
489
  // STEP 3: Add nodes and edges to the graph
 
 
 
 
 
 
 
 
 
 
 
490
  // Add new nodes
491
  for (const nodeId of nodesToAdd) {
492
  const newNode = processedNodes.find(n => n.id === nodeId)!;
@@ -497,23 +508,14 @@ const useLightrangeGraph = () => {
497
  Constants.minNodeSize + scale * Math.pow((nodeDegree - minDegree) / range, 0.5)
498
  );
499
 
500
- // Get camera ratio from sigma instance for scale adjustment
501
- const cameraRatio = useGraphStore.getState().sigmaInstance?.getCamera().ratio || 1;
502
-
503
- // Calculate spread factor based on node size and number of nodes
504
- const spreadFactor = Math.max(
505
- nodeToExpand.size * 4, // Base on node size
506
- Math.sqrt(nodesToAdd.size) * 10 // Scale with number of nodes
507
- ) / cameraRatio; // Adjust for zoom level
508
-
509
  // Calculate angle for polar coordinates
510
  const angle = 2 * Math.PI * (Array.from(nodesToAdd).indexOf(nodeId) / nodesToAdd.size);
511
 
512
  // Calculate final position
513
  const x = nodePositions[nodeId]?.x ||
514
- (nodePositions[nodeToExpand.id].x + Math.cos(angle) * spreadFactor);
515
  const y = nodePositions[nodeId]?.y ||
516
- (nodePositions[nodeToExpand.id].y + Math.sin(angle) * spreadFactor);
517
 
518
  // Add the new node to the sigma graph with calculated position
519
  sigmaGraph.addNode(nodeId, {
 
487
  const scale = Constants.maxNodeSize - Constants.minNodeSize;
488
 
489
  // STEP 3: Add nodes and edges to the graph
490
+ // Calculate camera ratio and spread factor once before the loop
491
+ const cameraRatio = useGraphStore.getState().sigmaInstance?.getCamera().ratio || 1;
492
+ const spreadFactor = Math.max(
493
+ Math.sqrt(nodeToExpand.size) * 4, // Base on node size
494
+ Math.sqrt(nodesToAdd.size) * 3 // Scale with number of nodes
495
+ ) / cameraRatio; // Adjust for zoom level
496
+ const randomAngle = Math.random() * 2 * Math.PI
497
+
498
+ console.log('nodeSize:', nodeToExpand.size, 'nodesToAdd:', nodesToAdd.size);
499
+ console.log('cameraRatio:', Math.round(cameraRatio*100)/100, 'spreadFactor:', Math.round(spreadFactor*100)/100);
500
+
501
  // Add new nodes
502
  for (const nodeId of nodesToAdd) {
503
  const newNode = processedNodes.find(n => n.id === nodeId)!;
 
508
  Constants.minNodeSize + scale * Math.pow((nodeDegree - minDegree) / range, 0.5)
509
  );
510
 
 
 
 
 
 
 
 
 
 
511
  // Calculate angle for polar coordinates
512
  const angle = 2 * Math.PI * (Array.from(nodesToAdd).indexOf(nodeId) / nodesToAdd.size);
513
 
514
  // Calculate final position
515
  const x = nodePositions[nodeId]?.x ||
516
+ (nodePositions[nodeToExpand.id].x + Math.cos(randomAngle + angle) * spreadFactor);
517
  const y = nodePositions[nodeId]?.y ||
518
+ (nodePositions[nodeToExpand.id].y + Math.sin(randomAngle + angle) * spreadFactor);
519
 
520
  // Add the new node to the sigma graph with calculated position
521
  sigmaGraph.addNode(nodeId, {