Remove legacy Visualization Mako and Controllers

client/src/api/schema/schema.ts

@@ -23551,11 +23551,6 @@ export interface components {
             specs?: {
                 [key: string]: unknown;
             } | null;
-            /**
-             * Target
-             * @description The target of the plugin.
-             */
-            target: string;
             /**
              * Title
              * @description The title of the plugin.

client/src/components/Dataset/DatasetView.vue

@@ -20,7 +20,7 @@ import Heading from "@/components/Common/Heading.vue";
 import DatasetAttributes from "@/components/DatasetInformation/DatasetAttributes.vue";
 import DatasetDetails from "@/components/DatasetInformation/DatasetDetails.vue";
 import VisualizationsList from "@/components/Visualizations/Index.vue";
-import VisualizationFrame from "@/components/Visualizations/VisualizationFrame.vue";
+import VisualizationDisplay from "@/components/Visualizations/VisualizationDisplay.vue";
 
 const datasetStore = useDatasetStore();
 const datatypeStore = useDatatypeStore();
@@ -189,7 +189,7 @@ watch(
             </BNavItem>
         </BNav>
         <div v-if="tab === 'preview'" class="tab-content-panel">
-            <VisualizationFrame
+            <VisualizationDisplay
                 v-if="preferredVisualization"
                 :dataset-id="datasetId"
                 :visualization="preferredVisualization"

client/src/components/Markdown/Sections/MarkdownGalaxy.vue

@@ -31,8 +31,8 @@ import ToolStd from "./Elements/ToolStd.vue";
 import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay.vue";
 import WorkflowImage from "./Elements/Workflow/WorkflowImage.vue";
 import WorkflowLicense from "./Elements/Workflow/WorkflowLicense.vue";
+import VisualizationWrapper from "./VisualizationWrapper.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
 import WorkflowInvocationInputs from "@/components/WorkflowInvocationState/WorkflowInvocationInputs.vue";
 import WorkflowInvocationOutputs from "@/components/WorkflowInvocationState/WorkflowInvocationOutputs.vue";
 

client/src/components/Markdown/Sections/MarkdownVisualization.vue

@@ -7,8 +7,8 @@ import { parseInput, parseOutput } from "@/components/Markdown/Utilities/parseIn
 import { stringify } from "@/components/Markdown/Utilities/stringify";
 import { useInvocationStore } from "@/stores/invocationStore";
 
+import VisualizationWrapper from "./VisualizationWrapper.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
 
 const DEFAULT_HEIGHT = 400;
 

client/src/components/Markdown/Sections/MarkdownVitessce.vue

@@ -7,8 +7,8 @@ import { parseInput, parseOutput } from "@/components/Markdown/Utilities/parseIn
 import { getAppRoot } from "@/onload";
 import { useInvocationStore } from "@/stores/invocationStore";
 
+import VisualizationWrapper from "./VisualizationWrapper.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
 
 const DEFAULT_HEIGHT = 400;
 

client/src/components/Markdown/Sections/VisualizationWrapper.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { faExpand, faWindowMaximize } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton } from "bootstrap-vue";
+import { computed, ref } from "vue";
+
+import VisualizationFrame from "@/components/Visualizations/VisualizationFrame.vue";
+
+const props = withDefaults(
+    defineProps<{
+        config: object;
+        name: string;
+        title?: string;
+        height?: number;
+    }>(),
+    {
+        height: 400,
+    },
+);
+
+const emit = defineEmits(["change", "load"]);
+
+const errorMessage = ref("");
+const expand = ref(false);
+
+const fixedHeight = computed(() =>
+    expand.value ? {} : { maxHeight: `${props.height}px`, minHeight: `${props.height}px` },
+);
+</script>
+
+<template>
+    <div v-if="errorMessage">
+        <BAlert variant="danger" show>{{ errorMessage }}</BAlert>
+    </div>
+    <div v-else class="position-relative h-100">
+        <div :class="`visualization-pop${expand ? 'out' : 'in'}`">
+            <VisualizationFrame
+                title="visualization"
+                :config="props.config"
+                :name="props.name"
+                :style="fixedHeight"
+                @change="emit('change', $event)"
+                @load="emit('load')" />
+        </div>
+        <BButton
+            class="visualization-popout-expand"
+            variant="link"
+            size="sm"
+            title="Maximize"
+            @click="expand = !expand">
+            <FontAwesomeIcon :icon="faExpand" />
+        </BButton>
+        <BButton
+            v-if="expand"
+            class="visualization-popout-close"
+            variant="link"
+            size="sm"
+            title="Minimize"
+            @click="expand = !expand">
+            <FontAwesomeIcon :icon="faWindowMaximize" />
+        </BButton>
+    </div>
+</template>
+
+<style lang="scss">
+@import "theme/blue.scss";
+
+.visualization-popin {
+    border: none;
+    width: 100%;
+    padding-top: 1.5rem;
+}
+.visualization-popout {
+    background: $white;
+    border: $border-default;
+    border-radius: $border-radius-base;
+    height: calc(100vh - 2rem);
+    left: 1rem;
+    padding-top: 1.5rem;
+    position: fixed;
+    top: 1rem;
+    width: calc(100vw - 2rem);
+    z-index: 1000;
+}
+.visualization-popout-close {
+    left: 1rem;
+    position: fixed;
+    margin: 0.2rem;
+    padding: 0 0.5rem;
+    top: 1rem;
+    z-index: 1001;
+}
+.visualization-popout-expand {
+    left: 0;
+    padding: 0 0.5rem;
+    position: absolute;
+    top: 0;
+}
+</style>

client/src/components/Visualizations/VisualizationDisplay.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+import { onMounted, ref } from "vue";
+import { onBeforeRouteLeave } from "vue-router/composables";
+
+import { GalaxyApi } from "@/api";
+
+import VisualizationFrame from "./VisualizationFrame.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+const emit = defineEmits(["load"]);
+
+export interface Props {
+    datasetId?: string;
+    visualization: string;
+    visualizationId?: string;
+}
+
+const props = defineProps<Props>();
+
+const errorMessage = ref("");
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+const isLoading = ref(true);
+const hasUnsavedChanges = ref(false);
+const visualizationConfig = ref();
+
+function handleLoad() {
+    isLoading.value = false;
+    emit("load");
+    setupChangeDetection();
+}
+
+function setupChangeDetection() {
+    const iframe = iframeRef.value;
+    if (!iframe?.contentWindow) {
+        return;
+    }
+
+    setTimeout(() => {
+        try {
+            const iframeDoc = iframe.contentDocument;
+            if (!iframeDoc) {
+                return;
+            }
+
+            const markAsChanged = () => {
+                if (!hasUnsavedChanges.value) {
+                    hasUnsavedChanges.value = true;
+                }
+            };
+
+            // Monitor DOM changes (skip initial load)
+            setTimeout(() => {
+                const observer = new MutationObserver(() => markAsChanged());
+                observer.observe(iframeDoc.body, {
+                    childList: true,
+                    subtree: true,
+                    characterData: true,
+                });
+            }, 2000);
+
+            // Monitor user input
+            ["input", "change", "keyup", "paste"].forEach((type) => {
+                iframeDoc.addEventListener(type, markAsChanged, true);
+            });
+        } catch (e) {
+            console.warn("Cannot monitor iframe for changes:", e);
+        }
+    }, 1000);
+}
+
+onBeforeRouteLeave((to, from, next) => {
+    if (hasUnsavedChanges.value && !window.confirm("Unsaved changes will be lost. Continue?")) {
+        next(false);
+    } else {
+        next();
+    }
+});
+
+onMounted(async () => {
+    if (props.visualizationId) {
+        const { data, error } = await GalaxyApi().GET("/api/visualizations/{id}", {
+            params: { path: { id: props.visualizationId } },
+        });
+        if (error) {
+            errorMessage.value = error.err_msg;
+        } else if (data?.latest_revision?.config) {
+            visualizationConfig.value = data.latest_revision.config;
+            errorMessage.value = "";
+        } else {
+            errorMessage.value = "Failed to access visualization details.";
+        }
+    } else {
+        visualizationConfig.value = { dataset_id: props.datasetId };
+    }
+
+    window.addEventListener("beforeunload", (e) => {
+        if (hasUnsavedChanges.value) {
+            e.preventDefault();
+            e.returnValue = "";
+        }
+    });
+});
+</script>
+
+<template>
+    <div class="position-relative h-100 overflow-hidden">
+        <BAlert v-if="errorMessage" variant="danger" show>
+            {{ errorMessage }}
+        </BAlert>
+        <div v-else-if="isLoading" class="iframe-loading bg-light">
+            <LoadingSpan message="Loading visualization" />
+        </div>
+        <VisualizationFrame
+            v-if="visualizationConfig"
+            :config="visualizationConfig"
+            :name="visualization"
+            @load="handleLoad" />
+    </div>
+</template>