From 1f5c8f94787eeb510edbd31d51725f5e9daa9577 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 24 Apr 2024 12:25:49 -0500
Subject: [PATCH] load full workflow for the version that was run

Without this, the latest version (with potential missing steps from the version that was run) is used to create the graph, and therefore, due to potential mismatch between versions, the graph is incorrect.
---
 .../Workflow/Invocation/Graph/InvocationGraph.vue         | 7 ++++++-
 client/src/components/Workflow/workflows.services.ts      | 8 ++++++--
 client/src/composables/useInvocationGraph.ts              | 8 ++++++--
 client/src/stores/workflowStore.ts                        | 1 +
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
index 30f877d39ee6..2b0dce10a01a 100644
--- a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -70,8 +70,13 @@ const invocationRef = computed(() => props.invocation);
 const { datatypesMapper } = useDatatypesMapper();
 
 const workflowId = computed(() => props.workflow?.id);
+const workflowVersion = computed(() => props.workflow?.version);
 
-const { steps, storeId, loadInvocationGraph } = useInvocationGraph(invocationRef, workflowId.value);
+const { steps, storeId, loadInvocationGraph } = useInvocationGraph(
+    invocationRef,
+    workflowId.value,
+    workflowVersion.value
+);
 
 // Equivalent to onMounted; this is where the graph is initialized, and the polling is started
 watch(
diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
index 775d6d193d59..2eb5b113ad47 100644
--- a/client/src/components/Workflow/workflows.services.ts
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -77,8 +77,12 @@ export async function createWorkflow(workflowName: string, workflowAnnotation: s
     return data;
 }
 
-export async function getWorkflowFull(workflowId: string) {
-    const { data } = await axios.get(withPrefix(`/workflow/load_workflow?_=true&id=${workflowId}`));
+export async function getWorkflowFull(workflowId: string, version?: number) {
+    let url = `/workflow/load_workflow?_=true&id=${workflowId}`;
+    if (version !== undefined) {
+        url += `&version=${version}`;
+    }
+    const { data } = await axios.get(withPrefix(url));
     return data;
 }
 
diff --git a/client/src/composables/useInvocationGraph.ts b/client/src/composables/useInvocationGraph.ts
index cbccda9a239e..11119edb9ac6 100644
--- a/client/src/composables/useInvocationGraph.ts
+++ b/client/src/composables/useInvocationGraph.ts
@@ -78,7 +78,8 @@ const ALL_INSTANCES_STATES = ["deleted", "skipped", "new", "queued"];
  */
 export function useInvocationGraph(
     invocation: Ref<components["schemas"]["WorkflowInvocationElementView"]>,
-    workflowId: string | undefined
+    workflowId: string | undefined,
+    workflowVersion: number | undefined
 ) {
     library.add(faCheckCircle, faClock, faExclamationTriangle, faForward, faPause, faSpinner, faTrash);
 
@@ -98,10 +99,13 @@ export function useInvocationGraph(
             if (!workflowId) {
                 throw new Error("Workflow Id is not defined");
             }
+            if (workflowVersion === undefined) {
+                throw new Error("Workflow Version is not defined");
+            }
 
             // initialize the original full workflow and invocation graph refs (only on the first load)
             if (!loadedWorkflow.value) {
-                loadedWorkflow.value = await getWorkflowFull(workflowId);
+                loadedWorkflow.value = await getWorkflowFull(workflowId, workflowVersion);
             }
             if (!invocationGraph.value) {
                 invocationGraph.value = {
diff --git a/client/src/stores/workflowStore.ts b/client/src/stores/workflowStore.ts
index aca2e887f5e7..b757fe868b20 100644
--- a/client/src/stores/workflowStore.ts
+++ b/client/src/stores/workflowStore.ts
@@ -11,6 +11,7 @@ export interface Workflow {
     steps: Steps;
     step_count?: number;
     latest_id?: string;
+    version: number;
 }
 
 export const useWorkflowStore = defineStore("workflowStore", () => {