From 20cd0081fbb1fd569a4679ccbd8bda959f022fa3 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Mon, 4 Sep 2023 16:28:20 +0200
Subject: refactor(frontend): graph visualizer performance

Also show scopes unconditionally if enabled.
---
 .../frontend/src/graph/DotGraphVisualizer.tsx      | 25 ++++++++++++++++++----
 subprojects/frontend/src/graph/dotSource.ts        |  6 +++---
 2 files changed, 24 insertions(+), 7 deletions(-)

(limited to 'subprojects/frontend')

diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
index 41fd7225..02f31085 100644
--- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
+++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx
@@ -29,13 +29,17 @@ function DotGraphVisualizer({
   graph,
   fitZoom,
   transitionTime,
+  animateThreshold,
 }: {
   graph: GraphStore;
   fitZoom?: FitZoomCallback;
   transitionTime?: number;
+  animateThreshold?: number;
 }): JSX.Element {
   const transitionTimeOrDefault =
     transitionTime ?? DotGraphVisualizer.defaultProps.transitionTime;
+  const animateThresholdOrDefault =
+    animateThreshold ?? DotGraphVisualizer.defaultProps.animateThreshold;
   const disposerRef = useRef<IReactionDisposer | undefined>();
   const graphvizRef = useRef<
     Graphviz<BaseType, unknown, null, undefined> | undefined
@@ -75,6 +79,8 @@ function DotGraphVisualizer({
           Workaround for error in `@types/d3-graphviz`.
         */
         renderer.transition(transition as any);
+        let animate = true;
+        let previousSize = 0;
         let newViewBox = { width: 0, height: 0 };
         renderer.onerror(LOG.error.bind(LOG));
         renderer.on(
@@ -106,17 +112,27 @@ function DotGraphVisualizer({
         }
         disposerRef.current = reaction(
           () => dotSource(graph),
-          (source) => {
-            if (source !== undefined) {
-              renderer.renderDot(source);
+          (result) => {
+            if (result === undefined) {
+              return;
             }
+            const [source, size] = result;
+            // Disable tweening for large graphs to improve performance.
+            // See https://github.com/magjac/d3-graphviz/issues/232#issuecomment-1157555213
+            const newAnimate = size + previousSize < animateThresholdOrDefault;
+            if (animate !== newAnimate) {
+              renderer.tweenPaths(newAnimate);
+              animate = newAnimate;
+            }
+            previousSize = size;
+            renderer.renderDot(source);
           },
           { fireImmediately: true },
         );
         graphvizRef.current = renderer;
       }
     },
-    [graph, fitZoom, transitionTimeOrDefault],
+    [graph, fitZoom, transitionTimeOrDefault, animateThresholdOrDefault],
   );
 
   return <GraphTheme ref={setElement} />;
@@ -125,6 +141,7 @@ function DotGraphVisualizer({
 DotGraphVisualizer.defaultProps = {
   fitZoom: undefined,
   transitionTime: 250,
+  animateThreshold: 50,
 };
 
 export default observer(DotGraphVisualizer);
diff --git a/subprojects/frontend/src/graph/dotSource.ts b/subprojects/frontend/src/graph/dotSource.ts
index 5f7707aa..5e0b44c8 100644
--- a/subprojects/frontend/src/graph/dotSource.ts
+++ b/subprojects/frontend/src/graph/dotSource.ts
@@ -142,7 +142,7 @@ function createNodes(graph: GraphStore, lines: string[]): void {
     const classes = classList.join(' ');
     const name = nodeName(graph, node);
     const border = node.kind === 'INDIVIDUAL' ? 2 : 1;
-    const count = scopes && data.equalsSelf !== 'TRUE' ? ` ${data.count}` : '';
+    const count = scopes ? ` ${data.count}` : '';
     lines.push(`n${i} [id="${node.name}", class="${classes}", label=<
         <table border="${border}" cellborder="0" cellspacing="0" style="rounded" bgcolor="white">
           <tr><td cellpadding="4.5" width="32" bgcolor="green">${name}${count}</td></tr>`);
@@ -323,7 +323,7 @@ function createEdges(graph: GraphStore, lines: string[]): void {
 
 export default function dotSource(
   graph: GraphStore | undefined,
-): string | undefined {
+): [string, number] | undefined {
   if (graph === undefined) {
     return undefined;
   }
@@ -336,5 +336,5 @@ export default function dotSource(
   createNodes(graph, lines);
   createEdges(graph, lines);
   lines.push('}');
-  return lines.join('\n');
+  return [lines.join('\n'), lines.length];
 }
-- 
cgit v1.2.3-54-g00ecf