Consolidate Visualization container, avoid using default iframe

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);
 }
 
 /**

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,
+                    });
                 },
             },
             {

client/src/components/Panels/VisualizationPanel.vue

@@ -2,6 +2,7 @@
 import { faEye } from "@fortawesome/free-solid-svg-icons";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref } from "vue";
+import { useRouter } from "vue-router/composables";
 
 import { useHistoryStore } from "@/stores/historyStore";
 import { absPath } from "@/utils/redirect";
@@ -22,6 +23,7 @@ interface Plugin {
 }
 
 const { currentHistoryId } = storeToRefs(useHistoryStore());
+const router = useRouter();
 
 const plugins: Ref<Array<Plugin>> = ref([]);
 const query = ref("");
@@ -42,15 +44,10 @@ const filteredPlugins = computed(() => {
 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);
-            }
-        }
+        router.push(`/visualizations/display?visualization=${currentPlugin.value.name}&dataset_id=${dataset.id}`, {
+            // @ts-ignore
+            title: dataset.name,
+        });
     }
 }
 

client/src/components/Visualizations/PluginList.vue

@@ -136,13 +136,9 @@ export default {
             }
         },
         create(plugin) {
-            const href = `${plugin.href}?dataset_id=${this.selected}`;
-            if (plugin.target == "_top") {
-                window.location.href = href;
-            } else {
-                const galaxyMainElement = document.getElementById("galaxy_main");
-                galaxyMainElement.setAttribute("src", href);
-            }
+            this.$router.push(`/visualizations/display?visualization=${plugin.name}&dataset_id=${this.selected}`, {
+                title: plugin.name,
+            });
         },
         match(plugin) {
             const query = this.search.toLowerCase();

client/src/components/Visualizations/VisualizationFrame.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { withPrefix } from "@/utils/redirect";
+
+export interface Props {
+    datasetId?: string;
+    visualization: string;
+    visualizationId?: string;
+}
+
+const props = defineProps<Props>();
+
+const srcWithRoot = computed(() => {
+    let url = "";
+    if (props.visualization === "trackster") {
+        if (props.datasetId) {
+            url = `/visualization/trackster?dataset_id=${props.datasetId}`;
+        } else {
+            url = `/visualization/trackster?id=${props.visualizationId}`;
+        }
+    } else {
+        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>
+
+<template>
+    <iframe
+        id="galaxy_visualization"
+        :src="srcWithRoot"
+        class="center-frame"
+        frameborder="0"
+        title="galaxy visualization frame"
+        width="100%"
+        height="100%" />
+</template>

client/src/entry/analysis/router.js

@@ -31,6 +31,7 @@ import { NotificationsPreferences } from "components/User/Notifications";
 import UserPreferences from "components/User/UserPreferences";
 import UserPreferencesForm from "components/User/UserPreferencesForm";
 import VisualizationsList from "components/Visualizations/Index";
+import VisualizationFrame from "components/Visualizations/VisualizationFrame";
 import VisualizationPublished from "components/Visualizations/VisualizationPublished";
 import HistoryInvocations from "components/Workflow/HistoryInvocations";
 import TrsImport from "components/Workflow/Import/TrsImport";
@@ -480,6 +481,16 @@ export function getRouter(Galaxy) {
                             datasetId: route.query.dataset_id,
                         }),
                     },
+                    {
+                        path: "visualizations/display",
+                        component: VisualizationFrame,
+                        name: "VisualizationsDisplay",
+                        props: (route) => ({
+                            datasetId: route.query.dataset_id,
+                            visualization: route.query.visualization,
+                            visualizationId: route.query.visualization_id,
+                        }),
+                    },
                     {
                         path: "visualizations/edit",
                         component: FormGeneric,

lib/galaxy/selenium/navigates_galaxy.py

@@ -54,6 +54,7 @@
 RETRY_DURING_TRANSITIONS_ATTEMPTS_DEFAULT = 10
 
 GALAXY_MAIN_FRAME_ID = "galaxy_main"
+GALAXY_VISUALIZATION_FRAME_ID = "galaxy_visualization"
 
 WaitType = collections.namedtuple("WaitType", ["name", "default_length"])
 
@@ -306,6 +307,15 @@ def main_panel(self):
         finally:
             self.driver.switch_to.default_content()
 
+    @contextlib.contextmanager
+    def visualization_panel(self):
+        """Decorator to operate within the context of Galaxy's visualization frame."""
+        try:
+            self.driver.switch_to.frame(GALAXY_VISUALIZATION_FRAME_ID)
+            yield
+        finally:
+            self.driver.switch_to.default_content()
+
     def api_get(self, endpoint, data=None, raw=False):
         data = data or {}
         full_url = self.build_url(f"api/{endpoint}", for_selenium=False)

lib/galaxy/webapps/galaxy/buildapp.py

@@ -225,6 +225,7 @@ def app_pair(global_conf, load_app_kwds=None, wsgi_preflight=True, **kwargs):
     webapp.add_client_route("/welcome/new")
     webapp.add_client_route("/visualizations")
     webapp.add_client_route("/visualizations/edit")
+    webapp.add_client_route("/visualizations/display{path:.*?}")
     webapp.add_client_route("/visualizations/sharing")
     webapp.add_client_route("/visualizations/list_published")
     webapp.add_client_route("/visualizations/list")

lib/galaxy_test/selenium/test_visualizations.py

@@ -27,7 +27,7 @@ def test_charts_image_annotate(self):
         self.screenshot("visualization_plugins_png")
         self.components.visualization.plugin_item(id="annotate_image").wait_for_and_click()
 
-        with self.main_panel():
+        with self.visualization_panel():
             self.wait_for_selector("#image-annotate")
             self.screenshot("visualization_plugin_charts_image_annotate")
 
@@ -44,6 +44,6 @@ def test_charts_nvd3_bar(self):
         self.screenshot("visualization_plugins_sam")
         self.components.visualization.plugin_item(id="nvd3_bar").wait_for_and_click()
 
-        with self.main_panel():
+        with self.visualization_panel():
             self.wait_for_selector("g.nvd3")
             self.screenshot("visualization_plugin_charts_nvd3_bar_landing")