From 13b08d8debcb44b7ad04cffd7908777fb3b0f973 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 15 Aug 2024 18:34:24 -0500
Subject: [PATCH] remove redundant props/emits for invocation steps

---
 .../Graph/WorkflowInvocationSteps.vue         | 56 +------------------
 .../WorkflowInvocationState.vue               |  5 +-
 .../WorkflowInvocationStep.vue                |  8 +--
 3 files changed, 6 insertions(+), 63 deletions(-)

diff --git a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
index b22962edf9be..3cd6c14000fe 100644
--- a/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
+++ b/client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue
@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, ref } from "vue";
 
 import type { WorkflowInvocationElementView } from "@/api/invocations";
 import { isWorkflowInput } from "@/components/Workflow/constants";
@@ -14,33 +14,17 @@ import WorkflowInvocationStep from "@/components/WorkflowInvocationState/Workflo
 
 library.add(faChevronDown, faChevronUp, faSignInAlt);
 
-interface Props {
+const props = defineProps<{
     /** The store id for the invocation graph */
     storeId: string;
     /** The invocation to display */
     invocation: WorkflowInvocationElementView;
     /** The workflow which was run */
     workflow: Workflow;
-    /** Whether the invocation graph is hidden */
-    hideGraph?: boolean;
-    /** The id for the currently shown job */
-    showingJobId: string;
     /** Whether the steps are being rendered on the dedicated invocation page/route */
     isFullPage?: boolean;
-    /** The active node on the graph */
-    activeNodeId?: number;
-}
-
-const emit = defineEmits<{
-    (e: "focus-on-step", stepId: number): void;
-    (e: "update:showing-job-id", value: string | undefined): void;
 }>();
 
-const props = withDefaults(defineProps<Props>(), {
-    hideGraph: true,
-    activeNodeId: undefined,
-});
-
 const invocationStore = useInvocationStore();
 const { graphStepsByStoreId } = storeToRefs(invocationStore);
 const graphSteps = computed(() => graphStepsByStoreId.value[props.storeId]);
@@ -50,35 +34,6 @@ const stepsDiv = ref<HTMLDivElement>();
 const workflowInputSteps = Object.values(props.workflow.steps).filter((step) => isWorkflowInput(step.type));
 const oneOrNoInput = computed(() => workflowInputSteps.length <= 1);
 const expandInvocationInputs = ref(oneOrNoInput.value);
-
-watch(
-    () => [props.activeNodeId, stepsDiv.value],
-    async ([nodeId, card]) => {
-        // if the active node id is an input step, expand the inputs section if not already expanded
-        if (!expandInvocationInputs.value) {
-            const isAnInput = workflowInputSteps.findIndex((step) => step.id === props.activeNodeId) !== -1;
-            expandInvocationInputs.value = isAnInput;
-        }
-
-        await nextTick();
-
-        // on full page view, scroll to the active step card in the steps section
-        if (props.isFullPage) {
-            if (nodeId !== undefined && card) {
-                // scroll to the active step card
-                const stepCard = stepsDiv.value?.querySelector(`[data-index="${props.activeNodeId}"]`);
-                stepCard?.scrollIntoView({ block: "nearest", inline: "start" });
-            }
-        }
-        // clear any job being shown
-        emit("update:showing-job-id", undefined);
-    },
-    { immediate: true }
-);
-
-function showJob(jobId: string | undefined) {
-    emit("update:showing-job-id", jobId);
-}
 </script>
 
 <template>
@@ -108,12 +63,7 @@ function showJob(jobId: string | undefined) {
                 :invocation="props.invocation"
                 :workflow="props.workflow"
                 :workflow-step="step"
-                :in-graph-view="!props.hideGraph"
-                :graph-step="graphSteps[step.id]"
-                :expanded="props.hideGraph ? undefined : props.activeNodeId === step.id"
-                :showing-job-id="props.showingJobId"
-                @show-job="showJob"
-                @update:expanded="emit('focus-on-step', step.id)" />
+                :graph-step="graphSteps[step.id]" />
         </div>
     </div>
 </template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 07d2d65f26d5..e015ebd0e307 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -229,12 +229,11 @@ function cancelWorkflowSchedulingLocal() {
             </BTab>
             <BTab title="Steps" lazy>
                 <WorkflowInvocationSteps
-                    v-if="workflow && invocation"
+                    v-if="workflow && invocation && storeId"
                     :invocation="invocation"
                     :workflow="workflow"
                     :store-id="storeId"
-                    :is-full-page="props.isFullPage"
-                    :showing-job-id="''" />
+                    :is-full-page="props.isFullPage" />
             </BTab>
             <WorkflowInvocationInputOutputTabs :invocation="invocation" />
             <!-- <BTab title="Workflow Overview">
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index e95e19f8957f..e5b993d95186 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -58,9 +58,7 @@
                                             v-if="!inGraphView"
                                             :key="inGraphView"
                                             :jobs="stepDetails.jobs"
-                                            :invocation-graph="inGraphView"
-                                            :showing-job-id="showingJobId"
-                                            @row-clicked="showJob" />
+                                            :invocation-graph="inGraphView" />
                                         <JobStepTabs v-else class="mt-1" :jobs="stepDetails.jobs" />
                                     </span>
                                     <b-alert v-else v-localize variant="info" show>This step has no jobs</b-alert>
@@ -143,7 +141,6 @@ export default {
         workflow: Object,
         graphStep: { type: Object, default: undefined },
         expanded: { type: Boolean, default: undefined },
-        showingJobId: { type: String, default: null },
         inGraphView: { type: Boolean, default: false },
     },
     data() {
@@ -215,9 +212,6 @@ export default {
                 return "No jobs";
             }
         },
-        showJob(id) {
-            this.$emit("show-job", id);
-        },
         toggleStep() {
             this.computedExpanded = !this.computedExpanded;
         },