From 7758ae976a13ebb17e31c8d0e3739bc376490cdf Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 5 Nov 2024 11:58:55 -0600
Subject: [PATCH] on a repetition of the step clicked, scroll to the step

---
 .../src/components/Workflow/Editor/WorkflowGraph.vue   |  3 ++-
 .../Workflow/Invocation/Graph/InvocationGraph.vue      | 10 +++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 917e3cb55ad4..14c83d2a8cbf 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -92,7 +92,7 @@ import WorkflowEdges from "@/components/Workflow/Editor/WorkflowEdges.vue";
 import WorkflowMinimap from "@/components/Workflow/Editor/WorkflowMinimap.vue";
 import ZoomControl from "@/components/Workflow/Editor/ZoomControl.vue";
 
-const emit = defineEmits(["transform", "graph-offset", "onRemove", "scrollTo"]);
+const emit = defineEmits(["transform", "graph-offset", "onRemove", "scrollTo", "stepClicked"]);
 const props = defineProps({
     steps: { type: Object as PropType<{ [index: string]: Step }>, required: true },
     datatypesMapper: { type: DatatypesMapperModel, required: true },
@@ -176,6 +176,7 @@ function onDragConnector(position: TerminalPosition, draggingTerminal: OutputTer
     isDragging.value = true;
 }
 function onActivate(nodeId: number | null) {
+    emit("stepClicked", nodeId);
     if (activeNodeId.value !== nodeId) {
         stateStore.activeNodeId = nodeId;
     }
diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
index 1c9e173b6c58..4d6f6e68717d 100644
--- a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -148,6 +148,13 @@ function scrollStepToView() {
     const stepCardHeader = stepCard.value?.querySelector(".card-header");
     stepCardHeader?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
+
+/** On a repetition of the step clicked, scroll to the step */
+function stepClicked(nodeId: number | null) {
+    if (nodeId === activeNodeId.value) {
+        scrollStepToView();
+    }
+}
 </script>
 
 <template>
@@ -174,7 +181,8 @@ function scrollStepToView() {
                             :show-minimap="props.showMinimap"
                             :show-zoom-controls="props.showZoomControls"
                             is-invocation
-                            readonly />
+                            readonly
+                            @stepClicked="stepClicked" />
                     </BCard>
                 </div>
             </div>