From 82b7b30b38b733881c172a570f7dcd9ebbb94870 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 7 Apr 2024 07:08:47 +0300
Subject: [PATCH 01/15] Add pages activity

---
 client/src/components/plugins/icons.js |  2 ++
 client/src/stores/activitySetup.ts     | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/client/src/components/plugins/icons.js b/client/src/components/plugins/icons.js
index a7a4224b70c..f48f0df0159 100644
--- a/client/src/components/plugins/icons.js
+++ b/client/src/components/plugins/icons.js
@@ -24,6 +24,7 @@ import {
     faEye,
     faFile,
     faFileArchive,
+    faFileContract,
     faFileExport,
     faFilter,
     faFolder,
@@ -76,6 +77,7 @@ library.add(
     faExternalLinkAlt,
     faEye,
     faFileArchive,
+    faFileContract,
     faFileExport,
     faFilter,
     faFile,
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index 8cc09c12784..4336729659e 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -111,7 +111,19 @@ export const Activities = [
         title: "Datasets",
         tooltip: "Show all datasets",
         to: "/datasets/list",
-        visible: false,
+        visible: true,
+    },
+    {
+        anonymous: false,
+        description: "Display and create new Pages.",
+        icon: "fa-file-contract",
+        id: "pages",
+        mutable: false,
+        optional: true,
+        title: "Pages",
+        tooltip: "Show all pages",
+        to: "/pages/list",
+        visible: true,
     },
 ];
 

From 88a10cf634b606e4e5ed07b3c2fdefb71f144fd0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 7 Apr 2024 07:22:18 +0300
Subject: [PATCH 02/15] Always display active interactive tools activity

---
 client/src/stores/activitySetup.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index 4336729659e..fd1f2612c2e 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -11,7 +11,7 @@ export const Activities = [
         icon: "fa-laptop",
         id: "interactivetools",
         mutable: false,
-        optional: true,
+        optional: false,
         title: "Interactive Tools",
         tooltip: "Show active interactive tools",
         to: "/interactivetool_entry_points/list",

From 3642c4c3e2b4428bec6090ccd576aee79606806f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2024 08:14:51 +0300
Subject: [PATCH 03/15] Add title and panel link to visualizations activity

---
 client/src/components/Panels/VisualizationPanel.vue | 3 ++-
 client/src/stores/activitySetup.ts                  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index c38af166b96..a1d7ab4cb7d 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -4,7 +4,8 @@ import PluginList from "@/components/Visualizations/PluginList.vue";
 </script>
 
 <template>
-    <ActivityPanel title="Visualizations">
+    <ActivityPanel title="Visualizations" go-to-all-title="Saved Visualizations" href="/visualizations/list">
+        <h3>Create Visualization</h3>
         <PluginList />
     </ActivityPanel>
 </template>
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index fd1f2612c2e..aa15c8ab564 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -72,7 +72,7 @@ export const Activities = [
         id: "visualizations",
         mutable: false,
         optional: true,
-        title: "Visualize",
+        title: "Visualization",
         to: null,
         tooltip: "Visualize datasets",
         visible: true,

From 15546954194b8a559553034b3a6bcbfb3dd26b0c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2024 11:09:17 +0300
Subject: [PATCH 04/15] Add plugin request to visualizations activity

---
 .../components/Panels/VisualizationPanel.vue    | 17 ++++++++++++++++-
 client/src/utils/url.ts                         |  2 +-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index a1d7ab4cb7d..4e5766aebe1 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -1,11 +1,26 @@
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 import PluginList from "@/components/Visualizations/PluginList.vue";
+import { urlData } from "@/utils/url";
+
+const plugins = ref([]);
+
+onMounted(() => {
+    getPlugins();
+});
+
+async function getPlugins() {
+    plugins.value = await urlData({ url: "/api/plugins" });
+}
+
 </script>
 
 <template>
     <ActivityPanel title="Visualizations" go-to-all-title="Saved Visualizations" href="/visualizations/list">
         <h3>Create Visualization</h3>
-        <PluginList />
+        <div class="card-container">
+            stuff
+        </div>
     </ActivityPanel>
 </template>
diff --git a/client/src/utils/url.ts b/client/src/utils/url.ts
index 5b290d7d7b5..bc537c30382 100644
--- a/client/src/utils/url.ts
+++ b/client/src/utils/url.ts
@@ -5,7 +5,7 @@ import { rethrowSimple } from "@/utils/simple-error";
 
 export interface UrlDataOptions {
     url: string;
-    headers: Record<string, string>;
+    headers?: Record<string, string>;
     params?: Record<string, string>;
     errorSimplify?: boolean;
 }

From e5339823084a2216bd1f3d56ade49ab06ba44aba Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2024 14:14:38 +0300
Subject: [PATCH 05/15] Adjust panel style, apply to visualizations activity

---
 .../ActivityBar/ActivitySettings.vue          |  2 +-
 .../src/components/Panels/ActivityPanel.vue   | 14 +++-
 .../components/Panels/VisualizationPanel.vue  | 47 +++++++++++--
 client/src/style/scss/base.scss               | 68 +------------------
 client/src/style/scss/panels.scss             | 65 ++++++++++++++++++
 client/src/style/scss/ui.scss                 |  4 ++
 6 files changed, 123 insertions(+), 77 deletions(-)
 create mode 100644 client/src/style/scss/panels.scss

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index b5b81e4f953..5e7bfca62b9 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -61,7 +61,7 @@ function onQuery(newQuery: string) {
 <template>
     <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-if="foundActivities" class="activity-settings-content mt-2">
             <div v-for="activity in filteredActivities" :key="activity.id">
                 <button class="activity-settings-item p-2 cursor-pointer" @click="onClick(activity)">
                     <div class="d-flex justify-content-between align-items-start">
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 707e9dcec23..05bd06425fc 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -59,7 +59,6 @@ const emit = defineEmits(["goToAll"]);
 
             .activity-panel-heading {
                 margin: 0;
-                padding-left: 0.25rem;
             }
         }
     }
@@ -69,7 +68,18 @@ const emit = defineEmits(["goToAll"]);
         flex-direction: column;
         flex-grow: 1;
         overflow-y: hidden;
-        padding: 0.2rem 0.2rem;
+        button:first-child {
+            background: none;
+            border: none;
+            text-align: left;
+            transition: none;
+            width: 100%;
+            border-color: transparent;
+        }
+        button:first-child:hover {
+            background: $brand-primary;
+            color: $brand-light;
+        }
     }
 
     .activity-panel-footer {
diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 4e5766aebe1..68b988fb9aa 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -1,10 +1,19 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
-import PluginList from "@/components/Visualizations/PluginList.vue";
+import { onMounted, type Ref, ref } from "vue";
+
+import { absPath } from "@/utils/redirect";
 import { urlData } from "@/utils/url";
 
-const plugins = ref([]);
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+
+interface Plugin {
+    description: string;
+    name: string;
+    html: string;
+    logo?: string;
+}
+
+const plugins: Ref<Array<Plugin>> = ref([]);
 
 onMounted(() => {
     getPlugins();
@@ -13,14 +22,38 @@ onMounted(() => {
 async function getPlugins() {
     plugins.value = await urlData({ url: "/api/plugins" });
 }
-
 </script>
 
 <template>
     <ActivityPanel title="Visualizations" go-to-all-title="Saved Visualizations" href="/visualizations/list">
         <h3>Create Visualization</h3>
-        <div class="card-container">
-            stuff
+        <div class="overflow-y">
+            <div v-for="plugin in plugins" :key="plugin.name">
+                <button :data-plugin-name="plugin.name">
+                    <div class="d-flex">
+                        <div class="plugin-thumbnail mr-3">
+                            <img v-if="plugin.logo" alt="visualization" :src="absPath(plugin.logo)" />
+                            <div v-else class="fa fa-eye" />
+                        </div>
+                        <div class="text-break">
+                            <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
+                            <div class="plugin-list-text">{{ plugin.description }}</div>
+                        </div>
+                    </div>
+                </button>
+            </div>
         </div>
     </ActivityPanel>
 </template>
+
+<style>
+.plugin-thumbnail {
+    img {
+        width: 2rem;
+    }
+    div {
+        font-size: 1.5rem;
+        padding: 0.2rem;
+    }
+}
+</style>
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 0b08c0aa0af..6532c64b2c8 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -42,6 +42,7 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "peek-columns.scss";
 @import "dataset.scss";
 @import "list-item.scss";
+@import "panels.scss";
 
 // ==== Select2 ====
 /* fix for zero width select2 - remove when fixed there */
@@ -124,73 +125,6 @@ body {
     display: none;
 }
 
-// ==== Unified panel styles ====
-.unified-panel {
-    display: flex;
-    flex-flow: column;
-    background: $panel-bg-color;
-    height: 100%;
-    overflow: auto;
-}
-.unified-panel-header {
-    @extend .unselectable;
-    @extend .px-3;
-    @extend .d-flex;
-    height: $panel_header_height;
-    font-size: 1rem;
-    font-weight: bold;
-    align-items: center;
-    color: $panel-header-text-color;
-    background: $panel-bg-header-color;
-    a {
-        color: $panel-header-text-color;
-    }
-    .unified-panel-header-inner {
-        @extend .w-100;
-        min-width: max-content;
-        align-items: center;
-        justify-content: space-between;
-        display: flex;
-    }
-    .panel-header-buttons {
-        order: 9999;
-        @extend .d-flex;
-        .panel-header-button {
-            text-align: center;
-            &:not(:last-child) {
-                @extend .mr-2;
-            }
-            &:hover {
-                color: $brand-info;
-            }
-        }
-        .panel-header-button-toolbox {
-            color: $brand-dark;
-            flex: 1;
-            @extend .p-1;
-            text-align: center;
-            font-size: $h4-font-size;
-            align-items: center;
-            &:hover {
-                color: $brand-info;
-                background-color: $brand-light;
-                text-decoration: none !important;
-                border-color: $brand-light;
-            }
-        }
-    }
-}
-.unified-panel-controls {
-    @extend .px-3;
-}
-.unified-panel-body {
-    @extend .p-0;
-    @extend .w-100;
-    @extend .h-100;
-    @extend .overflow-auto;
-    flex: 1;
-}
-
 // State colors
 $galaxy-state-border: (
     "new": $state-default-border,
diff --git a/client/src/style/scss/panels.scss b/client/src/style/scss/panels.scss
new file mode 100644
index 00000000000..c6ed1f34b91
--- /dev/null
+++ b/client/src/style/scss/panels.scss
@@ -0,0 +1,65 @@
+.unified-panel {
+    display: flex;
+    flex-flow: column;
+    background: $panel-bg-color;
+    height: 100%;
+    overflow: auto;
+}
+.unified-panel-header {
+    @extend .unselectable;
+    @extend .px-3;
+    @extend .d-flex;
+    height: $panel_header_height;
+    font-size: 1rem;
+    font-weight: bold;
+    align-items: center;
+    color: $panel-header-text-color;
+    background: $panel-bg-header-color;
+    a {
+        color: $panel-header-text-color;
+    }
+    .unified-panel-header-inner {
+        @extend .w-100;
+        min-width: max-content;
+        align-items: center;
+        justify-content: space-between;
+        display: flex;
+    }
+    .panel-header-buttons {
+        order: 9999;
+        @extend .d-flex;
+        .panel-header-button {
+            text-align: center;
+            &:not(:last-child) {
+                @extend .mr-2;
+            }
+            &:hover {
+                color: $brand-info;
+            }
+        }
+        .panel-header-button-toolbox {
+            color: $brand-dark;
+            flex: 1;
+            @extend .p-1;
+            text-align: center;
+            font-size: $h4-font-size;
+            align-items: center;
+            &:hover {
+                color: $brand-info;
+                background-color: $brand-light;
+                text-decoration: none !important;
+                border-color: $brand-light;
+            }
+        }
+    }
+}
+.unified-panel-controls {
+    @extend .px-3;
+}
+.unified-panel-body {
+    @extend .p-0;
+    @extend .w-100;
+    @extend .h-100;
+    @extend .overflow-auto;
+    flex: 1;
+}
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index ec436450cb7..007812dbc95 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -40,6 +40,10 @@
     overflow: auto !important;
 }
 
+.overflow-y {
+    overflow-y: auto !important;
+}
+
 // utility class to set word wrap to normal
 .word-wrap-normal {
     word-wrap: normal;

From c839c3ae90679b0e1a26a94517cf1d7bf0e1bd4b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2024 15:37:59 +0300
Subject: [PATCH 06/15] Add search field to visualizations activity

---
 .../components/Panels/VisualizationPanel.vue  | 44 +++++++++++++------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 68b988fb9aa..076f31dd57f 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { onMounted, type Ref, ref } from "vue";
+import { computed, onMounted, type Ref, ref } from "vue";
 
 import { absPath } from "@/utils/redirect";
 import { urlData } from "@/utils/url";
 
+import DelayedInput from "@/components/Common/DelayedInput.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 
 interface Plugin {
@@ -14,6 +15,17 @@ interface Plugin {
 }
 
 const plugins: Ref<Array<Plugin>> = ref([]);
+const query = ref("");
+
+const filteredPlugins = computed(() => {
+    const queryLower = query.value.toLowerCase();
+    return plugins.value.filter(
+        (plugin) =>
+            !query.value ||
+            plugin.html.toLowerCase().includes(queryLower) ||
+            (plugin.description && plugin.description.toLowerCase().includes(queryLower))
+    );
+});
 
 onMounted(() => {
     getPlugins();
@@ -27,21 +39,25 @@ async function getPlugins() {
 <template>
     <ActivityPanel title="Visualizations" go-to-all-title="Saved Visualizations" href="/visualizations/list">
         <h3>Create Visualization</h3>
-        <div class="overflow-y">
-            <div v-for="plugin in plugins" :key="plugin.name">
-                <button :data-plugin-name="plugin.name">
-                    <div class="d-flex">
-                        <div class="plugin-thumbnail mr-3">
-                            <img v-if="plugin.logo" alt="visualization" :src="absPath(plugin.logo)" />
-                            <div v-else class="fa fa-eye" />
+        <DelayedInput :delay="100" placeholder="Search visualizations" @change="query = $event" />
+        <div class="overflow-y mt-2">
+            <div v-if="filteredPlugins.length > 0">
+                <div v-for="plugin in filteredPlugins" :key="plugin.name">
+                    <button :data-plugin-name="plugin.name">
+                        <div class="d-flex">
+                            <div class="plugin-thumbnail mr-3">
+                                <img v-if="plugin.logo" alt="visualization" :src="absPath(plugin.logo)" />
+                                <div v-else class="fa fa-eye" />
+                            </div>
+                            <div class="text-break">
+                                <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
+                                <div class="plugin-list-text">{{ plugin.description }}</div>
+                            </div>
                         </div>
-                        <div class="text-break">
-                            <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
-                            <div class="plugin-list-text">{{ plugin.description }}</div>
-                        </div>
-                    </div>
-                </button>
+                    </button>
+                </div>
             </div>
+            <BAlert v-else v-localize variant="info" show> No matching visualization found. </BAlert>
         </div>
     </ActivityPanel>
 </template>

From 1b2b2aab331d02e5b23a3764d8f6fd2a7addff95 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2024 16:06:37 +0300
Subject: [PATCH 07/15] Add loading span to visualiztions activity panel

---
 client/src/components/Panels/VisualizationPanel.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 076f31dd57f..599fb3c8177 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -6,6 +6,7 @@ import { urlData } from "@/utils/url";
 
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Plugin {
     description: string;
@@ -16,6 +17,7 @@ interface Plugin {
 
 const plugins: Ref<Array<Plugin>> = ref([]);
 const query = ref("");
+const isLoading = ref(true);
 
 const filteredPlugins = computed(() => {
     const queryLower = query.value.toLowerCase();
@@ -33,6 +35,7 @@ onMounted(() => {
 
 async function getPlugins() {
     plugins.value = await urlData({ url: "/api/plugins" });
+    isLoading.value = false;
 }
 </script>
 
@@ -41,7 +44,8 @@ async function getPlugins() {
         <h3>Create Visualization</h3>
         <DelayedInput :delay="100" placeholder="Search visualizations" @change="query = $event" />
         <div class="overflow-y mt-2">
-            <div v-if="filteredPlugins.length > 0">
+            <LoadingSpan v-if="isLoading" message="Loading visualizations"/>
+            <div v-else-if="filteredPlugins.length > 0">
                 <div v-for="plugin in filteredPlugins" :key="plugin.name">
                     <button :data-plugin-name="plugin.name">
                         <div class="d-flex">

From 8ac7e20943c7d9c92a085616d13cc3558fad1dc0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2024 16:20:24 +0300
Subject: [PATCH 08/15] Use icon component instead of class for thumbnail
 placeholder

---
 client/src/components/Panels/VisualizationPanel.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 599fb3c8177..3e3298bdf0a 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -3,7 +3,7 @@ import { computed, onMounted, type Ref, ref } from "vue";
 
 import { absPath } from "@/utils/redirect";
 import { urlData } from "@/utils/url";
-
+import { faEye } from "@fortawesome/free-solid-svg-icons";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -51,7 +51,7 @@ async function getPlugins() {
                         <div class="d-flex">
                             <div class="plugin-thumbnail mr-3">
                                 <img v-if="plugin.logo" alt="visualization" :src="absPath(plugin.logo)" />
-                                <div v-else class="fa fa-eye" />
+                                <icon v-else :icon="faEye" class="plugin-icon"/>
                             </div>
                             <div class="text-break">
                                 <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
@@ -66,12 +66,12 @@ async function getPlugins() {
     </ActivityPanel>
 </template>
 
-<style>
+<style lang="scss">
 .plugin-thumbnail {
     img {
         width: 2rem;
     }
-    div {
+    .plugin-icon {
         font-size: 1.5rem;
         padding: 0.2rem;
     }

From 4c2611fab7394ab8cbfd867ac1505d1c243ee963 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2024 16:53:11 +0300
Subject: [PATCH 09/15] Add visualization creation handler to visualizations
 activity panel

---
 .../components/Panels/VisualizationPanel.vue  | 54 +++++++++++++++----
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 3e3298bdf0a..92c78a95b30 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -1,23 +1,33 @@
 <script setup lang="ts">
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref } from "vue";
 
+import { useHistoryStore } from "@/stores/historyStore";
 import { absPath } from "@/utils/redirect";
 import { urlData } from "@/utils/url";
-import { faEye } from "@fortawesome/free-solid-svg-icons";
+
 import DelayedInput from "@/components/Common/DelayedInput.vue";
-import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+import DataDialog from "@/components/DataDialog/DataDialog.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 
 interface Plugin {
     description: string;
-    name: string;
+    href: string;
     html: string;
     logo?: string;
+    name: string;
+    target?: string;
 }
 
+const { currentHistoryId } = storeToRefs(useHistoryStore());
+
 const plugins: Ref<Array<Plugin>> = ref([]);
 const query = ref("");
 const isLoading = ref(true);
+const currentPlugin: Ref<Plugin | null> = ref(null);
+const showDataDialog = ref(false);
 
 const filteredPlugins = computed(() => {
     const queryLower = query.value.toLowerCase();
@@ -29,14 +39,34 @@ const filteredPlugins = computed(() => {
     );
 });
 
-onMounted(() => {
-    getPlugins();
-});
+function createVisualization(dataset: any) {
+    showDataDialog.value = false;
+    if (currentPlugin.value) {
+        const href = `${currentPlugin.value.href}?dataset_id=${dataset.id}`;
+        if (currentPlugin.value.target == "_top") {
+            window.location.href = href;
+        } else {
+            const galaxyMainElement = document.getElementById("galaxy_main");
+            if (galaxyMainElement) {
+                galaxyMainElement.setAttribute("src", href);
+            }
+        }
+    }
+}
+
+function selectVisualization(plugin: Plugin) {
+    currentPlugin.value = plugin;
+    showDataDialog.value = true;
+}
 
 async function getPlugins() {
     plugins.value = await urlData({ url: "/api/plugins" });
     isLoading.value = false;
 }
+
+onMounted(() => {
+    getPlugins();
+});
 </script>
 
 <template>
@@ -44,14 +74,14 @@ async function getPlugins() {
         <h3>Create Visualization</h3>
         <DelayedInput :delay="100" placeholder="Search visualizations" @change="query = $event" />
         <div class="overflow-y mt-2">
-            <LoadingSpan v-if="isLoading" message="Loading visualizations"/>
+            <LoadingSpan v-if="isLoading" message="Loading visualizations" />
             <div v-else-if="filteredPlugins.length > 0">
                 <div v-for="plugin in filteredPlugins" :key="plugin.name">
-                    <button :data-plugin-name="plugin.name">
+                    <button :data-plugin-name="plugin.name" @click="selectVisualization(plugin)">
                         <div class="d-flex">
                             <div class="plugin-thumbnail mr-3">
                                 <img v-if="plugin.logo" alt="visualization" :src="absPath(plugin.logo)" />
-                                <icon v-else :icon="faEye" class="plugin-icon"/>
+                                <icon v-else :icon="faEye" class="plugin-icon" />
                             </div>
                             <div class="text-break">
                                 <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
@@ -63,6 +93,12 @@ async function getPlugins() {
             </div>
             <BAlert v-else v-localize variant="info" show> No matching visualization found. </BAlert>
         </div>
+        <DataDialog
+            v-if="showDataDialog"
+            format=""
+            :history="currentHistoryId"
+            @onOk="createVisualization"
+            @onCancel="showDataDialog = false" />
     </ActivityPanel>
 </template>
 

From 94566a05248aa1069ad009aa4d00f212b1735823 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 8 Apr 2024 17:03:41 +0300
Subject: [PATCH 10/15] v-show requires wrapping router-view?

---
 client/src/entry/analysis/modules/Analysis.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index df91d66c465..7a7cc1bf718 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -40,7 +40,9 @@ onUnmounted(() => {
         <ActivityBar />
         <div id="center" class="overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
-            <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
+            <div v-show="!showCenter" class="h-100">
+                <router-view :key="$route.fullPath" class="h-100" />
+            </div>
         </div>
         <FlexPanel v-if="showPanels" side="right">
             <HistoryIndex />

From 3e7105f70bc33f34c55d92036acaad0cbd0a2a36 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 10 Apr 2024 08:26:59 +0300
Subject: [PATCH 11/15] Remove create visualization button from visualizations
 grid

---
 client/src/components/Grid/GridVisualization.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/client/src/components/Grid/GridVisualization.vue b/client/src/components/Grid/GridVisualization.vue
index 6c096572d59..0ba424bd10e 100644
--- a/client/src/components/Grid/GridVisualization.vue
+++ b/client/src/components/Grid/GridVisualization.vue
@@ -28,12 +28,6 @@ withDefaults(defineProps<Props>(), {
     <div class="d-flex flex-column">
         <div class="d-flex">
             <Heading h1 separator inline size="xl" class="flex-grow-1 mb-2">Visualizations</Heading>
-            <div v-if="!userStore.isAnonymous">
-                <BButton size="sm" variant="outline-primary" to="/visualizations">
-                    <Icon :icon="faPlus" />
-                    <span v-localize>Create Visualization</span>
-                </BButton>
-            </div>
         </div>
         <BNav pills justified class="mb-2">
             <BNavItem

From 5f69691f4204a1416d0aec5eb33d6b7854a46511 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 10 Apr 2024 08:50:27 +0300
Subject: [PATCH 12/15] Use light gray to highlight on hover

---
 client/src/components/ActivityBar/ActivitySettings.vue | 10 +---------
 client/src/components/Panels/ActivityPanel.vue         |  3 +--
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 5e7bfca62b9..944593f6910 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -134,14 +134,6 @@ function onQuery(newQuery: string) {
     }
 }
 .activity-settings-item:hover {
-    background: $brand-primary;
-    color: $brand-light;
-    border-radius: $border-radius-large;
-    .icon-check {
-        color: $brand-light;
-    }
-    .button-delete {
-        color: $brand-light;
-    }
+    background: $gray-200;
 }
 </style>
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index 05bd06425fc..0e0330b8774 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -77,8 +77,7 @@ const emit = defineEmits(["goToAll"]);
             border-color: transparent;
         }
         button:first-child:hover {
-            background: $brand-primary;
-            color: $brand-light;
+            background: $gray-200;
         }
     }
 

From ec70b7a5c6eb1d53bc0d409edb6140673526e755 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 10 Apr 2024 10:28:15 +0300
Subject: [PATCH 13/15] Use consistent font size in side panel

---
 client/src/components/ActivityBar/ActivitySettings.vue | 8 ++++----
 client/src/components/Panels/VisualizationPanel.vue    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 944593f6910..7cb15ef9f52 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -77,12 +77,12 @@ function onQuery(newQuery: string) {
                                 icon="fas fa-check-square"
                                 fa-fw />
                             <FontAwesomeIcon v-else class="mr-1" icon="far fa-square" fa-fw />
-                            <small>
+                            <span>
                                 <icon class="mr-1" :icon="activity.icon" />
                                 <span v-localize class="font-weight-bold">{{
                                     activity.title || "No title available"
                                 }}</span>
-                            </small>
+                            </span>
                         </span>
                         <b-button
                             v-if="activity.mutable"
@@ -94,9 +94,9 @@ function onQuery(newQuery: string) {
                             <FontAwesomeIcon icon="fa-trash" fa-fw />
                         </b-button>
                     </div>
-                    <small v-localize>
+                    <div v-localize>
                         {{ activity.description || "No description available" }}
-                    </small>
+                    </div>
                 </button>
             </div>
         </div>
diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 92c78a95b30..5d11937303f 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -79,7 +79,7 @@ onMounted(() => {
                 <div v-for="plugin in filteredPlugins" :key="plugin.name">
                     <button :data-plugin-name="plugin.name" @click="selectVisualization(plugin)">
                         <div class="d-flex">
-                            <div class="plugin-thumbnail mr-3">
+                            <div class="plugin-thumbnail mr-2">
                                 <img v-if="plugin.logo" alt="visualization" :src="absPath(plugin.logo)" />
                                 <icon v-else :icon="faEye" class="plugin-icon" />
                             </div>

From e223781fdf2d5ba7160c35318418fedfc91f10ec Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 10 Apr 2024 10:31:37 +0300
Subject: [PATCH 14/15] Mute description text in side panel items

---
 client/src/components/ActivityBar/ActivitySettings.vue | 2 +-
 client/src/components/Panels/VisualizationPanel.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index 7cb15ef9f52..16c596e531f 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -94,7 +94,7 @@ function onQuery(newQuery: string) {
                             <FontAwesomeIcon icon="fa-trash" fa-fw />
                         </b-button>
                     </div>
-                    <div v-localize>
+                    <div v-localize class="text-muted">
                         {{ activity.description || "No description available" }}
                     </div>
                 </button>
diff --git a/client/src/components/Panels/VisualizationPanel.vue b/client/src/components/Panels/VisualizationPanel.vue
index 5d11937303f..9297032bfc3 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -85,7 +85,7 @@ onMounted(() => {
                             </div>
                             <div class="text-break">
                                 <div class="plugin-list-title font-weight-bold">{{ plugin.html }}</div>
-                                <div class="plugin-list-text">{{ plugin.description }}</div>
+                                <div class="plugin-list-text text-muted">{{ plugin.description }}</div>
                             </div>
                         </div>
                     </button>

From 74c243755bc4cfb6b97ff8b6fd31e1de51dd7e2b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 11 Apr 2024 08:27:37 +0300
Subject: [PATCH 15/15] Reduce size of visualization logo placeholder icon

---
 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 9297032bfc3..e20a115ddad 100644
--- a/client/src/components/Panels/VisualizationPanel.vue
+++ b/client/src/components/Panels/VisualizationPanel.vue
@@ -108,8 +108,8 @@ onMounted(() => {
         width: 2rem;
     }
     .plugin-icon {
-        font-size: 1.5rem;
-        padding: 0.2rem;
+        font-size: 1.3rem;
+        padding: 0.3rem;
     }
 }
 </style>