diff --git a/client/src/components/History/Content/ExpandedItems.js b/client/src/components/History/Content/ExpandedItems.js
index 77da8d05ed10..57e0ae3fa228 100644
--- a/client/src/components/History/Content/ExpandedItems.js
+++ b/client/src/components/History/Content/ExpandedItems.js
@@ -4,6 +4,7 @@ export default {
     props: {
         scopeKey: { type: String, required: true },
         getItemKey: { type: Function, required: true },
+        explicitKey: { type: String, required: false },
     },
     data() {
         return {
@@ -37,14 +38,21 @@ export default {
             }
         },
         items(newSet) {
+            if (this.explicitKey) {
+                return;
+            }
             saveSet(this.key, newSet);
         },
     },
     created() {
-        this.key = "expanded-history-items";
-        const cachedSet = loadSet(this.key);
-        if (cachedSet) {
-            this.items = cachedSet;
+        if (this.explicitKey) {
+            this.key = this.explicitKey;
+        } else {
+            this.key = "expanded-history-items";
+            const cachedSet = loadSet(this.key);
+            if (cachedSet) {
+                this.items = cachedSet;
+            }
         }
     },
     render() {
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index e152292f2db3..c04c41619893 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/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 },
 });
 
@@ -220,6 +242,23 @@ 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(() => {
+    let cls;
+    if (props.isInvocation) {
+        cls = "cursor-pointer";
+        if (invocationStep.value.headerClass) {
+            cls += ` ${invocationStep.value.headerClass}`;
+        } else {
+            cls += " node-header";
+        }
+    } else {
+        cls = "node-header";
+        if (!props.readonly && !props.isInvocation) {
+            cls += " cursor-move";
+        }
+    }
+    return cls;
+});
 const inputs = computed(() => {
     const connections = connectionStore.getConnectionsForStep(props.id);
     const extraStepInputs = stepStore.getStepExtraInputs(props.id);
@@ -248,6 +287,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];
 });
@@ -318,12 +358,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;
diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 81e5dbcd8c1e..ff9c49400ffd 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -70,6 +70,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    blank: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 onBeforeUnmount(() => {
@@ -144,7 +148,7 @@ const label = computed(() => props.input.label || props.input.name);
 const hasConnections = computed(() => connections.value.length > 0);
 const rowClass = computed(() => {
     const classes = ["form-row", "dataRow", "input-data-row"];
-    if (props.input?.valid === false) {
+    if (!props.blank && props.input?.valid === false) {
         classes.push("form-row-error");
     }
     return classes;
@@ -234,21 +238,23 @@ watch(
             </b-tooltip>
             <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
         </div>
-        <button
-            v-if="hasConnections && !readonly"
-            v-b-tooltip.hover
-            :title="reason"
-            class="delete-terminal-button"
-            @click="onRemove">
-            <FontAwesomeIcon class="delete-button-icon" icon="fa-minus-square" />
-        </button>
-        {{ label }}
-        <span
-            v-if="!input.optional && !hasTerminals"
-            v-b-tooltip.hover
-            class="input-required"
-            title="Input is required">
-            *
+        <span v-if="!blank">
+            <button
+                v-if="hasConnections && !readonly"
+                v-b-tooltip.hover
+                :title="reason"
+                class="delete-terminal-button"
+                @click="onRemove">
+                <FontAwesomeIcon class="delete-button-icon" icon="fa-minus-square" />
+            </button>
+            {{ label }}
+            <span
+                v-if="!input.optional && !hasTerminals"
+                v-b-tooltip.hover
+                class="input-required"
+                title="Input is required">
+                *
+            </span>
         </span>
     </div>
 </template>
diff --git a/client/src/components/Workflow/Editor/NodeInvocationText.vue b/client/src/components/Workflow/Editor/NodeInvocationText.vue
new file mode 100644
index 000000000000..acc3dd31f555
--- /dev/null
+++ b/client/src/components/Workflow/Editor/NodeInvocationText.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import { isWorkflowInput } from "@/components/Workflow/constants";
+import { type GraphStep, iconClasses } from "@/composables/useInvocationGraph";
+
+const props = defineProps<{
+    invocationStep: GraphStep;
+}>();
+
+const statePlaceholders: Record<string, string> = {
+    ok: "successful",
+    error: "failed",
+};
+</script>
+<template>
+    <div class="p-1 unselectable">
+        <div v-if="props.invocationStep.jobs">
+            <div v-for="(value, key) in props.invocationStep.jobs" :key="key">
+                <span v-if="value !== undefined" class="d-flex align-items-center">
+                    <FontAwesomeIcon
+                        v-if="iconClasses[key]"
+                        :icon="iconClasses[key]?.icon"
+                        :class="iconClasses[key]?.class"
+                        :spin="iconClasses[key]?.spin"
+                        size="sm"
+                        class="mr-1" />
+                    {{ value }} job{{ value > 1 ? "s" : "" }} {{ statePlaceholders[key] || key }}.
+                </span>
+            </div>
+        </div>
+        <div v-else-if="isWorkflowInput(props.invocationStep.type)">
+            <!-- TODO: Maybe put a ContentItem here? -->
+            This is an input
+        </div>
+        <div v-else-if="props.invocationStep.type === 'subworkflow'">This is a subworkflow.</div>
+        <div v-else>This step has no jobs as of yet.</div>
+    </div>
+</template>
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 3d21e05105ed..0d82c75e8820 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -50,6 +50,7 @@ const props = defineProps<{
     datatypesMapper: DatatypesMapperModel;
     parentNode: HTMLElement | null;
     readonly: boolean;
+    blank: boolean;
 }>();
 
 const emit = defineEmits(["pan-by", "stopDragging", "onDragConnector"]);
@@ -321,7 +322,7 @@ const removeTagsAction = computed(() => {
 
 <template>
     <div class="node-output" :class="rowClass" :data-output-name="output.name">
-        <div class="d-flex flex-column w-100">
+        <div v-if="!props.blank" class="d-flex flex-column w-100">
             <div class="node-output-buttons">
                 <button
                     v-if="showCalloutActiveOutput"
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 467ad460dd29..11c270e841af 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -7,7 +7,13 @@
             @onZoom="onZoom"
             @update:pan="panBy" />
         <ToolBar v-if="!readonly" />
-        <div id="canvas-container" ref="canvas" class="canvas-content" @drop.prevent @dragover.prevent>
+        <div
+            id="canvas-container"
+            ref="canvas"
+            class="canvas-content"
+            :class="props.isInvocation ? 'fixed-window-height' : 'h-100'"
+            @drop.prevent
+            @dragover.prevent>
             <AdaptiveGrid
                 :viewport-bounds="elementBounding"
                 :viewport-bounding-box="viewportBoundingBox"
@@ -31,6 +37,7 @@
                     :scroll="scroll"
                     :scale="scale"
                     :readonly="readonly"
+                    :is-invocation="props.isInvocation"
                     @pan-by="panBy"
                     @stopDragging="onStopDragging"
                     @onDragConnector="onDragConnector"
@@ -91,6 +98,7 @@ const props = defineProps({
     scrollToId: { type: Number as PropType<number | null>, default: null },
     readonly: { type: Boolean, default: false },
     initialPosition: { type: Object as PropType<{ x: number; y: number }>, default: () => ({ x: 50, y: 20 }) },
+    isInvocation: { type: Boolean, default: false },
     showMinimap: { type: Boolean, default: true },
     showZoomControls: { type: Boolean, default: true },
 });
@@ -198,11 +206,15 @@ const { comments } = storeToRefs(commentStore);
 
     .canvas-content {
         width: 100%;
-        height: 100%;
         position: relative;
         left: 0px;
         top: 0px;
         overflow: hidden;
+
+        /* TODO: w/out this, canvas height = 0 when width goes beyond a point (invocation graph) */
+        &.fixed-window-height {
+            height: 50vh;
+        }
     }
 
     .node-area {
diff --git a/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
new file mode 100644
index 000000000000..363a925e78c8
--- /dev/null
+++ b/client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue
@@ -0,0 +1,300 @@
+<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, BCard } from "bootstrap-vue";
+import { computed, onUnmounted, ref, watch } from "vue";
+
+import { components } from "@/api/schema";
+import ExpandedItems from "@/components/History/Content/ExpandedItems";
+import { JobProvider } from "@/components/providers";
+import { isWorkflowInput } from "@/components/Workflow/constants";
+import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { useInvocationGraph } from "@/composables/useInvocationGraph";
+import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
+import { type Step } from "@/stores/workflowStepStore";
+import type { Workflow } from "@/stores/workflowStore";
+
+import JobInformation from "@/components/JobInformation/JobInformation.vue";
+import JobParameters from "@/components/JobParameters/JobParameters.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
+import WorkflowInvocationStep from "@/components/WorkflowInvocationState/WorkflowInvocationStep.vue";
+
+library.add(faChevronDown, faChevronUp, faSignInAlt);
+
+interface Props {
+    /** The invocation to display */
+    invocation: components["schemas"]["WorkflowInvocationElementView"];
+    /** The workflow which was run */
+    workflow: Workflow;
+    /** Whether the invocation is terminal */
+    isTerminal: boolean;
+    /** Whether the invocation is scheduled */
+    isScheduled: boolean;
+    /** The zoom level for the graph */
+    zoom?: number;
+    /** Whether to show the minimap */
+    showMinimap?: boolean;
+    /** Whether to show the zoom controls */
+    showZoomControls?: boolean;
+    /** The initial x position for the graph */
+    initialX?: number;
+    /** The initial y position for the graph */
+    initialY?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    zoom: 0.5,
+    showMinimap: true,
+    showZoomControls: true,
+    initialX: -40,
+    initialY: -40,
+});
+
+const loadingGraph = ref(true);
+const initialLoading = ref(true);
+const errored = ref(false);
+const expandInvocationInputs = ref(false);
+const errorMessage = ref("");
+const showingJobId = ref<string | undefined>(undefined);
+const scrollToId = ref<number | null>(null);
+const pollTimeout = ref<any>(null);
+
+const invocationRef = computed(() => props.invocation);
+
+const { datatypesMapper } = useDatatypesMapper();
+
+const workflowId = computed(() => props.workflow?.id);
+
+const { steps, storeId, loadInvocationGraph } = useInvocationGraph(invocationRef, workflowId.value);
+
+const workflowInputSteps = Object.values(props.workflow.steps).filter((step) => isWorkflowInput(step.type));
+
+const workflowRemainingSteps = Object.values(props.workflow.steps).filter((step) => !isWorkflowInput(step.type));
+
+// Equivalent to onMounted; this is where the graph is initialized, and the polling is started
+watch(
+    () => workflowId.value,
+    async (wfId) => {
+        if (wfId) {
+            await pollInvocationGraph();
+        }
+    },
+    { immediate: true }
+);
+
+const stateStore = useWorkflowStateStore(storeId.value);
+
+watch(
+    () => props.zoom,
+    () => (stateStore.scale = props.zoom),
+    { immediate: true }
+);
+
+watch(
+    () => stateStore.activeNodeId,
+    (newVal) => {
+        if (newVal !== null) {
+            // if the active node id is an input step, expand the inputs section
+            expandInvocationInputs.value = workflowInputSteps.findIndex((step) => step.id === newVal) !== -1;
+        }
+        showingJobId.value = undefined;
+    }
+);
+
+onUnmounted(() => {
+    clearTimeout(pollTimeout.value);
+});
+
+const initialPosition = computed(() => ({
+    x: -props.initialX * props.zoom,
+    y: -props.initialY * props.zoom,
+}));
+
+/** Updates and loads the invocation graph */
+async function loadGraph() {
+    loadingGraph.value = true;
+    errored.value = false;
+    errorMessage.value = "";
+
+    try {
+        await loadInvocationGraph();
+        errored.value = false;
+    } catch (error: any) {
+        if (error.response?.data.err_msg) {
+            errorMessage.value = error.response.data.err_msg;
+        } else {
+            errorMessage.value = error as string;
+        }
+        errored.value = true;
+    } finally {
+        loadingGraph.value = false;
+        if (initialLoading.value) {
+            initialLoading.value = false;
+        }
+    }
+}
+
+/** Poll and load the invocation graph until the invocation is terminal */
+async function pollInvocationGraph() {
+    await loadGraph();
+    if (!props.isTerminal) {
+        pollTimeout.value = setTimeout(pollInvocationGraph, 3000);
+    } else {
+        clearTimeout(pollTimeout.value);
+    }
+}
+
+function focusOnStep(stepId: number) {
+    if (stateStore.activeNodeId === stepId) {
+        stateStore.activeNodeId = null;
+    } else {
+        stateStore.activeNodeId = stepId;
+        scrollToId.value = stepId;
+    }
+}
+
+function getStepKey(step: Step) {
+    return step.id;
+}
+
+function showStep(jobId: string) {
+    showingJobId.value = jobId;
+}
+</script>
+
+<template>
+    <div id="center" class="container-root m-3 w-100 overflow-auto d-flex flex-column">
+        <BAlert v-if="initialLoading" show variant="info">
+            <LoadingSpan message="Loading Invocation Graph" />
+        </BAlert>
+        <div v-else-if="errored">
+            <BAlert v-if="errorMessage" show variant="danger">
+                {{ errorMessage }}
+            </BAlert>
+            <BAlert v-else show variant="danger"> Unknown Error </BAlert>
+        </div>
+        <div v-else-if="steps && datatypesMapper">
+            <ExpandedItems
+                explicit-key="expanded-invocation-steps"
+                :scope-key="props.invocation.id"
+                :get-item-key="getStepKey">
+                <div class="workflow-invocation">
+                    <div class="workflow-preview d-flex flex-column">
+                        <BCard class="workflow-card">
+                            <WorkflowGraph
+                                :steps="steps"
+                                :datatypes-mapper="datatypesMapper"
+                                :initial-position="initialPosition"
+                                :scroll-to-id="scrollToId"
+                                :show-minimap="props.showMinimap"
+                                :show-zoom-controls="props.showZoomControls"
+                                is-invocation
+                                readonly />
+                        </BCard>
+                    </div>
+                    <BCard class="workflow-card">
+                        <!-- Input Steps grouped in a separate portlet -->
+                        <div v-if="workflowInputSteps.length > 0" class="ui-portlet-section w-100">
+                            <div
+                                class="portlet-header portlet-operations"
+                                role="button"
+                                tabindex="0"
+                                @keyup.enter="expandInvocationInputs = !expandInvocationInputs"
+                                @click="expandInvocationInputs = !expandInvocationInputs">
+                                <span :id="`step-icon-invocation-inputs-section`">
+                                    <FontAwesomeIcon class="portlet-title-icon" :icon="faSignInAlt" />
+                                </span>
+                                <span class="portlet-title-text">
+                                    <u v-localize class="step-title ml-2">Workflow Inputs</u>
+                                </span>
+                                <FontAwesomeIcon
+                                    class="float-right"
+                                    :icon="expandInvocationInputs ? faChevronUp : faChevronDown" />
+                            </div>
+
+                            <div v-if="expandInvocationInputs" class="portlet-content m-1">
+                                <WorkflowInvocationStep
+                                    v-for="step in workflowInputSteps"
+                                    :key="step.id"
+                                    :invocation="invocationRef"
+                                    :workflow="props.workflow"
+                                    :workflow-step="step"
+                                    :graph-step="steps[step.id]"
+                                    :expanded="stateStore.activeNodeId === step.id"
+                                    :showing-job-id="showingJobId"
+                                    @show-job="showStep"
+                                    @update:expanded="focusOnStep(step.id)" />
+                            </div>
+                        </div>
+                        <!-- Non-Input (Tool/Subworkflow) Steps -->
+                        <WorkflowInvocationStep
+                            v-for="step in workflowRemainingSteps"
+                            :key="step.id"
+                            :invocation="invocationRef"
+                            :workflow="props.workflow"
+                            :workflow-step="step"
+                            :graph-step="steps[step.id]"
+                            :expanded="stateStore.activeNodeId === step.id"
+                            :showing-job-id="showingJobId"
+                            @show-job="showStep"
+                            @update:expanded="focusOnStep(step.id)" />
+                    </BCard>
+                </div>
+            </ExpandedItems>
+            <BCard v-if="showingJobId">
+                <JobProvider :id="showingJobId" v-slot="{ item, loading }">
+                    <div v-if="loading">
+                        <LoadingSpan message="Loading Job Information" />
+                    </div>
+                    <div v-else>
+                        <JobInformation v-if="item" :job_id="item.id" />
+                        <p></p>
+                        <JobParameters v-if="item" :job-id="item.id" :include-title="false" />
+                    </div>
+                </JobProvider>
+            </BCard>
+        </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;
+
+    .workflow-preview {
+        flex-grow: 1;
+
+        .workflow-card {
+            flex-grow: 1;
+        }
+    }
+}
+
+// TODO: This is a temporary fix for the invocation graph not fitting on smaller viewports
+@container (max-width: 900px) {
+    .workflow-invocation {
+        flex-direction: column;
+        height: unset;
+
+        .workflow-preview {
+            height: 450px;
+        }
+    }
+}
+
+.portlet-header {
+    &:hover {
+        opacity: 0.8;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/InvocationsList.vue b/client/src/components/Workflow/InvocationsList.vue
index d2350bf49d6f..a9ab058520b0 100644
--- a/client/src/components/Workflow/InvocationsList.vue
+++ b/client/src/components/Workflow/InvocationsList.vue
@@ -1,8 +1,12 @@
 <template>
     <div class="invocations-list" aria-labelledby="invocations-title">
-        <h1 id="invocations-title" class="mb-3 h-lg">
-            {{ title }}
-        </h1>
+        <div class="grid-header d-flex justify-content-between pb-2 flex-column">
+            <div class="d-flex">
+                <Heading h1 separator inline size="xl" class="flex-grow-1 m-0" data-description="grid title">
+                    <span v-localize>{{ title }}</span>
+                </Heading>
+            </div>
+        </div>
         <b-alert v-if="headerMessage" variant="info" show>
             {{ headerMessage }}
         </b-alert>
@@ -94,11 +98,13 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 
 import paginationMixin from "./paginationMixin";
 
+import Heading from "../Common/Heading.vue";
 import WorkflowRunButton from "./WorkflowRunButton.vue";
 import SwitchToHistoryLink from "@/components/History/SwitchToHistoryLink.vue";
 
 export default {
     components: {
+        Heading,
         HelpText,
         UtcDate,
         WorkflowInvocationState,
diff --git a/client/src/components/Workflow/constants.js b/client/src/components/Workflow/constants.ts
similarity index 68%
rename from client/src/components/Workflow/constants.js
rename to client/src/components/Workflow/constants.ts
index 71dda07248c3..75cbb7a469f3 100644
--- a/client/src/components/Workflow/constants.js
+++ b/client/src/components/Workflow/constants.ts
@@ -1,5 +1,5 @@
 const WorkflowInputs = ["data_input", "data_collection_input", "parameter_input"];
 
-export function isWorkflowInput(stepType) {
+export function isWorkflowInput(stepType: string): boolean {
     return WorkflowInputs.includes(stepType);
 }
diff --git a/client/src/components/WorkflowInvocationState/JobStep.vue b/client/src/components/WorkflowInvocationState/JobStep.vue
index 2dfa002231ea..796af8a56ffd 100644
--- a/client/src/components/WorkflowInvocationState/JobStep.vue
+++ b/client/src/components/WorkflowInvocationState/JobStep.vue
@@ -1,6 +1,22 @@
 <template>
     <b-card v-if="jobs">
-        <b-table small caption-top :items="jobsProvider" :fields="fields" primary-key="id" @row-clicked="toggleDetails">
+        <div>Click on any job to expand its details below:</div>
+        <b-table
+            small
+            caption-top
+            :items="jobsProvider"
+            :fields="fields"
+            primary-key="id"
+            :tbody-tr-class="showingJobCls"
+            :striped="!invocationGraph"
+            @row-clicked="rowClicked">
+            <template v-slot:cell(showing_job)="data">
+                <FontAwesomeIcon
+                    v-if="showingJobId === data.item.id || data.item._showDetails"
+                    icon="caret-down"
+                    size="lg" />
+                <FontAwesomeIcon v-else icon="caret-right" size="lg" />
+            </template>
             <template v-slot:row-details="row">
                 <JobProvider :id="row.item.id" v-slot="{ item, loading }">
                     <div v-if="loading"><b-spinner label="Loading Job..."></b-spinner></div>
@@ -21,6 +37,9 @@
     </b-card>
 </template>
 <script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
 import JobInformation from "components/JobInformation/JobInformation";
 import JobParameters from "components/JobParameters/JobParameters";
@@ -29,9 +48,11 @@ import UtcDate from "components/UtcDate";
 import Vue from "vue";
 
 Vue.use(BootstrapVue);
+library.add(faCaretDown, faCaretRight);
 
 export default {
     components: {
+        FontAwesomeIcon,
         UtcDate,
         JobProvider,
         JobParameters,
@@ -39,10 +60,13 @@ export default {
     },
     props: {
         jobs: { type: Array, required: true },
+        invocationGraph: { type: Boolean, default: false },
+        showingJobId: { type: String, default: null },
     },
     data() {
         return {
             fields: [
+                { key: "showing_job", label: "", sortable: false },
                 { key: "state", sortable: true },
                 { key: "update_time", label: "Updated", sortable: true },
                 { key: "create_time", label: "Created", sortable: true },
@@ -74,6 +98,42 @@ export default {
             // update state
             this.toggledItems[item.id] = item._showDetails;
         },
+        rowClicked(item) {
+            if (this.invocationGraph) {
+                this.$emit("row-clicked", item.id);
+            } else {
+                this.toggleDetails(item);
+            }
+        },
+        showingJobCls(item, type) {
+            if (!this.invocationGraph) {
+                return "";
+            }
+            let cls = "job-tr-class cursor-pointer unselectable";
+            if (this.showingJobId === item.id) {
+                cls += " showing-job";
+            }
+            return cls;
+        },
     },
 };
 </script>
+
+<style lang="scss">
+// NOTE: Couldn't use scoped style due to it not working for the BTable class rows
+@import "theme/blue.scss";
+@import "base.scss";
+
+// Table row class
+.job-tr-class {
+    &:hover {
+        background-color: $brand-secondary;
+    }
+    &.showing-job {
+        background-color: darken($brand-secondary, 10%);
+    }
+    &:not(.showing-job) {
+        border-top: 0.2rem solid $brand-secondary;
+    }
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 2b734f4bcfb2..d8f9f862c329 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -8,6 +8,7 @@
                 :invocation-and-job-terminal="invocationAndJobTerminal"
                 :invocation-scheduling-terminal="invocationSchedulingTerminal"
                 :job-states-summary="jobStatesSummary"
+                :is-subworkflow="isSubworkflow"
                 @invocation-cancelled="cancelWorkflowScheduling" />
         </b-tab>
         <b-tab title="Details">
@@ -58,6 +59,10 @@ export default {
             required: false,
             default: null,
         },
+        isSubworkflow: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup() {
         const invocationStore = useInvocationStore();
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index bab804b2d879..a69aa524cf0f 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -1,7 +1,13 @@
 <template>
     <div class="d-flex" :data-step="workflowStep.id">
         <div class="ui-portlet-section" style="width: 100%">
-            <div class="portlet-header portlet-title portlet-operations cursor-pointer" @click="toggleStep">
+            <div
+                class="portlet-header portlet-operations cursor-pointer"
+                :class="graphStep?.headerClass"
+                role="button"
+                tabindex="0"
+                @keyup.enter="toggleStep"
+                @click="toggleStep">
                 <span :id="`step-icon-${workflowStep.id}`">
                     <WorkflowStepIcon class="portlet-title-icon" :step-type="workflowStepType" />
                 </span>
@@ -11,9 +17,16 @@
                         <WorkflowStepTitle v-bind="titleProps(workflowStep.id)" />
                     </u>
                 </span>
-                <FontAwesomeIcon class="float-right" :icon="expanded ? 'fa-chevron-up' : 'fa-chevron-down'" />
+                <span class="float-right">
+                    <FontAwesomeIcon
+                        v-if="graphStep?.headerIcon"
+                        class="mr-1"
+                        :icon="graphStep.headerIcon"
+                        :spin="graphStep.headerIconSpin" />
+                    <FontAwesomeIcon :icon="computedExpanded ? 'fa-chevron-up' : 'fa-chevron-down'" />
+                </span>
             </div>
-            <div v-if="expanded" class="portlet-content">
+            <div v-if="computedExpanded" class="portlet-content">
                 <InvocationStepProvider
                     v-if="isReady && invocationStepId !== undefined"
                     :id="invocationStepId"
@@ -24,7 +37,8 @@
                         <div v-else>
                             <details
                                 v-if="Object.values(stepDetails.outputs).length > 0"
-                                class="invocation-step-output-details">
+                                class="invocation-step-output-details"
+                                :open="graphStep !== undefined">
                                 <summary><b>Output Datasets</b></summary>
                                 <div v-for="(value, name) in stepDetails.outputs" :key="value.id">
                                     <b>{{ name }}</b>
@@ -33,7 +47,8 @@
                             </details>
                             <details
                                 v-if="Object.values(stepDetails.output_collections).length > 0"
-                                class="invocation-step-output-collection-details">
+                                class="invocation-step-output-collection-details"
+                                :open="graphStep !== undefined">
                                 <summary><b>Output Dataset Collections</b></summary>
                                 <div v-for="(value, name) in stepDetails.output_collections" :key="value.id">
                                     <b>{{ name }}</b>
@@ -41,9 +56,16 @@
                                 </div>
                             </details>
                             <div class="portlet-body" style="width: 100%; overflow-x: auto">
-                                <details v-if="workflowStepType == 'tool'" class="invocation-step-job-details">
+                                <details
+                                    v-if="workflowStepType == 'tool'"
+                                    class="invocation-step-job-details"
+                                    :open="graphStep !== undefined">
                                     <summary><b>Jobs</b></summary>
-                                    <JobStep :jobs="stepDetails.jobs" />
+                                    <JobStep
+                                        :jobs="stepDetails.jobs"
+                                        :invocation-graph="graphStep !== undefined"
+                                        :showing-job-id="showingJobId"
+                                        @row-clicked="showJob" />
                                 </details>
                                 <ParameterStep
                                     v-else-if="workflowStepType == 'parameter_input'"
@@ -72,6 +94,7 @@
                                     </div>
                                     <WorkflowInvocationState
                                         v-else
+                                        is-subworkflow
                                         :invocation-id="stepDetails.subworkflow_invocation_id" />
                                 </div>
                             </div>
@@ -125,11 +148,14 @@ export default {
         invocation: Object,
         workflowStep: Object,
         workflow: Object,
+        graphStep: { type: Object, default: undefined },
+        expanded: { type: Boolean, default: undefined },
+        showingJobId: { type: String, default: null },
     },
     data() {
         return {
-            expanded: false,
             polling: null,
+            localExpanded: this.expanded === undefined ? false : this.expanded,
         };
     },
     computed: {
@@ -138,6 +164,19 @@ export default {
         isReady() {
             return this.invocation.steps.length > 0;
         },
+        // a computed property that assesses whether we have an expanded prop
+        computedExpanded: {
+            get() {
+                return this.expanded === undefined ? this.localExpanded : this.expanded;
+            },
+            set(value) {
+                if (this.expanded === undefined) {
+                    this.localExpanded = value;
+                } else {
+                    this.$emit("update:expanded", value);
+                }
+            },
+        },
         invocationStepId() {
             return this.step?.id;
         },
@@ -164,8 +203,11 @@ export default {
                 this.fetchWorkflowForInstanceId(this.workflowStep.workflow_id);
             }
         },
+        showJob(id) {
+            this.$emit("show-job", id);
+        },
         toggleStep() {
-            this.expanded = !this.expanded;
+            this.computedExpanded = !this.computedExpanded;
         },
         toolProps(stepIndex) {
             const workflowStep = this.workflow.steps[stepIndex];
@@ -189,3 +231,11 @@ export default {
     },
 };
 </script>
+
+<style scoped lang="scss">
+.portlet-header {
+    &:hover {
+        opacity: 0.8;
+    }
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
index 28ddeaa0eae1..42cd5188f1ee 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { BAlert, BButton } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { InvocationJobsSummary, InvocationStep, WorkflowInvocationElementView } from "@/api/invocations";
+import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { getRootFromIndexLink } from "@/onload";
+import { withPrefix } from "@/utils/redirect";
 
 import {
     errorCount as jobStatesSummaryErrorCount,
@@ -12,6 +15,9 @@ import {
     runningCount as jobStatesSummaryRunningCount,
 } from "./util";
 
+import ExternalLink from "../ExternalLink.vue";
+import HelpText from "../Help/HelpText.vue";
+import InvocationGraph from "../Workflow/Invocation/Graph/InvocationGraph.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import ProgressBar from "@/components/ProgressBar.vue";
 import InvocationMessage from "@/components/WorkflowInvocationState/InvocationMessage.vue";
@@ -26,6 +32,7 @@ interface Props {
     invocationSchedulingTerminal: boolean;
     jobStatesSummary: InvocationJobsSummary;
     index?: number;
+    isSubworkflow?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -33,6 +40,8 @@ const props = defineProps<Props>();
 const reportTooltip = "View report for this workflow invocation";
 const generatePdfTooltip = "Generate PDF report for this workflow invocation";
 
+const { workflow } = useWorkflowInstance(props.invocation?.workflow_id ?? "");
+
 const invocationId = computed<string | undefined>(() => props.invocation?.id);
 
 const indexStr = computed(() => {
@@ -151,74 +160,99 @@ function onCancel() {
 
 <template>
     <div class="mb-3 workflow-invocation-state-component">
-        <div v-if="invocationAndJobTerminal">
-            <span>
-                <b-button
+        <div v-if="!invocationAndJobTerminal">
+            <BAlert variant="info" show>
+                <LoadingSpan :message="`Waiting to complete invocation ${indexStr}`" />
+            </BAlert>
+            <BButton
+                v-b-tooltip.noninteractive.hover
+                class="cancel-workflow-scheduling"
+                title="Cancel scheduling of workflow invocation"
+                size="sm"
+                @click="onCancel">
+                <span class="fa fa-times mr-1" /> Cancel
+            </BButton>
+        </div>
+        <div class="d-flex justify-content-between align-items-center">
+            <div v-if="invocationAndJobTerminal" class="d-flex mr-1">
+                <BButton
                     v-b-tooltip.hover
                     :title="invocationStateSuccess ? reportTooltip : disabledReportTooltip"
                     :disabled="!invocationStateSuccess"
                     size="sm"
-                    class="invocation-report-link"
+                    class="invocation-report-link text-nowrap"
                     :href="invocationLink">
                     View Report
-                </b-button>
-                <b-button
+                </BButton>
+                <BButton
                     v-b-tooltip.hover
                     :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
                     :disabled="!invocationStateSuccess"
                     size="sm"
-                    class="invocation-pdf-link"
+                    class="invocation-pdf-link text-nowrap"
                     :href="invocationPdfLink"
                     target="_blank">
                     Generate PDF
-                </b-button>
-            </span>
+                </BButton>
+            </div>
+            <div class="w-100">
+                <ProgressBar
+                    v-if="!stepCount"
+                    note="Loading step state summary..."
+                    :loading="true"
+                    class="steps-progress" />
+                <template v-if="invocation?.messages?.length">
+                    <InvocationMessage
+                        v-for="message in invocation.messages"
+                        :key="message.reason"
+                        class="steps-progress my-1"
+                        :invocation-message="message"
+                        :invocation="invocation">
+                    </InvocationMessage>
+                </template>
+                <ProgressBar
+                    v-else-if="invocationState == 'cancelled'"
+                    note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
+                    :error-count="1"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else-if="invocationState == 'failed'"
+                    note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
+                    :error-count="1"
+                    class="steps-progress" />
+                <ProgressBar
+                    v-else
+                    :note="stepStatesStr"
+                    :total="stepCount"
+                    :ok-count="stepStates.scheduled"
+                    :loading="!invocationSchedulingTerminal"
+                    class="steps-progress" />
+                <ProgressBar
+                    :note="jobStatesStr"
+                    :total="jobCount"
+                    :ok-count="okCount"
+                    :running-count="runningCount"
+                    :new-count="newCount"
+                    :error-count="errorCount"
+                    :loading="!invocationAndJobTerminal"
+                    class="jobs-progress" />
+            </div>
         </div>
-        <div v-else-if="!invocationAndJobTerminal">
-            <b-alert variant="info" show>
-                <LoadingSpan :message="`Waiting to complete invocation ${indexStr}`" />
-            </b-alert>
-            <span
-                v-b-tooltip.hover
-                class="fa fa-times cancel-workflow-scheduling"
-                title="Cancel scheduling of workflow invocation"
-                @click="onCancel"></span>
+        <!-- An invocation has been loaded, display the graph -->
+        <div v-if="invocation">
+            <div v-if="workflow && !isSubworkflow">
+                <InvocationGraph
+                    :invocation="invocation"
+                    :workflow="workflow"
+                    :is-terminal="invocationAndJobTerminal"
+                    :is-scheduled="invocationSchedulingTerminal" />
+            </div>
+            <BAlert v-else-if="isSubworkflow" variant="secondary" show>
+                This subworkflow is
+                <HelpText :uri="`galaxy.invocations.states.${invocation.state}`" :text="invocation.state" />.
+                <ExternalLink :href="withPrefix(`/workflows/invocations/${invocation.id}`)"> Click here </ExternalLink>
+                to view this subworkflow in graph view.
+            </BAlert>
         </div>
-        <ProgressBar v-if="!stepCount" note="Loading step state summary..." :loading="true" class="steps-progress" />
-        <template v-if="invocation.messages?.length">
-            <InvocationMessage
-                v-for="message in invocation.messages"
-                :key="message.reason"
-                class="steps-progress my-1"
-                :invocation-message="message"
-                :invocation="invocation">
-            </InvocationMessage>
-        </template>
-        <ProgressBar
-            v-else-if="invocationState == 'cancelled'"
-            note="Invocation scheduling cancelled - expected jobs and outputs may not be generated."
-            :error-count="1"
-            class="steps-progress" />
-        <ProgressBar
-            v-else-if="invocationState == 'failed'"
-            note="Invocation scheduling failed - Galaxy administrator may have additional details in logs."
-            :error-count="1"
-            class="steps-progress" />
-        <ProgressBar
-            v-else
-            :note="stepStatesStr"
-            :total="stepCount"
-            :ok-count="stepStates.scheduled"
-            :loading="!invocationSchedulingTerminal"
-            class="steps-progress" />
-        <ProgressBar
-            :note="jobStatesStr"
-            :total="jobCount"
-            :ok-count="okCount"
-            :running-count="runningCount"
-            :new-count="newCount"
-            :error-count="errorCount"
-            :loading="!invocationAndJobTerminal"
-            class="jobs-progress" />
     </div>
 </template>
diff --git a/client/src/composables/useInvocationGraph.ts b/client/src/composables/useInvocationGraph.ts
new file mode 100644
index 000000000000..03485627e1c5
--- /dev/null
+++ b/client/src/composables/useInvocationGraph.ts
@@ -0,0 +1,271 @@
+import { type IconDefinition, library } from "@fortawesome/fontawesome-svg-core";
+import {
+    faCheckCircle,
+    faClock,
+    faExclamationTriangle,
+    faPause,
+    faSpinner,
+    faTrash,
+} from "@fortawesome/free-solid-svg-icons";
+import Vue, { computed, type Ref, ref } from "vue";
+
+import { components, fetcher } from "@/api/schema";
+import { isWorkflowInput } from "@/components/Workflow/constants";
+import { fromSimple } from "@/components/Workflow/Editor/modules/model";
+import { getWorkflowFull } from "@/components/Workflow/workflows.services";
+import type { Step } from "@/stores/workflowStepStore";
+import type { Workflow } from "@/stores/workflowStore";
+import { rethrowSimple } from "@/utils/simple-error";
+
+import { provideScopedWorkflowStores } from "./workflowStores";
+
+/** Type Definitions */
+type StepJobSummary =
+    | components["schemas"]["InvocationStepJobsResponseStepModel"]
+    | components["schemas"]["InvocationStepJobsResponseJobModel"]
+    | components["schemas"]["InvocationStepJobsResponseCollectionJobsModel"];
+export interface GraphStep extends Step {
+    state?:
+        | "new"
+        | "upload"
+        | "waiting"
+        | "queued"
+        | "running"
+        | "ok"
+        | "error"
+        | "deleted"
+        | "hidden"
+        | "setting_metadata"
+        | "paused";
+    jobs: StepJobSummary["states"];
+    headerClass?: string;
+    headerIcon?: IconDefinition;
+    headerIconSpin?: boolean;
+}
+interface InvocationGraph extends Workflow {
+    steps: { [index: number]: GraphStep };
+}
+
+/** Fetchers */
+const stepJobsSummaryFetcher = fetcher
+    .path("/api/invocations/{invocation_id}/step_jobs_summary")
+    .method("get")
+    .create();
+const invocationStepFetcher = fetcher.path("/api/invocations/steps/{step_id}").method("get").create();
+
+/** Classes for states' icons */
+export const iconClasses: Record<string, { icon: IconDefinition; spin?: boolean; class?: string }> = {
+    ok: { icon: faCheckCircle, class: "text-success" },
+    error: { icon: faExclamationTriangle, class: "text-danger" },
+    paused: { icon: faPause, class: "text-primary" },
+    running: { icon: faSpinner, spin: true },
+    new: { icon: faClock },
+    waiting: { icon: faClock },
+    deleted: { icon: faTrash, class: "text-danger" },
+};
+
+/** Composable that creates a readonly invocation graph and loads it onto a workflow editor canvas for display.
+ * @param invocation - The invocation to display in graph view
+ * @param workflowId - The id of the workflow that was invoked
+ */
+export function useInvocationGraph(
+    invocation: Ref<components["schemas"]["WorkflowInvocationElementView"]>,
+    workflowId: string | undefined
+) {
+    library.add(faCheckCircle, faClock, faPause, faSpinner, faExclamationTriangle, faTrash);
+
+    const steps = ref<{ [index: string]: GraphStep }>({});
+    const storeId = computed(() => `invocation-${invocation.value.id}`);
+
+    /** The full invocation mapped onto the original workflow */
+    const invocationGraph = ref<InvocationGraph | null>(null);
+
+    /** The workflow that was invoked */
+    const loadedWorkflow = ref<any>(null);
+
+    provideScopedWorkflowStores(storeId);
+
+    async function loadInvocationGraph() {
+        try {
+            if (!workflowId) {
+                throw new Error("Workflow Id 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);
+            }
+            if (!invocationGraph.value) {
+                invocationGraph.value = {
+                    ...loadedWorkflow.value,
+                    id: storeId.value,
+                    steps: null,
+                };
+            }
+
+            // get the job summary for each step in the invocation
+            const { data: stepJobsSummary } = await stepJobsSummaryFetcher({ invocation_id: invocation.value.id });
+
+            /** The original steps of the workflow */
+            const originalSteps: Record<string, Step> = { ...loadedWorkflow.value.steps };
+
+            // for each step in the workflow, store the state and status of jobs
+            for (let i = 0; i < Object.keys(originalSteps).length; i++) {
+                /** An invocation graph step */
+                const graphStepFromWfStep = { ...originalSteps[i] } as GraphStep;
+
+                /** The type of the step (subworkflow, input, tool, etc.) */
+                let type;
+                if (graphStepFromWfStep.type === "subworkflow") {
+                    type = "subworkflow";
+                } else if (isWorkflowInput(graphStepFromWfStep.type)) {
+                    type = "input";
+                }
+
+                /** The raw invocation step */
+                const invocationStep = invocation.value.steps[i];
+
+                if (type !== "input") {
+                    // there is an invocation step for this workflow step
+                    if (invocationStep) {
+                        /** The `populated_state` for this graph step. (This may or may not be used to
+                         * derive the `state` for this invocation graph step) */
+                        let populatedState;
+
+                        if (type === "subworkflow") {
+                            // if the step is a subworkflow, get the populated state from the invocation step
+                            populatedState = invocationStep.state || undefined;
+
+                            /* TODO:
+                                Note that subworkflows are often in the `scheduled` state regardless of whether
+                                their output is successful or not. One good way to visually show if a subworkflow was
+                                successful is to set `graphStepFromWfStep.state = subworkflow.output?.state`.
+                            */
+                        }
+
+                        // First, try setting the state of the graph step based on the states of the jobs for this step
+                        else {
+                            /** The step job summary for the invocation step (based on its job id) */
+                            const invocationStepSummary = stepJobsSummary.find((stepJobSummary: StepJobSummary) => {
+                                if (stepJobSummary.model === "ImplicitCollectionJobs") {
+                                    return stepJobSummary.id === invocationStep.implicit_collection_jobs_id;
+                                } else {
+                                    return stepJobSummary.id === invocationStep.job_id;
+                                }
+                            });
+
+                            if (invocationStepSummary) {
+                                // the step is not a subworkflow, get the populated state from the invocation step summary
+                                populatedState = invocationStepSummary.populated_state;
+
+                                if (invocationStepSummary.states) {
+                                    const statesForThisStep = Object.keys(invocationStepSummary.states);
+
+                                    // for "error" and "paused" states, set the state based on at least one of the jobs being errored or paused
+                                    if (statesForThisStep.includes("error")) {
+                                        graphStepFromWfStep.state = "error";
+                                    } else if (statesForThisStep.includes("paused")) {
+                                        graphStepFromWfStep.state = "paused";
+                                    }
+                                    // if all jobs are "deleted", set the state to deleted
+                                    else if (statesForThisStep.every((key) => key === "deleted")) {
+                                        graphStepFromWfStep.state = "deleted";
+                                    }
+                                    // else if any of the keys of the states object are NOT "ok", set the state to running
+                                    else if (statesForThisStep.some((key) => key !== "ok")) {
+                                        graphStepFromWfStep.state = "running";
+                                    }
+                                }
+                                // now store the job states for this step in the graph step
+                                graphStepFromWfStep.jobs = invocationStepSummary.states;
+                            } else {
+                                // TODO: There is no summary for this step's `job_id`; what does this mean?
+                                graphStepFromWfStep.state = "waiting";
+                            }
+                        }
+
+                        // If the state still hasn't been set, set it based on the populated state
+                        if (!graphStepFromWfStep.state) {
+                            if (populatedState === "scheduled" || populatedState === "ready") {
+                                graphStepFromWfStep.state = "queued";
+                            } else if (populatedState === "resubmitted") {
+                                graphStepFromWfStep.state = "new";
+                            } else if (populatedState === "failed") {
+                                graphStepFromWfStep.state = "error";
+                            } else if (populatedState === "deleting") {
+                                graphStepFromWfStep.state = "deleted";
+                            } else if (populatedState && !["stop", "stopped", "skipped"].includes(populatedState)) {
+                                graphStepFromWfStep.state = populatedState as GraphStep["state"];
+                            }
+                        }
+                    }
+
+                    // there is no invocation step for this workflow step, it is probably queued
+                    else {
+                        graphStepFromWfStep.state = "queued";
+                    }
+
+                    /** Setting the header class for the graph step */
+                    if (graphStepFromWfStep.state) {
+                        graphStepFromWfStep.headerClass = `node-header-invocation header-${graphStepFromWfStep.state}`;
+                        // TODO: maybe a different one for inputs? Currently they have no state either.
+                    }
+
+                    /** Setting the header icon for the graph step */
+                    if (graphStepFromWfStep.state) {
+                        graphStepFromWfStep.headerIcon = iconClasses[graphStepFromWfStep.state]?.icon;
+                        graphStepFromWfStep.headerIconSpin = iconClasses[graphStepFromWfStep.state]?.spin;
+                    }
+                }
+
+                // update the invocation graph steps object
+                Vue.set(steps.value, i, graphStepFromWfStep);
+            }
+
+            invocationGraph.value!.steps = { ...steps.value };
+
+            // Load the invocation graph into the editor every time
+            await fromSimple(storeId.value, invocationGraph.value as any);
+        } catch (e) {
+            rethrowSimple(e);
+        }
+    }
+
+    // TODO: Maybe we can use this to layout the graph after the steps are loaded (for neatness)?
+    // async function layoutGraph() {
+    //     const newSteps = await autoLayout(storeId.value, steps.value);
+    //     if (newSteps) {
+    //         newSteps?.map((step: any) => stepStore.updateStep(step));
+    //         // Object.assign(steps.value, {...steps.value, ...stepStore.steps});
+    //         Object.keys(steps.value).forEach((key) => {
+    //             steps.value[key] = { ...steps.value[key], ...(stepStore.steps[key] as GraphStep) };
+    //         });
+    //     }
+    //     invocationGraph.value!.steps = steps.value;
+    //     await fromSimple(storeId.value, invocationGraph.value as any);
+    // }
+
+    async function getInvocationStep(name: string, id: number) {
+        const step_id = invocation.value.steps[id]?.id;
+        if (step_id) {
+            try {
+                const { data: invocationStep } = await invocationStepFetcher({ step_id });
+                return invocationStep;
+            } catch (e) {
+                rethrowSimple(e);
+            }
+        }
+    }
+
+    return {
+        /** An id used to scope the store to the invocation's id */
+        storeId,
+        /** The steps of the invocation graph */
+        steps,
+        getInvocationStep,
+        /** Fetches the original workflow structure (once) and the step job summaries for each step in the invocation,
+         * and displays the job states on the workflow graph steps.
+         */
+        loadInvocationGraph,
+    };
+}
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 0b08c0aa0af1..63f61b5c2ccf 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -255,6 +255,18 @@ $galaxy-state-bg: (
     border-style: dotted;
 }
 
+.node-header-invocation {
+    color: $text-color;
+    @each $state in map-keys($galaxy-state-bg) {
+        &.header-#{$state} {
+            background-color: map-get($galaxy-state-bg, $state) !important;
+        }
+    }
+    &.header-paused {
+        background-color: $state-info-bg !important;
+    }
+}
+
 // Extra label colors
 .badge-beta {
     @extend .badge-warning;