From 03342bbda5e307395a11510356df7b5253f04ef7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 18 Apr 2024 16:39:26 +0300
Subject: [PATCH] Use visualization frame to display newly created and saved
 visualizations

---
 client/src/components/Grid/GridList.vue         |  5 +++--
 .../components/Grid/configs/visualizations.ts   |  8 +++-----
 .../Visualizations/VisualizationFrame.vue       | 17 ++++++++++++++---
 client/src/entry/analysis/router.js             |  1 +
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
index 5669e46481c3..0e278b99d203 100644
--- a/client/src/components/Grid/GridList.vue
+++ b/client/src/components/Grid/GridList.vue
@@ -169,8 +169,9 @@ async function onOperation(operation: Operation, rowData: RowData) {
 /**
  * Handle router push request emitted by grid module
  */
-function onRouterPush(route: string) {
-    router.push(route);
+function onRouterPush(route: string, options = {}) {
+    // @ts-ignore
+    router.push(route, options);
 }
 
 /**
diff --git a/client/src/components/Grid/configs/visualizations.ts b/client/src/components/Grid/configs/visualizations.ts
index 27ad0a4ffc76..08d657b89dbd 100644
--- a/client/src/components/Grid/configs/visualizations.ts
+++ b/client/src/components/Grid/configs/visualizations.ts
@@ -69,11 +69,9 @@ const fields: FieldArray = [
                 icon: faEye,
                 condition: (data: VisualizationEntry) => !data.deleted,
                 handler: (data: VisualizationEntry) => {
-                    if (data.type === "trackster") {
-                        window.location.href = withPrefix(`/visualization/${data.type}?id=${data.id}`);
-                    } else {
-                        window.location.href = withPrefix(`/plugins/visualizations/${data.type}/saved?id=${data.id}`);
-                    }
+                    emit(`/visualizations/display?visualization=${data.type}&visualization_id=${data.id}`, {
+                        title: data.title,
+                    });
                 },
             },
             {
diff --git a/client/src/components/Visualizations/VisualizationFrame.vue b/client/src/components/Visualizations/VisualizationFrame.vue
index 21f68c1946b1..0028cfecf326 100644
--- a/client/src/components/Visualizations/VisualizationFrame.vue
+++ b/client/src/components/Visualizations/VisualizationFrame.vue
@@ -4,18 +4,29 @@ import { computed } from "vue";
 import { withPrefix } from "@/utils/redirect";
 
 export interface Props {
-    datasetId: string;
+    datasetId?: string;
     visualization: string;
+    visualizationId?: string;
 }
 
 const props = defineProps<Props>();
 
 const srcWithRoot = computed(() => {
+    let url = "";
     if (props.visualization === "trackster") {
-        return withPrefix(`/visualization/trackster?dataset_id=${props.datasetId}`);
+        if (props.datasetId) {
+            url = `/visualization/trackster?dataset_id=${props.datasetId}`;
+        } else {
+            url = `/visualization/trackster?id=${props.visualizationId}`;
+        }
     } else {
-        return withPrefix(`/plugins/visualizations/${props.visualization}/show?dataset_id=${props.datasetId}`);
+        if (props.datasetId) {
+            url = `/plugins/visualizations/${props.visualization}/show?dataset_id=${props.datasetId}`;
+        } else {
+            url = `/plugins/visualizations/${props.visualization}/saved?id=${props.visualizationId}`;
+        }
     }
+    return withPrefix(url);
 });
 </script>
 
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 83f49fde0389..6ef8667a5a1b 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -488,6 +488,7 @@ export function getRouter(Galaxy) {
                         props: (route) => ({
                             datasetId: route.query.dataset_id,
                             visualization: route.query.visualization,
+                            visualizationId: route.query.visualization_id,
                         }),
                     },
                     {