Merge pull request #68 from concord-consortium/188245100-add-dataset-…

…transition-probabilities feat: Add transition probabilities to dataset mode [PT-188245100]
concord-consortium · Sep 27, 2024 · da0866a · da0866a
2 parents a1f15be + 5b6061c
commit da0866a
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 49 deletions.
diff --git a/src/components/app.scss b/src/components/app.scss
@@ -245,5 +245,51 @@
     }
   }
 
+  .nodeModalBackground {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #000;
+    opacity: 0.25;
+    z-index: 100;
+  }
+  .nodeModal {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 101;
+    user-select: none;
+
+    .nodeModalContent {
+      min-width: 200px;
+
+      .nodeModalTitle {
+        background-color: #177991;
+        color: white;
+        padding: 5px 10px;
+      }
+
+      form {
+        padding: 10px;
+        background-color: white;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        .nodeModalButtons {
+          display: flex;
+          gap: 5px;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
 }
 
diff --git a/src/components/dataset.tsx b/src/components/dataset.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import { Tool, Toolbar } from "./toolbar";
 import { Graph } from "./graph";
 import { Node, Edge, GraphData } from "../type";
+import { NodeModal } from "./drawing/node-modal";
 
 import "./dataset.scss";
 
@@ -30,11 +31,17 @@ export const Dataset = (props: Props) => {
          graph, graphEmpty, setSelectedNodeId, selectedNodeId, animating,
          fitViewAt, recenterViewAt,
          onReset, onReturnToMainMenu, onFitView, onRecenterView} = props;
+  const [selectedNodeForModal, setSelectedNodeForModal] = useState<Node|undefined>(undefined);
 
   const handleToolSelected = (tool: Tool) => {
     // TBD
   };
 
+  const handleNodeDoubleClicked = (id: string) => {
+    setSelectedNodeForModal(graph.nodes.find(n => n.id === id));
+  };
+  const handleClearSelectedNode = () => setSelectedNodeForModal(undefined);
+
   if (graphEmpty) {
     return (
       <div className="dataset">
@@ -82,13 +89,21 @@ export const Dataset = (props: Props) => {
         highlightAllNextNodes={highlightAllNextNodes}
         highlightOutputNodes={highlightOutputNodes}
         selectedNodeId={selectedNodeId}
+        onNodeDoubleClick={handleNodeDoubleClicked}
         animating={animating}
         allowDragging={true && !animating}
         autoArrange={true}
         setSelectedNodeId={setSelectedNodeId}
         fitViewAt={fitViewAt}
         recenterViewAt={recenterViewAt}
       />
+      <NodeModal
+        viewMode="dataset"
+        node={selectedNodeForModal}
+        graph={graph}
+        onChange={() => undefined}
+        onCancel={handleClearSelectedNode}
+      />
     </div>
   );
 };
diff --git a/src/components/drawing.scss b/src/components/drawing.scss
@@ -11,50 +11,6 @@
     pointer-events: none;
   }
 
-  .nodeModalBackground {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: #000;
-    opacity: 0.25;
-    z-index: 100;
-  }
-  .nodeModal {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 101;
-
-    .nodeModalContent {
-      min-width: 200px;
 
-      .nodeModalTitle {
-        background-color: #177991;
-        color: white;
-        padding: 5px 10px;
-      }
-
-      form {
-        padding: 10px;
-        background-color: white;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-
-        .nodeModalButtons {
-          display: flex;
-          gap: 5px;
-          justify-content: flex-end;
-        }
-      }
-    }
-  }
 
 }
diff --git a/src/components/drawing.tsx b/src/components/drawing.tsx
@@ -335,6 +335,7 @@ export const Drawing = (props: Props) => {
       />
       <DragIcon drawingMode={drawingMode} />
       <NodeModal
+        viewMode="drawing"
         node={selectedNodeForModal}
         graph={graph}
         onChange={handleChangeNode}

diff --git a/src/components/drawing/node-modal.tsx b/src/components/drawing/node-modal.tsx
@@ -1,15 +1,17 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { ProbabilitySelector, percentage, reduceToSum } from "./probability-selector";
 import { Node, Edge, GraphData } from "../../type";
+import { ViewMode } from "../../hooks/use-codap";
 
 export interface NodeModalProps {
+  viewMode: ViewMode;
   node?: Node,
   graph: GraphData;
   onChange: (id: string, newNode: Node, newEdge: Edge[]) => void,
   onCancel: () => void
 }
 
-export const NodeModal = ({ node, graph, onChange, onCancel }: NodeModalProps) => {
+export const NodeModal = ({ viewMode, node, graph, onChange, onCancel }: NodeModalProps) => {
   const [label, setLabel] = useState(node?.label || "");
   const [exactPercentages, _setExactPercentages] = useState<number[]>([]);
 
@@ -68,6 +70,29 @@ export const NodeModal = ({ node, graph, onChange, onCancel }: NodeModalProps) =
     return null;
   }
 
+  if (viewMode === "dataset") {
+    return (
+      <>
+        <div className="nodeModalBackground" />
+        <div className="nodeModal">
+          <div className="nodeModalContent">
+            <div className="nodeModalTitle">State: {label}</div>
+            <form>
+              <ProbabilitySelector
+                viewMode={viewMode}
+                exactPercentages={exactPercentages}
+                edgeLabels={edgeLabels}
+                onChange={setExactPercentages} />
+              <div className="nodeModalButtons">
+                <button onClick={onCancel}>Close</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </>
+    );
+  }
+
   return (
     <>
       <div className="nodeModalBackground" />
@@ -77,6 +102,7 @@ export const NodeModal = ({ node, graph, onChange, onCancel }: NodeModalProps) =
           <form onSubmit={handleSubmit}>
             <input type="text" value={label} onChange={handleChangeLabel} autoFocus={true} />
             <ProbabilitySelector
+              viewMode="drawing"
               exactPercentages={exactPercentages}
               edgeLabels={edgeLabels}
               onChange={setExactPercentages} />

diff --git a/src/components/drawing/probability-selector.tsx b/src/components/drawing/probability-selector.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from "react";
+import { ViewMode } from "../../hooks/use-codap";
 
 import "./probability-selector.scss";
 
@@ -15,6 +16,7 @@ interface ProbabilitySelectorThumbProps {
 }
 
 interface ProbabilitySelectorProps {
+  viewMode: ViewMode;
   exactPercentages: number[]
   edgeLabels: string[]
   onChange: (newPercentages: number[]) => void
@@ -73,7 +75,7 @@ export const ProbabilitySelectorThumb = (props: ProbabilitySelectorThumbProps) =
   );
 };
 
-export const ProbabilitySelector = ({exactPercentages, edgeLabels, onChange}: ProbabilitySelectorProps) => {
+export const ProbabilitySelector = ({viewMode, exactPercentages, edgeLabels, onChange}: ProbabilitySelectorProps) => {
 
   const roundPercentages = useMemo(() => {
     const result = exactPercentages.slice(0, -1).map(exactPercentage => Math.round(exactPercentage));
@@ -135,13 +137,15 @@ export const ProbabilitySelector = ({exactPercentages, edgeLabels, onChange}: Pr
     }
   }, [exactPercentages, onChange]);
 
-  if (exactPercentages.length < 2) {
+  const isDrawingMode = viewMode === "drawing";
+  if (isDrawingMode && (exactPercentages.length < 2)) {
     return null;
   }
 
   return (
     <div className="probability-selector">
       <div className="header">Transition Probabilities</div>
+      {isDrawingMode &&
       <div className="svg-container" style={{width: svgWidth, height: svgHeight}}>
         <svg viewBox={`0 0 ${svgWidth} ${svgHeight}`}>
           {segments.map(({start, end}, i) => (
@@ -166,9 +170,10 @@ export const ProbabilitySelector = ({exactPercentages, edgeLabels, onChange}: Pr
           ))}
         </svg>
       </div>
+      }
       <div className="percentages">
         {roundPercentages.map((p, i) => (
-          <div key={i} style={{color: getDistinctColor(i)}}>To {edgeLabels[i]}: {p}%</div>
+          <div key={i} style={{color: isDrawingMode ? getDistinctColor(i) : "#000"}}>To {edgeLabels[i]}: {p}%</div>
         ))}
       </div>
     </div>