Merge pull request #73 from concord-consortium/187399412-more-reset-u…

…pdates feat: Hide graph during reset redraw and reset text input [PT-187399412]
concord-consortium · Oct 1, 2024 · 5671f3f · 5671f3f
2 parents 36a903e + 50da972
commit 5671f3f
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 10 deletions.
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -98,6 +98,7 @@ export const App = () => {
   const [initialGraph, setInitialGraph] = useState<GraphData>();
   const [fitViewAt, setFitViewAt] = useState<number>();
   const [recenterViewAt, setRecenterViewAt] = useState<number>();
+  const [resetViewAt, setResetViewAt] = useState<number>();
   const onCODAPDataChanged = (values: string[]) => {
     updateGraph(values);
     setFitViewAt(Date.now());
@@ -148,6 +149,7 @@ export const App = () => {
   const [delimiterType, setDelimiterType] = useState<DelimiterType>(
     delimiter === "" ? "none" : (delimiter === " " ? "space" : "other"));
   const [confirmModal, setConfirmModal] = useState<IConfirmModal|undefined>(undefined);
+  const [graphOpacity, setGraphOpacity] = useState(1);
 
   const handleDimensionChange = ({width, height}: {width: number, height: number}) => {
     widthRef.current = width;
@@ -532,9 +534,12 @@ export const App = () => {
         setStartingState(defaultStartingState);
         setSequenceGroups([]);
         setFastSimulation(defaultFastSimulation);
+        setGraphOpacity(0);
         setGraph(initialGraph ? {...initialGraph} : {nodes: [], edges: []});
+        setResetViewAt(Date.now());
         setTimeout(() => {
           setFitViewAt(Date.now());
+          setGraphOpacity(1);
         }, 0);
       },
       onClose: () => setConfirmModal(undefined)
@@ -618,6 +623,7 @@ export const App = () => {
                 highlightOutputNodes={highlightOutputNodes}
                 selectedNodeId={selectedNodeId}
                 animating={animating}
+                graphOpacity={graphOpacity}
                 setGraph={setGraph}
                 setHighlightNode={setHighlightNode}
                 setSelectedNodeId={setSelectedNodeId}
@@ -627,6 +633,7 @@ export const App = () => {
                 onRecenterView={handleRecenterView}
                 fitViewAt={fitViewAt}
                 recenterViewAt={recenterViewAt}
+                resetViewAt={resetViewAt}
                 onDimensions={handleDimensionChange}
                 onClearHighlightOutput={handleClearHighlightOutput}
               />
@@ -641,6 +648,7 @@ export const App = () => {
                 selectedNodeId={selectedNodeId}
                 animating={animating}
                 graphEmpty={graphEmpty}
+                graphOpacity={graphOpacity}
                 setSelectedNodeId={setSelectedNodeId}
                 onReset={handleReset}
                 onReturnToMainMenu={handleReturnToMainMenu}

diff --git a/src/components/dataset.tsx b/src/components/dataset.tsx
@@ -16,6 +16,7 @@ interface Props {
   selectedNodeId?: string;
   animating: boolean;
   graphEmpty: boolean;
+  graphOpacity: number;
   fitViewAt?: number;
   recenterViewAt?: number;
   setSelectedNodeId: (id?: string, skipToggle?: boolean) => void;
@@ -29,7 +30,7 @@ interface Props {
 export const Dataset = (props: Props) => {
   const {highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes, highlightOutputNodes,
          graph, graphEmpty, setSelectedNodeId, selectedNodeId, animating,
-         fitViewAt, recenterViewAt,
+         fitViewAt, recenterViewAt, graphOpacity,
          onReset, onReturnToMainMenu, onFitView, onRecenterView} = props;
   const [selectedNodeForModal, setSelectedNodeForModal] = useState<Node|undefined>(undefined);
 
@@ -91,6 +92,7 @@ export const Dataset = (props: Props) => {
         selectedNodeId={selectedNodeId}
         onNodeDoubleClick={handleNodeDoubleClicked}
         animating={animating}
+        opacity={graphOpacity}
         allowDragging={true && !animating}
         autoArrange={true}
         setSelectedNodeId={setSelectedNodeId}

diff --git a/src/components/drawing.tsx b/src/components/drawing.tsx
@@ -23,8 +23,10 @@ interface Props {
   graph: GraphData;
   selectedNodeId?: string;
   animating: boolean;
+  graphOpacity: number;
   fitViewAt?: number;
   recenterViewAt?: number;
+  resetViewAt?: number;
   setGraph: React.Dispatch<React.SetStateAction<GraphData>>;
   setHighlightNode: React.Dispatch<React.SetStateAction<Node | undefined>>
   setSelectedNodeId: (id?: string, skipToggle?: boolean) => void;
@@ -42,7 +44,7 @@ const removePunctuationRegex = /["(){}[\]_+=|\\/><]/g;
 export const Drawing = (props: Props) => {
   const {highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes, highlightOutputNodes,
          graph, setGraph, setHighlightNode, setSelectedNodeId: _setSelectedNodeId,
-         fitViewAt, recenterViewAt, onClearHighlightOutput,
+         fitViewAt, recenterViewAt, onClearHighlightOutput, graphOpacity, resetViewAt,
          selectedNodeId, animating, onReset, onReturnToMainMenu, onFitView, onRecenterView} = props;
   const [drawingMode, setDrawingMode] = useState<DrawingMode>("select");
   const [firstEdgeNode, setFirstEdgeNode] = useState<Node|undefined>(undefined);
@@ -343,6 +345,7 @@ export const Drawing = (props: Props) => {
         highlightOutputNodes={highlightOutputNodes}
         highlightLoopOnNode={highlightLoopOnNode}
         allowDragging={drawingMode === "select"}
+        opacity={graphOpacity}
         autoArrange={autoArrange}
         rubberBand={rubberBand}
         selectedNodeId={selectedNodeId}
@@ -372,6 +375,7 @@ export const Drawing = (props: Props) => {
         visible={drawingMode === "addText"}
         width={addTextWidth}
         disabled={animating}
+        resetViewAt={resetViewAt}
         onChange={handleTextChange}
       />
     </div>

diff --git a/src/components/drawing/add-text.tsx b/src/components/drawing/add-text.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import { clsx } from "clsx";
 
 import "./add-text.scss";
@@ -7,20 +7,31 @@ interface Props {
   disabled: boolean;
   visible: boolean;
   width: number;
+  resetViewAt?: number;
   onChange: (newText: string) => void
 }
 
 // eslint-disable-next-line max-len
 const placeholder = "Create a Markov chain by typing or pasting text here.  WARNING: your current Markov chain will be overwritten.";
 
-export const AddText = forwardRef<HTMLTextAreaElement, Props>(({disabled, visible, width, onChange}: Props, ref) => {
+export const AddText = forwardRef<HTMLTextAreaElement, Props>((props: Props, ref) => {
+  const {disabled, visible, width, resetViewAt, onChange} = props;
+  const [text, setText] = useState("");
+
+  // listen for reset requests
+  useEffect(() => {
+    setText("");
+  }, [resetViewAt]);
+
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onChange(e.currentTarget.value.trim());
+    const newText = e.currentTarget.value;
+    setText(newText);
+    onChange(newText.trim());
   };
 
   return (
     <div className={clsx("addText", {visible})} style={{width}}>
-      <textarea ref={ref} placeholder={placeholder} disabled={disabled} onChange={handleChange} />
+      <textarea ref={ref} placeholder={placeholder} value={text} disabled={disabled} onChange={handleChange} />
     </div>
   );
 });

diff --git a/src/components/graph.tsx b/src/components/graph.tsx
@@ -59,6 +59,7 @@ type Props = {
   drawingMode?: DrawingMode;
   selectedNodeId?: string;
   animating: boolean;
+  opacity: number;
   fitViewAt?: number;
   recenterViewAt?: number;
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -247,7 +248,7 @@ export const Graph = (props: Props) => {
   const {graph, highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes, highlightOutputNodes,
          allowDragging, autoArrange, rubberBand, drawingMode,
          onClick, onNodeClick, onNodeDoubleClick, onEdgeClick, onDragStop,
-         fitViewAt, recenterViewAt, onAutoArrangeEnd,
+         fitViewAt, recenterViewAt, onAutoArrangeEnd, opacity,
          selectedNodeId, setSelectedNodeId, animating, onDimensions, onTransformed} = props;
   const svgRef = useRef<SVGSVGElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
@@ -471,7 +472,7 @@ export const Graph = (props: Props) => {
       .attr("transform", transformRef.current?.toString() ?? "")
       ;
 
-    const addArrowMarker = (id: string, color: string, opacity?: number) => {
+    const addArrowMarker = (id: string, color: string, markerOpacity?: number) => {
       root
         .append("svg:defs")
         .append("svg:marker")
@@ -486,8 +487,8 @@ export const Graph = (props: Props) => {
         .attr("d", "M 0 0 12 6 0 12 3 6 0 0")
         .attr("stroke", color)
         .style("fill", color)
-        .style("fill-opacity", opacity ?? 1)
-        .style("stroke-opacity", opacity ?? 1);
+        .style("fill-opacity", markerOpacity ?? 1)
+        .style("stroke-opacity", markerOpacity ?? 1);
     };
 
     // add arrows markers
@@ -925,6 +926,7 @@ export const Graph = (props: Props) => {
         height="calc(100vh - 20px)"
         viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
         ref={svgRef}
+        style={{opacity}}
       />
       <div className="zoomButtons">
         <button className="plusButton" onClick={handleZoomIn}><PlusIcon /></button>