From 1244ee1597bad0ef7b052266dead7c054169f09c Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 13 May 2024 17:33:44 -0500
Subject: [PATCH 1/3] Add an Invocations Panel

---
 .../components/ActivityBar/ActivityBar.vue    |   8 +-
 client/src/components/Common/Heading.vue      |   1 +
 .../components/Grid/configs/invocations.ts    |   2 +-
 .../components/Panels/InvocationsPanel.vue    |  18 +
 .../ToolsList/ScrollToTopButton.vue           |  42 +--
 .../Invocation/InvocationScrollList.vue       | 357 ++++++++++++++++++
 .../WorkflowInvocationState.vue               |  25 +-
 client/src/entry/analysis/router.js           |   1 +
 client/src/stores/activitySetup.ts            |   2 +-
 9 files changed, 429 insertions(+), 27 deletions(-)
 create mode 100644 client/src/components/Panels/InvocationsPanel.vue
 create mode 100644 client/src/components/Workflow/Invocation/InvocationScrollList.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 40baad944a5a..0d9f83fb3d05 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -11,6 +11,7 @@ import { type Activity, useActivityStore } from "@/stores/activityStore";
 import { useEventStore } from "@/stores/eventStore";
 import { useUserStore } from "@/stores/userStore";
 
+import InvocationsPanel from "../Panels/InvocationsPanel.vue";
 import VisualizationPanel from "../Panels/VisualizationPanel.vue";
 import ActivityItem from "./ActivityItem.vue";
 import InteractiveItem from "./Items/InteractiveItem.vue";
@@ -178,7 +179,11 @@ watch(
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['admin', 'tools', 'visualizations', 'multiview'].includes(activity.id)"
+                                v-else-if="
+                                    ['admin', 'tools', 'visualizations', 'multiview', 'invocation'].includes(
+                                        activity.id
+                                    )
+                                "
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -229,6 +234,7 @@ watch(
         </div>
         <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
             <ToolPanel v-if="isActiveSideBar('tools')" />
+            <InvocationsPanel v-else-if="isActiveSideBar('invocation')" />
             <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
             <MultiviewPanel v-else-if="isActiveSideBar('multiview')" />
             <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 7e7ccc8bf024..d31d0d033ce4 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -81,6 +81,7 @@ const element = computed(() => {
             props.bold ? 'font-weight-bold' : '',
             props.inline ? 'inline' : '',
             collapsible ? 'collapsible' : '',
+            props.truncate ? 'truncate' : '',
         ]"
         @click="$emit('click')">
         <b-button v-if="collapsible" variant="link" size="sm">
diff --git a/client/src/components/Grid/configs/invocations.ts b/client/src/components/Grid/configs/invocations.ts
index 72db04c3ca80..f81b1be2d8ce 100644
--- a/client/src/components/Grid/configs/invocations.ts
+++ b/client/src/components/Grid/configs/invocations.ts
@@ -19,7 +19,7 @@ type SortKeyLiteral = "create_time" | "update_time" | "None" | null | undefined;
 /**
  * Request and return invocations from server
  */
-async function getData(
+export async function getData(
     offset: number,
     limit: number,
     search: string,
diff --git a/client/src/components/Panels/InvocationsPanel.vue b/client/src/components/Panels/InvocationsPanel.vue
new file mode 100644
index 000000000000..d84c5784bede
--- /dev/null
+++ b/client/src/components/Panels/InvocationsPanel.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+
+import { useUserStore } from "@/stores/userStore";
+
+import InvocationScrollList from "../Workflow/Invocation/InvocationScrollList.vue";
+import ActivityPanel from "./ActivityPanel.vue";
+
+const { currentUser } = storeToRefs(useUserStore());
+</script>
+
+<template>
+    <ActivityPanel title="Workflow Invocations" go-to-all-title="Go to Invocations List" href="/workflows/invocations">
+        <InvocationScrollList v-if="currentUser && !currentUser?.isAnonymous" in-panel />
+        <BAlert v-else variant="info" class="mt-3" show>Please log in to view your Workflow Invocations.</BAlert>
+    </ActivityPanel>
+</template>
diff --git a/client/src/components/ToolsList/ScrollToTopButton.vue b/client/src/components/ToolsList/ScrollToTopButton.vue
index 34b5d8d6fbc5..ad41a6a75b90 100644
--- a/client/src/components/ToolsList/ScrollToTopButton.vue
+++ b/client/src/components/ToolsList/ScrollToTopButton.vue
@@ -1,33 +1,31 @@
-<template>
-    <b-button
-        v-b-tooltip.noninteractive.hover
-        class="back-to-top"
-        :class="{ show: offset > 100 }"
-        title="Scroll To Top"
-        variant="info"
-        @click="$emit('click')">
-        <FontAwesomeIcon icon="fa-chevron-up" />
-    </b-button>
-</template>
-
-<script>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
 
 library.add(faChevronUp);
 
-export default {
-    components: { FontAwesomeIcon },
-    props: {
-        offset: {
-            type: Number,
-            default: 0,
-        },
-    },
-};
+interface Props {
+    offset: number;
+}
+const props = withDefaults(defineProps<Props>(), {
+    offset: 0,
+});
 </script>
 
+<template>
+    <BButton
+        v-b-tooltip.noninteractive.hover
+        class="back-to-top"
+        :class="{ show: props.offset > 100 }"
+        :title="props.offset > 100 ? 'Scroll To Top' : ''"
+        variant="info"
+        @click="$emit('click')">
+        <FontAwesomeIcon icon="fa-chevron-up" />
+    </BButton>
+</template>
+
 <style lang="scss" scoped>
 .back-to-top {
     bottom: 0.25rem;
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
new file mode 100644
index 000000000000..a791169835b4
--- /dev/null
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faEye } from "@fortawesome/free-regular-svg-icons";
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useInfiniteScroll } from "@vueuse/core";
+import { BAlert, BBadge, BButton, BListGroup, BListGroupItem } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router/composables";
+
+import type { WorkflowInvocation } from "@/api/invocations";
+import { getData } from "@/components/Grid/configs/invocations";
+import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
+import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
+import { useHistoryStore } from "@/stores/historyStore";
+import { useUserStore } from "@/stores/userStore";
+import { useWorkflowStore } from "@/stores/workflowStore";
+
+import Heading from "@/components/Common/Heading.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import ScrollToTopButton from "@/components/ToolsList/ScrollToTopButton.vue";
+import UtcDate from "@/components/UtcDate.vue";
+
+interface Props {
+    inPanel?: boolean;
+    limit?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    inPanel: false,
+    limit: 20,
+});
+
+library.add(faEye, faArrowDown);
+
+const stateClasses: Record<string, string> = {
+    ready: "waiting",
+    scheduled: "ok",
+    failed: "error",
+};
+
+const busy = ref(false);
+const errorMessage = ref("");
+const initDataLoading = ref(true);
+const invocations = ref<WorkflowInvocation[]>([]);
+const totalInvocationCount = ref<number | undefined>(undefined);
+const currentPage = ref(0);
+const scrollableDiv = ref<HTMLElement | null>(null);
+
+const { currentUser } = storeToRefs(useUserStore());
+
+const allLoaded = computed(
+    () => totalInvocationCount.value !== undefined && totalInvocationCount.value <= invocations.value.length
+);
+
+// check if we have scrolled to the top or bottom of the scrollable div
+const { arrived, scrollTop } = useAnimationFrameScroll(scrollableDiv);
+const isScrollable = ref(false);
+useAnimationFrameResizeObserver(scrollableDiv, ({ clientSize, scrollSize }) => {
+    isScrollable.value = scrollSize.height >= clientSize.height + 1;
+});
+const scrolledTop = computed(() => !isScrollable.value || arrived.top);
+const scrolledBottom = computed(() => !isScrollable.value || arrived.bottom);
+
+onMounted(async () => {
+    useInfiniteScroll(scrollableDiv.value, () => loadInvocations());
+});
+
+onUnmounted(() => {
+    // Remove the infinite scrolling behavior
+    useInfiniteScroll(scrollableDiv.value, () => {});
+});
+
+/** if screen size is as such that a scroller is not rendered,
+ * we load enough invocations so that a scroller is rendered
+ */
+watch(
+    () => isScrollable.value,
+    (scrollable: boolean) => {
+        if (!scrollable && !allLoaded.value) {
+            loadInvocations();
+        }
+    }
+);
+
+const currentItemId = computed(() => {
+    const path = route.path;
+    const match = path.match(/\/workflows\/invocations\/([a-zA-Z0-9]+)/);
+    return match ? match[1] : undefined;
+});
+
+const route = useRoute();
+const router = useRouter();
+
+function cardClicked(invocation: WorkflowInvocation) {
+    let path = `/workflows/invocations/${invocation.id}`;
+    if (props.inPanel) {
+        path += "?from_panel=true";
+    }
+    router.push(path);
+}
+
+function scrollToTop() {
+    scrollableDiv.value?.scrollTo({ top: 0, behavior: "smooth" });
+}
+
+/**
+ * Request invocations for the current user
+ */
+async function loadInvocations() {
+    if (currentUser.value && !currentUser.value.isAnonymous && !busy.value && !allLoaded.value) {
+        busy.value = true;
+        try {
+            const offset = props.limit * currentPage.value;
+            const extraProps = currentUser.value ? { user_id: currentUser.value.id } : {};
+
+            const [responseData, responseTotal] = await getData(
+                offset,
+                props.limit,
+                "",
+                "create_time",
+                true,
+                extraProps
+            );
+            invocations.value = invocations.value.concat(responseData as WorkflowInvocation[]);
+            totalInvocationCount.value = responseTotal as number;
+            currentPage.value += 1;
+            errorMessage.value = "";
+        } catch (e) {
+            errorMessage.value = `Failed to obtain invocations: ${e}`;
+        } finally {
+            initDataLoading.value = false;
+            busy.value = false;
+        }
+    }
+}
+
+function historyName(historyId: string) {
+    const historyStore = useHistoryStore();
+    return historyStore.getHistoryNameById(historyId);
+}
+
+function stateClass(state: WorkflowInvocation["state"]) {
+    if (stateClasses[state]) {
+        return `node-header-invocation header-${stateClasses[state]}`;
+    }
+    return "";
+}
+
+function workflowName(workflowId: string) {
+    const workflowStore = useWorkflowStore();
+    return workflowStore.getStoredWorkflowNameByInstanceId(workflowId);
+}
+</script>
+
+<template>
+    <div :class="props.inPanel ? 'unified-panel' : 'flex-column-overflow'">
+        <div
+            class="grid-card-list-container"
+            :class="{
+                'in-panel': props.inPanel,
+                'scrolled-top': scrolledTop,
+                'scrolled-bottom': scrolledBottom,
+            }">
+            <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
+            <BAlert v-else-if="initDataLoading" variant="info" show>
+                <LoadingSpan message="Loading invocations" />
+            </BAlert>
+            <div
+                ref="scrollableDiv"
+                class="grid-card-list"
+                :class="{
+                    'in-panel': props.inPanel,
+                    toolMenuContainer: props.inPanel,
+                }"
+                role="list">
+                <BListGroup>
+                    <!-- d-flex justify-content-between align-items-center -->
+                    <BListGroupItem
+                        v-for="(invocation, cardIndex) in invocations"
+                        :key="cardIndex"
+                        button
+                        class="d-flex"
+                        :class="{
+                            current: invocation.id === currentItemId,
+                            'panel-item': props.inPanel,
+                        }"
+                        :active="invocation.id === currentItemId"
+                        @click="() => cardClicked(invocation)">
+                        <div class="overflow-auto w-100">
+                            <Heading bold size="sm" icon="fa-sitemap">
+                                <span class="truncate">{{ workflowName(invocation.workflow_id) }}</span>
+                            </Heading>
+                            <Heading size="text" icon="fa-hdd">
+                                <span class="truncate">{{ historyName(invocation.history_id) }}</span>
+                            </Heading>
+                            <div class="d-flex justify-content-between">
+                                <BBadge v-b-tooltip.noninteractive.hover pill>
+                                    <UtcDate :date="invocation.create_time" mode="elapsed" />
+                                </BBadge>
+                                <BBadge v-b-tooltip.noninteractive.hover pill :class="stateClass(invocation.state)">
+                                    {{ invocation.state }}
+                                </BBadge>
+                            </div>
+                        </div>
+                        <div v-if="props.inPanel" class="position-absolute mr-3" style="right: 0">
+                            <FontAwesomeIcon v-if="invocation.id === currentItemId" :icon="faEye" size="lg" />
+                        </div>
+                    </BListGroupItem>
+                    <div>
+                        <div v-if="allLoaded" class="list-end my-2">
+                            <span v-if="invocations.length == 1">- {{ invocations.length }} invocation loaded -</span>
+                            <span v-else-if="invocations.length > 1">
+                                - All {{ invocations.length }} invocations loaded -
+                            </span>
+                        </div>
+                        <BOverlay :show="busy" opacity="0.5" />
+                    </div>
+                </BListGroup>
+            </div>
+            <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />
+        </div>
+
+        <div :class="!props.inPanel && 'd-flex flex-row mt-3'">
+            <div
+                v-if="!allLoaded"
+                class="mr-auto d-flex justify-content-center align-items-center"
+                :class="props.inPanel && 'mt-1'">
+                <i class="mr-1">Loaded {{ invocations.length }} out of {{ totalInvocationCount }} invocations</i>
+                <BButton
+                    v-b-tooltip.noninteractive.hover
+                    data-description="load more invocations button"
+                    size="sm"
+                    title="Load More"
+                    variant="link"
+                    @click="loadInvocations()">
+                    <FontAwesomeIcon :icon="faArrowDown" />
+                </BButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.flex-column-overflow {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.grid-card-list-container {
+    position: relative;
+
+    &.in-panel {
+        flex-grow: 1;
+    }
+
+    &:not(&.in-panel) {
+        @extend .flex-column-overflow;
+    }
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: "";
+        pointer-events: none;
+        z-index: 10;
+        height: 30px;
+        width: 100%;
+        opacity: 0;
+
+        background-repeat: no-repeat;
+        transition: opacity 0.4s;
+    }
+
+    &:before {
+        top: 0;
+        background-image: linear-gradient(to bottom, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+    }
+
+    &:not(.scrolled-top) {
+        &:before {
+            opacity: 1;
+        }
+    }
+
+    &:after {
+        bottom: 0;
+        background-image: linear-gradient(to top, rgba(3, 0, 48, 0.1), rgba(3, 0, 48, 0.02), rgba(3, 0, 48, 0));
+    }
+
+    &:not(.scrolled-bottom) {
+        &:after {
+            opacity: 1;
+        }
+    }
+}
+
+.grid-card-list {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+
+    &.in-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .list-group {
+        .list-group-item {
+            display: flex;
+            border-radius: 0;
+
+            &.current {
+                border-left: 0.25rem solid $brand-primary;
+            }
+
+            &.panel-item {
+                justify-content: space-between;
+                align-items: center;
+                &:not(&.active) {
+                    background: $panel-bg-color;
+                }
+            }
+
+            &:not(&.panel-item) {
+                &:first-child {
+                    border-top-left-radius: inherit;
+                    border-top-right-radius: inherit;
+                }
+
+                &:last-child {
+                    border-bottom-left-radius: inherit;
+                    border-bottom-right-radius: inherit;
+                }
+            }
+        }
+    }
+    .list-end {
+        width: 100%;
+        text-align: center;
+        color: $text-light;
+    }
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 03aab1d5eca6..fc1fb046f8b3 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap } from "@fortawesome/free-solid-svg-icons";
+import {
+    faArrowLeft,
+    faClock,
+    faEdit,
+    faEye,
+    faHdd,
+    faPlay,
+    faSitemap,
+    faTimes,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BTab, BTabs } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
@@ -26,13 +35,14 @@ import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTa
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap);
+library.add(faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap, faTimes);
 
 interface Props {
     invocationId: string;
     index?: number;
     isSubworkflow?: boolean;
     isFullPage?: boolean;
+    fromPanel?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -164,6 +174,7 @@ function getWorkflowName() {
 
             <div>
                 <BButton
+                    v-if="!props.fromPanel"
                     v-b-tooltip.hover.noninteractive
                     :title="localize('Return to Invocations List')"
                     class="text-nowrap"
@@ -173,6 +184,16 @@ function getWorkflowName() {
                     <FontAwesomeIcon :icon="faArrowLeft" class="mr-1" />
                     <span v-localize>Invocations List</span>
                 </BButton>
+                <BButton
+                    v-else
+                    v-b-tooltip.hover.noninteractive
+                    :title="localize('Close invocation')"
+                    size="sm"
+                    variant="outline-primary"
+                    to="/">
+                    <FontAwesomeIcon :icon="faTimes" class="mr-1" />
+                    <span v-localize>Close</span>
+                </BButton>
             </div>
         </div>
         <div v-if="props.isFullPage" class="py-2 pl-3 d-flex justify-content-between align-items-center">
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 47cf63188886..06f92ccc643a 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -566,6 +566,7 @@ export function getRouter(Galaxy) {
                         props: (route) => ({
                             invocationId: route.params.invocationId,
                             isFullPage: true,
+                            fromPanel: route.query.from_panel,
                         }),
                     },
                     {
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index aa15c8ab564a..2e8bf5b1c26e 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -62,7 +62,7 @@ export const Activities = [
         optional: true,
         title: "Workflow Invocations",
         tooltip: "Show all workflow runs",
-        to: "/workflows/invocations",
+        to: null,
         visible: true,
     },
     {

From 483c05997da12069477d9bd639095af154b3dd66 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 14 May 2024 11:41:52 -0500
Subject: [PATCH 2/3] only render "back to list" button if not `from_panel`

i.e.: Do not render the `<- Invocations List` button if you open the invocation state overview from the invocations panel
---
 .../WorkflowInvocationState.vue               | 26 +++----------------
 1 file changed, 3 insertions(+), 23 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index fc1fb046f8b3..6620c5786f36 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,15 +1,6 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-    faArrowLeft,
-    faClock,
-    faEdit,
-    faEye,
-    faHdd,
-    faPlay,
-    faSitemap,
-    faTimes,
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BTab, BTabs } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
@@ -35,7 +26,7 @@ import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTa
 import WorkflowInvocationOverview from "./WorkflowInvocationOverview.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap, faTimes);
+library.add(faArrowLeft, faClock, faEdit, faEye, faHdd, faPlay, faSitemap);
 
 interface Props {
     invocationId: string;
@@ -172,9 +163,8 @@ function getWorkflowName() {
                 Invoked Workflow: "{{ getWorkflowName() }}"
             </Heading>
 
-            <div>
+            <div v-if="!props.fromPanel">
                 <BButton
-                    v-if="!props.fromPanel"
                     v-b-tooltip.hover.noninteractive
                     :title="localize('Return to Invocations List')"
                     class="text-nowrap"
@@ -184,16 +174,6 @@ function getWorkflowName() {
                     <FontAwesomeIcon :icon="faArrowLeft" class="mr-1" />
                     <span v-localize>Invocations List</span>
                 </BButton>
-                <BButton
-                    v-else
-                    v-b-tooltip.hover.noninteractive
-                    :title="localize('Close invocation')"
-                    size="sm"
-                    variant="outline-primary"
-                    to="/">
-                    <FontAwesomeIcon :icon="faTimes" class="mr-1" />
-                    <span v-localize>Close</span>
-                </BButton>
             </div>
         </div>
         <div v-if="props.isFullPage" class="py-2 pl-3 d-flex justify-content-between align-items-center">

From dbb91c80962334e6700588b197b560c9f3a9135d Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 14 May 2024 11:48:28 -0500
Subject: [PATCH 3/3] rename/adjust css styling for scroll list

Maybe we should consolidate styling for all scroll lists
---
 .../Invocation/InvocationScrollList.vue       | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
index a791169835b4..dacbe852b1b1 100644
--- a/client/src/components/Workflow/Invocation/InvocationScrollList.vue
+++ b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -157,7 +157,7 @@ function workflowName(workflowId: string) {
 <template>
     <div :class="props.inPanel ? 'unified-panel' : 'flex-column-overflow'">
         <div
-            class="grid-card-list-container"
+            class="scroll-list-container"
             :class="{
                 'in-panel': props.inPanel,
                 'scrolled-top': scrolledTop,
@@ -169,14 +169,13 @@ function workflowName(workflowId: string) {
             </BAlert>
             <div
                 ref="scrollableDiv"
-                class="grid-card-list"
+                class="scroll-list"
                 :class="{
                     'in-panel': props.inPanel,
                     toolMenuContainer: props.inPanel,
                 }"
                 role="list">
                 <BListGroup>
-                    <!-- d-flex justify-content-between align-items-center -->
                     <BListGroupItem
                         v-for="(invocation, cardIndex) in invocations"
                         :key="cardIndex"
@@ -189,11 +188,11 @@ function workflowName(workflowId: string) {
                         :active="invocation.id === currentItemId"
                         @click="() => cardClicked(invocation)">
                         <div class="overflow-auto w-100">
-                            <Heading bold size="sm" icon="fa-sitemap">
-                                <span class="truncate">{{ workflowName(invocation.workflow_id) }}</span>
+                            <Heading bold size="text" icon="fa-sitemap">
+                                <span class="truncate-3-lines">{{ workflowName(invocation.workflow_id) }}</span>
                             </Heading>
                             <Heading size="text" icon="fa-hdd">
-                                <span class="truncate">{{ historyName(invocation.history_id) }}</span>
+                                <small class="text-muted">{{ historyName(invocation.history_id) }}</small>
                             </Heading>
                             <div class="d-flex justify-content-between">
                                 <BBadge v-b-tooltip.noninteractive.hover pill>
@@ -245,10 +244,11 @@ function workflowName(workflowId: string) {
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
-.truncate {
-    white-space: nowrap;
+.truncate-3-lines {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
     overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .flex-column-overflow {
@@ -257,7 +257,7 @@ function workflowName(workflowId: string) {
     overflow: auto;
 }
 
-.grid-card-list-container {
+.scroll-list-container {
     position: relative;
 
     &.in-panel {
@@ -305,7 +305,7 @@ function workflowName(workflowId: string) {
     }
 }
 
-.grid-card-list {
+.scroll-list {
     overflow-x: hidden;
     overflow-y: scroll;
     scroll-behavior: smooth;