use invocation graph composable in steps view, no need for store ref

Author: ahmedhamidawan

client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue

@@ -71,15 +71,13 @@ const stepCard = ref<BCard | null>(null);
 const loadedJobInfo = ref<typeof WorkflowInvocationStep | null>(null);
 const workflowGraph = ref<InstanceType<typeof WorkflowGraph> | null>(null);
 
-const invocationRef = computed(() => props.invocation);
-
 const { datatypesMapper } = useDatatypesMapper();
 
 const workflowId = computed(() => props.workflow?.id);
 const workflowVersion = computed(() => props.workflow?.version);
 
 const { steps, storeId, loadInvocationGraph, loading } = useInvocationGraph(
-    invocationRef,
+    computed(() => props.invocation),
     computed(() => props.stepsJobsSummary),
     workflowId.value,
     workflowVersion.value

client/src/components/Workflow/Invocation/Graph/WorkflowInvocationSteps.vue

@@ -1,34 +1,26 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronDown, faChevronUp, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert } from "bootstrap-vue";
-import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
-import type { WorkflowInvocationElementView } from "@/api/invocations";
+import type { StepJobSummary, WorkflowInvocationElementView } from "@/api/invocations";
 import { isWorkflowInput } from "@/components/Workflow/constants";
+import { useInvocationGraph } from "@/composables/useInvocationGraph";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
-import { useInvocationStore } from "@/stores/invocationStore";
 
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
 
-library.add(faChevronDown, faChevronUp, faSignInAlt);
-
 const props = defineProps<{
-    /** The store id for the invocation graph */
-    storeId: string;
     /** The invocation to display */
     invocation: WorkflowInvocationElementView;
     /** Whether the steps are being rendered on the dedicated invocation page/route */
     isFullPage?: boolean;
+    /** The job summary for each step in the invocation */
+    stepsJobsSummary: StepJobSummary[];
 }>();
 
-const invocationStore = useInvocationStore();
-const { graphStepsByStoreId } = storeToRefs(invocationStore);
-const graphSteps = computed(() => graphStepsByStoreId.value[props.storeId]);
-
 const stepsDiv = ref<HTMLDivElement>();
 
 const { workflow, loading, error } = useWorkflowInstance(props.invocation.workflow_id);
@@ -38,11 +30,24 @@ const workflowInputSteps = workflow.value
     : [];
 const oneOrNoInput = computed(() => workflowInputSteps.length <= 1);
 const expandInvocationInputs = ref(oneOrNoInput.value);
+
+const {
+    steps: graphSteps,
+    loadInvocationGraph,
+    loading: graphLoading,
+} = useInvocationGraph(
+    computed(() => props.invocation),
+    computed(() => props.stepsJobsSummary),
+    workflow.value?.id,
+    workflow.value?.version
+);
+
+loadInvocationGraph(false);
 </script>
 
 <template>
-    <BAlert v-if="loading" variant="info" show>
-        <LoadingSpan message="Loading workflow" />
+    <BAlert v-if="loading || graphLoading" variant="info" show>
+        <LoadingSpan message="Loading invocation steps" />
     </BAlert>
     <BAlert v-else-if="error" variant="danger" show>
         {{ error }}

client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue

@@ -201,8 +201,6 @@ watch(
     { immediate: true }
 );
 
-const storeId = computed(() => (invocation.value ? `invocation-${invocation.value.id}` : undefined));
-
 watch(
     () => invocationSchedulingTerminal.value,
     async (newVal, oldVal) => {
@@ -412,9 +410,9 @@ async function onCancel() {
                     <span v-localize>Subworkflow steps are not available.</span>
                 </BAlert>
                 <WorkflowInvocationSteps
-                    v-else-if="invocation && storeId"
+                    v-else-if="invocation && stepsJobsSummary"
                     :invocation="invocation"
-                    :store-id="storeId"
+                    :steps-jobs-summary="stepsJobsSummary"
                     :is-full-page="props.isFullPage" />
             </div>
             <WorkflowInvocationInputOutputTabs

client/src/composables/useInvocationGraph.ts

@@ -8,7 +8,6 @@ import {
     faSpinner,
     faTrash,
 } from "@fortawesome/free-solid-svg-icons";
-import { storeToRefs } from "pinia";
 import { computed, type Ref, ref, set } from "vue";
 
 import { fetchCollectionDetails } from "@/api/datasetCollections";
@@ -18,9 +17,8 @@ import type { StoredWorkflowDetailed } from "@/api/workflows";
 import { getContentItemState } from "@/components/History/Content/model/states";
 import { isWorkflowInput } from "@/components/Workflow/constants";
 import { fromSimple } from "@/components/Workflow/Editor/modules/model";
-import { getWorkflowFull } from "@/components/Workflow/workflows.services";
-import { useInvocationStore } from "@/stores/invocationStore";
 import type { Step } from "@/stores/workflowStepStore";
+import { useWorkflowStore } from "@/stores/workflowStore";
 import { rethrowSimple } from "@/utils/simple-error";
 
 import { provideScopedWorkflowStores } from "./workflowStores";
@@ -89,20 +87,25 @@ export function useInvocationGraph(
     const storeId = computed(() => `invocation-${invocation.value.id}`);
 
     const lastStepsJobsSummary = ref<StepJobSummary[]>([]);
-    const invocationStore = useInvocationStore();
-    const { graphStepsByStoreId } = storeToRefs(invocationStore);
 
-    /** The full invocation mapped onto the original workflow */
+    /** The full invocation mapped onto the original workflow.
+     * _(Needed to map the invocation onto the workflow editor graph.)_
+     */
     const invocationGraph = ref<InvocationGraph | null>(null);
 
     /** The workflow that was invoked */
     const loadedWorkflow = ref<any>(null);
 
+    const workflowStore = useWorkflowStore();
+
     const loading = ref(true);
 
     provideScopedWorkflowStores(storeId);
 
-    async function loadInvocationGraph() {
+    /** Load the invocation graph and steps onto the editor canvas.
+     * @param loadOntoEditor - If set to false, initializes graph steps but does not load them onto the editor.
+     */
+    async function loadInvocationGraph(loadOntoEditor = true) {
         loading.value = true;
 
         try {
@@ -115,7 +118,7 @@ export function useInvocationGraph(
 
             // initialize the original full workflow and invocation graph refs (only on the first load)
             if (!loadedWorkflow.value) {
-                loadedWorkflow.value = await getWorkflowFull(workflowId, workflowVersion);
+                loadedWorkflow.value = await workflowStore.getFullWorkflowCached(workflowId, workflowVersion);
             }
             if (!invocationGraph.value) {
                 invocationGraph.value = {
@@ -130,7 +133,7 @@ export function useInvocationGraph(
             }
 
             // Load the invocation graph into the editor the first time
-            if (!stepsPopulated.value) {
+            if (!stepsPopulated.value && loadOntoEditor) {
                 invocationGraph.value!.steps = { ...steps.value };
                 await fromSimple(storeId.value, invocationGraph.value as any);
                 stepsPopulated.value = true;
@@ -191,10 +194,6 @@ export function useInvocationGraph(
             if (!steps.value[i]) {
                 set(steps.value, i, graphStepFromWfStep);
             }
-
-            // update the invocation store's graph steps object
-            // TODO: Find a better way of doing this, instead of using two separate objects...?
-            set(graphStepsByStoreId.value, storeId.value, steps.value);
         }
 
         lastStepsJobsSummary.value = stepsJobsSummary;

client/src/stores/invocationStore.ts

@@ -1,5 +1,4 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
 
 import { GalaxyApi } from "@/api";
 import type {
@@ -10,14 +9,9 @@ import type {
     WorkflowInvocationRequest,
 } from "@/api/invocations";
 import { type FetchParams, useKeyedCache } from "@/composables/keyedCache";
-import type { GraphStep } from "@/composables/useInvocationGraph";
 import { rethrowSimple } from "@/utils/simple-error";
 
-type GraphSteps = { [index: string]: GraphStep };
-
 export const useInvocationStore = defineStore("invocationStore", () => {
-    const graphStepsByStoreId = ref<{ [index: string]: GraphSteps }>({});
-
     async function fetchInvocationDetails(params: FetchParams): Promise<WorkflowInvocation> {
         const { data, error } = await GalaxyApi().GET("/api/invocations/{invocation_id}", {
             params: { path: { invocation_id: params.id } },
@@ -136,7 +130,6 @@ export const useInvocationStore = defineStore("invocationStore", () => {
         getInvocationStepById,
         getInvocationRequestById,
         getInvocationCountByWorkflowId,
-        graphStepsByStoreId,
         isLoadingInvocation,
     };
 });