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:
Fringg
2026-03-19 09:18:11 +03:00
parent fd9a47ecda
commit 7c0b8e571a
3 changed files with 29 additions and 21 deletions

View File

@@ -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);
}