feat: Added reset and home button [PT-187321069] [PT-187361590]

src/components/app.scss

@@ -107,6 +107,12 @@
         }
       }
 
+      label {
+        display: block;
+        white-space: nowrap;
+        font-weight: bold;
+      }
+
       .generate {
         display: flex;
         flex-direction: column;
@@ -118,12 +124,6 @@
           flex-direction: column;
           gap: 5px;
 
-          label {
-            display: block;
-            white-space: nowrap;
-            font-weight: bold;
-          }
-
           select {
             padding: 2px;
             width: 100%;

src/components/app.tsx

@@ -116,7 +116,7 @@ export const App = () => {
     }
   }, [sequenceGroups]);
 
-  const graphEmpty = useCallback(() => graph.nodes.length === 0, [graph]);
+  const graphEmpty = useMemo(() => graph.nodes.length === 0, [graph]);
 
   const generateNewSequence = useCallback(async () => {
     currentSequence.current = [];
@@ -274,7 +274,7 @@ export const App = () => {
   }, [generateNewSequence, animateCurrentSequenceIndex, startAnimationInterval]);
 
   const uiForGenerate = () => {
-    const disabled = graphEmpty();
+    const disabled = graphEmpty;
     const playLabel = generationMode === "playing" ? "Pause" : (generationMode === "paused" ? "Resume" : "Play");
     const PlayOrPauseIcon = generationMode === "playing" ? PauseIcon : PlayIcon;
     const onPlayClick = generationMode === "playing"
@@ -346,6 +346,7 @@ export const App = () => {
     const disabled = sequenceGroups.length === 0;
     return (
       <div className="sequence-output">
+        <label>Output:</label>
         <div className="output">
           <div className="inner-output" ref={innerOutputRef}>
             {sequenceGroups.map((group, i) => {
@@ -382,6 +383,19 @@ export const App = () => {
     notifyStateIsDirty();
   };
 
+  const handleReset = () => {
+    if (confirm("Are you sure you want to reset?\n\nAny changes you have made will be lost.")) {
+      setGraph({nodes: [], edges: []});
+    }
+  };
+
+  const handleReturnToMainMenu = () => {
+    if (confirm("Are you sure you want to reset?\n\nAny changes you have made will be lost.")) {
+      setGraph({nodes: [], edges: []});
+      setViewMode(undefined);
+    }
+  };
+
   if (loadState === "loading") {
     return <div className="loading">Loading ...</div>;
   }
@@ -410,23 +424,18 @@ export const App = () => {
     );
   }
 
-  if (graphEmpty() && viewMode === "dataset") {
+  const maybeRenderRightBar = () => {
+    if (viewMode === "dataset" && graphEmpty) {
+      return;
+    }
+
     return (
-      <div className={clsx("app", { dragging })}>
-        <div className="instructions">
-          <h2>Markov Chains</h2>
-          <p>
-            This plugin generates sequences of text using a Markov chain. The plugin uses a Markov chain built from a
-            dataset in CODAP. The dataset must have a column of states. The plugin will build a Markov chain from the
-            states, and then allow generation of a sequence of text using the Markov chain.
-          </p>
-          <p>
-            To use the plugin, first drag an attribute into the plugin.
-          </p>
-        </div>
+      <div className="right">
+        {uiForGenerate()}
+        {sequenceOutput()}
       </div>
     );
-  }
+  };
 
   return (
     <div className={clsx("app", { dragging })}>
@@ -445,6 +454,8 @@ export const App = () => {
                 setGraph={setGraph}
                 setHighlightNode={setHighlightNode}
                 setSelectedNodeId={setSelectedNodeId}
+                onReset={handleReset}
+                onReturnToMainMenu={handleReturnToMainMenu}
               />
             :
               <Dataset
@@ -455,14 +466,14 @@ export const App = () => {
                 highlightAllNextNodes={highlightAllNextNodes}
                 selectedNodeId={selectedNodeId}
                 animating={animating}
+                graphEmpty={graphEmpty}
                 setSelectedNodeId={setSelectedNodeId}
+                onReset={handleReset}
+                onReturnToMainMenu={handleReturnToMainMenu}
               />
           }
         </div>
-        <div className="right">
-          {uiForGenerate()}
-          {sequenceOutput()}
-        </div>
+        {maybeRenderRightBar()}
       </div>
     </div>
   );

src/components/dataset.tsx

@@ -13,22 +13,53 @@ interface Props {
   graph: GraphData;
   selectedNodeId?: string;
   animating: boolean;
+  graphEmpty: boolean;
   setSelectedNodeId: (id?: string, skipToggle?: boolean) => void;
+  onReset: () => void;
+  onReturnToMainMenu: () => void;
 }
 
-const tools: Tool[] = ["select","fitView","recenter","reset","home"];
-
 export const Dataset = (props: Props) => {
   const {highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes,
-    graph, setSelectedNodeId, selectedNodeId, animating} = props;
+    graph, graphEmpty, setSelectedNodeId, selectedNodeId, animating, onReset, onReturnToMainMenu} = props;
+
 
   const handleToolSelected = (tool: Tool) => {
     // TBD
   };
 
+  if (graphEmpty) {
+    return (
+      <div className="dataset">
+        <Toolbar
+          tools={["home"]}
+          onToolSelected={handleToolSelected}
+          onReset={onReset}
+          onReturnToMainMenu={onReturnToMainMenu}
+        />
+        <div className="instructions">
+          <h2>Markov Chains</h2>
+          <p>
+            This plugin generates sequences of text using a Markov chain. The plugin uses a Markov chain built from a
+            dataset in CODAP. The dataset must have a column of states. The plugin will build a Markov chain from the
+            states, and then allow generation of a sequence of text using the Markov chain.
+          </p>
+          <p>
+            To use the plugin, first drag an attribute into the plugin.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="dataset">
-      <Toolbar tools={tools} onToolSelected={handleToolSelected} />
+      <Toolbar
+        tools={["select","fitView","recenter","reset","home"]}
+        onToolSelected={handleToolSelected}
+        onReset={onReset}
+        onReturnToMainMenu={onReturnToMainMenu}
+      />
       <Graph
         mode="dataset"
         graph={graph}

src/components/drawing.tsx

@@ -24,11 +24,14 @@
   setGraph: React.Dispatch<React.SetStateAction<GraphData>>;
   setHighlightNode: React.Dispatch<React.SetStateAction<Node | undefined>>
   setSelectedNodeId: (id?: string, skipToggle?: boolean) => void;
+  onReset: () => void;
+  onReturnToMainMenu: () => void;
 }
 
 export const Drawing = (props: Props) => {
   const {highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes,
-         graph, setGraph, setHighlightNode, setSelectedNodeId: _setSelectedNodeId, selectedNodeId, animating} = props;
+         graph, setGraph, setHighlightNode, setSelectedNodeId: _setSelectedNodeId,
+         selectedNodeId, animating, onReset, onReturnToMainMenu} = props;
   const [drawingMode, setDrawingMode] = useState<DrawingMode>("select");
   const [firstEdgeNode, setFirstEdgeNode] = useState<Node|undefined>(undefined);
   const [rubberBand, setRubberBand] = useState<RubberBand|undefined>(undefined);
@@ -96,7 +99,7 @@
   */
 
   const addNode = useCallback(({x, y}: {x: number, y: number}) => {
     console.log("ADD NODE");
     setGraph(prev => {
       const id = nanoid();
       const label = `State ${prev.nodes.length + 1}`;
@@ -124,7 +127,6 @@
   }, [setGraph]);
 
   const handleClicked = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    console.log("HANDLE CLICKED");
     if (drawingMode === "addNode") {
       addNode(translateToGraphPoint(e));
       // handleSetSelectMode();
@@ -244,7 +246,12 @@
 
   return (
     <div className="drawing">
-      <Toolbar tools={tools} onToolSelected={handleToolSelected} />
+      <Toolbar
+        tools={tools}
+        onToolSelected={handleToolSelected}
+        onReset={onReset}
+        onReturnToMainMenu={onReturnToMainMenu}
+      />
       <Graph
         mode="drawing"
         drawingMode={drawingMode}

src/components/toolbar.tsx

@@ -16,7 +16,7 @@ import "./toolbar.scss";
 export const allTools = ["select","addNode","addEdge","addText","delete","fitView","recenter","reset","home"] as const;
 const toggleableTools: Tool[] = ["select","addNode","addEdge","addText","delete"];
 const nonTopTools: Tool[] = ["reset","home"];
-const notImplementedTools: Tool[] = ["addText","fitView","recenter","reset","home"];
+const notImplementedTools: Tool[] = ["addText","fitView","recenter"];
 
 export type Tool = typeof allTools[number];
 
@@ -53,6 +53,8 @@ interface ToolbarButtonProps {
 interface ToolbarProps {
   tools: Tool[]
   onToolSelected: (tool: Tool) => void;
+  onReset: () => void;
+  onReturnToMainMenu: () => void;
 }
 
 export const ToolbarButton = ({tool, selectedTool, onClick}: ToolbarButtonProps) => {
@@ -74,12 +76,16 @@ export const ToolbarButton = ({tool, selectedTool, onClick}: ToolbarButtonProps)
   );
 };
 
-export const Toolbar = ({tools, onToolSelected}: ToolbarProps) => {
+export const Toolbar = ({tools, onToolSelected, onReset, onReturnToMainMenu}: ToolbarProps) => {
   const [selectedTool, setSelectedTool] = useState<Tool>("select");
 
   const handleToolSelected = (tool: Tool) => {
     if (toggleableTools.includes(tool)) {
       setSelectedTool(tool);
+    } else if (tool === "reset") {
+      onReset();
+    } else if (tool === "home") {
+      onReturnToMainMenu();
     }
     onToolSelected(tool);
   };