mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
fix: graph layout, node visibility and FA2 settings
- Switch to CSS Grid layout for reliable content area height - Use inferSettings() for ForceAtlas2 auto-tuning based on graph structure - Enable linLogMode and adjustSizes for better node clustering - Fit camera after layout settles with animatedReset - Increase node sizes for better visibility (MIN 8, MAX 40) - Center controls at bottom, fix overlay positions
This commit is contained in:
@@ -2,6 +2,7 @@ import { useEffect, useRef, useCallback } from 'react';
|
||||
import Graph from 'graphology';
|
||||
import Sigma from 'sigma';
|
||||
import FA2LayoutSupervisor from 'graphology-layout-forceatlas2/worker';
|
||||
import { inferSettings } from 'graphology-layout-forceatlas2';
|
||||
import { useReferralNetworkStore } from '@/store/referralNetwork';
|
||||
import type { NetworkGraphData, NetworkFilters } from '@/types/referralNetwork';
|
||||
import { getUserNodeColor, getUserNodeSize, getCampaignColor } from '../utils';
|
||||
@@ -246,24 +247,31 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
|
||||
|
||||
// Start ForceAtlas2 in a web worker (non-blocking)
|
||||
if (graph.order > 0) {
|
||||
const inferred = inferSettings(graph);
|
||||
const supervisor = new FA2LayoutSupervisor(graph, {
|
||||
settings: {
|
||||
gravity: 0.5,
|
||||
scalingRatio: 10,
|
||||
barnesHutOptimize: true,
|
||||
slowDown: 2,
|
||||
...inferred,
|
||||
linLogMode: true,
|
||||
adjustSizes: true,
|
||||
barnesHutOptimize: graph.order > 100,
|
||||
slowDown: 5,
|
||||
},
|
||||
});
|
||||
fa2Ref.current = supervisor;
|
||||
supervisor.start();
|
||||
|
||||
// Kill after a fixed duration to free the web worker thread
|
||||
// Kill after a fixed duration, then fit camera to all nodes
|
||||
fa2TimerRef.current = setTimeout(() => {
|
||||
if (fa2Ref.current === supervisor) {
|
||||
supervisor.kill();
|
||||
fa2Ref.current = null;
|
||||
}
|
||||
fa2TimerRef.current = null;
|
||||
|
||||
// Fit camera to show all nodes after layout settles
|
||||
if (sigmaRef.current) {
|
||||
sigmaRef.current.getCamera().animatedReset({ duration: 400 });
|
||||
}
|
||||
}, FA2_DURATION_MS);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user