From fa29c13cf19d05a288ed43d1388fead334ba5fd0 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 8 Apr 2026 19:59:15 -0500
Subject: [PATCH 1/3] make invocation view header annotation area collapsible

---
 .../Workflow/WorkflowNavigationTitle.vue      |  1 +
 .../WorkflowInvocationState.vue               | 23 +++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index b876958eda7..f28788aae02 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -137,6 +137,7 @@ async function rerunWorkflow() {
         <div class="position-relative">
             <div v-if="workflow" class="bg-secondary px-2 py-1 rounded d-flex flex-gapx-1 justify-content-between">
                 <div class="py-1 d-flex flex-wrap align-items-center flex-gapx-1" data-description="workflow heading">
+                    <slot name="before-icon" />
                     <FontAwesomeIcon :icon="faSitemap" fixed-width />
                     <b> {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }} </b>
                     <span>(Version: {{ workflow.version + 1 }})</span>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 1e55f1e8072..7b6103c2e26 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { faExclamation, faSpinner, faSquare, faTimes } from "@fortawesome/free-solid-svg-icons";
+import {
+    faAngleDoubleDown,
+    faAngleDoubleUp,
+    faExclamation,
+    faSpinner,
+    faSquare,
+    faTimes,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BBadge, BNav, BNavItem } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
@@ -58,6 +65,7 @@ const invocationLoaded = ref(false);
 const errorMessage = ref<string | null>(null);
 const cancellingInvocation = ref(false);
 const isPolling = ref(false);
+const headerCollapsed = ref(false);
 
 const uniqueMessages = computed(() => {
     const messages = invocation.value?.messages || [];
@@ -283,6 +291,17 @@ async function onCancel() {
             :invocation="invocation"
             :workflow-id="invocation.workflow_id"
             :success="props.success">
+            <template v-slot:before-icon>
+                <GButton
+                    transparent
+                    size="small"
+                    :title="headerCollapsed ? 'Expand header' : 'Collapse header'"
+                    icon-only
+                    inline
+                    @click="headerCollapsed = !headerCollapsed">
+                    <FontAwesomeIcon :icon="headerCollapsed ? faAngleDoubleDown : faAngleDoubleUp" fixed-width />
+                </GButton>
+            </template>
             <template v-slot:workflow-title-actions>
                 <GButton
                     v-if="!invocationAndJobTerminal"
@@ -305,7 +324,7 @@ async function onCancel() {
         </WorkflowNavigationTitle>
 
         <WorkflowAnnotation
-            v-if="props.isFullPage"
+            v-if="props.isFullPage && !headerCollapsed"
             :workflow-id="invocation.workflow_id"
             :invocation-create-time="invocation.create_time"
             :history-id="invocation.history_id">

From d9ba1211a73736a5f7819af2ad50357a7cfd6dfa Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 8 Apr 2026 20:05:21 -0500
Subject: [PATCH 2/3] add css transition to invocation view header collapse

---
 .../WorkflowInvocationState.vue               | 105 +++++++++++-------
 1 file changed, 63 insertions(+), 42 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 7b6103c2e26..37bca797549 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -323,48 +323,50 @@ async function onCancel() {
             </template>
         </WorkflowNavigationTitle>
 
-        <WorkflowAnnotation
-            v-if="props.isFullPage && !headerCollapsed"
-            :workflow-id="invocation.workflow_id"
-            :invocation-create-time="invocation.create_time"
-            :history-id="invocation.history_id">
-            <template v-slot:middle-content>
-                <div class="progress-bars mx-1">
-                    <ProgressBar
-                        v-if="!stepCount"
-                        note="Loading step state summary..."
-                        :loading="true"
-                        class="steps-progress" />
-                    <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
-                        v-if="stateCounts"
-                        :note="jobStatesStr"
-                        :total="jobCount"
-                        :ok-count="stateCounts.okCount"
-                        :running-count="stateCounts.runningCount"
-                        :new-count="stateCounts.newCount"
-                        :error-count="stateCounts.errorCount"
-                        :loading="!invocationAndJobTerminal"
-                        class="jobs-progress" />
-                </div>
-            </template>
-        </WorkflowAnnotation>
+        <Transition name="header-collapse">
+            <WorkflowAnnotation
+                v-if="props.isFullPage && !headerCollapsed"
+                :workflow-id="invocation.workflow_id"
+                :invocation-create-time="invocation.create_time"
+                :history-id="invocation.history_id">
+                <template v-slot:middle-content>
+                    <div class="progress-bars mx-1">
+                        <ProgressBar
+                            v-if="!stepCount"
+                            note="Loading step state summary..."
+                            :loading="true"
+                            class="steps-progress" />
+                        <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
+                            v-if="stateCounts"
+                            :note="jobStatesStr"
+                            :total="jobCount"
+                            :ok-count="stateCounts.okCount"
+                            :running-count="stateCounts.runningCount"
+                            :new-count="stateCounts.newCount"
+                            :error-count="stateCounts.errorCount"
+                            :loading="!invocationAndJobTerminal"
+                            class="jobs-progress" />
+                    </div>
+                </template>
+            </WorkflowAnnotation>
+        </Transition>
 
         <BNav v-if="props.isFullPage" pills class="mb-2 p-2 bg-light border-bottom">
             <BNavItem title="Overview" :active="onOverviewTab" :to="`/workflows/invocations/${props.invocationId}`">
@@ -527,6 +529,25 @@ async function onCancel() {
 </style>
 
 <style scoped lang="scss">
+.header-collapse-enter-active,
+.header-collapse-leave-active {
+    overflow: hidden;
+    max-height: 600px;
+    opacity: 1;
+    transform: translateY(0);
+    transition:
+        max-height 0.3s ease,
+        opacity 0.25s ease,
+        transform 0.25s ease;
+}
+
+.header-collapse-enter,
+.header-collapse-leave-to {
+    max-height: 0;
+    opacity: 0;
+    transform: translateY(-6px);
+}
+
 .progress-bars {
     // progress bar shrinks to fit divs on either side
     flex-grow: 1;

From e113c44be7a031ff5c38e838ae599866f1095967 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 10 Apr 2026 12:11:02 -0500
Subject: [PATCH 3/3] place invocation header collapse state in local storage

However, ensure that when a workflow is run (success prop is true), we expand the header so the user sees the progress bars, and can collapse if they need to.
---
 .../WorkflowInvocationState.vue               | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 37bca797549..65ced7a8033 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -12,6 +12,7 @@ import { BAlert, BBadge, BNav, BNavItem } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import { type InvocationStep, isWorkflowInvocationElementView } from "@/api/invocations";
+import { usePersistentToggle } from "@/composables/persistentToggle";
 import { useInvocationStore } from "@/stores/invocationStore";
 import { useWorkflowStore } from "@/stores/workflowStore";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -65,7 +66,8 @@ const invocationLoaded = ref(false);
 const errorMessage = ref<string | null>(null);
 const cancellingInvocation = ref(false);
 const isPolling = ref(false);
-const headerCollapsed = ref(false);
+
+const { toggled: headerCollapsed, toggle: toggleHeaderCollapse } = usePersistentToggle("invocation-header-collapsed");
 
 const uniqueMessages = computed(() => {
     const messages = invocation.value?.messages || [];
@@ -247,6 +249,19 @@ watch(
     },
 );
 
+// If a workflow is run just now (success prop), we want to have the header expanded
+watch(
+    () => props.success,
+    (success) => {
+        if (success && headerCollapsed.value) {
+            setTimeout(() => {
+                headerCollapsed.value = false;
+            }, 1500);
+        }
+    },
+    { immediate: true },
+);
+
 onUnmounted(() => {
     clearTimeout(stepStatesInterval.value);
     clearTimeout(jobStatesInterval.value);
@@ -298,7 +313,7 @@ async function onCancel() {
                     :title="headerCollapsed ? 'Expand header' : 'Collapse header'"
                     icon-only
                     inline
-                    @click="headerCollapsed = !headerCollapsed">
+                    @click="toggleHeaderCollapse">
                     <FontAwesomeIcon :icon="headerCollapsed ? faAngleDoubleDown : faAngleDoubleUp" fixed-width />
                 </GButton>
             </template>