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(); + } +}