diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index e152292f2db3..c73a7b5b9b21 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -69,6 +69,7 @@
                 <FontAwesomeIcon icon="fa-code-branch" />
             </span>
             <span
+                v-if="!invocation"
                 v-b-tooltip.hover
                 title="Index of the step in the workflow run form. Steps are ordered by distance to the upper-left corner of the window; inputs are listed first."
                 >{{ step.id + 1 }}:
@@ -83,7 +84,13 @@
             @click="makeActive">
             {{ errors }}
         </b-alert>
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div v-else class="node-body card-body p-0 mx-2" @click="makeActive" @keyup.enter="makeActive">
+            <GenericItem
+                v-if="step.type === 'history_item'"
+                :key="step.name"
+                :item-id="step.name"
+                item-src="hda" />
             <NodeInput
                 v-for="(input, index) in inputs"
                 :key="`in-${index}-${input.name}`"
@@ -98,6 +105,7 @@
                 :readonly="readonly"
                 @onChange="onChange" />
             <div v-if="showRule" class="rule" />
+            <!-- <span v-if="invocation"> -->
             <NodeOutput
                 v-for="(output, index) in outputs"
                 :key="`out-${index}-${output.name}`"
@@ -113,9 +121,14 @@
                 :datatypes-mapper="datatypesMapper"
                 :parent-node="elHtml"
                 :readonly="readonly"
+                :invocation="invocation && step.type !== 'history_item'"
                 @onDragConnector="onDragConnector"
                 @stopDragging="onStopDragging"
                 @onChange="onChange" />
+            <!-- </span>
+            <span v-else>
+
+            </span> -->
         </div>
     </DraggableWrapper>
 </template>
@@ -139,10 +152,12 @@ import type { Step } from "@/stores/workflowStepStore";
 
 import type { OutputTerminals } from "./modules/terminals";
 
+import GenericItem from "@/components/History/Content/GenericItem.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import DraggableWrapper from "@/components/Workflow/Editor/DraggablePan.vue";
 import NodeInput from "@/components/Workflow/Editor/NodeInput.vue";
 import NodeOutput from "@/components/Workflow/Editor/NodeOutput.vue";
+// import NodeInvocationOutput from "@/components/Workflow/Editor/NodeInvocationOutput.vue";
 import Recommendations from "@/components/Workflow/Editor/Recommendations.vue";
 
 Vue.use(BootstrapVue);
@@ -165,6 +180,7 @@ const props = defineProps({
     scale: { type: Number, default: 1 },
     highlight: { type: Boolean, default: false },
     readonly: { type: Boolean, default: false },
+    invocation: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
diff --git a/client/src/components/Workflow/Editor/NodeInvocationOutput.vue b/client/src/components/Workflow/Editor/NodeInvocationOutput.vue
new file mode 100644
index 000000000000..3ade4881f3aa
--- /dev/null
+++ b/client/src/components/Workflow/Editor/NodeInvocationOutput.vue
@@ -0,0 +1,458 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import {
+    faCheckSquare,
+    faChevronCircleRight,
+    faEye,
+    faEyeSlash,
+    faMinus,
+    faPlus,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import type { UseElementBoundingReturn, UseScrollReturn } from "@vueuse/core";
+import { computed, ComputedRef, nextTick, onBeforeUnmount, type Ref, ref, toRefs, type UnwrapRef, watch } from "vue";
+
+import type { DatatypesMapperModel } from "@/components/Datatypes/model";
+import { useWorkflowStores } from "@/composables/workflowStores";
+import type { XYPosition } from "@/stores/workflowEditorStateStore";
+import {
+    type OutputTerminalSource,
+    type PostJobAction,
+    type PostJobActions,
+    type Step,
+} from "@/stores/workflowStepStore";
+import { assertDefined, ensureDefined } from "@/utils/assertions";
+
+import { useRelativePosition } from "./composables/relativePosition";
+import { useTerminal } from "./composables/useTerminal";
+import { type CollectionTypeDescriptor, NULL_COLLECTION_TYPE_DESCRIPTION } from "./modules/collectionTypeDescription";
+import { OutputTerminals } from "./modules/terminals";
+
+import DraggableWrapper from "./DraggablePan.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import ConnectionMenu from "@/components/Workflow/Editor/ConnectionMenu.vue";
+
+type ElementBounding = UnwrapRef<UseElementBoundingReturn>;
+
+library.add(faSquare, faCheckSquare, faChevronCircleRight, faEye, faEyeSlash, faMinus, faPlus);
+
+const props = defineProps<{
+    output: OutputTerminalSource;
+    workflowOutputs: NonNullable<Step["workflow_outputs"]>;
+    stepType: Step["type"];
+    stepId: number;
+    postJobActions: PostJobActions;
+    stepPosition: Step["position"];
+    rootOffset: ElementBounding;
+    scroll: UseScrollReturn;
+    scale: number;
+    datatypesMapper: DatatypesMapperModel;
+    parentNode: HTMLElement | null;
+    readonly: boolean;
+}>();
+
+const emit = defineEmits(["pan-by", "stopDragging", "onDragConnector"]);
+const { stateStore, stepStore } = useWorkflowStores();
+const { rootOffset, output, stepId, datatypesMapper } = toRefs(props);
+
+const terminalComponent: Ref<InstanceType<typeof DraggableWrapper> | null> = ref(null);
+const terminalElement = computed(() => (terminalComponent.value?.$el as HTMLElement) ?? null);
+
+const position = useRelativePosition(
+    terminalElement,
+    computed(() => props.parentNode)
+);
+
+const extensions = computed(() => {
+    let changeDatatype: PostJobAction | undefined;
+    if ("label" in props.output && props.postJobActions[`ChangeDatatypeAction${props.output.label}`]) {
+        changeDatatype = props.postJobActions[`ChangeDatatypeAction${props.output.label}`];
+    } else {
+        changeDatatype = props.postJobActions[`ChangeDatatypeAction${props.output.name}`];
+    }
+    let extensions =
+        changeDatatype?.action_arguments.newtype ||
+        ("extensions" in props.output && props.output.extensions) ||
+        ("type" in props.output && props.output.type) ||
+        "unspecified";
+    if (!Array.isArray(extensions)) {
+        extensions = [extensions];
+    }
+    return extensions;
+});
+
+const effectiveOutput = ref({ ...output.value, extensions: extensions.value });
+
+watch(extensions, () => {
+    effectiveOutput.value = { ...output.value, extensions: extensions.value };
+});
+
+const { terminal, isMappedOver: isMultiple } = useTerminal(stepId, effectiveOutput, datatypesMapper) as {
+    terminal: Ref<OutputTerminals>;
+    isMappedOver: ComputedRef<boolean>;
+};
+
+const workflowOutput = computed(() =>
+    props.workflowOutputs.find((workflowOutput) => workflowOutput.output_name == props.output.name)
+);
+
+const isVisible = computed(() => {
+    const isHidden = `HideDatasetAction${props.output.name}` in props.postJobActions;
+    return !isHidden;
+});
+
+const visibleHint = computed(() => {
+    if (isVisible.value) {
+        return `Output will be visible in history. Click to hide output.`;
+    } else {
+        return `Output will be hidden in history. Click to make output visible.`;
+    }
+});
+const label = computed(() => {
+    return workflowOutput.value?.label || props.output.name;
+});
+
+const rowClass = computed(() => {
+    const classes = ["form-row", "dataRow", "output-data-row"];
+    if ("valid" in props.output && props.output?.valid === false) {
+        classes.push("form-row-error");
+    }
+    return classes;
+});
+
+const menu: Ref<InstanceType<typeof ConnectionMenu> | undefined> = ref();
+const showChildComponent = ref(false);
+
+function closeMenu() {
+    showChildComponent.value = false;
+}
+
+async function toggleChildComponent() {
+    showChildComponent.value = !showChildComponent.value;
+    if (showChildComponent.value) {
+        await nextTick();
+        if (menu.value?.$el instanceof HTMLElement) {
+            menu.value!.$el.focus();
+        }
+    } else {
+        terminalElement.value!.focus();
+    }
+}
+
+function onToggleActive() {
+    if (props.readonly) {
+        return;
+    }
+
+    const step = stepStore.getStep(stepId.value);
+    assertDefined(step);
+    let stepWorkflowOutputs = [...(step.workflow_outputs || [])];
+    if (workflowOutput.value) {
+        stepWorkflowOutputs = stepWorkflowOutputs.filter(
+            (workflowOutput) => workflowOutput.output_name !== output.value.name
+        );
+    } else {
+        stepWorkflowOutputs.push({ output_name: output.value.name, label: output.value.name });
+    }
+    stepStore.updateStep({ ...step, workflow_outputs: stepWorkflowOutputs });
+}
+
+function onToggleVisible() {
+    if (props.readonly) {
+        return;
+    }
+
+    const actionKey = `HideDatasetAction${props.output.name}`;
+    const step = { ...ensureDefined(stepStore.getStep(stepId.value)) };
+    if (isVisible.value) {
+        step.post_job_actions = {
+            ...step.post_job_actions,
+            [actionKey]: {
+                action_type: "HideDatasetAction",
+                output_name: props.output.name,
+                action_arguments: {},
+            },
+        };
+    } else {
+        if (step.post_job_actions) {
+            const { [actionKey]: _unused, ...newPostJobActions } = step.post_job_actions;
+            step.post_job_actions = newPostJobActions;
+        } else {
+            step.post_job_actions = {};
+        }
+    }
+    stepStore.updateStep(step);
+}
+
+function onPanBy(panBy: XYPosition) {
+    emit("pan-by", panBy);
+}
+
+function onStopDragging() {
+    isDragging.value = false;
+    dragX.value = 0;
+    dragY.value = 0;
+    emit("stopDragging");
+}
+
+const dragX = ref(0);
+const dragY = ref(0);
+const isDragging = ref(false);
+
+const startX = computed(
+    () => position.value.offsetLeft + (props.stepPosition?.left ?? 0) + (terminalElement.value?.offsetWidth ?? 2) / 2
+);
+const startY = computed(
+    () => position.value.offsetTop + (props.stepPosition?.top ?? 0) + (terminalElement.value?.offsetHeight ?? 2) / 2
+);
+const endX = computed(() => {
+    return (dragX.value || startX.value) + props.scroll.x.value / props.scale;
+});
+const endY = computed(() => {
+    return (dragY.value || startY.value) + props.scroll.y.value / props.scale;
+});
+const dragPosition = computed(() => {
+    return {
+        startX: startX.value,
+        endX: endX.value,
+        startY: startY.value,
+        endY: endY.value,
+    };
+});
+
+watch([dragPosition, isDragging], () => {
+    if (isDragging.value) {
+        emit("onDragConnector", dragPosition.value, terminal.value);
+    }
+});
+
+watch(
+    [startX, startY],
+    ([x, y]) => {
+        stateStore.setOutputTerminalPosition(props.stepId, props.output.name, { startX: x, startY: y });
+    },
+    {
+        immediate: true,
+    }
+);
+
+function onMove(dragPosition: XYPosition) {
+    dragX.value = dragPosition.x + terminalElement.value!.clientWidth / 2;
+    dragY.value = dragPosition.y + terminalElement.value!.clientHeight / 2;
+}
+
+const id = computed(() => `node-${props.stepId}-output-${props.output.name}`);
+const showCalloutActiveOutput = computed(() => props.stepType === "tool" || props.stepType === "subworkflow");
+const showCalloutVisible = computed(() => props.stepType === "tool");
+
+function collectionTypeToDescription(collectionTypeDescription: CollectionTypeDescriptor) {
+    let collectionDescription = collectionTypeDescription.collectionType;
+    if (
+        collectionTypeDescription &&
+        collectionTypeDescription.isCollection &&
+        collectionTypeDescription.collectionType
+    ) {
+        // we'll give a prettier label to the must common nested lists
+        switch (collectionTypeDescription.collectionType) {
+            case "list:paired": {
+                collectionDescription = "list of pairs dataset collection";
+                break;
+            }
+            case "list:list": {
+                collectionDescription = "list of lists dataset collection";
+                break;
+            }
+            default: {
+                if (collectionTypeDescription.rank > 1) {
+                    collectionDescription = `dataset collection with ${collectionTypeDescription.rank} levels of nesting`;
+                }
+                break;
+            }
+        }
+    }
+    return collectionDescription;
+}
+
+const outputDetails = computed(() => {
+    let collectionType = "collectionType" in terminal.value && terminal.value.collectionType;
+    const outputType =
+        collectionType && collectionType.isCollection && collectionType.collectionType
+            ? `output is ${collectionTypeToDescription(collectionType)}`
+            : `output is dataset`;
+    if (isMultiple.value) {
+        if (!collectionType) {
+            collectionType = NULL_COLLECTION_TYPE_DESCRIPTION;
+        }
+        const effectiveOutputType = terminal.value.mapOver.append(collectionType);
+        return `${outputType} and mapped-over to produce a ${collectionTypeToDescription(effectiveOutputType)} `;
+    }
+    return outputType;
+});
+
+const isDuplicateLabel = computed(() => {
+    const duplicateLabels = stepStore.duplicateLabels;
+    return Boolean(label.value && duplicateLabels.has(label.value));
+});
+
+const labelClass = computed(() => {
+    if (isDuplicateLabel.value) {
+        return "alert-info";
+    }
+    return null;
+});
+
+const labelToolTipTitle = computed(() => {
+    return `Output label '${workflowOutput.value?.label}' is not unique`;
+});
+
+onBeforeUnmount(() => {
+    stateStore.deleteOutputTerminalPosition(props.stepId, props.output.name);
+});
+
+const addTagsAction = computed(() => {
+    return props.postJobActions[`TagDatasetAction${props.output.name}`]?.action_arguments?.tags?.split(",") ?? [];
+});
+
+const removeTagsAction = computed(() => {
+    return props.postJobActions[`RemoveTagDatasetAction${props.output.name}`]?.action_arguments?.tags?.split(",") ?? [];
+});
+</script>
+
+<template>
+    <div class="node-output" :class="rowClass" :data-output-name="output.name">
+        <div class="d-flex flex-column w-100">
+            <div class="node-output-buttons">
+                <button
+                    v-if="showCalloutActiveOutput"
+                    v-b-tooltip
+                    class="callout-terminal inline-icon-button mark-terminal"
+                    :class="{ 'mark-terminal-active': workflowOutput }"
+                    title="Checked outputs will become primary workflow outputs and are available as subworkflow outputs."
+                    @click="onToggleActive">
+                    <FontAwesomeIcon v-if="workflowOutput" fixed-width icon="fa-check-square" />
+                    <FontAwesomeIcon v-else fixed-width icon="far fa-square" />
+                </button>
+                <button
+                    v-if="showCalloutVisible"
+                    v-b-tooltip
+                    class="callout-terminal inline-icon-button mark-terminal"
+                    :class="{ 'mark-terminal-visible': isVisible, 'mark-terminal-hidden': !isVisible }"
+                    :title="visibleHint"
+                    @click="onToggleVisible">
+                    <FontAwesomeIcon v-if="isVisible" fixed-width icon="fa-eye" />
+                    <FontAwesomeIcon v-else fixed-width icon="fa-eye-slash" />
+                </button>
+                <span>
+                    <span
+                        v-b-tooltip
+                        :title="labelToolTipTitle"
+                        class="d-inline-block rounded"
+                        :class="labelClass"
+                        :disabled="!isDuplicateLabel">
+                        {{ label }}
+                    </span>
+                    <span> ({{ extensions.join(", ") }}) </span>
+                </span>
+            </div>
+
+            <div
+                v-if="addTagsAction.length > 0"
+                v-b-tooltip.left
+                class="d-flex align-items-center overflow-x-hidden"
+                title="These tags will be added to the output dataset">
+                <FontAwesomeIcon icon="fa-plus" class="mr-1" />
+                <StatelessTags disabled no-padding :value="addTagsAction" />
+            </div>
+
+            <div
+                v-if="removeTagsAction.length > 0"
+                v-b-tooltip.left
+                class="d-flex align-items-center overflow-x-hidden"
+                title="These tags will be removed from the output dataset">
+                <FontAwesomeIcon icon="fa-minus" class="mr-1" />
+                <StatelessTags disabled no-padding :value="removeTagsAction" />
+            </div>
+        </div>
+
+        <DraggableWrapper
+            :id="id"
+            ref="terminalComponent"
+            v-b-tooltip.hover="outputDetails"
+            class="output-terminal prevent-zoom"
+            :class="{ 'mapped-over': isMultiple }"
+            :output-name="output.name"
+            :root-offset="rootOffset"
+            :prevent-default="false"
+            :stop-propagation="true"
+            :drag-data="{ stepId: stepId, output: effectiveOutput }"
+            :draggable="!readonly"
+            :disabled="readonly"
+            @pan-by="onPanBy"
+            @start="isDragging = true"
+            @stop="onStopDragging"
+            @move="onMove">
+            <button
+                class="connection-menu-button"
+                :aria-label="`Connect output ${output.name} to input. Press space to see a list of available inputs`"
+                @click="toggleChildComponent"></button>
+
+            <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
+
+            <ConnectionMenu
+                v-if="showChildComponent"
+                ref="menu"
+                :terminal="terminal"
+                @closeMenu="closeMenu"></ConnectionMenu>
+        </DraggableWrapper>
+    </div>
+</template>
+
+<style lang="scss">
+@import "theme/blue.scss";
+@import "nodeTerminalStyle.scss";
+
+.node-output-buttons {
+    overflow-wrap: anywhere;
+}
+.node-output {
+    display: flex;
+    position: relative;
+}
+
+.node-output-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-left: -0.2rem;
+}
+
+.output-terminal {
+    @include node-terminal-style(right);
+
+    &:hover {
+        color: $brand-success;
+    }
+
+    button:focus + .terminal-icon {
+        color: $brand-success;
+    }
+}
+
+.connection-menu-button {
+    border: none;
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    transition: none;
+
+    &:focus,
+    &:focus-visible {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        box-shadow: 0 0 0 0.2rem $brand-primary;
+        background-color: $white;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 3d21e05105ed..88d55befd107 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -3,6 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import {
     faCheckSquare,
+    faChevronCircleDown,
     faChevronCircleRight,
     faEye,
     faEyeSlash,
@@ -35,7 +36,7 @@ import ConnectionMenu from "@/components/Workflow/Editor/ConnectionMenu.vue";
 
 type ElementBounding = UnwrapRef<UseElementBoundingReturn>;
 
-library.add(faSquare, faCheckSquare, faChevronCircleRight, faEye, faEyeSlash, faMinus, faPlus);
+library.add(faSquare, faCheckSquare, faChevronCircleDown, faChevronCircleRight, faEye, faEyeSlash, faMinus, faPlus);
 
 const props = defineProps<{
     output: OutputTerminalSource;
@@ -50,6 +51,7 @@ const props = defineProps<{
     datatypesMapper: DatatypesMapperModel;
     parentNode: HTMLElement | null;
     readonly: boolean;
+    invocation: boolean;
 }>();
 
 const emit = defineEmits(["pan-by", "stopDragging", "onDragConnector"]);
@@ -379,8 +381,8 @@ const removeTagsAction = computed(() => {
             :id="id"
             ref="terminalComponent"
             v-b-tooltip.hover="outputDetails"
-            class="output-terminal prevent-zoom"
-            :class="{ 'mapped-over': isMultiple }"
+            class="prevent-zoom"
+            :class="{ 'mapped-over': isMultiple, 'output-terminal': !invocation, 'invocation-terminal': invocation }"
             :output-name="output.name"
             :root-offset="rootOffset"
             :prevent-default="false"
@@ -398,7 +400,8 @@ const removeTagsAction = computed(() => {
                 :aria-label="`Connect output ${output.name} to input. Press space to see a list of available inputs`"
                 @click="toggleChildComponent"></button>
 
-            <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
+            <FontAwesomeIcon v-if="!invocation" class="terminal-icon" icon="fa-chevron-circle-right" />
+            <FontAwesomeIcon v-else class="terminal-icon" icon="fa-chevron-circle-down" />
 
             <ConnectionMenu
                 v-if="showChildComponent"
@@ -439,6 +442,18 @@ const removeTagsAction = computed(() => {
     }
 }
 
+.invocation-terminal {
+    @include node-terminal-style(bottom);
+
+    &:hover {
+        color: $brand-success;
+    }
+
+    button:focus + .terminal-icon {
+        color: $brand-success;
+    }
+}
+
 .connection-menu-button {
     border: none;
     position: absolute;
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 467ad460dd29..a3f7dfe5b337 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -31,6 +31,7 @@
                     :scroll="scroll"
                     :scale="scale"
                     :readonly="readonly"
+                    :invocation="invocation"
                     @pan-by="panBy"
                     @stopDragging="onStopDragging"
                     @onDragConnector="onDragConnector"
@@ -93,6 +94,7 @@ const props = defineProps({
     initialPosition: { type: Object as PropType<{ x: number; y: number }>, default: () => ({ x: 50, y: 20 }) },
     showMinimap: { type: Boolean, default: true },
     showZoomControls: { type: Boolean, default: true },
+    invocation: { type: Boolean, default: false },
 });
 
 const { stateStore, stepStore } = useWorkflowStores();
diff --git a/client/src/components/Workflow/Editor/modules/model.ts b/client/src/components/Workflow/Editor/modules/model.ts
index e8437f439032..b5e6cc2aee89 100644
--- a/client/src/components/Workflow/Editor/modules/model.ts
+++ b/client/src/components/Workflow/Editor/modules/model.ts
@@ -13,6 +13,11 @@ interface Workflow {
     tags: string[];
 }
 
+interface Invocation {
+    steps: Steps;
+    comments: WorkflowComment[];
+}
+
 /**
  * Loads a workflow into the editor
  *
@@ -23,7 +28,7 @@ interface Workflow {
  */
 export async function fromSimple(
     id: string,
-    data: Workflow,
+    data: Workflow | Invocation,
     appendData = false,
     defaultPosition = { top: 0, left: 0 }
 ) {
diff --git a/client/src/components/Workflow/Invocation/InvocationGraph.vue b/client/src/components/Workflow/Invocation/InvocationGraph.vue
new file mode 100644
index 000000000000..56d9900498d9
--- /dev/null
+++ b/client/src/components/Workflow/Invocation/InvocationGraph.vue
@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import axios, { type AxiosError } from "axios";
+import { computed, ref, watch } from "vue";
+
+import { fromSimple } from "@/components/Workflow/Editor/modules/model";
+import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { provideScopedWorkflowStores } from "@/composables/workflowStores";
+import type { Workflow } from "@/stores/workflowStore";
+import { withPrefix } from "@/utils/redirect";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
+
+const TERMINAL_JOB_STATES = ["ok", "error", "deleted", "paused"];
+
+type Outputs = {
+    [key: string]: {
+        id: string;
+        src: "hda" | "ldda" | "hdca" | "hdas" | "lddas" | "hdcas" | "dataset" | "dataset_collection";
+        uuid: string;
+    };
+};
+
+type WfOutputs = {
+    extensions: string[];
+    name: string;
+    optional: boolean;
+    collection?: boolean;
+    collection_type?: string;
+    type?: string;
+}[];
+
+type InputConnection = {
+    id: number;
+    output_name: string;
+    input_type: string;
+};
+
+type Step = {
+    id: number;
+    name: string;
+    position: {
+        left: number;
+        top: number;
+    };
+    inputs: unknown[];
+    input_connections: Record<string, InputConnection[]>;
+    outputs: WfOutputs;
+    state: string;
+    jobs: unknown[];
+    type: string;
+    label: string;
+};
+
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    invocation: {
+        type: Object,
+        required: true,
+    },
+    zoom: {
+        type: Number,
+        default: 0.75,
+    },
+    showMinimap: {
+        type: Boolean,
+        default: true,
+    },
+    showZoomControls: {
+        type: Boolean,
+        default: true,
+    },
+    initialX: {
+        type: Number,
+        default: -20,
+    },
+    initialY: {
+        type: Number,
+        default: -20,
+    },
+});
+
+const workflow = ref<Workflow | null>(null);
+
+const loading = ref(true);
+const errored = ref(false);
+const errorMessage = ref("");
+const steps = ref<Record<string, Step>>({});
+
+const { datatypesMapper } = useDatatypesMapper();
+
+const storeId = computed(() => `invocation-${props.invocation.id}`);
+
+const { stateStore } = provideScopedWorkflowStores(storeId);
+
+watch(
+    () => props.zoom,
+    () => stateStore.setScale(props.zoom),
+    { immediate: true }
+);
+
+watch(
+    () => props.id,
+    async (id: string) => {
+        loading.value = true;
+        errored.value = false;
+        errorMessage.value = "";
+
+        try {
+            const { data: fullWorkflow } = await axios.get(withPrefix(`/workflow/load_workflow?_=true&id=${id}`));
+            workflow.value = fullWorkflow;
+
+            // console.log("WORKFLOW", fullWorkflow.steps);
+
+            const originalSteps = { ...fullWorkflow.steps } as Record<string, Step>;
+            console.log("ORIGINAL", originalSteps);
+
+            /** a mapping from an original WF step index to a graph step index
+             * and a list of children graph step indices
+             */
+            const wfStepToGraphStep: Record<number, { newIndex: number, children: number[] }> = {};
+
+            let counter = 0;
+            for (let i = 0; i < Object.keys(originalSteps).length; i++) {
+                const currOriginalWfStep = originalSteps[i];
+
+                /** a step in the graph that is a WF step (not an INV output) */
+                const currWfGraphStepIndex = counter;
+                wfStepToGraphStep[i] = { newIndex: currWfGraphStepIndex, children: [] };
+
+                console.log("awan curr", currOriginalWfStep?.name, i);
+
+                const wfStepInputConnections = currOriginalWfStep?.input_connections;
+                // update input connections to correspond to new graph step index
+                if (wfStepInputConnections) {
+                    Object.entries(wfStepInputConnections).forEach(([inputName, outputArray]) => {
+                        if (outputArray === undefined) {
+                            return;
+                        }
+                        if (!Array.isArray(outputArray)) {
+                            outputArray = [outputArray];
+                        }
+
+                        console.log("awan be4", JSON.stringify(outputArray));
+
+                        const updatedOutputs: any[] = [];
+                        outputArray.forEach((output: any) => {
+                            // output.id = wfStepToGraphStep[output.id]?.newIndex;
+                            const copiedOutput = { ...output };
+                            const changedIds = wfStepToGraphStep[output.id]?.children || [];
+                            changedIds.forEach((id) => {
+                                updatedOutputs.push({
+                                    ...copiedOutput,
+                                    id: id,
+                                });
+                            });
+                        });
+                        outputArray = updatedOutputs;
+                        wfStepInputConnections[inputName] = outputArray;
+
+                        console.log("awan atr", JSON.stringify(outputArray));
+
+                    });
+                }
+                console.log("awan curr_ic", JSON.stringify(wfStepInputConnections));
+
+                const left = i * 300;
+                // create graph step that is the current original workflow step
+                const currWfStep = Object.freeze({
+                    ...currOriginalWfStep,
+                    id: currWfGraphStepIndex,
+                    position: {
+                        left: left,
+                        top: 0,
+                    },
+                    label: `Step ${i+1}: ${currOriginalWfStep?.name}`,
+                }) as Step;
+                steps.value[`${counter}`] = currWfStep;
+                counter++;
+
+                if (props.invocation.steps[i]) {
+                    /** There is an invocation step for this workflow step */
+
+                    // get full invocation step
+                    const { data: invocationStep } = await axios.get(withPrefix(`/api/invocations/any/steps/${props.invocation.steps[i].id}`));
+                    console.log("BEFORE", invocationStep);
+
+                    if (["scheduled", "cancelled", "failed"].includes(invocationStep.state) && invocationStep.jobs.every((job: any) => TERMINAL_JOB_STATES.includes(job.state))) {
+                        invocationStep.state = "terminal";
+                    }
+
+                    currOriginalWfStep?.outputs.forEach((output, outputIndex) => {
+                        let currInvOutput;
+                        if (output.collection) {
+                            currInvOutput = invocationStep.output_collections[output.name];
+                        } else {
+                            currInvOutput = invocationStep.outputs[output.name];
+                        }
+                        // const currInvOutput = invocationStep.outputs[output.name];
+
+                        // if (output.optional) // TODO: deal with this case
+
+                        console.log("maybe here: ", output, invocationStep);
+                        if (currInvOutput) {
+                            // copy an original wf step and replace its data with the
+                            // current step's invocation output(s)
+                            const copiedWfStep: Step = { ...currWfStep };
+                            copiedWfStep.id = counter;
+                            wfStepToGraphStep[i]?.children.push(counter);
+                            copiedWfStep.position = {
+                                left: left,
+                                top: (outputIndex + 1) * 300,
+                            };
+                            copiedWfStep.name = currInvOutput.id;
+                            copiedWfStep.label = "Output File"; // TODO: output ds/dsc etc.
+                            copiedWfStep.type = "history_item";
+
+                            copiedWfStep.input_connections = {};
+                            copiedWfStep.input_connections[`input${outputIndex+1}`] = [{
+                                id: currWfStep.id, // should correspond to input
+                                output_name: output.name,
+                                input_type: currInvOutput.src === "hda" ? "dataset" : "dataset_collection",
+                            }];
+
+                            console.log("curr", copiedWfStep.name, outputIndex);
+                            console.log("curr_ic", copiedWfStep.input_connections);
+
+                            copiedWfStep.outputs = currOriginalWfStep?.outputs || [];
+                            copiedWfStep.inputs = [{
+                                extensions: ["input"],
+                                input_type: currInvOutput.src === "hda" ? "dataset" : "dataset_collection",
+                                label: currInvOutput.src === "hda" ? "Dataset" : "Dataset Collection",
+                                multiple: false, // TODO
+                                name: `input${outputIndex+1}`,
+                            }];
+
+                            steps.value[`${counter}`] = copiedWfStep;
+                            counter++;
+                        }
+                    });
+
+                } else {
+                    /** There is no invocation step for this workflow step,
+                     * so create an errored step
+                     */
+
+                    console.log("I think we done...", currWfStep);
+                }
+
+                
+            }
+
+            const fullInvocation = {
+                steps: steps.value as any,
+                comments: [],
+            };
+            await fromSimple(storeId.value, fullInvocation);
+
+            console.log("awan AFTER", steps.value);
+        } catch (e) {
+            const error = e as AxiosError<{ err_msg?: string }>;
+            console.error(e);
+
+            if (error.response?.data.err_msg) {
+                errorMessage.value = error.response.data.err_msg;
+            } else {
+                errorMessage.value = e as string;
+            }
+
+            errored.value = true;
+        } finally {
+            loading.value = false;
+        }
+    },
+    {
+        immediate: true,
+    }
+);
+
+const initialPosition = computed(() => ({
+    x: -props.initialX * props.zoom,
+    y: -props.initialY * props.zoom,
+}));
+</script>
+
+<template>
+    <div id="center" class="container-root m-3 w-100 overflow-auto d-flex flex-column">
+        <b-alert v-if="loading" show variant="info">
+            <LoadingSpan message="Loading Invocation Graph" />
+        </b-alert>
+        <div v-else-if="errored">
+            <b-alert v-if="errorMessage" show variant="danger">
+                {{ errorMessage }}
+            </b-alert>
+            <b-alert v-else show variant="danger"> Unknown Error </b-alert>
+        </div>
+        <div v-else-if="workflow && datatypesMapper" class="workflow-invocation">
+            <div class="workflow-preview d-flex flex-column">
+                <b-card class="workflow-card">
+                    <WorkflowGraph
+                        :steps="steps"
+                        :datatypes-mapper="datatypesMapper"
+                        :initial-position="initialPosition"
+                        :show-minimap="props.showMinimap"
+                        :show-zoom-controls="props.showZoomControls"
+                        invocation
+                        readonly />
+                </b-card>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.container-root {
+    container-type: inline-size;
+}
+
+.workflow-invocation {
+    display: flex;
+    flex-grow: 1;
+    gap: 1rem;
+    height: 100%;
+
+    .workflow-preview {
+        flex-grow: 1;
+
+        .workflow-card {
+            flex-grow: 1;
+        }
+    }
+}
+
+@container (max-width: 900px) {
+    .workflow-invocation {
+        flex-direction: column;
+        height: unset;
+
+        .workflow-preview {
+            height: 450px;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/icons.js b/client/src/components/Workflow/icons.js
index fda447092b49..8014bf72d573 100644
--- a/client/src/components/Workflow/icons.js
+++ b/client/src/components/Workflow/icons.js
@@ -11,4 +11,5 @@ export default {
     subworkflow: "fa-sitemap fa-rotate-270",
     parameter_input: "fa-pencil-alt", // fa-pencil for older FontAwesome, fa-pencil-alt for newer
     pause: "fa-pause",
+    history_item: "fa-folder",
 };
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
index d53391b83d21..41d72916aa37 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
@@ -3,6 +3,7 @@ import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 
 import ParameterStep from "./ParameterStep.vue";
 import WorkflowInvocationStep from "./WorkflowInvocationStep.vue";
+import InvocationGraph from "@/components/Workflow/Invocation/InvocationGraph.vue";
 import GenericHistoryItem from "components/History/Content/GenericItem.vue";
 
 const props = defineProps({
@@ -66,6 +67,11 @@ function dataInputStepLabel(key: number, input: HasSrc) {
                     :workflow="workflow"
                     :workflow-step="step" />
             </b-tab>
+            <b-tab v-if="workflow" title="Graph">
+                <InvocationGraph
+                    :id="workflow.id"
+                    :invocation="invocation" />
+            </b-tab>
         </b-tabs>
     </div>
 </template>
diff --git a/client/src/stores/workflowStepStore.ts b/client/src/stores/workflowStepStore.ts
index c696f3141ad9..f73ea25ffa67 100644
--- a/client/src/stores/workflowStepStore.ts
+++ b/client/src/stores/workflowStepStore.ts
@@ -102,7 +102,7 @@ export interface NewStep {
     tool_state: Record<string, unknown>;
     tool_version?: string;
     tooltip?: string;
-    type: "tool" | "data_input" | "data_collection_input" | "subworkflow" | "parameter_input" | "pause";
+    type: "tool" | "data_input" | "data_collection_input" | "subworkflow" | "parameter_input" | "pause" | "history_item";
     uuid?: string;
     when?: string | null;
     workflow_outputs?: WorkflowOutput[];
@@ -398,6 +398,7 @@ function stepToConnections(step: Step): Connection[] {
             });
         });
     }
+    console.log("awan Connections for step", step.id, connections);
     return connections;
 }
 
diff --git a/lib/galaxy/managers/workflows.py b/lib/galaxy/managers/workflows.py
index 2bd7c95e6add..bc08ddf4e92b 100644
--- a/lib/galaxy/managers/workflows.py
+++ b/lib/galaxy/managers/workflows.py
@@ -862,7 +862,7 @@ def _workflow_from_raw_description(
 
         return workflow, missing_tool_tups
 
-    def workflow_to_dict(self, trans, stored, style="export", version=None, history=None):
+    def workflow_to_dict(self, trans, stored, style="export", version=None, history=None, invocation_id=None):
         """Export the workflow contents to a dictionary ready for JSON-ification and to be
         sent out via API for instance. There are three styles of export allowed 'export', 'instance', and
         'editor'. The Galaxy team will do its best to preserve the backward compatibility of the
@@ -883,7 +883,7 @@ def to_format_2(wf_dict, **kwds):
         if style == "export":
             style = self.app.config.default_workflow_export_format
         if style == "editor":
-            wf_dict = self._workflow_to_dict_editor(trans, stored, workflow)
+            wf_dict = self._workflow_to_dict_editor(trans, stored, workflow, invocation_id=invocation_id)
         elif style == "legacy":
             wf_dict = self._workflow_to_dict_instance(trans, stored, workflow=workflow, legacy=True)
         elif style == "instance":
@@ -1170,7 +1170,7 @@ def _workflow_resource_parameters(self, trans, stored, workflow):
         """Get workflow scheduling resource parameters for this user and workflow or None if not configured."""
         return self._resource_mapper_function(trans=trans, stored_workflow=stored, workflow=workflow)
 
-    def _workflow_to_dict_editor(self, trans, stored, workflow, tooltip=True, is_subworkflow=False):
+    def _workflow_to_dict_editor(self, trans, stored, workflow, tooltip=True, is_subworkflow=False, invocation_id=None):
         # Pack workflow data into a dictionary and return
         data = {}
         data["name"] = workflow.name
@@ -1183,6 +1183,10 @@ def _workflow_to_dict_editor(self, trans, stored, workflow, tooltip=True, is_sub
         data["annotation"] = self.get_item_annotation_str(trans.sa_session, trans.user, stored) or ""
         data["comments"] = [comment.to_dict() for comment in workflow.comments]
 
+        invocation = None
+        if invocation_id:
+            invocation = self.app.workflow_manager.get_invocation(trans, trans.security.decode_id(invocation_id))
+
         output_label_index = set()
         input_step_types = set(workflow.input_step_types)
         # For each step, rebuild the form and encode the state
diff --git a/lib/galaxy/webapps/galaxy/controllers/workflow.py b/lib/galaxy/webapps/galaxy/controllers/workflow.py
index 8cf8d5f629bc..e5e4f00f1a7c 100644
--- a/lib/galaxy/webapps/galaxy/controllers/workflow.py
+++ b/lib/galaxy/webapps/galaxy/controllers/workflow.py
@@ -552,7 +552,7 @@ def editor(self, trans, id=None, workflow_id=None, version=None, **kwargs):
         return editor_config
 
     @web.json
-    def load_workflow(self, trans, id, version=None, **kwargs):
+    def load_workflow(self, trans, id, version=None, invocation_id=None, **kwargs):
         """
         Get the latest Workflow for the StoredWorkflow identified by `id` and
         encode it as a json string that can be read by the workflow editor
@@ -561,8 +561,7 @@ def load_workflow(self, trans, id, version=None, **kwargs):
         trans.workflow_building_mode = workflow_building_modes.ENABLED
         stored = self.get_stored_workflow(trans, id, check_ownership=False, check_accessible=True)
         workflow_contents_manager = self.app.workflow_contents_manager
-        return workflow_contents_manager.workflow_to_dict(trans, stored, style="editor", version=version)
-
+        return workflow_contents_manager.workflow_to_dict(trans, stored, style="editor", version=version, invocation_id=invocation_id)
     @web.json_pretty
     def for_direct_import(self, trans, id, **kwargs):
         """