Use visualization frame to display newly created and saved visualizat…

…ions
guerler · Apr 23, 2024 · 03342bb · 03342bb
1 parent 0bf88c5
commit 03342bb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -488,6 +488,7 @@ export function getRouter(Galaxy) {
                         props: (route) => ({
                             datasetId: route.query.dataset_id,
                             visualization: route.query.visualization,
+                            visualizationId: route.query.visualization_id,
                         }),
                     },
                     {