perf: do not show edge labels when number of nodes exceeds configurable threshold

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) => {