From b6886f1ae5c1d30551250dbd363bf9b83ff21035 Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.a.c.collaris@uu.nl>
Date: Fri, 19 Jul 2024 09:21:26 +0000
Subject: [PATCH] fix: properly cleanup layout on component rerender
---
libs/shared/lib/graph-layout/graphology-layouts.ts | 12 +++++++++---
.../visualizations/nodelinkvis/components/NLPixi.tsx | 5 ++++-
2 files changed, 13 insertions(+), 4 deletions(-)
diff --git a/libs/shared/lib/graph-layout/graphology-layouts.ts b/libs/shared/lib/graph-layout/graphology-layouts.ts
index 67419cbb7..bd0e4caff 100644
--- a/libs/shared/lib/graph-layout/graphology-layouts.ts
+++ b/libs/shared/lib/graph-layout/graphology-layouts.ts
@@ -186,10 +186,16 @@ export class GraphologyForceAtlas2 extends GraphologyLayout {
* This is a ConcreteProduct
*/
export class GraphologyForceAtlas2Webworker extends GraphologyLayout {
+ protected _layout: FA2Layout | null = null;
+
constructor() {
super('Graphology_forceAtlas2_webworker');
}
+ public cleanup() {
+ this._layout?.kill();
+ }
+
public override async layout(
graph: Graph<Attributes, Attributes, Attributes>,
boundingBox?: { x1: number; x2: number; y1: number; y2: number },
@@ -213,12 +219,12 @@ export class GraphologyForceAtlas2Webworker extends GraphologyLayout {
};
}
- const layout = new FA2Layout(graph, { settings });
- layout.start();
+ this._layout = new FA2Layout(graph, { settings });
+ this._layout.start();
// stop the layout after 10 seconds
setTimeout(() => {
- layout.stop();
+ this._layout?.stop();
}, 10000);
}
}
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index 40a6ec192..6e1277c66 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -18,7 +18,7 @@ import {
import { useAppDispatch, useML, useSearchResultData } from '../../../../data-access';
import { NLPopup } from './NLPopup';
import { hslStringToHex, nodeColor } from './utils';
-import { CytoscapeLayout, GraphologyLayout, LayoutFactory, Layouts } from '../../../../graph-layout';
+import { CytoscapeLayout, GraphologyLayout, LayoutFactory, Layouts, GraphologyForceAtlas2Webworker } from '../../../../graph-layout';
import { MultiGraph } from 'graphology';
import { Viewport } from 'pixi-viewport';
import { NodelinkVisProps } from '../nodelinkvis';
@@ -532,6 +532,9 @@ export const NLPixi = (props: Props) => {
linkGfx.clear();
nodeLayer.removeChildren();
labelLayer.removeChildren();
+
+ const layout = layoutAlgorithm.current as GraphologyForceAtlas2Webworker;
+ if(layout?.cleanup != null) layout.cleanup();
};
}, []);
--
GitLab