From 1decc9416ba0a69e4b7b7b54aeb99cef1c5b7009 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 12:28:58 +0100
Subject: [PATCH 01/12] adjust panel style

---
 client/src/components/Panels/ActivityPanel.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 47480ba91d62..e5674a02dc34 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -43,7 +43,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 {
@@ -55,7 +55,8 @@ const emit = defineEmits(["goToAll"]);
             justify-content: space-between;
 
             .activity-panel-heading {
-                margin: 0 !important;
+                margin: 0;
+                padding-left: 0.25rem;
             }
         }
     }

From d99af5b3c4dd99ea46575ba621c19bdad26fd4e3 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 12:29:37 +0100
Subject: [PATCH 02/12] remove disabled state

---
 client/src/components/Panels/NotificationsPanel.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Panels/NotificationsPanel.vue b/client/src/components/Panels/NotificationsPanel.vue
index b0c0bd61cbe1..0229c3776228 100644
--- a/client/src/components/Panels/NotificationsPanel.vue
+++ b/client/src/components/Panels/NotificationsPanel.vue
@@ -50,7 +50,6 @@ function goToAllNotifications() {
             <BButtonGroup>
                 <BButton
                     v-b-tooltip.bottom.hover
-                    :disabled="!unreadNotifications.length"
                     data-description="mark all as read"
                     size="sm"
                     variant="link"

From e4418cf99a962279f70aefb5bd3d97ed3a713b2f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 12:32:50 +0100
Subject: [PATCH 03/12] add href prop

---
 client/src/components/Panels/ActivityPanel.vue      | 2 ++
 client/src/components/Panels/NotificationsPanel.vue | 8 +-------
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index e5674a02dc34..28a599d3d30a 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/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>
diff --git a/client/src/components/Panels/NotificationsPanel.vue b/client/src/components/Panels/NotificationsPanel.vue
index 0229c3776228..fa46c93988e2 100644
--- a/client/src/components/Panels/NotificationsPanel.vue
+++ b/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,14 +36,10 @@ 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

From 602fe6efb9ed082544a277a301d41aa31a989fd8 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 12:47:28 +0100
Subject: [PATCH 04/12] add settings panel

---
 client/src/components/ActivityBar/ActivityBar.vue | 10 +++++++---
 client/src/components/Panels/ActivityPanel.vue    |  2 ++
 client/src/components/Panels/SettingsPanel.vue    | 11 +++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Panels/SettingsPanel.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index f1aec81e937f..e5c40b582c08 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -18,6 +18,7 @@ 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";
 
@@ -203,11 +204,10 @@ function toggleContextMenu(evt: MouseEvent) {
                 <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">
@@ -219,6 +219,10 @@ function toggleContextMenu(evt: MouseEvent) {
         <FlexPanel v-else-if="isActiveSideBar('notifications')" key="notifications" side="left" :collapsible="false">
             <NotificationsPanel />
         </FlexPanel>
+        <FlexPanel v-else-if="isActiveSideBar('settings')" key="settings" side="left" :collapsible="false">
+            <SettingsPanel />
+        </FlexPanel>
+
         <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
             <ActivitySettings />
         </ContextMenu>
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 28a599d3d30a..9b6399238390 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -55,6 +55,7 @@ const emit = defineEmits(["goToAll"]);
             display: flex;
             align-items: center;
             justify-content: space-between;
+            min-height: 2rem;
 
             .activity-panel-heading {
                 margin: 0;
@@ -72,6 +73,7 @@ const emit = defineEmits(["goToAll"]);
 
     .activity-panel-footer {
         margin-top: 0.5rem;
+        font-weight: bold;
     }
 }
 </style>
diff --git a/client/src/components/Panels/SettingsPanel.vue b/client/src/components/Panels/SettingsPanel.vue
new file mode 100644
index 000000000000..4dcebaa0a0c4
--- /dev/null
+++ b/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>

From 17b3a96e61a50d896aac8d64a2a14ed7f73c23fa Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 12:59:00 +0100
Subject: [PATCH 05/12] move settings to panel

---
 .../components/ActivityBar/ActivityBar.vue    | 26 -------------------
 .../ActivityBar/ActivitySettings.vue          | 12 +++++----
 .../src/components/Panels/ActivityPanel.vue   |  5 ++--
 .../components/Panels/NotificationsPanel.vue  |  6 ++++-
 4 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index e5c40b582c08..ee92bb66874c 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -11,11 +11,9 @@ import { useEventStore } from "@/stores/eventStore";
 import { useUserStore } from "@/stores/userStore";
 
 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";
@@ -38,11 +36,6 @@ activityStore.sync();
 // 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);
@@ -114,20 +107,6 @@ function onDragOver(evt: MouseEvent) {
 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>
@@ -135,7 +114,6 @@ function toggleContextMenu(evt: MouseEvent) {
         <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">
@@ -222,10 +200,6 @@ function toggleContextMenu(evt: MouseEvent) {
         <FlexPanel v-else-if="isActiveSideBar('settings')" key="settings" side="left" :collapsible="false">
             <SettingsPanel />
         </FlexPanel>
-
-        <ContextMenu :visible="contextMenuVisible" :x="contextMenuX" :y="contextMenuY" @hide="toggleContextMenu">
-            <ActivitySettings />
-        </ContextMenu>
     </div>
 </template>
 
diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 4afe1fea1d12..487073f5467f 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -59,9 +59,9 @@ 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)">
                     <div class="d-flex justify-content-between align-items-start">
@@ -110,11 +110,13 @@ 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 {
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 9b6399238390..707e9dcec23a 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -65,9 +65,10 @@ const emit = defineEmits(["goToAll"]);
     }
 
     .activity-panel-body {
+        display: flex;
+        flex-direction: column;
         flex-grow: 1;
-        height: 100%;
-        overflow-y: auto;
+        overflow-y: hidden;
         padding: 0.2rem 0.2rem;
     }
 
diff --git a/client/src/components/Panels/NotificationsPanel.vue b/client/src/components/Panels/NotificationsPanel.vue
index fa46c93988e2..606e87459074 100644
--- a/client/src/components/Panels/NotificationsPanel.vue
+++ b/client/src/components/Panels/NotificationsPanel.vue
@@ -68,7 +68,7 @@ async function onMarkAllAsRead() {
             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>
@@ -83,6 +83,10 @@ async function onMarkAllAsRead() {
     background-color: $body-bg;
 }
 
+.notifications-box-list {
+    overflow-y: scroll;
+}
+
 .notifications-box-list-enter-active {
     transition: all 0.5s ease;
 }

From ae5d17c3a60376f5aa21f577799d927a019ed224 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 13:01:28 +0100
Subject: [PATCH 06/12] make activity toggles buttons

---
 client/src/components/ActivityBar/ActivitySettings.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 487073f5467f..092f46e3e98c 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -63,7 +63,7 @@ function onQuery(newQuery: string) {
         <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">
@@ -120,6 +120,12 @@ function onQuery(newQuery: string) {
 }
 
 .activity-settings-item {
+    background: none;
+    border: none;
+    text-align: left;
+    transition: none;
+    width: 100%;
+
     .icon-check {
         color: darken($brand-success, 15%);
     }

From 8207cfb168550fa5cdba95498a4aa8c35f1c888f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 13:06:39 +0100
Subject: [PATCH 07/12] re-use same flex panel for sidebar

---
 .../components/ActivityBar/ActivityBar.vue    | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index ee92bb66874c..0d48d3e01051 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/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";
 
@@ -57,6 +57,8 @@ function isActiveSideBar(menuKey: string) {
     return userStore.toggledSideBar === menuKey;
 }
 
+const isSideBarOpen = computed(() => userStore.toggledSideBar !== "");
+
 /**
  * Evaluates the drop data and keeps track of the drop area
  */
@@ -188,17 +190,11 @@ function onToggleSidebar(toggle: string) {
                     @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>
-        <FlexPanel v-else-if="isActiveSideBar('settings')" key="settings" side="left" :collapsible="false">
-            <SettingsPanel />
+        <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
+            <ToolPanel v-if="isActiveSideBar('tools')" />
+            <WorkflowPanel v-else-if="isActiveSideBar('workflows')" />
+            <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
+            <SettingsPanel v-else-if="isActiveSideBar('settings')" />
         </FlexPanel>
     </div>
 </template>

From cfe47e9120e8e2395433a6da09452ffd629c9535 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 14:01:57 +0100
Subject: [PATCH 08/12] move visualization activity to side panel

---
 .../components/ActivityBar/ActivityBar.vue    |  4 +-
 .../components/Panels/VisualizationPanel.vue  | 10 ++
 .../components/Visualizations/PluginList.vue  | 96 +++++++++++--------
 client/src/stores/activitySetup.ts            |  2 +-
 4 files changed, 69 insertions(+), 43 deletions(-)
 create mode 100644 client/src/components/Panels/VisualizationPanel.vue

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 0d48d3e01051..7f12bc1545aa 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -10,6 +10,7 @@ import { type Activity, useActivityStore } from "@/stores/activityStore";
 import { useEventStore } from "@/stores/eventStore";
 import { useUserStore } from "@/stores/userStore";
 
+import VisualizationPanel from "../Panels/VisualizationPanel.vue";
 import ActivityItem from "./ActivityItem.vue";
 import InteractiveItem from "./Items/InteractiveItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
@@ -150,7 +151,7 @@ function onToggleSidebar(toggle: string) {
                                 :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"
@@ -193,6 +194,7 @@ function onToggleSidebar(toggle: string) {
         <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>
diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
new file mode 100644
index 000000000000..13e0af3affd4
--- /dev/null
+++ b/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>
diff --git a/client/src/components/Visualizations/PluginList.vue b/client/src/components/Visualizations/PluginList.vue
index 25ed2d6fad6f..3fe75b533fef 100644
--- a/client/src/components/Visualizations/PluginList.vue
+++ b/client/src/components/Visualizations/PluginList.vue
@@ -1,55 +1,61 @@
 <template>
     <div class="plugin-list">
         <div v-if="error" class="alert alert-danger">{{ error }}</div>
-        <div v-else>
+        <template v-else>
             <DelayedInput
                 class="mb-3"
                 :query="search"
                 :placeholder="titleSearchVisualizations"
                 :delay="100"
                 @change="onSearch" />
-            <div v-for="plugin in plugins" :key="plugin.name">
-                <table v-if="match(plugin)">
-                    <tr class="plugin-list-item" :data-plugin-name="plugin.name" @click="select(plugin)">
-                        <td>
-                            <img v-if="plugin.logo" alt="ui thumbnails" class="plugin-list-image" :src="plugin.logo" />
-                            <div v-else class="plugin-list-icon fa fa-eye" />
-                        </td>
-                        <td>
-                            <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
-                            <div class="plugin-list-text">{{ plugin.description }}</div>
-                        </td>
-                    </tr>
-                    <tr v-if="!fixed">
-                        <td />
-                        <td v-if="plugin.name == name">
-                            <div v-if="hdas && hdas.length > 0">
-                                <div class="font-weight-bold">{{ titleSelectDataset }}</div>
-                                <div class="ui-select">
-                                    <select v-model="selected" class="select">
-                                        <option v-for="file in hdas" :key="file.id" :value="file.id">
-                                            {{ file.name }}
-                                        </option>
-                                    </select>
-                                    <div class="icon-dropdown fa fa-caret-down" />
+            <div class="plugin-list-items">
+                <div v-for="plugin in plugins" :key="plugin.name">
+                    <table v-if="match(plugin)">
+                        <tr class="plugin-list-item" :data-plugin-name="plugin.name" @click="select(plugin)">
+                            <td>
+                                <img
+                                    v-if="plugin.logo"
+                                    alt="ui thumbnails"
+                                    class="plugin-list-image"
+                                    :src="plugin.logo" />
+                                <div v-else class="plugin-list-icon fa fa-eye" />
+                            </td>
+                            <td>
+                                <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
+                                <div class="plugin-list-text">{{ plugin.description }}</div>
+                            </td>
+                        </tr>
+                        <tr v-if="!fixed">
+                            <td />
+                            <td v-if="plugin.name == name">
+                                <div v-if="hdas && hdas.length > 0">
+                                    <div class="font-weight-bold">{{ titleSelectDataset }}</div>
+                                    <div class="ui-select">
+                                        <select v-model="selected" class="select">
+                                            <option v-for="file in hdas" :key="file.id" :value="file.id">
+                                                {{ file.name }}
+                                            </option>
+                                        </select>
+                                        <div class="icon-dropdown fa fa-caret-down" />
+                                    </div>
+                                    <button
+                                        type="button"
+                                        class="ui-button-default float-left mt-3 btn btn-primary"
+                                        @click="create(plugin)">
+                                        <i class="icon fa fa-check" />
+                                        <span class="title">{{ titleCreateVisualization }}</span>
+                                    </button>
                                 </div>
-                                <button
-                                    type="button"
-                                    class="ui-button-default float-left mt-3 btn btn-primary"
-                                    @click="create(plugin)">
-                                    <i class="icon fa fa-check" />
-                                    <span class="title">{{ titleCreateVisualization }}</span>
-                                </button>
-                            </div>
-                            <div v-else v-localize class="alert alert-danger">
-                                There is no suitable dataset in your current history which can be visualized with this
-                                plugin.
-                            </div>
-                        </td>
-                    </tr>
-                </table>
+                                <div v-else v-localize class="alert alert-danger">
+                                    There is no suitable dataset in your current history which can be visualized with
+                                    this plugin.
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
             </div>
-        </div>
+        </template>
     </div>
 </template>
 <script>
@@ -157,6 +163,14 @@ export default {
 @import "~scss/mixins.scss";
 
 .plugin-list {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .plugin-list-items {
+        overflow-y: scroll;
+    }
+
     .plugin-list-item {
         cursor: pointer;
         .plugin-list-image {
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index 2155bddb9c54..ff2b62533534 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -67,7 +67,7 @@ export const Activities = [
         mutable: false,
         optional: true,
         title: "Visualize",
-        to: "/visualizations",
+        to: null,
         tooltip: "Visualize datasets",
         visible: true,
     },

From 7fe1a68baa76d8fa0046629efed41a689cff5897 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 17:56:18 +0100
Subject: [PATCH 09/12] Update
 client/src/components/Panels/VisualizationPanel.vue

Co-authored-by: Alireza Heidari <itisalirh@gmail.com>
---
 client/src/components/Panels/VisualizationPanel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 13e0af3affd4..cd657ae5fb1d 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PluginList from "../Visualizations/PluginList.vue";
-import ActivityPanel from "./ActivityPanel.vue";
+import PluginList from "@/components/Visualizations/PluginList.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 </script>
 
 <template>

From e1e3f0734e593959e00db240429a97a18b0f7948 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 18:01:58 +0100
Subject: [PATCH 10/12] re-order imports

---
 client/src/components/Panels/VisualizationPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index cd657ae5fb1d..c38af166b961 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PluginList from "@/components/Visualizations/PluginList.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+import PluginList from "@/components/Visualizations/PluginList.vue";
 </script>
 
 <template>

From 668b746d225978111744143394b3c4250f325a9c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 18:05:50 +0100
Subject: [PATCH 11/12] fix non existent css property

---
 client/src/components/Visualizations/PluginList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Visualizations/PluginList.vue b/client/src/components/Visualizations/PluginList.vue
index 3fe75b533fef..e16a0fb18a2d 100644
--- a/client/src/components/Visualizations/PluginList.vue
+++ b/client/src/components/Visualizations/PluginList.vue
@@ -187,7 +187,7 @@ export default {
             color: $text-color;
         }
         .plugin-list-text {
-            word-wrap: break-word;
+            word-break: break-word;
         }
     }
     .plugin-list-item:hover {

From e2cd6f8b311521660516320c9b2887a148cb146b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 13 Feb 2024 18:06:29 +0100
Subject: [PATCH 12/12] only render scrollbar when needed

---
 client/src/components/Visualizations/PluginList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Visualizations/PluginList.vue b/client/src/components/Visualizations/PluginList.vue
index e16a0fb18a2d..2c9ac18ead3b 100644
--- a/client/src/components/Visualizations/PluginList.vue
+++ b/client/src/components/Visualizations/PluginList.vue
@@ -168,7 +168,7 @@ export default {
     height: 100%;
 
     .plugin-list-items {
-        overflow-y: scroll;
+        overflow-y: auto;
     }
 
     .plugin-list-item {