fix: Updated highlight styling and tool selection to match spec [PT-1…

…88319491]
concord-consortium · Sep 26, 2024 · 06b1019 · 06b1019
1 parent 905f341
commit 06b1019
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/components/app.scss b/src/components/app.scss
@@ -216,9 +216,10 @@
                 }
               }
               .sequences {
-                padding: 5px;
+                padding: 5px 0;
 
                 .sequence {
+                  padding: 0 5px;
                   cursor: pointer;
 
                   &.highlighted {

diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -387,6 +387,8 @@ export const App = () => {
     }
   }, [highlightOutput, setHighlightOutput, setSelectedNodeId]);
 
+  const handleClearHighlightOutput = () => setHighlightOutput(undefined);
+
   const uiForGenerate = () => {
     const playLabel = generationMode === "playing" ? "Pause" : (generationMode === "paused" ? "Resume" : "Play");
     const PlayOrPauseIcon = generationMode === "playing" ? PauseIcon : PlayIcon;
@@ -624,6 +626,7 @@ export const App = () => {
                 fitViewAt={fitViewAt}
                 recenterViewAt={recenterViewAt}
                 onDimensions={handleDimensionChange}
+                onClearHighlightOutput={handleClearHighlightOutput}
               />
             :
               <Dataset

diff --git a/src/components/drawing.tsx b/src/components/drawing.tsx
@@ -33,6 +33,7 @@ interface Props {
   onFitView: () => void;
   onRecenterView: () => void;
   onDimensions?: (dimensions: {width: number, height: number}) => void;
+  onClearHighlightOutput?: () => void;
 }
 
 const keepPunctuationRegex = /[.,?!:;]/g;
@@ -41,7 +42,7 @@ const removePunctuationRegex = /["(){}[\]_+=|\\/><]/g;
 export const Drawing = (props: Props) => {
   const {highlightNode, highlightLoopOnNode, highlightEdge, highlightAllNextNodes, highlightOutputNodes,
          graph, setGraph, setHighlightNode, setSelectedNodeId: _setSelectedNodeId,
-         fitViewAt, recenterViewAt,
+         fitViewAt, recenterViewAt, onClearHighlightOutput,
          selectedNodeId, animating, onReset, onReturnToMainMenu, onFitView, onRecenterView} = props;
   const [drawingMode, setDrawingMode] = useState<DrawingMode>("select");
   const [firstEdgeNode, setFirstEdgeNode] = useState<Node|undefined>(undefined);
@@ -120,6 +121,7 @@ export const Drawing = (props: Props) => {
   }, [drawingMode, textAreaRef]);
 
   const handleToolSelected = (tool: Tool) => {
+    onClearHighlightOutput?.();
     if (drawingTools.includes(tool)) {
       setDrawingMode(tool as DrawingMode);
       setAutoArrange(tool === "addText");