From 125cc48f660f8b0f55c983e15954d77daeabfc73 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 16:05:00 -0400
Subject: [PATCH 01/27] Add Galaxy Visualization and Vega Markdown Wrappers

---
 .../Markdown/Sections/MarkdownVega.vue        |  42 ++++++
 .../Sections/MarkdownVisualization.vue        | 128 ++++++++++++++++++
 .../Markdown/Sections/SectionWrapper.vue      |  13 +-
 3 files changed, 181 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/Markdown/Sections/MarkdownVega.vue
 create mode 100644 client/src/components/Markdown/Sections/MarkdownVisualization.vue

diff --git a/client/src/components/Markdown/Sections/MarkdownVega.vue b/client/src/components/Markdown/Sections/MarkdownVega.vue
new file mode 100644
index 000000000000..1c49699cdbf5
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownVega.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
+
+const props = defineProps<{
+    content: string;
+}>();
+
+const errorMessage = ref("");
+const spec = ref({});
+
+function render() {
+    try {
+        errorMessage.value = "";
+        spec.value = {
+            ...JSON.parse(props.content),
+            width: "container",
+        };
+    } catch (e: any) {
+        errorMessage.value = String(e);
+        spec.value = {};
+    }
+}
+
+watch(
+    () => props.content,
+    () => {
+        render();
+    },
+    { immediate: true }
+);
+</script>
+
+<template>
+    <div>
+        <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
+            {{ errorMessage }}
+        </b-alert>
+        <VegaWrapper :spec="spec" />
+    </div>
+</template>
diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
new file mode 100644
index 000000000000..892a66993f52
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+import { computed, type Ref, ref, watch } from "vue";
+
+import type { DatasetLabel, Invocation } from "@/components/Markdown/Editor/types";
+import { stringify } from "@/components/Markdown/Utilities/stringify";
+import { useInvocationStore } from "@/stores/invocationStore";
+
+import { parseInput, parseOutput } from "../Utilities/parseInvocation";
+
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
+
+const props = defineProps<{
+    attribute?: string;
+    content: string;
+    name?: string;
+}>();
+
+const emit = defineEmits(["change"]);
+
+const errorMessage = ref("");
+const visualizationConfig = ref();
+const visualizationKey = ref(0);
+const visualizationName = ref();
+const visualizationTitle = ref("");
+const datasetLabel: Ref<DatasetLabel | undefined> = ref();
+
+const { getInvocationById, getInvocationLoadError, isLoadingInvocation } = useInvocationStore();
+
+const currentContent = ref(props.content);
+
+const invocation = computed(() => invocationId.value && getInvocationById(invocationId.value));
+const invocationId = computed(() => datasetLabel.value?.invocation_id || "");
+const invocationLoading = computed(() => isLoadingInvocation(invocationId.value));
+const invocationLoadError = computed(() => getInvocationLoadError(invocationId.value));
+
+function onChange(incomingData: Record<string, any>) {
+    const newContent = {
+        visualization_name: visualizationName.value,
+        visualization_title: incomingData.visualization_title,
+        dataset_label: datasetLabel.value,
+        ...incomingData.visualization_config,
+    };
+    currentContent.value = stringify(newContent);
+    emit("change", currentContent.value);
+}
+
+function processContent() {
+    try {
+        errorMessage.value = "";
+        const parsedContent = { ...JSON.parse(props.content) };
+
+        datasetLabel.value = parsedContent.dataset_label;
+
+        if (props.attribute) {
+            visualizationConfig.value = {};
+            visualizationConfig.value[props.attribute] = parsedContent;
+        } else {
+            visualizationConfig.value = {
+                dataset_id: parsedContent.dataset_id,
+                dataset_url: parsedContent.dataset_url,
+                settings: parsedContent.settings,
+                tracks: parsedContent.tracks,
+            };
+            visualizationTitle.value = parsedContent.visualization_title || "";
+        }
+        visualizationName.value = props.name || parsedContent.visualization_name;
+        if (!visualizationName.value) {
+            throw new Error("Please add a 'visualization_name` to the dictionary.");
+        }
+        processInvocation();
+        if (currentContent.value !== props.content) {
+            currentContent.value = props.content;
+            visualizationKey.value++;
+        }
+    } catch (e) {
+        errorMessage.value = String(e);
+    }
+}
+
+function processInvocation() {
+    if (invocation.value) {
+        const inputId = parseInput(invocation.value as Invocation, datasetLabel.value?.input);
+        const outputId = parseOutput(invocation.value, datasetLabel.value?.output);
+        const datasetId = inputId || outputId;
+        visualizationConfig.value.dataset_id = datasetId;
+    }
+}
+
+watch(
+    () => props.content,
+    () => processContent(),
+    { immediate: true }
+);
+
+watch(
+    () => invocation.value,
+    () => processInvocation()
+);
+</script>
+
+<template>
+    <div class="markdown-visualization">
+        <BAlert v-if="errorMessage" v-localize class="m-0" variant="danger" show>
+            {{ errorMessage }}
+        </BAlert>
+        <BAlert v-else-if="invocationLoadError" v-localize class="m-0" variant="danger" show>
+            {{ invocationLoadError }}
+        </BAlert>
+        <LoadingSpan v-else-if="invocationLoading" />
+        <VisualizationWrapper
+            v-else-if="visualizationConfig"
+            :key="visualizationKey"
+            class="markdown-visualization"
+            :config="visualizationConfig"
+            :name="visualizationName"
+            :title="visualizationTitle"
+            @change="onChange" />
+    </div>
+</template>
+
+<style>
+.markdown-visualization {
+    min-height: 400px;
+    max-height: 400px;
+}
+</style>
diff --git a/client/src/components/Markdown/Sections/SectionWrapper.vue b/client/src/components/Markdown/Sections/SectionWrapper.vue
index 9f864996a225..11afb04beb0f 100644
--- a/client/src/components/Markdown/Sections/SectionWrapper.vue
+++ b/client/src/components/Markdown/Sections/SectionWrapper.vue
@@ -1,14 +1,23 @@
 <template>
     <MarkdownDefault v-if="name === 'markdown'" :content="content" />
     <MarkdownGalaxy v-else-if="name === 'galaxy'" :content="content" :labels="labels" />
+    <MarkdownVega v-else-if="name === 'vega'" :content="content" />
+    <MarkdownVisualization v-else-if="name === 'visualization'" :content="content" @change="$emit('change', $event)" />
+    <MarkdownVisualization
+        v-else-if="name === 'vitessce'"
+        attribute="dataset_content"
+        name="vitessce"
+        :content="content" />
     <b-alert v-else variant="danger" show> This cell type `{{ name }}` is not available. </b-alert>
 </template>
 
 <script setup lang="ts">
 import type { WorkflowLabel } from "@/components/Markdown/Editor/types";
 
-import MarkdownDefault from "../Sections/MarkdownDefault.vue";
-import MarkdownGalaxy from "../Sections/MarkdownGalaxy.vue";
+import MarkdownDefault from "./MarkdownDefault.vue";
+import MarkdownGalaxy from "./MarkdownGalaxy.vue";
+import MarkdownVega from "./MarkdownVega.vue";
+import MarkdownVisualization from "./MarkdownVisualization.vue";
 
 defineProps<{
     content: string;

From 5a60196a8669394aba7eb43bb0229154bcff19fa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 16:06:26 -0400
Subject: [PATCH 02/27] Add customized json stringify utility which
 alphabetically sorts keys

---
 .../components/Markdown/Utilities/stringify.ts    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 client/src/components/Markdown/Utilities/stringify.ts

diff --git a/client/src/components/Markdown/Utilities/stringify.ts b/client/src/components/Markdown/Utilities/stringify.ts
new file mode 100644
index 000000000000..09f96dfb5607
--- /dev/null
+++ b/client/src/components/Markdown/Utilities/stringify.ts
@@ -0,0 +1,15 @@
+export function stringify<T extends Record<string, any>>(contentObject: T): string {
+    function deepSortObject(obj: any): any {
+        if (typeof obj !== "object" || obj === null || Array.isArray(obj)) {
+            return obj;
+        }
+        return Object.keys(obj)
+            .sort()
+            .reduce((acc, key) => {
+                acc[key] = deepSortObject(obj[key]);
+                return acc;
+            }, {} as Record<string, any>);
+    }
+    const sortedObject = deepSortObject(contentObject);
+    return JSON.stringify(sortedObject, null, 4);
+}

From ac6eb22dea2d2d480098151e1e1be57df1e07750 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 16:07:42 -0400
Subject: [PATCH 03/27] Add configuration wrapper for visualizations

---
 client/src/components/Markdown/Editor/CellWrapper.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index f3da0e9d5b56..1e52d80962ad 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -36,6 +36,13 @@
                     :labels="labels"
                     @cancel="$emit('configure')"
                     @change="handleConfigure($event)" />
+                <ConfigureVisualization
+                    v-else-if="name === 'visualization' && configure"
+                    :name="name"
+                    :content="content"
+                    :labels="labels"
+                    @cancel="$emit('configure')"
+                    @change="handleConfigure($event)" />
                 <CellCode
                     :key="name"
                     class="mt-1"
@@ -60,6 +67,7 @@ import type { WorkflowLabel } from "./types";
 import CellAction from "./CellAction.vue";
 import CellButton from "./CellButton.vue";
 import ConfigureGalaxy from "./Configurations/ConfigureGalaxy.vue";
+import ConfigureVisualization from "./Configurations/ConfigureVisualization.vue";
 import SectionWrapper from "@/components/Markdown/Sections/SectionWrapper.vue";
 
 const CellCode = () => import("./CellCode.vue");

From 64b198a4b0dc1191e4ae57318dc5ecdffbbb76ba Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 16:08:38 -0400
Subject: [PATCH 04/27] Update data attachment condition to cover galaxy and
 visualization cells

---
 client/src/components/Markdown/Editor/CellAction.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/Editor/CellAction.vue b/client/src/components/Markdown/Editor/CellAction.vue
index 40f9d9b6992c..4519801719c9 100644
--- a/client/src/components/Markdown/Editor/CellAction.vue
+++ b/client/src/components/Markdown/Editor/CellAction.vue
@@ -13,7 +13,7 @@
                     <small class="my-1 mx-3 text-info">{{ title }}</small>
                 </span>
                 <CellOption
-                    v-if="name !== 'markdown'"
+                    v-if="['galaxy', 'visualization'].includes(name)"
                     title="Attach Data"
                     description="Select data for this cell"
                     :icon="faPaperclip"

From 1ff4d152fcac1c5cd5a8b26fd4c07ac87917a0fa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 16:11:14 -0400
Subject: [PATCH 05/27] Add visualization to add item dropdown

---
 .../components/Markdown/Editor/CellAdd.vue    |  9 +-
 .../Configurations/ConfigureVisualization.vue | 84 +++++++++++++++++++
 .../components/Markdown/Editor/services.ts    | 32 +++++++
 3 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Markdown/Editor/Configurations/ConfigureVisualization.vue
 create mode 100644 client/src/components/Markdown/Editor/services.ts

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index fedf3341a458..20c72c128c81 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -30,8 +30,9 @@
 <script setup lang="ts">
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { BAlert } from "bootstrap-vue";
-import { computed, ref } from "vue";
+import { computed, onMounted, type Ref, ref } from "vue";
 
+import { getVisualizations } from "./services";
 import cellTemplates from "./templates.yml";
 import type { CellType, TemplateEntry } from "./types";
 
@@ -46,9 +47,11 @@ defineEmits<{
 
 const buttonRef = ref();
 const query = ref("");
+const visualizations: Ref<Array<TemplateEntry>> = ref([]);
 
 const allTemplates = computed(() => {
     const result = { ...(cellTemplates as Record<string, Array<TemplateEntry>>) };
+    result["Visualization"] = visualizations.value;
     return result;
 });
 
@@ -67,6 +70,10 @@ const filteredTemplates = computed(() => {
     });
     return filteredCategories;
 });
+
+onMounted(async () => {
+    visualizations.value = await getVisualizations();
+});
 </script>
 
 <style>
diff --git a/client/src/components/Markdown/Editor/Configurations/ConfigureVisualization.vue b/client/src/components/Markdown/Editor/Configurations/ConfigureVisualization.vue
new file mode 100644
index 000000000000..552571a9aac6
--- /dev/null
+++ b/client/src/components/Markdown/Editor/Configurations/ConfigureVisualization.vue
@@ -0,0 +1,84 @@
+<template>
+    <b-alert v-if="errorMessage" variant="warning" show>{{ errorMessage }}</b-alert>
+    <MarkdownSelector v-else-if="labels !== undefined" argument-name="Dataset" :labels="labels" @onOk="onLabel" />
+    <DataDialog
+        v-else-if="currentHistoryId !== null"
+        :history="currentHistoryId"
+        format="id"
+        @onOk="onData"
+        @onCancel="$emit('cancel')" />
+    <b-alert v-else v-localize variant="info" show> No history available to choose from. </b-alert>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { type Ref, ref, watch } from "vue";
+
+import type { DatasetLabel, WorkflowLabel } from "@/components/Markdown/Editor/types";
+import { stringify } from "@/components/Markdown/Utilities/stringify";
+import { useHistoryStore } from "@/stores/historyStore";
+
+import DataDialog from "@/components/DataDialog/DataDialog.vue";
+import MarkdownSelector from "@/components/Markdown/MarkdownSelector.vue";
+
+const { currentHistoryId } = storeToRefs(useHistoryStore());
+
+const props = defineProps<{
+    content: string;
+    labels?: Array<WorkflowLabel>;
+}>();
+
+const emit = defineEmits<{
+    (e: "cancel"): void;
+    (e: "change", content: string): void;
+}>();
+
+interface contentType {
+    dataset_id?: string;
+    dataset_label?: DatasetLabel;
+    dataset_url?: string;
+}
+
+const contentObject: Ref<contentType | undefined> = ref();
+const errorMessage = ref("");
+
+function onData(datasetId: any) {
+    if (contentObject.value) {
+        contentObject.value.dataset_id = datasetId;
+        contentObject.value.dataset_label = undefined;
+        contentObject.value.dataset_url = undefined;
+        emit("change", stringify(contentObject.value));
+    }
+}
+
+function onLabel(selectedLabel: any) {
+    if (selectedLabel !== undefined) {
+        const labelType = selectedLabel.type;
+        const label = selectedLabel.label;
+        if (contentObject.value && label && labelType) {
+            contentObject.value.dataset_label = {
+                invocation_id: "",
+                [labelType]: label,
+            };
+            contentObject.value.dataset_id = undefined;
+            contentObject.value.dataset_url = undefined;
+            emit("change", stringify(contentObject.value));
+        }
+    }
+}
+
+function parseContent() {
+    try {
+        contentObject.value = JSON.parse(props.content);
+        errorMessage.value = "";
+    } catch (e) {
+        errorMessage.value = `Failed to parse: ${e}`;
+    }
+}
+
+watch(
+    () => props.content,
+    () => parseContent(),
+    { immediate: true }
+);
+</script>
diff --git a/client/src/components/Markdown/Editor/services.ts b/client/src/components/Markdown/Editor/services.ts
new file mode 100644
index 000000000000..355b409591ed
--- /dev/null
+++ b/client/src/components/Markdown/Editor/services.ts
@@ -0,0 +1,32 @@
+import axios from "axios";
+
+import { getAppRoot } from "@/onload";
+import { rethrowSimple } from "@/utils/simple-error";
+
+import type { TemplateEntry } from "./types";
+
+export interface VisualizationType {
+    description: string;
+    html: string;
+    logo?: string;
+    name: string;
+}
+
+export async function getVisualizations(): Promise<Array<TemplateEntry>> {
+    try {
+        const { data } = await axios.get(`${getAppRoot()}api/plugins?embeddable=True`);
+        return data.map((v: VisualizationType) => ({
+            title: v.html,
+            description: v.description || "",
+            logo: v.logo ? `${getAppRoot()}${v.logo}` : undefined,
+            cell: {
+                name: "visualization",
+                configure: true,
+                content: `{ "visualization_name": "${v.name}", "visualization_title": "${v.html}" }`,
+                // "dataset_url": "http://cdn.jsdelivr.net/gh/galaxyproject/galaxy-test-data/newick.nwk"
+            },
+        }));
+    } catch (e) {
+        rethrowSimple("Failed to load Visualizations.");
+    }
+}

From b902d0c22926c5c5c38658d5505f6c3f205e8202 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 16:11:46 -0400
Subject: [PATCH 06/27] Add property to determine maximum number of lines in
 code editor

---
 client/src/components/Markdown/Editor/CellCode.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index dfbc8c379105..75d8f1b749b4 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -14,6 +14,10 @@ const props = defineProps({
         type: String,
         default: "github_light_default",
     },
+    maxLines: {
+        type: Number,
+        default: 99999,
+    },
     mode: {
         type: String,
         default: "json",
@@ -44,7 +48,7 @@ async function buildEditor() {
     aceEditor = ace.edit(editor.value, {
         highlightActiveLine: false,
         highlightGutterLine: false,
-        maxLines: 30,
+        maxLines: props.maxLines,
         minLines: 1,
         mode: modePath,
         showPrintMargin: false,

From f447e9318216ee2ed2c9a8e2e0f99e947a58914e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 17:32:07 -0400
Subject: [PATCH 07/27] Populate, encode and decode invocation ids contained in
 markdown json objects

---
 lib/galaxy/managers/markdown_util.py | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index f24daa4c0d39..fe808ac99e9b 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -82,6 +82,16 @@
 GALAXY_FENCED_BLOCK = re.compile(r"^```\s*galaxy\s*(.*?)^```", re.MULTILINE ^ re.DOTALL)
 
 
+def process_invocation_ids(f, workflow_markdown: str) -> str:
+    """Finds all invocation ids in jsons and applies f to them."""
+    def replace_match(match):
+        original_id = match.group(2)
+        new_id = f(original_id)
+        return f'{match.group(1)}"{new_id}"'
+    pattern = r'("invocation_id"\s*:\s*)"([^"]*)"'
+    return re.sub(pattern, replace_match, workflow_markdown)
+
+
 def ready_galaxy_markdown_for_import(trans, external_galaxy_markdown):
     """Convert from encoded IDs to decoded numeric IDs for storing in the DB."""
 
@@ -96,6 +106,7 @@ def _remap(container, line):
         return (line, False)
 
     internal_markdown = _remap_galaxy_markdown_calls(_remap, external_galaxy_markdown)
+    internal_markdown = process_invocation_ids(trans.security.decode_id, internal_markdown)
     return internal_markdown
 
 
@@ -534,10 +545,12 @@ def ready_galaxy_markdown_for_export(trans, internal_galaxy_markdown):
         "generate_time": now().isoformat(),
         "generate_version": trans.app.config.version_major,
     }
+
     # Walk Galaxy directives inside the Galaxy Markdown and collect dict-ified data
     # needed to render this efficiently.
     directive_handler = ReadyForExportMarkdownDirectiveHandler(trans, extra_rendering_data)
     export_markdown = directive_handler.walk(trans, internal_galaxy_markdown)
+    export_markdown = process_invocation_ids(lambda value: trans.security.encode_id(int(value)), export_markdown)
     return export_markdown, extra_rendering_data
 
 
@@ -925,6 +938,7 @@ def _remap(container, line):
         return (line, False)
 
     galaxy_markdown = _remap_galaxy_markdown_calls(_remap, workflow_markdown)
+    galaxy_markdown = process_invocation_ids(lambda _: invocation.id, galaxy_markdown)
     return galaxy_markdown
 
 

From 2c533f3e00eece7c602b887996874b1bbdd30b3a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 17:33:34 -0400
Subject: [PATCH 08/27] Add re-usable wrapper for Galaxy visualizations

---
 .../Visualizations/VisualizationWrapper.vue   | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 client/src/components/Visualizations/VisualizationWrapper.vue

diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
new file mode 100644
index 000000000000..cd711cf3e8f7
--- /dev/null
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import axios from "axios";
+import { debounce } from "lodash";
+import { onMounted, ref } from "vue";
+
+import { getAppRoot } from "@/onload/loadConfig";
+
+const DELAY = 300;
+
+const props = defineProps<{
+    config: Object;
+    name: String;
+    title: String;
+}>();
+
+const emit = defineEmits(["change"]);
+
+const emitChange = debounce((newValue: string) => {
+    emit("change", newValue);
+}, DELAY);
+
+const errorMessage = ref("");
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+async function render() {
+    if (!props.name) {
+        errorMessage.value = "Visualization name is required!";
+    } else {
+        try {
+            const { data: plugin } = await axios.get(`${getAppRoot()}api/plugins/${props.name}`);
+            const pluginPath = `${getAppRoot()}static/plugins/visualizations/${props.name}/static/`;
+            const dataIncoming = {
+                root: getAppRoot(),
+                visualization_config: props.config,
+                visualization_plugin: plugin,
+                visualization_title: props.title,
+            };
+
+            const iframe = iframeRef.value;
+            if (iframe) {
+                // Verify document existence
+                const iframeDocument = iframe.contentDocument;
+                if (!iframeDocument) {
+                    errorMessage.value = "Failed to access iframe document.";
+                    return;
+                }
+
+                // Create the container for the plugin
+                const container = iframeDocument.createElement("div");
+                container.id = "app";
+                container.setAttribute("data-incoming", JSON.stringify(dataIncoming));
+                iframeDocument.body.appendChild(container);
+
+                // Inject the script tag for the plugin
+                if (plugin?.entry_point?.attr?.src) {
+                    const script = iframeDocument.createElement("script");
+                    script.type = "module";
+                    script.src = `${pluginPath}${plugin.entry_point.attr.src}`;
+                    iframeDocument.body.appendChild(script);
+                } else {
+                    const error = iframeDocument.createElement("div");
+                    error.innerHTML = `Unable to locate plugin module for: ${props.name}.`;
+                    iframeDocument.body.appendChild(error);
+                }
+
+                // Add a CSS link to the iframe document
+                if (plugin?.entry_point?.attr?.css) {
+                    const link = iframeDocument.createElement("link");
+                    link.rel = "stylesheet";
+                    link.href = `${pluginPath}${plugin.entry_point.attr.css}`;
+                    iframeDocument.head.appendChild(link);
+                }
+
+                // Add event listener
+                iframe.contentWindow?.addEventListener("message", (event) => {
+                    if (event.data.from === "galaxy-visualization") {
+                        emitChange(event.data);
+                    }
+                });
+
+                // Reset error message
+                errorMessage.value = "";
+            } else {
+                errorMessage.value = "Frame has been invalidated.";
+            }
+        } catch (e) {
+            errorMessage.value = `Visualization '${props.name}' not available: ${e}.`;
+        }
+    }
+}
+
+onMounted(() => render());
+</script>
+
+<template>
+    <div v-if="errorMessage">
+        <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
+    </div>
+    <iframe v-else ref="iframeRef" title="visualization" class="visualization-wrapper"></iframe>
+</template>
+
+<style>
+.visualization-wrapper {
+    border: none;
+    width: 100%;
+}
+</style>

From 4cdaffa24fe9954ebf49a192b4af42af59e0f695 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 20:18:30 -0400
Subject: [PATCH 09/27] Add vega and vitessce templates

---
 .../components/Markdown/Editor/templates.yml  | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/client/src/components/Markdown/Editor/templates.yml b/client/src/components/Markdown/Editor/templates.yml
index dd40e6ba4b6e..e54ab6e5f5a1 100644
--- a/client/src/components/Markdown/Editor/templates.yml
+++ b/client/src/components/Markdown/Editor/templates.yml
@@ -194,3 +194,68 @@ Galaxy:
     cell:
       name: "galaxy"
       content: "generate_galaxy_version()"
+
+Vega:
+  - title: "Bar Diagram"
+    description: "Basic bar diagram"
+    cell:
+      name: "vega"
+      content: |
+        {
+          "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+          "description": "A simple bar chart with embedded data.",
+          "data": {"values": [
+            { "a": "A", "b": 1 },
+            { "a": "B", "b": 2 },
+            { "a": "C", "b": 3 }
+          ]},
+          "mark": "bar",
+          "encoding": {
+            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
+            "y": {"field": "b", "type": "quantitative"}
+          }
+        }
+  - title: "Line Chart"
+    description: "Basic line chart"
+    cell:
+      name: "vega"
+      content: |
+        {
+          "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+          "description": "A simple line chart with embedded data.",
+          "data": {"values": [
+            { "a": "A", "b": 1 },
+            { "a": "B", "b": 2 },
+            { "a": "C", "b": 3 }
+          ]},
+          "mark": "line",
+          "encoding": {
+            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
+            "y": {"field": "b", "type": "quantitative"}
+          }
+        }
+
+Vitessce:
+  - title: "Hello World"
+    description: "A simple vitessce example"
+    cell:
+      name: "vitessce"
+      content: |
+        {
+          "version": "1.0.16",
+          "name": "Example configuration",
+          "description": "",
+          "datasets": [],
+          "initStrategy": "auto",
+          "coordinationSpace": {},
+          "layout": [{
+            "component": "description",
+            "props": {
+                "description": "Hello, world!"
+            },
+            "x": 0,
+            "y": 0,
+            "w": 6,
+            "h": 6
+          }]
+        }

From 9c810a75fef648b3f5b6d9c52dd5e6fff8de9c38 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 21:21:33 -0400
Subject: [PATCH 10/27] Avoid using window location in tiffviewer

---
 config/plugins/visualizations/tiffviewer/src/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/plugins/visualizations/tiffviewer/src/script.js b/config/plugins/visualizations/tiffviewer/src/script.js
index f97bf19d255a..01dfd7ff4a10 100644
--- a/config/plugins/visualizations/tiffviewer/src/script.js
+++ b/config/plugins/visualizations/tiffviewer/src/script.js
@@ -12,7 +12,7 @@ const { root, visualization_config } = JSON.parse(document.getElementById("app")
 
 const datasetId = visualization_config.dataset_id;
 
-const url = window.location.origin + root + "api/datasets/" + datasetId + "/display";
+const url = root + "api/datasets/" + datasetId + "/display";
 
 const rootElement = createRoot(document.getElementById("app"));
 rootElement.render(

From d72edc24476f50e67406fb69fc1bb4e96d51aaf8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 18 Mar 2025 21:43:08 -0400
Subject: [PATCH 11/27] Update visualizations

---
 config/plugins/visualizations/h5web/config/h5web.xml       | 2 +-
 config/plugins/visualizations/vitessce/config/vitessce.xml | 2 +-
 config/plugins/visualizations/vizarr/config/vizarr.xml     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/config/plugins/visualizations/h5web/config/h5web.xml b/config/plugins/visualizations/h5web/config/h5web.xml
index a06faaabe49c..92ff19ea0318 100644
--- a/config/plugins/visualizations/h5web/config/h5web.xml
+++ b/config/plugins/visualizations/h5web/config/h5web.xml
@@ -12,7 +12,7 @@
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
     </params>
     <requirements>
-        <requirement type="npm" version="0.5.0" package="@galaxyproject/h5web"/>
+        <requirement type="npm" version="0.5.1" package="@galaxyproject/h5web"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
 </visualization>
diff --git a/config/plugins/visualizations/vitessce/config/vitessce.xml b/config/plugins/visualizations/vitessce/config/vitessce.xml
index c0244bcd8d49..d184993b7cf3 100644
--- a/config/plugins/visualizations/vitessce/config/vitessce.xml
+++ b/config/plugins/visualizations/vitessce/config/vitessce.xml
@@ -13,7 +13,7 @@
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
     </params>
     <requirements>
-        <requirement type="npm" version="0.0.0" package="@galaxyproject/vitessce"/>
+        <requirement type="npm" version="0.0.1" package="@galaxyproject/vitessce"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
 </visualization>
diff --git a/config/plugins/visualizations/vizarr/config/vizarr.xml b/config/plugins/visualizations/vizarr/config/vizarr.xml
index 5c4196460108..b213605eeaf8 100644
--- a/config/plugins/visualizations/vizarr/config/vizarr.xml
+++ b/config/plugins/visualizations/vizarr/config/vizarr.xml
@@ -3,7 +3,7 @@
 <visualization name="Vizarr Viewer" embeddable="true">
     <description>Basic visualization for Zarr-based images like OME-Zarr</description>
     <requirements>
-        <requirement type="npm" version="0.1.6" package="@galaxyproject/vizarr"/>
+        <requirement type="npm" version="0.1.7" package="@galaxyproject/vizarr"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <data_sources>

From c291d9be02dc881790fc35db49657da9007980be Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Mar 2025 02:09:38 -0400
Subject: [PATCH 12/27] Parse root with window.location.origin when building
 visualizations

---
 client/src/components/Visualizations/VisualizationWrapper.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index cd711cf3e8f7..419467e5fc57 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -30,7 +30,7 @@ async function render() {
             const { data: plugin } = await axios.get(`${getAppRoot()}api/plugins/${props.name}`);
             const pluginPath = `${getAppRoot()}static/plugins/visualizations/${props.name}/static/`;
             const dataIncoming = {
-                root: getAppRoot(),
+                root: window.location.origin + getAppRoot(),
                 visualization_config: props.config,
                 visualization_plugin: plugin,
                 visualization_title: props.title,

From 10dfe6993e9e4e4abb20809efc8994f16958f425 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Mar 2025 02:31:37 -0400
Subject: [PATCH 13/27] Switch to editor without page reload

---
 client/src/components/PageDisplay/PageDisplay.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/components/PageDisplay/PageDisplay.vue b/client/src/components/PageDisplay/PageDisplay.vue
index bfe855434724..c9631b91de9d 100644
--- a/client/src/components/PageDisplay/PageDisplay.vue
+++ b/client/src/components/PageDisplay/PageDisplay.vue
@@ -64,9 +64,6 @@ export default {
         exportUrl() {
             return `${this.dataUrl}.pdf`;
         },
-        editUrl() {
-            return `/pages/editor?id=${this.pageId}`;
-        },
     },
     created() {
         urlData({ url: this.dataUrl }).then((data) => {
@@ -75,7 +72,7 @@ export default {
     },
     methods: {
         onEdit() {
-            window.location = withPrefix(this.editUrl);
+            this.$router.push(`/pages/editor?id=${this.pageId}`);
         },
         stsUrl(config) {
             return `${this.dataUrl}/prepare_download`;

From ef7d90ca4a7c8330302669f0579a76f900177f26 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Mar 2025 03:26:51 -0400
Subject: [PATCH 14/27] Switch default to cell-based markdown editor

---
 client/src/components/Markdown/MarkdownEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 55c66553a3e5..19c09297c7d3 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -68,7 +68,7 @@ defineProps<{
 
 const showHelpModal = ref<boolean>(false);
 
-const editor = ref("text");
+const editor = ref("editor");
 const editorOptions = ref([
     { text: "Editor", value: "editor" },
     { text: "Text", value: "text" },

From efa0c483aa7b9ba9c76ec2cdfef110ed8d67c36c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Mar 2025 16:08:47 -0400
Subject: [PATCH 15/27] Fix formatting

---
 lib/galaxy/managers/markdown_util.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index fe808ac99e9b..d3a94e20e48e 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -84,10 +84,12 @@
 
 def process_invocation_ids(f, workflow_markdown: str) -> str:
     """Finds all invocation ids in jsons and applies f to them."""
+
     def replace_match(match):
         original_id = match.group(2)
         new_id = f(original_id)
         return f'{match.group(1)}"{new_id}"'
+
     pattern = r'("invocation_id"\s*:\s*)"([^"]*)"'
     return re.sub(pattern, replace_match, workflow_markdown)
 

From 50dbb9505e4d0bb8fd1f0f7aba76e3fc0ca53893 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Mar 2025 16:13:43 -0400
Subject: [PATCH 16/27] Remove unused import

---
 client/src/components/PageDisplay/PageDisplay.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/PageDisplay/PageDisplay.vue b/client/src/components/PageDisplay/PageDisplay.vue
index c9631b91de9d..011ccbc32cc2 100644
--- a/client/src/components/PageDisplay/PageDisplay.vue
+++ b/client/src/components/PageDisplay/PageDisplay.vue
@@ -22,7 +22,6 @@ import { storeToRefs } from "pinia";
 
 import { useConfig } from "@/composables/config";
 import { useUserStore } from "@/stores/userStore";
-import { withPrefix } from "@/utils/redirect";
 import { urlData } from "@/utils/url";
 
 import PageHtml from "./PageHtml.vue";

From b4cb43b8b7c32172e9b4bca1b99e0c2c208329a1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Mar 2025 17:50:23 -0400
Subject: [PATCH 17/27] Cast invocation type before calling parser

---
 .../src/components/Markdown/Sections/MarkdownVisualization.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index 892a66993f52..7140da68ea93 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -82,7 +82,7 @@ function processContent() {
 function processInvocation() {
     if (invocation.value) {
         const inputId = parseInput(invocation.value as Invocation, datasetLabel.value?.input);
-        const outputId = parseOutput(invocation.value, datasetLabel.value?.output);
+        const outputId = parseOutput(invocation.value as Invocation, datasetLabel.value?.output);
         const datasetId = inputId || outputId;
         visualizationConfig.value.dataset_id = datasetId;
     }

From 24abb9a6a48e6854cd1d5d6885b3d23b4a535308 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 19 Mar 2025 19:20:53 -0400
Subject: [PATCH 18/27] Switch default to text editor

---
 client/src/components/Markdown/MarkdownEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 19c09297c7d3..55c66553a3e5 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -68,7 +68,7 @@ defineProps<{
 
 const showHelpModal = ref<boolean>(false);
 
-const editor = ref("editor");
+const editor = ref("text");
 const editorOptions = ref([
     { text: "Editor", value: "editor" },
     { text: "Text", value: "text" },

From 3dec0e3df00a0f5ac20eb75651ba590c1e26aee8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 20 Mar 2025 16:05:11 -0400
Subject: [PATCH 19/27] Add test cases and enable cell based markdown editor in
 workflow reports

---
 .../components/Markdown/MarkdownEditor.vue    |  1 -
 lib/galaxy/managers/markdown_util.py          | 22 ++++++++++---
 test/unit/workflows/test_workflow_markdown.py | 31 +++++++++++++++++++
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 55c66553a3e5..e97135805de3 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -8,7 +8,6 @@
                     </div>
                     <div>
                         <b-form-radio-group
-                            v-if="!labels || labels.length === 0"
                             v-model="editor"
                             v-b-tooltip.hover.bottom
                             button-variant="outline-primary"
diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index d3a94e20e48e..405db803b0ad 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -66,6 +66,7 @@
 
 log = logging.getLogger(__name__)
 
+# Matches galaxy block attributes
 ARG_VAL_CAPTURED_REGEX = r"""(?:([\w_\-\|]+)|\"([^\"]+)\"|\'([^\']+)\')"""
 OUTPUT_LABEL_PATTERN = re.compile(rf"output=\s*{ARG_VAL_CAPTURED_REGEX}\s*")
 INPUT_LABEL_PATTERN = re.compile(rf"input=\s*{ARG_VAL_CAPTURED_REGEX}\s*")
@@ -73,25 +74,36 @@
 STEP_LABEL_PATTERN = re.compile(rf"step=\s*{ARG_VAL_CAPTURED_REGEX}\s*")
 PATH_LABEL_PATTERN = re.compile(rf"path=\s*{ARG_VAL_CAPTURED_REGEX}\s*")
 
+# Matches encoded and unencoded ids in galaxy blocks
 UNENCODED_ID_PATTERN = re.compile(
     r"(history_id|workflow_id|history_dataset_id|history_dataset_collection_id|job_id|implicit_collection_jobs_id|invocation_id)=([\d]+)"
 )
 ENCODED_ID_PATTERN = re.compile(
     r"(history_id|workflow_id|history_dataset_id|history_dataset_collection_id|job_id|implicit_collection_jobs_id|invocation_id)=([a-z0-9]+)"
 )
-GALAXY_FENCED_BLOCK = re.compile(r"^```\s*galaxy\s*(.*?)^```", re.MULTILINE ^ re.DOTALL)
 
+# Matches blocks of various types
+ANY_FENCED_BLOCK = re.compile(r"^```\s*[^\s]+\n\s*(.*?)^```", re.MULTILINE | re.DOTALL)
+GALAXY_FENCED_BLOCK = re.compile(r"^```\s*galaxy\s*(.*?)^```", re.MULTILINE | re.DOTALL)
+
+# Match invocation ids in json blocks
+INVOCATION_ID_JSON_PATTERN = re.compile(r'("invocation_id"\s*:\s*)"([^"]*)"')
 
 def process_invocation_ids(f, workflow_markdown: str) -> str:
-    """Finds all invocation ids in jsons and applies f to them."""
+    """Finds all invocation ids in JSONs inside ```ANY ... ``` blocks and applies f to them."""
 
-    def replace_match(match):
+    def replace_invocation_id(match):
+        """Replaces only the invocation_id value while preserving the JSON structure."""
         original_id = match.group(2)
         new_id = f(original_id)
         return f'{match.group(1)}"{new_id}"'
 
-    pattern = r'("invocation_id"\s*:\s*)"([^"]*)"'
-    return re.sub(pattern, replace_match, workflow_markdown)
+    def process_block(block_match):
+        """Processes a matched block and replaces invocation_id inside it."""
+        block_content = block_match.group(0)
+        return re.sub(INVOCATION_ID_JSON_PATTERN, replace_invocation_id, block_content)
+
+    return re.sub(ANY_FENCED_BLOCK, process_block, workflow_markdown)
 
 
 def ready_galaxy_markdown_for_import(trans, external_galaxy_markdown):
diff --git a/test/unit/workflows/test_workflow_markdown.py b/test/unit/workflows/test_workflow_markdown.py
index 108ee6435925..124c92a0007f 100644
--- a/test/unit/workflows/test_workflow_markdown.py
+++ b/test/unit/workflows/test_workflow_markdown.py
@@ -101,6 +101,37 @@ def test_output_reference_mapping():
     assert "```galaxy\nhistory_dataset_as_image(history_dataset_id=563)\n```" in galaxy_markdown
 
 
+def test_populating_invocation_json():
+    workflow_markdown_0 = """
+```any
+{
+    "invocation_id": "",
+    "other_key": "other_value"
+}
+```
+"""
+    workflow_markdown_1 = """
+```any
+{
+    "nested_structure": {
+        "invocation_id": ""
+    }
+}
+```
+"""
+    workflow_markdown_2 = """
+{
+    "invocation_id": ""
+}
+"""
+    galaxy_markdown = populate_markdown(workflow_markdown_0)
+    assert '\n```any\n{\n    "invocation_id": "44",\n    "other_key": "other_value"\n}\n```\n' in galaxy_markdown
+    galaxy_markdown = populate_markdown(workflow_markdown_1)
+    assert '\n```any\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
+    galaxy_markdown = populate_markdown(workflow_markdown_2)
+    assert '\n{\n    "invocation_id": ""\n}\n' in galaxy_markdown
+
+
 def populate_markdown(workflow_markdown):
     # Add invocation ids to internal Galaxy markdown
     trans = MockTrans()

From 8c40e3f9335313a7e0452a0166e0038d112db53e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 20 Mar 2025 17:01:41 -0400
Subject: [PATCH 20/27] Add another test case for invocation id replacement

---
 test/unit/workflows/test_workflow_markdown.py | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/test/unit/workflows/test_workflow_markdown.py b/test/unit/workflows/test_workflow_markdown.py
index 124c92a0007f..0ebb571c2950 100644
--- a/test/unit/workflows/test_workflow_markdown.py
+++ b/test/unit/workflows/test_workflow_markdown.py
@@ -110,6 +110,7 @@ def test_populating_invocation_json():
 }
 ```
 """
+
     workflow_markdown_1 = """
 ```any
 {
@@ -119,7 +120,18 @@ def test_populating_invocation_json():
 }
 ```
 """
+
     workflow_markdown_2 = """
+```any
+{
+    "nested_structure": {
+        "invocation_id": "REPLACE"
+    }
+}
+```
+"""
+
+    workflow_markdown_3 = """
 {
     "invocation_id": ""
 }
@@ -129,6 +141,8 @@ def test_populating_invocation_json():
     galaxy_markdown = populate_markdown(workflow_markdown_1)
     assert '\n```any\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
     galaxy_markdown = populate_markdown(workflow_markdown_2)
+    assert '\n```any\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
+    galaxy_markdown = populate_markdown(workflow_markdown_3)
     assert '\n{\n    "invocation_id": ""\n}\n' in galaxy_markdown
 
 

From 34a7fb834ba2e4bd0f1a6eb148ba137191e3df3e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 20 Mar 2025 23:13:58 -0400
Subject: [PATCH 21/27] Fix fits graph viewer and add to embeddables

---
 .../config/fits_graph_viewer.xml                |  2 +-
 .../fits_graph_viewer/src/index.js              | 17 ++++++-----------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/config/plugins/visualizations/fits_graph_viewer/config/fits_graph_viewer.xml b/config/plugins/visualizations/fits_graph_viewer/config/fits_graph_viewer.xml
index a8c455130dfe..66bf782ddee5 100644
--- a/config/plugins/visualizations/fits_graph_viewer/config/fits_graph_viewer.xml
+++ b/config/plugins/visualizations/fits_graph_viewer/config/fits_graph_viewer.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE visualization SYSTEM "../../visualization.dtd">
-<visualization name="FITS Graph viewer">
+<visualization name="FITS Graph viewer" embeddable="true">
     <description>Basic plugin for fits file table visualization</description>
     <data_sources>
         <data_source>
diff --git a/config/plugins/visualizations/fits_graph_viewer/src/index.js b/config/plugins/visualizations/fits_graph_viewer/src/index.js
index 87bf33349263..0d74ab128b4e 100644
--- a/config/plugins/visualizations/fits_graph_viewer/src/index.js
+++ b/config/plugins/visualizations/fits_graph_viewer/src/index.js
@@ -1,13 +1,8 @@
-import {init} from 'astrovisjs/dist/astrovis/astrovis';
+import { init } from "astrovisjs/dist/astrovis/astrovis";
 
-document.addEventListener('DOMContentLoaded', () => {
+const incoming = document.getElementById("app").getAttribute("data-incoming") || "{}";
+const { root, visualization_config } = JSON.parse(incoming);
+const dataset_id = visualization_config.dataset_id;
+const file_url = root + "datasets/" + dataset_id + "/display"
 
-    const {root, visualization_config} = JSON.parse(
-        document.getElementById("app")
-            .getAttribute("data-incoming") || "{}");
-
-    const dataset_id = visualization_config.dataset_id;
-    const file_url = root + "datasets/" + dataset_id + "/display"
-
-    init('app', file_url);
-});
\ No newline at end of file
+init('app', file_url);

From c27bdee3fab95326e7978ab9309ae54d889da4b3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 21 Mar 2025 09:35:06 -0400
Subject: [PATCH 22/27] Fix linting

---
 lib/galaxy/managers/markdown_util.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index 405db803b0ad..e765bf59a171 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -89,6 +89,7 @@
 # Match invocation ids in json blocks
 INVOCATION_ID_JSON_PATTERN = re.compile(r'("invocation_id"\s*:\s*)"([^"]*)"')
 
+
 def process_invocation_ids(f, workflow_markdown: str) -> str:
     """Finds all invocation ids in JSONs inside ```ANY ... ``` blocks and applies f to them."""
 

From ce916dc0b2803f48a726bebfaba776c95aa8d272 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 21 Mar 2025 12:23:50 -0400
Subject: [PATCH 23/27] Limit invocation id replacment to visualization blocks

---
 lib/galaxy/managers/markdown_util.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index e765bf59a171..179deae8fec4 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -83,15 +83,15 @@
 )
 
 # Matches blocks of various types
-ANY_FENCED_BLOCK = re.compile(r"^```\s*[^\s]+\n\s*(.*?)^```", re.MULTILINE | re.DOTALL)
 GALAXY_FENCED_BLOCK = re.compile(r"^```\s*galaxy\s*(.*?)^```", re.MULTILINE | re.DOTALL)
+VISUALIZATION_FENCED_BLOCK = re.compile(r"^```\s*visualization+\n\s*(.*?)^```", re.MULTILINE | re.DOTALL)
 
 # Match invocation ids in json blocks
 INVOCATION_ID_JSON_PATTERN = re.compile(r'("invocation_id"\s*:\s*)"([^"]*)"')
 
 
 def process_invocation_ids(f, workflow_markdown: str) -> str:
-    """Finds all invocation ids in JSONs inside ```ANY ... ``` blocks and applies f to them."""
+    """Finds all invocation ids in JSONs inside visualization blocks and applies f to them."""
 
     def replace_invocation_id(match):
         """Replaces only the invocation_id value while preserving the JSON structure."""
@@ -104,7 +104,7 @@ def process_block(block_match):
         block_content = block_match.group(0)
         return re.sub(INVOCATION_ID_JSON_PATTERN, replace_invocation_id, block_content)
 
-    return re.sub(ANY_FENCED_BLOCK, process_block, workflow_markdown)
+    return re.sub(VISUALIZATION_FENCED_BLOCK, process_block, workflow_markdown)
 
 
 def ready_galaxy_markdown_for_import(trans, external_galaxy_markdown):

From 750915f3e5c4ccc721c11577063a38dd650c21fa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 21 Mar 2025 12:27:07 -0400
Subject: [PATCH 24/27] Adjust unit tests

---
 test/unit/workflows/test_workflow_markdown.py | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/unit/workflows/test_workflow_markdown.py b/test/unit/workflows/test_workflow_markdown.py
index 0ebb571c2950..d09c809d470a 100644
--- a/test/unit/workflows/test_workflow_markdown.py
+++ b/test/unit/workflows/test_workflow_markdown.py
@@ -103,7 +103,7 @@ def test_output_reference_mapping():
 
 def test_populating_invocation_json():
     workflow_markdown_0 = """
-```any
+```visualization
 {
     "invocation_id": "",
     "other_key": "other_value"
@@ -112,7 +112,7 @@ def test_populating_invocation_json():
 """
 
     workflow_markdown_1 = """
-```any
+```visualization
 {
     "nested_structure": {
         "invocation_id": ""
@@ -122,7 +122,7 @@ def test_populating_invocation_json():
 """
 
     workflow_markdown_2 = """
-```any
+```visualization
 {
     "nested_structure": {
         "invocation_id": "REPLACE"
@@ -137,11 +137,11 @@ def test_populating_invocation_json():
 }
 """
     galaxy_markdown = populate_markdown(workflow_markdown_0)
-    assert '\n```any\n{\n    "invocation_id": "44",\n    "other_key": "other_value"\n}\n```\n' in galaxy_markdown
+    assert '\n```visualization\n{\n    "invocation_id": "44",\n    "other_key": "other_value"\n}\n```\n' in galaxy_markdown
     galaxy_markdown = populate_markdown(workflow_markdown_1)
-    assert '\n```any\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
+    assert '\n```visualization\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
     galaxy_markdown = populate_markdown(workflow_markdown_2)
-    assert '\n```any\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
+    assert '\n```visualization\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
     galaxy_markdown = populate_markdown(workflow_markdown_3)
     assert '\n{\n    "invocation_id": ""\n}\n' in galaxy_markdown
 

From d3eb5a6b7636363542130eeaa82161ae639608cd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 21 Mar 2025 12:29:58 -0400
Subject: [PATCH 25/27] Fix linting

---
 test/unit/workflows/test_workflow_markdown.py | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/test/unit/workflows/test_workflow_markdown.py b/test/unit/workflows/test_workflow_markdown.py
index d09c809d470a..584955f33af7 100644
--- a/test/unit/workflows/test_workflow_markdown.py
+++ b/test/unit/workflows/test_workflow_markdown.py
@@ -137,11 +137,19 @@ def test_populating_invocation_json():
 }
 """
     galaxy_markdown = populate_markdown(workflow_markdown_0)
-    assert '\n```visualization\n{\n    "invocation_id": "44",\n    "other_key": "other_value"\n}\n```\n' in galaxy_markdown
+    assert (
+        '\n```visualization\n{\n    "invocation_id": "44",\n    "other_key": "other_value"\n}\n```\n' in galaxy_markdown
+    )
     galaxy_markdown = populate_markdown(workflow_markdown_1)
-    assert '\n```visualization\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
+    assert (
+        '\n```visualization\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n'
+        in galaxy_markdown
+    )
     galaxy_markdown = populate_markdown(workflow_markdown_2)
-    assert '\n```visualization\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n' in galaxy_markdown
+    assert (
+        '\n```visualization\n{\n    "nested_structure": {\n        "invocation_id": "44"\n    }\n}\n```\n'
+        in galaxy_markdown
+    )
     galaxy_markdown = populate_markdown(workflow_markdown_3)
     assert '\n{\n    "invocation_id": ""\n}\n' in galaxy_markdown
 

From 38e82bdb19136aac6dbd83883188d16fc8b55e89 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 21 Mar 2025 15:29:54 -0400
Subject: [PATCH 26/27] Update heatmap version

---
 config/plugins/visualizations/heatmap/config/heatmap.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/plugins/visualizations/heatmap/config/heatmap.xml b/config/plugins/visualizations/heatmap/config/heatmap.xml
index c1a95a5c4781..4d602a50fe4f 100644
--- a/config/plugins/visualizations/heatmap/config/heatmap.xml
+++ b/config/plugins/visualizations/heatmap/config/heatmap.xml
@@ -3,7 +3,7 @@
 <visualization name="Heatmap" embeddable="true">
     <description>Renders a heatmap from matrix data provided in 3-column format (x, y, observation).</description>
     <requirements>
-        <requirement type="npm" version="0.0.13" package="@galaxyproject/heatmap"/>
+        <requirement type="npm" version="0.0.14" package="@galaxyproject/heatmap"/>
     </requirements>
     <data_sources>
         <data_source>

From 86d3dbdaf16c6a2cff4db1cdf448722022100fe9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 21 Mar 2025 15:45:57 -0400
Subject: [PATCH 27/27] Remove comment

---
 client/src/components/Markdown/Editor/services.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Markdown/Editor/services.ts b/client/src/components/Markdown/Editor/services.ts
index 355b409591ed..63ac22a1ee85 100644
--- a/client/src/components/Markdown/Editor/services.ts
+++ b/client/src/components/Markdown/Editor/services.ts
@@ -23,7 +23,6 @@ export async function getVisualizations(): Promise<Array<TemplateEntry>> {
                 name: "visualization",
                 configure: true,
                 content: `{ "visualization_name": "${v.name}", "visualization_title": "${v.html}" }`,
-                // "dataset_url": "http://cdn.jsdelivr.net/gh/galaxyproject/galaxy-test-data/newick.nwk"
             },
         }));
     } catch (e) {