Move Visualizations Activity to Side Panel

client/src/components/ActivityBar/ActivityBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { type Ref, ref } from "vue";
+import { computed, type Ref, ref } from "vue";
 import { useRoute } from "vue-router/composables";
 import draggable from "vuedraggable";
 
@@ -10,14 +10,14 @@
 import { useEventStore } from "@/stores/eventStore";
 import { useUserStore } from "@/stores/userStore";
 
+import VisualizationPanel from "../Panels/VisualizationPanel.vue";
 import ActivityItem from "./ActivityItem.vue";
-import ActivitySettings from "./ActivitySettings.vue";
 import InteractiveItem from "./Items/InteractiveItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
-import ContextMenu from "@/components/Common/ContextMenu.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
+import SettingsPanel from "@/components/Panels/SettingsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 
@@ -37,11 +37,6 @@
 // activities from store
 const { activities } = storeToRefs(activityStore);
 
-// context menu references
-const contextMenuVisible = ref(false);
-const contextMenuX = ref(0);
-const contextMenuY = ref(0);
-
 // drag references
 const dragTarget: Ref<EventTarget | null> = ref(null);
 const dragItem: Ref<Activity | null> = ref(null);
@@ -63,6 +58,8 @@
     return userStore.toggledSideBar === menuKey;
 }
 
+const isSideBarOpen = computed(() => userStore.toggledSideBar !== "");
+
 /**
  * Evaluates the drop data and keeps track of the drop area
  */
@@ -113,28 +110,13 @@
 function onToggleSidebar(toggle: string) {
     userStore.toggleSideBar(toggle);
 }
-
-/**
- * Positions and displays the context menu
- */
-function toggleContextMenu(evt: MouseEvent) {
-    if (evt && !contextMenuVisible.value) {
-        evt.preventDefault();
-        contextMenuVisible.value = true;
-        contextMenuX.value = evt.x;
-        contextMenuY.value = evt.y;
-    } else {
-        contextMenuVisible.value = false;
-    }
-}
 </script>
 
 <template>
     <div class="d-flex">
         <div
             class="activity-bar d-flex flex-column no-highlight"
             data-description="activity bar"
-            @contextmenu="toggleContextMenu"
             @dragover.prevent="onDragOver"
             @dragenter.prevent="onDragEnter"
             @dragleave.prevent="onDragLeave">
@@ -169,7 +151,7 @@
                                 :to="activity.to"
                                 @click="onToggleSidebar()" />
                             <ActivityItem
-                                v-else-if="['tools', 'workflows'].includes(activity.id)"
+                                v-else-if="['tools', 'workflows', 'visualizations'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
@@ -203,25 +185,19 @@
                 <ActivityItem
                     id="activity-settings"
                     icon="cog"
-                    :is-active="isActiveRoute('/user')"
+                    :is-active="isActiveSideBar('settings')"
                     title="Settings"
                     tooltip="Edit preferences"
-                    to="/user"
-                    @click="onToggleSidebar()" />
+                    @click="onToggleSidebar('settings')" />
             </b-nav>
         </div>
-        <FlexPanel v-if="isActiveSideBar('tools')" key="tools" side="left" :collapsible="false">
-            <ToolPanel />
-        </FlexPanel>
-        <FlexPanel v-else-if="isActiveSideBar('workflows')" key="workflows" side="left" :collapsible="false">
-            <WorkflowPanel />
-        </FlexPanel>
-        <FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
-            <NotificationsPanel />
+        <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
+            <ToolPanel v-if="isActiveSideBar('tools')" />
+            <WorkflowPanel v-else-if="isActiveSideBar('workflows')" />
+            <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
+            <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
+            <SettingsPanel v-else-if="isActiveSideBar('settings')" />
         </FlexPanel>
-        <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
-            <ActivitySettings />
-        </ContextMenu>
     </div>
 </template>
 

client/src/components/ActivityBar/ActivitySettings.vue

@@ -59,11 +59,11 @@ function onQuery(newQuery: string) {
 </script>
 
 <template>
-    <div class="activity-settings rounded p-3 no-highlight">
-        <DelayedInput class="mb-3" :delay="100" placeholder="Search activities" @change="onQuery" />
-        <div v-if="foundActivities" class="activity-settings-content overflow-auto">
+    <div class="activity-settings rounded no-highlight">
+        <DelayedInput :delay="100" placeholder="Search activities" @change="onQuery" />
+        <div v-if="foundActivities" class="activity-settings-content">
             <div v-for="activity in filteredActivities" :key="activity.id">
-                <div class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
+                <button class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
                     <div class="d-flex justify-content-between align-items-start">
                         <span class="w-100">
                             <FontAwesomeIcon
@@ -97,7 +97,7 @@ function onQuery(newQuery: string) {
                     <small v-localize>
                         {{ activity.description || "No description available" }}
                     </small>
-                </div>
+                </button>
             </div>
         </div>
         <div v-else class="activity-settings-content">
@@ -110,14 +110,22 @@ function onQuery(newQuery: string) {
 @import "theme/blue.scss";
 
 .activity-settings {
-    width: 20rem;
+    overflow-y: hidden;
+    display: flex;
+    flex-direction: column;
 }
 
 .activity-settings-content {
-    height: 20rem;
+    overflow-y: scroll;
 }
 
 .activity-settings-item {
+    background: none;
+    border: none;
+    text-align: left;
+    transition: none;
+    width: 100%;
+
     .icon-check {
         color: darken($brand-success, 15%);
     }

client/src/components/Panels/ActivityPanel.vue

@@ -2,6 +2,7 @@
 interface Props {
     title: string;
     goToAllTitle?: string;
+    href?: string;
 }
 
 const props = defineProps<Props>();
@@ -30,6 +31,7 @@ const emit = defineEmits(["goToAll"]);
             class="activity-panel-footer"
             variant="primary"
             :data-description="`props.mainButtonText button`"
+            :to="props.href"
             @click="emit('goToAll')">
             {{ props.goToAllTitle }}
         </BButton>
@@ -43,7 +45,7 @@ const emit = defineEmits(["goToAll"]);
     height: 100%;
     display: flex;
     flex-flow: column;
-    padding: 0.5rem 0.25rem;
+    padding: 0.5rem 1rem;
     background-color: $brand-light;
 
     .activity-panel-header {
@@ -53,22 +55,26 @@ const emit = defineEmits(["goToAll"]);
             display: flex;
             align-items: center;
             justify-content: space-between;
+            min-height: 2rem;
 
             .activity-panel-heading {
-                margin: 0 !important;
+                margin: 0;
+                padding-left: 0.25rem;
             }
         }
     }
 
     .activity-panel-body {
+        display: flex;
+        flex-direction: column;
         flex-grow: 1;
-        height: 100%;
-        overflow-y: auto;
+        overflow-y: hidden;
         padding: 0.2rem 0.2rem;
     }
 
     .activity-panel-footer {
         margin-top: 0.5rem;
+        font-weight: bold;
     }
 }
 </style>

client/src/components/Panels/NotificationsPanel.vue

@@ -5,7 +5,6 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { useRouter } from "vue-router/composables";
 
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useNotificationsStore } from "@/stores/notificationsStore";
@@ -16,7 +15,6 @@ import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 
 library.add(faCheckDouble);
 
-const router = useRouter();
 const { confirm } = useConfirmDialog();
 
 const notificationsStore = useNotificationsStore();
@@ -38,19 +36,14 @@ async function onMarkAllAsRead() {
         });
     }
 }
-
-function goToAllNotifications() {
-    router.push("/user/notifications");
-}
 </script>
 
 <template>
-    <ActivityPanel title="Unread Notifications" go-to-all-title="All notifications" @goToAll="goToAllNotifications">
+    <ActivityPanel title="Unread Notifications" go-to-all-title="All notifications" href="/user/notifications">
         <template v-slot:header-buttons>
             <BButtonGroup>
                 <BButton
                     v-b-tooltip.bottom.hover
-                    :disabled="!unreadNotifications.length"
                     data-description="mark all as read"
                     size="sm"
                     variant="link"
@@ -75,7 +68,7 @@ function goToAllNotifications() {
             No unread notifications to show.
         </BAlert>
 
-        <TransitionGroup name="notifications-box-list" tag="div">
+        <TransitionGroup class="notifications-box-list" name="notifications-box-list" tag="div">
             <div v-for="notification in unreadNotifications" :key="notification.id" class="notifications-box-card">
                 <NotificationCard :notification="notification" />
             </div>
@@ -90,6 +83,10 @@ function goToAllNotifications() {
     background-color: $body-bg;
 }
 
+.notifications-box-list {
+    overflow-y: scroll;
+}
+
 .notifications-box-list-enter-active {
     transition: all 0.5s ease;
 }

client/src/components/Panels/SettingsPanel.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import ActivitySettings from "@/components/ActivityBar/ActivitySettings.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+</script>
+
+<template>
+    <ActivityPanel title="Settings" go-to-all-title="User Preferences" href="/user">
+        <h3>Customize Activity Bar</h3>
+        <ActivitySettings />
+    </ActivityPanel>
+</template>

client/src/components/Panels/VisualizationPanel.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import PluginList from "../Visualizations/PluginList.vue";
+import ActivityPanel from "./ActivityPanel.vue";
+</script>
+
+<template>
+    <ActivityPanel title="Visualizations">
+        <PluginList />
+    </ActivityPanel>
+</template>