mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
fix: defer Sigma init with requestAnimationFrame to prevent no-height crash
Container has no computed height when useEffect fires immediately after data arrives. Defer to next animation frame so browser layout completes. Also add allowInvalidContainer as safety net.
This commit is contained in:
@@ -128,6 +128,13 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
|
||||
useEffect(() => {
|
||||
if (!containerRef.current || !data) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
// Defer initialization to next frame so the browser computes layout first.
|
||||
// Without this, container.offsetHeight is 0 and Sigma throws.
|
||||
const rafId = requestAnimationFrame(() => {
|
||||
if (!container.isConnected) return;
|
||||
|
||||
// Cleanup previous instance
|
||||
killFA2();
|
||||
if (sigmaRef.current) {
|
||||
@@ -142,7 +149,8 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
|
||||
const initialFilters = useReferralNetworkStore.getState().filters;
|
||||
hiddenNodesRef.current = computeHiddenNodes(graph, initialFilters);
|
||||
|
||||
const sigma = new Sigma(graph, containerRef.current, {
|
||||
const sigma = new Sigma(graph, container, {
|
||||
allowInvalidContainer: true,
|
||||
renderEdgeLabels: false,
|
||||
labelDensity: 0.5,
|
||||
labelRenderedSizeThreshold: 6,
|
||||
@@ -289,11 +297,15 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
|
||||
containerRef.current.style.cursor = 'default';
|
||||
}
|
||||
});
|
||||
}); // end requestAnimationFrame
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(rafId);
|
||||
killFA2();
|
||||
sigma.kill();
|
||||
if (sigmaRef.current) {
|
||||
sigmaRef.current.kill();
|
||||
sigmaRef.current = null;
|
||||
}
|
||||
graphRef.current = null;
|
||||
setSigmaInstance(null);
|
||||
setGraphInstance(null);
|
||||
|
||||
Reference in New Issue
Block a user