From a750681ba44bcfe191cad5ed7e3d9d89b3d49456 Mon Sep 17 00:00:00 2001
From: Dennis Collaris <d.collaris@me.com>
Date: Thu, 4 Jul 2024 16:26:51 +0200
Subject: [PATCH] perf: do not show edge labels when number of nodes exceeds
configurable threshold
---
.../nodelinkvis/components/NLPixi.tsx | 52 +++++++++++--------
1 file changed, 29 insertions(+), 23 deletions(-)
diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index ae813d7d8..83f01d87b 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -96,6 +96,8 @@ export const NLPixi = (props: Props) => {
width: 1000,
height: 1000,
+ LABEL_MAX_NODES: 1000,
+
LAYOUT_ALGORITHM: Layouts.FORCEATLAS2WEBWORKER,
NODE_RADIUS: 5,
@@ -205,22 +207,24 @@ export const NLPixi = (props: Props) => {
onZoom(event: FederatedPointerEvent) {
const scale = viewport.current!.transform.scale.x;
- labelLayer.alpha = (scale > 2) ? Math.min(1, (scale - 2) * 3) : 0;
-
- if (labelLayer.alpha > 0) {
- labelLayer.renderable = true;
-
- const scale = 1 / viewport.current!.scale.x; // starts from 0.5 down to 0.
-
- // Only change the fontSize for specific intervals, continuous change has too big of an impact on performance
- const fontSize = (scale < 0.1) ? 30 : (scale < 0.2) ? 40 : (scale < 0.3) ? 50 : 60;
- const strokeWidth = fontSize / 2;
- labelMap.current.forEach((text) => {
- text.style.fontSize = fontSize;
- text.style.strokeThickness = strokeWidth;
- });
- } else {
- labelLayer.renderable = false;
+ if (graph.current.nodes.length < config.LABEL_MAX_NODES) {
+ labelLayer.alpha = (scale > 2) ? Math.min(1, (scale - 2) * 3) : 0;
+
+ if (labelLayer.alpha > 0) {
+ labelLayer.renderable = true;
+
+ const scale = 1 / viewport.current!.scale.x; // starts from 0.5 down to 0.
+
+ // Only change the fontSize for specific intervals, continuous change has too big of an impact on performance
+ const fontSize = (scale < 0.1) ? 30 : (scale < 0.2) ? 40 : (scale < 0.3) ? 50 : 60;
+ const strokeWidth = fontSize / 2;
+ labelMap.current.forEach((text) => {
+ text.style.fontSize = fontSize;
+ text.style.strokeThickness = strokeWidth;
+ });
+ } else {
+ labelLayer.renderable = false;
+ }
}
}
}));
@@ -662,13 +666,15 @@ export const NLPixi = (props: Props) => {
}
});
- graph.current.links.forEach((link) => {
- if (!forceClear && labelMap.current.has(link._id)) {
- updateLinkLabel(link);
- } else {
- createLinkLabel(link);
- }
- });
+ if (graph.current.nodes.length < config.LABEL_MAX_NODES) {
+ graph.current.links.forEach((link) => {
+ if (!forceClear && labelMap.current.has(link._id)) {
+ updateLinkLabel(link);
+ } else {
+ createLinkLabel(link);
+ }
+ });
+ }
// // update text colour (written after nodes so that text appears on top of nodes)
// nodes.forEach((node: NodeType) => {
--
GitLab