Visualizing workflow runs with an invocation graph view

client/src/api/invocations.ts

@@ -9,8 +9,18 @@ export type WorkflowInvocationCollectionView = components["schemas"]["WorkflowIn
 export type InvocationJobsSummary = components["schemas"]["InvocationJobsResponse"];
 export type InvocationStep = components["schemas"]["InvocationStep"];
 
+export type StepJobSummary =
+    | components["schemas"]["InvocationStepJobsResponseStepModel"]
+    | components["schemas"]["InvocationStepJobsResponseJobModel"]
+    | components["schemas"]["InvocationStepJobsResponseCollectionJobsModel"];
+
 export const invocationsFetcher = fetcher.path("/api/invocations").method("get").create();
 
+export const stepJobsSummaryFetcher = fetcher
+    .path("/api/invocations/{invocation_id}/step_jobs_summary")
+    .method("get")
+    .create();
+
 export type WorkflowInvocation = WorkflowInvocationElementView | WorkflowInvocationCollectionView;
 
 export interface WorkflowInvocationJobsSummary {

client/src/api/schema/schema.ts

@@ -7963,6 +7963,11 @@ export interface components {
              * @example 0123456789ABCDEF
              */
             id: string;
+            /**
+             * Implicit Collection Jobs ID
+             * @description The implicit collection job ID associated with the workflow invocation step.
+             */
+            implicit_collection_jobs_id?: string | null;
             /** Job Id */
             job_id: string | null;
             /**
@@ -8049,7 +8054,7 @@ export interface components {
         InvocationStepJobsResponseCollectionJobsModel: {
             /**
              * ID
-             * @description The encoded ID of the workflow invocation.
+             * @description The encoded ID of the collection job.
              * @example 0123456789ABCDEF
              */
             id: string;
@@ -8076,7 +8081,7 @@ export interface components {
         InvocationStepJobsResponseJobModel: {
             /**
              * ID
-             * @description The encoded ID of the workflow invocation.
+             * @description The encoded ID of the job.
              * @example 0123456789ABCDEF
              */
             id: string;

client/src/api/workflows.ts

@@ -1,4 +1,6 @@
-import { fetcher } from "@/api/schema";
+import { components, fetcher } from "@/api/schema";
+
+export type StoredWorkflowDetailed = components["schemas"]["StoredWorkflowDetailed"];
 
 export const workflowsFetcher = fetcher.path("/api/workflows").method("get").create();
 

client/src/components/Common/Heading.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
+library.add(faAngleDoubleDown, faAngleDoubleUp);
+
 interface Props {
     h1?: boolean;
     h2?: boolean;
@@ -14,17 +18,20 @@ interface Props {
     inline?: boolean;
     size?: "xl" | "lg" | "md" | "sm" | "text";
     icon?: string | [string, string];
+    truncate?: boolean;
     collapse?: "open" | "closed" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
     collapse: "none",
+    icon: "",
+    size: "lg",
 });
 
 defineEmits(["click"]);
 
 const sizeClass = computed(() => {
-    return `h-${props.size ?? "lg"}`;
+    return `h-${props.size}`;
 });
 
 const collapsible = computed(() => {
@@ -54,7 +61,12 @@ const element = computed(() => {
         <div v-else class="stripe"></div>
         <component
             :is="element"
-            :class="[sizeClass, props.bold ? 'font-weight-bold' : '', collapsible ? 'collapsible' : '']"
+            :class="[
+                sizeClass,
+                props.bold ? 'font-weight-bold' : '',
+                collapsible ? 'collapsible' : '',
+                props.truncate ? 'truncate' : '',
+            ]"
             @click="$emit('click')">
             <slot />
         </component>
@@ -89,14 +101,22 @@ const element = computed(() => {
 
 // prettier-ignore
 h1, h2, h3, h4, h5, h6 {
-    display: flex;
+    &:not(.truncate) {
+        display: flex;
+    }
     align-items: center;
     gap: 0.4em;
 
     &.inline {
         display: inline-flex;
         margin-bottom: 0;
     }
+
+    &.truncate {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 }
 
 .collapsible {

client/src/components/History/SwitchToHistoryLink.vue

@@ -58,8 +58,13 @@ function viewHistoryInNewTab(history: HistorySummary) {
 <template>
     <div>
         <LoadingSpan v-if="!history" />
-        <div v-else v-b-tooltip.hover.top.html :title="`<b>${actionText}</b><br>${history.name}`" class="history-link">
-            <BLink class="truncate" href="#" @click.stop="onClick(history)">
+        <div v-else class="history-link">
+            <BLink
+                v-b-tooltip.hover.top.noninteractive.html
+                class="truncate"
+                href="#"
+                :title="`<b>${actionText}</b><br>${history.name}`"
+                @click.stop="onClick(history)">
                 {{ history.name }}
             </BLink>
 

client/src/components/Panels/FlexPanel.vue

@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useDebounce, useDraggable } from "@vueuse/core";
-import { computed, type PropType, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { useTimeoutThrottle } from "@/composables/throttle";
 
@@ -13,25 +13,25 @@ const { throttle } = useTimeoutThrottle(10);
 
 library.add(faChevronLeft, faChevronRight);
 
-const props = defineProps({
-    collapsible: {
-        type: Boolean,
-        default: true,
-    },
-    side: {
-        type: String as PropType<"left" | "right">,
-        default: "right",
-    },
+interface Props {
+    collapsible?: boolean;
+    side?: "left" | "right";
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+    collapsible: true,
+    side: "right",
+    minWidth: 200,
+    maxWidth: 800,
+    defaultWidth: 300,
 });
 
-const minWidth = 200;
-const maxWidth = 800;
-const defaultWidth = 300;
-
 const draggable = ref<HTMLElement | null>(null);
 const root = ref<HTMLElement | null>(null);
 
-const panelWidth = ref(defaultWidth);
+const panelWidth = ref(props.defaultWidth);
 const show = ref(true);
 
 const { position, isDragging } = useDraggable(draggable, {
@@ -79,10 +79,39 @@ watch(position, () => {
 
         const rectRoot = root.value.getBoundingClientRect();
         const rectDraggable = draggable.value.getBoundingClientRect();
-        panelWidth.value = determineWidth(rectRoot, rectDraggable, minWidth, maxWidth, props.side, position.value.x);
+        panelWidth.value = determineWidth(
+            rectRoot,
+            rectDraggable,
+            props.minWidth,
+            props.maxWidth,
+            props.side,
+            position.value.x
+        );
     });
 });
 
+/** If the the `maxWidth` changes, prevent the panel from exceeding it */
+watch(
+    () => props.maxWidth,
+    (newVal) => {
+        if (newVal && panelWidth.value > newVal) {
+            panelWidth.value = props.maxWidth;
+        }
+    },
+    { immediate: true }
+);
+
+/** If the `minWidth` changes, ensure the panel width is at least the `minWidth` */
+watch(
+    () => props.minWidth,
+    (newVal) => {
+        if (newVal && panelWidth.value < newVal) {
+            panelWidth.value = newVal;
+        }
+    },
+    { immediate: true }
+);
+
 function onKeyLeft() {
     if (props.side === "left") {
         decreaseWidth();
@@ -100,11 +129,11 @@ function onKeyRight() {
 }
 
 function increaseWidth(by = 50) {
-    panelWidth.value = Math.min(panelWidth.value + by, maxWidth);
+    panelWidth.value = Math.min(panelWidth.value + by, props.maxWidth);
 }
 
 function decreaseWidth(by = 50) {
-    panelWidth.value = Math.max(panelWidth.value - by, minWidth);
+    panelWidth.value = Math.max(panelWidth.value - by, props.minWidth);
 }
 
 const sideClasses = computed(() => ({

client/src/components/Workflow/Editor/Node.vue

@@ -12,8 +12,10 @@
         :disabled="readonly"
         @move="onMoveTo"
         @pan-by="onPanBy">
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div
-            class="node-header unselectable clearfix card-header py-1 px-2"
+            class="unselectable clearfix card-header py-1 px-2"
+            :class="headerClass"
             @click="makeActive"
             @keyup.enter="makeActive">
             <b-button-group class="float-right">
@@ -74,6 +76,12 @@
                 >{{ step.id + 1 }}:
             </span>
             <span class="node-title">{{ title }}</span>
+            <span class="float-right">
+                <FontAwesomeIcon
+                    v-if="isInvocation && invocationStep.headerIcon"
+                    :icon="invocationStep.headerIcon"
+                    :spin="invocationStep.headerIconSpin" />
+            </span>
         </div>
         <b-alert
             v-if="!!errors"
@@ -83,11 +91,19 @@
             @click="makeActive">
             {{ errors }}
         </b-alert>
-        <div v-else class="node-body card-body p-0 mx-2" @click="makeActive" @keyup.enter="makeActive">
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
+        <div
+            v-else
+            class="node-body position-relative card-body p-0 mx-2"
+            :class="{ 'cursor-pointer': isInvocation }"
+            @click="makeActive"
+            @keyup.enter="makeActive">
             <NodeInput
                 v-for="(input, index) in inputs"
                 :key="`in-${index}-${input.name}`"
+                :class="isInvocation && 'position-absolute'"
                 :input="input"
+                :blank="isInvocation"
                 :step-id="id"
                 :datatypes-mapper="datatypesMapper"
                 :step-position="step.position ?? { top: 0, left: 0 }"
@@ -97,13 +113,16 @@
                 :parent-node="elHtml"
                 :readonly="readonly"
                 @onChange="onChange" />
-            <div v-if="showRule" class="rule" />
+            <div v-if="!isInvocation && showRule" class="rule" />
+            <NodeInvocationText v-if="isInvocation" :invocation-step="invocationStep" />
             <NodeOutput
                 v-for="(output, index) in outputs"
                 :key="`out-${index}-${output.name}`"
+                :class="isInvocation && 'invocation-node-output'"
                 :output="output"
                 :workflow-outputs="workflowOutputs"
                 :post-job-actions="postJobActions"
+                :blank="isInvocation"
                 :step-id="id"
                 :step-type="step.type"
                 :step-position="step.position ?? { top: 0, left: 0 }"
@@ -133,6 +152,7 @@ import { getGalaxyInstance } from "@/app";
 import { DatatypesMapperModel } from "@/components/Datatypes/model";
 import { useNodePosition } from "@/components/Workflow/Editor/composables/useNodePosition";
 import WorkflowIcons from "@/components/Workflow/icons";
+import type { GraphStep } from "@/composables/useInvocationGraph";
 import { useWorkflowStores } from "@/composables/workflowStores";
 import type { TerminalPosition, XYPosition } from "@/stores/workflowEditorStateStore";
 import type { Step } from "@/stores/workflowStepStore";
@@ -142,6 +162,7 @@ import type { OutputTerminals } from "./modules/terminals";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DraggableWrapper from "@/components/Workflow/Editor/DraggablePan.vue";
 import NodeInput from "@/components/Workflow/Editor/NodeInput.vue";
+import NodeInvocationText from "@/components/Workflow/Editor/NodeInvocationText.vue";
 import NodeOutput from "@/components/Workflow/Editor/NodeOutput.vue";
 import Recommendations from "@/components/Workflow/Editor/Recommendations.vue";
 
@@ -153,7 +174,7 @@ const props = defineProps({
     id: { type: Number, required: true },
     contentId: { type: String as PropType<string | null>, default: null },
     name: { type: String as PropType<string | null>, default: null },
-    step: { type: Object as PropType<Step>, required: true },
+    step: { type: Object as PropType<Step | GraphStep>, required: true },
     datatypesMapper: { type: DatatypesMapperModel, required: true },
     activeNodeId: {
         type: null as unknown as PropType<number | null>,
@@ -164,6 +185,7 @@ const props = defineProps({
     scroll: { type: Object as PropType<UseScrollReturn>, required: true },
     scale: { type: Number, default: 1 },
     highlight: { type: Boolean, default: false },
+    isInvocation: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
 });
 
@@ -219,6 +241,14 @@ const style = computed(() => {
     return { top: props.step.position!.top + "px", left: props.step.position!.left + "px" };
 });
 const errors = computed(() => props.step.errors || stateStore.getStepLoadingState(props.id)?.error);
+const headerClass = computed(() => {
+    return {
+        ...invocationStep.value.headerClass,
+        "cursor-pointer": props.isInvocation,
+        "node-header": !props.isInvocation || invocationStep.value.headerClass === undefined,
+        "cursor-move": !props.readonly && !props.isInvocation,
+    };
+});
 const inputs = computed(() => {
     const connections = connectionStore.getConnectionsForStep(props.id);
     const extraStepInputs = stepStore.getStepExtraInputs(props.id);
@@ -247,6 +277,7 @@ const invalidOutputs = computed(() => {
         return { name, optional: false, datatypes: [], valid: false };
     });
 });
+const invocationStep = computed(() => props.step as GraphStep);
 const outputs = computed(() => {
     return [...props.step.outputs, ...invalidOutputs.value];
 });
@@ -317,12 +348,21 @@ function makeActive() {
     }
 
     .node-header {
-        cursor: move;
         background: $brand-primary;
         color: $white;
+        &.cursor-move {
+            cursor: move;
+        }
     }
 
     .node-body {
+        .invocation-node-output {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+        }
         .rule {
             height: 0;
             border: none;