feat: Update UI to meet design specs [PT-187369359]

- Added common toolbar component and styled it according to spec (not yet implemented tools are marked as such)
- Added toolbar to new dataset component view
- Switched out drawing component sidebar with new toolbar
- Updated right sidebar component styling

src/components/app.scss

@@ -87,6 +87,25 @@
       flex: 1;
       flex-grow: 0;
       gap: 10px;
+      background-color: #dddddd7f;
+      border-radius: 3px;
+      padding: 5px;
+
+      button {
+        width: fit-content;
+        padding: 3px 5px;
+        border-radius: 3px;
+        border: solid 1px #177991;
+        background-color: #fff;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        gap: 3px;
+
+        &:hover {
+          background-color: rgba(114, 191, 202, 0.12);
+        }
+      }
 
       .generate {
         display: flex;
@@ -102,15 +121,22 @@
           label {
             display: block;
             white-space: nowrap;
+            font-weight: bold;
           }
 
           select {
             padding: 2px;
-            width: 125px;
+            width: 100%;
+            border-radius: 1.5px;
+            border: solid 1px #177991;
+            background-color: #fff;
           }
           input {
             padding: 2px;
             width: 55px;
+            border-radius: 1.5px;
+            border: solid 1px #177991;
+            background-color: #fff;
           }
         }
 
@@ -123,25 +149,22 @@
         .buttons {
           display: flex;
           gap: 5px;
-
-          button {
-            width: fit-content;
-          }
         }
       }
 
       .sequence-output {
         display: flex;
         flex-direction: column;
         flex: 1;
-        gap: 10px;
+        gap: 5px;
 
         .output {
           display: flex;
           flex-direction: column;
           // gap: 10px;
           flex: 1;
-          border: 1px solid #000;
+          border: 1px solid #979797;
+          background-color: white;
           position: relative;
 
           .inner-output {
@@ -163,13 +186,29 @@
 
                 &.expanded {
                   flex-direction: column;
+
+                  .firstItem {
+                    display: flex;
+                    flex-direction: row;
+
+                    .collapse {
+                      flex-grow: 1;
+                      text-align: right;
+                      width: 10px;
+                      height: 10px;
+                      margin-top: -2px;
+                    }
+                  }
                 }
                 &.collapsed {
                   flex-direction: row;
 
                   .expand {
                     flex-grow: 1;
                     text-align: right;
+                    width: 10px;
+                    height: 10px;
+                    margin-top: -2px;
                   }
                 }
               }
@@ -181,7 +220,9 @@
         }
 
         .buttons {
-
+          button {
+            padding: 8px;
+          }
         }
       }
     }

src/components/app.tsx

@@ -3,10 +3,16 @@ import { clsx } from "clsx";
 
 import { useCODAP } from "../hooks/use-codap";
 import { useGraph } from "../hooks/use-graph";
-import { Graph } from "./graph";
 import { useGenerator } from "../hooks/use-generator";
 import { Edge, Node } from "../type";
 import { Drawing } from "./drawing";
+import { Dataset } from "./dataset";
+
+import StepIcon from "../assets/step.svg";
+import PlayIcon from "../assets/play.svg";
+import PauseIcon from "../assets/pause.svg";
+import DropdownUpArrowIcon from "../assets/dropdown-up-arrow-icon.svg";
+import DropdownDownArrowIcon from "../assets/dropdown-down-arrow-icon.svg";
 
 import "./app.scss";
 
@@ -35,7 +41,10 @@ const SequenceOutputHeader = ({ group }: { group: SequenceGroup }) => {
   if (expanded) {
     return (
       <div className="header expanded" onClick={handleToggleExpanded}>
-        <div>Starting State: {startingState}</div>
+        <div className="firstItem">
+          <div>Starting State: {startingState}</div>
+          <span className="collapse"><DropdownUpArrowIcon /></span>
+        </div>
         <div>Max Length: {lengthLimit}</div>
         <div>Delimiter: {delimiter}</div>
       </div>
@@ -49,7 +58,7 @@ const SequenceOutputHeader = ({ group }: { group: SequenceGroup }) => {
       <span>{lengthLimit}</span>
       <span>/</span>
       <span>{delimiter}</span>
-      <span className="expand">&hellip;</span>
+      <span className="expand"><DropdownDownArrowIcon /></span>
     </div>
   );
 };
@@ -267,6 +276,7 @@ export const App = () => {
   const uiForGenerate = () => {
     const disabled = graphEmpty();
     const playLabel = generationMode === "playing" ? "Pause" : (generationMode === "paused" ? "Resume" : "Play");
+    const PlayOrPauseIcon = generationMode === "playing" ? PauseIcon : PlayIcon;
     const onPlayClick = generationMode === "playing"
       ? handlePause
       : (generationMode === "paused" ? handleResume : handlePlay);
@@ -305,18 +315,26 @@ export const App = () => {
               />
             </div>
           </div>
+
+          <div>
+            <label>Simulation Speed:</label>
+            <div>TBD</div>
+          </div>
+
         </div>
         <div className="buttons">
           <button
             type="button"
             onClick={onPlayClick}
             disabled={disabled || lengthLimit === undefined || generationMode === "stepping"}>
+            <PlayOrPauseIcon />
             {playLabel}
           </button>
           <button
             type="button"
             onClick={handleStep}
             disabled={disabled || lengthLimit === undefined || generationMode === "playing"}>
+            <StepIcon />
             Step
           </button>
         </div>
@@ -429,17 +447,14 @@ export const App = () => {
                 setSelectedNodeId={setSelectedNodeId}
               />
             :
-              <Graph
-                mode="dataset"
+              <Dataset
                 graph={graph}
                 highlightNode={highlightNode}
                 highlightLoopOnNode={highlightLoopOnNode}
                 highlightEdge={highlightEdge}
                 highlightAllNextNodes={highlightAllNextNodes}
                 selectedNodeId={selectedNodeId}
                 animating={animating}
-                allowDragging={true && !animating}
-                autoArrange={true}
                 setSelectedNodeId={setSelectedNodeId}
               />
           }

src/components/dataset.scss

@@ -0,0 +1,5 @@
+.dataset {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}