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.

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 />

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");
     }
 }
 

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>

client/src/components/Panels/HistoriesPanel.vue

@@ -1,32 +1,104 @@
 <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);
 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>