Merge pull request #72 from concord-consortium/188345474-fix-reload-o…

…f-text-generated-chains

fix: Add save of autoarranged x,y node values [PT-188345474]

src/components/app.tsx

@@ -533,7 +533,9 @@ export const App = () => {
         setSequenceGroups([]);
         setFastSimulation(defaultFastSimulation);
         setGraph(initialGraph ? {...initialGraph} : {nodes: [], edges: []});
-        setFitViewAt(Date.now());
+        setTimeout(() => {
+          setFitViewAt(Date.now());
+        }, 0);
       },
       onClose: () => setConfirmModal(undefined)
     });

src/components/drawing.tsx

@@ -1,7 +1,7 @@
 import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
 import { nanoid } from "nanoid";
 
-import { DrawingMode, Graph, Point, RubberBand, Transform } from "./graph";
+import { D3Node, DrawingMode, Graph, Point, RubberBand, Transform } from "./graph";
 import { Edge, GraphData, Node } from "../type";
 
 import { DragIcon } from "./drawing/drag-icon";
@@ -253,6 +253,25 @@ export const Drawing = (props: Props) => {
     });
   }, [setGraph]);
 
+  const handleAutoArrangeEnd = useCallback((nodes: D3Node[]) => {
+    const d3NodesById = nodes.reduce<Record<string,D3Node>>((acc, cur) => {
+      acc[cur.id] = cur;
+      return acc;
+    }, {});
+
+    setGraph(prev => {
+      prev.nodes = prev.nodes.map(n => {
+        const d3Node = d3NodesById[n.id];
+        if (d3Node) {
+          n.x = d3Node.x;
+          n.y = d3Node.y;
+        }
+        return n;
+      });
+      return prev;
+    });
+  }, [setGraph]);
+
   const handleClearSelectedNode = useCallback(() => setSelectedNodeForModal(undefined), [setSelectedNodeForModal]);
 
   const handleChangeNode = useCallback((id: string, newNode: Node, newEdges: Edge[]) => {
@@ -297,7 +316,11 @@ export const Drawing = (props: Props) => {
     }
     prevWordsRef.current = words;
 
-  }, [setGraph]);
+    setTimeout(() => {
+      onFitView();
+    }, 0);
+
+  }, [setGraph, onFitView]);
 
   return (
     <div className="drawing">
@@ -332,6 +355,7 @@ export const Drawing = (props: Props) => {
         setSelectedNodeId={setSelectedNodeId}
         onDimensions={handleDimensionChange}
         onTransformed={handleTransformed}
+        onAutoArrangeEnd={handleAutoArrangeEnd}
         fitViewAt={fitViewAt}
         recenterViewAt={recenterViewAt}
       />

src/components/graph.tsx

@@ -69,9 +69,10 @@ type Props = {
   onDimensions?: (dimensions: {width: number, height: number}) => void;
   onTransformed?: (transform: Transform) => void;
   setSelectedNodeId: (id?: string, skipToggle?: boolean) => void;
+  onAutoArrangeEnd?: (nodes: D3Node[]) => void;
 };
 
-type D3Node = {
+export type D3Node = {
   index: number,
   id: string;
   label: string;
@@ -246,7 +247,7 @@ export const Graph = (props: Props) => {
   const {graph, highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes, highlightOutputNodes,
          allowDragging, autoArrange, rubberBand, drawingMode,
          onClick, onNodeClick, onNodeDoubleClick, onEdgeClick, onDragStop,
-         fitViewAt, recenterViewAt,
+         fitViewAt, recenterViewAt, onAutoArrangeEnd,
          selectedNodeId, setSelectedNodeId, animating, onDimensions, onTransformed} = props;
   const svgRef = useRef<SVGSVGElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -633,6 +634,8 @@ export const Graph = (props: Props) => {
         simulation.tick();
       }
 
+      onAutoArrangeEnd?.(d3Graph.nodes);
+
       // pin the nodes so that dragging does not cause a force layout change
       d3Graph.nodes
         .forEach((d: any) => {
@@ -794,7 +797,7 @@ export const Graph = (props: Props) => {
 
   }, [svgRef, d3Graph, allowDragging, autoArrange, rubberBand, drawingMode,
       onNodeClick, onNodeDoubleClick, onEdgeClick, onDragStop, setSelectedNodeId,
-      selectedNodeId, highlightSelected]);
+      selectedNodeId, highlightSelected, onAutoArrangeEnd]);
 
   // animate the node if needed
   useEffect(() => {