From a87b55852115bebab10383260d1a0225017df85e Mon Sep 17 00:00:00 2001
From: Rob Gordon <rob.gordon@tone-row.com>
Date: Thu, 29 Aug 2024 16:44:29 -0400
Subject: [PATCH] Fix CoSE; Reintroduce animation; Fix Stress

---
 app/src/components/Graph.tsx                  | 29 ++++++++++++++++---
 .../lib/templates/mindmap-dark-template.ts    |  2 +-
 .../network-diagram-dark-template.ts          |  2 +-
 app/src/lib/templates/pert-light-template.ts  |  2 +-
 app/src/lib/toTheme.ts                        | 19 +++++++++++-
 5 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
index 46a20211e..ef6987f2f 100644
--- a/app/src/components/Graph.tsx
+++ b/app/src/components/Graph.tsx
@@ -135,6 +135,11 @@ const Graph = memo(function Graph({ shouldResize }: { shouldResize: number }) {
 export default Graph;
 
 function handleDragFree() {
+  // If the layout is fcose, we don't want to freeze the layout
+  // because people may not expect that behavior / Subject to change!
+  const layout = useGraphStore.getState().layout;
+  if (layout.name === "fcose" || layout.name === "stress") return;
+
   const nodePositions = getNodePositionsFromCy();
   useDoc.setState(
     (state) => {
@@ -240,6 +245,10 @@ function initializeGraph({
       }
     );
 
+    cyCurrent.on("dragstart", "node", () => {
+      // stop the layout from running
+      window.__cy?.stop();
+    });
     cyCurrent.on("dragfree", handleDragFree);
 
     // on zoom
@@ -344,9 +353,6 @@ function getGraphUpdater({
 
       elements = getElements(doc.text);
 
-      // Test
-      cyErrorCatcher.current.json({ elements, layout, style });
-
       // Very specific bug wrt to cose layouts
       // If it's the first render, randomize cannot be false
       // Because the graph has no positions yet
@@ -362,8 +368,20 @@ function getGraphUpdater({
         }
       }
 
+      // Stress layout, need to turn off interactive and animation on first render
       // @ts-ignore
-      layout.animate = false;
+      if (layout.name === "elk" && layout.elk.algorithm === "stress") {
+        if (isFirstRender.current) {
+          // @ts-ignore
+          layout.elk.interactive = false;
+          // @ts-ignore
+          layout.animate = false;
+          // @ts-ignore
+          delete layout.animationDuration;
+          // @ts-ignore
+          delete layout.animationEasing;
+        }
+      }
 
       // Finally we get rid of layouts when user has dragged
       // Apply the preset layout if nodePositions is defined
@@ -376,6 +394,9 @@ function getGraphUpdater({
         delete layout.spacingFactor;
       }
 
+      // Test
+      cyErrorCatcher.current.json({ elements, layout, style });
+
       cyErrorCatcher.current.layout(layout);
 
       // Set up a listener to mark the graph as initialized after the first layout run
diff --git a/app/src/lib/templates/mindmap-dark-template.ts b/app/src/lib/templates/mindmap-dark-template.ts
index 97fe5763f..1443c10b3 100644
--- a/app/src/lib/templates/mindmap-dark-template.ts
+++ b/app/src/lib/templates/mindmap-dark-template.ts
@@ -38,7 +38,7 @@ export const theme: FFTheme = {
   targetArrowShape: "none",
   sourceDistanceFromNode: 5,
   targetDistanceFromNode: 5,
-  edgeTextSize: 10,
+  edgeTextSize: 1,
   rotateEdgeLabel: false,
   direction: "DOWN",
   fixedHeight: 300,
diff --git a/app/src/lib/templates/network-diagram-dark-template.ts b/app/src/lib/templates/network-diagram-dark-template.ts
index 75b25bb2d..6e65401da 100644
--- a/app/src/lib/templates/network-diagram-dark-template.ts
+++ b/app/src/lib/templates/network-diagram-dark-template.ts
@@ -48,7 +48,7 @@ export const theme: FFTheme = {
   sourceDistanceFromNode: 0,
   targetDistanceFromNode: 6,
   arrowScale: 0.8,
-  edgeTextSize: 10,
+  edgeTextSize: 1,
   rotateEdgeLabel: false,
   fixedHeight: 100,
 };
diff --git a/app/src/lib/templates/pert-light-template.ts b/app/src/lib/templates/pert-light-template.ts
index 818ba5ea3..a3d1d433f 100644
--- a/app/src/lib/templates/pert-light-template.ts
+++ b/app/src/lib/templates/pert-light-template.ts
@@ -42,7 +42,7 @@ export const theme: FFTheme = {
   sourceDistanceFromNode: 5,
   targetDistanceFromNode: 5,
   arrowScale: 1,
-  edgeTextSize: 10,
+  edgeTextSize: 1,
   rotateEdgeLabel: true,
 };
 
diff --git a/app/src/lib/toTheme.ts b/app/src/lib/toTheme.ts
index 0c704e54f..8ba1422d0 100644
--- a/app/src/lib/toTheme.ts
+++ b/app/src/lib/toTheme.ts
@@ -27,8 +27,25 @@ export function toTheme(theme: FFTheme) {
       // Tree is actually called mr-tree
       algorithm: theme.layoutName,
     };
+
+    if (theme.layoutName === "stress") {
+      // @ts-ignore
+      layout.elk.interactive = true;
+      // @ts-ignore
+      layout.animate = true;
+      // @ts-ignore
+      layout.animationDuration = 150;
+      // @ts-ignore
+      layout.animationEasing = "ease-in-out";
+    }
   } else if (theme.layoutName === "cose") {
     layout.name = "fcose";
+    // @ts-ignore
+    layout.animate = true;
+    // @ts-ignore
+    layout.animationDuration = 150;
+    // @ts-ignore
+    layout.animationEasing = "ease-in-out";
   } else {
     layout.name = theme.layoutName;
   }
@@ -207,7 +224,7 @@ export function toTheme(theme: FFTheme) {
   }
 
   return {
-    layout,
+    layout: layout as cytoscape.LayoutOptions,
     style: preStyle.join("\n"),
     postStyle,
   };