From b2f035d75f09b7331da4010c2175ee67442a80bf Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 14 Feb 2024 11:15:27 -0600
Subject: [PATCH] remove multiview activity and use a singular `Histories`
 panel

This panel "switches" to a multi history selector panel when we are on the multiview route. It also has a button group that routes to the histories list or the multiview.
---
 .../components/ActivityBar/ActivityBar.vue    |   8 +-
 .../components/History/HistoryScrollList.vue  |   2 +-
 .../src/components/Panels/ActivityPanel.vue   |  22 ++-
 .../src/components/Panels/HistoriesPanel.vue  | 142 +++++++++++++--
 .../src/components/Panels/MultiviewPanel.vue  | 161 ------------------
 client/src/stores/activitySetup.ts            |  11 --
 6 files changed, 154 insertions(+), 192 deletions(-)
 delete mode 100644 client/src/components/Panels/MultiviewPanel.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 17e00eb84e09..7c17c97229e7 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -18,7 +18,6 @@ import UploadItem from "./Items/UploadItem.vue";
 import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import HistoriesPanel from "@/components/Panels/HistoriesPanel.vue";
-import MultiviewPanel from "@/components/Panels/MultiviewPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
@@ -182,7 +181,7 @@ function toggleContextMenu(evt: MouseEvent) {
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['tools', 'workflows', 'multiview', 'histories'].includes(activity.id)"
+                                v-else-if="['tools', 'workflows', 'histories'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -232,11 +231,8 @@ function toggleContextMenu(evt: MouseEvent) {
         <FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
             <NotificationsPanel />
         </FlexPanel>
-        <FlexPanel v-else-if="isActiveSideBar('multiview')" key="multiview" side="left" :collapsible="false">
-            <MultiviewPanel />
-        </FlexPanel>
         <FlexPanel v-else-if="isActiveSideBar('histories')" key="histories" side="left" :collapsible="false">
-            <HistoriesPanel />
+            <HistoriesPanel :multiple="route.path === '/histories/view_multiple'" />
         </FlexPanel>
         <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
             <ActivitySettings />
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index 7e73c924556d..c3fe379e0ce4 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -188,7 +188,7 @@ function openInMulti(history: HistorySummary) {
     historyStore.pinHistory(history.id);
     emit("update:show-modal", false);
     if (props.inPanel && !isMultiviewPanel.value) {
-        useUserStore().toggleSideBar("multiview");       
+        useUserStore().toggleSideBar("histories");
     }
 }
 
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 7d8de02d0647..d6c38ab741e2 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 interface Props {
     title: string;
-    goToAllTitle?: string;
+    goToAllTitle?: string | string[];
 }
 
 const props = defineProps<Props>();
 
-const emit = defineEmits(["goToAll"]);
+const emit = defineEmits<{
+    (e: "goToAll", index?: number): void;
+}>();
 </script>
 
 <template>
@@ -26,13 +28,23 @@ const emit = defineEmits(["goToAll"]);
         </div>
 
         <BButton
-            v-if="props.goToAllTitle"
+            v-if="props.goToAllTitle && !Array.isArray(props.goToAllTitle)"
             class="activity-panel-footer"
             variant="primary"
             :data-description="`props.mainButtonText button`"
             @click="emit('goToAll')">
             {{ props.goToAllTitle }}
         </BButton>
+        <BButtonGroup v-else-if="props.goToAllTitle" class="activity-panel-footer">
+            <BButton
+                v-for="(goToTitle, index) in props.goToAllTitle"
+                :key="index"
+                variant="primary"
+                :data-description="`props.mainButtonText button ${index}`"
+                @click="emit('goToAll', index)">
+                {{ goToTitle }}
+            </BButton>
+        </BButtonGroup>
     </div>
 </template>
 
@@ -70,6 +82,10 @@ const emit = defineEmits(["goToAll"]);
 
     .activity-panel-footer {
         margin-top: 0.5rem;
+
+        .btn {
+            width: 100%;
+        }
     }
 }
 </style>
diff --git a/client/src/components/Panels/HistoriesPanel.vue b/client/src/components/Panels/HistoriesPanel.vue
index 4762c2e93fbd..c1d0c12a4189 100644
--- a/client/src/components/Panels/HistoriesPanel.vue
+++ b/client/src/components/Panels/HistoriesPanel.vue
@@ -1,24 +1,39 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faColumns, faPlus, faUndo, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
-import { useRouter } from "vue-router/composables";
+import { useRoute, useRouter } from "vue-router/composables";
 
 import { HistoriesFilters } from "@/components/History/HistoriesFilters";
+import { Toast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
+import { localize } from "@/utils/localization";
 import { withPrefix } from "@/utils/redirect";
+import { errorMessageAsString } from "@/utils/simple-error";
 
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import HistoryList from "@/components/History/HistoryScrollList.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 
+interface Props {
+    /** Is this for the History Multiview */
+    multiple?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+});
+
+const route = useRoute();
 const router = useRouter();
+const goToAllTitles = ["All Histories", "History Multiview"];
+const goToAllRoutes = ["/histories/list", "/histories/view_multiple"];
 
 // @ts-ignore bad library types
-library.add(faPlus, faUpload);
+library.add(faColumns, faPlus, faUndo, faUpload);
 
 const filter = ref("");
 const showAdvanced = ref(false);
@@ -26,7 +41,64 @@ const loading = ref(false);
 
 const isAnonymous = computed(() => useUserStore().isAnonymous);
 const historyStore = useHistoryStore();
-const { historiesLoading } = storeToRefs(historyStore);
+const { historiesLoading, currentHistoryId } = storeToRefs(historyStore);
+
+const pinnedHistoryCount = computed(() => {
+    return Object.keys(historyStore.pinnedHistories).length;
+});
+
+const pinRecentTitle = computed(() => {
+    if (pinnedHistoryCount.value > 0) {
+        return localize("Reset selection to show 4 most recently updated histories instead");
+    } else {
+        return localize("Currently showing 4 most recently updated histories in Multiview");
+    }
+});
+
+const pinRecentText = computed(() => {
+    if (pinnedHistoryCount.value > 1) {
+        return localize(`${pinnedHistoryCount.value} histories pinned. Click here to reset`);
+    } else if (pinnedHistoryCount.value == 1) {
+        return localize("1 history pinned. Click here to reset");
+    } else {
+        return localize("Select histories to pin to Multiview");
+    }
+});
+
+async function createAndPin() {
+    try {
+        loading.value = true;
+        await historyStore.createNewHistory();
+        if (!currentHistoryId.value) {
+            throw new Error("Error creating history");
+        }
+        if (pinnedHistoryCount.value > 0) {
+            historyStore.pinHistory(currentHistoryId.value);
+        }
+        router.push("/histories/view_multiple");
+    } catch (error: any) {
+        console.error(error);
+        Toast.error(errorMessageAsString(error), "Error creating and pinning history");
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** Reset to _default_ state; showing 4 latest updated histories */
+function pinRecent() {
+    historyStore.pinnedHistories = [];
+    Toast.info(
+        "Showing the 4 most recently updated histories in Multiview. Pin histories to History Multiview by selecting them in the panel.",
+        "History Multiview"
+    );
+}
+
+function goToAll(index?: number) {
+    const goToRoute = index !== undefined ? goToAllRoutes[index] : null;
+    if (goToRoute) {
+        router.push(goToRoute);
+    }
+}
 
 function setFilter(newFilter: string, newValue: string) {
     filter.value = HistoriesFilters.setFilterValue(filter.value, newFilter, newValue);
@@ -42,9 +114,12 @@ function userTitle(title: string) {
 </script>
 
 <template>
-    <ActivityPanel title="Histories" go-to-all-title="All histories" @goToAll="router.push('/histories/list')">
+    <ActivityPanel
+        :title="!props.multiple ? 'Histories' : 'Select Histories'"
+        :go-to-all-title="goToAllTitles"
+        @goToAll="goToAll">
         <template v-slot:header-buttons>
-            <BButtonGroup>
+            <BButtonGroup v-if="!props.multiple">
                 <BButton
                     v-b-tooltip.bottom.hover
                     data-description="create new history from histories panel"
@@ -66,24 +141,71 @@ function userTitle(title: string) {
                     <FontAwesomeIcon :icon="faUpload" fixed-width />
                 </BButton>
             </BButtonGroup>
+            <BButtonGroup v-else>
+                <BButton
+                    v-b-tooltip.bottom.hover
+                    data-description="create new history for multiview"
+                    size="sm"
+                    variant="link"
+                    :title="userTitle('Create new history and show in multiview')"
+                    :disabled="isAnonymous"
+                    @click="createAndPin">
+                    <FontAwesomeIcon :icon="faPlus" fixed-width />
+                </BButton>
+            </BButtonGroup>
         </template>
 
         <template v-slot:header>
             <FilterMenu
+                class="mb-2"
                 name="Histories"
                 placeholder="search histories"
                 :filter-class="HistoriesFilters"
                 :filter-text.sync="filter"
                 :loading="historiesLoading || loading"
                 :show-advanced.sync="showAdvanced" />
+            <section v-if="props.multiple && !showAdvanced">
+                <BButton
+                    v-if="route.path !== '/histories/view_multiple'"
+                    v-b-tooltip.hover.noninteractive.bottom
+                    :aria-label="userTitle('Open History Multiview in center panel')"
+                    :title="userTitle('Open History Multiview in center panel')"
+                    class="w-100"
+                    size="sm"
+                    :disabled="isAnonymous"
+                    @click="router.push('/histories/view_multiple')">
+                    <FontAwesomeIcon :icon="faColumns" class="mr-1" />
+                    <span v-localize>Open History Multiview</span>
+                </BButton>
+                <BButtonGroup
+                    v-else
+                    v-b-tooltip.hover.noninteractive.bottom
+                    class="w-100"
+                    :aria-label="pinRecentTitle"
+                    :title="pinRecentTitle">
+                    <BButton size="sm" :disabled="!pinnedHistoryCount" @click="pinRecent">
+                        <span class="position-relative">
+                            <FontAwesomeIcon v-if="pinnedHistoryCount" :icon="faUndo" class="mr-1" />
+                            <b>{{ pinRecentText }}</b>
+                        </span>
+                    </BButton>
+                </BButtonGroup>
+            </section>
         </template>
 
         <div v-if="isAnonymous">
-            <b-badge class="alert-info w-100 mx-2">
-                Please <a :href="withPrefix('/login')">log in or register</a> to create multiple histories.
-            </b-badge>
+            <BBadge class="alert-info w-100 mx-2">
+                Please <a :href="withPrefix('/login')">log in or register</a> to create histories.
+            </BBadge>
         </div>
 
-        <HistoryList v-show="!showAdvanced" in-panel :filter="filter" :loading.sync="loading" :additional-options="['center', 'multi']" @setFilter="setFilter" />
+        <HistoryList
+            v-show="!showAdvanced"
+            :multiple="props.multiple"
+            in-panel
+            :filter="filter"
+            :loading.sync="loading"
+            :additional-options="!props.multiple ? ['center', 'multi'] : undefined"
+            @setFilter="setFilter" />
     </ActivityPanel>
 </template>
diff --git a/client/src/components/Panels/MultiviewPanel.vue b/client/src/components/Panels/MultiviewPanel.vue
deleted file mode 100644
index e86beb32dc2d..000000000000
--- a/client/src/components/Panels/MultiviewPanel.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faColumns, faPlus, faUndo } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
-import { useRoute, useRouter } from "vue-router/composables";
-
-import { HistoriesFilters } from "@/components/History/HistoriesFilters";
-import { Toast } from "@/composables/toast";
-import { useHistoryStore } from "@/stores/historyStore";
-import { useUserStore } from "@/stores/userStore";
-import { localize } from "@/utils/localization";
-import { withPrefix } from "@/utils/redirect";
-import { errorMessageAsString } from "@/utils/simple-error";
-
-import FilterMenu from "@/components/Common/FilterMenu.vue";
-import HistoryList from "@/components/History/HistoryScrollList.vue";
-import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
-
-const route = useRoute();
-const router = useRouter();
-
-// @ts-ignore bad library types
-library.add(faColumns, faPlus, faUndo);
-
-const filter = ref("");
-const showAdvanced = ref(false);
-const loading = ref(false);
-
-const isAnonymous = computed(() => useUserStore().isAnonymous);
-const historyStore = useHistoryStore();
-const { historiesLoading, currentHistoryId } = storeToRefs(historyStore);
-
-const pinnedHistoryCount = computed(() => {
-    return Object.keys(historyStore.pinnedHistories).length;
-});
-
-const pinRecentTitle = computed(() => {
-    if (pinnedHistoryCount.value > 0) {
-        return localize("Reset selection to show 4 most recently updated histories instead");
-    } else {
-        return localize("Currently showing 4 most recently updated histories in Multiview");
-    }
-});
-
-const pinRecentText = computed(() => {
-    if (pinnedHistoryCount.value > 1) {
-        return localize(`${pinnedHistoryCount.value} histories pinned. Click here to reset`);
-    } else if (pinnedHistoryCount.value == 1) {
-        return localize("1 history pinned. Click here to reset");
-    } else {
-        return localize("Select histories to pin to Multiview");
-    }
-});
-
-async function createAndPin() {
-    try {
-        loading.value = true;
-        await historyStore.createNewHistory();
-        if (!currentHistoryId.value) {
-            throw new Error("Error creating history");
-        }
-        if (pinnedHistoryCount.value > 0) {
-            historyStore.pinHistory(currentHistoryId.value);
-        }
-        router.push("/histories/view_multiple");
-    } catch (error: any) {
-        console.error(error);
-        Toast.error(errorMessageAsString(error), "Error creating and pinning history");
-    } finally {
-        loading.value = false;
-    }
-}
-
-/** Reset to _default_ state; showing 4 latest updated histories */
-function pinRecent() {
-    historyStore.pinnedHistories = [];
-    Toast.info(
-        "Showing the 4 most recently updated histories in Multiview. Pin histories to History Multiview by selecting them in the panel.",
-        "History Multiview"
-    );
-}
-
-function setFilter(newFilter: string, newValue: string) {
-    filter.value = HistoriesFilters.setFilterValue(filter.value, newFilter, newValue);
-}
-
-function userTitle(title: string) {
-    if (isAnonymous.value == true) {
-        return `Log in to ${title}`;
-    } else {
-        return title;
-    }
-}
-</script>
-
-<template>
-    <ActivityPanel title="Select Histories">
-        <template v-slot:header-buttons>
-            <b-button-group>
-                <b-button
-                    v-b-tooltip.bottom.hover
-                    data-description="create new history for multiview"
-                    size="sm"
-                    variant="link"
-                    :title="userTitle('Create new history and show in multiview')"
-                    :disabled="isAnonymous"
-                    @click="createAndPin">
-                    <FontAwesomeIcon :icon="faPlus" fixed-width />
-                </b-button>
-            </b-button-group>
-        </template>
-
-        <template v-slot:header>
-            <FilterMenu
-                class="mb-3"
-                name="Histories"
-                placeholder="search histories"
-                :filter-class="HistoriesFilters"
-                :filter-text.sync="filter"
-                :loading="historiesLoading || loading"
-                :show-advanced.sync="showAdvanced" />
-            <section v-if="!showAdvanced">
-                <b-button
-                    v-if="route.path !== '/histories/view_multiple'"
-                    v-b-tooltip.hover.noninteractive.bottom
-                    :aria-label="userTitle('Open History Multiview in center panel')"
-                    :title="userTitle('Open History Multiview in center panel')"
-                    class="w-100"
-                    size="sm"
-                    :disabled="isAnonymous"
-                    @click="router.push('/histories/view_multiple')">
-                    <FontAwesomeIcon :icon="faColumns" class="mr-1" />
-                    <span v-localize>Open History Multiview</span>
-                </b-button>
-                <b-button-group
-                    v-else
-                    v-b-tooltip.hover.noninteractive.bottom
-                    class="w-100"
-                    :aria-label="pinRecentTitle"
-                    :title="pinRecentTitle">
-                    <b-button size="sm" :disabled="!pinnedHistoryCount" @click="pinRecent">
-                        <span class="position-relative">
-                            <FontAwesomeIcon v-if="pinnedHistoryCount" :icon="faUndo" class="mr-1" />
-                            <b>{{ pinRecentText }}</b>
-                        </span>
-                    </b-button>
-                </b-button-group>
-            </section>
-        </template>
-
-        <div v-if="isAnonymous">
-            <b-badge class="alert-info w-100 mx-2">
-                Please <a :href="withPrefix('/login')">log in or register</a> to create multiple histories.
-            </b-badge>
-        </div>
-
-        <HistoryList v-show="!showAdvanced" multiple in-panel :filter="filter" :loading.sync="loading" @setFilter="setFilter" />
-    </ActivityPanel>
-</template>
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index e19f988e4426..e793f9b663ef 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -82,17 +82,6 @@ export const Activities = [
         to: null,
         visible: true,
     },
-    {
-        description: "Displays the history selector panel and opens History Multiview in the center panel.",
-        icon: "fa-columns",
-        id: "multiview",
-        mutable: false,
-        optional: true,
-        title: "History Multiview",
-        tooltip: "Select histories to show in History Multiview",
-        to: "/histories/view_multiple",
-        visible: true,
-    },
     {
         description: "Displays all of your datasets across all histories.",
         icon: "fa-folder",