From 4f9d5a4814ba7b4442c459c11976f1d8e96c28a9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 1 Dec 2024 21:10:47 +0300
Subject: [PATCH 001/158] Add helper to generically split markdown sections
 without parsing arguments

---
 client/src/components/Markdown/parse.test.js | 20 +++++++++++++++-
 client/src/components/Markdown/parse.ts      | 24 ++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/parse.test.js b/client/src/components/Markdown/parse.test.js
index 50b1ae99397d..5ee139ca8397 100644
--- a/client/src/components/Markdown/parse.test.js
+++ b/client/src/components/Markdown/parse.test.js
@@ -1,4 +1,4 @@
-import { getArgs, replaceLabel, splitMarkdown } from "./parse";
+import { getArgs, parseSections, replaceLabel, splitMarkdown } from "./parse";
 
 describe("parse.ts", () => {
     describe("getArgs", () => {
@@ -20,6 +20,24 @@ describe("parse.ts", () => {
         });
     });
 
+    describe("parseSections", () => {
+        it("strip leading whitespace by default", () => {
+            const sections = parseSections(
+                "```galaxy\njob_metrics(job_id=THISFAKEID)\n```\n DEFAULT_CONTENT \n```special\n SPECIAL_CONTENT \n```\n MORE_DEFAULT_CONTENT"
+            );
+            console.log(sections);
+            expect(sections.length).toBe(4);
+            expect(sections[0].name).toBe("galaxy");
+            expect(sections[0].content).toBe("job_metrics(job_id=THISFAKEID)");
+            expect(sections[1].name).toBe("default");
+            expect(sections[1].content).toBe("DEFAULT_CONTENT");
+            expect(sections[2].name).toBe("special");
+            expect(sections[2].content).toBe("SPECIAL_CONTENT");
+            expect(sections[3].name).toBe("default");
+            expect(sections[3].content).toBe("MORE_DEFAULT_CONTENT");
+        });
+    });
+
     describe("splitMarkdown", () => {
         it("strip leading whitespace by default", () => {
             const { sections } = splitMarkdown("\n```galaxy\njob_metrics(job_id=THISFAKEID)\n```");
diff --git a/client/src/components/Markdown/parse.ts b/client/src/components/Markdown/parse.ts
index e001e1861a0d..10f352847ec7 100644
--- a/client/src/components/Markdown/parse.ts
+++ b/client/src/components/Markdown/parse.ts
@@ -13,6 +13,30 @@ type WorkflowLabelKind = "input" | "output" | "step";
 const SINGLE_QUOTE = "'";
 const DOUBLE_QUOTE = '"';
 
+export function parseSections(input: string): { name: string; content: string }[] {
+    const result: { name: string; content: string }[] = [];
+    const lines = input.split("\n");
+    let currentName: string = "default";
+    let currentContent: string[] = [];
+    lines.forEach((line) => {
+        const sectionMatch = line.match(/^```(.*)$/);
+        if (sectionMatch) {
+            console.log(sectionMatch);
+            if (currentContent.length > 0) {
+                result.push({ name: currentName, content: currentContent.join("\n").trim() });
+            }
+            currentName = sectionMatch[1] || "default";
+            currentContent = [];
+        } else {
+            currentContent.push(line);
+        }
+    });
+    if (currentContent.length > 0) {
+        result.push({ name: currentName, content: currentContent.join("\n").trim() });
+    }
+    return result;
+}
+
 export function splitMarkdown(markdown: string, preserveWhitespace = false) {
     const sections: Section[] = [];
     const markdownErrors = [];

From 93f89961f1b520d521454814e3fc647b6da9d5ff Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 1 Dec 2024 21:18:53 +0300
Subject: [PATCH 002/158] Replace section parser in markdown component

---
 client/src/components/Markdown/Markdown.vue  | 4 ++--
 client/src/components/Markdown/parse.test.js | 5 ++---
 client/src/components/Markdown/parse.ts      | 3 +--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 895f09714309..a502f640fc71 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -74,7 +74,7 @@ import Vue from "vue";
 
 import { useWorkflowStore } from "@/stores/workflowStore";
 
-import { splitMarkdown as splitMarkdownUnrendered } from "./parse";
+import { parseMarkdown } from "./parse";
 
 import MarkdownContainer from "./MarkdownContainer.vue";
 import LoadingSpan from "components/LoadingSpan.vue";
@@ -183,7 +183,7 @@ export default {
                 const config = this.markdownConfig;
                 const markdown = config.content || config.markdown || "";
                 this.markdownErrors = config.errors || [];
-                this.markdownObjects = this.splitMarkdown(markdown);
+                this.markdownObjects = parseMarkdown(markdown);
                 this.datasets = config.history_datasets || {};
                 this.histories = config.histories || {};
                 this.collections = config.history_dataset_collections || {};
diff --git a/client/src/components/Markdown/parse.test.js b/client/src/components/Markdown/parse.test.js
index 5ee139ca8397..33e5673cc072 100644
--- a/client/src/components/Markdown/parse.test.js
+++ b/client/src/components/Markdown/parse.test.js
@@ -1,4 +1,4 @@
-import { getArgs, parseSections, replaceLabel, splitMarkdown } from "./parse";
+import { getArgs, parseMarkdown, replaceLabel, splitMarkdown } from "./parse";
 
 describe("parse.ts", () => {
     describe("getArgs", () => {
@@ -22,10 +22,9 @@ describe("parse.ts", () => {
 
     describe("parseSections", () => {
         it("strip leading whitespace by default", () => {
-            const sections = parseSections(
+            const sections = parseMarkdown(
                 "```galaxy\njob_metrics(job_id=THISFAKEID)\n```\n DEFAULT_CONTENT \n```special\n SPECIAL_CONTENT \n```\n MORE_DEFAULT_CONTENT"
             );
-            console.log(sections);
             expect(sections.length).toBe(4);
             expect(sections[0].name).toBe("galaxy");
             expect(sections[0].content).toBe("job_metrics(job_id=THISFAKEID)");
diff --git a/client/src/components/Markdown/parse.ts b/client/src/components/Markdown/parse.ts
index 10f352847ec7..58e664ada52f 100644
--- a/client/src/components/Markdown/parse.ts
+++ b/client/src/components/Markdown/parse.ts
@@ -13,7 +13,7 @@ type WorkflowLabelKind = "input" | "output" | "step";
 const SINGLE_QUOTE = "'";
 const DOUBLE_QUOTE = '"';
 
-export function parseSections(input: string): { name: string; content: string }[] {
+export function parseMarkdown(input: string): { name: string; content: string }[] {
     const result: { name: string; content: string }[] = [];
     const lines = input.split("\n");
     let currentName: string = "default";
@@ -21,7 +21,6 @@ export function parseSections(input: string): { name: string; content: string }[
     lines.forEach((line) => {
         const sectionMatch = line.match(/^```(.*)$/);
         if (sectionMatch) {
-            console.log(sectionMatch);
             if (currentContent.length > 0) {
                 result.push({ name: currentName, content: currentContent.join("\n").trim() });
             }

From aa7a4632f20aadfca6a167be881fd6331f41684c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 1 Dec 2024 21:31:05 +0300
Subject: [PATCH 003/158] Move argument resolution to markdown container

---
 client/src/components/Markdown/Markdown.vue   | 19 +++++--------------
 .../components/Markdown/MarkdownContainer.vue | 13 +++++++------
 .../components/Markdown/MarkdownDefault.vue   |  9 +++++++++
 3 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 client/src/components/Markdown/MarkdownDefault.vue

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index a502f640fc71..fe88cb17ec55 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -45,11 +45,10 @@
                 </b-alert>
             </div>
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
-                <p v-if="obj.name == 'default'" class="text-justify m-2" v-html="obj.content" />
+                <MarkdownDefault v-if="obj.name === 'default'" :content="obj.content" />
                 <MarkdownContainer
-                    v-else
-                    :name="obj.name"
-                    :args="obj.args"
+                    v-else-if="obj.name === 'galaxy'"
+                    :content="obj.content"
                     :datasets="datasets"
                     :collections="collections"
                     :histories="histories"
@@ -76,6 +75,7 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 
 import { parseMarkdown } from "./parse";
 
+import MarkdownDefault from "./MarkdownDefault.vue";
 import MarkdownContainer from "./MarkdownContainer.vue";
 import LoadingSpan from "components/LoadingSpan.vue";
 import StsDownloadButton from "components/StsDownloadButton.vue";
@@ -93,6 +93,7 @@ library.add(faDownload, faEdit);
 
 export default {
     components: {
+        MarkdownDefault,
         MarkdownContainer,
         FontAwesomeIcon,
         LoadingSpan,
@@ -193,16 +194,6 @@ export default {
                 this.workflowID = Object.keys(this.markdownConfig?.workflows ?? {})[0];
             }
         },
-        splitMarkdown(markdown) {
-            const { sections, markdownErrors } = splitMarkdownUnrendered(markdown);
-            markdownErrors.forEach((error) => markdownErrors.push(error));
-            sections.forEach((section) => {
-                if (section.name == "default") {
-                    section.content = md.render(section.content);
-                }
-            });
-            return sections;
-        },
     },
 };
 </script>
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/MarkdownContainer.vue
index 72f487deb26e..9c2f5910cc05 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/MarkdownContainer.vue
@@ -20,19 +20,16 @@ import Visualization from "./Elements/Visualization.vue";
 import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay.vue";
 import WorkflowImage from "./Elements/Workflow/WorkflowImage.vue";
 import WorkflowLicense from "./Elements/Workflow/WorkflowLicense.vue";
+import { getArgs } from "./parse";
 
 const { config, isConfigLoaded } = useConfig();
 
 const toggle = ref(false);
 const props = defineProps({
-    name: {
+    content: {
         type: String,
         required: true,
     },
-    args: {
-        type: Object,
-        required: true,
-    },
     datasets: {
         type: Object,
         default: null,
@@ -63,7 +60,11 @@ const props = defineProps({
     },
 });
 
-const isCollapsible = computed(() => props.args.collapse !== undefined);
+const parsedArgs = computed(() => getArgs(props.content));
+const args = computed(() => parsedArgs.value.args);
+const name = computed(() => parsedArgs.value.name);
+
+const isCollapsible = computed(() => args.value.collapse !== undefined);
 const isVisible = computed(() => !isCollapsible.value || toggle.value);
 
 function argToBoolean(args, name, booleanDefault) {
diff --git a/client/src/components/Markdown/MarkdownDefault.vue b/client/src/components/Markdown/MarkdownDefault.vue
new file mode 100644
index 000000000000..e0dea897f5bd
--- /dev/null
+++ b/client/src/components/Markdown/MarkdownDefault.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+    content: string;
+}>();
+</script>
+
+<template>
+    <p class="text-justify m-2" v-html="content" />
+</template>

From 70a26a3277d8fc3b46d56391fb0322d9ab6a156e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 1 Dec 2024 22:16:33 +0300
Subject: [PATCH 004/158] Add markdown renderer to default container

---
 client/src/components/Markdown/Markdown.vue    |  9 ---------
 .../components/Markdown/MarkdownDefault.vue    | 18 ++++++++++++++++--
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index fe88cb17ec55..edb2035fd56a 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -66,8 +66,6 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
-import MarkdownIt from "markdown-it";
-import markdownItRegexp from "markdown-it-regexp";
 import { mapActions } from "pinia";
 import Vue from "vue";
 
@@ -80,13 +78,6 @@ import MarkdownContainer from "./MarkdownContainer.vue";
 import LoadingSpan from "components/LoadingSpan.vue";
 import StsDownloadButton from "components/StsDownloadButton.vue";
 
-const mdNewline = markdownItRegexp(/<br>/, () => {
-    return "<div style='clear:both;'/><br>";
-});
-
-const md = MarkdownIt();
-md.use(mdNewline);
-
 Vue.use(BootstrapVue);
 
 library.add(faDownload, faEdit);
diff --git a/client/src/components/Markdown/MarkdownDefault.vue b/client/src/components/Markdown/MarkdownDefault.vue
index e0dea897f5bd..2d3c81891741 100644
--- a/client/src/components/Markdown/MarkdownDefault.vue
+++ b/client/src/components/Markdown/MarkdownDefault.vue
@@ -1,9 +1,23 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from "vue";
+import MarkdownIt from "markdown-it";
+//@ts-ignore
+import markdownItRegexp from "markdown-it-regexp";
+
+const mdNewline = markdownItRegexp(/<br>/, () => {
+    return "<div style='clear:both;'/><br>";
+});
+
+const md = MarkdownIt();
+md.use(mdNewline);
+
+const props = defineProps<{
     content: string;
 }>();
+
+const renderedContent = computed(() => md.render(props.content));
 </script>
 
 <template>
-    <p class="text-justify m-2" v-html="content" />
+    <p class="text-justify m-2" v-html="renderedContent" />
 </template>

From 8394a64e4834f7f094e9b03d0e18bde1d79be08a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 1 Dec 2024 22:50:27 +0300
Subject: [PATCH 005/158] Move VegaWrapper to Common folder, use also in
 Markdown

---
 .../VegaWrapper.vue                             |  0
 client/src/components/Markdown/Markdown.vue     |  6 +++++-
 .../Markdown/{ => Sections}/MarkdownDefault.vue |  0
 .../Markdown/Sections/MarkdownVega.vue          | 17 +++++++++++++++++
 .../WorkflowInvocationMetrics.vue               |  2 +-
 5 files changed, 23 insertions(+), 2 deletions(-)
 rename client/src/components/{WorkflowInvocationState => Common}/VegaWrapper.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/MarkdownDefault.vue (100%)
 create mode 100644 client/src/components/Markdown/Sections/MarkdownVega.vue

diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/Common/VegaWrapper.vue
similarity index 100%
rename from client/src/components/WorkflowInvocationState/VegaWrapper.vue
rename to client/src/components/Common/VegaWrapper.vue
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index edb2035fd56a..de357e8be6bc 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -46,6 +46,7 @@
             </div>
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
                 <MarkdownDefault v-if="obj.name === 'default'" :content="obj.content" />
+                <MarkdownVega v-else-if="obj.name === 'vega'" :content="obj.content" />
                 <MarkdownContainer
                     v-else-if="obj.name === 'galaxy'"
                     :content="obj.content"
@@ -73,8 +74,10 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 
 import { parseMarkdown } from "./parse";
 
-import MarkdownDefault from "./MarkdownDefault.vue";
 import MarkdownContainer from "./MarkdownContainer.vue";
+import MarkdownDefault from "./Sections/MarkdownDefault.vue";
+import MarkdownVega from "./Sections/MarkdownVega.vue";
+
 import LoadingSpan from "components/LoadingSpan.vue";
 import StsDownloadButton from "components/StsDownloadButton.vue";
 
@@ -86,6 +89,7 @@ export default {
     components: {
         MarkdownDefault,
         MarkdownContainer,
+        MarkdownVega,
         FontAwesomeIcon,
         LoadingSpan,
         StsDownloadButton,
diff --git a/client/src/components/Markdown/MarkdownDefault.vue b/client/src/components/Markdown/Sections/MarkdownDefault.vue
similarity index 100%
rename from client/src/components/Markdown/MarkdownDefault.vue
rename to client/src/components/Markdown/Sections/MarkdownDefault.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..dbd55571e18a
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownVega.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
+import { computed } from "vue";
+
+const props = defineProps<{
+    content: string;
+}>();
+
+const spec = computed(() => ({
+    ...JSON.parse(props.content),
+    width: "container",
+}));
+</script>
+
+<template>
+    <VegaWrapper :spec="spec" />
+</template>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 3fdfda962bdb..64ad2b64a6db 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -12,7 +12,7 @@ import { capitalizeFirstLetter } from "@/utils/strings";
 import LoadingSpan from "../LoadingSpan.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
-const VegaWrapper = () => import("./VegaWrapper.vue");
+const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
 
 interface Props {
     invocationId: string;

From 014342a0516bfb6c4006d4122edd24e9f176a3e9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 2 Dec 2024 11:43:59 +0300
Subject: [PATCH 006/158] Add vitessce wrapper template

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

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index de357e8be6bc..59de831e6167 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -47,6 +47,7 @@
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
                 <MarkdownDefault v-if="obj.name === 'default'" :content="obj.content" />
                 <MarkdownVega v-else-if="obj.name === 'vega'" :content="obj.content" />
+                <MarkdownVitessce v-else-if="obj.name === 'vitessce'" :content="obj.content" />
                 <MarkdownContainer
                     v-else-if="obj.name === 'galaxy'"
                     :content="obj.content"
@@ -77,6 +78,7 @@ import { parseMarkdown } from "./parse";
 import MarkdownContainer from "./MarkdownContainer.vue";
 import MarkdownDefault from "./Sections/MarkdownDefault.vue";
 import MarkdownVega from "./Sections/MarkdownVega.vue";
+import MarkdownVitessce from "./Sections/MarkdownVitessce.vue";
 
 import LoadingSpan from "components/LoadingSpan.vue";
 import StsDownloadButton from "components/StsDownloadButton.vue";
@@ -90,6 +92,7 @@ export default {
         MarkdownDefault,
         MarkdownContainer,
         MarkdownVega,
+        MarkdownVitessce,
         FontAwesomeIcon,
         LoadingSpan,
         StsDownloadButton,

From 32addec09fb17015b3f354572d233f88ed31e7bf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 2 Dec 2024 13:18:29 +0300
Subject: [PATCH 007/158] Add plugin container

---
 .../Sections/Elements/PluginContainer.vue     | 49 +++++++++++++++++++
 .../Markdown/Sections/MarkdownVitessce.vue    | 19 +++++++
 2 files changed, 68 insertions(+)
 create mode 100644 client/src/components/Markdown/Sections/Elements/PluginContainer.vue
 create mode 100644 client/src/components/Markdown/Sections/MarkdownVitessce.vue

diff --git a/client/src/components/Markdown/Sections/Elements/PluginContainer.vue b/client/src/components/Markdown/Sections/Elements/PluginContainer.vue
new file mode 100644
index 000000000000..270e2bf09ef1
--- /dev/null
+++ b/client/src/components/Markdown/Sections/Elements/PluginContainer.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+// Define props
+const props = defineProps<{
+  pluginSrc: string;
+}>();
+
+// Reference for the plugin container
+const pluginContainer = ref<HTMLDivElement | null>(null);
+
+// Load the plugin script dynamically on mount
+onMounted(() => {
+  const container = pluginContainer.value;
+  console.log("here");
+  if (container) {
+    container.id = "app"; // Ensure the container has id="app"
+
+    const script = document.createElement("script");
+    script.src = props.pluginSrc;
+    script.async = true;
+
+    // Handle script load success
+    script.onload = () => {
+      console.log(`Plugin loaded from: ${props.pluginSrc}`);
+    };
+
+    // Handle script load failure
+    script.onerror = () => {
+      console.error(`Failed to load plugin: ${props.pluginSrc}`);
+    };
+
+    // Append the script to the container
+    container.appendChild(script);
+
+  }
+});
+</script>
+
+<template>
+  <div>
+    <!-- Scoped container for the plugin -->
+    <div ref="pluginContainer"></div>
+  </div>
+</template>
+
+<style scoped>
+/* Add any styles you want specific to this component */
+</style>
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
new file mode 100644
index 000000000000..09e723be0585
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import PluginContainer from "./Elements/PluginContainer.vue";
+
+const props = defineProps<{
+    content: string;
+}>();
+
+const spec = computed(() => ({
+    ...JSON.parse(props.content),
+}));
+</script>
+
+<template>
+    <div>
+        <PluginContainer plugin-src="/static/plugins/visualizations/vitessce/static/dist/index.js" />
+        {{ spec }}
+    </div>
+</template>

From f04ae6881d79386039ef5edc18fee3d67be015ff Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 2 Dec 2024 18:55:25 +0300
Subject: [PATCH 008/158] Add Vitessce to Markdown options?

---
 .../Sections/Elements/PluginContainer.vue     | 49 ---------------
 .../Sections/Elements/PluginWrapper.ts        | 61 +++++++++++++++++++
 .../Markdown/Sections/MarkdownVitessce.vue    | 11 ++--
 3 files changed, 67 insertions(+), 54 deletions(-)
 delete mode 100644 client/src/components/Markdown/Sections/Elements/PluginContainer.vue
 create mode 100644 client/src/components/Markdown/Sections/Elements/PluginWrapper.ts

diff --git a/client/src/components/Markdown/Sections/Elements/PluginContainer.vue b/client/src/components/Markdown/Sections/Elements/PluginContainer.vue
deleted file mode 100644
index 270e2bf09ef1..000000000000
--- a/client/src/components/Markdown/Sections/Elements/PluginContainer.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-
-// Define props
-const props = defineProps<{
-  pluginSrc: string;
-}>();
-
-// Reference for the plugin container
-const pluginContainer = ref<HTMLDivElement | null>(null);
-
-// Load the plugin script dynamically on mount
-onMounted(() => {
-  const container = pluginContainer.value;
-  console.log("here");
-  if (container) {
-    container.id = "app"; // Ensure the container has id="app"
-
-    const script = document.createElement("script");
-    script.src = props.pluginSrc;
-    script.async = true;
-
-    // Handle script load success
-    script.onload = () => {
-      console.log(`Plugin loaded from: ${props.pluginSrc}`);
-    };
-
-    // Handle script load failure
-    script.onerror = () => {
-      console.error(`Failed to load plugin: ${props.pluginSrc}`);
-    };
-
-    // Append the script to the container
-    container.appendChild(script);
-
-  }
-});
-</script>
-
-<template>
-  <div>
-    <!-- Scoped container for the plugin -->
-    <div ref="pluginContainer"></div>
-  </div>
-</template>
-
-<style scoped>
-/* Add any styles you want specific to this component */
-</style>
diff --git a/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts b/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts
new file mode 100644
index 000000000000..e56404f0c457
--- /dev/null
+++ b/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts
@@ -0,0 +1,61 @@
+import { getAppRoot } from "@/onload/loadConfig"
+
+class PluginWrapper extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        const pluginName = this.getAttribute("plugin-name");
+        const pluginData = this.getAttribute("plugin-data") || "";
+
+        const pluginPath = `${getAppRoot()}static/plugins/visualizations/${pluginName}/static/dist/index`;
+        const pluginSrc = `${pluginPath}.js`;
+        const pluginCss = `${pluginPath}.css`;
+
+        if (!pluginSrc) {
+            console.error("Plugin source not provided!");
+            return;
+        }
+
+        // Create and append the iframe
+        const iframe = document.createElement("iframe");
+        iframe.style.border = "none";
+        iframe.style.width = "100%";
+        iframe.style.height = this.getAttribute("height") || "100%";
+
+        // Load content into the iframe once it's ready
+        iframe.onload = () => {
+            const iframeDocument = iframe.contentDocument;
+            if (!iframeDocument) {
+                console.error("Failed to access iframe document.");
+                return;
+            }
+
+            // Create the container for the plugin
+            const container = iframeDocument.createElement("div");
+            container.id = "app";
+            container.setAttribute("data-incoming", pluginData);
+            iframeDocument.body.appendChild(container);
+
+            // Inject the script tag for the plugin
+            const script = iframeDocument.createElement("script");
+            script.type = "module";
+            script.src = pluginSrc;
+            iframeDocument.body.appendChild(script);
+
+            // Add a CSS link to the iframe document
+            const link = iframeDocument.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = pluginCss;
+            iframeDocument.head.appendChild(link);
+        };
+
+        this.appendChild(iframe);
+    }
+}
+
+// Register the custom element
+customElements.define("plugin-wrapper", PluginWrapper);
+
+export default PluginWrapper;
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
index 09e723be0585..19c8fe0e88f0 100644
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import PluginContainer from "./Elements/PluginContainer.vue";
+import "./Elements/PluginWrapper";
 
 const props = defineProps<{
     content: string;
 }>();
 
-const spec = computed(() => ({
-    ...JSON.parse(props.content),
+const pluginData = computed(() => ({
+    visualization_config: { 
+        dataset_content: { ...JSON.parse(props.content) },
+    }
 }));
 </script>
 
 <template>
     <div>
-        <PluginContainer plugin-src="/static/plugins/visualizations/vitessce/static/dist/index.js" />
-        {{ spec }}
+        <plugin-wrapper plugin-name="vitessce" :plugin-data="JSON.stringify(pluginData)" height="500px"/>
     </div>
 </template>

From af4e2e5b1d7868b3f3aeca3adeed38a04f551e02 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 2 Dec 2024 20:28:02 +0300
Subject: [PATCH 009/158] Move visualization wrapper to visualizations

---
 .../Sections/Elements/PluginWrapper.ts        | 61 -----------------
 .../Markdown/Sections/MarkdownVitessce.vue    |  8 +--
 .../Visualizations/VisualizationWrapper.vue   | 65 +++++++++++++++++++
 3 files changed, 69 insertions(+), 65 deletions(-)
 delete mode 100644 client/src/components/Markdown/Sections/Elements/PluginWrapper.ts
 create mode 100644 client/src/components/Visualizations/VisualizationWrapper.vue

diff --git a/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts b/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts
deleted file mode 100644
index e56404f0c457..000000000000
--- a/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { getAppRoot } from "@/onload/loadConfig"
-
-class PluginWrapper extends HTMLElement {
-    constructor() {
-        super();
-    }
-
-    connectedCallback() {
-        const pluginName = this.getAttribute("plugin-name");
-        const pluginData = this.getAttribute("plugin-data") || "";
-
-        const pluginPath = `${getAppRoot()}static/plugins/visualizations/${pluginName}/static/dist/index`;
-        const pluginSrc = `${pluginPath}.js`;
-        const pluginCss = `${pluginPath}.css`;
-
-        if (!pluginSrc) {
-            console.error("Plugin source not provided!");
-            return;
-        }
-
-        // Create and append the iframe
-        const iframe = document.createElement("iframe");
-        iframe.style.border = "none";
-        iframe.style.width = "100%";
-        iframe.style.height = this.getAttribute("height") || "100%";
-
-        // Load content into the iframe once it's ready
-        iframe.onload = () => {
-            const iframeDocument = iframe.contentDocument;
-            if (!iframeDocument) {
-                console.error("Failed to access iframe document.");
-                return;
-            }
-
-            // Create the container for the plugin
-            const container = iframeDocument.createElement("div");
-            container.id = "app";
-            container.setAttribute("data-incoming", pluginData);
-            iframeDocument.body.appendChild(container);
-
-            // Inject the script tag for the plugin
-            const script = iframeDocument.createElement("script");
-            script.type = "module";
-            script.src = pluginSrc;
-            iframeDocument.body.appendChild(script);
-
-            // Add a CSS link to the iframe document
-            const link = iframeDocument.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = pluginCss;
-            iframeDocument.head.appendChild(link);
-        };
-
-        this.appendChild(iframe);
-    }
-}
-
-// Register the custom element
-customElements.define("plugin-wrapper", PluginWrapper);
-
-export default PluginWrapper;
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
index 19c8fe0e88f0..10f2872cf40f 100644
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import "./Elements/PluginWrapper";
+import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
 
 const props = defineProps<{
     content: string;
 }>();
 
 const pluginData = computed(() => ({
-    visualization_config: { 
+    visualization_config: {
         dataset_content: { ...JSON.parse(props.content) },
-    }
+    },
 }));
 </script>
 
 <template>
     <div>
-        <plugin-wrapper plugin-name="vitessce" :plugin-data="JSON.stringify(pluginData)" height="500px"/>
+        <visualization-wrapper name="vitessce" :data-incoming="pluginData" height="500px" />
     </div>
 </template>
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
new file mode 100644
index 000000000000..938d91123f79
--- /dev/null
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { getAppRoot } from "@/onload/loadConfig";
+
+interface Props {
+    name: string;
+    dataIncoming: object;
+    height?: string;
+}
+
+const props = defineProps<Props>();
+
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+onMounted(() => {
+    if (!props.name) {
+        console.error("Plugin name is required!");
+        return;
+    }
+
+    const pluginPath = `${getAppRoot()}static/plugins/visualizations/${props.name}/static/dist/index`;
+    const pluginSrc = `${pluginPath}.js`;
+    const pluginCss = `${pluginPath}.css`;
+
+    if (iframeRef.value) {
+        const iframe = iframeRef.value;
+        iframe.onload = () => {
+            const iframeDocument = iframe.contentDocument;
+            if (!iframeDocument) {
+                console.error("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(props.dataIncoming));
+            iframeDocument.body.appendChild(container);
+
+            // Inject the script tag for the plugin
+            const script = iframeDocument.createElement("script");
+            script.type = "module";
+            script.src = pluginSrc;
+            iframeDocument.body.appendChild(script);
+
+            // Add a CSS link to the iframe document
+            const link = iframeDocument.createElement("link");
+            link.rel = "stylesheet";
+            link.href = pluginCss;
+            iframeDocument.head.appendChild(link);
+        };
+    }
+});
+</script>
+
+<template>
+    <iframe ref="iframeRef" class="visualization-wrapper" :style="{ height: props.height || '100%' }"> </iframe>
+</template>
+
+<style>
+.visualization-wrapper {
+    border: none;
+    width: 100%;
+}
+</style>

From 78e1a649baaf10072895180ae78322042ab03cea Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 2 Dec 2024 20:29:02 +0300
Subject: [PATCH 010/158] Fix naming for consistency

---
 client/src/components/Markdown/Sections/MarkdownVitessce.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
index 10f2872cf40f..4d79dc55ae6d 100644
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
     content: string;
 }>();
 
-const pluginData = computed(() => ({
+const dataIncoming = computed(() => ({
     visualization_config: {
         dataset_content: { ...JSON.parse(props.content) },
     },
@@ -15,6 +15,6 @@ const pluginData = computed(() => ({
 
 <template>
     <div>
-        <visualization-wrapper name="vitessce" :data-incoming="pluginData" height="500px" />
+        <visualization-wrapper name="vitessce" :data-incoming="dataIncoming" height="500px" />
     </div>
 </template>

From a669cb53d0fc1fa4838bcc5136d17c2654cc0847 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 2 Dec 2024 20:34:50 +0300
Subject: [PATCH 011/158] Move markdown galaxy section components to
 subdirectory

---
 client/src/components/Markdown/Markdown.vue                 | 6 +++---
 .../{ => Sections}/Elements/HistoryDatasetAsImage.vue       | 0
 .../{ => Sections}/Elements/HistoryDatasetAsTable.vue       | 0
 .../Elements/HistoryDatasetCollection/CollectionDisplay.vue | 0
 .../Elements/HistoryDatasetCollection/CollectionTree.vue    | 0
 .../{ => Sections}/Elements/HistoryDatasetDetails.vue       | 0
 .../{ => Sections}/Elements/HistoryDatasetDisplay.test.js   | 0
 .../{ => Sections}/Elements/HistoryDatasetDisplay.vue       | 0
 .../{ => Sections}/Elements/HistoryDatasetIndex.vue         | 0
 .../Markdown/{ => Sections}/Elements/HistoryDatasetLink.vue | 0
 .../Markdown/{ => Sections}/Elements/HistoryLink.vue        | 0
 .../Markdown/{ => Sections}/Elements/InstanceUrl.vue        | 0
 .../Markdown/{ => Sections}/Elements/InvocationTime.vue     | 0
 .../Markdown/{ => Sections}/Elements/JobMetrics.vue         | 0
 .../Markdown/{ => Sections}/Elements/JobParameters.vue      | 0
 .../Markdown/{ => Sections}/Elements/JobSelection.vue       | 0
 .../components/Markdown/{ => Sections}/Elements/ToolStd.vue | 0
 .../Markdown/{ => Sections}/Elements/Visualization.vue      | 0
 .../Elements/Workflow/WorkflowDisplay.test.js               | 0
 .../{ => Sections}/Elements/Workflow/WorkflowDisplay.vue    | 0
 .../{ => Sections}/Elements/Workflow/WorkflowImage.vue      | 0
 .../{ => Sections}/Elements/Workflow/WorkflowLicense.vue    | 0
 .../{ => Sections}/Elements/Workflow/WorkflowTree.vue       | 0
 .../Markdown/{ => Sections}/Elements/handlesMappingJobs.ts  | 0
 .../MarkdownGalaxy.test.js}                                 | 2 +-
 .../{MarkdownContainer.vue => Sections/MarkdownGalaxy.vue}  | 2 +-
 26 files changed, 5 insertions(+), 5 deletions(-)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetAsImage.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetAsTable.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetCollection/CollectionDisplay.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetCollection/CollectionTree.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetDetails.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetDisplay.test.js (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetDisplay.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetIndex.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryDatasetLink.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/HistoryLink.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/InstanceUrl.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/InvocationTime.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/JobMetrics.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/JobParameters.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/JobSelection.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/ToolStd.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/Visualization.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/Workflow/WorkflowDisplay.test.js (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/Workflow/WorkflowDisplay.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/Workflow/WorkflowImage.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/Workflow/WorkflowLicense.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/Workflow/WorkflowTree.vue (100%)
 rename client/src/components/Markdown/{ => Sections}/Elements/handlesMappingJobs.ts (100%)
 rename client/src/components/Markdown/{MarkdownContainer.test.js => Sections/MarkdownGalaxy.test.js} (98%)
 rename client/src/components/Markdown/{MarkdownContainer.vue => Sections/MarkdownGalaxy.vue} (99%)

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 59de831e6167..76e9141af735 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -48,7 +48,7 @@
                 <MarkdownDefault v-if="obj.name === 'default'" :content="obj.content" />
                 <MarkdownVega v-else-if="obj.name === 'vega'" :content="obj.content" />
                 <MarkdownVitessce v-else-if="obj.name === 'vitessce'" :content="obj.content" />
-                <MarkdownContainer
+                <MarkdownGalaxy
                     v-else-if="obj.name === 'galaxy'"
                     :content="obj.content"
                     :datasets="datasets"
@@ -75,7 +75,7 @@ import { useWorkflowStore } from "@/stores/workflowStore";
 
 import { parseMarkdown } from "./parse";
 
-import MarkdownContainer from "./MarkdownContainer.vue";
+import MarkdownGalaxy from "./Sections/MarkdownGalaxy.vue";
 import MarkdownDefault from "./Sections/MarkdownDefault.vue";
 import MarkdownVega from "./Sections/MarkdownVega.vue";
 import MarkdownVitessce from "./Sections/MarkdownVitessce.vue";
@@ -90,7 +90,7 @@ library.add(faDownload, faEdit);
 export default {
     components: {
         MarkdownDefault,
-        MarkdownContainer,
+        MarkdownGalaxy,
         MarkdownVega,
         MarkdownVitessce,
         FontAwesomeIcon,
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetAsImage.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsImage.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetAsImage.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetAsImage.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsTable.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetAsTable.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetAsTable.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionDisplay.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionTree.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionTree.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetCollection/CollectionTree.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionTree.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDetails.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetDetails.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.test.js b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.test.js
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetDisplay.test.js
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.test.js
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetIndex.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetIndex.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetIndex.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetIndex.vue
diff --git a/client/src/components/Markdown/Elements/HistoryDatasetLink.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetLink.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryDatasetLink.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryDatasetLink.vue
diff --git a/client/src/components/Markdown/Elements/HistoryLink.vue b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/HistoryLink.vue
rename to client/src/components/Markdown/Sections/Elements/HistoryLink.vue
diff --git a/client/src/components/Markdown/Elements/InstanceUrl.vue b/client/src/components/Markdown/Sections/Elements/InstanceUrl.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/InstanceUrl.vue
rename to client/src/components/Markdown/Sections/Elements/InstanceUrl.vue
diff --git a/client/src/components/Markdown/Elements/InvocationTime.vue b/client/src/components/Markdown/Sections/Elements/InvocationTime.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/InvocationTime.vue
rename to client/src/components/Markdown/Sections/Elements/InvocationTime.vue
diff --git a/client/src/components/Markdown/Elements/JobMetrics.vue b/client/src/components/Markdown/Sections/Elements/JobMetrics.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/JobMetrics.vue
rename to client/src/components/Markdown/Sections/Elements/JobMetrics.vue
diff --git a/client/src/components/Markdown/Elements/JobParameters.vue b/client/src/components/Markdown/Sections/Elements/JobParameters.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/JobParameters.vue
rename to client/src/components/Markdown/Sections/Elements/JobParameters.vue
diff --git a/client/src/components/Markdown/Elements/JobSelection.vue b/client/src/components/Markdown/Sections/Elements/JobSelection.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/JobSelection.vue
rename to client/src/components/Markdown/Sections/Elements/JobSelection.vue
diff --git a/client/src/components/Markdown/Elements/ToolStd.vue b/client/src/components/Markdown/Sections/Elements/ToolStd.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/ToolStd.vue
rename to client/src/components/Markdown/Sections/Elements/ToolStd.vue
diff --git a/client/src/components/Markdown/Elements/Visualization.vue b/client/src/components/Markdown/Sections/Elements/Visualization.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Visualization.vue
rename to client/src/components/Markdown/Sections/Elements/Visualization.vue
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.test.js b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.test.js
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.test.js
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.test.js
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowDisplay.vue
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowImage.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowImage.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowImage.vue
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowImage.vue
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowLicense.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowLicense.vue
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
diff --git a/client/src/components/Markdown/Elements/Workflow/WorkflowTree.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowTree.vue
similarity index 100%
rename from client/src/components/Markdown/Elements/Workflow/WorkflowTree.vue
rename to client/src/components/Markdown/Sections/Elements/Workflow/WorkflowTree.vue
diff --git a/client/src/components/Markdown/Elements/handlesMappingJobs.ts b/client/src/components/Markdown/Sections/Elements/handlesMappingJobs.ts
similarity index 100%
rename from client/src/components/Markdown/Elements/handlesMappingJobs.ts
rename to client/src/components/Markdown/Sections/Elements/handlesMappingJobs.ts
diff --git a/client/src/components/Markdown/MarkdownContainer.test.js b/client/src/components/Markdown/Sections/MarkdownGalaxy.test.js
similarity index 98%
rename from client/src/components/Markdown/MarkdownContainer.test.js
rename to client/src/components/Markdown/Sections/MarkdownGalaxy.test.js
index a40f1d810176..1a224dc7ab6f 100644
--- a/client/src/components/Markdown/MarkdownContainer.test.js
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.test.js
@@ -5,7 +5,7 @@ import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 import { withPrefix } from "utils/redirect";
 
-import MountTarget from "./MarkdownContainer.vue";
+import MountTarget from "./MarkdownGalaxy.vue";
 
 // mock routes
 jest.mock("utils/redirect");
diff --git a/client/src/components/Markdown/MarkdownContainer.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
similarity index 99%
rename from client/src/components/Markdown/MarkdownContainer.vue
rename to client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 9c2f5910cc05..8d6da96eef49 100644
--- a/client/src/components/Markdown/MarkdownContainer.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 
 import { useConfig } from "@/composables/config";
+import { getArgs } from "@/components/Markdown/parse";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
 import HistoryDatasetAsTable from "./Elements/HistoryDatasetAsTable.vue";
@@ -20,7 +21,6 @@ import Visualization from "./Elements/Visualization.vue";
 import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay.vue";
 import WorkflowImage from "./Elements/Workflow/WorkflowImage.vue";
 import WorkflowLicense from "./Elements/Workflow/WorkflowLicense.vue";
-import { getArgs } from "./parse";
 
 const { config, isConfigLoaded } = useConfig();
 

From 628f56f00ea81ecad78743082cd4954948544cdb Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 2 Dec 2024 20:41:29 +0300
Subject: [PATCH 012/158] Convert Markdown main component to composition api

---
 client/src/components/Markdown/Markdown.vue | 248 +++++++++-----------
 1 file changed, 113 insertions(+), 135 deletions(-)

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 76e9141af735..d3d75ecd8687 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -1,3 +1,115 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from "vue";
+import { useWorkflowStore } from "@/stores/workflowStore";
+import { parseMarkdown } from "./parse";
+
+import MarkdownGalaxy from "./Sections/MarkdownGalaxy.vue";
+import MarkdownDefault from "./Sections/MarkdownDefault.vue";
+import MarkdownVega from "./Sections/MarkdownVega.vue";
+import MarkdownVitessce from "./Sections/MarkdownVitessce.vue";
+
+import LoadingSpan from "components/LoadingSpan.vue";
+import StsDownloadButton from "components/StsDownloadButton.vue";
+
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faDownload, faEdit);
+
+// Props
+interface MarkdownConfig {
+    generate_time?: string;
+    generate_version?: string;
+    content?: string;
+    markdown?: string;
+    errors?: Array<{ error?: string; line?: string }>;
+    history_datasets?: Record<string, unknown>;
+    histories?: Record<string, unknown>;
+    history_dataset_collections?: Record<string, unknown>;
+    workflows?: Record<string, unknown>;
+    invocations?: Record<string, unknown>;
+    id?: string;
+    title?: string;
+    model_class?: string;
+}
+
+const props = defineProps<{
+    markdownConfig: MarkdownConfig;
+    enable_beta_markdown_export?: boolean;
+    downloadEndpoint?: string;
+    readOnly?: boolean;
+    exportLink?: string;
+}>();
+
+// Refs and data
+const markdownObjects = ref<any[]>([]);
+const markdownErrors = ref<any[]>([]);
+const datasets = ref<Record<string, unknown>>({});
+const histories = ref<Record<string, unknown>>({});
+const collections = ref<Record<string, unknown>>({});
+const workflows = ref<Record<string, unknown>>({});
+const invocations = ref<Record<string, unknown>>({});
+const loading = ref(true);
+const workflowID = ref("");
+
+// Workflow Store
+const workflowStore = useWorkflowStore();
+const fetchWorkflowForInstanceId = workflowStore.fetchWorkflowForInstanceId;
+const getStoredWorkflowByInstanceId = workflowStore.getStoredWorkflowByInstanceId;
+
+// Computed properties
+const effectiveExportLink = computed(() => (props.enable_beta_markdown_export ? props.exportLink : null));
+
+const time = computed(() => {
+    const generateTime = props.markdownConfig.generate_time;
+    if (generateTime) {
+        let formattedTime = generateTime.endsWith("Z") ? generateTime : `${generateTime}Z`;
+        const date = new Date(formattedTime);
+        return date.toLocaleString("default", {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+            timeZone: "UTC",
+            timeZoneName: "short",
+        });
+    }
+    return "unavailable";
+});
+
+const version = computed(() => props.markdownConfig.generate_version || "Unknown Galaxy Version");
+
+const workflowVersions = computed(() => getStoredWorkflowByInstanceId(workflowID.value));
+
+// Methods
+function initConfig() {
+    const config = props.markdownConfig;
+    if (Object.keys(config).length) {
+        const markdown = config.content || config.markdown || "";
+        markdownErrors.value = config.errors || [];
+        markdownObjects.value = parseMarkdown(markdown);
+        datasets.value = config.history_datasets || {};
+        histories.value = config.histories || {};
+        collections.value = config.history_dataset_collections || {};
+        workflows.value = config.workflows || {};
+        invocations.value = config.invocations || {};
+        loading.value = false;
+        workflowID.value = Object.keys(config.workflows || {})[0] || "";
+    }
+}
+
+// Watchers
+watch(() => props.markdownConfig, initConfig);
+
+// Lifecycle hooks
+onMounted(() => {
+    initConfig();
+    fetchWorkflowForInstanceId(workflowID.value);
+});
+</script>
+
 <template>
     <div class="markdown-wrapper">
         <LoadingSpan v-if="loading" />
@@ -9,8 +121,7 @@
                     :fallback-url="exportLink"
                     :download-endpoint="downloadEndpoint"
                     size="sm"
-                    title="Generate PDF">
-                </StsDownloadButton>
+                    title="Generate PDF" />
                 <b-button
                     v-if="!readOnly"
                     v-b-tooltip.hover
@@ -62,136 +173,3 @@
         </div>
     </div>
 </template>
-
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import BootstrapVue from "bootstrap-vue";
-import { mapActions } from "pinia";
-import Vue from "vue";
-
-import { useWorkflowStore } from "@/stores/workflowStore";
-
-import { parseMarkdown } from "./parse";
-
-import MarkdownGalaxy from "./Sections/MarkdownGalaxy.vue";
-import MarkdownDefault from "./Sections/MarkdownDefault.vue";
-import MarkdownVega from "./Sections/MarkdownVega.vue";
-import MarkdownVitessce from "./Sections/MarkdownVitessce.vue";
-
-import LoadingSpan from "components/LoadingSpan.vue";
-import StsDownloadButton from "components/StsDownloadButton.vue";
-
-Vue.use(BootstrapVue);
-
-library.add(faDownload, faEdit);
-
-export default {
-    components: {
-        MarkdownDefault,
-        MarkdownGalaxy,
-        MarkdownVega,
-        MarkdownVitessce,
-        FontAwesomeIcon,
-        LoadingSpan,
-        StsDownloadButton,
-    },
-    props: {
-        markdownConfig: {
-            type: Object,
-            default: null,
-        },
-        enable_beta_markdown_export: {
-            type: Boolean,
-            default: false,
-        },
-        downloadEndpoint: {
-            type: String,
-            default: null,
-        },
-        readOnly: {
-            type: Boolean,
-            default: false,
-        },
-        exportLink: {
-            type: String,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            markdownObjects: [],
-            markdownErrors: [],
-            datasets: {},
-            histories: {},
-            collections: {},
-            workflows: {},
-            invocations: {},
-            loading: true,
-            workflowID: undefined,
-        };
-    },
-    computed: {
-        effectiveExportLink() {
-            return this.enable_beta_markdown_export ? this.exportLink : null;
-        },
-        time() {
-            let generateTime = this.markdownConfig.generate_time;
-            if (generateTime) {
-                if (!generateTime.endsWith("Z")) {
-                    // We don't have tzinfo, but this will always be UTC coming
-                    // from Galaxy so append Z to assert that prior to parsing
-                    generateTime += "Z";
-                }
-                const date = new Date(generateTime);
-                return date.toLocaleString("default", {
-                    day: "numeric",
-                    month: "long",
-                    year: "numeric",
-                    minute: "numeric",
-                    hour: "numeric",
-                    timeZone: "UTC",
-                    timeZoneName: "short",
-                });
-            }
-            return "unavailable";
-        },
-        workflowVersions() {
-            return this.workflowID ? this.getStoredWorkflowByInstanceId(this.workflowID) : undefined;
-        },
-        version() {
-            return this.markdownConfig.generate_version || "Unknown Galaxy Version";
-        },
-    },
-    watch: {
-        markdownConfig() {
-            this.initConfig();
-        },
-    },
-    created() {
-        this.initConfig();
-        if (this.workflowID) {
-            this.fetchWorkflowForInstanceId(this.workflowID);
-        }
-    },
-    methods: {
-        ...mapActions(useWorkflowStore, ["getStoredWorkflowByInstanceId", "fetchWorkflowForInstanceId"]),
-        initConfig() {
-            if (Object.keys(this.markdownConfig).length) {
-                const config = this.markdownConfig;
-                const markdown = config.content || config.markdown || "";
-                this.markdownErrors = config.errors || [];
-                this.markdownObjects = parseMarkdown(markdown);
-                this.datasets = config.history_datasets || {};
-                this.histories = config.histories || {};
-                this.collections = config.history_dataset_collections || {};
-                this.workflows = config.workflows || {};
-                this.invocations = config.invocations || {};
-                this.loading = false;
-                this.workflowID = Object.keys(this.markdownConfig?.workflows ?? {})[0];
-            }
-        },
-    },
-};
-</script>

From eaf33d557a6c83d6c722fbc1318592609a4c0a7a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 2 Dec 2024 20:47:00 +0300
Subject: [PATCH 013/158] Adjust loading flag

---
 client/src/components/Markdown/Markdown.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index d3d75ecd8687..1115196098e4 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue";
+
 import { useWorkflowStore } from "@/stores/workflowStore";
 import { parseMarkdown } from "./parse";
 
@@ -8,8 +9,8 @@ import MarkdownDefault from "./Sections/MarkdownDefault.vue";
 import MarkdownVega from "./Sections/MarkdownVega.vue";
 import MarkdownVitessce from "./Sections/MarkdownVitessce.vue";
 
-import LoadingSpan from "components/LoadingSpan.vue";
-import StsDownloadButton from "components/StsDownloadButton.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import StsDownloadButton from "@/components/StsDownloadButton.vue";
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -37,7 +38,7 @@ interface MarkdownConfig {
 const props = defineProps<{
     markdownConfig: MarkdownConfig;
     enable_beta_markdown_export?: boolean;
-    downloadEndpoint?: string;
+    downloadEndpoint: string;
     readOnly?: boolean;
     exportLink?: string;
 }>();
@@ -95,8 +96,8 @@ function initConfig() {
         collections.value = config.history_dataset_collections || {};
         workflows.value = config.workflows || {};
         invocations.value = config.invocations || {};
-        loading.value = false;
         workflowID.value = Object.keys(config.workflows || {})[0] || "";
+        loading.value = false;
     }
 }
 

From 20d7d94cfc9f2c8997b2001081eac54c00046910 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 3 Dec 2024 10:14:49 +0300
Subject: [PATCH 014/158] Fix code editor props

---
 client/package.json                           |  1 +
 .../components/Markdown/Editor/CodeEditor.vue | 91 +++++++++++++++++++
 .../components/Markdown/MarkdownEditor.vue    |  9 +-
 client/yarn.lock                              |  2 +-
 4 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/CodeEditor.vue

diff --git a/client/package.json b/client/package.json
index de12b9f71852..a4366da532f2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -87,6 +87,7 @@
     "pinia": "^2.1.7",
     "popper.js": "^1.16.1",
     "pretty-bytes": "^6.1.1",
+    "prismjs": "^1.29.0",
     "pyre-to-regexp": "^0.0.6",
     "querystring-es3": "^0.2.1",
     "regenerator-runtime": "^0.14.0",
diff --git a/client/src/components/Markdown/Editor/CodeEditor.vue b/client/src/components/Markdown/Editor/CodeEditor.vue
new file mode 100644
index 000000000000..cf0de4ac8b6a
--- /dev/null
+++ b/client/src/components/Markdown/Editor/CodeEditor.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+//@ts-ignore
+import Prism from "prismjs";
+import "prismjs/components/prism-json"; // Load the language
+import "prismjs/plugins/line-numbers/prism-line-numbers.css"; // Line numbers plugin styles
+import "prismjs/plugins/line-numbers/prism-line-numbers"; // Line numbers plugin
+
+// Props to pass initial content
+const props = defineProps({
+    content: {
+        type: String,
+        required: true,
+    },
+});
+
+// References
+const editor = ref<HTMLElement | null>(null);
+const highlightedContent = ref(props.content);
+
+function render() {
+    highlightedContent.value = Prism.highlight(props.content, Prism.languages.json, "json");
+}
+
+// Setup Prism.js
+onMounted(() => {
+    render();
+});
+
+// Re-highlight when content changes
+watch(() => props.content, () => {
+    render();
+});
+</script>
+
+<template>
+    <div contenteditable="true" ref="editor" class="prism-editor">
+        <pre class="language-json line-numbers" style="background: transparent"><code v-html="highlightedContent"></code></pre>
+    </div>
+</template>
+
+<style>
+.prism-editor {
+    font-family: monospace;
+    white-space: pre-wrap;
+    overflow-x: auto;
+}
+
+
+/* Line Numbers Styling */
+pre.line-numbers {
+    position: relative;
+    padding-left: 3.8em !important; /* Adjust depending on line number width */
+    counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+    position: relative;
+    display: block;
+    padding-left: 0;
+}
+
+.line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 3em;
+    border-right: 1px solid #ddd;
+    color: #999;
+    font-size: 0.875em;
+    line-height: 1.5;
+    text-align: right;
+}
+
+/* Indent Guides Styling */
+.prism-editor code {
+    background: transparent;
+    position: relative;
+}
+
+.prism-editor code span.indent-guide {
+    display: inline-block;
+    width: 1em;
+    margin-left: -1em;
+    color: #ccc;
+    pointer-events: none;
+    font-size: 0.9em;
+}
+</style>
+
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 0ace2e5a3b6d..066310115244 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -24,12 +24,7 @@
                     </div>
                 </div>
                 <div class="unified-panel-body d-flex">
-                    <textarea
-                        id="workflow-report-editor"
-                        ref="text-area"
-                        v-model="content"
-                        class="markdown-textarea"
-                        @input="onUpdate" />
+                    <code-editor :content="content" />
                 </div>
             </div>
         </div>
@@ -46,6 +41,7 @@ import FlexPanel from "components/Panels/FlexPanel";
 import _ from "underscore";
 import Vue from "vue";
 
+import CodeEditor from "./Editor/CodeEditor";
 import MarkdownHelpModal from "./MarkdownHelpModal";
 import MarkdownToolBox from "./MarkdownToolBox";
 
@@ -57,6 +53,7 @@ const FENCE = "```";
 
 export default {
     components: {
+        CodeEditor,
         FlexPanel,
         FontAwesomeIcon,
         MarkdownHelpModal,
diff --git a/client/yarn.lock b/client/yarn.lock
index cd6c4bf5f55a..da1ef5451e05 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -9911,7 +9911,7 @@ pretty@^2.0.0:
     extend-shallow "^2.0.1"
     js-beautify "^1.6.12"
 
-prismjs@1.29.0, prismjs@^1.6.0:
+prismjs@1.29.0, prismjs@^1.29.0, prismjs@^1.6.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==

From c8cc805d7083974035ede7ddccd4575474f363ff Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 3 Dec 2024 10:22:42 +0300
Subject: [PATCH 015/158] Fix code editor handling

---
 .../components/Markdown/Editor/CodeEditor.vue | 140 ++++++++++--------
 1 file changed, 78 insertions(+), 62 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CodeEditor.vue b/client/src/components/Markdown/Editor/CodeEditor.vue
index cf0de4ac8b6a..49953ff29e32 100644
--- a/client/src/components/Markdown/Editor/CodeEditor.vue
+++ b/client/src/components/Markdown/Editor/CodeEditor.vue
@@ -1,66 +1,82 @@
-<script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-//@ts-ignore
-import Prism from "prismjs";
-import "prismjs/components/prism-json"; // Load the language
-import "prismjs/plugins/line-numbers/prism-line-numbers.css"; // Line numbers plugin styles
-import "prismjs/plugins/line-numbers/prism-line-numbers"; // Line numbers plugin
-
-// Props to pass initial content
-const props = defineProps({
-    content: {
-        type: String,
-        required: true,
-    },
-});
-
-// References
-const editor = ref<HTMLElement | null>(null);
-const highlightedContent = ref(props.content);
-
-function render() {
-    highlightedContent.value = Prism.highlight(props.content, Prism.languages.json, "json");
-}
-
-// Setup Prism.js
-onMounted(() => {
-    render();
-});
-
-// Re-highlight when content changes
-watch(() => props.content, () => {
-    render();
-});
-</script>
-
 <template>
     <div contenteditable="true" ref="editor" class="prism-editor">
-        <pre class="language-json line-numbers" style="background: transparent"><code v-html="highlightedContent"></code></pre>
+      <pre class="language-json line-numbers"><code v-html="highlightedContent"></code></pre>
     </div>
-</template>
-
-<style>
-.prism-editor {
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, onMounted, watch } from "vue";
+  //@ts-ignore
+  import Prism from "prismjs";
+  import "prismjs/themes/prism-coy.css"; // Choose your theme
+  import "prismjs/components/prism-json"; // Load the language
+  import "prismjs/plugins/line-numbers/prism-line-numbers.css"; // Line numbers plugin styles
+  import "prismjs/plugins/line-numbers/prism-line-numbers"; // Line numbers plugin
+  
+  // Props for initial content
+  const props = defineProps({
+    content: {
+      type: String,
+      required: true,
+    },
+  });
+  
+  // Refs
+  const editor = ref<HTMLElement | null>(null);
+  const highlightedContent = ref(props.content);
+  
+  // Helper function to add indent guides
+  function addIndentGuides(content: string): string {
+    return content.replace(/^(\s+)/gm, (match) => {
+      return match
+        .split("")
+        .map(() => '<span class="indent-guide">|</span>')
+        .join("");
+    });
+  }
+  
+  // Watch for content changes and re-highlight
+  watch(() => props.content, () => {
+    highlightedContent.value = addIndentGuides(
+      Prism.highlight(props.content, Prism.languages.json, "json")
+    );
+  });
+  
+  // Initialize Prism.js highlighting on mount
+  onMounted(() => {
+    highlightedContent.value = addIndentGuides(
+      Prism.highlight(props.content, Prism.languages.json, "json")
+    );
+  });
+  </script>
+  
+  <style scoped>
+  /* Editor Styling */
+  .prism-editor {
+    border: 1px solid #ccc;
+    background: #f9f9f9;
     font-family: monospace;
+    padding: 1rem;
     white-space: pre-wrap;
     overflow-x: auto;
-}
-
-
-/* Line Numbers Styling */
-pre.line-numbers {
+    border-radius: 5px;
+    position: relative;
+  }
+  
+  /* Line Numbers Styling */
+  pre.line-numbers {
     position: relative;
-    padding-left: 3.8em !important; /* Adjust depending on line number width */
+    padding-left: 3.8em !important; /* Adjust for line number width */
     counter-reset: linenumber;
-}
-
-pre.line-numbers > code {
+  }
+  
+  pre.line-numbers > code {
     position: relative;
     display: block;
     padding-left: 0;
-}
-
-.line-numbers-rows {
+  }
+  
+  .line-numbers-rows {
     position: absolute;
     pointer-events: none;
     top: 0;
@@ -71,21 +87,21 @@ pre.line-numbers > code {
     font-size: 0.875em;
     line-height: 1.5;
     text-align: right;
-}
-
-/* Indent Guides Styling */
-.prism-editor code {
+  }
+  
+  /* Indent Guides Styling */
+  .prism-editor code {
     background: transparent;
     position: relative;
-}
-
-.prism-editor code span.indent-guide {
+  }
+  
+  .prism-editor code span.indent-guide {
     display: inline-block;
     width: 1em;
     margin-left: -1em;
     color: #ccc;
     pointer-events: none;
     font-size: 0.9em;
-}
-</style>
-
+  }
+  </style>
+  
\ No newline at end of file

From dfae9cbc072d471d818c3acb4d23c242555459f9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 07:09:57 -0500
Subject: [PATCH 016/158] Restore text editor

---
 client/src/components/Markdown/MarkdownEditor.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 066310115244..0ace2e5a3b6d 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -24,7 +24,12 @@
                     </div>
                 </div>
                 <div class="unified-panel-body d-flex">
-                    <code-editor :content="content" />
+                    <textarea
+                        id="workflow-report-editor"
+                        ref="text-area"
+                        v-model="content"
+                        class="markdown-textarea"
+                        @input="onUpdate" />
                 </div>
             </div>
         </div>
@@ -41,7 +46,6 @@ import FlexPanel from "components/Panels/FlexPanel";
 import _ from "underscore";
 import Vue from "vue";
 
-import CodeEditor from "./Editor/CodeEditor";
 import MarkdownHelpModal from "./MarkdownHelpModal";
 import MarkdownToolBox from "./MarkdownToolBox";
 
@@ -53,7 +57,6 @@ const FENCE = "```";
 
 export default {
     components: {
-        CodeEditor,
         FlexPanel,
         FontAwesomeIcon,
         MarkdownHelpModal,

From 5bba6706cad3761f117d00e0345231b6e50cc178 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 07:17:08 -0500
Subject: [PATCH 017/158] Move text editor variant to separate component

---
 .../components/Markdown/Editor/TextEditor.vue | 119 ++++++++++++++++++
 .../components/Markdown/MarkdownEditor.vue    |  92 +-------------
 2 files changed, 122 insertions(+), 89 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/TextEditor.vue

diff --git a/client/src/components/Markdown/Editor/TextEditor.vue b/client/src/components/Markdown/Editor/TextEditor.vue
new file mode 100644
index 000000000000..62867f5e46c2
--- /dev/null
+++ b/client/src/components/Markdown/Editor/TextEditor.vue
@@ -0,0 +1,119 @@
+<template>
+    <div id="columns" class="d-flex">
+        <FlexPanel side="left">
+            <MarkdownToolBox :steps="steps" @insert="insertMarkdown" />
+        </FlexPanel>
+        <div id="center" class="overflow-auto w-100">
+            <div class="markdown-editor h-100">
+                <div class="unified-panel-header" unselectable="on">
+                    <div class="unified-panel-header-inner">
+                        <div class="panel-header-buttons">
+                            <slot name="buttons" />
+                            <b-button
+                                v-b-tooltip.hover.bottom
+                                title="Help"
+                                variant="link"
+                                role="button"
+                                @click="onHelp">
+                                <FontAwesomeIcon icon="question" />
+                            </b-button>
+                        </div>
+                        <div class="my-1">
+                            {{ title }}
+                        </div>
+                    </div>
+                </div>
+                <div class="unified-panel-body d-flex">
+                    <textarea
+                        id="workflow-report-editor"
+                        ref="text-area"
+                        v-model="content"
+                        class="markdown-textarea"
+                        @input="onUpdate" />
+                </div>
+            </div>
+        </div>
+        <MarkdownHelpModal ref="help" :mode="mode" />
+    </div>
+</template>
+
+<script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import BootstrapVue from "bootstrap-vue";
+import FlexPanel from "@/components/Panels/FlexPanel";
+import _ from "underscore";
+import Vue from "vue";
+
+import MarkdownHelpModal from "@/components/Markdown/MarkdownHelpModal";
+import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox";
+
+Vue.use(BootstrapVue);
+
+library.add(faQuestion);
+
+const FENCE = "```";
+
+export default {
+    components: {
+        FlexPanel,
+        FontAwesomeIcon,
+        MarkdownHelpModal,
+        MarkdownToolBox,
+    },
+    props: {
+        markdownText: {
+            type: String,
+            default: null,
+        },
+        steps: {
+            type: Object,
+            default: null,
+        },
+        title: {
+            type: String,
+            default: null,
+        },
+        mode: {
+            type: String,
+            default: "report",
+        },
+    },
+    data() {
+        return {
+            content: this.markdownText,
+        };
+    },
+    watch: {
+        markdownText() {
+            const textArea = this.$refs["text-area"];
+            const textCursor = textArea.selectionEnd;
+            this.content = this.markdownText;
+            Vue.nextTick(() => {
+                textArea.selectionEnd = textCursor;
+                textArea.focus();
+            });
+        },
+    },
+    methods: {
+        insertMarkdown(markdown) {
+            markdown = markdown.replace(")(", ", ");
+            markdown = `${FENCE}galaxy\n${markdown}\n${FENCE}\n`;
+            const textArea = this.$refs["text-area"];
+            textArea.focus();
+            const cursorPosition = textArea.selectionStart;
+            let newContent = this.content.substr(0, cursorPosition);
+            newContent += `\r\n${markdown.trim()}\r\n`;
+            newContent += this.content.substr(cursorPosition);
+            this.$emit("update", newContent);
+        },
+        onUpdate: _.debounce(function (e) {
+            this.$emit("update", this.content);
+        }, 300),
+        onHelp() {
+            this.$refs.help.showMarkdownHelp();
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 0ace2e5a3b6d..3943dfc59dde 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,66 +1,15 @@
 <template>
     <div id="columns" class="d-flex">
-        <FlexPanel side="left">
-            <MarkdownToolBox :steps="steps" @insert="insertMarkdown" />
-        </FlexPanel>
-        <div id="center" class="overflow-auto w-100">
-            <div class="markdown-editor h-100">
-                <div class="unified-panel-header" unselectable="on">
-                    <div class="unified-panel-header-inner">
-                        <div class="panel-header-buttons">
-                            <slot name="buttons" />
-                            <b-button
-                                v-b-tooltip.hover.bottom
-                                title="Help"
-                                variant="link"
-                                role="button"
-                                @click="onHelp">
-                                <FontAwesomeIcon icon="question" />
-                            </b-button>
-                        </div>
-                        <div class="my-1">
-                            {{ title }}
-                        </div>
-                    </div>
-                </div>
-                <div class="unified-panel-body d-flex">
-                    <textarea
-                        id="workflow-report-editor"
-                        ref="text-area"
-                        v-model="content"
-                        class="markdown-textarea"
-                        @input="onUpdate" />
-                </div>
-            </div>
-        </div>
-        <MarkdownHelpModal ref="help" :mode="mode" />
+        <TextEditor :title="title" :markdown-text="markdownText" :steps="steps" :mode="mode" />
     </div>
 </template>
 
 <script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import BootstrapVue from "bootstrap-vue";
-import FlexPanel from "components/Panels/FlexPanel";
-import _ from "underscore";
-import Vue from "vue";
-
-import MarkdownHelpModal from "./MarkdownHelpModal";
-import MarkdownToolBox from "./MarkdownToolBox";
-
-Vue.use(BootstrapVue);
-
-library.add(faQuestion);
-
-const FENCE = "```";
+import TextEditor from "./Editor/TextEditor.vue";
 
 export default {
     components: {
-        FlexPanel,
-        FontAwesomeIcon,
-        MarkdownHelpModal,
-        MarkdownToolBox,
+        TextEditor,
     },
     props: {
         markdownText: {
@@ -80,40 +29,5 @@ export default {
             default: "report",
         },
     },
-    data() {
-        return {
-            content: this.markdownText,
-        };
-    },
-    watch: {
-        markdownText() {
-            const textArea = this.$refs["text-area"];
-            const textCursor = textArea.selectionEnd;
-            this.content = this.markdownText;
-            Vue.nextTick(() => {
-                textArea.selectionEnd = textCursor;
-                textArea.focus();
-            });
-        },
-    },
-    methods: {
-        insertMarkdown(markdown) {
-            markdown = markdown.replace(")(", ", ");
-            markdown = `${FENCE}galaxy\n${markdown}\n${FENCE}\n`;
-            const textArea = this.$refs["text-area"];
-            textArea.focus();
-            const cursorPosition = textArea.selectionStart;
-            let newContent = this.content.substr(0, cursorPosition);
-            newContent += `\r\n${markdown.trim()}\r\n`;
-            newContent += this.content.substr(cursorPosition);
-            this.$emit("update", newContent);
-        },
-        onUpdate: _.debounce(function (e) {
-            this.$emit("update", this.content);
-        }, 300),
-        onHelp() {
-            this.$refs.help.showMarkdownHelp();
-        },
-    },
 };
 </script>

From 0364dd821487fd256d01ca733b51a5c2e0b70990 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 07:22:45 -0500
Subject: [PATCH 018/158] Format client

---
 .../components/Markdown/Editor/CodeEditor.vue | 137 +++++++++---------
 .../components/Markdown/Editor/TextEditor.vue |   2 +-
 client/src/components/Markdown/Markdown.vue   |  15 +-
 .../components/Markdown/MarkdownEditor.vue    |  43 +++---
 .../Markdown/Sections/MarkdownDefault.vue     |   2 +-
 .../Markdown/Sections/MarkdownGalaxy.vue      |   2 +-
 .../Markdown/Sections/MarkdownVega.vue        |   3 +-
 .../Markdown/Sections/MarkdownVitessce.vue    |   3 +-
 .../Visualizations/VisualizationWrapper.vue   |   8 +-
 9 files changed, 107 insertions(+), 108 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CodeEditor.vue b/client/src/components/Markdown/Editor/CodeEditor.vue
index 49953ff29e32..c93ac7a0dc32 100644
--- a/client/src/components/Markdown/Editor/CodeEditor.vue
+++ b/client/src/components/Markdown/Editor/CodeEditor.vue
@@ -1,58 +1,58 @@
 <template>
-    <div contenteditable="true" ref="editor" class="prism-editor">
-      <pre class="language-json line-numbers"><code v-html="highlightedContent"></code></pre>
+    <div ref="editor" contenteditable="true" class="prism-editor">
+        <pre class="language-json line-numbers"><code v-html="highlightedContent"></code></pre>
     </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, onMounted, watch } from "vue";
-  //@ts-ignore
-  import Prism from "prismjs";
-  import "prismjs/themes/prism-coy.css"; // Choose your theme
-  import "prismjs/components/prism-json"; // Load the language
-  import "prismjs/plugins/line-numbers/prism-line-numbers.css"; // Line numbers plugin styles
-  import "prismjs/plugins/line-numbers/prism-line-numbers"; // Line numbers plugin
-  
-  // Props for initial content
-  const props = defineProps({
+</template>
+
+<script setup lang="ts">
+import "prismjs/themes/prism-coy.css"; // Choose your theme
+import "prismjs/components/prism-json"; // Load the language
+import "prismjs/plugins/line-numbers/prism-line-numbers.css"; // Line numbers plugin styles
+import "prismjs/plugins/line-numbers/prism-line-numbers"; // Line numbers plugin
+
+//@ts-ignore
+import Prism from "prismjs";
+import { onMounted, ref, watch } from "vue";
+
+// Props for initial content
+const props = defineProps({
     content: {
-      type: String,
-      required: true,
+        type: String,
+        required: true,
     },
-  });
-  
-  // Refs
-  const editor = ref<HTMLElement | null>(null);
-  const highlightedContent = ref(props.content);
-  
-  // Helper function to add indent guides
-  function addIndentGuides(content: string): string {
+});
+
+// Refs
+const editor = ref<HTMLElement | null>(null);
+const highlightedContent = ref(props.content);
+
+// Helper function to add indent guides
+function addIndentGuides(content: string): string {
     return content.replace(/^(\s+)/gm, (match) => {
-      return match
-        .split("")
-        .map(() => '<span class="indent-guide">|</span>')
-        .join("");
+        return match
+            .split("")
+            .map(() => '<span class="indent-guide">|</span>')
+            .join("");
     });
-  }
-  
-  // Watch for content changes and re-highlight
-  watch(() => props.content, () => {
-    highlightedContent.value = addIndentGuides(
-      Prism.highlight(props.content, Prism.languages.json, "json")
-    );
-  });
-  
-  // Initialize Prism.js highlighting on mount
-  onMounted(() => {
-    highlightedContent.value = addIndentGuides(
-      Prism.highlight(props.content, Prism.languages.json, "json")
-    );
-  });
-  </script>
-  
-  <style scoped>
-  /* Editor Styling */
-  .prism-editor {
+}
+
+// Watch for content changes and re-highlight
+watch(
+    () => props.content,
+    () => {
+        highlightedContent.value = addIndentGuides(Prism.highlight(props.content, Prism.languages.json, "json"));
+    }
+);
+
+// Initialize Prism.js highlighting on mount
+onMounted(() => {
+    highlightedContent.value = addIndentGuides(Prism.highlight(props.content, Prism.languages.json, "json"));
+});
+</script>
+
+<style scoped>
+/* Editor Styling */
+.prism-editor {
     border: 1px solid #ccc;
     background: #f9f9f9;
     font-family: monospace;
@@ -61,22 +61,22 @@
     overflow-x: auto;
     border-radius: 5px;
     position: relative;
-  }
-  
-  /* Line Numbers Styling */
-  pre.line-numbers {
+}
+
+/* Line Numbers Styling */
+pre.line-numbers {
     position: relative;
     padding-left: 3.8em !important; /* Adjust for line number width */
     counter-reset: linenumber;
-  }
-  
-  pre.line-numbers > code {
+}
+
+pre.line-numbers > code {
     position: relative;
     display: block;
     padding-left: 0;
-  }
-  
-  .line-numbers-rows {
+}
+
+.line-numbers-rows {
     position: absolute;
     pointer-events: none;
     top: 0;
@@ -87,21 +87,20 @@
     font-size: 0.875em;
     line-height: 1.5;
     text-align: right;
-  }
-  
-  /* Indent Guides Styling */
-  .prism-editor code {
+}
+
+/* Indent Guides Styling */
+.prism-editor code {
     background: transparent;
     position: relative;
-  }
-  
-  .prism-editor code span.indent-guide {
+}
+
+.prism-editor code span.indent-guide {
     display: inline-block;
     width: 1em;
     margin-left: -1em;
     color: #ccc;
     pointer-events: none;
     font-size: 0.9em;
-  }
-  </style>
-  
\ No newline at end of file
+}
+</style>
diff --git a/client/src/components/Markdown/Editor/TextEditor.vue b/client/src/components/Markdown/Editor/TextEditor.vue
index 62867f5e46c2..b7b1b050d2fe 100644
--- a/client/src/components/Markdown/Editor/TextEditor.vue
+++ b/client/src/components/Markdown/Editor/TextEditor.vue
@@ -42,12 +42,12 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
-import FlexPanel from "@/components/Panels/FlexPanel";
 import _ from "underscore";
 import Vue from "vue";
 
 import MarkdownHelpModal from "@/components/Markdown/MarkdownHelpModal";
 import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox";
+import FlexPanel from "@/components/Panels/FlexPanel";
 
 Vue.use(BootstrapVue);
 
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 1115196098e4..f3182bcaa5fb 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed, onMounted, ref, watch } from "vue";
 
 import { useWorkflowStore } from "@/stores/workflowStore";
+
 import { parseMarkdown } from "./parse";
 
-import MarkdownGalaxy from "./Sections/MarkdownGalaxy.vue";
 import MarkdownDefault from "./Sections/MarkdownDefault.vue";
+import MarkdownGalaxy from "./Sections/MarkdownGalaxy.vue";
 import MarkdownVega from "./Sections/MarkdownVega.vue";
 import MarkdownVitessce from "./Sections/MarkdownVitessce.vue";
-
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import StsDownloadButton from "@/components/StsDownloadButton.vue";
 
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faDownload, faEdit } from "@fortawesome/free-solid-svg-icons";
-
 library.add(faDownload, faEdit);
 
 // Props
@@ -65,7 +64,7 @@ const effectiveExportLink = computed(() => (props.enable_beta_markdown_export ?
 const time = computed(() => {
     const generateTime = props.markdownConfig.generate_time;
     if (generateTime) {
-        let formattedTime = generateTime.endsWith("Z") ? generateTime : `${generateTime}Z`;
+        const formattedTime = generateTime.endsWith("Z") ? generateTime : `${generateTime}Z`;
         const date = new Date(formattedTime);
         return date.toLocaleString("default", {
             day: "numeric",
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 3943dfc59dde..b977dc75d05b 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,33 +1,26 @@
 <template>
-    <div id="columns" class="d-flex">
-        <TextEditor :title="title" :markdown-text="markdownText" :steps="steps" :mode="mode" />
-    </div>
+    <TextEditor :title="title" :markdown-text="markdownText" :steps="steps" :mode="mode" />
 </template>
 
-<script>
+<script setup lang="ts">
 import TextEditor from "./Editor/TextEditor.vue";
 
-export default {
-    components: {
-        TextEditor,
+defineProps({
+    markdownText: {
+        type: String,
+        default: null,
     },
-    props: {
-        markdownText: {
-            type: String,
-            default: null,
-        },
-        steps: {
-            type: Object,
-            default: null,
-        },
-        title: {
-            type: String,
-            default: null,
-        },
-        mode: {
-            type: String,
-            default: "report",
-        },
+    steps: {
+        type: Object,
+        default: null,
     },
-};
+    title: {
+        type: String,
+        default: null,
+    },
+    mode: {
+        type: String,
+        default: "report",
+    },
+});
 </script>
diff --git a/client/src/components/Markdown/Sections/MarkdownDefault.vue b/client/src/components/Markdown/Sections/MarkdownDefault.vue
index 2d3c81891741..9eb13c9d62cb 100644
--- a/client/src/components/Markdown/Sections/MarkdownDefault.vue
+++ b/client/src/components/Markdown/Sections/MarkdownDefault.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import MarkdownIt from "markdown-it";
 //@ts-ignore
 import markdownItRegexp from "markdown-it-regexp";
+import { computed } from "vue";
 
 const mdNewline = markdownItRegexp(/<br>/, () => {
     return "<div style='clear:both;'/><br>";
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 8d6da96eef49..50256e8c3731 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { computed, ref } from "vue";
 
-import { useConfig } from "@/composables/config";
 import { getArgs } from "@/components/Markdown/parse";
+import { useConfig } from "@/composables/config";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
 import HistoryDatasetAsTable from "./Elements/HistoryDatasetAsTable.vue";
diff --git a/client/src/components/Markdown/Sections/MarkdownVega.vue b/client/src/components/Markdown/Sections/MarkdownVega.vue
index dbd55571e18a..d4d1136dc452 100644
--- a/client/src/components/Markdown/Sections/MarkdownVega.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVega.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
 import { computed } from "vue";
 
+const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
+
 const props = defineProps<{
     content: string;
 }>();
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
index 4d79dc55ae6d..5d9f4f3faec9 100644
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+
 import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
 
 const props = defineProps<{
@@ -15,6 +16,6 @@ const dataIncoming = computed(() => ({
 
 <template>
     <div>
-        <visualization-wrapper name="vitessce" :data-incoming="dataIncoming" height="500px" />
+        <VisualizationWrapper name="vitessce" :data-incoming="dataIncoming" height="500px" />
     </div>
 </template>
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index 938d91123f79..a15551c91760 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+
 import { getAppRoot } from "@/onload/loadConfig";
 
 interface Props {
@@ -54,7 +55,12 @@ onMounted(() => {
 </script>
 
 <template>
-    <iframe ref="iframeRef" class="visualization-wrapper" :style="{ height: props.height || '100%' }"> </iframe>
+    <iframe
+        ref="iframeRef"
+        title="visualization"
+        class="visualization-wrapper"
+        :style="{ height: props.height || '100%' }">
+    </iframe>
 </template>
 
 <style>

From 1c970887e8f84faab5cf99341bf4b34314b18735 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 08:17:20 -0500
Subject: [PATCH 019/158] Use markdown help modal within text editor component

---
 .../components/Markdown/Editor/TextEditor.vue | 137 +++++++++---------
 .../components/Markdown/MarkdownEditor.vue    |  31 ++--
 .../components/Markdown/MarkdownHelpModal.vue |  37 -----
 3 files changed, 77 insertions(+), 128 deletions(-)
 delete mode 100644 client/src/components/Markdown/MarkdownHelpModal.vue

diff --git a/client/src/components/Markdown/Editor/TextEditor.vue b/client/src/components/Markdown/Editor/TextEditor.vue
index b7b1b050d2fe..ce1592958eb3 100644
--- a/client/src/components/Markdown/Editor/TextEditor.vue
+++ b/client/src/components/Markdown/Editor/TextEditor.vue
@@ -26,94 +26,87 @@
                 <div class="unified-panel-body d-flex">
                     <textarea
                         id="workflow-report-editor"
-                        ref="text-area"
+                        ref="textArea"
                         v-model="content"
                         class="markdown-textarea"
                         @input="onUpdate" />
                 </div>
             </div>
         </div>
-        <MarkdownHelpModal ref="help" :mode="mode" />
+        <b-modal v-model="showHelpModal" hide-footer>
+            <template v-slot:modal-title>
+                <h2 v-if="mode === 'page'" class="mb-0">Markdown Help for Pages</h2>
+                <h2 v-else class="mb-0">Markdown Help for Invocation Reports</h2>
+            </template>
+            <MarkdownHelp :mode="mode" />
+        </b-modal>
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import BootstrapVue from "bootstrap-vue";
-import _ from "underscore";
-import Vue from "vue";
+import { debounce } from "lodash";
+import { defineEmits, defineProps, nextTick, ref, watch } from "vue";
 
-import MarkdownHelpModal from "@/components/Markdown/MarkdownHelpModal";
-import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox";
-import FlexPanel from "@/components/Panels/FlexPanel";
-
-Vue.use(BootstrapVue);
+import MarkdownHelp from "@/components/Markdown/MarkdownHelp.vue";
+import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 
 library.add(faQuestion);
 
+const props = defineProps<{
+    markdownText: string;
+    mode: "report" | "page";
+    steps: Record<string, any>;
+    title: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "update", value: string): void;
+}>();
+
+const content = ref<string>(props.markdownText);
+const showHelpModal = ref<boolean>(false);
+const textArea = ref<HTMLTextAreaElement | null>(null);
+
 const FENCE = "```";
 
-export default {
-    components: {
-        FlexPanel,
-        FontAwesomeIcon,
-        MarkdownHelpModal,
-        MarkdownToolBox,
-    },
-    props: {
-        markdownText: {
-            type: String,
-            default: null,
-        },
-        steps: {
-            type: Object,
-            default: null,
-        },
-        title: {
-            type: String,
-            default: null,
-        },
-        mode: {
-            type: String,
-            default: "report",
-        },
-    },
-    data() {
-        return {
-            content: this.markdownText,
-        };
-    },
-    watch: {
-        markdownText() {
-            const textArea = this.$refs["text-area"];
-            const textCursor = textArea.selectionEnd;
-            this.content = this.markdownText;
-            Vue.nextTick(() => {
-                textArea.selectionEnd = textCursor;
-                textArea.focus();
-            });
-        },
-    },
-    methods: {
-        insertMarkdown(markdown) {
-            markdown = markdown.replace(")(", ", ");
-            markdown = `${FENCE}galaxy\n${markdown}\n${FENCE}\n`;
-            const textArea = this.$refs["text-area"];
-            textArea.focus();
-            const cursorPosition = textArea.selectionStart;
-            let newContent = this.content.substr(0, cursorPosition);
-            newContent += `\r\n${markdown.trim()}\r\n`;
-            newContent += this.content.substr(cursorPosition);
-            this.$emit("update", newContent);
-        },
-        onUpdate: _.debounce(function (e) {
-            this.$emit("update", this.content);
-        }, 300),
-        onHelp() {
-            this.$refs.help.showMarkdownHelp();
-        },
-    },
-};
+watch(
+    () => props.markdownText,
+    (newValue) => {
+        const textCursor = textArea.value?.selectionEnd || 0;
+        content.value = newValue;
+        nextTick(() => {
+            if (textArea.value) {
+                textArea.value.selectionEnd = textCursor;
+                textArea.value.focus();
+            }
+        });
+    }
+);
+
+function insertMarkdown(markdown: string) {
+    markdown = markdown.replace(")(", ", ");
+    markdown = `${FENCE}galaxy\n${markdown}\n${FENCE}\n`;
+    if (textArea.value) {
+        textArea.value.focus();
+        const cursorPosition = textArea.value.selectionStart;
+        const newContent =
+            content.value?.substr(0, cursorPosition) +
+            `\r\n${markdown.trim()}\r\n` +
+            content.value?.substr(cursorPosition);
+
+        emit("update", newContent || "");
+    }
+}
+
+const onUpdate = debounce((e: Event) => {
+    emit("update", content.value || "");
+}, 300);
+
+function onHelp() {
+    showHelpModal.value = true;
+}
 </script>
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index b977dc75d05b..5c6cbfa5ba43 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,26 +1,19 @@
 <template>
-    <TextEditor :title="title" :markdown-text="markdownText" :steps="steps" :mode="mode" />
+    <TextEditor
+        :title="title"
+        :markdown-text="markdownText"
+        :steps="steps"
+        :mode="mode"
+        @update="$emit('update', $event)" />
 </template>
 
 <script setup lang="ts">
 import TextEditor from "./Editor/TextEditor.vue";
 
-defineProps({
-    markdownText: {
-        type: String,
-        default: null,
-    },
-    steps: {
-        type: Object,
-        default: null,
-    },
-    title: {
-        type: String,
-        default: null,
-    },
-    mode: {
-        type: String,
-        default: "report",
-    },
-});
+defineProps<{
+    markdownText: string;
+    steps: Record<string, any>;
+    title: string;
+    mode: "report" | "page";
+}>();
 </script>
diff --git a/client/src/components/Markdown/MarkdownHelpModal.vue b/client/src/components/Markdown/MarkdownHelpModal.vue
deleted file mode 100644
index b4e605262c2a..000000000000
--- a/client/src/components/Markdown/MarkdownHelpModal.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-import MarkdownHelp from "./MarkdownHelp.vue";
-
-interface MarkdownHelpModalProps {
-    mode: "report" | "page";
-}
-
-const props = defineProps<MarkdownHelpModalProps>();
-
-const show = ref(false);
-const title = computed(() => {
-    if (props.mode == "page") {
-        return "Markdown Help for Pages";
-    } else {
-        return "Markdown Help for Invocation Reports";
-    }
-});
-
-function showMarkdownHelp() {
-    show.value = true;
-}
-
-defineExpose({
-    showMarkdownHelp,
-});
-</script>
-
-<template>
-    <b-modal v-model="show" hide-footer>
-        <template v-slot:modal-title>
-            <h2 class="mb-0">{{ title }}</h2>
-        </template>
-        <MarkdownHelp :mode="mode" />
-    </b-modal>
-</template>

From 0bc2991d36bfd0a28f58cc71c720e4d20d652f72 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 13:15:43 -0500
Subject: [PATCH 020/158] Move help modal and buttons to parent wrapper

---
 .../components/Markdown/Editor/TextEditor.vue | 50 ++--------------
 .../components/Markdown/MarkdownEditor.vue    | 59 +++++++++++++++++--
 2 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/client/src/components/Markdown/Editor/TextEditor.vue b/client/src/components/Markdown/Editor/TextEditor.vue
index ce1592958eb3..7731479a8608 100644
--- a/client/src/components/Markdown/Editor/TextEditor.vue
+++ b/client/src/components/Markdown/Editor/TextEditor.vue
@@ -5,57 +5,24 @@
         </FlexPanel>
         <div id="center" class="overflow-auto w-100">
             <div class="markdown-editor h-100">
-                <div class="unified-panel-header" unselectable="on">
-                    <div class="unified-panel-header-inner">
-                        <div class="panel-header-buttons">
-                            <slot name="buttons" />
-                            <b-button
-                                v-b-tooltip.hover.bottom
-                                title="Help"
-                                variant="link"
-                                role="button"
-                                @click="onHelp">
-                                <FontAwesomeIcon icon="question" />
-                            </b-button>
-                        </div>
-                        <div class="my-1">
-                            {{ title }}
-                        </div>
-                    </div>
-                </div>
-                <div class="unified-panel-body d-flex">
-                    <textarea
-                        id="workflow-report-editor"
-                        ref="textArea"
-                        v-model="content"
-                        class="markdown-textarea"
-                        @input="onUpdate" />
-                </div>
+                <textarea
+                    id="workflow-report-editor"
+                    ref="textArea"
+                    v-model="content"
+                    class="markdown-textarea"
+                    @input="onUpdate" />
             </div>
         </div>
-        <b-modal v-model="showHelpModal" hide-footer>
-            <template v-slot:modal-title>
-                <h2 v-if="mode === 'page'" class="mb-0">Markdown Help for Pages</h2>
-                <h2 v-else class="mb-0">Markdown Help for Invocation Reports</h2>
-            </template>
-            <MarkdownHelp :mode="mode" />
-        </b-modal>
     </div>
 </template>
 
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { debounce } from "lodash";
 import { defineEmits, defineProps, nextTick, ref, watch } from "vue";
 
-import MarkdownHelp from "@/components/Markdown/MarkdownHelp.vue";
 import MarkdownToolBox from "@/components/Markdown/MarkdownToolBox.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 
-library.add(faQuestion);
-
 const props = defineProps<{
     markdownText: string;
     mode: "report" | "page";
@@ -68,7 +35,6 @@ const emit = defineEmits<{
 }>();
 
 const content = ref<string>(props.markdownText);
-const showHelpModal = ref<boolean>(false);
 const textArea = ref<HTMLTextAreaElement | null>(null);
 
 const FENCE = "```";
@@ -105,8 +71,4 @@ function insertMarkdown(markdown: string) {
 const onUpdate = debounce((e: Event) => {
     emit("update", content.value || "");
 }, 300);
-
-function onHelp() {
-    showHelpModal.value = true;
-}
 </script>
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 5c6cbfa5ba43..5dddd1b056c3 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,14 +1,55 @@
 <template>
-    <TextEditor
-        :title="title"
-        :markdown-text="markdownText"
-        :steps="steps"
-        :mode="mode"
-        @update="$emit('update', $event)" />
+    <div id="columns" class="d-flex">
+        <div id="center" class="overflow-auto w-100">
+            <div class="markdown-editor h-100">
+                <div class="unified-panel-header" unselectable="on">
+                    <div class="unified-panel-header-inner">
+                        <div class="panel-header-buttons">
+                            <slot name="buttons" />
+                            <b-button
+                                v-b-tooltip.hover.bottom
+                                title="Help"
+                                variant="link"
+                                role="button"
+                                @click="onHelp">
+                                <FontAwesomeIcon icon="question" />
+                            </b-button>
+                        </div>
+                        <div class="my-1">
+                            {{ title }}
+                        </div>
+                    </div>
+                </div>
+                <div class="unified-panel-body d-flex">
+                    <TextEditor
+                        :title="title"
+                        :markdown-text="markdownText"
+                        :steps="steps"
+                        :mode="mode"
+                        @update="$emit('update', $event)" />
+                </div>
+            </div>
+        </div>
+        <b-modal v-model="showHelpModal" hide-footer>
+            <template v-slot:modal-title>
+                <h2 v-if="mode === 'page'" class="mb-0">Markdown Help for Pages</h2>
+                <h2 v-else class="mb-0">Markdown Help for Invocation Reports</h2>
+            </template>
+            <MarkdownHelp :mode="mode" />
+        </b-modal>
+    </div>
 </template>
 
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref } from "vue";
+
 import TextEditor from "./Editor/TextEditor.vue";
+import MarkdownHelp from "@/components/Markdown/MarkdownHelp.vue";
+
+library.add(faQuestion);
 
 defineProps<{
     markdownText: string;
@@ -16,4 +57,10 @@ defineProps<{
     title: string;
     mode: "report" | "page";
 }>();
+
+const showHelpModal = ref<boolean>(false);
+
+function onHelp() {
+    showHelpModal.value = true;
+}
 </script>

From 1445c5cfa2c60daa65e7b8c68f704f25fd0771b9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 17:14:04 -0500
Subject: [PATCH 021/158] Refine markup

---
 .../components/Markdown/Editor/TextEditor.vue | 27 ++++++-----
 .../components/Markdown/MarkdownEditor.vue    | 47 ++++++++-----------
 client/src/style/scss/markdown.scss           | 15 ------
 3 files changed, 36 insertions(+), 53 deletions(-)

diff --git a/client/src/components/Markdown/Editor/TextEditor.vue b/client/src/components/Markdown/Editor/TextEditor.vue
index 7731479a8608..0647a76118cc 100644
--- a/client/src/components/Markdown/Editor/TextEditor.vue
+++ b/client/src/components/Markdown/Editor/TextEditor.vue
@@ -1,18 +1,14 @@
 <template>
-    <div id="columns" class="d-flex">
+    <div class="d-flex h-100 w-100">
         <FlexPanel side="left">
             <MarkdownToolBox :steps="steps" @insert="insertMarkdown" />
         </FlexPanel>
-        <div id="center" class="overflow-auto w-100">
-            <div class="markdown-editor h-100">
-                <textarea
-                    id="workflow-report-editor"
-                    ref="textArea"
-                    v-model="content"
-                    class="markdown-textarea"
-                    @input="onUpdate" />
-            </div>
-        </div>
+        <textarea
+            id="workflow-report-editor"
+            ref="textArea"
+            v-model="content"
+            class="markdown-textarea w-100 p-4"
+            @input="onUpdate" />
     </div>
 </template>
 
@@ -72,3 +68,12 @@ const onUpdate = debounce((e: Event) => {
     emit("update", content.value || "");
 }, 300);
 </script>
+
+<style scoped>
+.markdown-textarea {
+    border: none;
+    resize: none;
+    outline: none;
+    font: 16px/1.7 Menlo, Consolas, Monaco, "Andale Mono", monospace;
+}
+</style>
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 5dddd1b056c3..2fc550000f0d 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,33 +1,26 @@
 <template>
-    <div id="columns" class="d-flex">
-        <div id="center" class="overflow-auto w-100">
-            <div class="markdown-editor h-100">
-                <div class="unified-panel-header" unselectable="on">
-                    <div class="unified-panel-header-inner">
-                        <div class="panel-header-buttons">
-                            <slot name="buttons" />
-                            <b-button
-                                v-b-tooltip.hover.bottom
-                                title="Help"
-                                variant="link"
-                                role="button"
-                                @click="onHelp">
-                                <FontAwesomeIcon icon="question" />
-                            </b-button>
-                        </div>
-                        <div class="my-1">
-                            {{ title }}
-                        </div>
+    <div id="columns">
+        <div id="center" class="d-flex flex-column h-100 w-100">
+            <div class="unified-panel-header" unselectable="on">
+                <div class="unified-panel-header-inner">
+                    <div class="panel-header-buttons">
+                        <slot name="buttons" />
+                        <b-button v-b-tooltip.hover.bottom title="Help" variant="link" role="button" @click="onHelp">
+                            <FontAwesomeIcon icon="question" />
+                        </b-button>
+                    </div>
+                    <div class="my-1">
+                        {{ title }}
                     </div>
                 </div>
-                <div class="unified-panel-body d-flex">
-                    <TextEditor
-                        :title="title"
-                        :markdown-text="markdownText"
-                        :steps="steps"
-                        :mode="mode"
-                        @update="$emit('update', $event)" />
-                </div>
+            </div>
+            <div class="unified-panel-body">
+                <TextEditor
+                    :title="title"
+                    :markdown-text="markdownText"
+                    :steps="steps"
+                    :mode="mode"
+                    @update="$emit('update', $event)" />
             </div>
         </div>
         <b-modal v-model="showHelpModal" hide-footer>
diff --git a/client/src/style/scss/markdown.scss b/client/src/style/scss/markdown.scss
index 31de045c3a60..62292052aee4 100644
--- a/client/src/style/scss/markdown.scss
+++ b/client/src/style/scss/markdown.scss
@@ -1,18 +1,3 @@
-.markdown-editor {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    .markdown-textarea {
-        @extend .p-4;
-        @extend .w-100;
-        border: none;
-        resize: none;
-        outline: none;
-        font: 16px/1.7 Menlo, Consolas, Monaco, "Andale Mono", monospace;
-        flex: 1;
-    }
-}
-
 .markdown-wrapper {
     @extend .px-4;
     .markdown-components {

From 1d5d036583905383860eaf47250a598241335dd8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 17:37:43 -0500
Subject: [PATCH 022/158] Allow switching between editor types

---
 .../components/Markdown/Editor/CodeEditor.vue | 106 ------------------
 .../components/Markdown/MarkdownEditor.vue    |  30 ++++-
 2 files changed, 26 insertions(+), 110 deletions(-)
 delete mode 100644 client/src/components/Markdown/Editor/CodeEditor.vue

diff --git a/client/src/components/Markdown/Editor/CodeEditor.vue b/client/src/components/Markdown/Editor/CodeEditor.vue
deleted file mode 100644
index c93ac7a0dc32..000000000000
--- a/client/src/components/Markdown/Editor/CodeEditor.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-    <div ref="editor" contenteditable="true" class="prism-editor">
-        <pre class="language-json line-numbers"><code v-html="highlightedContent"></code></pre>
-    </div>
-</template>
-
-<script setup lang="ts">
-import "prismjs/themes/prism-coy.css"; // Choose your theme
-import "prismjs/components/prism-json"; // Load the language
-import "prismjs/plugins/line-numbers/prism-line-numbers.css"; // Line numbers plugin styles
-import "prismjs/plugins/line-numbers/prism-line-numbers"; // Line numbers plugin
-
-//@ts-ignore
-import Prism from "prismjs";
-import { onMounted, ref, watch } from "vue";
-
-// Props for initial content
-const props = defineProps({
-    content: {
-        type: String,
-        required: true,
-    },
-});
-
-// Refs
-const editor = ref<HTMLElement | null>(null);
-const highlightedContent = ref(props.content);
-
-// Helper function to add indent guides
-function addIndentGuides(content: string): string {
-    return content.replace(/^(\s+)/gm, (match) => {
-        return match
-            .split("")
-            .map(() => '<span class="indent-guide">|</span>')
-            .join("");
-    });
-}
-
-// Watch for content changes and re-highlight
-watch(
-    () => props.content,
-    () => {
-        highlightedContent.value = addIndentGuides(Prism.highlight(props.content, Prism.languages.json, "json"));
-    }
-);
-
-// Initialize Prism.js highlighting on mount
-onMounted(() => {
-    highlightedContent.value = addIndentGuides(Prism.highlight(props.content, Prism.languages.json, "json"));
-});
-</script>
-
-<style scoped>
-/* Editor Styling */
-.prism-editor {
-    border: 1px solid #ccc;
-    background: #f9f9f9;
-    font-family: monospace;
-    padding: 1rem;
-    white-space: pre-wrap;
-    overflow-x: auto;
-    border-radius: 5px;
-    position: relative;
-}
-
-/* Line Numbers Styling */
-pre.line-numbers {
-    position: relative;
-    padding-left: 3.8em !important; /* Adjust for line number width */
-    counter-reset: linenumber;
-}
-
-pre.line-numbers > code {
-    position: relative;
-    display: block;
-    padding-left: 0;
-}
-
-.line-numbers-rows {
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    left: 0;
-    width: 3em;
-    border-right: 1px solid #ddd;
-    color: #999;
-    font-size: 0.875em;
-    line-height: 1.5;
-    text-align: right;
-}
-
-/* Indent Guides Styling */
-.prism-editor code {
-    background: transparent;
-    position: relative;
-}
-
-.prism-editor code span.indent-guide {
-    display: inline-block;
-    width: 1em;
-    margin-left: -1em;
-    color: #ccc;
-    pointer-events: none;
-    font-size: 0.9em;
-}
-</style>
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 2fc550000f0d..f73af05f764f 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -3,19 +3,33 @@
         <div id="center" class="d-flex flex-column h-100 w-100">
             <div class="unified-panel-header" unselectable="on">
                 <div class="unified-panel-header-inner">
-                    <div class="panel-header-buttons">
+                    <div class="my-1">
+                        {{ title }}
+                    </div>
+                    <div>
                         <slot name="buttons" />
                         <b-button v-b-tooltip.hover.bottom title="Help" variant="link" role="button" @click="onHelp">
                             <FontAwesomeIcon icon="question" />
                         </b-button>
-                    </div>
-                    <div class="my-1">
-                        {{ title }}
+                        <b-form-radio-group
+                            v-model="editor"
+                            size="sm"
+                            button-variant="outline-primary"
+                            :options="editorOptions"
+                            buttons />
                     </div>
                 </div>
             </div>
             <div class="unified-panel-body">
                 <TextEditor
+                    v-if="editor === 'text'"
+                    :title="title"
+                    :markdown-text="markdownText"
+                    :steps="steps"
+                    :mode="mode"
+                    @update="$emit('update', $event)" />
+                <CellEditor
+                    v-else
                     :title="title"
                     :markdown-text="markdownText"
                     :steps="steps"
@@ -39,6 +53,7 @@ import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
+import CellEditor from "./Editor/CellEditor.vue";
 import TextEditor from "./Editor/TextEditor.vue";
 import MarkdownHelp from "@/components/Markdown/MarkdownHelp.vue";
 
@@ -53,6 +68,13 @@ defineProps<{
 
 const showHelpModal = ref<boolean>(false);
 
+const editorOptions = ref([
+    { text: "Text", value: "text" },
+    { text: "Cells", value: "cells" },
+]);
+
+const editor = ref("text");
+
 function onHelp() {
     showHelpModal.value = true;
 }

From f68720b4da63e36ac836d23439e14a11928510f9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 17:41:22 -0500
Subject: [PATCH 023/158] Add tooltip

---
 client/src/components/Markdown/MarkdownEditor.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index f73af05f764f..ef6241128561 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -7,16 +7,18 @@
                         {{ title }}
                     </div>
                     <div>
+                        <b-form-radio-group
+                            v-model="editor"
+                            v-b-tooltip.hover.bottom
+                            button-variant="outline-primary"
+                            buttons
+                            size="sm"
+                            title="Editor"
+                            :options="editorOptions" />
                         <slot name="buttons" />
                         <b-button v-b-tooltip.hover.bottom title="Help" variant="link" role="button" @click="onHelp">
                             <FontAwesomeIcon icon="question" />
                         </b-button>
-                        <b-form-radio-group
-                            v-model="editor"
-                            size="sm"
-                            button-variant="outline-primary"
-                            :options="editorOptions"
-                            buttons />
                     </div>
                 </div>
             </div>

From afc6ff5399b91d74818ea896a930774f68f5d1e9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 14 Jan 2025 17:42:54 -0500
Subject: [PATCH 024/158] Reduce editor font-size from 16 to 14

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

diff --git a/client/src/components/Markdown/Editor/TextEditor.vue b/client/src/components/Markdown/Editor/TextEditor.vue
index 0647a76118cc..f4997eb5d8ae 100644
--- a/client/src/components/Markdown/Editor/TextEditor.vue
+++ b/client/src/components/Markdown/Editor/TextEditor.vue
@@ -74,6 +74,6 @@ const onUpdate = debounce((e: Event) => {
     border: none;
     resize: none;
     outline: none;
-    font: 16px/1.7 Menlo, Consolas, Monaco, "Andale Mono", monospace;
+    font: 14px/1.7 Menlo, Consolas, Monaco, "Andale Mono", monospace;
 }
 </style>

From 7398efe7c46822ab9c1b27492f95cf35f3be2f05 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 15 Jan 2025 07:34:09 -0500
Subject: [PATCH 025/158] Resolve missing prop console warnings

---
 .../components/Markdown/Editor/CellEditor.vue | 24 +++++++++++++++++++
 .../components/Markdown/Editor/TextEditor.vue |  2 +-
 .../components/Markdown/MarkdownEditor.vue    |  5 ++--
 3 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/CellEditor.vue

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
new file mode 100644
index 000000000000..3d3a64a681a0
--- /dev/null
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -0,0 +1,24 @@
+<template>
+    <div class="d-flex h-100 w-100">
+        {{ markdownText }}
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { parseMarkdown } from "../parse";
+
+const props = defineProps<{
+    markdownText: string;
+}>();
+
+interface CellType {
+    name: string;
+    content: string;
+}
+
+const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
+
+console.log(cells.value);
+</script>
diff --git a/client/src/components/Markdown/Editor/TextEditor.vue b/client/src/components/Markdown/Editor/TextEditor.vue
index f4997eb5d8ae..261e9bd0d08d 100644
--- a/client/src/components/Markdown/Editor/TextEditor.vue
+++ b/client/src/components/Markdown/Editor/TextEditor.vue
@@ -22,7 +22,7 @@ import FlexPanel from "@/components/Panels/FlexPanel.vue";
 const props = defineProps<{
     markdownText: string;
     mode: "report" | "page";
-    steps: Record<string, any>;
+    steps?: Record<string, any>;
     title: string;
 }>();
 
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index ef6241128561..8a734e77eeb0 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -63,20 +63,19 @@ library.add(faQuestion);
 
 defineProps<{
     markdownText: string;
-    steps: Record<string, any>;
+    steps?: Record<string, any>;
     title: string;
     mode: "report" | "page";
 }>();
 
 const showHelpModal = ref<boolean>(false);
 
+const editor = ref("cells");
 const editorOptions = ref([
     { text: "Text", value: "text" },
     { text: "Cells", value: "cells" },
 ]);
 
-const editor = ref("text");
-
 function onHelp() {
     showHelpModal.value = true;
 }

From 79497ef8a5336651af12fce14ca043b6c79f5690 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 15 Jan 2025 08:19:26 -0500
Subject: [PATCH 026/158] Avoid parsing empty rows, prepare for more
 generalized typing in parse module

---
 .../components/Markdown/Editor/CellEditor.vue | 12 ++++++----
 client/src/components/Markdown/parse.ts       | 23 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 3d3a64a681a0..627d7b663b18 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,13 +1,17 @@
 <template>
-    <div class="d-flex h-100 w-100">
-        {{ markdownText }}
+    <div class="h-100 w-100">
+        <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
+            <div class="border rounded m-2 p-2">
+                {{ cell }}
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { parseMarkdown } from "../parse";
+import { parseMarkdown } from "@/components/Markdown/parse";
 
 const props = defineProps<{
     markdownText: string;
@@ -19,6 +23,4 @@ interface CellType {
 }
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
-
-console.log(cells.value);
 </script>
diff --git a/client/src/components/Markdown/parse.ts b/client/src/components/Markdown/parse.ts
index 58e664ada52f..1acaa643d5fa 100644
--- a/client/src/components/Markdown/parse.ts
+++ b/client/src/components/Markdown/parse.ts
@@ -5,14 +5,21 @@ const FUNCTION_CALL_LINE = `\\s*(\\w+)\\s*\\(\\s*(?:(${FUNCTION_ARGUMENT_REGEX})
 const FUNCTION_CALL_LINE_TEMPLATE = new RegExp(FUNCTION_CALL_LINE, "m");
 
 type DefaultSection = { name: "default"; content: string };
-type GalaxyDirectiveSection = { name: string; content: string; args: { [key: string]: string } };
-type Section = DefaultSection | GalaxyDirectiveSection;
+type GalaxySection = { name: string; content: string; args: { [key: string]: string } };
+type Section = DefaultSection | GalaxySection;
 
 type WorkflowLabelKind = "input" | "output" | "step";
 
 const SINGLE_QUOTE = "'";
 const DOUBLE_QUOTE = '"';
 
+function parseResult(result: { name: string; content: string }[], name: string, content: string[]) {
+    const trimmedContent = content.join("\n").trim();
+    if (trimmedContent.length > 0) {
+        result.push({ name: name, content: trimmedContent });
+    }
+}
+
 export function parseMarkdown(input: string): { name: string; content: string }[] {
     const result: { name: string; content: string }[] = [];
     const lines = input.split("\n");
@@ -21,18 +28,14 @@ export function parseMarkdown(input: string): { name: string; content: string }[
     lines.forEach((line) => {
         const sectionMatch = line.match(/^```(.*)$/);
         if (sectionMatch) {
-            if (currentContent.length > 0) {
-                result.push({ name: currentName, content: currentContent.join("\n").trim() });
-            }
+            parseResult(result, currentName, currentContent);
             currentName = sectionMatch[1] || "default";
             currentContent = [];
         } else {
             currentContent.push(line);
         }
     });
-    if (currentContent.length > 0) {
-        result.push({ name: currentName, content: currentContent.join("\n").trim() });
-    }
+    parseResult(result, currentName, currentContent);
     return result;
 }
 
@@ -92,7 +95,7 @@ export function replaceLabel(
 
     function rewriteSection(section: Section) {
         if ("args" in section) {
-            const directiveSection = section as GalaxyDirectiveSection;
+            const directiveSection = section as GalaxySection;
             const args = directiveSection.args;
             if (!(labelType in args)) {
                 return section;
@@ -144,7 +147,7 @@ function getQuoteChar(argMatch: string): string {
     return quoteChar;
 }
 
-export function getArgs(content: string): GalaxyDirectiveSection {
+export function getArgs(content: string): GalaxySection {
     const galaxy_function = FUNCTION_CALL_LINE_TEMPLATE.exec(content);
     if (galaxy_function == null) {
         throw Error("Failed to parse galaxy directive");

From a9433a2aa474eb7fb6c668876de3db7dc26cd5e0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 15 Jan 2025 12:49:32 -0500
Subject: [PATCH 027/158] Use documented option to place popper instead of
 manually applying margin

---
 client/src/components/Markdown/Editor/CellEditor.vue | 9 ++++++++-
 client/src/components/Popper/Popper.vue              | 2 +-
 client/src/components/Popper/usePopper.ts            | 8 ++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 627d7b663b18..bf67f4741260 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,7 +1,10 @@
 <template>
     <div class="h-100 w-100">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
-            <div class="border rounded m-2 p-2">
+            <CellButton>
+                <FontAwesomeIcon :icon="faPlusSquare" />
+            </CellButton>
+            <div class="border rounded mx-2 p-2">
                 {{ cell }}
             </div>
         </div>
@@ -9,10 +12,14 @@
 </template>
 
 <script setup lang="ts">
+import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
+import CellButton from "./CellButton.vue";
+
 const props = defineProps<{
     markdownText: string;
 }>();
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 3bd3332813b2..13dfbd994f30 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -3,7 +3,7 @@
         <span v-if="!referenceEl" ref="reference">
             <slot name="reference" />
         </span>
-        <div v-show="visible" ref="popper" class="popper-element mt-1" :class="`popper-element-${mode}`">
+        <div v-show="visible" ref="popper" class="popper-element" :class="`popper-element-${mode}`">
             <div v-if="arrow" class="popper-arrow" data-popper-arrow />
             <div v-if="title" class="popper-header px-2 py-1 rounded-top d-flex justify-content-between">
                 <span class="px-1">{{ title }}</span>
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index aa34f7b4f94c..dbdcb5cd5041 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -31,6 +31,14 @@ export function usePopper(
         instance.value = createPopper(reference.value, popper.value, {
             placement: options.placement ?? "bottom",
             strategy: "absolute",
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, 5],
+                    },
+                },
+            ],
         });
 
         const trigger = options.trigger ?? defaultTrigger;

From 0e83ac74e898bbeb2401684e767e3d782c1ab36c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 15 Jan 2025 17:41:59 -0500
Subject: [PATCH 028/158] Add event handler as prep to insert cells

---
 .../Markdown/Editor/CellButtonAdd.vue         | 37 ++++++++++++++++
 .../components/Markdown/Editor/CellEditor.vue | 13 +++---
 .../components/Markdown/Editor/CellOption.vue | 42 +++++++++++++++++++
 3 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/CellButtonAdd.vue
 create mode 100644 client/src/components/Markdown/Editor/CellOption.vue

diff --git a/client/src/components/Markdown/Editor/CellButtonAdd.vue b/client/src/components/Markdown/Editor/CellButtonAdd.vue
new file mode 100644
index 000000000000..8ecd95c4ad70
--- /dev/null
+++ b/client/src/components/Markdown/Editor/CellButtonAdd.vue
@@ -0,0 +1,37 @@
+<template>
+    <Popper trigger="click" placement="right" mode="light" :arrow="false">
+        <template v-slot:reference>
+            <div v-b-tooltip.right class="d-inline text-muted ml-2 cursor-pointer" title="Insert new Cell">
+                <FontAwesomeIcon :icon="faPlusSquare" />
+            </div>
+        </template>
+        <div class="cursor-pointer">
+            <CellOption
+                title="Markdown"
+                description="Markdown text element"
+                :icon="faPlusSquare"
+                @click="onClick('markdown')" />
+            <CellOption title="Vega" description="Vega Graphics" @click="onClick('vega')" />
+        </div>
+    </Popper>
+</template>
+
+<script setup lang="ts">
+import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import CellOption from "./CellOption.vue";
+import Popper from "@/components/Popper/Popper.vue";
+
+const props = defineProps<{
+    cellIndex: number;
+}>();
+
+const emit = defineEmits<{
+    (e: "click", cellIndex: number, cellType: string): void;
+}>();
+
+function onClick(cellType: string) {
+    emit("click", props.cellIndex, cellType);
+}
+</script>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index bf67f4741260..fe95f8f07ae0 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,24 +1,21 @@
 <template>
     <div class="h-100 w-100">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
-            <CellButton>
-                <FontAwesomeIcon :icon="faPlusSquare" />
-            </CellButton>
+            <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
             <div class="border rounded mx-2 p-2">
                 {{ cell }}
             </div>
         </div>
+        <CellButtonAdd :cell-index="cells.length" @click="onClick" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
-import CellButton from "./CellButton.vue";
+import CellButtonAdd from "./CellButtonAdd.vue";
 
 const props = defineProps<{
     markdownText: string;
@@ -30,4 +27,8 @@ interface CellType {
 }
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
+
+function onClick(cellIndex: number, cellType: string) {
+    console.log([cellIndex, cellType]);
+}
 </script>
diff --git a/client/src/components/Markdown/Editor/CellOption.vue b/client/src/components/Markdown/Editor/CellOption.vue
new file mode 100644
index 000000000000..8c789bbdb3b7
--- /dev/null
+++ b/client/src/components/Markdown/Editor/CellOption.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="cell-option d-flex justify-content-between rounded m-1" @click="$emit('click')">
+        <div class="m-2">
+            <div class="font-weight-bold">{{ title }}</div>
+            <small>{{ description }}</small>
+        </div>
+        <div v-if="icon" class="m-2 align-self-center">
+            <FontAwesomeIcon :icon="icon" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+defineProps<{
+    title: string;
+    description: string;
+    icon?: any;
+}>();
+
+defineEmits<{
+    (e: "click"): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.cell-option {
+    &:hover {
+        background: $brand-primary;
+        color: $white;
+        small {
+            color: $white;
+        }
+    }
+    small {
+        color: $text-muted;
+    }
+}
+</style>

From ff97e5ce20a80b36f9a40a691f68d4a666f81ab0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 15 Jan 2025 17:44:55 -0500
Subject: [PATCH 029/158] Show arrow in popover

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

diff --git a/client/src/components/Markdown/Editor/CellButtonAdd.vue b/client/src/components/Markdown/Editor/CellButtonAdd.vue
index 8ecd95c4ad70..044126a0ae50 100644
--- a/client/src/components/Markdown/Editor/CellButtonAdd.vue
+++ b/client/src/components/Markdown/Editor/CellButtonAdd.vue
@@ -1,5 +1,5 @@
 <template>
-    <Popper trigger="click" placement="right" mode="light" :arrow="false">
+    <Popper trigger="click" placement="right" mode="light">
         <template v-slot:reference>
             <div v-b-tooltip.right class="d-inline text-muted ml-2 cursor-pointer" title="Insert new Cell">
                 <FontAwesomeIcon :icon="faPlusSquare" />

From ddd4fe6f08a62a036ad6d02bcec38900807fbbd7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 16 Jan 2025 10:12:07 -0500
Subject: [PATCH 030/158] Add additional insert options

---
 .../Markdown/Editor/CellButtonAdd.vue         | 23 +++++++++++++++----
 .../components/Markdown/Editor/CellEditor.vue | 16 +++++++++++--
 .../components/Markdown/Editor/CellOption.vue |  8 +++++--
 3 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellButtonAdd.vue b/client/src/components/Markdown/Editor/CellButtonAdd.vue
index 044126a0ae50..a942b13098bf 100644
--- a/client/src/components/Markdown/Editor/CellButtonAdd.vue
+++ b/client/src/components/Markdown/Editor/CellButtonAdd.vue
@@ -1,9 +1,14 @@
 <template>
     <Popper trigger="click" placement="right" mode="light">
         <template v-slot:reference>
-            <div v-b-tooltip.right class="d-inline text-muted ml-2 cursor-pointer" title="Insert new Cell">
-                <FontAwesomeIcon :icon="faPlusSquare" />
-            </div>
+            <span
+                v-b-tooltip.right
+                role="button"
+                tabindex="0"
+                class="d-inline text-muted ml-3 cursor-pointer"
+                title="Insert new Cell">
+                <FontAwesomeIcon class="text-primary" :icon="faPlusSquare" />
+            </span>
         </template>
         <div class="cursor-pointer">
             <CellOption
@@ -11,7 +16,17 @@
                 description="Markdown text element"
                 :icon="faPlusSquare"
                 @click="onClick('markdown')" />
-            <CellOption title="Vega" description="Vega Graphics" @click="onClick('vega')" />
+            <CellOption
+                title="Galaxy Element"
+                description="Galaxy element"
+                :icon="faPlusSquare"
+                @click="onClick('galaxy')" />
+            <CellOption title="Vega" description="Vega Graphics" :icon="faPlusSquare" @click="onClick('vega')" />
+            <CellOption
+                title="Vitessce"
+                description="Vitessce Graphics"
+                :icon="faPlusSquare"
+                @click="onClick('vitessce')" />
         </div>
     </Popper>
 </template>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index fe95f8f07ae0..9d39e243db9d 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -2,8 +2,9 @@
     <div class="h-100 w-100">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
             <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
-            <div class="border rounded mx-2 p-2">
-                {{ cell }}
+            <div class="cell-card d-flex flex-column border rounded mx-3">
+                <div class="cell-card-header rounded-top p-1 small text-primary">{{ cell.name }}</div>
+                <div class="p-2">{{ cell.content }}</div>
             </div>
         </div>
         <CellButtonAdd :cell-index="cells.length" @click="onClick" />
@@ -32,3 +33,14 @@ function onClick(cellIndex: number, cellType: string) {
     console.log([cellIndex, cellType]);
 }
 </script>
+
+<style lang="scss">
+@import "theme/blue.scss";
+
+.cell-card {
+    .cell-card-header {
+        //background: $brand-primary;
+        //color: $white;
+    }
+}
+</style>
diff --git a/client/src/components/Markdown/Editor/CellOption.vue b/client/src/components/Markdown/Editor/CellOption.vue
index 8c789bbdb3b7..44a589c84516 100644
--- a/client/src/components/Markdown/Editor/CellOption.vue
+++ b/client/src/components/Markdown/Editor/CellOption.vue
@@ -1,5 +1,9 @@
 <template>
-    <div class="cell-option d-flex justify-content-between rounded m-1" @click="$emit('click')">
+    <span
+        role="button"
+        tabindex="0"
+        class="cell-option d-flex justify-content-between rounded m-1"
+        @click="$emit('click')">
         <div class="m-2">
             <div class="font-weight-bold">{{ title }}</div>
             <small>{{ description }}</small>
@@ -7,7 +11,7 @@
         <div v-if="icon" class="m-2 align-self-center">
             <FontAwesomeIcon :icon="icon" />
         </div>
-    </div>
+    </span>
 </template>
 
 <script setup lang="ts">

From f3d38169dccb3e9a29362ee8a4390e0e2b1404d8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 18 Jan 2025 13:46:58 -0500
Subject: [PATCH 031/158] Consider editor layouts

---
 .../src/components/Markdown/Editor/CellEditor.vue   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 9d39e243db9d..9265deb0ca04 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -2,10 +2,12 @@
     <div class="h-100 w-100">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
             <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
-            <div class="cell-card d-flex flex-column border rounded mx-3">
-                <div class="cell-card-header rounded-top p-1 small text-primary">{{ cell.name }}</div>
-                <div class="p-2">{{ cell.content }}</div>
+            <hr class="solid m-0">
+            <div class="cell-card d-flex rounded my-1 mx-3">
+                <span class="small text-primary">{{ cell.name }}</span>
+                <div class="ml-2">{{ cell.content }}</div>
             </div>
+            <hr class="solid m-0">
         </div>
         <CellButtonAdd :cell-index="cells.length" @click="onClick" />
     </div>
@@ -38,9 +40,10 @@ function onClick(cellIndex: number, cellType: string) {
 @import "theme/blue.scss";
 
 .cell-card {
+    //background: $gray-100;
     .cell-card-header {
-        //background: $brand-primary;
-        //color: $white;
+        background: lighten($brand-info, 20%);
+        color: $white;
     }
 }
 </style>

From 59026dd63f00e12e5041971627fe37e04bb7382c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 19 Jan 2025 08:57:38 -0500
Subject: [PATCH 032/158] Add ace editor

---
 .../components/Markdown/Editor/CellCode.vue   | 76 +++++++++++++++++++
 .../components/Markdown/Editor/CellEditor.vue |  7 +-
 package.json                                  |  1 +
 3 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/CellCode.vue

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
new file mode 100644
index 000000000000..17055cf4eafe
--- /dev/null
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -0,0 +1,76 @@
+<template>
+    <div ref="editor" class="editor" />
+</template>
+
+<script setup>
+import ace from "ace-builds";
+import { onMounted, ref } from "vue";
+
+// Props
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true,
+    },
+    theme: {
+        type: String,
+        default: "github_light_default",
+    },
+    mode: {
+        type: String,
+        default: "javascript",
+    },
+});
+
+// Emit for v-model
+//const emit = defineEmits(['update:modelValue']);
+
+const editor = ref(null); // Reference to the editor DOM element
+
+async function buildEditor() {
+    const modePath = `ace/mode/${props.mode}`;
+    const themePath = `ace/theme/${props.theme}`;
+    const modeUrl = await import(`ace-builds/src-noconflict/mode-${props.mode}?url`);
+    const themeUrl = await import(`ace-builds/src-noconflict/theme-${props.theme}?url`);
+    ace.config.setModuleUrl(modePath, modeUrl);
+    ace.config.setModuleUrl(themePath, themeUrl);
+    ace.edit(editor.value, {
+        value: props.modelValue,
+        theme: themePath,
+        mode: modePath,
+        showPrintMargin: false,
+        useWorker: false,
+    });
+
+    /*/ Update modelValue when editor content changes
+    // Set the mode (language) if needed
+    editor.session.setMode("ace/mode/javascript");
+    aceEditor.session.on('change', () => {
+      const newValue = aceEditor.getValue();
+      emit('update:modelValue', newValue);
+    });*/
+}
+
+// Initialize the Ace editor
+onMounted(() => {
+    buildEditor();
+});
+
+/*/ Watch for external modelValue changes and update the editor
+  watch(
+    () => props.modelValue,
+    (newValue) => {
+      if (newValue !== aceEditor.getValue()) {
+        aceEditor.setValue(newValue, -1); // -1 prevents cursor jump
+      }
+    }
+  );*/
+</script>
+
+<style>
+.editor {
+    width: 100%;
+    height: 300px;
+    border: 1px solid #ddd;
+}
+</style>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 9265deb0ca04..1f89cac8e072 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -2,12 +2,12 @@
     <div class="h-100 w-100">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
             <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
-            <hr class="solid m-0">
+            <hr class="solid m-0" />
             <div class="cell-card d-flex rounded my-1 mx-3">
                 <span class="small text-primary">{{ cell.name }}</span>
-                <div class="ml-2">{{ cell.content }}</div>
+                <CellCode :model-value="cell.content" class="ml-2" />
             </div>
-            <hr class="solid m-0">
+            <hr class="solid m-0" />
         </div>
         <CellButtonAdd :cell-index="cells.length" @click="onClick" />
     </div>
@@ -19,6 +19,7 @@ import { ref } from "vue";
 import { parseMarkdown } from "@/components/Markdown/parse";
 
 import CellButtonAdd from "./CellButtonAdd.vue";
+import CellCode from "./CellCode.vue";
 
 const props = defineProps<{
     markdownText: string;
diff --git a/package.json b/package.json
index 92d4ffe2f6bc..89c69f4065b9 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   "homepage": "https://github.com/galaxyproject/galaxy#readme",
   "dependencies": {
     "@galaxyproject/galaxy-client": "^24.0.0",
+    "ace-builds": "^1.37.5",
     "cpy-cli": "^5.0.0"
   }
 }

From 6572321b3321e86f8d5908de479c57ea65601545 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 19 Jan 2025 17:30:35 -0500
Subject: [PATCH 033/158] Refine code editor config

---
 .../components/Markdown/Editor/CellCode.vue   | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index 17055cf4eafe..915e34183f05 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="editor" class="editor" />
+    <div ref="editor" class="w-100" />
 </template>
 
 <script setup>
@@ -34,12 +34,16 @@ async function buildEditor() {
     const themeUrl = await import(`ace-builds/src-noconflict/theme-${props.theme}?url`);
     ace.config.setModuleUrl(modePath, modeUrl);
     ace.config.setModuleUrl(themePath, themeUrl);
-    ace.edit(editor.value, {
-        value: props.modelValue,
-        theme: themePath,
+    const aceEditor = ace.edit(editor.value, {
+        highlightActiveLine: false,
+        highlightGutterLine: false,
+        maxLines: 30,
+        minLines: 1,
         mode: modePath,
         showPrintMargin: false,
+        theme: themePath,
         useWorker: false,
+        value: props.modelValue,
     });
 
     /*/ Update modelValue when editor content changes
@@ -49,6 +53,15 @@ async function buildEditor() {
       const newValue = aceEditor.getValue();
       emit('update:modelValue', newValue);
     });*/
+
+    aceEditor.on("focus", () => {
+        aceEditor.setOption("highlightActiveLine", true);
+        aceEditor.setOption("highlightGutterLine", true);
+    });
+    aceEditor.on("blur", () => {
+        aceEditor.setOption("highlightActiveLine", false);
+        aceEditor.setOption("highlightGutterLine", false);
+    });
 }
 
 // Initialize the Ace editor
@@ -66,11 +79,3 @@ onMounted(() => {
     }
   );*/
 </script>
-
-<style>
-.editor {
-    width: 100%;
-    height: 300px;
-    border: 1px solid #ddd;
-}
-</style>

From c51ba800f0dbb51b70dea402c9c60c25c2a39687 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 19 Jan 2025 17:58:39 -0500
Subject: [PATCH 034/158] Align editor layout

---
 .../components/Markdown/Editor/CellCode.vue   | 25 +++++++++++++------
 .../components/Markdown/Editor/CellEditor.vue | 18 +++++--------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index 915e34183f05..59a5cf4e9246 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -44,24 +44,26 @@ async function buildEditor() {
         theme: themePath,
         useWorker: false,
         value: props.modelValue,
+        wrap: true,
     });
 
-    /*/ Update modelValue when editor content changes
-    // Set the mode (language) if needed
-    editor.session.setMode("ace/mode/javascript");
-    aceEditor.session.on('change', () => {
-      const newValue = aceEditor.getValue();
-      emit('update:modelValue', newValue);
-    });*/
-
     aceEditor.on("focus", () => {
         aceEditor.setOption("highlightActiveLine", true);
         aceEditor.setOption("highlightGutterLine", true);
+        editor.value.classList.add("cell-code-focus");
     });
     aceEditor.on("blur", () => {
         aceEditor.setOption("highlightActiveLine", false);
         aceEditor.setOption("highlightGutterLine", false);
+        editor.value.classList.remove("cell-code-focus");
     });
+
+    /*/ Update modelValue when editor content changes
+    // Set the mode (language) if needed
+    aceEditor.session.on('change', () => {
+      const newValue = aceEditor.getValue();
+      emit('update:modelValue', newValue);
+    });*/
 }
 
 // Initialize the Ace editor
@@ -79,3 +81,10 @@ onMounted(() => {
     }
   );*/
 </script>
+
+<style lang="scss">
+@import "theme/blue.scss";
+.cell-code-focus {
+    background-color: $gray-100;
+}
+</style>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 1f89cac8e072..9f703700db58 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="h-100 w-100">
+    <div class="h-100 w-75 mx-auto">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
             <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
             <hr class="solid m-0" />
-            <div class="cell-card d-flex rounded my-1 mx-3">
-                <span class="small text-primary">{{ cell.name }}</span>
+            <div class="d-flex my-1 mx-3">
+                <span class="cell-name small text-primary">{{ cell.name }}</span>
                 <CellCode :model-value="cell.content" class="ml-2" />
             </div>
             <hr class="solid m-0" />
@@ -37,14 +37,8 @@ function onClick(cellIndex: number, cellType: string) {
 }
 </script>
 
-<style lang="scss">
-@import "theme/blue.scss";
-
-.cell-card {
-    //background: $gray-100;
-    .cell-card-header {
-        background: lighten($brand-info, 20%);
-        color: $white;
-    }
+<style scoped>
+.cell-name {
+    width: 3rem;
 }
 </style>

From 0f08aee3047c911c553908a9a4c272657de1df3c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 19 Jan 2025 18:01:50 -0500
Subject: [PATCH 035/158] Rename default section to markdown section

---
 client/src/components/Markdown/Markdown.vue |  2 +-
 client/src/components/Markdown/parse.ts     | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index f3182bcaa5fb..49329795daa2 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -156,7 +156,7 @@ onMounted(() => {
                 </b-alert>
             </div>
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
-                <MarkdownDefault v-if="obj.name === 'default'" :content="obj.content" />
+                <MarkdownDefault v-if="obj.name === 'markdown'" :content="obj.content" />
                 <MarkdownVega v-else-if="obj.name === 'vega'" :content="obj.content" />
                 <MarkdownVitessce v-else-if="obj.name === 'vitessce'" :content="obj.content" />
                 <MarkdownGalaxy
diff --git a/client/src/components/Markdown/parse.ts b/client/src/components/Markdown/parse.ts
index 1acaa643d5fa..87dc1686bffd 100644
--- a/client/src/components/Markdown/parse.ts
+++ b/client/src/components/Markdown/parse.ts
@@ -4,7 +4,7 @@ const FUNCTION_ARGUMENT_REGEX = `\\s*[\\w\\|]+\\s*=` + FUNCTION_ARGUMENT_VALUE_R
 const FUNCTION_CALL_LINE = `\\s*(\\w+)\\s*\\(\\s*(?:(${FUNCTION_ARGUMENT_REGEX})(,${FUNCTION_ARGUMENT_REGEX})*)?\\s*\\)\\s*`;
 const FUNCTION_CALL_LINE_TEMPLATE = new RegExp(FUNCTION_CALL_LINE, "m");
 
-type DefaultSection = { name: "default"; content: string };
+type DefaultSection = { name: "markdown"; content: string };
 type GalaxySection = { name: string; content: string; args: { [key: string]: string } };
 type Section = DefaultSection | GalaxySection;
 
@@ -23,13 +23,13 @@ function parseResult(result: { name: string; content: string }[], name: string,
 export function parseMarkdown(input: string): { name: string; content: string }[] {
     const result: { name: string; content: string }[] = [];
     const lines = input.split("\n");
-    let currentName: string = "default";
+    let currentName: string = "markdown";
     let currentContent: string[] = [];
     lines.forEach((line) => {
         const sectionMatch = line.match(/^```(.*)$/);
         if (sectionMatch) {
             parseResult(result, currentName, currentContent);
-            currentName = sectionMatch[1] || "default";
+            currentName = sectionMatch[1] || "markdown";
             currentContent = [];
         } else {
             currentContent.push(line);
@@ -53,7 +53,7 @@ export function splitMarkdown(markdown: string, preserveWhitespace = false) {
                     const defaultContent = rawContent.trim();
                     if (preserveWhitespace || defaultContent) {
                         sections.push({
-                            name: "default",
+                            name: "markdown",
                             content: preserveWhitespace ? rawContent : defaultContent,
                         });
                     }
@@ -76,7 +76,7 @@ export function splitMarkdown(markdown: string, preserveWhitespace = false) {
             }
         } else {
             sections.push({
-                name: "default",
+                name: "markdown",
                 content: digest,
             });
             break;

From 0d22ceb455b434397266ad0194cb7e7f6bab44a8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 19 Jan 2025 18:18:51 -0500
Subject: [PATCH 036/158] Map different modes to cell types

---
 client/src/components/Markdown/Editor/CellCode.vue   |  2 +-
 client/src/components/Markdown/Editor/CellEditor.vue | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index 59a5cf4e9246..2a9466f03de8 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -18,7 +18,7 @@ const props = defineProps({
     },
     mode: {
         type: String,
-        default: "javascript",
+        default: "json",
     },
 });
 
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 9f703700db58..162068ad27c3 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -5,7 +5,7 @@
             <hr class="solid m-0" />
             <div class="d-flex my-1 mx-3">
                 <span class="cell-name small text-primary">{{ cell.name }}</span>
-                <CellCode :model-value="cell.content" class="ml-2" />
+                <CellCode :model-value="cell.content" :mode="getMode(cell.name)" class="ml-2" />
             </div>
             <hr class="solid m-0" />
         </div>
@@ -32,6 +32,16 @@ interface CellType {
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
 
+function getMode(cellName: string) {
+    switch (cellName) {
+        case "galaxy":
+            return "python";
+        case "markdown":
+            return "markdown";
+    }
+    return "json";
+}
+
 function onClick(cellIndex: number, cellType: string) {
     console.log([cellIndex, cellType]);
 }

From 4c9b16f510f7ec0784d4557cd26921c0530ae233 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 19 Jan 2025 18:42:34 -0500
Subject: [PATCH 037/158] Add preliminary preview to markdown editor

---
 client/src/components/Markdown/Editor/CellEditor.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 162068ad27c3..e892f0cff362 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -5,7 +5,12 @@
             <hr class="solid m-0" />
             <div class="d-flex my-1 mx-3">
                 <span class="cell-name small text-primary">{{ cell.name }}</span>
-                <CellCode :model-value="cell.content" :mode="getMode(cell.name)" class="ml-2" />
+                <div class="ml-2 w-100">
+                    <MarkdownDefault v-if="cell.name === 'markdown'" :content="cell.content" />
+                    <MarkdownVega v-else-if="cell.name === 'vega'" :content="cell.content" />
+                    <MarkdownVitessce v-else-if="cell.name === 'vitessce'" :content="cell.content" />
+                    <CellCode :model-value="cell.content" :mode="getMode(cell.name)" />
+                </div>
             </div>
             <hr class="solid m-0" />
         </div>
@@ -18,6 +23,9 @@ import { ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
+import MarkdownDefault from "../Sections/MarkdownDefault.vue";
+import MarkdownVega from "../Sections/MarkdownVega.vue";
+import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
 import CellButtonAdd from "./CellButtonAdd.vue";
 import CellCode from "./CellCode.vue";
 

From aaafa3e193312324c9ed68935d9ae85b4c56894a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 10:29:23 -0500
Subject: [PATCH 038/158] Add update event handler to code cell

---
 .../components/Markdown/Editor/CellCode.vue   | 47 +++++++++----------
 .../components/Markdown/Editor/CellEditor.vue | 31 +++++++-----
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index 2a9466f03de8..e368fb1fc433 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -4,14 +4,9 @@
 
 <script setup>
 import ace from "ace-builds";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 
-// Props
 const props = defineProps({
-    modelValue: {
-        type: String,
-        required: true,
-    },
     theme: {
         type: String,
         default: "github_light_default",
@@ -20,12 +15,17 @@ const props = defineProps({
         type: String,
         default: "json",
     },
+    value: {
+        type: String,
+        required: true,
+    },
 });
 
-// Emit for v-model
-//const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update"]);
+
+const editor = ref(null);
 
-const editor = ref(null); // Reference to the editor DOM element
+let aceEditor = null;
 
 async function buildEditor() {
     const modePath = `ace/mode/${props.mode}`;
@@ -34,7 +34,7 @@ async function buildEditor() {
     const themeUrl = await import(`ace-builds/src-noconflict/theme-${props.theme}?url`);
     ace.config.setModuleUrl(modePath, modeUrl);
     ace.config.setModuleUrl(themePath, themeUrl);
-    const aceEditor = ace.edit(editor.value, {
+    aceEditor = ace.edit(editor.value, {
         highlightActiveLine: false,
         highlightGutterLine: false,
         maxLines: 30,
@@ -43,7 +43,7 @@ async function buildEditor() {
         showPrintMargin: false,
         theme: themePath,
         useWorker: false,
-        value: props.modelValue,
+        value: props.value,
         wrap: true,
     });
 
@@ -52,34 +52,31 @@ async function buildEditor() {
         aceEditor.setOption("highlightGutterLine", true);
         editor.value.classList.add("cell-code-focus");
     });
+
     aceEditor.on("blur", () => {
         aceEditor.setOption("highlightActiveLine", false);
         aceEditor.setOption("highlightGutterLine", false);
         editor.value.classList.remove("cell-code-focus");
     });
 
-    /*/ Update modelValue when editor content changes
-    // Set the mode (language) if needed
-    aceEditor.session.on('change', () => {
-      const newValue = aceEditor.getValue();
-      emit('update:modelValue', newValue);
-    });*/
+    aceEditor.on("change", () => {
+        const newValue = aceEditor.getValue();
+        emit("update", newValue);
+    });
 }
 
-// Initialize the Ace editor
 onMounted(() => {
     buildEditor();
 });
 
-/*/ Watch for external modelValue changes and update the editor
-  watch(
-    () => props.modelValue,
+watch(
+    () => props.value,
     (newValue) => {
-      if (newValue !== aceEditor.getValue()) {
-        aceEditor.setValue(newValue, -1); // -1 prevents cursor jump
-      }
+        if (aceEditor && newValue !== aceEditor.getValue()) {
+            aceEditor.setValue(newValue, -1);
+        }
     }
-  );*/
+);
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index e892f0cff362..2161f5a66ec2 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="h-100 w-75 mx-auto">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
-            <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
+            <CellButtonAdd :cell-index="cellIndex" @click="onAdd" />
             <hr class="solid m-0" />
             <div class="d-flex my-1 mx-3">
                 <span class="cell-name small text-primary">{{ cell.name }}</span>
@@ -9,35 +9,35 @@
                     <MarkdownDefault v-if="cell.name === 'markdown'" :content="cell.content" />
                     <MarkdownVega v-else-if="cell.name === 'vega'" :content="cell.content" />
                     <MarkdownVitessce v-else-if="cell.name === 'vitessce'" :content="cell.content" />
-                    <CellCode :model-value="cell.content" :mode="getMode(cell.name)" />
+                    <CellCode :value="cell.content" :mode="getMode(cell.name)" @update="onUpdate(cellIndex, $event)" />
                 </div>
             </div>
             <hr class="solid m-0" />
         </div>
-        <CellButtonAdd :cell-index="cells.length" @click="onClick" />
+        <CellButtonAdd :cell-index="cells.length" @click="onAdd" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-
 import { parseMarkdown } from "@/components/Markdown/parse";
-
+import CellButtonAdd from "./CellButtonAdd.vue";
+import CellCode from "./CellCode.vue";
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
 import MarkdownVega from "../Sections/MarkdownVega.vue";
 import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
-import CellButtonAdd from "./CellButtonAdd.vue";
-import CellCode from "./CellCode.vue";
-
-const props = defineProps<{
-    markdownText: string;
-}>();
 
 interface CellType {
     name: string;
     content: string;
 }
 
+const props = defineProps<{
+    markdownText: string;
+}>();
+
+const emit = defineEmits(["update"]);
+
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
 
 function getMode(cellName: string) {
@@ -50,9 +50,16 @@ function getMode(cellName: string) {
     return "json";
 }
 
-function onClick(cellIndex: number, cellType: string) {
+function onAdd(cellIndex: number, cellType: string) {
     console.log([cellIndex, cellType]);
 }
+
+function onUpdate(cellIndex: number, cellContent: string) {
+    const cell = cells.value?.[cellIndex];
+    if (cell) {
+        cell.content = cellContent;
+    }
+}
 </script>
 
 <style scoped>

From 7c31630a52a2a024cfaf2ad9ef7014d3a767ebab Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 11:51:06 -0500
Subject: [PATCH 039/158] Add basic error handling to vega wrapper

---
 client/src/components/Common/VegaWrapper.vue  | 16 ++++++----
 .../components/Markdown/Editor/CellEditor.vue |  8 +++--
 .../Markdown/Sections/MarkdownVega.vue        | 30 +++++++++++++++----
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Common/VegaWrapper.vue b/client/src/components/Common/VegaWrapper.vue
index 8a46fec2fd0a..798a18620d2d 100644
--- a/client/src/components/Common/VegaWrapper.vue
+++ b/client/src/components/Common/VegaWrapper.vue
@@ -27,12 +27,16 @@ const chartContainer = ref<HTMLDivElement | null>(null);
 let vegaView: any;
 
 async function embedChart() {
-    if (vegaView) {
-        vegaView.finalize();
-    }
-    if (chartContainer.value !== null) {
-        const result = await embed(chartContainer.value, props.spec, { renderer: "svg" });
-        vegaView = result.view;
+    try {
+        if (vegaView) {
+            vegaView.finalize();
+        }
+        if (chartContainer.value !== null) {
+            const result = await embed(chartContainer.value, props.spec, { renderer: "svg" });
+            vegaView = result.view;
+        }
+    } catch (e: any) {
+        console.error(String(e));
     }
 }
 
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 2161f5a66ec2..cb3b3c5ea153 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -20,12 +20,14 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+
 import { parseMarkdown } from "@/components/Markdown/parse";
-import CellButtonAdd from "./CellButtonAdd.vue";
-import CellCode from "./CellCode.vue";
+
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
 import MarkdownVega from "../Sections/MarkdownVega.vue";
 import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
+import CellButtonAdd from "./CellButtonAdd.vue";
+import CellCode from "./CellCode.vue";
 
 interface CellType {
     name: string;
@@ -36,7 +38,7 @@ const props = defineProps<{
     markdownText: string;
 }>();
 
-const emit = defineEmits(["update"]);
+//const emit = defineEmits(["update"]);
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
 
diff --git a/client/src/components/Markdown/Sections/MarkdownVega.vue b/client/src/components/Markdown/Sections/MarkdownVega.vue
index d4d1136dc452..60d5f00fc043 100644
--- a/client/src/components/Markdown/Sections/MarkdownVega.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVega.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref, watch } from "vue";
 
 const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
 
@@ -7,12 +7,30 @@ const props = defineProps<{
     content: string;
 }>();
 
-const spec = computed(() => ({
-    ...JSON.parse(props.content),
-    width: "container",
-}));
+const errorMessage = ref("");
+const spec = ref({});
+
+watch(
+    () => props.content,
+    () => {
+        try {
+            errorMessage.value = "";
+            spec.value = {
+                ...JSON.parse(props.content),
+                width: "container",
+            };
+        } catch (e: any) {
+            errorMessage.value = String(e);
+            spec.value = {};
+        }
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
-    <VegaWrapper :spec="spec" />
+    <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
+        {{ errorMessage }}
+    </b-alert>
+    <VegaWrapper v-else :spec="spec" />
 </template>

From 95dd7cc2c0fea8440086173952dd343d2be0187c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 11:55:02 -0500
Subject: [PATCH 040/158] Add error handling to shared vega wrapper

---
 client/src/components/Common/VegaWrapper.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Common/VegaWrapper.vue b/client/src/components/Common/VegaWrapper.vue
index 798a18620d2d..299f979281e8 100644
--- a/client/src/components/Common/VegaWrapper.vue
+++ b/client/src/components/Common/VegaWrapper.vue
@@ -1,5 +1,8 @@
 <template>
-    <div ref="chartContainer" :style="style"></div>
+    <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
+        {{ errorMessage }}
+    </b-alert>
+    <div v-else ref="chartContainer" :style="style" />
 </template>
 
 <script setup lang="ts">
@@ -24,6 +27,8 @@ const style = computed(() => {
 });
 
 const chartContainer = ref<HTMLDivElement | null>(null);
+const errorMessage = ref<string>("");
+
 let vegaView: any;
 
 async function embedChart() {
@@ -35,8 +40,9 @@ async function embedChart() {
             const result = await embed(chartContainer.value, props.spec, { renderer: "svg" });
             vegaView = result.view;
         }
+        errorMessage.value = "";
     } catch (e: any) {
-        console.error(String(e));
+        errorMessage.value = String(e);
     }
 }
 

From 14a76b6591d011a533d6fa9a80ec86a75bfef62a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 13:09:08 -0500
Subject: [PATCH 041/158] Show both, error message and previous preview

---
 client/src/components/Common/VegaWrapper.vue  | 12 ++++++----
 .../Markdown/Sections/MarkdownVega.vue        | 24 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Common/VegaWrapper.vue b/client/src/components/Common/VegaWrapper.vue
index 299f979281e8..22e72b7d48ff 100644
--- a/client/src/components/Common/VegaWrapper.vue
+++ b/client/src/components/Common/VegaWrapper.vue
@@ -1,8 +1,10 @@
 <template>
-    <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
-        {{ errorMessage }}
-    </b-alert>
-    <div v-else ref="chartContainer" :style="style" />
+    <div>
+        <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
+            {{ errorMessage }}
+        </b-alert>
+        <div ref="chartContainer" :style="style" />
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -48,7 +50,7 @@ async function embedChart() {
 
 onMounted(embedChart);
 
-watch(props, embedChart, { immediate: true, deep: true });
+watch(props, embedChart, { deep: true });
 useResizeObserver(chartContainer, () => {
     if (vegaView) {
         vegaView.resize();
diff --git a/client/src/components/Markdown/Sections/MarkdownVega.vue b/client/src/components/Markdown/Sections/MarkdownVega.vue
index 60d5f00fc043..97e61ef803f0 100644
--- a/client/src/components/Markdown/Sections/MarkdownVega.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVega.vue
@@ -10,19 +10,23 @@ const props = defineProps<{
 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,
     () => {
-        try {
-            errorMessage.value = "";
-            spec.value = {
-                ...JSON.parse(props.content),
-                width: "container",
-            };
-        } catch (e: any) {
-            errorMessage.value = String(e);
-            spec.value = {};
-        }
+        render();
     },
     { immediate: true }
 );

From 0c494949809ca1442cadd415007f1055632f7359 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 13:50:39 -0500
Subject: [PATCH 042/158] Move debounce handler into code cell

---
 .../components/Markdown/Editor/CellCode.vue   | 27 +++++++++++++------
 .../components/Markdown/Editor/CellEditor.vue | 13 ++++++---
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index e368fb1fc433..300dbe20f00e 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -4,7 +4,10 @@
 
 <script setup>
 import ace from "ace-builds";
-import { onMounted, ref, watch } from "vue";
+import { debounce } from "lodash";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+const DELAY = 3000;
 
 const props = defineProps({
     theme: {
@@ -27,6 +30,10 @@ const editor = ref(null);
 
 let aceEditor = null;
 
+const emitChange = debounce((newValue) => {
+    emit("change", newValue);
+}, DELAY);
+
 async function buildEditor() {
     const modePath = `ace/mode/${props.mode}`;
     const themePath = `ace/theme/${props.theme}`;
@@ -47,12 +54,6 @@ async function buildEditor() {
         wrap: true,
     });
 
-    aceEditor.on("focus", () => {
-        aceEditor.setOption("highlightActiveLine", true);
-        aceEditor.setOption("highlightGutterLine", true);
-        editor.value.classList.add("cell-code-focus");
-    });
-
     aceEditor.on("blur", () => {
         aceEditor.setOption("highlightActiveLine", false);
         aceEditor.setOption("highlightGutterLine", false);
@@ -61,10 +62,20 @@ async function buildEditor() {
 
     aceEditor.on("change", () => {
         const newValue = aceEditor.getValue();
-        emit("update", newValue);
+        emitChange(newValue);
+    });
+
+    aceEditor.on("focus", () => {
+        aceEditor.setOption("highlightActiveLine", true);
+        aceEditor.setOption("highlightGutterLine", true);
+        editor.value.classList.add("cell-code-focus");
     });
 }
 
+onBeforeUnmount(() => {
+    emitChange.cancel();
+});
+
 onMounted(() => {
     buildEditor();
 });
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index cb3b3c5ea153..f497b6b989ea 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -9,7 +9,7 @@
                     <MarkdownDefault v-if="cell.name === 'markdown'" :content="cell.content" />
                     <MarkdownVega v-else-if="cell.name === 'vega'" :content="cell.content" />
                     <MarkdownVitessce v-else-if="cell.name === 'vitessce'" :content="cell.content" />
-                    <CellCode :value="cell.content" :mode="getMode(cell.name)" @update="onUpdate(cellIndex, $event)" />
+                    <CellCode :value="cell.content" :mode="getMode(cell.name)" @change="onChange(cellIndex, $event)" />
                 </div>
             </div>
             <hr class="solid m-0" />
@@ -38,7 +38,7 @@ const props = defineProps<{
     markdownText: string;
 }>();
 
-//const emit = defineEmits(["update"]);
+const emit = defineEmits(["update"]);
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
 
@@ -54,13 +54,20 @@ function getMode(cellName: string) {
 
 function onAdd(cellIndex: number, cellType: string) {
     console.log([cellIndex, cellType]);
+    onUpdate();
 }
 
-function onUpdate(cellIndex: number, cellContent: string) {
+function onChange(cellIndex: number, cellContent: string) {
     const cell = cells.value?.[cellIndex];
     if (cell) {
         cell.content = cellContent;
     }
+    onUpdate();
+}
+
+function onUpdate() {
+    const newMarkdownText = "";
+    emit("update", newMarkdownText);
 }
 </script>
 

From 71560cc1890ec3920d983c69e89e5d3ae0941b89 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 14:07:02 -0500
Subject: [PATCH 043/158] Add update handler to cell based markdown editor

---
 client/src/components/Markdown/Editor/CellCode.vue   |  2 +-
 client/src/components/Markdown/Editor/CellEditor.vue | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index 300dbe20f00e..aa01ea6b2e06 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -7,7 +7,7 @@ import ace from "ace-builds";
 import { debounce } from "lodash";
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
-const DELAY = 3000;
+const DELAY = 300;
 
 const props = defineProps({
     theme: {
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index f497b6b989ea..19ca3a3349a6 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -66,7 +66,15 @@ function onChange(cellIndex: number, cellContent: string) {
 }
 
 function onUpdate() {
-    const newMarkdownText = "";
+    let newMarkdownText = "";
+    cells.value.forEach((cell) => {
+        if (cell.name === "markdown") {
+            newMarkdownText += cell.content;
+        } else {
+            newMarkdownText += `\`\`\`${cell.name}\n` + cell.content + "\n```";
+        }
+        newMarkdownText += "\n\n";
+    });
     emit("update", newMarkdownText);
 }
 </script>

From 4355f38c545e2658587a91292e7ae3e225d282c0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 14:40:58 -0500
Subject: [PATCH 044/158] Start drafting additional cell wrapper options

---
 .../components/Markdown/Editor/CellEditor.vue | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 19ca3a3349a6..b25eb9d1b82e 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -4,11 +4,38 @@
             <CellButtonAdd :cell-index="cellIndex" @click="onAdd" />
             <hr class="solid m-0" />
             <div class="d-flex my-1 mx-3">
-                <span class="cell-name small text-primary">{{ cell.name }}</span>
+                <div class="d-flex flex-column justify-content-between">
+                    <div class="cell-name small text-primary">
+                        {{ cell.name }}
+                    </div>
+                    <div
+                        v-b-tooltip.right
+                        role="button"
+                        tabindex="0"
+                        class="d-inline text-muted cursor-pointer mt-4 align-self-end"
+                        title="Expand to Edit">
+                        <FontAwesomeIcon class="text-primary" :icon="faAngleDoubleDown" />
+                        <FontAwesomeIcon class="text-primary" :icon="faAngleDoubleUp" />
+                    </div>
+                </div>
                 <div class="ml-2 w-100">
                     <MarkdownDefault v-if="cell.name === 'markdown'" :content="cell.content" />
                     <MarkdownVega v-else-if="cell.name === 'vega'" :content="cell.content" />
                     <MarkdownVitessce v-else-if="cell.name === 'vitessce'" :content="cell.content" />
+                </div>
+            </div>
+            <div class="d-flex my-1 mx-3">
+                <div class="cell-name d-flex flex-column justify-content-between">
+                    <div
+                        v-b-tooltip.right
+                        role="button"
+                        tabindex="0"
+                        class="d-inline text-muted cursor-pointer mt-4 align-self-end"
+                        title="Insert new Cell">
+                        <FontAwesomeIcon class="text-primary" :icon="faTrash" />
+                    </div>
+                </div>
+                <div class="ml-2 w-100">
                     <CellCode :value="cell.content" :mode="getMode(cell.name)" @change="onChange(cellIndex, $event)" />
                 </div>
             </div>
@@ -23,6 +50,9 @@ import { ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
+import { faTrash, faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
 import MarkdownVega from "../Sections/MarkdownVega.vue";
 import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";

From 3a3b78b2eee7552b8ab37212db8d9dc1ec7885aa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 15:59:54 -0500
Subject: [PATCH 045/158] Adjust layout, switch to buttons

---
 .../Markdown/Editor/CellButtonAdd.vue         | 13 +++++-----
 .../components/Markdown/Editor/CellEditor.vue | 26 ++++++++++---------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellButtonAdd.vue b/client/src/components/Markdown/Editor/CellButtonAdd.vue
index a942b13098bf..d5bca094a9a5 100644
--- a/client/src/components/Markdown/Editor/CellButtonAdd.vue
+++ b/client/src/components/Markdown/Editor/CellButtonAdd.vue
@@ -1,14 +1,13 @@
 <template>
     <Popper trigger="click" placement="right" mode="light">
         <template v-slot:reference>
-            <span
+            <b-button
                 v-b-tooltip.right
-                role="button"
-                tabindex="0"
-                class="d-inline text-muted ml-3 cursor-pointer"
-                title="Insert new Cell">
-                <FontAwesomeIcon class="text-primary" :icon="faPlusSquare" />
-            </span>
+                class="border-0 p-0 px-1"
+                title="Insert new Cell"
+                variant="outline-primary">
+                <FontAwesomeIcon :icon="faPlusSquare" />
+            </b-button>
         </template>
         <div class="cursor-pointer">
             <CellOption
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index b25eb9d1b82e..5bf7caca01ba 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,11 +1,13 @@
 <template>
     <div class="h-100 w-75 mx-auto">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
-            <CellButtonAdd :cell-index="cellIndex" @click="onAdd" />
+            <div class="cell-guide my-1 mx-1">
+                <CellButtonAdd :cell-index="cellIndex" @click="onAdd" />
+            </div>
             <hr class="solid m-0" />
-            <div class="d-flex my-1 mx-3">
+            <div class="d-flex my-1 mx-2">
                 <div class="d-flex flex-column justify-content-between">
-                    <div class="cell-name small text-primary">
+                    <div class="cell-guide small text-primary">
                         {{ cell.name }}
                     </div>
                     <div
@@ -25,15 +27,14 @@
                 </div>
             </div>
             <div class="d-flex my-1 mx-3">
-                <div class="cell-name d-flex flex-column justify-content-between">
-                    <div
+                <div class="cell-guide d-flex flex-column justify-content-between">
+                    <b-button
                         v-b-tooltip.right
-                        role="button"
-                        tabindex="0"
-                        class="d-inline text-muted cursor-pointer mt-4 align-self-end"
-                        title="Insert new Cell">
-                        <FontAwesomeIcon class="text-primary" :icon="faTrash" />
-                    </div>
+                        class="border-0 p-0 m-0"
+                        title="Delete"
+                        variant="outline-primary">
+                        <FontAwesomeIcon :icon="faTrash" />
+                    </b-button>
                 </div>
                 <div class="ml-2 w-100">
                     <CellCode :value="cell.content" :mode="getMode(cell.name)" @change="onChange(cellIndex, $event)" />
@@ -58,6 +59,7 @@ import MarkdownVega from "../Sections/MarkdownVega.vue";
 import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
 import CellButtonAdd from "./CellButtonAdd.vue";
 import CellCode from "./CellCode.vue";
+import CellWrapper from "./CellWrapper.vue";
 
 interface CellType {
     name: string;
@@ -110,7 +112,7 @@ function onUpdate() {
 </script>
 
 <style scoped>
-.cell-name {
+.cell-guide {
     width: 3rem;
 }
 </style>

From f75d49e665a81c3a19621c4a510fc3885509e333 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 16:05:56 -0500
Subject: [PATCH 046/158] Add cell wrapper

---
 .../Markdown/Editor/CellButtonAdd.vue         |  6 +-
 .../components/Markdown/Editor/CellEditor.vue | 55 +---------------
 .../Markdown/Editor/CellWrapper.vue           | 62 +++++++++++++++++++
 3 files changed, 65 insertions(+), 58 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/CellWrapper.vue

diff --git a/client/src/components/Markdown/Editor/CellButtonAdd.vue b/client/src/components/Markdown/Editor/CellButtonAdd.vue
index d5bca094a9a5..ce0b7f5b49c9 100644
--- a/client/src/components/Markdown/Editor/CellButtonAdd.vue
+++ b/client/src/components/Markdown/Editor/CellButtonAdd.vue
@@ -1,11 +1,7 @@
 <template>
     <Popper trigger="click" placement="right" mode="light">
         <template v-slot:reference>
-            <b-button
-                v-b-tooltip.right
-                class="border-0 p-0 px-1"
-                title="Insert new Cell"
-                variant="outline-primary">
+            <b-button v-b-tooltip.right class="border-0 p-0 px-1" title="Insert new Cell" variant="outline-primary">
                 <FontAwesomeIcon :icon="faPlusSquare" />
             </b-button>
         </template>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 5bf7caca01ba..d73474103549 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -5,41 +5,7 @@
                 <CellButtonAdd :cell-index="cellIndex" @click="onAdd" />
             </div>
             <hr class="solid m-0" />
-            <div class="d-flex my-1 mx-2">
-                <div class="d-flex flex-column justify-content-between">
-                    <div class="cell-guide small text-primary">
-                        {{ cell.name }}
-                    </div>
-                    <div
-                        v-b-tooltip.right
-                        role="button"
-                        tabindex="0"
-                        class="d-inline text-muted cursor-pointer mt-4 align-self-end"
-                        title="Expand to Edit">
-                        <FontAwesomeIcon class="text-primary" :icon="faAngleDoubleDown" />
-                        <FontAwesomeIcon class="text-primary" :icon="faAngleDoubleUp" />
-                    </div>
-                </div>
-                <div class="ml-2 w-100">
-                    <MarkdownDefault v-if="cell.name === 'markdown'" :content="cell.content" />
-                    <MarkdownVega v-else-if="cell.name === 'vega'" :content="cell.content" />
-                    <MarkdownVitessce v-else-if="cell.name === 'vitessce'" :content="cell.content" />
-                </div>
-            </div>
-            <div class="d-flex my-1 mx-3">
-                <div class="cell-guide d-flex flex-column justify-content-between">
-                    <b-button
-                        v-b-tooltip.right
-                        class="border-0 p-0 m-0"
-                        title="Delete"
-                        variant="outline-primary">
-                        <FontAwesomeIcon :icon="faTrash" />
-                    </b-button>
-                </div>
-                <div class="ml-2 w-100">
-                    <CellCode :value="cell.content" :mode="getMode(cell.name)" @change="onChange(cellIndex, $event)" />
-                </div>
-            </div>
+            <CellWrapper :name="cell.name" :content="cell.content" @change="onChange(cellIndex, $event)" />
             <hr class="solid m-0" />
         </div>
         <CellButtonAdd :cell-index="cells.length" @click="onAdd" />
@@ -51,14 +17,7 @@ import { ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
-import { faTrash, faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
-import MarkdownDefault from "../Sections/MarkdownDefault.vue";
-import MarkdownVega from "../Sections/MarkdownVega.vue";
-import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
 import CellButtonAdd from "./CellButtonAdd.vue";
-import CellCode from "./CellCode.vue";
 import CellWrapper from "./CellWrapper.vue";
 
 interface CellType {
@@ -74,16 +33,6 @@ const emit = defineEmits(["update"]);
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
 
-function getMode(cellName: string) {
-    switch (cellName) {
-        case "galaxy":
-            return "python";
-        case "markdown":
-            return "markdown";
-    }
-    return "json";
-}
-
 function onAdd(cellIndex: number, cellType: string) {
     console.log([cellIndex, cellType]);
     onUpdate();
@@ -111,7 +60,7 @@ function onUpdate() {
 }
 </script>
 
-<style scoped>
+<style>
 .cell-guide {
     width: 3rem;
 }
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
new file mode 100644
index 000000000000..9f89c2cd301f
--- /dev/null
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <div class="d-flex my-1 mx-2">
+            <div class="d-flex flex-column justify-content-between">
+                <div class="cell-guide small text-primary">
+                    {{ name }}
+                </div>
+                <div
+                    v-b-tooltip.right
+                    role="button"
+                    tabindex="0"
+                    class="d-inline text-muted cursor-pointer mt-4 align-self-end"
+                    title="Expand to Edit">
+                    <FontAwesomeIcon class="text-primary" :icon="faAngleDoubleDown" />
+                    <FontAwesomeIcon class="text-primary" :icon="faAngleDoubleUp" />
+                </div>
+            </div>
+            <div class="ml-2 w-100">
+                <MarkdownDefault v-if="name === 'markdown'" :content="content" />
+                <MarkdownVega v-else-if="name === 'vega'" :content="content" />
+                <MarkdownVitessce v-else-if="name === 'vitessce'" :content="content" />
+            </div>
+        </div>
+        <div class="d-flex my-1 mx-3">
+            <div class="cell-guide d-flex flex-column justify-content-between">
+                <b-button v-b-tooltip.right class="border-0 p-0 m-0" title="Delete" variant="outline-primary">
+                    <FontAwesomeIcon :icon="faTrash" />
+                </b-button>
+            </div>
+            <div class="ml-2 w-100">
+                <CellCode :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { faAngleDoubleDown, faAngleDoubleUp, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import MarkdownDefault from "../Sections/MarkdownDefault.vue";
+import MarkdownVega from "../Sections/MarkdownVega.vue";
+import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
+import CellCode from "./CellCode.vue";
+
+defineProps<{
+    name: string;
+    content: string;
+}>();
+
+defineEmits(["change"]);
+
+function getMode(cellName: string) {
+    switch (cellName) {
+        case "galaxy":
+            return "python";
+        case "markdown":
+            return "markdown";
+    }
+    return "json";
+}
+</script>

From 9ad9ed5b6f66ff52dd5c8c18eb29e21deb875b81 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 16:11:57 -0500
Subject: [PATCH 047/158] Fix button alignment in cell editor guide column

---
 client/src/components/Markdown/Editor/CellButtonAdd.vue | 6 +++++-
 client/src/components/Markdown/Editor/CellEditor.vue    | 4 +---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellButtonAdd.vue b/client/src/components/Markdown/Editor/CellButtonAdd.vue
index ce0b7f5b49c9..3cfe5448aac0 100644
--- a/client/src/components/Markdown/Editor/CellButtonAdd.vue
+++ b/client/src/components/Markdown/Editor/CellButtonAdd.vue
@@ -1,7 +1,11 @@
 <template>
     <Popper trigger="click" placement="right" mode="light">
         <template v-slot:reference>
-            <b-button v-b-tooltip.right class="border-0 p-0 px-1" title="Insert new Cell" variant="outline-primary">
+            <b-button
+                v-b-tooltip.right
+                class="border-0 m-1 py-0 px-1"
+                title="Insert new Cell"
+                variant="outline-primary">
                 <FontAwesomeIcon :icon="faPlusSquare" />
             </b-button>
         </template>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index d73474103549..71a2b0ad4574 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,9 +1,7 @@
 <template>
     <div class="h-100 w-75 mx-auto">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
-            <div class="cell-guide my-1 mx-1">
-                <CellButtonAdd :cell-index="cellIndex" @click="onAdd" />
-            </div>
+            <CellButtonAdd :cell-index="cellIndex" @click="onAdd" />
             <hr class="solid m-0" />
             <CellWrapper :name="cell.name" :content="cell.content" @change="onChange(cellIndex, $event)" />
             <hr class="solid m-0" />

From c13068ad2e6fb106306b1ef729a0feb7b12d3a6d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 16:31:12 -0500
Subject: [PATCH 048/158] Unify guide column buttons for now

---
 .../Markdown/Editor/CellButtonAdd.vue         |  2 +-
 .../components/Markdown/Editor/CellEditor.vue |  2 +-
 .../Markdown/Editor/CellWrapper.vue           | 28 ++++++++-----------
 3 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellButtonAdd.vue b/client/src/components/Markdown/Editor/CellButtonAdd.vue
index 3cfe5448aac0..743d05a63ed5 100644
--- a/client/src/components/Markdown/Editor/CellButtonAdd.vue
+++ b/client/src/components/Markdown/Editor/CellButtonAdd.vue
@@ -3,7 +3,7 @@
         <template v-slot:reference>
             <b-button
                 v-b-tooltip.right
-                class="border-0 m-1 py-0 px-1"
+                class="border-0 m-1 px-1 py-0"
                 title="Insert new Cell"
                 variant="outline-primary">
                 <FontAwesomeIcon :icon="faPlusSquare" />
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 71a2b0ad4574..8175c033acad 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -60,6 +60,6 @@ function onUpdate() {
 
 <style>
 .cell-guide {
-    width: 3rem;
+    width: 5rem;
 }
 </style>
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 9f89c2cd301f..6a7da574f2dd 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -1,19 +1,13 @@
 <template>
     <div>
-        <div class="d-flex my-1 mx-2">
-            <div class="d-flex flex-column justify-content-between">
-                <div class="cell-guide small text-primary">
-                    {{ name }}
-                </div>
-                <div
-                    v-b-tooltip.right
-                    role="button"
-                    tabindex="0"
-                    class="d-inline text-muted cursor-pointer mt-4 align-self-end"
-                    title="Expand to Edit">
-                    <FontAwesomeIcon class="text-primary" :icon="faAngleDoubleDown" />
-                    <FontAwesomeIcon class="text-primary" :icon="faAngleDoubleUp" />
-                </div>
+        <div class="d-flex">
+            <div class="cell-guide d-flex flex-column justify-content-between">
+                <b-button v-b-tooltip.right class="border-0 m-1 px-1 py-0" title="Expand" variant="outline-primary">
+                    <div class="small">{{ name }}</div>
+                </b-button>
+                <b-button v-b-tooltip.right class="border-0 m-1 px-1 py-0" title="Expand" variant="outline-primary">
+                    <FontAwesomeIcon :icon="faAngleDoubleUp" />
+                </b-button>
             </div>
             <div class="ml-2 w-100">
                 <MarkdownDefault v-if="name === 'markdown'" :content="content" />
@@ -21,9 +15,9 @@
                 <MarkdownVitessce v-else-if="name === 'vitessce'" :content="content" />
             </div>
         </div>
-        <div class="d-flex my-1 mx-3">
+        <div class="d-flex">
             <div class="cell-guide d-flex flex-column justify-content-between">
-                <b-button v-b-tooltip.right class="border-0 p-0 m-0" title="Delete" variant="outline-primary">
+                <b-button v-b-tooltip.right class="border-0 m-1 px-1 py-0" title="Delete" variant="outline-primary">
                     <FontAwesomeIcon :icon="faTrash" />
                 </b-button>
             </div>
@@ -35,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { faAngleDoubleDown, faAngleDoubleUp, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDoubleUp, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";

From 01e682fcc05b98d4e9a2135fff61041eff89f1ed Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 16:49:30 -0500
Subject: [PATCH 049/158] Add toggle handler for code section

---
 .../Markdown/Editor/CellWrapper.vue           | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 6a7da574f2dd..fe738fd74f34 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -5,8 +5,14 @@
                 <b-button v-b-tooltip.right class="border-0 m-1 px-1 py-0" title="Expand" variant="outline-primary">
                     <div class="small">{{ name }}</div>
                 </b-button>
-                <b-button v-b-tooltip.right class="border-0 m-1 px-1 py-0" title="Expand" variant="outline-primary">
-                    <FontAwesomeIcon :icon="faAngleDoubleUp" />
+                <b-button
+                    v-b-tooltip.right
+                    class="border-0 m-1 px-1 py-0"
+                    title="Expand"
+                    variant="outline-primary"
+                    @click="onToggle($event)">
+                    <FontAwesomeIcon v-if="toggle" :icon="faAngleDoubleUp" />
+                    <FontAwesomeIcon v-else :icon="faAngleDoubleDown" />
                 </b-button>
             </div>
             <div class="ml-2 w-100">
@@ -15,7 +21,7 @@
                 <MarkdownVitessce v-else-if="name === 'vitessce'" :content="content" />
             </div>
         </div>
-        <div class="d-flex">
+        <div v-if="toggle" class="d-flex">
             <div class="cell-guide d-flex flex-column justify-content-between">
                 <b-button v-b-tooltip.right class="border-0 m-1 px-1 py-0" title="Delete" variant="outline-primary">
                     <FontAwesomeIcon :icon="faTrash" />
@@ -29,8 +35,9 @@
 </template>
 
 <script setup lang="ts">
-import { faAngleDoubleUp, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDoubleDown, faAngleDoubleUp, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref } from "vue";
 
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
 import MarkdownVega from "../Sections/MarkdownVega.vue";
@@ -44,6 +51,8 @@ defineProps<{
 
 defineEmits(["change"]);
 
+const toggle = ref(true);
+
 function getMode(cellName: string) {
     switch (cellName) {
         case "galaxy":
@@ -53,4 +62,10 @@ function getMode(cellName: string) {
     }
     return "json";
 }
+
+function onToggle(event: Event) {
+    const target = event.target as HTMLElement;
+    target.blur();
+    toggle.value = !toggle.value;
+}
 </script>

From 165a798442371aeccd15b3aad9ada3d0a4b0bf1b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 21 Jan 2025 09:43:43 -0500
Subject: [PATCH 050/158] Add wrapper for guide buttons in cell editor

---
 .../Editor/{CellButtonAdd.vue => CellAdd.vue} | 12 +++----
 .../components/Markdown/Editor/CellButton.vue | 32 +++++++++++++++++++
 .../components/Markdown/Editor/CellEditor.vue |  6 ++--
 .../Markdown/Editor/CellWrapper.vue           | 28 +++++++---------
 4 files changed, 52 insertions(+), 26 deletions(-)
 rename client/src/components/Markdown/Editor/{CellButtonAdd.vue => CellAdd.vue} (87%)
 create mode 100644 client/src/components/Markdown/Editor/CellButton.vue

diff --git a/client/src/components/Markdown/Editor/CellButtonAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
similarity index 87%
rename from client/src/components/Markdown/Editor/CellButtonAdd.vue
rename to client/src/components/Markdown/Editor/CellAdd.vue
index 743d05a63ed5..ea1eefabf8af 100644
--- a/client/src/components/Markdown/Editor/CellButtonAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -1,13 +1,9 @@
 <template>
     <Popper trigger="click" placement="right" mode="light">
         <template v-slot:reference>
-            <b-button
-                v-b-tooltip.right
-                class="border-0 m-1 px-1 py-0"
-                title="Insert new Cell"
-                variant="outline-primary">
+            <CellButton title="Insert new Cell">
                 <FontAwesomeIcon :icon="faPlusSquare" />
-            </b-button>
+            </CellButton>
         </template>
         <div class="cursor-pointer">
             <CellOption
@@ -34,9 +30,11 @@
 import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-import CellOption from "./CellOption.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
+import CellOption from "./CellOption.vue";
+import CellButton from "./CellButton.vue";
+
 const props = defineProps<{
     cellIndex: number;
 }>();
diff --git a/client/src/components/Markdown/Editor/CellButton.vue b/client/src/components/Markdown/Editor/CellButton.vue
new file mode 100644
index 000000000000..4b3921460539
--- /dev/null
+++ b/client/src/components/Markdown/Editor/CellButton.vue
@@ -0,0 +1,32 @@
+<template>
+    <BButton
+        v-b-tooltip.right
+        class="border-0 m-1 px-1 py-0"
+        :title="title"
+        variant="outline-primary"
+        @click="onClick()"
+        @mouseleave="onMouseLeave($event)">
+        <slot />
+    </BButton>
+</template>
+
+<script setup lang="ts">
+import { BButton } from "bootstrap-vue";
+
+defineProps<{
+    title: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "click"): void;
+}>();
+
+function onMouseLeave(event: Event) {
+    const target = event.target as HTMLElement;
+    target.blur();
+}
+
+function onClick() {
+    emit("click");
+}
+</script>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 8175c033acad..e8f6e3f7ef29 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="h-100 w-75 mx-auto">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
-            <CellButtonAdd :cell-index="cellIndex" @click="onAdd" />
+            <CellAdd :cell-index="cellIndex" @click="onAdd" />
             <hr class="solid m-0" />
             <CellWrapper :name="cell.name" :content="cell.content" @change="onChange(cellIndex, $event)" />
             <hr class="solid m-0" />
         </div>
-        <CellButtonAdd :cell-index="cells.length" @click="onAdd" />
+        <CellAdd :cell-index="cells.length" @click="onAdd" />
     </div>
 </template>
 
@@ -15,7 +15,7 @@ import { ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
-import CellButtonAdd from "./CellButtonAdd.vue";
+import CellAdd from "./CellAdd.vue";
 import CellWrapper from "./CellWrapper.vue";
 
 interface CellType {
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index fe738fd74f34..4c5598660807 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -2,18 +2,15 @@
     <div>
         <div class="d-flex">
             <div class="cell-guide d-flex flex-column justify-content-between">
-                <b-button v-b-tooltip.right class="border-0 m-1 px-1 py-0" title="Expand" variant="outline-primary">
+                <CellButton title="Learn more">
                     <div class="small">{{ name }}</div>
-                </b-button>
-                <b-button
-                    v-b-tooltip.right
-                    class="border-0 m-1 px-1 py-0"
-                    title="Expand"
-                    variant="outline-primary"
-                    @click="onToggle($event)">
-                    <FontAwesomeIcon v-if="toggle" :icon="faAngleDoubleUp" />
-                    <FontAwesomeIcon v-else :icon="faAngleDoubleDown" />
-                </b-button>
+                </CellButton>
+                <CellButton v-if="toggle" title="Collapse" @click="toggle = false">
+                    <FontAwesomeIcon :icon="faAngleDoubleUp" />
+                </CellButton>
+                <CellButton v-else title="Expand" @click="toggle = true">
+                    <FontAwesomeIcon :icon="faAngleDoubleDown" />
+                </CellButton>
             </div>
             <div class="ml-2 w-100">
                 <MarkdownDefault v-if="name === 'markdown'" :content="content" />
@@ -23,9 +20,9 @@
         </div>
         <div v-if="toggle" class="d-flex">
             <div class="cell-guide d-flex flex-column justify-content-between">
-                <b-button v-b-tooltip.right class="border-0 m-1 px-1 py-0" title="Delete" variant="outline-primary">
+                <CellButton title="Delete">
                     <FontAwesomeIcon :icon="faTrash" />
-                </b-button>
+                </CellButton>
             </div>
             <div class="ml-2 w-100">
                 <CellCode :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
@@ -42,6 +39,7 @@ import { ref } from "vue";
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
 import MarkdownVega from "../Sections/MarkdownVega.vue";
 import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
+import CellButton from "./CellButton.vue";
 import CellCode from "./CellCode.vue";
 
 defineProps<{
@@ -63,9 +61,7 @@ function getMode(cellName: string) {
     return "json";
 }
 
-function onToggle(event: Event) {
-    const target = event.target as HTMLElement;
-    target.blur();
+function onToggle() {
     toggle.value = !toggle.value;
 }
 </script>

From 9b18f33b8796f0d180f67c0ee2f16ee7041a6ea1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 22 Jan 2025 11:16:49 -0500
Subject: [PATCH 051/158] Add hover highlighting for cell wrapper

---
 .../src/components/Markdown/Editor/CellAdd.vue   |  5 ++---
 .../components/Markdown/Editor/CellWrapper.vue   | 16 ++++++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index ea1eefabf8af..892e42b5dd40 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -30,10 +30,9 @@
 import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-import Popper from "@/components/Popper/Popper.vue";
-
-import CellOption from "./CellOption.vue";
 import CellButton from "./CellButton.vue";
+import CellOption from "./CellOption.vue";
+import Popper from "@/components/Popper/Popper.vue";
 
 const props = defineProps<{
     cellIndex: number;
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 4c5598660807..c639f72da31e 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div @mouseenter="hover = true" @mouseleave="hover = false">
         <div class="d-flex">
-            <div class="cell-guide d-flex flex-column justify-content-between">
+            <div class="cell-guide d-flex flex-column justify-content-between" :class="{ 'cell-hover': hover }">
                 <CellButton title="Learn more">
                     <div class="small">{{ name }}</div>
                 </CellButton>
@@ -19,7 +19,7 @@
             </div>
         </div>
         <div v-if="toggle" class="d-flex">
-            <div class="cell-guide d-flex flex-column justify-content-between">
+            <div class="cell-guide d-flex flex-column justify-content-between" :class="{ 'cell-hover': hover }">
                 <CellButton title="Delete">
                     <FontAwesomeIcon :icon="faTrash" />
                 </CellButton>
@@ -49,6 +49,7 @@ defineProps<{
 
 defineEmits(["change"]);
 
+const hover = ref(false);
 const toggle = ref(true);
 
 function getMode(cellName: string) {
@@ -60,8 +61,11 @@ function getMode(cellName: string) {
     }
     return "json";
 }
+</script>
 
-function onToggle() {
-    toggle.value = !toggle.value;
+<style lang="scss">
+@import "theme/blue.scss";
+.cell-hover {
+    background-color: $gray-100;
 }
-</script>
+</style>

From 79617a631aa43965aed092f167e99ae8f64b5f93 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 11:57:33 -0500
Subject: [PATCH 052/158] Do not irreversibly patch invocation markdown

---
 lib/galaxy/workflow/reports/generators/__init__.py | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/galaxy/workflow/reports/generators/__init__.py b/lib/galaxy/workflow/reports/generators/__init__.py
index 70cf73787ff2..0bd75698e258 100644
--- a/lib/galaxy/workflow/reports/generators/__init__.py
+++ b/lib/galaxy/workflow/reports/generators/__init__.py
@@ -10,7 +10,6 @@
 from galaxy.managers.markdown_util import (
     internal_galaxy_markdown_to_pdf,
     ready_galaxy_markdown_for_export,
-    resolve_invocation_markdown,
 )
 from galaxy.model import WorkflowInvocation
 from galaxy.schema import PdfDocumentType
@@ -70,8 +69,6 @@ def _generate_report_markdown(self, trans, invocation, runtime_report_config_jso
         """ """
 
     def _generate_internal_markdown(self, trans, invocation, runtime_report_config_json=None):
-        workflow_markdown = self._generate_report_markdown(
+        return self._generate_report_markdown(
             trans, invocation, runtime_report_config_json=runtime_report_config_json
         )
-        internal_markdown = resolve_invocation_markdown(trans, invocation, workflow_markdown)
-        return internal_markdown

From 6827502272407dccbf1f9517388b67ae1acf50d7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 12:03:14 -0500
Subject: [PATCH 053/158] Remove section mapper in workflow reports

---
 lib/galaxy/managers/markdown_util.py | 45 ----------------------------
 1 file changed, 45 deletions(-)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index be670bcc917c..e4136aa0591b 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -843,46 +843,6 @@ def resolve_invocation_markdown(trans, invocation, workflow_markdown):
     # TODO: convert step outputs?
     # convert step_output=index/name -to- history_dataset_id=<id> | history_dataset_collection_id=<id>
 
-    def _section_remap(container, line):
-        section_markdown = ""
-        if container == "invocation_outputs":
-            for output_assoc in invocation.output_associations:
-                if not output_assoc.workflow_output.label:
-                    continue
-
-                if output_assoc.history_content_type == "dataset":
-                    section_markdown += f"""#### Output Dataset: {output_assoc.workflow_output.label}
-```galaxy
-history_dataset_display(output="{output_assoc.workflow_output.label}")
-```
-"""
-                else:
-                    section_markdown += f"""#### Output Dataset Collection: {output_assoc.workflow_output.label}
-```galaxy
-history_dataset_collection_display(output="{output_assoc.workflow_output.label}")
-```
-"""
-        elif container == "invocation_inputs":
-            for input_assoc in invocation.input_associations:
-                if not input_assoc.workflow_step.label:
-                    continue
-
-                if input_assoc.history_content_type == "dataset":
-                    section_markdown += f"""#### Input Dataset: {input_assoc.workflow_step.label}
-```galaxy
-history_dataset_display(input="{input_assoc.workflow_step.label}")
-```
-"""
-                else:
-                    section_markdown += f"""#### Input Dataset Collection: {input_assoc.workflow_step.label}
-```galaxy
-history_dataset_collection_display(input={input_assoc.workflow_step.label})
-```
-"""
-        else:
-            return line, False
-        return section_markdown, True
-
     def _remap(container, line):
         for workflow_instance_directive in ["workflow_display", "workflow_image"]:
             if container == workflow_instance_directive:
@@ -945,10 +905,6 @@ def find_non_empty_group(match):
             line = line.replace(target_match.group(), f"{ref_object_type}_id={ref_object.id}")
         return (line, False)
 
-    workflow_markdown = _remap_galaxy_markdown_calls(
-        _section_remap,
-        workflow_markdown,
-    )
     galaxy_markdown = _remap_galaxy_markdown_calls(_remap, workflow_markdown)
     return galaxy_markdown
 
@@ -1018,6 +974,5 @@ def _validate(*args, **kwds):
     "internal_galaxy_markdown_to_pdf",
     "ready_galaxy_markdown_for_export",
     "ready_galaxy_markdown_for_import",
-    "resolve_invocation_markdown",
     "to_basic_markdown",
 )

From 617cc92f362d59a4ae57800f6ca5261bf07b4da7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 13:14:01 -0500
Subject: [PATCH 054/158] Increase resilience of markdown provision to the
 front end

---
 lib/galaxy/managers/markdown_util.py | 123 ++++++++++++++-------------
 1 file changed, 66 insertions(+), 57 deletions(-)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index e4136aa0591b..d724bb687394 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -109,84 +109,89 @@ def walk(self, trans, internal_galaxy_markdown):
         job_manager = JobManager(trans.app)
         collection_manager = trans.app.dataset_collection_manager
 
-        def _check_object(object_id, line):
-            if object_id is None:
-                raise MalformedContents(f"Missing object identifier [{line}].")
-
         def _remap(container, line):
             line, object_id, encoded_id = self._encode_line(trans, line)
+            rval = None
             if container == "history_link":
-                _check_object(object_id, line)
-                history = history_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_history_link(line, history)
+                if object_id is not None:
+                    history = history_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_history_link(line, history)
             elif container == "history_dataset_display":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_display(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_display(line, hda)
             elif container == "history_dataset_link":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_display(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_display(line, hda)
             elif container == "history_dataset_index":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_display(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_display(line, hda)
             elif container == "history_dataset_embedded":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_embedded(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_embedded(line, hda)
             elif container == "history_dataset_as_image":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_as_image(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_as_image(line, hda)
             elif container == "history_dataset_as_table":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_as_table(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_as_table(line, hda)
             elif container == "history_dataset_peek":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_peek(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_peek(line, hda)
             elif container == "history_dataset_info":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_info(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_info(line, hda)
             elif container == "history_dataset_type":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_type(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_type(line, hda)
             elif container == "history_dataset_name":
-                _check_object(object_id, line)
-                hda = hda_manager.get_accessible(object_id, trans.user)
-                rval = self.handle_dataset_name(line, hda)
+                if object_id is not None:
+                    hda = hda_manager.get_accessible(object_id, trans.user)
+                    rval = self.handle_dataset_name(line, hda)
             elif container == "workflow_display":
-                stored_workflow = workflow_manager.get_stored_accessible_workflow(trans, encoded_id)
-                workflow_version_str = _parse_directive_argument_value("workflow_checkpoint", line)
-                workflow_version = None if not workflow_version_str else int(workflow_version_str)
-                rval = self.handle_workflow_display(line, stored_workflow, workflow_version)
+                if encoded_id is not None:
+                    stored_workflow = workflow_manager.get_stored_accessible_workflow(trans, encoded_id)
+                    workflow_version_str = _parse_directive_argument_value("workflow_checkpoint", line)
+                    workflow_version = None if not workflow_version_str else int(workflow_version_str)
+                    rval = self.handle_workflow_display(line, stored_workflow, workflow_version)
             elif container == "workflow_image":
-                stored_workflow = workflow_manager.get_stored_accessible_workflow(trans, encoded_id)
-                workflow_version_str = _parse_directive_argument_value("workflow_checkpoint", line)
-                workflow_version = None if not workflow_version_str else int(workflow_version_str)
-                rval = self.handle_workflow_image(line, stored_workflow, workflow_version)
+                if encoded_id is not None:
+                    stored_workflow = workflow_manager.get_stored_accessible_workflow(trans, encoded_id)
+                    workflow_version_str = _parse_directive_argument_value("workflow_checkpoint", line)
+                    workflow_version = None if not workflow_version_str else int(workflow_version_str)
+                    rval = self.handle_workflow_image(line, stored_workflow, workflow_version)
             elif container == "workflow_license":
-                stored_workflow = workflow_manager.get_stored_accessible_workflow(trans, encoded_id)
-                rval = self.handle_workflow_license(line, stored_workflow)
+                if encoded_id is not None:
+                    stored_workflow = workflow_manager.get_stored_accessible_workflow(trans, encoded_id)
+                    rval = self.handle_workflow_license(line, stored_workflow)
             elif container == "history_dataset_collection_display":
-                hdca = collection_manager.get_dataset_collection_instance(trans, "history", encoded_id)
-                rval = self.handle_dataset_collection_display(line, hdca)
+                if encoded_id is not None:
+                    hdca = collection_manager.get_dataset_collection_instance(trans, "history", encoded_id)
+                    rval = self.handle_dataset_collection_display(line, hdca)
             elif container == "tool_stdout":
-                job = job_manager.get_accessible_job(trans, object_id)
-                rval = self.handle_tool_stdout(line, job)
+                if object_id is not None:
+                    job = job_manager.get_accessible_job(trans, object_id)
+                    rval = self.handle_tool_stdout(line, job)
             elif container == "tool_stderr":
-                job = job_manager.get_accessible_job(trans, object_id)
-                rval = self.handle_tool_stderr(line, job)
+                if object_id is not None:
+                    job = job_manager.get_accessible_job(trans, object_id)
+                    rval = self.handle_tool_stderr(line, job)
             elif container == "job_parameters":
-                job = job_manager.get_accessible_job(trans, object_id)
-                rval = self.handle_job_parameters(line, job)
+                if object_id is not None:
+                    job = job_manager.get_accessible_job(trans, object_id)
+                    rval = self.handle_job_parameters(line, job)
             elif container == "job_metrics":
-                job = job_manager.get_accessible_job(trans, object_id)
-                rval = self.handle_job_metrics(line, job)
+                if object_id is not None:
+                    job = job_manager.get_accessible_job(trans, object_id)
+                    rval = self.handle_job_metrics(line, job)
             elif container == "generate_galaxy_version":
                 version = trans.app.config.version_major
                 rval = self.handle_generate_galaxy_version(line, version)
@@ -214,6 +219,10 @@ def _remap(container, line):
                 title = trans.app.config.organization_name
                 url = trans.app.config.organization_url
                 rval = self.handle_instance_organization_link(line, title, url)
+            elif container == "invocation_inputs":
+                rval = None
+            elif container == "invocation_outputs":
+                rval = None
             elif container == "invocation_time":
                 invocation = workflow_manager.get_invocation(
                     trans, object_id, check_ownership=False, check_accessible=True

From e3c80fdfcf363c96055dc90d08521044114b852e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 13:20:39 -0500
Subject: [PATCH 055/158] Add invocation_id to list of allowed arguments

---
 lib/galaxy/managers/markdown_parse.py | 33 ++++++++++++++-------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/lib/galaxy/managers/markdown_parse.py b/lib/galaxy/managers/markdown_parse.py
index 7f3110da3cd4..0d3f4a73422e 100644
--- a/lib/galaxy/managers/markdown_parse.py
+++ b/lib/galaxy/managers/markdown_parse.py
@@ -28,10 +28,11 @@ class DynamicArguments:
 SHARED_ARGUMENTS: List[str] = ["collapse"]
 VALID_ARGUMENTS: Dict[str, Union[List[str], DynamicArguments]] = {
     "history_link": ["history_id"],
-    "history_dataset_display": ["input", "output", "history_dataset_id"],
-    "history_dataset_embedded": ["input", "output", "history_dataset_id"],
-    "history_dataset_as_image": ["input", "output", "history_dataset_id", "path"],
+    "history_dataset_display": ["invocation_id", "input", "output", "history_dataset_id"],
+    "history_dataset_embedded": ["invocation_id", "input", "output", "history_dataset_id"],
+    "history_dataset_as_image": ["invocation_id", "input", "output", "history_dataset_id", "path"],
     "history_dataset_as_table": [
+        "invocation_id",
         "input",
         "output",
         "history_dataset_id",
@@ -41,20 +42,20 @@ class DynamicArguments:
         "show_column_headers",
         "compact",
     ],
-    "history_dataset_peek": ["input", "output", "history_dataset_id"],
-    "history_dataset_info": ["input", "output", "history_dataset_id"],
-    "history_dataset_link": ["input", "output", "history_dataset_id", "path", "label"],
-    "history_dataset_index": ["input", "output", "history_dataset_id", "path"],
-    "history_dataset_name": ["input", "output", "history_dataset_id"],
-    "history_dataset_type": ["input", "output", "history_dataset_id"],
-    "history_dataset_collection_display": ["input", "output", "history_dataset_collection_id"],
+    "history_dataset_peek": ["invocation_id", "input", "output", "history_dataset_id"],
+    "history_dataset_info": ["invocation_id", "input", "output", "history_dataset_id"],
+    "history_dataset_link": ["invocation_id", "input", "output", "history_dataset_id", "path", "label"],
+    "history_dataset_index": ["invocation_id", "input", "output", "history_dataset_id", "path"],
+    "history_dataset_name": ["invocation_id", "input", "output", "history_dataset_id"],
+    "history_dataset_type": ["invocation_id", "input", "output", "history_dataset_id"],
+    "history_dataset_collection_display": ["invocation_id", "input", "output", "history_dataset_collection_id"],
     "workflow_display": ["workflow_id", "workflow_checkpoint"],
     "workflow_license": ["workflow_id"],
     "workflow_image": ["workflow_id", "size", "workflow_checkpoint"],
-    "job_metrics": ["step", "job_id", "implicit_collection_jobs_id"],
-    "job_parameters": ["step", "job_id", "implicit_collection_jobs_id"],
-    "tool_stderr": ["step", "job_id", "implicit_collection_jobs_id"],
-    "tool_stdout": ["step", "job_id", "implicit_collection_jobs_id"],
+    "job_metrics": ["invocation_id", "step", "job_id", "implicit_collection_jobs_id"],
+    "job_parameters": ["invocation_id", "step", "job_id", "implicit_collection_jobs_id"],
+    "tool_stderr": ["invocation_id", "step", "job_id", "implicit_collection_jobs_id"],
+    "tool_stdout": ["invocation_id", "step", "job_id", "implicit_collection_jobs_id"],
     "generate_galaxy_version": [],
     "generate_time": [],
     "instance_access_link": [],
@@ -67,8 +68,8 @@ class DynamicArguments:
     "visualization": DYNAMIC_ARGUMENTS,
     # Invocation Flavored Markdown
     "invocation_time": ["invocation_id"],
-    "invocation_outputs": [],
-    "invocation_inputs": [],
+    "invocation_outputs": ["invocation_id"],
+    "invocation_inputs": ["invocation_id"],
 }
 GALAXY_FLAVORED_MARKDOWN_CONTAINERS = list(VALID_ARGUMENTS.keys())
 GALAXY_FLAVORED_MARKDOWN_CONTAINER_REGEX = r"(?P<container>{})".format("|".join(GALAXY_FLAVORED_MARKDOWN_CONTAINERS))

From 0ca65403fbe9158889899637a520fa8a65fd21f0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 13:26:06 -0500
Subject: [PATCH 056/158] Populate invocation identifier for inputs and ouputs
 containers

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

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index d724bb687394..cbcf5e08947b 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -869,6 +869,10 @@ def _remap(container, line):
             )
         if container == "history_link":
             return (f"history_link(history_id={invocation.history.id})\n", False)
+        if container == "invocation_inputs":
+            return (f"invocation_inputs(invocation_id={invocation.id})\n", False)
+        if container == "invocation_outputs":
+            return (f"invocation_outputs(invocation_id={invocation.id})\n", False)
         if container == "invocation_time":
             return (f"invocation_time(invocation_id={invocation.id})\n", False)
         ref_object_type = None

From 002ecacfa047181faf68d68a05d6c90e45aa3ed2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 13:37:18 -0500
Subject: [PATCH 057/158] Restore invocation markdown handler

---
 lib/galaxy/managers/markdown_util.py               | 1 +
 lib/galaxy/workflow/reports/generators/__init__.py | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index cbcf5e08947b..0502fffd97a4 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -987,5 +987,6 @@ def _validate(*args, **kwds):
     "internal_galaxy_markdown_to_pdf",
     "ready_galaxy_markdown_for_export",
     "ready_galaxy_markdown_for_import",
+    "resolve_invocation_markdown",
     "to_basic_markdown",
 )
diff --git a/lib/galaxy/workflow/reports/generators/__init__.py b/lib/galaxy/workflow/reports/generators/__init__.py
index 0bd75698e258..70cf73787ff2 100644
--- a/lib/galaxy/workflow/reports/generators/__init__.py
+++ b/lib/galaxy/workflow/reports/generators/__init__.py
@@ -10,6 +10,7 @@
 from galaxy.managers.markdown_util import (
     internal_galaxy_markdown_to_pdf,
     ready_galaxy_markdown_for_export,
+    resolve_invocation_markdown,
 )
 from galaxy.model import WorkflowInvocation
 from galaxy.schema import PdfDocumentType
@@ -69,6 +70,8 @@ def _generate_report_markdown(self, trans, invocation, runtime_report_config_jso
         """ """
 
     def _generate_internal_markdown(self, trans, invocation, runtime_report_config_json=None):
-        return self._generate_report_markdown(
+        workflow_markdown = self._generate_report_markdown(
             trans, invocation, runtime_report_config_json=runtime_report_config_json
         )
+        internal_markdown = resolve_invocation_markdown(trans, invocation, workflow_markdown)
+        return internal_markdown

From 39505bbfee9db0a8a29cbe94b900d06bd7f7431c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 16:35:59 -0500
Subject: [PATCH 058/158] Add invocation id to to entries containing input,
 output or step attributes

---
 lib/galaxy/managers/markdown_util.py | 45 +++++++---------------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index 0502fffd97a4..e47b48f9bc46 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -858,7 +858,7 @@ def _remap(container, line):
                 stored_workflow_id = invocation.workflow.stored_workflow.id
                 workflow_version = invocation.workflow.version
                 return (
-                    f"{workflow_instance_directive}(workflow_id={stored_workflow_id},workflow_checkpoint={workflow_version})\n",
+                    f"{workflow_instance_directive}(workflow_id={stored_workflow_id}, workflow_checkpoint={workflow_version})\n",
                     False,
                 )
         if container == "workflow_license":
@@ -875,47 +875,22 @@ def _remap(container, line):
             return (f"invocation_outputs(invocation_id={invocation.id})\n", False)
         if container == "invocation_time":
             return (f"invocation_time(invocation_id={invocation.id})\n", False)
-        ref_object_type = None
-        output_match = re.search(OUTPUT_LABEL_PATTERN, line)
-        input_match = re.search(INPUT_LABEL_PATTERN, line)
-        step_match = re.search(STEP_LABEL_PATTERN, line)
 
         def find_non_empty_group(match):
             for group in match.groups():
                 if group:
                     return group
 
-        target_match: Optional[Match]
-        ref_object: Optional[Any]
-        if output_match:
-            target_match = output_match
-            name = find_non_empty_group(target_match)
-            ref_object = invocation.get_output_object(name)
-        elif input_match:
-            target_match = input_match
-            name = find_non_empty_group(target_match)
-            ref_object = invocation.get_input_object(name)
-        elif step_match:
-            target_match = step_match
+        ref_object_type = None
+        output_match = re.search(OUTPUT_LABEL_PATTERN, line)
+        input_match = re.search(INPUT_LABEL_PATTERN, line)
+        step_match = re.search(STEP_LABEL_PATTERN, line)
+        target_match = input_match or output_match or step_match
+
+        if (target_match):
             name = find_non_empty_group(target_match)
-            invocation_step = invocation.step_invocation_for_label(name)
-            if invocation_step and invocation_step.job:
-                ref_object_type = "job"
-                ref_object = invocation_step.job
-            elif invocation_step and invocation_step.implicit_collection_jobs:
-                ref_object_type = "implicit_collection_jobs"
-                ref_object = invocation_step.implicit_collection_jobs
-        else:
-            target_match = None
-            ref_object = None
-        if ref_object:
-            assert target_match  # tell type system, this is set when ref_object is set
-            if ref_object_type is None:
-                if ref_object.history_content_type == "dataset":
-                    ref_object_type = "history_dataset"
-                else:
-                    ref_object_type = "history_dataset_collection"
-            line = line.replace(target_match.group(), f"{ref_object_type}_id={ref_object.id}")
+            line = line.replace(f"{container}(", f"{container}(invocation_id={invocation.id}, ")
+
         return (line, False)
 
     galaxy_markdown = _remap_galaxy_markdown_calls(_remap, workflow_markdown)

From 0348e1b76811c9edb9acfff1dc10e2ffe60ffc1a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 16:37:52 -0500
Subject: [PATCH 059/158] Remove unused helper function

---
 lib/galaxy/managers/markdown_util.py | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index e47b48f9bc46..fd9cac7978e8 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -876,19 +876,11 @@ def _remap(container, line):
         if container == "invocation_time":
             return (f"invocation_time(invocation_id={invocation.id})\n", False)
 
-        def find_non_empty_group(match):
-            for group in match.groups():
-                if group:
-                    return group
-
-        ref_object_type = None
         output_match = re.search(OUTPUT_LABEL_PATTERN, line)
         input_match = re.search(INPUT_LABEL_PATTERN, line)
         step_match = re.search(STEP_LABEL_PATTERN, line)
         target_match = input_match or output_match or step_match
-
         if (target_match):
-            name = find_non_empty_group(target_match)
             line = line.replace(f"{container}(", f"{container}(invocation_id={invocation.id}, ")
 
         return (line, False)

From 1ce2bdc8eb428930444544a9904bcb8b5cdd7862 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 23 Jan 2025 18:01:40 -0500
Subject: [PATCH 060/158] Add Galaxy Wrapper to Cell Editor

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

diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index c639f72da31e..900a34866633 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -12,8 +12,9 @@
                     <FontAwesomeIcon :icon="faAngleDoubleDown" />
                 </CellButton>
             </div>
-            <div class="ml-2 w-100">
+            <div class="m-2 w-100">
                 <MarkdownDefault v-if="name === 'markdown'" :content="content" />
+                <MarkdownGalaxy v-else-if="name === 'galaxy'" :content="content" />
                 <MarkdownVega v-else-if="name === 'vega'" :content="content" />
                 <MarkdownVitessce v-else-if="name === 'vitessce'" :content="content" />
             </div>
@@ -37,6 +38,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
+import MarkdownGalaxy from "../Sections/MarkdownGalaxy.vue";
 import MarkdownVega from "../Sections/MarkdownVega.vue";
 import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
 import CellButton from "./CellButton.vue";

From 6a62ed00155f9ece7973c5665a2eb733c8498133 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 24 Jan 2025 09:50:46 -0500
Subject: [PATCH 061/158] Fix typescript, remove unused vars from license
 component

---
 .../Sections/Elements/Workflow/WorkflowLicense.vue        | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
index a4b0f3dd46d0..87501761e439 100644
--- a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
+++ b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
@@ -5,16 +5,14 @@ interface WorkflowLicenseProps {
     licenseId?: string;
 }
 
-const props = withDefaults(defineProps<WorkflowLicenseProps>(), {
-    licenseId: null,
-});
+defineProps<WorkflowLicenseProps>();
 </script>
 
 <template>
     <span>
-        <p v-if="!props.licenseId">
+        <License v-if="licenseId" :license-id="licenseId" />
+        <p v-else>
             <i>Workflow does not define a license.</i>
         </p>
-        <License v-else :license-id="props.licenseId" />
     </span>
 </template>

From 237aad26c6611df01e1e020399b16c569e5c888b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 24 Jan 2025 10:08:13 -0500
Subject: [PATCH 062/158] Remove unused regex expression in markdown utility
 for now

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

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index fd9cac7978e8..50290f0e8cf6 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -71,17 +71,14 @@
 INPUT_LABEL_PATTERN = re.compile(rf"input=\s*{ARG_VAL_CAPTURED_REGEX}\s*")
 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*")
-SIZE_PATTERN = re.compile(rf"size=\s*{ARG_VAL_CAPTURED_REGEX}\s*")
-# STEP_OUTPUT_LABEL_PATTERN = re.compile(r'step_output=([\w_\-]+)/([\w_\-]+)')
+
 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]+)"
 )
-INVOCATION_SECTION_MARKDOWN_CONTAINER_LINE_PATTERN = re.compile(r"```\s*galaxy\s*")
 GALAXY_FENCED_BLOCK = re.compile(r"^```\s*galaxy\s*(.*?)^```", re.MULTILINE ^ re.DOTALL)
-VALID_CONTAINER_START_PATTERN = re.compile(r"^```\s+[\w]+.*$")
 
 
 def ready_galaxy_markdown_for_import(trans, external_galaxy_markdown):

From 28d9cb8b7e30d8eb4522213f0d70608966bcff71 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 24 Jan 2025 10:13:43 -0500
Subject: [PATCH 063/158] Add abstract placeholder functions for consistency

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

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index 50290f0e8cf6..dc2dee425270 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -217,16 +217,16 @@ def _remap(container, line):
                 url = trans.app.config.organization_url
                 rval = self.handle_instance_organization_link(line, title, url)
             elif container == "invocation_inputs":
-                rval = None
+                rval = self.handle_invocation_inputs(line, title, url)
             elif container == "invocation_outputs":
-                rval = None
+                rval = self.handle_invocation_outputs(line, title, url)
             elif container == "invocation_time":
                 invocation = workflow_manager.get_invocation(
                     trans, object_id, check_ownership=False, check_accessible=True
                 )
                 rval = self.handle_invocation_time(line, invocation)
             elif container == "visualization":
-                rval = None
+                rval = self.handle_visualization(line, title, url)
             else:
                 raise MalformedContents(f"Unknown Galaxy Markdown directive encountered [{container}].")
             if rval is not None:
@@ -361,6 +361,18 @@ def handle_instance_organization_link(self, line, title, url):
     def handle_invocation_time(self, line, date):
         pass
 
+    @abc.abstractmethod
+    def handle_invocation_inputs(self, line, date):
+        pass
+
+    @abc.abstractmethod
+    def handle_invocation_outputs(self, line, date):
+        pass
+
+    @abc.abstractmethod
+    def handle_visualization(self, line, date):
+        pass
+
     @abc.abstractmethod
     def handle_error(self, container, line, error):
         pass

From 992b4312c05a0be815e3139249712df24dbcad72 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 24 Jan 2025 12:36:57 -0500
Subject: [PATCH 064/158] Update markdown utility comment for
 resolve_invocation_markdown procedure

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

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index dc2dee425270..4ade238a43ea 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -845,21 +845,27 @@ def to_branded_pdf(basic_markdown: str, document_type: PdfDocumentType, config:
 
 
 def resolve_invocation_markdown(trans, invocation, workflow_markdown):
-    """Resolve invocation objects to convert markdown to 'internal' representation.
-
-    Replace references to abstract workflow parts with actual galaxy object IDs corresponding
-    to the actual executed workflow. For instance:
-
-        convert output=name -to- history_dataset_id=<id> | history_dataset_collection_id=<id>
-        convert input=name -to- history_dataset_id=<id> | history_dataset_collection_id=<id>
-        convert step=name -to- job_id=<id>
-
-    Also expand/convert workflow invocation specific container sections into actual Galaxy
-    markdown - these containers include: invocation_inputs, invocation_outputs, invocation_workflow.
-    Hopefully this list will be expanded to include invocation_qc.
     """
-    # TODO: convert step outputs?
-    # convert step_output=index/name -to- history_dataset_id=<id> | history_dataset_collection_id=<id>
+    Resolve invocation objects to convert markdown to 'internal' representation.
+
+    Add the invocation_id to the relevant attributes where required.
+    Avoid making irreversible changes to the markdown, as this could compromise the interchangeability between
+    workflow reports and pages. In future updates, the `invocation_id` may be migrated from the markdown to a
+    dedicated database relationship column for better management.
+
+    Specifically:
+    - Convert references to abstract workflow parts into attributes that include invocation-specific
+    details, such as invocation_id. For example:
+        - `output=name` becomes `invocation_id=<id>, output=name`
+        - `input=name` becomes `invocation_id=<id>, input=name`
+        - `step=name` becomes `invocation_id=<id>, step=name `
+
+    Additionally, expand/convert workflow invocation-specific container sections into their
+    corresponding Galaxy markdown representations. These sections include:
+    - invocation_inputs
+    - invocation_outputs
+    - invocation_workflow
+    """
 
     def _remap(container, line):
         for workflow_instance_directive in ["workflow_display", "workflow_image"]:

From 7e3474804b7d4be16911cc82dce49f13c372f0d0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 24 Jan 2025 12:56:51 -0500
Subject: [PATCH 065/158] Implement placeholders for relocated container types

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

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index 4ade238a43ea..9f1ad5a811d9 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -482,6 +482,15 @@ def handle_invocation_time(self, line, invocation):
             "%Y-%m-%d, %H:%M:%S"
         )
 
+    def handle_invocation_inputs(self, line, date):
+        pass
+
+    def handle_invocation_outputs(self, line, date):
+        pass
+
+    def handle_visualization(self, line, date):
+        pass
+
     def handle_dataset_type(self, line, hda):
         self.extend_history_dataset_rendering_data(hda, "ext", hda.ext, "*Unknown dataset type*")
 
@@ -743,6 +752,15 @@ def handle_invocation_time(self, line, invocation):
         content = literal_via_fence(invocation.create_time.strftime("%Y-%m-%d, %H:%M:%S"))
         return (content, True)
 
+    def handle_invocation_inputs(self, line, date):
+        return ("*Invocation inputs not implemented*", True)
+
+    def handle_invocation_outputs(self, line, date):
+        return ("*Invocation outputs not implemented*", True)
+
+    def handle_visualization(self, line, date):
+        return ("*Visualization inputs not implemented*", True)
+
     def handle_dataset_name(self, line, hda):
         if hda.name:
             content = literal_via_fence(hda.name)

From 566e2e0beb561d032019187e8867704e4483ec13 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 11:37:17 -0500
Subject: [PATCH 066/158] Remove prepopulated workflows list from markdown
 wrapper, use axios for now since store is not available

---
 .../Elements/Workflow/WorkflowDisplay.vue     |  1 -
 .../Elements/Workflow/WorkflowLicense.vue     | 23 +++++++++++++++++--
 .../Markdown/Sections/MarkdownGalaxy.vue      |  9 ++------
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
index 9a6db0d60771..824989ce5a4a 100644
--- a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowDisplay.vue
@@ -19,7 +19,6 @@ interface WorkflowDisplayProps {
 }
 
 const props = withDefaults(defineProps<WorkflowDisplayProps>(), {
-    workflowVersion: null,
     embedded: false,
     expanded: false,
 });
diff --git a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
index 87501761e439..4bb87c334f62 100644
--- a/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
+++ b/client/src/components/Markdown/Sections/Elements/Workflow/WorkflowLicense.vue
@@ -1,11 +1,30 @@
 <script setup lang="ts">
+import axios from "axios";
+import { ref } from "vue";
+
+import { getAppRoot } from "@/onload/loadConfig";
+
 import License from "@/components/License/License.vue";
 
 interface WorkflowLicenseProps {
-    licenseId?: string;
+    workflowId: string;
+}
+
+const props = defineProps<WorkflowLicenseProps>();
+
+const licenseId = ref("");
+
+async function fetchLicense(workflowId: string) {
+    try {
+        const response = await axios.get(`${getAppRoot()}api/workflows/${workflowId}`);
+        licenseId.value = response.data?.license || "";
+    } catch (error) {
+        console.error("Error fetching workflow license:", error);
+        licenseId.value = "";
+    }
 }
 
-defineProps<WorkflowLicenseProps>();
+fetchLicense(props.workflowId);
 </script>
 
 <template>
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 50256e8c3731..b3c6ffa6b42b 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -54,10 +54,6 @@ const props = defineProps({
         type: String,
         default: null,
     },
-    workflows: {
-        type: Object,
-        default: null,
-    },
 });
 
 const parsedArgs = computed(() => getArgs(props.content));
@@ -98,7 +94,7 @@ function argToBoolean(args, name, booleanDefault) {
                     :workflow-version="args.workflow_checkpoint || undefined" />
             </div>
             <div v-else-if="name == 'workflow_license'" class="workflow-license">
-                <WorkflowLicense :license-id="workflows[args.workflow_id]['license']" />
+                <WorkflowLicense :workflow-id="args.workflow_id" />
             </div>
             <InstanceUrl
                 v-else-if="name == 'instance_citation_link'"
@@ -161,8 +157,7 @@ function argToBoolean(args, name, booleanDefault) {
             <WorkflowDisplay
                 v-else-if="name == 'workflow_display'"
                 :workflow-id="args.workflow_id"
-                :workflow-version="args.workflow_checkpoint"
-                :workflows="workflows" />
+                :workflow-version="args.workflow_checkpoint" />
             <Visualization v-else-if="name == 'visualization'" :args="args" />
             <HistoryDatasetCollectionDisplay
                 v-else-if="name == 'history_dataset_collection_display'"

From b1b0072e33289ae2044a6f7f19c7c4c3968dd488 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 12:43:23 -0500
Subject: [PATCH 067/158] Load invocation time without requiring pre populated
 invocation details

---
 .../Sections/Elements/InvocationTime.vue      | 52 +++++++++++--------
 .../Markdown/Sections/MarkdownGalaxy.vue      |  2 +-
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/InvocationTime.vue b/client/src/components/Markdown/Sections/Elements/InvocationTime.vue
index b335bb377974..88f6b8da8fc9 100644
--- a/client/src/components/Markdown/Sections/Elements/InvocationTime.vue
+++ b/client/src/components/Markdown/Sections/Elements/InvocationTime.vue
@@ -1,26 +1,32 @@
+<script setup lang="ts">
+import axios from "axios";
+import { ref } from "vue";
+
+import { getAppRoot } from "@/onload/loadConfig";
+
+const props = defineProps<{
+    invocationId: string;
+}>();
+
+const invocationTime = ref();
+
+async function fetchInvocation(invocationId: string) {
+    try {
+        const { data } = await axios.get(`${getAppRoot()}api/invocations/${invocationId}`);
+        if (data.create_time) {
+            invocationTime.value = new Date(data.create_time).toUTCString();
+        }
+    } catch (error) {
+        console.error("Error fetching invocation time:", error);
+        invocationTime.value = "";
+    }
+}
+
+fetchInvocation(props.invocationId);
+</script>
+
 <template>
-    <div class="invocation-time" :invocation_id="args.invocation_id">
-        <pre><code>{{ content }}</code></pre>
+    <div class="invocation-time">
+        <pre><code>{{ invocationTime }}</code></pre>
     </div>
 </template>
-
-<script>
-export default {
-    props: {
-        args: {
-            type: Object,
-            required: true,
-        },
-        invocations: {
-            type: Object,
-            required: true,
-        },
-    },
-    computed: {
-        content() {
-            const invocation = this.invocations[this.args.invocation_id];
-            return invocation && new Date(invocation["create_time"]).toUTCString();
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index b3c6ffa6b42b..ba2fad6330bc 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -140,7 +140,7 @@ function argToBoolean(args, name, booleanDefault) {
                 :footer="args.footer" />
             <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />
             <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
-            <InvocationTime v-else-if="name == 'invocation_time'" :args="args" :invocations="invocations" />
+            <InvocationTime v-else-if="name == 'invocation_time'" :invocation-id="args.invocation_id" />
             <JobMetrics
                 v-else-if="name == 'job_metrics'"
                 :job-id="args.job_id"

From 051b3b4a2edd7f3a01859660d28d68451507a12e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 12:45:58 -0500
Subject: [PATCH 068/158] Remove invocations from markdown galaxy container

---
 client/src/components/Markdown/Sections/MarkdownGalaxy.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index ba2fad6330bc..949ddd740566 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -42,10 +42,6 @@ const props = defineProps({
         type: Object,
         default: null,
     },
-    invocations: {
-        type: Object,
-        default: null,
-    },
     time: {
         type: String,
         default: null,

From e1a856ea58102025f3438ce49b58cefaa505ff05 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 12:51:52 -0500
Subject: [PATCH 069/158] Convert markdown galaxy history link component to
 composition api

---
 .../Sections/Elements/HistoryLink.vue         | 75 +++++++------------
 1 file changed, 28 insertions(+), 47 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryLink.vue b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
index e613d78bedec..59062a5ba9c0 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
@@ -4,9 +4,9 @@
             v-if="showLink"
             data-description="history import link"
             :data-history-id="args.history_id"
-            @click="onClick"
-            >Click to Import History: {{ name }}.</b-link
-        >
+            @click="onClick">
+            Click to Import History: {{ name }}.
+        </b-link>
         <div v-if="imported" class="text-success">
             <FontAwesomeIcon icon="check" class="mr-1" />
             <span>Successfully Imported History: {{ name }}!</span>
@@ -19,55 +19,36 @@
     </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
+//@ts-ignore
 import { withPrefix } from "utils/redirect";
+//@ts-ignore
 import { errorMessageAsString } from "utils/simple-error";
-import Vue from "vue";
+import { computed, ref } from "vue";
 
-Vue.use(BootstrapVue);
+interface Props {
+    args: {
+        history_id: string;
+    };
+    histories: Record<string, { name: string }>;
+}
 
-export default {
-    components: {
-        FontAwesomeIcon,
-    },
-    props: {
-        args: {
-            type: Object,
-            default: null,
-        },
-        histories: {
-            type: Object,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            imported: false,
-            error: false,
-        };
-    },
-    computed: {
-        name() {
-            return this.histories[this.args.history_id].name;
-        },
-        showLink() {
-            return !this.imported && !this.error;
-        },
-    },
-    methods: {
-        onClick() {
-            axios
-                .post(withPrefix("/api/histories"), { history_id: this.args.history_id })
-                .then(() => {
-                    this.imported = true;
-                })
-                .catch((e) => {
-                    this.error = errorMessageAsString(e);
-                });
-        },
-    },
+const props = defineProps<Props>();
+
+const imported = ref(false);
+const error = ref<string | null>(null);
+
+const name = computed(() => props.histories[props.args.history_id]?.name || "");
+const showLink = computed(() => !imported.value && !error.value);
+
+const onClick = async () => {
+    try {
+        await axios.post(withPrefix("/api/histories"), { history_id: props.args.history_id });
+        imported.value = true;
+    } catch (e) {
+        error.value = errorMessageAsString(e);
+    }
 };
 </script>

From 3520919721677b3cf490a1d1f3ea113dca60422e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 13:05:03 -0500
Subject: [PATCH 070/158] Decouple history link from requiring prepopulated
 history summaries, should use stores

---
 .../Sections/Elements/HistoryLink.vue         | 63 ++++++++++---------
 .../Markdown/Sections/MarkdownGalaxy.vue      |  2 +-
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryLink.vue b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
index 59062a5ba9c0..0ff50d9a9f2f 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
@@ -1,38 +1,14 @@
-<template>
-    <div>
-        <b-link
-            v-if="showLink"
-            data-description="history import link"
-            :data-history-id="args.history_id"
-            @click="onClick">
-            Click to Import History: {{ name }}.
-        </b-link>
-        <div v-if="imported" class="text-success">
-            <FontAwesomeIcon icon="check" class="mr-1" />
-            <span>Successfully Imported History: {{ name }}!</span>
-        </div>
-        <div v-if="!!error" class="text-danger">
-            <FontAwesomeIcon icon="exclamation-triangle" class="mr-1" />
-            <span>Failed to Import History: {{ name }}!</span>
-            <span>{{ error }}</span>
-        </div>
-    </div>
-</template>
-
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 //@ts-ignore
-import { withPrefix } from "utils/redirect";
-//@ts-ignore
 import { errorMessageAsString } from "utils/simple-error";
 import { computed, ref } from "vue";
 
+import { getAppRoot } from "@/onload/loadConfig";
+
 interface Props {
-    args: {
-        history_id: string;
-    };
-    histories: Record<string, { name: string }>;
+    historyId: string;
 }
 
 const props = defineProps<Props>();
@@ -40,15 +16,44 @@ const props = defineProps<Props>();
 const imported = ref(false);
 const error = ref<string | null>(null);
 
-const name = computed(() => props.histories[props.args.history_id]?.name || "");
+const name = ref("");
 const showLink = computed(() => !imported.value && !error.value);
 
 const onClick = async () => {
     try {
-        await axios.post(withPrefix("/api/histories"), { history_id: props.args.history_id });
+        await axios.post(`${getAppRoot}/api/histories/${props.historyId}`);
         imported.value = true;
     } catch (e) {
         error.value = errorMessageAsString(e);
     }
 };
+
+async function fetchName(historyId: string) {
+    try {
+        const { data } = await axios.get(`${getAppRoot()}api/histories/${historyId}`);
+        name.value = data?.name || "";
+    } catch (error) {
+        console.error("Error fetching history name:", error);
+        name.value = "";
+    }
+}
+
+fetchName(props.historyId);
 </script>
+
+<template>
+    <div>
+        <b-link v-if="showLink" data-description="history import link" :data-history-id="historyId" @click="onClick">
+            Click to Import History: {{ name }}.
+        </b-link>
+        <div v-if="imported" class="text-success">
+            <FontAwesomeIcon icon="check" class="mr-1" />
+            <span>Successfully Imported History: {{ name }}!</span>
+        </div>
+        <div v-if="!!error" class="text-danger">
+            <FontAwesomeIcon icon="exclamation-triangle" class="mr-1" />
+            <span>Failed to Import History: {{ name }}!</span>
+            <span>{{ error }}</span>
+        </div>
+    </div>
+</template>
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 949ddd740566..bb7aa859e152 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -125,7 +125,7 @@ function argToBoolean(args, name, booleanDefault) {
                 :title="config.ga4gh_service_organization_name"
                 :loading="!isConfigLoaded">
             </InstanceUrl>
-            <HistoryLink v-else-if="name == 'history_link'" :args="args" :histories="histories" />
+            <HistoryLink v-else-if="name == 'history_link'" :history-id="args.history_id" />
             <HistoryDatasetAsImage v-else-if="name == 'history_dataset_as_image'" :args="args" />
             <HistoryDatasetAsTable
                 v-else-if="name == 'history_dataset_as_table'"

From 10220792e6c3d926817a559d29963da62b1ede63 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 13:06:12 -0500
Subject: [PATCH 071/158] Remove histories from markdown galaxy container props

---
 client/src/components/Markdown/Sections/MarkdownGalaxy.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index bb7aa859e152..f7e0d4f84697 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -38,10 +38,6 @@ const props = defineProps({
         type: Object,
         default: null,
     },
-    histories: {
-        type: Object,
-        default: null,
-    },
     time: {
         type: String,
         default: null,

From d2060724f46d1598e1294fdb2334b4fcd9a8e92b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 13:09:02 -0500
Subject: [PATCH 072/158] Fix post helper to import history from link

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

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryLink.vue b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
index 0ff50d9a9f2f..505acb37ad2e 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
@@ -21,7 +21,7 @@ const showLink = computed(() => !imported.value && !error.value);
 
 const onClick = async () => {
     try {
-        await axios.post(`${getAppRoot}/api/histories/${props.historyId}`);
+        await axios.post(`${getAppRoot()}api/histories`, { history_id: props.historyId });
         imported.value = true;
     } catch (e) {
         error.value = errorMessageAsString(e);

From 75825ad56f2adbc74e3d6066220b4640d1226b53 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 13:39:25 -0500
Subject: [PATCH 073/158] Remove version major prop from markdown component,
 version is already avaiable in instance data

---
 client/src/components/Markdown/Sections/MarkdownGalaxy.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index f7e0d4f84697..f88d75f6306e 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 
 import { getArgs } from "@/components/Markdown/parse";
+import { getGalaxyInstance } from "@/app";
 import { useConfig } from "@/composables/config";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
@@ -42,10 +43,6 @@ const props = defineProps({
         type: String,
         default: null,
     },
-    version: {
-        type: String,
-        default: null,
-    },
 });
 
 const parsedArgs = computed(() => getArgs(props.content));
@@ -54,6 +51,7 @@ const name = computed(() => parsedArgs.value.name);
 
 const isCollapsible = computed(() => args.value.collapse !== undefined);
 const isVisible = computed(() => !isCollapsible.value || toggle.value);
+const version = computed(() => getGalaxyInstance().config.version_major);
 
 function argToBoolean(args, name, booleanDefault) {
     const valueAsString = args[name];

From fd06bbc680c8d823207897f0196ce4494daa604b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 13:45:06 -0500
Subject: [PATCH 074/158] Remove time from markdown props

---
 .../src/components/Markdown/Sections/MarkdownGalaxy.vue   | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index f88d75f6306e..f0458ccdc6ae 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { computed, ref } from "vue";
 
-import { getArgs } from "@/components/Markdown/parse";
 import { getGalaxyInstance } from "@/app";
+import { getArgs } from "@/components/Markdown/parse";
 import { useConfig } from "@/composables/config";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
@@ -39,10 +39,6 @@ const props = defineProps({
         type: Object,
         default: null,
     },
-    time: {
-        type: String,
-        default: null,
-    },
 });
 
 const parsedArgs = computed(() => getArgs(props.content));
@@ -75,7 +71,7 @@ function argToBoolean(args, name, booleanDefault) {
                 <pre><code>{{ version }}</code></pre>
             </div>
             <div v-else-if="name == 'generate_time'" class="galaxy-time">
-                <pre><code>{{ time }}</code></pre>
+                <pre><code>{{ new Date().toUTCString() }}</code></pre>
             </div>
             <div v-else-if="name == 'workflow_image'" class="workflow-image" style="text-align: center">
                 <WorkflowImage

From 77f799f0b3e109d9ceeeb862fccba92620eaefd3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 14:16:54 -0500
Subject: [PATCH 075/158] Make sure to trim before applying regex to match
 containers

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

diff --git a/client/src/components/Markdown/parse.ts b/client/src/components/Markdown/parse.ts
index 87dc1686bffd..4fbd63cd1870 100644
--- a/client/src/components/Markdown/parse.ts
+++ b/client/src/components/Markdown/parse.ts
@@ -26,7 +26,7 @@ export function parseMarkdown(input: string): { name: string; content: string }[
     let currentName: string = "markdown";
     let currentContent: string[] = [];
     lines.forEach((line) => {
-        const sectionMatch = line.match(/^```(.*)$/);
+        const sectionMatch = line.trim().match(/^```(.*)$/);
         if (sectionMatch) {
             parseResult(result, currentName, currentContent);
             currentName = sectionMatch[1] || "markdown";

From a46cd22388138d7aa285ba3dac0dea6bdcdbebde Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 14:25:47 -0500
Subject: [PATCH 076/158] Avoid using prepopulated collection details to access
 name in collection display component

---
 .../CollectionDisplay.vue                     | 21 +++++++------------
 .../Markdown/Sections/MarkdownGalaxy.vue      |  3 +--
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
index 134483634555..a7c441126211 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
@@ -14,7 +14,7 @@
                     <span class="fa fa-download" />
                 </b-button>
                 <b-button
-                    v-if="vcurrentUser && currentHistoryId"
+                    v-if="currentUser && currentHistoryId"
                     v-b-tooltip.hover
                     href="#"
                     role="button"
@@ -28,7 +28,7 @@
             </span>
             <span>
                 <span>Dataset Collection:</span>
-                <span class="font-weight-light">{{ collectionName }}</span>
+                <span class="font-weight-light">{{ itemName }}</span>
             </span>
         </b-card-header>
         <b-card-body>
@@ -61,11 +61,7 @@ export default {
         LoadingSpan,
     },
     props: {
-        args: {
-            type: Object,
-            default: null,
-        },
-        collections: {
+        collectionId: {
             type: Object,
             default: null,
         },
@@ -81,15 +77,14 @@ export default {
     computed: {
         ...mapState(useUserStore, ["currentUser"]),
         ...mapState(useHistoryStore, ["currentHistoryId"]),
-        collectionName() {
-            const collection = this.collections[this.args.history_dataset_collection_id];
-            return collection && collection.name;
+        itemName() {
+            return this.itemContent?.name;
         },
         itemUrl() {
-            return `${getAppRoot()}api/dataset_collections/${this.args.history_dataset_collection_id}`;
+            return `${getAppRoot()}api/dataset_collections/${this.collectionId}`;
         },
         downloadUrl() {
-            return `${getAppRoot()}api/dataset_collections/${this.args.history_dataset_collection_id}/download`;
+            return `${getAppRoot()}api/dataset_collections/${this.collectionId}/download`;
         },
     },
     created() {
@@ -100,7 +95,7 @@ export default {
     },
     methods: {
         onCopyCollection(currentHistoryId) {
-            const hdcaId = this.args.history_dataset_collection_id;
+            const hdcaId = this.collectionId;
             copyCollection(hdcaId, currentHistoryId).then(
                 (response) => {
                     this.messageVariant = "success";
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index f0458ccdc6ae..27d8da384653 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -147,8 +147,7 @@ function argToBoolean(args, name, booleanDefault) {
             <Visualization v-else-if="name == 'visualization'" :args="args" />
             <HistoryDatasetCollectionDisplay
                 v-else-if="name == 'history_dataset_collection_display'"
-                :args="args"
-                :collections="collections" />
+                :collection-id="args.history_dataset_collection_id" />
             <ToolStd
                 v-else-if="['tool_stdout', 'tool_stderr'].includes(name)"
                 :job-id="args.job_id"

From b2c3ed0722ae0711aa569eba05458d2e1f9e87ee Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 14:27:28 -0500
Subject: [PATCH 077/158] Remove collections from galaxy container props

---
 client/src/components/Markdown/Sections/MarkdownGalaxy.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 27d8da384653..b6854e4e4e6d 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -35,10 +35,6 @@ const props = defineProps({
         type: Object,
         default: null,
     },
-    collections: {
-        type: Object,
-        default: null,
-    },
 });
 
 const parsedArgs = computed(() => getArgs(props.content));

From bc0ea0c3a04ea187978167e75bd3c795ae3ee774 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 14:34:08 -0500
Subject: [PATCH 078/158] Convert collection display component to composition
 api

---
 .../CollectionDisplay.vue                     | 118 ++++++++----------
 1 file changed, 51 insertions(+), 67 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
index a7c441126211..a06734fff758 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetCollection/CollectionDisplay.vue
@@ -43,81 +43,65 @@
     </b-card>
 </template>
 
-<script>
+<script setup lang="ts">
 import axios from "axios";
-import LoadingSpan from "components/LoadingSpan";
-import { copyCollection } from "components/Markdown/services";
-import { getAppRoot } from "onload/loadConfig";
-import { mapState } from "pinia";
+import { computed, onMounted, ref } from "vue";
 
+import { copyCollection } from "@/components/Markdown/services";
+import { getAppRoot } from "@/onload/loadConfig";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 
-import CollectionTree from "./CollectionTree";
+import CollectionTree from "./CollectionTree.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
-export default {
-    components: {
-        CollectionTree,
-        LoadingSpan,
-    },
-    props: {
-        collectionId: {
-            type: Object,
-            default: null,
-        },
-    },
-    data() {
-        return {
-            itemContent: null,
-            loading: true,
-            messageText: null,
-            messageVariant: null,
-        };
-    },
-    computed: {
-        ...mapState(useUserStore, ["currentUser"]),
-        ...mapState(useHistoryStore, ["currentHistoryId"]),
-        itemName() {
-            return this.itemContent?.name;
-        },
-        itemUrl() {
-            return `${getAppRoot()}api/dataset_collections/${this.collectionId}`;
-        },
-        downloadUrl() {
-            return `${getAppRoot()}api/dataset_collections/${this.collectionId}/download`;
-        },
-    },
-    created() {
-        this.getContent().then((data) => {
-            this.itemContent = data;
-            this.loading = false;
-        });
-    },
-    methods: {
-        onCopyCollection(currentHistoryId) {
-            const hdcaId = this.collectionId;
-            copyCollection(hdcaId, currentHistoryId).then(
-                (response) => {
-                    this.messageVariant = "success";
-                    this.messageText = "Successfully copied to current history.";
-                },
-                (error) => {
-                    this.messageVariant = "danger";
-                    this.messageText = error;
-                }
-            );
-        },
-        async getContent() {
-            try {
-                const response = await axios.get(this.itemUrl);
-                return response.data;
-            } catch (e) {
-                return `Failed to retrieve content. ${e}`;
-            }
-        },
-    },
+const props = defineProps<{
+    collectionId: string;
+}>();
+
+const userStore = useUserStore();
+const historyStore = useHistoryStore();
+
+const currentUser = computed(() => userStore.currentUser);
+const currentHistoryId = computed(() => historyStore.currentHistoryId);
+
+const itemContent = ref<any>(null);
+const loading = ref(true);
+const messageText = ref<string | null>(null);
+const messageVariant = ref<string | null>(null);
+
+const itemName = computed(() => itemContent.value?.name || "");
+const itemUrl = computed(() => `${getAppRoot()}api/dataset_collections/${props.collectionId}`);
+const downloadUrl = computed(() => `${getAppRoot()}api/dataset_collections/${props.collectionId}/download`);
+
+const onCopyCollection = async (currentHistoryId: string) => {
+    try {
+        await copyCollection(props.collectionId, currentHistoryId);
+        messageVariant.value = "success";
+        messageText.value = "Successfully copied to current history.";
+    } catch (error) {
+        messageVariant.value = "danger";
+        messageText.value = error as string;
+    }
 };
+
+const getContent = async () => {
+    try {
+        const response = await axios.get(itemUrl.value);
+        itemContent.value = response.data;
+    } catch (e) {
+        messageVariant.value = "danger";
+        messageText.value = `Failed to retrieve content. ${e}`;
+    } finally {
+        loading.value = false;
+    }
+};
+
+onMounted(() => {
+    getContent();
+});
 </script>
+
 <style scoped>
 .content-height {
     max-height: 15rem;

From 82e80a0a1ddcc4b43718fa10d32119a95eff47ac Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 15:16:40 -0500
Subject: [PATCH 079/158] Improve visualization wrapper handling

---
 .../Markdown/Sections/MarkdownVitessce.vue    |  4 +-
 .../Visualizations/VisualizationWrapper.vue   | 47 +++++++++----------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
index 5d9f4f3faec9..74324b87a4b2 100644
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -15,7 +15,5 @@ const dataIncoming = computed(() => ({
 </script>
 
 <template>
-    <div>
-        <VisualizationWrapper name="vitessce" :data-incoming="dataIncoming" height="500px" />
-    </div>
+    <VisualizationWrapper name="vitessce" :data-incoming="dataIncoming" height="500px" />
 </template>
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index a15551c91760..a0dadf46d98b 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -23,33 +23,32 @@ onMounted(() => {
     const pluginSrc = `${pluginPath}.js`;
     const pluginCss = `${pluginPath}.css`;
 
-    if (iframeRef.value) {
-        const iframe = iframeRef.value;
-        iframe.onload = () => {
-            const iframeDocument = iframe.contentDocument;
-            if (!iframeDocument) {
-                console.error("Failed to access iframe document.");
-                return;
-            }
+    const iframe = iframeRef.value;
+    if (iframe) {
+        // Verify document existence
+        const iframeDocument = iframe.contentDocument;
+        if (!iframeDocument) {
+            console.error("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(props.dataIncoming));
-            iframeDocument.body.appendChild(container);
+        // Create the container for the plugin
+        const container = iframeDocument.createElement("div");
+        container.id = "app";
+        container.setAttribute("data-incoming", JSON.stringify(props.dataIncoming));
+        iframeDocument.body.appendChild(container);
 
-            // Inject the script tag for the plugin
-            const script = iframeDocument.createElement("script");
-            script.type = "module";
-            script.src = pluginSrc;
-            iframeDocument.body.appendChild(script);
+        // Inject the script tag for the plugin
+        const script = iframeDocument.createElement("script");
+        script.type = "module";
+        script.src = pluginSrc;
+        iframeDocument.body.appendChild(script);
 
-            // Add a CSS link to the iframe document
-            const link = iframeDocument.createElement("link");
-            link.rel = "stylesheet";
-            link.href = pluginCss;
-            iframeDocument.head.appendChild(link);
-        };
+        // Add a CSS link to the iframe document
+        const link = iframeDocument.createElement("link");
+        link.rel = "stylesheet";
+        link.href = pluginCss;
+        iframeDocument.head.appendChild(link);
     }
 });
 </script>

From dab569a73b42a23ebd2758f1beb88b14c34784c5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 15:22:05 -0500
Subject: [PATCH 080/158] Remove datasets prop from history dataset display
 component

---
 .../Elements/HistoryDatasetDisplay.vue         | 18 +++++++++---------
 .../Markdown/Sections/MarkdownGalaxy.vue       |  3 +--
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
index f16ca73a7deb..65c91e99d1ae 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
@@ -124,8 +124,8 @@ export default {
         HistoryDatasetAsImage,
     },
     props: {
-        args: {
-            type: Object,
+        datasetId: {
+            type: Number,
             required: true,
         },
         datasets: {
@@ -157,27 +157,27 @@ export default {
             }
         },
         datasetType() {
-            const dataset = this.datasets[this.args.history_dataset_id];
+            const dataset = this.datasets[this.datasetId];
             return dataset.ext;
         },
         datasetName() {
-            const dataset = this.datasets[this.args.history_dataset_id];
+            const dataset = this.datasets[this.datasetId];
             return dataset && dataset.name;
         },
         downloadUrl() {
-            return `${getAppRoot()}dataset/display?dataset_id=${this.args.history_dataset_id}`;
+            return `${getAppRoot()}dataset/display?dataset_id=${this.datasetId}`;
         },
         displayUrl() {
-            return `${getAppRoot()}datasets/${this.args.history_dataset_id}/display/?preview=True`;
+            return `${getAppRoot()}datasets/${this.datasetId}/display/?preview=True`;
         },
         importUrl() {
-            return `${getAppRoot()}dataset/imp?dataset_id=${this.args.history_dataset_id}`;
+            return `${getAppRoot()}dataset/imp?dataset_id=${this.datasetId}`;
         },
         itemUrl() {
-            return `/api/datasets/${this.args.history_dataset_id}/get_content_as_text`;
+            return `/api/datasets/${this.datasetId}/get_content_as_text`;
         },
         metaUrl() {
-            return `/api/datasets/${this.args.history_dataset_id}`;
+            return `/api/datasets/${this.datasetId}`;
         },
     },
     created() {
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index b6854e4e4e6d..20dd84d78294 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -151,8 +151,7 @@ function argToBoolean(args, name, booleanDefault) {
                 :name="name" />
             <HistoryDatasetDisplay
                 v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(name)"
-                :args="args"
-                :datasets="datasets"
+                :dataset-id="args.history_dataset_id"
                 :embedded="name == 'history_dataset_embedded'" />
             <HistoryDatasetDetails
                 v-else-if="

From 3d6a7ceb99b18b77068c07beaf5c09ed7f7111ac Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 15:31:05 -0500
Subject: [PATCH 081/158] Obtain dataset name and type from metadata url
 provider in dataset display component

---
 .../Elements/HistoryDatasetDisplay.vue        | 194 ++++++++----------
 1 file changed, 89 insertions(+), 105 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
index 65c91e99d1ae..0c8825483bff 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
@@ -1,81 +1,80 @@
 <template>
-    <b-card body-class="p-0">
-        <b-card-header v-if="!embedded">
-            <span class="float-right">
-                <b-button
-                    v-b-tooltip.hover
-                    :href="downloadUrl"
-                    variant="link"
-                    size="sm"
-                    role="button"
-                    title="Download Dataset"
-                    type="button"
-                    class="py-0 px-1">
-                    <span class="fa fa-download" />
-                </b-button>
-                <b-button
-                    v-b-tooltip.hover
-                    :href="importUrl"
-                    role="button"
-                    variant="link"
-                    title="Import Dataset"
-                    type="button"
-                    class="py-0 px-1">
-                    <span class="fa fa-file-import" />
-                </b-button>
-                <b-button
-                    v-if="expanded"
-                    v-b-tooltip.hover
-                    href="#"
-                    role="button"
-                    variant="link"
-                    title="Collapse"
-                    type="button"
-                    class="py-0 px-1"
-                    @click="onExpand">
-                    <span class="fa fa-angle-double-up" />
-                </b-button>
-                <b-button
-                    v-else
-                    v-b-tooltip.hover
-                    href="#"
-                    role="button"
-                    variant="link"
-                    title="Expand"
-                    type="button"
-                    class="py-0 px-1"
-                    @click="onExpand">
-                    <span class="fa fa-angle-double-down" />
-                </b-button>
-            </span>
-            <span>
-                <span>Dataset:</span>
-                <span class="font-weight-light">{{ datasetName }}</span>
-            </span>
-        </b-card-header>
-        <b-card-body>
-            <UrlDataProvider v-slot="{ result: itemContent, loading: datasetLoading, error }" :url="itemUrl">
-                <LoadingSpan v-if="datasetLoading" message="Loading Dataset" />
-                <LoadingSpan v-else-if="loading" message="Loading Datatypes" />
-                <div v-else-if="error">{{ error }}</div>
-                <div v-else-if="!datatypesMapper">Datatypes not loaded.</div>
-                <div v-else :class="contentClass">
-                    <b-embed
-                        v-if="datatypesMapper.isSubTypeOfAny(datasetType, ['pdf', 'html'])"
-                        type="iframe"
-                        aspect="16by9"
-                        :src="displayUrl" />
-                    <HistoryDatasetAsImage
-                        v-else-if="datatypesMapper.isSubTypeOfAny(datasetType, ['galaxy.datatypes.images.Image'])"
-                        :args="args" />
-                    <div v-else-if="itemContent.item_data">
-                        <div v-if="datatypesMapper.isSubTypeOfAny(datasetType, ['tabular'])">
-                            <UrlDataProvider
-                                v-slot="{ result: metaData, loading: metaLoading, error: metaError }"
-                                :url="metaUrl">
-                                <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
-                                <div v-else-if="metaError">{{ metaError }}</div>
-                                <div v-else>
+    <UrlDataProvider v-slot="{ result: metaData, loading: metaLoading, error: metaError }" :url="metaUrl">
+        <b-card body-class="p-0">
+            <b-card-header v-if="!embedded">
+                <span class="float-right">
+                    <b-button
+                        v-b-tooltip.hover
+                        :href="downloadUrl"
+                        variant="link"
+                        size="sm"
+                        role="button"
+                        title="Download Dataset"
+                        type="button"
+                        class="py-0 px-1">
+                        <span class="fa fa-download" />
+                    </b-button>
+                    <b-button
+                        v-b-tooltip.hover
+                        :href="importUrl"
+                        role="button"
+                        variant="link"
+                        title="Import Dataset"
+                        type="button"
+                        class="py-0 px-1">
+                        <span class="fa fa-file-import" />
+                    </b-button>
+                    <b-button
+                        v-if="expanded"
+                        v-b-tooltip.hover
+                        href="#"
+                        role="button"
+                        variant="link"
+                        title="Collapse"
+                        type="button"
+                        class="py-0 px-1"
+                        @click="onExpand">
+                        <span class="fa fa-angle-double-up" />
+                    </b-button>
+                    <b-button
+                        v-else
+                        v-b-tooltip.hover
+                        href="#"
+                        role="button"
+                        variant="link"
+                        title="Expand"
+                        type="button"
+                        class="py-0 px-1"
+                        @click="onExpand">
+                        <span class="fa fa-angle-double-down" />
+                    </b-button>
+                </span>
+                <span>
+                    <span>Dataset:</span>
+                    <span class="font-weight-light">{{ metaData.name }}</span>
+                </span>
+            </b-card-header>
+            <b-card-body>
+                <UrlDataProvider v-slot="{ result: itemContent, loading, error }" :url="itemUrl">
+                    <UrlDataProvider v-slot="{ result: datatypesModel, loading: datatypesLoading }" :url="datatypesUrl">
+                        <LoadingSpan v-if="loading" message="Loading Dataset" />
+                        <LoadingSpan v-else-if="datatypesLoading" message="Loading Datatypes" />
+                        <div v-else-if="error">{{ error }}</div>
+                        <div v-else :class="contentClass">
+                            <b-embed
+                                v-if="isSubTypeOfAny(metaData.ext, ['pdf', 'html'], datatypesModel)"
+                                type="iframe"
+                                aspect="16by9"
+                                :src="displayUrl" />
+                            <HistoryDatasetAsImage
+                                v-else-if="
+                                    isSubTypeOfAny(metaData.ext, ['galaxy.datatypes.images.Image'], datatypesModel)
+                                "
+                                :args="args" />
+                            <div v-else-if="itemContent.item_data">
+                                <div v-if="isSubTypeOfAny(metaData.ext, ['tabular'], datatypesModel)">
+                                    <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                                    <div v-else-if="metaError">{{ metaError }}</div>
                                     <b-table
                                         id="tabular-dataset-table"
                                         sticky-header
@@ -86,25 +85,19 @@
                                         :current-page="currentPage"
                                         :fields="getFields(metaData)"
                                         :items="getItems(itemContent.item_data, metaData)" />
-                                    <b-pagination
-                                        v-model="currentPage"
-                                        align="center"
-                                        :total-rows="getItems(itemContent.item_data, metaData).length"
-                                        :per-page="perPage"
-                                        aria-controls="tabular-dataset-table" />
                                 </div>
-                            </UrlDataProvider>
+                                <pre v-else>
+                                    <code class="word-wrap-normal">{{ itemContent.item_data }}</code>
+                                </pre>
+                            </div>
+                            <div v-else>No content found.</div>
+                            <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
                         </div>
-                        <pre v-else>
-                            <code class="word-wrap-normal">{{ itemContent.item_data }}</code>
-                        </pre>
-                    </div>
-                    <div v-else>No content found.</div>
-                    <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
-                </div>
-            </UrlDataProvider>
-        </b-card-body>
-    </b-card>
+                    </UrlDataProvider>
+                </UrlDataProvider>
+            </b-card-body>
+        </b-card>
+    </UrlDataProvider>
 </template>
 
 <script>
@@ -128,10 +121,6 @@ export default {
             type: Number,
             required: true,
         },
-        datasets: {
-            type: Object,
-            required: true,
-        },
         embedded: {
             type: Boolean,
             default: false,
@@ -156,13 +145,8 @@ export default {
                 return "embedded-dataset";
             }
         },
-        datasetType() {
-            const dataset = this.datasets[this.datasetId];
-            return dataset.ext;
-        },
-        datasetName() {
-            const dataset = this.datasets[this.datasetId];
-            return dataset && dataset.name;
+        datatypesUrl() {
+            return "/api/datatypes/types_and_mapping";
         },
         downloadUrl() {
             return `${getAppRoot()}dataset/display?dataset_id=${this.datasetId}`;

From 16742a75d1b58a68168df8243237e013e5f0e0d6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 15:39:44 -0500
Subject: [PATCH 082/158] Parse props individually to history dataset image
 component

---
 .../Sections/Elements/HistoryDatasetAsImage.vue      | 12 ++++--------
 .../Sections/Elements/HistoryDatasetDisplay.vue      |  2 +-
 .../components/Markdown/Sections/MarkdownGalaxy.vue  |  5 ++++-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsImage.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsImage.vue
index 7753d39a2be7..c6dfa12a3c22 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsImage.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsImage.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
 import DatasetAsImage from "@/components/Dataset/DatasetAsImage/DatasetAsImage.vue";
 
-interface DatasetAsImageArgs {
-    history_dataset_id: string;
-    path?: string;
-}
-
 interface Props {
-    args: DatasetAsImageArgs;
+    datasetId: string;
+    path?: string;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 </script>
 
 <template>
     <div>
-        <DatasetAsImage :path="props.args.path" :history-dataset-id="props.args.history_dataset_id" />
+        <DatasetAsImage :path="path" :history-dataset-id="datasetId" />
     </div>
 </template>
diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
index 0c8825483bff..2a958f95ae5b 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
@@ -70,7 +70,7 @@
                                 v-else-if="
                                     isSubTypeOfAny(metaData.ext, ['galaxy.datatypes.images.Image'], datatypesModel)
                                 "
-                                :args="args" />
+                                :dataset-id="datasetId" />
                             <div v-else-if="itemContent.item_data">
                                 <div v-if="isSubTypeOfAny(metaData.ext, ['tabular'], datatypesModel)">
                                     <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 20dd84d78294..a81b5429cc7a 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -112,7 +112,10 @@ function argToBoolean(args, name, booleanDefault) {
                 :loading="!isConfigLoaded">
             </InstanceUrl>
             <HistoryLink v-else-if="name == 'history_link'" :history-id="args.history_id" />
-            <HistoryDatasetAsImage v-else-if="name == 'history_dataset_as_image'" :args="args" />
+            <HistoryDatasetAsImage
+                v-else-if="name == 'history_dataset_as_image'"
+                :dataset-id="args.history_dataset_id"
+                :path="args.path" />
             <HistoryDatasetAsTable
                 v-else-if="name == 'history_dataset_as_table'"
                 :history-dataset-id="args.history_dataset_id"

From 7a8aeccd1528851caed85c89eb15cfbc00736971 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 16:10:30 -0500
Subject: [PATCH 083/158] Convert history dataset details and display
 components to composition api, remove prepopulated datasets props

---
 .../Elements/HistoryDatasetDetails.vue        |  66 +++----
 .../Elements/HistoryDatasetDisplay.vue        | 172 +++++++-----------
 .../Markdown/Sections/MarkdownGalaxy.vue      |   7 +-
 3 files changed, 104 insertions(+), 141 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
index 0ec05b333b06..db0687b5058f 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
@@ -1,37 +1,41 @@
-<template>
-    <pre><code class="word-wrap-normal">{{ content }}</code></pre>
-</template>
+<script setup lang="ts">
+import axios from "axios";
+import { computed, ref } from "vue";
+
+import { getAppRoot } from "@/onload/loadConfig";
 
-<script>
-const ATTRIBUTES = {
+const ATTRIBUTES: Record<string, string> = {
     history_dataset_name: "name",
     history_dataset_info: "info",
     history_dataset_peek: "peek",
-    history_dataset_type: "ext",
-};
-export default {
-    props: {
-        args: {
-            type: Object,
-            required: true,
-        },
-        datasets: {
-            type: Object,
-            default: null,
-        },
-        name: {
-            type: String,
-            default: null,
-        },
-    },
-    computed: {
-        getClass() {
-            return `dataset-${ATTRIBUTES[this.name]}`;
-        },
-        content() {
-            const dataset = this.datasets[this.args.history_dataset_id];
-            return dataset && dataset[ATTRIBUTES[this.name]];
-        },
-    },
+    history_dataset_type: "file_ext",
 };
+
+const props = defineProps<{
+    datasetId: string;
+    name: string;
+}>();
+
+const getClass = computed(() => `dataset-${ATTRIBUTES[props.name || ""]}`);
+
+const attributeValue = ref();
+
+async function fetchAttribute(datasetId: string) {
+    try {
+        const attributeName = ATTRIBUTES[props.name] || "";
+        if (attributeName) {
+            const { data } = await axios.get(`${getAppRoot()}api/datasets/${datasetId}`);
+            attributeValue.value = data[attributeName] || `Dataset attribute '${attributeName}' unavailable.`;
+        }
+    } catch (error) {
+        console.error("Error fetching dataset attribute:", error);
+        attributeValue.value = "";
+    }
+}
+
+fetchAttribute(props.datasetId);
 </script>
+
+<template>
+    <pre><code :class="getClass">{{ attributeValue }}</code></pre>
+</template>
diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
index 2a958f95ae5b..379749f913e0 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
@@ -100,117 +100,81 @@
     </UrlDataProvider>
 </template>
 
-<script>
-import LoadingSpan from "components/LoadingSpan";
-import { UrlDataProvider } from "components/providers/UrlDataProvider";
-import { getAppRoot } from "onload/loadConfig";
-import { mapState } from "pinia";
+<script setup lang="ts">
+import { computed, ref } from "vue";
 
-import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
+import { DatatypesMapperModel } from "@/components/Datatypes/model";
+import { UrlDataProvider } from "@/components/providers/UrlDataProvider";
+import { getAppRoot } from "@/onload/loadConfig";
 
 import HistoryDatasetAsImage from "./HistoryDatasetAsImage.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
-export default {
-    components: {
-        LoadingSpan,
-        UrlDataProvider,
-        HistoryDatasetAsImage,
-    },
-    props: {
-        datasetId: {
-            type: Number,
-            required: true,
-        },
-        embedded: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            currentPage: 1,
-            expanded: false,
-            perPage: 100,
-        };
-    },
-    computed: {
-        ...mapState(useDatatypesMapperStore, ["createMapper", "datatypesMapper", "loading"]),
-        contentClass() {
-            if (this.datatypesMapper?.isSubTypeOfAny(this.datasetType, ["tabular"])) {
-                return "";
-            }
-            if (this.expanded) {
-                return "embedded-dataset-expanded";
-            } else {
-                return "embedded-dataset";
-            }
-        },
-        datatypesUrl() {
-            return "/api/datatypes/types_and_mapping";
-        },
-        downloadUrl() {
-            return `${getAppRoot()}dataset/display?dataset_id=${this.datasetId}`;
-        },
-        displayUrl() {
-            return `${getAppRoot()}datasets/${this.datasetId}/display/?preview=True`;
-        },
-        importUrl() {
-            return `${getAppRoot()}dataset/imp?dataset_id=${this.datasetId}`;
-        },
-        itemUrl() {
-            return `/api/datasets/${this.datasetId}/get_content_as_text`;
-        },
-        metaUrl() {
-            return `/api/datasets/${this.datasetId}`;
-        },
-    },
-    created() {
-        this.createMapper();
-    },
-    methods: {
-        getFields(metaData) {
-            const fields = [];
-            const columnNames = metaData.metadata_column_names || [];
-            const columnCount = metaData.metadata_columns;
-            for (let i = 0; i < columnCount; i++) {
-                fields.push({
-                    key: `${i}`,
-                    label: columnNames[i] || i,
-                    sortable: true,
-                });
-            }
-            return fields;
-        },
-        getItems(textData, metaData) {
-            const tableData = [];
-            const delimiter = metaData.metadata_delimiter || "\t";
-            const comments = metaData.metadata_comment_lines || 0;
-            const lines = textData.split("\n");
-            lines.forEach((line, i) => {
-                if (i >= comments) {
-                    const tabs = line.split(delimiter);
-                    const rowData = {};
-                    let hasData = false;
-                    tabs.forEach((cellData, j) => {
-                        const cellDataTrimmed = cellData.trim();
-                        if (cellDataTrimmed) {
-                            hasData = true;
-                        }
-                        rowData[j] = cellDataTrimmed;
-                    });
-                    if (hasData) {
-                        tableData.push(rowData);
-                    }
+const props = defineProps<{
+    datasetId: string;
+    embedded?: boolean;
+}>();
+
+const expanded = ref(false);
+
+const contentClass = computed(() => (expanded.value ? "embedded-dataset-expanded" : "embedded-dataset"));
+
+const datatypesUrl = computed(() => "/api/datatypes/types_and_mapping");
+const downloadUrl = computed(() => `${getAppRoot()}dataset/display?dataset_id=${props.datasetId}`);
+const displayUrl = computed(() => `${getAppRoot()}datasets/${props.datasetId}/display/?preview=True`);
+const importUrl = computed(() => `${getAppRoot()}dataset/imp?dataset_id=${props.datasetId}`);
+const itemUrl = computed(() => `/api/datasets/${props.datasetId}/get_content_as_text`);
+const metaUrl = computed(() => `/api/datasets/${props.datasetId}`);
+
+function onExpand() {
+    expanded.value = !expanded.value;
+}
+
+function isSubTypeOfAny(child: string, parents: string[], datatypesModel: any) {
+    const datatypesMapper = new DatatypesMapperModel(datatypesModel);
+    return datatypesMapper.isSubTypeOfAny(child, parents);
+}
+
+function getFields(metaData: any) {
+    const fields = [];
+    const columnNames = metaData.metadata_column_names || [];
+    const columnCount = metaData.metadata_columns;
+    for (let i = 0; i < columnCount; i++) {
+        fields.push({
+            key: `${i}`,
+            label: columnNames[i] || i,
+            sortable: true,
+        });
+    }
+    return fields;
+}
+
+function getItems(textData: string, metaData: any) {
+    const tableData: any = [];
+    const delimiter = metaData.metadata_delimiter || "\t";
+    const comments = metaData.metadata_comment_lines || 0;
+    const lines = textData.split("\n");
+    lines.forEach((line, i) => {
+        if (i >= comments) {
+            const tabs = line.split(delimiter);
+            const rowData: Record<string, string> = {};
+            let hasData = false;
+            tabs.forEach((cellData, j) => {
+                const cellDataTrimmed = cellData.trim();
+                if (cellDataTrimmed) {
+                    hasData = true;
                 }
+                rowData[j] = cellDataTrimmed;
             });
-            return tableData;
-        },
-        onExpand() {
-            this.expanded = !this.expanded;
-        },
-    },
-};
+            if (hasData) {
+                tableData.push(rowData);
+            }
+        }
+    });
+    return tableData;
+}
 </script>
+
 <style scoped>
 .embedded-dataset {
     max-height: 20rem;
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index a81b5429cc7a..b9be08d42127 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -31,10 +31,6 @@ const props = defineProps({
         type: String,
         required: true,
     },
-    datasets: {
-        type: Object,
-        default: null,
-    },
 });
 
 const parsedArgs = computed(() => getArgs(props.content));
@@ -166,8 +162,7 @@ function argToBoolean(args, name, booleanDefault) {
                     ].includes(name)
                 "
                 :name="name"
-                :args="args"
-                :datasets="datasets" />
+                :dataset-id="args.history_dataset_id" />
         </b-collapse>
     </div>
 </template>

From 5ecd8bad9fc863f66d038702ca0a31fd0e8607e7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 20:21:34 -0500
Subject: [PATCH 084/158] Handle and add invocation data for invocation id in
 markdown

---
 .../Elements/HistoryDatasetDetails.vue        | 26 +++++---
 .../Markdown/Sections/MarkdownGalaxy.vue      | 61 +++++++++++++------
 2 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
index db0687b5058f..a66445d22f04 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import axios from "axios";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
 
@@ -21,19 +21,25 @@ const getClass = computed(() => `dataset-${ATTRIBUTES[props.name || ""]}`);
 const attributeValue = ref();
 
 async function fetchAttribute(datasetId: string) {
-    try {
-        const attributeName = ATTRIBUTES[props.name] || "";
-        if (attributeName) {
-            const { data } = await axios.get(`${getAppRoot()}api/datasets/${datasetId}`);
-            attributeValue.value = data[attributeName] || `Dataset attribute '${attributeName}' unavailable.`;
+    if (datasetId) {
+        try {
+            const attributeName = ATTRIBUTES[props.name] || "";
+            if (attributeName) {
+                const { data } = await axios.get(`${getAppRoot()}api/datasets/${datasetId}`);
+                attributeValue.value = data[attributeName] || `Dataset attribute '${attributeName}' unavailable.`;
+            }
+        } catch (error) {
+            console.error("Error fetching dataset attribute:", error);
+            attributeValue.value = "";
         }
-    } catch (error) {
-        console.error("Error fetching dataset attribute:", error);
-        attributeValue.value = "";
     }
 }
 
-fetchAttribute(props.datasetId);
+watch(
+    () => props.datasetId,
+    () => fetchAttribute(props.datasetId),
+    { immediate: true }
+);
 </script>
 
 <template>
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index b9be08d42127..968865be7d31 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
 import { getArgs } from "@/components/Markdown/parse";
 import { useConfig } from "@/composables/config";
+import { useInvocationStore } from "@/stores/invocationStore";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
 import HistoryDatasetAsTable from "./Elements/HistoryDatasetAsTable.vue";
@@ -24,8 +25,8 @@ import WorkflowImage from "./Elements/Workflow/WorkflowImage.vue";
 import WorkflowLicense from "./Elements/Workflow/WorkflowLicense.vue";
 
 const { config, isConfigLoaded } = useConfig();
+const invocationStore = useInvocationStore();
 
-const toggle = ref(false);
 const props = defineProps({
     content: {
         type: String,
@@ -33,28 +34,50 @@ const props = defineProps({
     },
 });
 
-const parsedArgs = computed(() => getArgs(props.content));
-const args = computed(() => parsedArgs.value.args);
-const name = computed(() => parsedArgs.value.name);
+const args = ref();
+const loaded = ref(false);
+const toggle = ref(false);
 
 const isCollapsible = computed(() => args.value.collapse !== undefined);
 const isVisible = computed(() => !isCollapsible.value || toggle.value);
+const name = computed(() => parsedArgs.value.name);
+const parsedArgs = computed(() => getArgs(props.content));
 const version = computed(() => getGalaxyInstance().config.version_major);
 
-function argToBoolean(args, name, booleanDefault) {
-    const valueAsString = args[name];
-    if (valueAsString == "true") {
-        return true;
-    } else if (valueAsString == "false") {
-        return false;
-    } else {
-        return booleanDefault;
+async function handleArgs() {
+    const result = { ...parsedArgs.value.args };
+    if (result.invocation_id) {
+        await invocationStore.fetchInvocationForId({ id: result.invocation_id });
+        const invocation = await invocationStore.getInvocationById(result.invocation_id);
+        if (invocation) {
+            result.invocation = invocation;
+            if (result.input && invocation.inputs) {
+                const targetId = Object.values(invocation.inputs).find((input) => input.label === result.input)?.id || "";
+                result.history_target_id = targetId;
+            }
+            else if (result.output && invocation.outputs) {
+                const targetId = invocation.outputs[result.output]?.id || "";
+                result.history_target_id = targetId;
+            }
+        } else {
+            console.error("Failed to retrieve invocation.");
+        }
     }
+    args.value = result;
+    loaded.value = true;
 }
+
+watch(
+    () => props.content,
+    () => {
+        handleArgs();
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
-    <div>
+    <div v-if="loaded">
         <b-link v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
             {{ args.collapse }}
         </b-link>
@@ -110,11 +133,11 @@ function argToBoolean(args, name, booleanDefault) {
             <HistoryLink v-else-if="name == 'history_link'" :history-id="args.history_id" />
             <HistoryDatasetAsImage
                 v-else-if="name == 'history_dataset_as_image'"
-                :dataset-id="args.history_dataset_id"
+                :dataset-id="args.history_target_id"
                 :path="args.path" />
             <HistoryDatasetAsTable
                 v-else-if="name == 'history_dataset_as_table'"
-                :history-dataset-id="args.history_dataset_id"
+                :history-dataset-id="args.history_target_id"
                 :compact="argToBoolean(args, 'compact', false)"
                 :show-column-headers="argToBoolean(args, 'show_column_headers', true)"
                 :title="args.title"
@@ -142,7 +165,7 @@ function argToBoolean(args, name, booleanDefault) {
             <Visualization v-else-if="name == 'visualization'" :args="args" />
             <HistoryDatasetCollectionDisplay
                 v-else-if="name == 'history_dataset_collection_display'"
-                :collection-id="args.history_dataset_collection_id" />
+                :collection-id="args.history_target_id" />
             <ToolStd
                 v-else-if="['tool_stdout', 'tool_stderr'].includes(name)"
                 :job-id="args.job_id"
@@ -150,7 +173,7 @@ function argToBoolean(args, name, booleanDefault) {
                 :name="name" />
             <HistoryDatasetDisplay
                 v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(name)"
-                :dataset-id="args.history_dataset_id"
+                :dataset-id="args.history_target_id"
                 :embedded="name == 'history_dataset_embedded'" />
             <HistoryDatasetDetails
                 v-else-if="
@@ -162,7 +185,7 @@ function argToBoolean(args, name, booleanDefault) {
                     ].includes(name)
                 "
                 :name="name"
-                :dataset-id="args.history_dataset_id" />
+                :dataset-id="args.history_target_id" />
         </b-collapse>
     </div>
 </template>

From 319d96baed892ab1f4ce38101219efbaadebac99 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 20:24:06 -0500
Subject: [PATCH 085/158] Move cell-guide to wrapper

---
 client/src/components/Markdown/Editor/CellEditor.vue  | 6 ------
 client/src/components/Markdown/Editor/CellWrapper.vue | 5 +++++
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index e8f6e3f7ef29..ecc0bdcd6ac3 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -57,9 +57,3 @@ function onUpdate() {
     emit("update", newMarkdownText);
 }
 </script>
-
-<style>
-.cell-guide {
-    width: 5rem;
-}
-</style>
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 900a34866633..0475644a8134 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -67,6 +67,11 @@ function getMode(cellName: string) {
 
 <style lang="scss">
 @import "theme/blue.scss";
+
+.cell-guide {
+    min-width: 5rem;
+}
+
 .cell-hover {
     background-color: $gray-100;
 }

From 77a404ed0f1b7ba0aed29f5d3f8d7cee5e22d22e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 20:38:48 -0500
Subject: [PATCH 086/158] Improve handling, display parsing errors

---
 .../Markdown/Sections/MarkdownGalaxy.vue      | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 968865be7d31..5e9d3396fd48 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -35,35 +35,44 @@ const props = defineProps({
 });
 
 const args = ref();
+const attributes = ref();
+const error = ref("");
 const loaded = ref(false);
 const toggle = ref(false);
 
 const isCollapsible = computed(() => args.value.collapse !== undefined);
 const isVisible = computed(() => !isCollapsible.value || toggle.value);
-const name = computed(() => parsedArgs.value.name);
-const parsedArgs = computed(() => getArgs(props.content));
+const name = computed(() => attributes.value.name);
 const version = computed(() => getGalaxyInstance().config.version_major);
 
 async function handleArgs() {
-    const result = { ...parsedArgs.value.args };
-    if (result.invocation_id) {
-        await invocationStore.fetchInvocationForId({ id: result.invocation_id });
-        const invocation = await invocationStore.getInvocationById(result.invocation_id);
-        if (invocation) {
-            result.invocation = invocation;
-            if (result.input && invocation.inputs) {
-                const targetId = Object.values(invocation.inputs).find((input) => input.label === result.input)?.id || "";
-                result.history_target_id = targetId;
+    try {
+        error.value = "";
+        attributes.value = getArgs(props.content);
+        const attributesArgs = { ...attributes.value.args };
+        if (attributesArgs.invocation_id) {
+            await invocationStore.fetchInvocationForId({ id: attributesArgs.invocation_id });
+            const invocation = await invocationStore.getInvocationById(attributesArgs.invocation_id);
+            if (invocation) {
+                attributesArgs.invocation = invocation;
+                if (attributesArgs.input && invocation.inputs) {
+                    const targetId =
+                        Object.values(invocation.inputs).find((input) => input.label === attributesArgs.input)?.id ||
+                        "";
+                    attributesArgs.history_target_id = targetId;
+                } else if (attributesArgs.output && invocation.outputs) {
+                    const targetId = invocation.outputs[attributesArgs.output]?.id || "";
+                    attributesArgs.history_target_id = targetId;
+                }
+            } else {
+                console.error("Failed to retrieve invocation.");
             }
-            else if (result.output && invocation.outputs) {
-                const targetId = invocation.outputs[result.output]?.id || "";
-                result.history_target_id = targetId;
-            }
-        } else {
-            console.error("Failed to retrieve invocation.");
         }
+        args.value = attributesArgs;
+    } catch (e) {
+        error.value = "The directive provided below is invalid. Please review it for errors.";
+        attributes.value = {};
     }
-    args.value = result;
     loaded.value = true;
 }
 
@@ -78,6 +87,9 @@ watch(
 
 <template>
     <div v-if="loaded">
+        <b-alert v-if="error" variant="danger" show>
+            {{ error }}
+        </b-alert>
         <b-link v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
             {{ args.collapse }}
         </b-link>

From 4ea410801085a9f61caf56f27eb313b5b8b3b144 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 21:48:13 -0500
Subject: [PATCH 087/158] Use axios call for now, revisit invocation store
 later

---
 .../Markdown/Sections/MarkdownGalaxy.vue          | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 5e9d3396fd48..91a6124dff19 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -1,10 +1,11 @@
 <script setup>
+import axios from "axios";
 import { computed, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
 import { getArgs } from "@/components/Markdown/parse";
 import { useConfig } from "@/composables/config";
-import { useInvocationStore } from "@/stores/invocationStore";
+import { getAppRoot } from "@/onload/loadConfig";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
 import HistoryDatasetAsTable from "./Elements/HistoryDatasetAsTable.vue";
@@ -25,7 +26,6 @@ import WorkflowImage from "./Elements/Workflow/WorkflowImage.vue";
 import WorkflowLicense from "./Elements/Workflow/WorkflowLicense.vue";
 
 const { config, isConfigLoaded } = useConfig();
-const invocationStore = useInvocationStore();
 
 const props = defineProps({
     content: {
@@ -50,9 +50,14 @@ async function handleArgs() {
         error.value = "";
         attributes.value = getArgs(props.content);
         const attributesArgs = { ...attributes.value.args };
+
         if (attributesArgs.invocation_id) {
-            await invocationStore.fetchInvocationForId({ id: attributesArgs.invocation_id });
-            const invocation = await invocationStore.getInvocationById(attributesArgs.invocation_id);
+            if (attributesArgs.output) {
+                console.log(attributesArgs.invocation_id);
+            }
+            const { data: invocation } = await axios.get(
+                `${getAppRoot()}api/invocations/${attributesArgs.invocation_id}`
+            );
             if (invocation) {
                 attributesArgs.invocation = invocation;
                 if (attributesArgs.input && invocation.inputs) {
@@ -65,7 +70,7 @@ async function handleArgs() {
                     attributesArgs.history_target_id = targetId;
                 }
             } else {
-                console.error("Failed to retrieve invocation.");
+                error.value = "Failed to retrieve invocation.";
             }
         }
         args.value = attributesArgs;

From 5411fd6d88b8055093f214801dd772a1a9bd254b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 22:01:31 -0500
Subject: [PATCH 088/158] Add step parser to markdown galaxy container

---
 .../components/Markdown/Sections/MarkdownGalaxy.vue    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 91a6124dff19..3226f9b7ac07 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -61,13 +61,15 @@ async function handleArgs() {
             if (invocation) {
                 attributesArgs.invocation = invocation;
                 if (attributesArgs.input && invocation.inputs) {
-                    const targetId =
-                        Object.values(invocation.inputs).find((input) => input.label === attributesArgs.input)?.id ||
-                        "";
-                    attributesArgs.history_target_id = targetId;
+                    const inputValues = Object.values(invocation.inputs);
+                    const input = inputValues.find((i) => i.label === attributesArgs.input);
+                    attributesArgs.history_target_id = input?.id;
                 } else if (attributesArgs.output && invocation.outputs) {
                     const targetId = invocation.outputs[attributesArgs.output]?.id || "";
                     attributesArgs.history_target_id = targetId;
+                } else if (attributesArgs.step && invocation.steps) {
+                    const step = invocation.steps.find((s) => s.workflow_step_label === attributesArgs.step);
+                    attributesArgs.job_id = step?.job_id;
                 }
             } else {
                 error.value = "Failed to retrieve invocation.";

From a61752f53b58cbffc88f527ac17a430f3ab0ef96 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 22:24:15 -0500
Subject: [PATCH 089/158] Add invocation input and output containers to
 markdown galaxy wrapper

---
 .../components/Markdown/Sections/MarkdownGalaxy.vue    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 3226f9b7ac07..bb156c1eac80 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -149,6 +149,16 @@ watch(
                 :title="config.ga4gh_service_organization_name"
                 :loading="!isConfigLoaded">
             </InstanceUrl>
+            <div v-else-if="name === 'invocation_inputs'">
+                <div v-for="(input, index) in args.invocation.inputs" :key="index">
+                    <h4 class="ml-2">Input {{ parseInt(index) + 1 }}: {{ input.label }}</h4>
+                </div>
+            </div>
+            <div v-else-if="name === 'invocation_outputs'">
+                <div v-for="(outputKey, index) in Object.keys(args.invocation.outputs)" :key="index">
+                    <h4 class="ml-2">Output {{ index + 1 }}: {{ outputKey }}</h4>
+                </div>
+            </div>
             <HistoryLink v-else-if="name == 'history_link'" :history-id="args.history_id" />
             <HistoryDatasetAsImage
                 v-else-if="name == 'history_dataset_as_image'"

From 3ab03fdca42e25487d51c1f870b62a27377cbae6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 22:27:59 -0500
Subject: [PATCH 090/158] Sort markdown galaxy container types alphabetically

---
 .../Markdown/Sections/MarkdownGalaxy.vue      | 131 +++++++++---------
 1 file changed, 62 insertions(+), 69 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index bb156c1eac80..27365710dd2f 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -107,48 +107,68 @@ watch(
             <div v-else-if="name == 'generate_time'" class="galaxy-time">
                 <pre><code>{{ new Date().toUTCString() }}</code></pre>
             </div>
-            <div v-else-if="name == 'workflow_image'" class="workflow-image" style="text-align: center">
-                <WorkflowImage
-                    :workflow-id="args.workflow_id"
-                    :size="args.size || 'lg'"
-                    :workflow-version="args.workflow_checkpoint || undefined" />
-            </div>
-            <div v-else-if="name == 'workflow_license'" class="workflow-license">
-                <WorkflowLicense :workflow-id="args.workflow_id" />
-            </div>
+            <HistoryDatasetAsImage
+                v-else-if="name == 'history_dataset_as_image'"
+                :dataset-id="args.history_target_id"
+                :path="args.path" />
+            <HistoryDatasetAsTable
+                v-else-if="name == 'history_dataset_as_table'"
+                :history-dataset-id="args.history_target_id"
+                :compact="argToBoolean(args, 'compact', false)"
+                :show-column-headers="argToBoolean(args, 'show_column_headers', true)"
+                :title="args.title"
+                :footer="args.footer" />
+            <HistoryDatasetCollectionDisplay
+                v-else-if="name == 'history_dataset_collection_display'"
+                :collection-id="args.history_target_id" />
+            <HistoryDatasetDetails
+                v-else-if="
+                    [
+                        'history_dataset_name',
+                        'history_dataset_info',
+                        'history_dataset_peek',
+                        'history_dataset_type',
+                    ].includes(name)
+                "
+                :name="name"
+                :dataset-id="args.history_target_id" />
+            <HistoryDatasetDisplay
+                v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(name)"
+                :dataset-id="args.history_target_id"
+                :embedded="name == 'history_dataset_embedded'" />
+            <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
+            <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />
+            <HistoryLink v-else-if="name == 'history_link'" :history-id="args.history_id" />
+            <InstanceUrl
+                v-else-if="name == 'instance_access_link'"
+                :href="config.instance_access_url"
+                :loading="!isConfigLoaded" />
             <InstanceUrl
                 v-else-if="name == 'instance_citation_link'"
                 :href="config.citation_url"
-                :loading="!isConfigLoaded">
-            </InstanceUrl>
-            <InstanceUrl v-else-if="name == 'instance_terms_link'" :href="config.terms_url" :loading="!isConfigLoaded">
-            </InstanceUrl>
-            <InstanceUrl
-                v-else-if="name == 'instance_support_link'"
-                :href="config.support_url"
-                :loading="!isConfigLoaded">
-            </InstanceUrl>
+                :loading="!isConfigLoaded" />
             <InstanceUrl
                 v-else-if="name == 'instance_help_link'"
                 :href="config.helpsite_url"
-                :loading="!isConfigLoaded">
-            </InstanceUrl>
+                :loading="!isConfigLoaded" />
+            <InstanceUrl
+                v-else-if="name == 'instance_organization_link'"
+                :href="config.ga4gh_service_organization_url"
+                :title="config.ga4gh_service_organization_name"
+                :loading="!isConfigLoaded" />
             <InstanceUrl
                 v-else-if="name == 'instance_resources_link'"
                 :href="config.instance_resource_url"
-                :loading="!isConfigLoaded">
-            </InstanceUrl>
+                :loading="!isConfigLoaded" />
             <InstanceUrl
-                v-else-if="name == 'instance_access_link'"
-                :href="config.instance_access_url"
-                :loading="!isConfigLoaded">
-            </InstanceUrl>
+                v-else-if="name == 'instance_support_link'"
+                :href="config.support_url"
+                :loading="!isConfigLoaded" />
             <InstanceUrl
-                v-else-if="name == 'instance_organization_link'"
-                :href="config.ga4gh_service_organization_url"
-                :title="config.ga4gh_service_organization_name"
-                :loading="!isConfigLoaded">
-            </InstanceUrl>
+                v-else-if="name == 'instance_terms_link'"
+                :href="config.terms_url"
+                :loading="!isConfigLoaded" />
+            <InvocationTime v-else-if="name == 'invocation_time'" :invocation-id="args.invocation_id" />
             <div v-else-if="name === 'invocation_inputs'">
                 <div v-for="(input, index) in args.invocation.inputs" :key="index">
                     <h4 class="ml-2">Input {{ parseInt(index) + 1 }}: {{ input.label }}</h4>
@@ -159,21 +179,6 @@ watch(
                     <h4 class="ml-2">Output {{ index + 1 }}: {{ outputKey }}</h4>
                 </div>
             </div>
-            <HistoryLink v-else-if="name == 'history_link'" :history-id="args.history_id" />
-            <HistoryDatasetAsImage
-                v-else-if="name == 'history_dataset_as_image'"
-                :dataset-id="args.history_target_id"
-                :path="args.path" />
-            <HistoryDatasetAsTable
-                v-else-if="name == 'history_dataset_as_table'"
-                :history-dataset-id="args.history_target_id"
-                :compact="argToBoolean(args, 'compact', false)"
-                :show-column-headers="argToBoolean(args, 'show_column_headers', true)"
-                :title="args.title"
-                :footer="args.footer" />
-            <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />
-            <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
-            <InvocationTime v-else-if="name == 'invocation_time'" :invocation-id="args.invocation_id" />
             <JobMetrics
                 v-else-if="name == 'job_metrics'"
                 :job-id="args.job_id"
@@ -187,34 +192,22 @@ watch(
                 :param="args.param || undefined"
                 :title="args.title"
                 :footer="args.footer" />
-            <WorkflowDisplay
-                v-else-if="name == 'workflow_display'"
-                :workflow-id="args.workflow_id"
-                :workflow-version="args.workflow_checkpoint" />
-            <Visualization v-else-if="name == 'visualization'" :args="args" />
-            <HistoryDatasetCollectionDisplay
-                v-else-if="name == 'history_dataset_collection_display'"
-                :collection-id="args.history_target_id" />
             <ToolStd
                 v-else-if="['tool_stdout', 'tool_stderr'].includes(name)"
                 :job-id="args.job_id"
                 :implicit-collection-jobs-id="args.implicit_collection_jobs_id"
                 :name="name" />
-            <HistoryDatasetDisplay
-                v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(name)"
-                :dataset-id="args.history_target_id"
-                :embedded="name == 'history_dataset_embedded'" />
-            <HistoryDatasetDetails
-                v-else-if="
-                    [
-                        'history_dataset_name',
-                        'history_dataset_info',
-                        'history_dataset_peek',
-                        'history_dataset_type',
-                    ].includes(name)
-                "
-                :name="name"
-                :dataset-id="args.history_target_id" />
+            <Visualization v-else-if="name == 'visualization'" :args="args" />
+            <WorkflowDisplay
+                v-else-if="name == 'workflow_display'"
+                :workflow-id="args.workflow_id"
+                :workflow-version="args.workflow_checkpoint" />
+            <WorkflowImage
+                v-else-if="name == 'workflow_image'"
+                :workflow-id="args.workflow_id"
+                :size="args.size || 'lg'"
+                :workflow-version="args.workflow_checkpoint || undefined" />
+            <WorkflowLicense v-else-if="name == 'workflow_license'" :workflow-id="args.workflow_id" />
         </b-collapse>
     </div>
 </template>

From 8e35500077df3b14530fe84634f9f0c25ddd4db3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 22:29:40 -0500
Subject: [PATCH 091/158] Add implicit_collection_jobs_id to args if available

---
 client/src/components/Markdown/Sections/MarkdownGalaxy.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 27365710dd2f..284f6cb986be 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -70,6 +70,7 @@ async function handleArgs() {
                 } else if (attributesArgs.step && invocation.steps) {
                     const step = invocation.steps.find((s) => s.workflow_step_label === attributesArgs.step);
                     attributesArgs.job_id = step?.job_id;
+                    attributesArgs.implicit_collection_jobs_id = step?.implicit_collection_jobs_id;
                 }
             } else {
                 error.value = "Failed to retrieve invocation.";

From d545aabd7c8166a421da5863f2bd44900ee12e6e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 26 Jan 2025 22:48:38 -0500
Subject: [PATCH 092/158] Add fallback case for already assigned target entries

---
 .../Sections/Elements/HistoryDatasetAsTable.vue  |  8 ++++----
 .../Markdown/Sections/MarkdownGalaxy.vue         | 16 ++++++++--------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsTable.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsTable.vue
index dd74936ca879..fccbea90cfdf 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsTable.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetAsTable.vue
@@ -6,11 +6,11 @@ import { UrlDataProvider } from "@/components/providers/UrlDataProvider.js";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface HistoryDatasetAsTableProps {
-    historyDatasetId: string;
     compact: boolean;
+    datasetId: string;
+    footer?: string;
     showColumnHeaders: boolean;
     title?: string;
-    footer?: string;
 }
 
 const props = withDefaults(defineProps<HistoryDatasetAsTableProps>(), {
@@ -21,11 +21,11 @@ const props = withDefaults(defineProps<HistoryDatasetAsTableProps>(), {
 });
 
 const itemUrl = computed(() => {
-    return `/api/datasets/${props.historyDatasetId}/get_content_as_text`;
+    return `/api/datasets/${props.datasetId}/get_content_as_text`;
 });
 
 const metaUrl = computed(() => {
-    return `/api/datasets/${props.historyDatasetId}`;
+    return `/api/datasets/${props.datasetId}`;
 });
 
 const expanded = false;
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 284f6cb986be..80008fa66ed5 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -110,18 +110,18 @@ watch(
             </div>
             <HistoryDatasetAsImage
                 v-else-if="name == 'history_dataset_as_image'"
-                :dataset-id="args.history_target_id"
+                :dataset-id="args.history_target_id || args.history_dataset_id"
                 :path="args.path" />
             <HistoryDatasetAsTable
                 v-else-if="name == 'history_dataset_as_table'"
-                :history-dataset-id="args.history_target_id"
                 :compact="argToBoolean(args, 'compact', false)"
+                :dataset-id="args.history_target_id || args.history_dataset_id"
+                :footer="args.footer"
                 :show-column-headers="argToBoolean(args, 'show_column_headers', true)"
-                :title="args.title"
-                :footer="args.footer" />
+                :title="args.title" />
             <HistoryDatasetCollectionDisplay
                 v-else-if="name == 'history_dataset_collection_display'"
-                :collection-id="args.history_target_id" />
+                :collection-id="args.history_target_id || args.history_dataset_collection_id" />
             <HistoryDatasetDetails
                 v-else-if="
                     [
@@ -131,11 +131,11 @@ watch(
                         'history_dataset_type',
                     ].includes(name)
                 "
-                :name="name"
-                :dataset-id="args.history_target_id" />
+                :dataset-id="args.history_target_id || args.history_dataset_id"
+                :name="name" />
             <HistoryDatasetDisplay
                 v-else-if="['history_dataset_embedded', 'history_dataset_display'].includes(name)"
-                :dataset-id="args.history_target_id"
+                :dataset-id="args.history_target_id || args.history_dataset_id"
                 :embedded="name == 'history_dataset_embedded'" />
             <HistoryDatasetIndex v-else-if="name == 'history_dataset_index'" :args="args" />
             <HistoryDatasetLink v-else-if="name == 'history_dataset_link'" :args="args" />

From 8dcb7f3ecdd3cc4d068347cd0b9a87a0eca2aadc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 09:22:39 -0500
Subject: [PATCH 093/158] Fix markdown container margins

---
 client/src/components/Markdown/Sections/MarkdownDefault.vue | 2 +-
 client/src/components/Markdown/Sections/MarkdownGalaxy.vue  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownDefault.vue b/client/src/components/Markdown/Sections/MarkdownDefault.vue
index 9eb13c9d62cb..f4f5e79b6079 100644
--- a/client/src/components/Markdown/Sections/MarkdownDefault.vue
+++ b/client/src/components/Markdown/Sections/MarkdownDefault.vue
@@ -19,5 +19,5 @@ const renderedContent = computed(() => md.render(props.content));
 </script>
 
 <template>
-    <p class="text-justify m-2" v-html="renderedContent" />
+    <p class="text-justify" v-html="renderedContent" />
 </template>
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 80008fa66ed5..655cd446e068 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -172,12 +172,12 @@ watch(
             <InvocationTime v-else-if="name == 'invocation_time'" :invocation-id="args.invocation_id" />
             <div v-else-if="name === 'invocation_inputs'">
                 <div v-for="(input, index) in args.invocation.inputs" :key="index">
-                    <h4 class="ml-2">Input {{ parseInt(index) + 1 }}: {{ input.label }}</h4>
+                    <h4>Input {{ parseInt(index) + 1 }}: {{ input.label }}</h4>
                 </div>
             </div>
             <div v-else-if="name === 'invocation_outputs'">
                 <div v-for="(outputKey, index) in Object.keys(args.invocation.outputs)" :key="index">
-                    <h4 class="ml-2">Output {{ index + 1 }}: {{ outputKey }}</h4>
+                    <h4>Output {{ index + 1 }}: {{ outputKey }}</h4>
                 </div>
             </div>
             <JobMetrics

From dfb424a2140825ddc6963f53fcdc2086cb427a60 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 11:42:53 -0500
Subject: [PATCH 094/158] Use simple caching to avoid duplicate requests on
 markdown page loading for now, improve error handling in history link
 component

---
 .../components/Markdown/MarkdownEditor.vue    | 10 +++-
 .../Elements/HistoryDatasetDetails.vue        |  5 +-
 .../Sections/Elements/HistoryLink.vue         |  9 ++--
 .../Markdown/Sections/MarkdownGalaxy.vue      | 10 +---
 client/src/components/Markdown/cache.ts       | 48 +++++++++++++++++++
 5 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 client/src/components/Markdown/cache.ts

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 8a734e77eeb0..ac2e8b6abc41 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -53,12 +53,16 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { ref } from "vue";
+import { onUnmounted, ref } from "vue";
+
+import { resetCache } from "@/components/Markdown/cache";
 
 import CellEditor from "./Editor/CellEditor.vue";
 import TextEditor from "./Editor/TextEditor.vue";
 import MarkdownHelp from "@/components/Markdown/MarkdownHelp.vue";
 
+resetCache();
+
 library.add(faQuestion);
 
 defineProps<{
@@ -79,4 +83,8 @@ const editorOptions = ref([
 function onHelp() {
     showHelpModal.value = true;
 }
+
+onUnmounted(() => {
+    resetCache();
+});
 </script>
diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
index a66445d22f04..f374f20a9fd0 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDetails.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import axios from "axios";
 import { computed, ref, watch } from "vue";
 
-import { getAppRoot } from "@/onload/loadConfig";
+import { fromCache } from "@/components/Markdown/cache";
 
 const ATTRIBUTES: Record<string, string> = {
     history_dataset_name: "name",
@@ -25,7 +24,7 @@ async function fetchAttribute(datasetId: string) {
         try {
             const attributeName = ATTRIBUTES[props.name] || "";
             if (attributeName) {
-                const { data } = await axios.get(`${getAppRoot()}api/datasets/${datasetId}`);
+                const data = await fromCache(`datasets/${datasetId}`);
                 attributeValue.value = data[attributeName] || `Dataset attribute '${attributeName}' unavailable.`;
             }
         } catch (error) {
diff --git a/client/src/components/Markdown/Sections/Elements/HistoryLink.vue b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
index 505acb37ad2e..68a2e213f01d 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryLink.vue
@@ -5,6 +5,7 @@ import axios from "axios";
 import { errorMessageAsString } from "utils/simple-error";
 import { computed, ref } from "vue";
 
+import { fromCache } from "@/components/Markdown/cache";
 import { getAppRoot } from "@/onload/loadConfig";
 
 interface Props {
@@ -30,10 +31,10 @@ const onClick = async () => {
 
 async function fetchName(historyId: string) {
     try {
-        const { data } = await axios.get(`${getAppRoot()}api/histories/${historyId}`);
+        const data = await fromCache(`histories/${historyId}`);
         name.value = data?.name || "";
-    } catch (error) {
-        console.error("Error fetching history name:", error);
+    } catch (e) {
+        error.value = errorMessageAsString(e);
         name.value = "";
     }
 }
@@ -52,7 +53,7 @@ fetchName(props.historyId);
         </div>
         <div v-if="!!error" class="text-danger">
             <FontAwesomeIcon icon="exclamation-triangle" class="mr-1" />
-            <span>Failed to Import History: {{ name }}!</span>
+            <span>Failed to handle History: {{ name || "n/a" }}!</span>
             <span>{{ error }}</span>
         </div>
     </div>
diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index 655cd446e068..f1cc1b1438b2 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -1,11 +1,10 @@
 <script setup>
-import axios from "axios";
 import { computed, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
+import { fromCache } from "@/components/Markdown/cache";
 import { getArgs } from "@/components/Markdown/parse";
 import { useConfig } from "@/composables/config";
-import { getAppRoot } from "@/onload/loadConfig";
 
 import HistoryDatasetAsImage from "./Elements/HistoryDatasetAsImage.vue";
 import HistoryDatasetAsTable from "./Elements/HistoryDatasetAsTable.vue";
@@ -52,12 +51,7 @@ async function handleArgs() {
         const attributesArgs = { ...attributes.value.args };
 
         if (attributesArgs.invocation_id) {
-            if (attributesArgs.output) {
-                console.log(attributesArgs.invocation_id);
-            }
-            const { data: invocation } = await axios.get(
-                `${getAppRoot()}api/invocations/${attributesArgs.invocation_id}`
-            );
+            const invocation = await fromCache(`invocations/${attributesArgs.invocation_id}`);
             if (invocation) {
                 attributesArgs.invocation = invocation;
                 if (attributesArgs.input && invocation.inputs) {
diff --git a/client/src/components/Markdown/cache.ts b/client/src/components/Markdown/cache.ts
new file mode 100644
index 000000000000..455ebf42768d
--- /dev/null
+++ b/client/src/components/Markdown/cache.ts
@@ -0,0 +1,48 @@
+import axios from "axios";
+
+import { getAppRoot } from "@/onload/loadConfig";
+import { rethrowSimple } from "@/utils/simple-error";
+
+interface CacheEntry {
+    data: any;
+    timestamp: number;
+}
+
+const requestCache: Record<string, CacheEntry> = {};
+const inProgress: Record<string, Promise<any>> = {};
+
+export async function resetCache() {
+    for (const key in requestCache) {
+        delete requestCache[key];
+    }
+}
+
+export async function fromCache(resource: string): Promise<any> {
+    // Build resource url
+    const url = `${getAppRoot()}api/${resource}`;
+
+    // Check cache for valid entry
+    const cached = requestCache[url];
+    if (cached) {
+        return cached.data;
+    }
+
+    // Avoid duplicate requests
+    if (inProgress[url]) {
+        return inProgress[url];
+    }
+
+    // Execute request
+    try {
+        const fetchPromise = axios.get(url).then(({ data }) => {
+            requestCache[url] = { data, timestamp: Date.now() };
+            delete inProgress[url];
+            return data;
+        });
+        inProgress[url] = fetchPromise;
+        return fetchPromise;
+    } catch (e) {
+        delete inProgress[url];
+        rethrowSimple(e);
+    }
+}

From 264c957376a3ca33b5bdca0f4b0e89bfec4a55ac Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 13:12:49 -0500
Subject: [PATCH 095/158] Collect plugin data from api instead of relying on
 static path sources

---
 .../components/Markdown/Sections/MarkdownGalaxy.vue  |  2 +-
 .../Visualizations/VisualizationWrapper.vue          | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
index f1cc1b1438b2..83c7bb61a4e1 100644
--- a/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
+++ b/client/src/components/Markdown/Sections/MarkdownGalaxy.vue
@@ -39,7 +39,7 @@ const error = ref("");
 const loaded = ref(false);
 const toggle = ref(false);
 
-const isCollapsible = computed(() => args.value.collapse !== undefined);
+const isCollapsible = computed(() => args.value?.collapse !== undefined);
 const isVisible = computed(() => !isCollapsible.value || toggle.value);
 const name = computed(() => attributes.value.name);
 const version = computed(() => getGalaxyInstance().config.version_major);
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index a0dadf46d98b..28cebfff46ee 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import axios from "axios";
 import { onMounted, ref } from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
@@ -13,15 +14,18 @@ const props = defineProps<Props>();
 
 const iframeRef = ref<HTMLIFrameElement | null>(null);
 
-onMounted(() => {
+onMounted(async () => {
     if (!props.name) {
         console.error("Plugin name is required!");
         return;
     }
 
-    const pluginPath = `${getAppRoot()}static/plugins/visualizations/${props.name}/static/dist/index`;
-    const pluginSrc = `${pluginPath}.js`;
-    const pluginCss = `${pluginPath}.css`;
+    const { data: plugin } = await axios.get(`${getAppRoot()}api/plugins/${props.name}`);
+
+    // TODO: Add validation and error handling
+    const pluginPath = `${getAppRoot()}static/plugins/visualizations/${props.name}/static/`;
+    const pluginSrc = `${pluginPath}${plugin.entry_point.attr.src}`;
+    const pluginCss = `${pluginPath}${plugin.entry_point.attr.css}`;
 
     const iframe = iframeRef.value;
     if (iframe) {

From ae429cb19b3a9c359e66423aa0d21b9741a20fbf Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 13:19:12 -0500
Subject: [PATCH 096/158] Improve error handling in visualization wrapper

---
 .../Visualizations/VisualizationWrapper.vue   | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index 28cebfff46ee..82ea8270bee5 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -22,10 +22,7 @@ onMounted(async () => {
 
     const { data: plugin } = await axios.get(`${getAppRoot()}api/plugins/${props.name}`);
 
-    // TODO: Add validation and error handling
     const pluginPath = `${getAppRoot()}static/plugins/visualizations/${props.name}/static/`;
-    const pluginSrc = `${pluginPath}${plugin.entry_point.attr.src}`;
-    const pluginCss = `${pluginPath}${plugin.entry_point.attr.css}`;
 
     const iframe = iframeRef.value;
     if (iframe) {
@@ -43,16 +40,24 @@ onMounted(async () => {
         iframeDocument.body.appendChild(container);
 
         // Inject the script tag for the plugin
-        const script = iframeDocument.createElement("script");
-        script.type = "module";
-        script.src = pluginSrc;
-        iframeDocument.body.appendChild(script);
+        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
-        const link = iframeDocument.createElement("link");
-        link.rel = "stylesheet";
-        link.href = pluginCss;
-        iframeDocument.head.appendChild(link);
+        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);
+        }
     }
 });
 </script>

From 57ff1e13c1aa5f36ba8569bff291eec9f4dc3c25 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 14:11:04 -0500
Subject: [PATCH 097/158] Generalize visualization wrapper

---
 .../Markdown/Editor/CellWrapper.vue           |  6 ++--
 .../Sections/MarkdownVisualization.vue        | 33 +++++++++++++++++++
 .../Markdown/Sections/MarkdownVitessce.vue    | 31 +++++++++++++----
 .../Visualizations/VisualizationWrapper.vue   | 11 ++++---
 4 files changed, 69 insertions(+), 12 deletions(-)
 create mode 100644 client/src/components/Markdown/Sections/MarkdownVisualization.vue

diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 0475644a8134..456012e444bf 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -13,10 +13,11 @@
                 </CellButton>
             </div>
             <div class="m-2 w-100">
-                <MarkdownDefault v-if="name === 'markdown'" :content="content" />
-                <MarkdownGalaxy v-else-if="name === 'galaxy'" :content="content" />
+                <MarkdownGalaxy v-if="name === 'galaxy'" :content="content" />
                 <MarkdownVega v-else-if="name === 'vega'" :content="content" />
+                <MarkdownVisualization v-else-if="name === 'plotly'" name="plotly" :content="content" />
                 <MarkdownVitessce v-else-if="name === 'vitessce'" :content="content" />
+                <MarkdownDefault v-else :content="content" />
             </div>
         </div>
         <div v-if="toggle" class="d-flex">
@@ -40,6 +41,7 @@ import { ref } from "vue";
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
 import MarkdownGalaxy from "../Sections/MarkdownGalaxy.vue";
 import MarkdownVega from "../Sections/MarkdownVega.vue";
+import MarkdownVisualization from "../Sections/MarkdownVisualization.vue";
 import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
 import CellButton from "./CellButton.vue";
 import CellCode from "./CellCode.vue";
diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
new file mode 100644
index 000000000000..6f06516df191
--- /dev/null
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
+
+const props = defineProps<{
+    content: string;
+    name: string;
+}>();
+
+const visualizationConfig = ref();
+const errorMessage = ref("");
+
+watch(
+    () => props.content,
+    () => {
+        try {
+            visualizationConfig.value = { ...JSON.parse(props.content) };
+            errorMessage.value = "";
+        } catch (e) {
+            errorMessage.value = String(e);
+        }
+    },
+    { immediate: true }
+);
+</script>
+
+<template>
+    <b-alert v-if="errorMessage" variant="danger" show>
+        {{ errorMessage }}
+    </b-alert>
+    <VisualizationWrapper v-else-if="visualizationConfig" :name="name" :config="visualizationConfig" height="500px" />
+</template>
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
index 74324b87a4b2..541fcabde107 100644
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref, watch } from "vue";
 
 import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
 
@@ -7,13 +7,32 @@ const props = defineProps<{
     content: string;
 }>();
 
-const dataIncoming = computed(() => ({
-    visualization_config: {
-        dataset_content: { ...JSON.parse(props.content) },
+const visualizationConfig = ref();
+const errorMessage = ref("");
+
+watch(
+    () => props.content,
+    () => {
+        try {
+            visualizationConfig.value = {
+                dataset_content: { ...JSON.parse(props.content) },
+            };
+            errorMessage.value = "";
+        } catch (e) {
+            errorMessage.value = String(e);
+        }
     },
-}));
+    { immediate: true }
+);
 </script>
 
 <template>
-    <VisualizationWrapper name="vitessce" :data-incoming="dataIncoming" height="500px" />
+    <b-alert v-if="errorMessage" variant="danger" show>
+        {{ errorMessage }}
+    </b-alert>
+    <VisualizationWrapper
+        v-else-if="visualizationConfig"
+        name="vitessce"
+        :config="visualizationConfig"
+        height="500px" />
 </template>
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index 82ea8270bee5..1263341a6521 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -6,7 +6,7 @@ import { getAppRoot } from "@/onload/loadConfig";
 
 interface Props {
     name: string;
-    dataIncoming: object;
+    config: object;
     height?: string;
 }
 
@@ -21,9 +21,12 @@ onMounted(async () => {
     }
 
     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_plugin: plugin,
+        visualization_config: props.config,
+    };
     const iframe = iframeRef.value;
     if (iframe) {
         // Verify document existence
@@ -36,7 +39,7 @@ onMounted(async () => {
         // Create the container for the plugin
         const container = iframeDocument.createElement("div");
         container.id = "app";
-        container.setAttribute("data-incoming", JSON.stringify(props.dataIncoming));
+        container.setAttribute("data-incoming", JSON.stringify(dataIncoming));
         iframeDocument.body.appendChild(container);
 
         // Inject the script tag for the plugin

From 4242704a77a2d538231ee3fc5e8d4a44f29a3a67 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 15:37:16 -0500
Subject: [PATCH 098/158] Refresh visualization on changes

---
 .../Markdown/Sections/MarkdownVisualization.vue   | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index 6f06516df191..d4d6f21cee87 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -8,15 +8,19 @@ const props = defineProps<{
     name: string;
 }>();
 
-const visualizationConfig = ref();
+const HEIGHT = "500px";
+
 const errorMessage = ref("");
+const visualizationConfig = ref();
+const visualizationKey = ref(0);
 
 watch(
     () => props.content,
     () => {
         try {
-            visualizationConfig.value = { ...JSON.parse(props.content) };
             errorMessage.value = "";
+            visualizationConfig.value = { ...JSON.parse(props.content) };
+            visualizationKey.value++;
         } catch (e) {
             errorMessage.value = String(e);
         }
@@ -29,5 +33,10 @@ watch(
     <b-alert v-if="errorMessage" variant="danger" show>
         {{ errorMessage }}
     </b-alert>
-    <VisualizationWrapper v-else-if="visualizationConfig" :name="name" :config="visualizationConfig" height="500px" />
+    <VisualizationWrapper
+        v-else-if="visualizationConfig"
+        :config="visualizationConfig"
+        :height="HEIGHT"
+        :key="visualizationKey"
+        :name="name" />
 </template>

From 8b950222585f7eb880f730b633945ad1bd767bf4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 15:47:44 -0500
Subject: [PATCH 099/158] Remove specialized visualization wrapper

---
 .../Markdown/Editor/CellWrapper.vue           |  7 +++-
 client/src/components/Markdown/Markdown.vue   |  2 -
 .../Sections/MarkdownVisualization.vue        | 11 +++++-
 .../Markdown/Sections/MarkdownVitessce.vue    | 38 -------------------
 4 files changed, 14 insertions(+), 44 deletions(-)
 delete mode 100644 client/src/components/Markdown/Sections/MarkdownVitessce.vue

diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 456012e444bf..b6552e86a2e0 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -16,7 +16,11 @@
                 <MarkdownGalaxy v-if="name === 'galaxy'" :content="content" />
                 <MarkdownVega v-else-if="name === 'vega'" :content="content" />
                 <MarkdownVisualization v-else-if="name === 'plotly'" name="plotly" :content="content" />
-                <MarkdownVitessce v-else-if="name === 'vitessce'" :content="content" />
+                <MarkdownVisualization
+                    v-else-if="name === 'vitessce'"
+                    attribute="dataset_content"
+                    name="vitessce"
+                    :content="content" />
                 <MarkdownDefault v-else :content="content" />
             </div>
         </div>
@@ -42,7 +46,6 @@ import MarkdownDefault from "../Sections/MarkdownDefault.vue";
 import MarkdownGalaxy from "../Sections/MarkdownGalaxy.vue";
 import MarkdownVega from "../Sections/MarkdownVega.vue";
 import MarkdownVisualization from "../Sections/MarkdownVisualization.vue";
-import MarkdownVitessce from "../Sections/MarkdownVitessce.vue";
 import CellButton from "./CellButton.vue";
 import CellCode from "./CellCode.vue";
 
diff --git a/client/src/components/Markdown/Markdown.vue b/client/src/components/Markdown/Markdown.vue
index 49329795daa2..9493bf4c5b8e 100644
--- a/client/src/components/Markdown/Markdown.vue
+++ b/client/src/components/Markdown/Markdown.vue
@@ -11,7 +11,6 @@ import { parseMarkdown } from "./parse";
 import MarkdownDefault from "./Sections/MarkdownDefault.vue";
 import MarkdownGalaxy from "./Sections/MarkdownGalaxy.vue";
 import MarkdownVega from "./Sections/MarkdownVega.vue";
-import MarkdownVitessce from "./Sections/MarkdownVitessce.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import StsDownloadButton from "@/components/StsDownloadButton.vue";
 
@@ -158,7 +157,6 @@ onMounted(() => {
             <div v-for="(obj, index) in markdownObjects" :key="index" class="markdown-components">
                 <MarkdownDefault v-if="obj.name === 'markdown'" :content="obj.content" />
                 <MarkdownVega v-else-if="obj.name === 'vega'" :content="obj.content" />
-                <MarkdownVitessce v-else-if="obj.name === 'vitessce'" :content="obj.content" />
                 <MarkdownGalaxy
                     v-else-if="obj.name === 'galaxy'"
                     :content="obj.content"
diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index d4d6f21cee87..29f3c4dc8408 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -4,6 +4,7 @@ import { ref, watch } from "vue";
 import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
 
 const props = defineProps<{
+    attribute?: string;
     content: string;
     name: string;
 }>();
@@ -19,7 +20,13 @@ watch(
     () => {
         try {
             errorMessage.value = "";
-            visualizationConfig.value = { ...JSON.parse(props.content) };
+            const parsedContent = { ...JSON.parse(props.content) };
+            if (props.attribute) {
+                visualizationConfig.value = {};
+                visualizationConfig.value[props.attribute] = parsedContent;
+            } else {
+                visualizationConfig.value = parsedContent;
+            }
             visualizationKey.value++;
         } catch (e) {
             errorMessage.value = String(e);
@@ -35,8 +42,8 @@ watch(
     </b-alert>
     <VisualizationWrapper
         v-else-if="visualizationConfig"
+        :key="visualizationKey"
         :config="visualizationConfig"
         :height="HEIGHT"
-        :key="visualizationKey"
         :name="name" />
 </template>
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
deleted file mode 100644
index 541fcabde107..000000000000
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-
-import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapper.vue";
-
-const props = defineProps<{
-    content: string;
-}>();
-
-const visualizationConfig = ref();
-const errorMessage = ref("");
-
-watch(
-    () => props.content,
-    () => {
-        try {
-            visualizationConfig.value = {
-                dataset_content: { ...JSON.parse(props.content) },
-            };
-            errorMessage.value = "";
-        } catch (e) {
-            errorMessage.value = String(e);
-        }
-    },
-    { immediate: true }
-);
-</script>
-
-<template>
-    <b-alert v-if="errorMessage" variant="danger" show>
-        {{ errorMessage }}
-    </b-alert>
-    <VisualizationWrapper
-        v-else-if="visualizationConfig"
-        name="vitessce"
-        :config="visualizationConfig"
-        height="500px" />
-</template>

From 0e890837241332050af176e50a953c14f8f4beb1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 15:50:35 -0500
Subject: [PATCH 100/158] Adjust size, ensure that error message does not
 resize view

---
 .../components/Markdown/Sections/MarkdownVisualization.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index 29f3c4dc8408..51e308b33c85 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
     name: string;
 }>();
 
-const HEIGHT = "500px";
+const HEIGHT = "400px";
 
 const errorMessage = ref("");
 const visualizationConfig = ref();
@@ -37,7 +37,7 @@ watch(
 </script>
 
 <template>
-    <b-alert v-if="errorMessage" variant="danger" show>
+    <b-alert v-if="errorMessage" variant="danger" show :height="HEIGHT">
         {{ errorMessage }}
     </b-alert>
     <VisualizationWrapper

From 7ac4a5ccc505a6e3c477b43549e450a7ca8483ef Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 21:54:04 -0500
Subject: [PATCH 101/158] Specify visualization wrapper height in styles

---
 .../Sections/MarkdownVisualization.vue         | 18 ++++++++++++------
 .../Visualizations/VisualizationWrapper.vue    |  8 +-------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index 51e308b33c85..d69205884484 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -9,8 +9,6 @@ const props = defineProps<{
     name: string;
 }>();
 
-const HEIGHT = "400px";
-
 const errorMessage = ref("");
 const visualizationConfig = ref();
 const visualizationKey = ref(0);
@@ -37,13 +35,21 @@ watch(
 </script>
 
 <template>
-    <b-alert v-if="errorMessage" variant="danger" show :height="HEIGHT">
-        {{ errorMessage }}
-    </b-alert>
+    <div v-if="errorMessage" class="markdown-visualization">
+        <b-alert variant="danger" show>
+            {{ errorMessage }}
+        </b-alert>
+    </div>
     <VisualizationWrapper
         v-else-if="visualizationConfig"
         :key="visualizationKey"
+        class="markdown-visualization"
         :config="visualizationConfig"
-        :height="HEIGHT"
         :name="name" />
 </template>
+
+<style>
+.markdown-visualization {
+    min-height: 400px;
+}
+</style>
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index 1263341a6521..f17b3096fbcb 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -7,7 +7,6 @@ import { getAppRoot } from "@/onload/loadConfig";
 interface Props {
     name: string;
     config: object;
-    height?: string;
 }
 
 const props = defineProps<Props>();
@@ -66,12 +65,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <iframe
-        ref="iframeRef"
-        title="visualization"
-        class="visualization-wrapper"
-        :style="{ height: props.height || '100%' }">
-    </iframe>
+    <iframe ref="iframeRef" title="visualization" class="visualization-wrapper"></iframe>
 </template>
 
 <style>

From c368044b61a0f04bdb3bc6925d393fd5b0fd0051 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 27 Jan 2025 23:42:20 -0500
Subject: [PATCH 102/158] Add alert for invalid cell types

---
 .../src/components/Markdown/Editor/CellWrapper.vue   | 12 ++++++++----
 .../Markdown/Sections/MarkdownVisualization.vue      |  9 +++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index b6552e86a2e0..638e1ae316ff 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -3,7 +3,8 @@
         <div class="d-flex">
             <div class="cell-guide d-flex flex-column justify-content-between" :class="{ 'cell-hover': hover }">
                 <CellButton title="Learn more">
-                    <div class="small">{{ name }}</div>
+                    <div v-if="VALID_TYPES.includes(name)" class="small">{{ name }}</div>
+                    <div v-else class="small">unknown</div>
                 </CellButton>
                 <CellButton v-if="toggle" title="Collapse" @click="toggle = false">
                     <FontAwesomeIcon :icon="faAngleDoubleUp" />
@@ -13,15 +14,16 @@
                 </CellButton>
             </div>
             <div class="m-2 w-100">
-                <MarkdownGalaxy v-if="name === 'galaxy'" :content="content" />
+                <MarkdownDefault v-if="name === 'markdown'" :content="content" />
+                <MarkdownGalaxy v-else-if="name === 'galaxy'" :content="content" />
                 <MarkdownVega v-else-if="name === 'vega'" :content="content" />
-                <MarkdownVisualization v-else-if="name === 'plotly'" name="plotly" :content="content" />
+                <MarkdownVisualization v-else-if="name === 'visualization'" :content="content" />
                 <MarkdownVisualization
                     v-else-if="name === 'vitessce'"
                     attribute="dataset_content"
                     name="vitessce"
                     :content="content" />
-                <MarkdownDefault v-else :content="content" />
+                <b-alert v-else variant="danger" show> This cell type `{{ name }}` is not available. </b-alert>
             </div>
         </div>
         <div v-if="toggle" class="d-flex">
@@ -49,6 +51,8 @@ import MarkdownVisualization from "../Sections/MarkdownVisualization.vue";
 import CellButton from "./CellButton.vue";
 import CellCode from "./CellCode.vue";
 
+const VALID_TYPES = ["galaxy", "markdown", "vega", "visualization", "vitessce"];
+
 defineProps<{
     name: string;
     content: string;
diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index d69205884484..52c52f78f1d3 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -6,12 +6,13 @@ import VisualizationWrapper from "@/components/Visualizations/VisualizationWrapp
 const props = defineProps<{
     attribute?: string;
     content: string;
-    name: string;
+    name?: string;
 }>();
 
 const errorMessage = ref("");
 const visualizationConfig = ref();
 const visualizationKey = ref(0);
+const visualizationName = ref();
 
 watch(
     () => props.content,
@@ -25,6 +26,10 @@ watch(
             } else {
                 visualizationConfig.value = parsedContent;
             }
+            visualizationName.value = props.name || visualizationConfig.value.visualization_name;
+            if (!visualizationName.value) {
+                throw new Error("Please add a 'visualization_name` to the dictionary.");
+            }
             visualizationKey.value++;
         } catch (e) {
             errorMessage.value = String(e);
@@ -45,7 +50,7 @@ watch(
         :key="visualizationKey"
         class="markdown-visualization"
         :config="visualizationConfig"
-        :name="name" />
+        :name="visualizationName" />
 </template>
 
 <style>

From e77acc36f6360e2190f9eb5cce05558e8e451935 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 Jan 2025 10:45:59 -0500
Subject: [PATCH 103/158] Add error handling to visualization wrapper

---
 .../Visualizations/VisualizationWrapper.vue   | 91 +++++++++++--------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index f17b3096fbcb..58bff068e2e2 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -11,61 +11,74 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const errorMessage = ref("");
 const iframeRef = ref<HTMLIFrameElement | null>(null);
 
 onMounted(async () => {
     if (!props.name) {
-        console.error("Plugin name is required!");
+        errorMessage.value = "Visualization name is required!";
         return;
     }
 
-    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_plugin: plugin,
-        visualization_config: props.config,
-    };
-    const iframe = iframeRef.value;
-    if (iframe) {
-        // Verify document existence
-        const iframeDocument = iframe.contentDocument;
-        if (!iframeDocument) {
-            console.error("Failed to access iframe document.");
-            return;
-        }
+    try {
+        const { data: plugin } = await axios.get(`${getAppRoot()}api/plugins/${props.name}`);
 
-        // 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);
+        const pluginPath = `${getAppRoot()}static/plugins/visualizations/${props.name}/static/`;
+        const dataIncoming = {
+            root: getAppRoot(),
+            visualization_plugin: plugin,
+            visualization_config: props.config,
+        };
 
-        // 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);
-        }
+        const iframe = iframeRef.value;
+        if (iframe) {
+            // Verify document existence
+            const iframeDocument = iframe.contentDocument;
+            if (!iframeDocument) {
+                errorMessage.value = "Failed to access iframe document.";
+                return;
+            }
 
-        // 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);
+            // 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);
+            }
+            errorMessage.value = "";
+        } else {
+            errorMessage.value = "Frame has been invalidated.";
         }
+    } catch (e) {
+        errorMessage.value = `Visualization '${props.name}' not available.`;
     }
 });
 </script>
 
 <template>
-    <iframe ref="iframeRef" title="visualization" class="visualization-wrapper"></iframe>
+    <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>

From 1f6136c13c8f09c64262ae981d6f198cabd1a053 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 28 Jan 2025 15:48:53 -0500
Subject: [PATCH 104/158] Add error message to output

---
 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 58bff068e2e2..4d407e0a583e 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -69,7 +69,7 @@ onMounted(async () => {
             errorMessage.value = "Frame has been invalidated.";
         }
     } catch (e) {
-        errorMessage.value = `Visualization '${props.name}' not available.`;
+        errorMessage.value = `Visualization '${props.name}' not available: ${e}.`;
     }
 });
 </script>

From 3ac316efcef5f000eda83467d27e69b2f2aabf0a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Jan 2025 21:36:46 -0500
Subject: [PATCH 105/158] Update ngl package version

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

diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index 18607ed2c427..5fc3e0b4a719 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.11" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.12" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From dd4acff799614b8b48a541d4079144eea3dfe482 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Jan 2025 22:21:06 -0500
Subject: [PATCH 106/158] Update ngl version

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

diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index 5fc3e0b4a719..9946e0c09f75 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.12" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.13" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From 54d22c5b88eb9548c6ec29e3b7c22daaa8d8653c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Jan 2025 22:27:04 -0500
Subject: [PATCH 107/158] Add listener for posted messages

---
 .../src/components/Visualizations/VisualizationWrapper.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index 4d407e0a583e..e7c97569d5b4 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -64,6 +64,13 @@ onMounted(async () => {
                 link.href = `${pluginPath}${plugin.entry_point.attr.css}`;
                 iframeDocument.head.appendChild(link);
             }
+
+            // Add event listener
+            iframe.contentWindow?.addEventListener("message", (event) => {
+                console.log(event.data);
+            });
+
+            // Reset error message
             errorMessage.value = "";
         } else {
             errorMessage.value = "Frame has been invalidated.";

From fb627c11f485e3e7e4b2e9e147691b801338086b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Jan 2025 23:14:47 -0500
Subject: [PATCH 108/158] Add event handler to listen to galaxy charts form
 changes

---
 client/src/components/Markdown/Editor/CellCode.vue  |  2 +-
 .../src/components/Markdown/Editor/CellWrapper.vue  |  5 ++++-
 .../Markdown/Sections/MarkdownVisualization.vue     | 11 ++++++++++-
 .../Visualizations/VisualizationWrapper.vue         | 13 ++++++++++++-
 4 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index aa01ea6b2e06..dfbc8c379105 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -24,7 +24,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(["update"]);
+const emit = defineEmits(["change"]);
 
 const editor = ref(null);
 
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 638e1ae316ff..47d92c471788 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -17,7 +17,10 @@
                 <MarkdownDefault v-if="name === 'markdown'" :content="content" />
                 <MarkdownGalaxy v-else-if="name === 'galaxy'" :content="content" />
                 <MarkdownVega v-else-if="name === 'vega'" :content="content" />
-                <MarkdownVisualization v-else-if="name === 'visualization'" :content="content" />
+                <MarkdownVisualization
+                    v-else-if="name === 'visualization'"
+                    :content="content"
+                    @change="$emit('change', $event)" />
                 <MarkdownVisualization
                     v-else-if="name === 'vitessce'"
                     attribute="dataset_content"
diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index 52c52f78f1d3..c148e57b3101 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -9,11 +9,19 @@ const props = defineProps<{
     name?: string;
 }>();
 
+const emit = defineEmits(["change"]);
+
 const errorMessage = ref("");
 const visualizationConfig = ref();
 const visualizationKey = ref(0);
 const visualizationName = ref();
 
+function onChange(newContent: string) {
+    const newContentObj = JSON.parse(newContent);
+    const mergedContent = { visualization_name: visualizationName.value, ...newContentObj };
+    emit("change", JSON.stringify(mergedContent));
+}
+
 watch(
     () => props.content,
     () => {
@@ -50,7 +58,8 @@ watch(
         :key="visualizationKey"
         class="markdown-visualization"
         :config="visualizationConfig"
-        :name="visualizationName" />
+        :name="visualizationName"
+        @change="onChange" />
 </template>
 
 <style>
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index e7c97569d5b4..289d751fd0db 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -1,9 +1,12 @@
 <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;
+
 interface Props {
     name: string;
     config: object;
@@ -11,6 +14,12 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const emit = defineEmits(["change"]);
+
+const emitChange = debounce((newValue: string) => {
+    emit("change", newValue);
+}, DELAY);
+
 const errorMessage = ref("");
 const iframeRef = ref<HTMLIFrameElement | null>(null);
 
@@ -67,7 +76,9 @@ onMounted(async () => {
 
             // Add event listener
             iframe.contentWindow?.addEventListener("message", (event) => {
-                console.log(event.data);
+                if (event.data.source === "galaxy-charts" && event.data.content) {
+                    emitChange(event.data.content);
+                }
             });
 
             // Reset error message

From b124d2ff54c3d1360b80bb523c7ca8862007fa09 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 29 Jan 2025 23:38:35 -0500
Subject: [PATCH 109/158] Avoid redundant refresh, format json

---
 .../Markdown/Sections/MarkdownVisualization.vue        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index c148e57b3101..1ef8d890d253 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -16,10 +16,13 @@ const visualizationConfig = ref();
 const visualizationKey = ref(0);
 const visualizationName = ref();
 
+const currentContent = ref(props.content);
+
 function onChange(newContent: string) {
     const newContentObj = JSON.parse(newContent);
     const mergedContent = { visualization_name: visualizationName.value, ...newContentObj };
-    emit("change", JSON.stringify(mergedContent));
+    currentContent.value = JSON.stringify(mergedContent, null, 4);
+    emit("change", currentContent.value);
 }
 
 watch(
@@ -38,7 +41,10 @@ watch(
             if (!visualizationName.value) {
                 throw new Error("Please add a 'visualization_name` to the dictionary.");
             }
-            visualizationKey.value++;
+            if (currentContent.value !== props.content) {
+                currentContent.value = props.content;
+                visualizationKey.value++;
+            }
         } catch (e) {
             errorMessage.value = String(e);
         }

From a805ee1a9dbce85bc601cb8920fb7458a6b5e622 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 Jan 2025 14:25:00 -0500
Subject: [PATCH 110/158] Upgrade ngl version

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

diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index 9946e0c09f75..74fc02628c1b 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.13" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.14" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From 28e7a3792fcd8dcba14b803576951687f6515a07 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 Jan 2025 17:56:04 -0500
Subject: [PATCH 111/158] Access posted message using generic source name,
 parse object directly

---
 .../components/Markdown/Sections/MarkdownVisualization.vue   | 5 ++---
 .../src/components/Visualizations/VisualizationWrapper.vue   | 2 +-
 config/plugins/visualizations/ngl/config/ngl.xml             | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index 1ef8d890d253..27d40659b7df 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -18,9 +18,8 @@ const visualizationName = ref();
 
 const currentContent = ref(props.content);
 
-function onChange(newContent: string) {
-    const newContentObj = JSON.parse(newContent);
-    const mergedContent = { visualization_name: visualizationName.value, ...newContentObj };
+function onChange(newContent: Record<string, any>) {
+    const mergedContent = { visualization_name: visualizationName.value, ...newContent };
     currentContent.value = JSON.stringify(mergedContent, null, 4);
     emit("change", currentContent.value);
 }
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index 289d751fd0db..7215e18a03e4 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -76,7 +76,7 @@ onMounted(async () => {
 
             // Add event listener
             iframe.contentWindow?.addEventListener("message", (event) => {
-                if (event.data.source === "galaxy-charts" && event.data.content) {
+                if (event.data.from === "galaxy-visualization" && event.data.content) {
                     emitChange(event.data.content);
                 }
             });
diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index 74fc02628c1b..db86f02beddc 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.14" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.16" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From 4935df78fd680eb0ee29a670405b109a7d6da169 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 Jan 2025 18:16:21 -0500
Subject: [PATCH 112/158] Update charts package for plotly

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

diff --git a/config/plugins/visualizations/plotly/config/plotly.xml b/config/plugins/visualizations/plotly/config/plotly.xml
index d361cd5cdf47..4ca58041c481 100644
--- a/config/plugins/visualizations/plotly/config/plotly.xml
+++ b/config/plugins/visualizations/plotly/config/plotly.xml
@@ -14,7 +14,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/plotly"/>
+        <requirement type="npm" version="0.0.2" package="@galaxyproject/plotly"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From 96d9bcdf50cf38a3d28fffe8b66c517b0064d2fa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 30 Jan 2025 22:54:22 -0500
Subject: [PATCH 113/158] Update to consistent message handler

---
 .../Markdown/Sections/MarkdownVisualization.vue           | 8 ++++++--
 .../components/Visualizations/VisualizationWrapper.vue    | 4 ++--
 config/plugins/visualizations/ngl/config/ngl.xml          | 2 +-
 config/plugins/visualizations/plotly/config/plotly.xml    | 2 +-
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index 27d40659b7df..03f82667c2f0 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -18,8 +18,12 @@ const visualizationName = ref();
 
 const currentContent = ref(props.content);
 
-function onChange(newContent: Record<string, any>) {
-    const mergedContent = { visualization_name: visualizationName.value, ...newContent };
+function onChange(incomingData: Record<string, any>) {
+    const mergedContent = {
+        visualization_name: visualizationName.value,
+        visualization_title: incomingData.visualization_title,
+        ...incomingData.visualization_config,
+    };
     currentContent.value = JSON.stringify(mergedContent, null, 4);
     emit("change", currentContent.value);
 }
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index 7215e18a03e4..e53c3625d502 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -76,8 +76,8 @@ onMounted(async () => {
 
             // Add event listener
             iframe.contentWindow?.addEventListener("message", (event) => {
-                if (event.data.from === "galaxy-visualization" && event.data.content) {
-                    emitChange(event.data.content);
+                if (event.data.from === "galaxy-visualization") {
+                    emitChange(event.data);
                 }
             });
 
diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index db86f02beddc..c7643bb3180b 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.16" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.17" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>
diff --git a/config/plugins/visualizations/plotly/config/plotly.xml b/config/plugins/visualizations/plotly/config/plotly.xml
index 4ca58041c481..d19cbd441144 100644
--- a/config/plugins/visualizations/plotly/config/plotly.xml
+++ b/config/plugins/visualizations/plotly/config/plotly.xml
@@ -14,7 +14,7 @@
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
     </params>
     <requirements>
-        <requirement type="npm" version="0.0.2" package="@galaxyproject/plotly"/>
+        <requirement type="npm" version="0.0.3" package="@galaxyproject/plotly"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From 2da4d1c5c6586a3a6841ed88bf231f1ec2b9c41d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 Jan 2025 00:10:48 -0500
Subject: [PATCH 114/158] Adjust config and title parsing

---
 .../Markdown/Sections/MarkdownVisualization.vue   | 15 +++++++++++----
 .../Visualizations/VisualizationWrapper.vue       |  9 +++++----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Markdown/Sections/MarkdownVisualization.vue b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
index 03f82667c2f0..fa451f3a796e 100644
--- a/client/src/components/Markdown/Sections/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVisualization.vue
@@ -15,16 +15,17 @@ const errorMessage = ref("");
 const visualizationConfig = ref();
 const visualizationKey = ref(0);
 const visualizationName = ref();
+const visualizationTitle = ref("");
 
 const currentContent = ref(props.content);
 
 function onChange(incomingData: Record<string, any>) {
-    const mergedContent = {
+    const newContent = {
         visualization_name: visualizationName.value,
         visualization_title: incomingData.visualization_title,
         ...incomingData.visualization_config,
     };
-    currentContent.value = JSON.stringify(mergedContent, null, 4);
+    currentContent.value = JSON.stringify(newContent, null, 4);
     emit("change", currentContent.value);
 }
 
@@ -38,9 +39,14 @@ watch(
                 visualizationConfig.value = {};
                 visualizationConfig.value[props.attribute] = parsedContent;
             } else {
-                visualizationConfig.value = parsedContent;
+                visualizationConfig.value = {
+                    dataset_id: parsedContent.dataset_id,
+                    settings: parsedContent.settings,
+                    tracks: parsedContent.tracks,
+                };
+                visualizationTitle.value = parsedContent.visualization_title || "";
             }
-            visualizationName.value = props.name || visualizationConfig.value.visualization_name;
+            visualizationName.value = props.name || parsedContent.visualization_name;
             if (!visualizationName.value) {
                 throw new Error("Please add a 'visualization_name` to the dictionary.");
             }
@@ -68,6 +74,7 @@ watch(
         class="markdown-visualization"
         :config="visualizationConfig"
         :name="visualizationName"
+        :title="visualizationTitle"
         @change="onChange" />
 </template>
 
diff --git a/client/src/components/Visualizations/VisualizationWrapper.vue b/client/src/components/Visualizations/VisualizationWrapper.vue
index e53c3625d502..36cf01169237 100644
--- a/client/src/components/Visualizations/VisualizationWrapper.vue
+++ b/client/src/components/Visualizations/VisualizationWrapper.vue
@@ -8,8 +8,9 @@ import { getAppRoot } from "@/onload/loadConfig";
 const DELAY = 300;
 
 interface Props {
-    name: string;
-    config: object;
+    config: Object;
+    name: String;
+    title: String;
 }
 
 const props = defineProps<Props>();
@@ -31,12 +32,12 @@ onMounted(async () => {
 
     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_plugin: plugin,
             visualization_config: props.config,
+            visualization_plugin: plugin,
+            visualization_title: props.title,
         };
 
         const iframe = iframeRef.value;

From 8ba5ffb2ae5cbf1f33cff9caddae39a6267c64e9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 Jan 2025 22:09:46 -0500
Subject: [PATCH 115/158] Add arrow buttons to cell guide

---
 client/src/components/Markdown/Editor/CellWrapper.vue  | 10 ++++++++--
 config/plugins/visualizations/ngl/config/ngl.xml       |  2 +-
 config/plugins/visualizations/plotly/config/plotly.xml |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 47d92c471788..ce199dbf855f 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -30,7 +30,13 @@
             </div>
         </div>
         <div v-if="toggle" class="d-flex">
-            <div class="cell-guide d-flex flex-column justify-content-between" :class="{ 'cell-hover': hover }">
+            <div class="cell-guide d-flex flex-column" :class="{ 'cell-hover': hover }">
+                <CellButton title="Move Up">
+                    <FontAwesomeIcon :icon="faArrowUp" />
+                </CellButton>
+                <CellButton title="Move Down">
+                    <FontAwesomeIcon :icon="faArrowDown" />
+                </CellButton>
                 <CellButton title="Delete">
                     <FontAwesomeIcon :icon="faTrash" />
                 </CellButton>
@@ -43,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { faAngleDoubleDown, faAngleDoubleUp, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faAngleDoubleDown, faAngleDoubleUp, faArrowDown, faArrowUp, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index c7643bb3180b..aadb4c040130 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.17" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.18" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>
diff --git a/config/plugins/visualizations/plotly/config/plotly.xml b/config/plugins/visualizations/plotly/config/plotly.xml
index d19cbd441144..641af2fc3cd8 100644
--- a/config/plugins/visualizations/plotly/config/plotly.xml
+++ b/config/plugins/visualizations/plotly/config/plotly.xml
@@ -14,7 +14,7 @@
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
     </params>
     <requirements>
-        <requirement type="npm" version="0.0.3" package="@galaxyproject/plotly"/>
+        <requirement type="npm" version="0.0.4" package="@galaxyproject/plotly"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From af8501cfc5fb9e167b739e935d8d40010cb2714f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 31 Jan 2025 22:56:58 -0500
Subject: [PATCH 116/158] Align guide element styles

---
 .../components/Markdown/Editor/CellAdd.vue    | 26 +++++++------------
 .../components/Markdown/Editor/CellEditor.vue |  9 +++++++
 .../Markdown/Editor/CellWrapper.vue           |  8 ++----
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index 892e42b5dd40..798482bc1916 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -1,33 +1,27 @@
 <template>
     <Popper trigger="click" placement="right" mode="light">
         <template v-slot:reference>
-            <CellButton title="Insert new Cell">
-                <FontAwesomeIcon :icon="faPlusSquare" />
-            </CellButton>
+            <div class="cell-guide d-flex flex-column justify-content-between">
+                <CellButton title="Insert new Cell">
+                    <FontAwesomeIcon :icon="faPlus" />
+                </CellButton>
+            </div>
         </template>
         <div class="cursor-pointer">
             <CellOption
                 title="Markdown"
                 description="Markdown text element"
-                :icon="faPlusSquare"
+                :icon="faPlus"
                 @click="onClick('markdown')" />
-            <CellOption
-                title="Galaxy Element"
-                description="Galaxy element"
-                :icon="faPlusSquare"
-                @click="onClick('galaxy')" />
-            <CellOption title="Vega" description="Vega Graphics" :icon="faPlusSquare" @click="onClick('vega')" />
-            <CellOption
-                title="Vitessce"
-                description="Vitessce Graphics"
-                :icon="faPlusSquare"
-                @click="onClick('vitessce')" />
+            <CellOption title="Galaxy Element" description="Galaxy element" :icon="faPlus" @click="onClick('galaxy')" />
+            <CellOption title="Vega" description="Vega Graphics" :icon="faPlus" @click="onClick('vega')" />
+            <CellOption title="Vitessce" description="Vitessce Graphics" :icon="faPlus" @click="onClick('vitessce')" />
         </div>
     </Popper>
 </template>
 
 <script setup lang="ts">
-import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import CellButton from "./CellButton.vue";
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index ecc0bdcd6ac3..30133fcd039f 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -57,3 +57,12 @@ function onUpdate() {
     emit("update", newMarkdownText);
 }
 </script>
+
+<style lang="scss">
+@import "theme/blue.scss";
+
+.cell-guide {
+    min-width: 5.5rem;
+    max-width: 5.5rem;
+}
+</style>
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index ce199dbf855f..27b3f66e1c50 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -3,8 +3,8 @@
         <div class="d-flex">
             <div class="cell-guide d-flex flex-column justify-content-between" :class="{ 'cell-hover': hover }">
                 <CellButton title="Learn more">
-                    <div v-if="VALID_TYPES.includes(name)" class="small">{{ name }}</div>
-                    <div v-else class="small">unknown</div>
+                    <div v-if="VALID_TYPES.includes(name)" class="small font-weight-bold">{{ name }}</div>
+                    <div v-else class="small font-weight-bold">unknown</div>
                 </CellButton>
                 <CellButton v-if="toggle" title="Collapse" @click="toggle = false">
                     <FontAwesomeIcon :icon="faAngleDoubleUp" />
@@ -86,10 +86,6 @@ function getMode(cellName: string) {
 <style lang="scss">
 @import "theme/blue.scss";
 
-.cell-guide {
-    min-width: 5rem;
-}
-
 .cell-hover {
     background-color: $gray-100;
 }

From a68344071b85d69b7a7731c853f4907fd2f0f883 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Feb 2025 11:30:27 -0500
Subject: [PATCH 117/158] Fix popper for insert button

---
 .../components/Markdown/Editor/CellAdd.vue    | 45 +++++++++++--------
 .../Markdown/Editor/CellWrapper.vue           | 22 +++++++--
 client/src/components/Popper/Popper.vue       |  1 +
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index 798482bc1916..f7ef53bce82e 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -1,28 +1,35 @@
 <template>
-    <Popper trigger="click" placement="right" mode="light">
-        <template v-slot:reference>
-            <div class="cell-guide d-flex flex-column justify-content-between">
-                <CellButton title="Insert new Cell">
-                    <FontAwesomeIcon :icon="faPlus" />
-                </CellButton>
+    <div class="cell-guide d-flex flex-column justify-content-between">
+        <CellButton ref="buttonRef" title="Insert new Cell">
+            <FontAwesomeIcon :icon="faPlus" />
+        </CellButton>
+        <Popper v-if="buttonRef" :reference-el="buttonRef.$el" trigger="click" placement="right" mode="light">
+            <div class="cursor-pointer">
+                <CellOption
+                    title="Markdown"
+                    description="Markdown text element"
+                    :icon="faPlus"
+                    @click="onClick('markdown')" />
+                <CellOption
+                    title="Galaxy Element"
+                    description="Galaxy element"
+                    :icon="faPlus"
+                    @click="onClick('galaxy')" />
+                <CellOption title="Vega" description="Vega Graphics" :icon="faPlus" @click="onClick('vega')" />
+                <CellOption
+                    title="Vitessce"
+                    description="Vitessce Graphics"
+                    :icon="faPlus"
+                    @click="onClick('vitessce')" />
             </div>
-        </template>
-        <div class="cursor-pointer">
-            <CellOption
-                title="Markdown"
-                description="Markdown text element"
-                :icon="faPlus"
-                @click="onClick('markdown')" />
-            <CellOption title="Galaxy Element" description="Galaxy element" :icon="faPlus" @click="onClick('galaxy')" />
-            <CellOption title="Vega" description="Vega Graphics" :icon="faPlus" @click="onClick('vega')" />
-            <CellOption title="Vitessce" description="Vitessce Graphics" :icon="faPlus" @click="onClick('vitessce')" />
-        </div>
-    </Popper>
+        </Popper>
+    </div>
 </template>
 
 <script setup lang="ts">
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref } from "vue";
 
 import CellButton from "./CellButton.vue";
 import CellOption from "./CellOption.vue";
@@ -36,6 +43,8 @@ const emit = defineEmits<{
     (e: "click", cellIndex: number, cellType: string): void;
 }>();
 
+const buttonRef = ref();
+
 function onClick(cellType: string) {
     emit("click", props.cellIndex, cellType);
 }
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 27b3f66e1c50..61398c4b7e07 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -31,15 +31,21 @@
         </div>
         <div v-if="toggle" class="d-flex">
             <div class="cell-guide d-flex flex-column" :class="{ 'cell-hover': hover }">
+                <CellButton title="Attach Data">
+                    <FontAwesomeIcon :icon="faPaperclip" />
+                </CellButton>
+                <CellButton title="Clone Cell">
+                    <FontAwesomeIcon :icon="faClone" />
+                </CellButton>
+                <CellButton title="Delete Cell">
+                    <FontAwesomeIcon :icon="faTrash" />
+                </CellButton>
                 <CellButton title="Move Up">
                     <FontAwesomeIcon :icon="faArrowUp" />
                 </CellButton>
                 <CellButton title="Move Down">
                     <FontAwesomeIcon :icon="faArrowDown" />
                 </CellButton>
-                <CellButton title="Delete">
-                    <FontAwesomeIcon :icon="faTrash" />
-                </CellButton>
             </div>
             <div class="ml-2 w-100">
                 <CellCode :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
@@ -49,7 +55,15 @@
 </template>
 
 <script setup lang="ts">
-import { faAngleDoubleDown, faAngleDoubleUp, faArrowDown, faArrowUp, faTrash } from "@fortawesome/free-solid-svg-icons";
+import {
+    faAngleDoubleDown,
+    faAngleDoubleUp,
+    faArrowDown,
+    faArrowUp,
+    faClone,
+    faPaperclip,
+    faTrash,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 13dfbd994f30..d9776e2bd48b 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -39,6 +39,7 @@ const props = defineProps({
 });
 
 const reference = props.referenceEl ? ref(props.referenceEl) : ref();
+
 const popper = ref();
 
 const { visible } = usePopper(reference, popper, {

From 5dfc0180b1e784af43d7dd168a11d26d5e1c2a38 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Feb 2025 12:02:28 -0500
Subject: [PATCH 118/158] Add delete cell handler

---
 client/src/components/Markdown/Editor/CellAdd.vue     |  2 +-
 client/src/components/Markdown/Editor/CellEditor.vue  | 10 +++++++++-
 client/src/components/Markdown/Editor/CellWrapper.vue |  9 +++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index f7ef53bce82e..975317c0e7fb 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="cell-guide d-flex flex-column justify-content-between">
-        <CellButton ref="buttonRef" title="Insert new Cell">
+        <CellButton ref="buttonRef" title="Insert Cell">
             <FontAwesomeIcon :icon="faPlus" />
         </CellButton>
         <Popper v-if="buttonRef" :reference-el="buttonRef.$el" trigger="click" placement="right" mode="light">
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 30133fcd039f..e800069d6b9e 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -3,7 +3,11 @@
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
             <CellAdd :cell-index="cellIndex" @click="onAdd" />
             <hr class="solid m-0" />
-            <CellWrapper :name="cell.name" :content="cell.content" @change="onChange(cellIndex, $event)" />
+            <CellWrapper
+                :name="cell.name"
+                :content="cell.content"
+                @change="onChange(cellIndex, $event)"
+                @delete="onDelete(cellIndex)" />
             <hr class="solid m-0" />
         </div>
         <CellAdd :cell-index="cells.length" @click="onAdd" />
@@ -44,6 +48,10 @@ function onChange(cellIndex: number, cellContent: string) {
     onUpdate();
 }
 
+function onDelete(cellIndex: number) {
+    cells.value = cells.value.filter((_, itemIndex) => itemIndex !== cellIndex);
+}
+
 function onUpdate() {
     let newMarkdownText = "";
     cells.value.forEach((cell) => {
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 61398c4b7e07..2b284d089de1 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -37,7 +37,7 @@
                 <CellButton title="Clone Cell">
                     <FontAwesomeIcon :icon="faClone" />
                 </CellButton>
-                <CellButton title="Delete Cell">
+                <CellButton title="Delete Cell" @click="confirmDelete = true">
                     <FontAwesomeIcon :icon="faTrash" />
                 </CellButton>
                 <CellButton title="Move Up">
@@ -51,6 +51,9 @@
                 <CellCode :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
             </div>
         </div>
+        <BModal v-model="confirmDelete" title="Delete Cell" title-tag="h2" @ok="$emit('delete')">
+            <p v-localize>Are you sure you want to delete this cell?</p>
+        </BModal>
     </div>
 </template>
 
@@ -65,6 +68,7 @@ import {
     faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BModal } from "bootstrap-vue";
 import { ref } from "vue";
 
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
@@ -81,8 +85,9 @@ defineProps<{
     content: string;
 }>();
 
-defineEmits(["change"]);
+defineEmits(["change", "delete"]);
 
+const confirmDelete = ref(false);
 const hover = ref(false);
 const toggle = ref(true);
 

From 8e18036e3551d1965f8e1e6a2ae01e3e0645447b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Feb 2025 12:03:29 -0500
Subject: [PATCH 119/158] Add on update handler

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

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index e800069d6b9e..591221adde49 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -50,6 +50,7 @@ function onChange(cellIndex: number, cellContent: string) {
 
 function onDelete(cellIndex: number) {
     cells.value = cells.value.filter((_, itemIndex) => itemIndex !== cellIndex);
+    onUpdate();
 }
 
 function onUpdate() {

From b87eab24cfc23a0dd8f25d16c6792d3769041b0b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Feb 2025 12:15:07 -0500
Subject: [PATCH 120/158] Allow cloning cells

---
 client/src/components/Markdown/Editor/CellEditor.vue | 12 ++++++++++++
 .../src/components/Markdown/Editor/CellWrapper.vue   |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 591221adde49..a2fc057aa4cc 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -7,6 +7,7 @@
                 :name="cell.name"
                 :content="cell.content"
                 @change="onChange(cellIndex, $event)"
+                @clone="onClone(cellIndex)"
                 @delete="onDelete(cellIndex)" />
             <hr class="solid m-0" />
         </div>
@@ -48,6 +49,17 @@ function onChange(cellIndex: number, cellContent: string) {
     onUpdate();
 }
 
+// Clone the cell and insert it at cellIndex + 1
+function onClone(cellIndex: number) {
+    const cell = cells.value?.[cellIndex];
+    if (cell) {
+        const newCells = [...(cells.value || [])];
+        newCells.splice(cellIndex + 1, 0, { ...cell });
+        cells.value = newCells;
+        onUpdate();
+    }
+}
+
 function onDelete(cellIndex: number) {
     cells.value = cells.value.filter((_, itemIndex) => itemIndex !== cellIndex);
     onUpdate();
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 2b284d089de1..73bc52cdc73d 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -34,7 +34,7 @@
                 <CellButton title="Attach Data">
                     <FontAwesomeIcon :icon="faPaperclip" />
                 </CellButton>
-                <CellButton title="Clone Cell">
+                <CellButton title="Clone Cell" @click="$emit('clone')">
                     <FontAwesomeIcon :icon="faClone" />
                 </CellButton>
                 <CellButton title="Delete Cell" @click="confirmDelete = true">
@@ -85,7 +85,7 @@ defineProps<{
     content: string;
 }>();
 
-defineEmits(["change", "delete"]);
+defineEmits(["change", "clone", "delete"]);
 
 const confirmDelete = ref(false);
 const hover = ref(false);

From 00b47f49ffa1b1f56aa4ae76023be453418bdd92 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Feb 2025 12:32:34 -0500
Subject: [PATCH 121/158] Add handler to move cells up and down

---
 .../components/Markdown/Editor/CellEditor.vue | 28 +++++++++++++++++--
 .../Markdown/Editor/CellWrapper.vue           |  6 ++--
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index a2fc057aa4cc..809c200ad0c9 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -8,7 +8,9 @@
                 :content="cell.content"
                 @change="onChange(cellIndex, $event)"
                 @clone="onClone(cellIndex)"
-                @delete="onDelete(cellIndex)" />
+                @delete="onDelete(cellIndex)"
+                @move-down="onMove(cellIndex, 'down')"
+                @move-up="onMove(cellIndex, 'up')" />
             <hr class="solid m-0" />
         </div>
         <CellAdd :cell-index="cells.length" @click="onAdd" />
@@ -36,11 +38,13 @@ const emit = defineEmits(["update"]);
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
 
+// Add new cell
 function onAdd(cellIndex: number, cellType: string) {
     console.log([cellIndex, cellType]);
     onUpdate();
 }
 
+// Handle cell code changes
 function onChange(cellIndex: number, cellContent: string) {
     const cell = cells.value?.[cellIndex];
     if (cell) {
@@ -49,7 +53,7 @@ function onChange(cellIndex: number, cellContent: string) {
     onUpdate();
 }
 
-// Clone the cell and insert it at cellIndex + 1
+// Clone cell and insert it at cellIndex + 1
 function onClone(cellIndex: number) {
     const cell = cells.value?.[cellIndex];
     if (cell) {
@@ -60,11 +64,31 @@ function onClone(cellIndex: number) {
     }
 }
 
+// Delete cell
 function onDelete(cellIndex: number) {
     cells.value = cells.value.filter((_, itemIndex) => itemIndex !== cellIndex);
     onUpdate();
 }
 
+// Move cell upwards and downwards
+function onMove(cellIndex: number, direction: "up" | "down") {
+    if (cells.value && cells.value.length > 0) {
+        const newCells = [...cells.value];
+        const swapIndex = direction === "up" ? cellIndex - 1 : cellIndex + 1;
+        if (swapIndex >= 0 && swapIndex < newCells.length) {
+            const currentCell = newCells[cellIndex];
+            const swapCell = newCells[swapIndex];
+            if (currentCell && swapCell) {
+                newCells[cellIndex] = { ...swapCell };
+                newCells[swapIndex] = { ...currentCell };
+                cells.value = newCells;
+                onUpdate();
+            }
+        }
+    }
+}
+
+// Communicate cell changes to parent
 function onUpdate() {
     let newMarkdownText = "";
     cells.value.forEach((cell) => {
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 73bc52cdc73d..2e9d4d8a6737 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -40,10 +40,10 @@
                 <CellButton title="Delete Cell" @click="confirmDelete = true">
                     <FontAwesomeIcon :icon="faTrash" />
                 </CellButton>
-                <CellButton title="Move Up">
+                <CellButton title="Move Up" @click="$emit('move-up')">
                     <FontAwesomeIcon :icon="faArrowUp" />
                 </CellButton>
-                <CellButton title="Move Down">
+                <CellButton title="Move Down" @click="$emit('move-down')">
                     <FontAwesomeIcon :icon="faArrowDown" />
                 </CellButton>
             </div>
@@ -85,7 +85,7 @@ defineProps<{
     content: string;
 }>();
 
-defineEmits(["change", "clone", "delete"]);
+defineEmits(["change", "clone", "delete", "move-down", "move-up"]);
 
 const confirmDelete = ref(false);
 const hover = ref(false);

From 755ed4312ce121e59dcc14425c186fa8054bf8ec Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Feb 2025 14:20:37 -0500
Subject: [PATCH 122/158] Recreate code editor if cell type changes

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

diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 2e9d4d8a6737..cf6aa2da7f08 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -48,7 +48,7 @@
                 </CellButton>
             </div>
             <div class="ml-2 w-100">
-                <CellCode :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
+                <CellCode :key="name" :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
             </div>
         </div>
         <BModal v-model="confirmDelete" title="Delete Cell" title-tag="h2" @ok="$emit('delete')">

From 933d53be9ed34ac5d911e6ff3d8cd4dd1c6f9020 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 1 Feb 2025 14:27:49 -0500
Subject: [PATCH 123/158] Allow expanding when clicking on guide

---
 client/src/components/Markdown/Editor/CellButton.vue  | 2 +-
 client/src/components/Markdown/Editor/CellWrapper.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellButton.vue b/client/src/components/Markdown/Editor/CellButton.vue
index 4b3921460539..6a900559d819 100644
--- a/client/src/components/Markdown/Editor/CellButton.vue
+++ b/client/src/components/Markdown/Editor/CellButton.vue
@@ -4,7 +4,7 @@
         class="border-0 m-1 px-1 py-0"
         :title="title"
         variant="outline-primary"
-        @click="onClick()"
+        @click.stop="onClick()"
         @mouseleave="onMouseLeave($event)">
         <slot />
     </BButton>
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index cf6aa2da7f08..9aa6477d8d1f 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -1,7 +1,10 @@
 <template>
     <div @mouseenter="hover = true" @mouseleave="hover = false">
         <div class="d-flex">
-            <div class="cell-guide d-flex flex-column justify-content-between" :class="{ 'cell-hover': hover }">
+            <div
+                class="cell-guide d-flex flex-column justify-content-between cursor-pointer"
+                :class="{ 'cell-hover': hover }"
+                @click="toggle = !toggle">
                 <CellButton title="Learn more">
                     <div v-if="VALID_TYPES.includes(name)" class="small font-weight-bold">{{ name }}</div>
                     <div v-else class="small font-weight-bold">unknown</div>

From 398bccc331d7c23f65422a8070469a6b67f55d73 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 11:50:49 -0500
Subject: [PATCH 124/158] Scroll to cloned or moved cell

---
 .../components/Markdown/Editor/CellEditor.vue | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 809c200ad0c9..f581fa05abd5 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="h-100 w-75 mx-auto">
-        <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
+        <div v-for="(cell, cellIndex) in cells" :key="cellIndex" ref="cellRefs">
             <CellAdd :cell-index="cellIndex" @click="onAdd" />
             <hr class="solid m-0" />
             <CellWrapper
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { nextTick, ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
@@ -37,6 +37,7 @@ const props = defineProps<{
 const emit = defineEmits(["update"]);
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
+const cellRefs = ref<Array<HTMLElement>>([]);
 
 // Add new cell
 function onAdd(cellIndex: number, cellType: string) {
@@ -53,14 +54,15 @@ function onChange(cellIndex: number, cellContent: string) {
     onUpdate();
 }
 
-// Clone cell and insert it at cellIndex + 1
+// Clone cell and insert it at cellIndex + 1, then scroll to it
 function onClone(cellIndex: number) {
     const cell = cells.value?.[cellIndex];
     if (cell) {
-        const newCells = [...(cells.value || [])];
+        const newCells = [...cells.value];
         newCells.splice(cellIndex + 1, 0, { ...cell });
         cells.value = newCells;
         onUpdate();
+        scrollToCell(cellIndex + 1);
     }
 }
 
@@ -70,9 +72,9 @@ function onDelete(cellIndex: number) {
     onUpdate();
 }
 
-// Move cell upwards and downwards
+// Move cell upwards or downwards, then scroll to it
 function onMove(cellIndex: number, direction: "up" | "down") {
-    if (cells.value && cells.value.length > 0) {
+    if (cells.value.length > 0) {
         const newCells = [...cells.value];
         const swapIndex = direction === "up" ? cellIndex - 1 : cellIndex + 1;
         if (swapIndex >= 0 && swapIndex < newCells.length) {
@@ -83,6 +85,7 @@ function onMove(cellIndex: number, direction: "up" | "down") {
                 newCells[swapIndex] = { ...currentCell };
                 cells.value = newCells;
                 onUpdate();
+                scrollToCell(swapIndex);
             }
         }
     }
@@ -95,12 +98,22 @@ function onUpdate() {
         if (cell.name === "markdown") {
             newMarkdownText += cell.content;
         } else {
-            newMarkdownText += `\`\`\`${cell.name}\n` + cell.content + "\n```";
+            newMarkdownText += `\`\`\`${cell.name}\n${cell.content}\n\`\`\``;
         }
         newMarkdownText += "\n\n";
     });
     emit("update", newMarkdownText);
 }
+
+// Scroll a specific cell into view
+function scrollToCell(cellIndex: number) {
+    nextTick(() => {
+        const element = cellRefs.value[cellIndex];
+        if (element instanceof HTMLElement) {
+            element.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+    });
+}
 </script>
 
 <style lang="scss">

From 9f7aec690ef8af4926512d4ca0e98ce48a5efd25 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 12:20:52 -0500
Subject: [PATCH 125/158] Handle toggle state in cell editor

---
 .../components/Markdown/Editor/CellEditor.vue | 20 +++++++++++++++++--
 .../Markdown/Editor/CellWrapper.vue           | 10 +++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index f581fa05abd5..051efc19161c 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -6,11 +6,13 @@
             <CellWrapper
                 :name="cell.name"
                 :content="cell.content"
+                :toggle="cell.toggle"
                 @change="onChange(cellIndex, $event)"
                 @clone="onClone(cellIndex)"
                 @delete="onDelete(cellIndex)"
                 @move-down="onMove(cellIndex, 'down')"
-                @move-up="onMove(cellIndex, 'up')" />
+                @move-up="onMove(cellIndex, 'up')"
+                @toggle="onToggle(cellIndex)" />
             <hr class="solid m-0" />
         </div>
         <CellAdd :cell-index="cells.length" @click="onAdd" />
@@ -28,6 +30,7 @@ import CellWrapper from "./CellWrapper.vue";
 interface CellType {
     name: string;
     content: string;
+    toggle: boolean;
 }
 
 const props = defineProps<{
@@ -36,7 +39,7 @@ const props = defineProps<{
 
 const emit = defineEmits(["update"]);
 
-const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
+const cells = ref<Array<CellType>>(parseCells());
 const cellRefs = ref<Array<HTMLElement>>([]);
 
 // Add new cell
@@ -105,6 +108,19 @@ function onUpdate() {
     emit("update", newMarkdownText);
 }
 
+// Toggle
+function onToggle(cellIndex: number) {
+    const cell = cells.value?.[cellIndex];
+    if (cell) {
+        cell.toggle = !cell.toggle;
+    }
+}
+
+// Parse cells
+function parseCells(toggle: boolean = false) {
+    return parseMarkdown(props.markdownText).map((cell) => ({ ...cell, toggle }));
+}
+
 // Scroll a specific cell into view
 function scrollToCell(cellIndex: number) {
     nextTick(() => {
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 9aa6477d8d1f..86f9ea3564fc 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -4,15 +4,15 @@
             <div
                 class="cell-guide d-flex flex-column justify-content-between cursor-pointer"
                 :class="{ 'cell-hover': hover }"
-                @click="toggle = !toggle">
+                @click="$emit('toggle')">
                 <CellButton title="Learn more">
                     <div v-if="VALID_TYPES.includes(name)" class="small font-weight-bold">{{ name }}</div>
                     <div v-else class="small font-weight-bold">unknown</div>
                 </CellButton>
-                <CellButton v-if="toggle" title="Collapse" @click="toggle = false">
+                <CellButton v-if="toggle" title="Collapse" @click="$emit('toggle')">
                     <FontAwesomeIcon :icon="faAngleDoubleUp" />
                 </CellButton>
-                <CellButton v-else title="Expand" @click="toggle = true">
+                <CellButton v-else title="Expand" @click="$emit('toggle')">
                     <FontAwesomeIcon :icon="faAngleDoubleDown" />
                 </CellButton>
             </div>
@@ -86,13 +86,13 @@ const VALID_TYPES = ["galaxy", "markdown", "vega", "visualization", "vitessce"];
 defineProps<{
     name: string;
     content: string;
+    toggle: boolean;
 }>();
 
-defineEmits(["change", "clone", "delete", "move-down", "move-up"]);
+defineEmits(["change", "clone", "delete", "move-down", "move-up", "toggle"]);
 
 const confirmDelete = ref(false);
 const hover = ref(false);
-const toggle = ref(true);
 
 function getMode(cellName: string) {
     switch (cellName) {

From 90a3805d8a746bb8316fae99cab776015eedec63 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 12:32:17 -0500
Subject: [PATCH 126/158] Disable move buttons when limits are reached

---
 client/src/components/Markdown/Editor/CellEditor.vue  | 2 ++
 client/src/components/Markdown/Editor/CellWrapper.vue | 8 +++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 051efc19161c..bee5dcef9a18 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -4,6 +4,8 @@
             <CellAdd :cell-index="cellIndex" @click="onAdd" />
             <hr class="solid m-0" />
             <CellWrapper
+                :cell-index="cellIndex"
+                :cell-total="cells.length"
                 :name="cell.name"
                 :content="cell.content"
                 :toggle="cell.toggle"
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 86f9ea3564fc..ec9d87180d6f 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -43,10 +43,10 @@
                 <CellButton title="Delete Cell" @click="confirmDelete = true">
                     <FontAwesomeIcon :icon="faTrash" />
                 </CellButton>
-                <CellButton title="Move Up" @click="$emit('move-up')">
+                <CellButton title="Move Up" :disabled="cellIndex < 1" @click="$emit('move-up')">
                     <FontAwesomeIcon :icon="faArrowUp" />
                 </CellButton>
-                <CellButton title="Move Down" @click="$emit('move-down')">
+                <CellButton title="Move Down" :disabled="cellTotal - cellIndex < 2" @click="$emit('move-down')">
                     <FontAwesomeIcon :icon="faArrowDown" />
                 </CellButton>
             </div>
@@ -84,8 +84,10 @@ import CellCode from "./CellCode.vue";
 const VALID_TYPES = ["galaxy", "markdown", "vega", "visualization", "vitessce"];
 
 defineProps<{
-    name: string;
+    cellIndex: number;
+    cellTotal: number;
     content: string;
+    name: string;
     toggle: boolean;
 }>();
 

From 7268f1361dffedf0b793e3a17e8f76ec19470ef9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 14:26:37 -0500
Subject: [PATCH 127/158] Add list for cell templates

---
 .../components/Markdown/Editor/CellAdd.vue    | 60 +++++++++++--------
 .../components/Markdown/Editor/CellEditor.vue | 18 +++---
 .../Markdown/Editor/CellWrapper.vue           | 10 ++--
 .../src/components/Markdown/Editor/types.ts   |  5 ++
 4 files changed, 52 insertions(+), 41 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/types.ts

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index 975317c0e7fb..c4f5b5d6ceb3 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -6,21 +6,11 @@
         <Popper v-if="buttonRef" :reference-el="buttonRef.$el" trigger="click" placement="right" mode="light">
             <div class="cursor-pointer">
                 <CellOption
-                    title="Markdown"
-                    description="Markdown text element"
-                    :icon="faPlus"
-                    @click="onClick('markdown')" />
-                <CellOption
-                    title="Galaxy Element"
-                    description="Galaxy element"
-                    :icon="faPlus"
-                    @click="onClick('galaxy')" />
-                <CellOption title="Vega" description="Vega Graphics" :icon="faPlus" @click="onClick('vega')" />
-                <CellOption
-                    title="Vitessce"
-                    description="Vitessce Graphics"
-                    :icon="faPlus"
-                    @click="onClick('vitessce')" />
+                    v-for="(option, optionIndex) of options"
+                    :key="optionIndex"
+                    :title="option.title"
+                    :description="option.description"
+                    @click="$emit('click', { ...option.cell, toggle: true })" />
             </div>
         </Popper>
     </div>
@@ -31,21 +21,41 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
+import type { CellType } from "./types";
+
 import CellButton from "./CellButton.vue";
 import CellOption from "./CellOption.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
-const props = defineProps<{
-    cellIndex: number;
-}>();
-
-const emit = defineEmits<{
-    (e: "click", cellIndex: number, cellType: string): void;
+defineEmits<{
+    (e: "click", cell: CellType): void;
 }>();
 
 const buttonRef = ref();
-
-function onClick(cellType: string) {
-    emit("click", props.cellIndex, cellType);
-}
+const options = ref([
+    {
+        title: "Markdown",
+        description: "Vitessce Graphics",
+        cell: {
+            name: "markdown",
+            content: "",
+        },
+    },
+    {
+        title: "Vega",
+        description: "Vitessce Graphics",
+        cell: {
+            name: "vega",
+            content: "",
+        },
+    },
+    {
+        title: "Vitessce",
+        description: "Vitessce Graphics",
+        cell: {
+            name: "markdown",
+            content: "",
+        },
+    },
+]);
 </script>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index bee5dcef9a18..bcac411f73aa 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="h-100 w-75 mx-auto">
         <div v-for="(cell, cellIndex) in cells" :key="cellIndex" ref="cellRefs">
-            <CellAdd :cell-index="cellIndex" @click="onAdd" />
+            <CellAdd @click="onAdd(cellIndex, $event)" />
             <hr class="solid m-0" />
             <CellWrapper
                 :cell-index="cellIndex"
@@ -12,12 +12,11 @@
                 @change="onChange(cellIndex, $event)"
                 @clone="onClone(cellIndex)"
                 @delete="onDelete(cellIndex)"
-                @move-down="onMove(cellIndex, 'down')"
-                @move-up="onMove(cellIndex, 'up')"
+                @move="onMove(cellIndex, $event)"
                 @toggle="onToggle(cellIndex)" />
             <hr class="solid m-0" />
         </div>
-        <CellAdd :cell-index="cells.length" @click="onAdd" />
+        <CellAdd @click="onAdd(cells.length - 1, $event)" />
     </div>
 </template>
 
@@ -26,15 +25,11 @@ import { nextTick, ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
+import type { CellType } from "./types";
+
 import CellAdd from "./CellAdd.vue";
 import CellWrapper from "./CellWrapper.vue";
 
-interface CellType {
-    name: string;
-    content: string;
-    toggle: boolean;
-}
-
 const props = defineProps<{
     markdownText: string;
 }>();
@@ -45,7 +40,7 @@ const cells = ref<Array<CellType>>(parseCells());
 const cellRefs = ref<Array<HTMLElement>>([]);
 
 // Add new cell
-function onAdd(cellIndex: number, cellType: string) {
+function onAdd(cellIndex: number, cellType: CellType) {
     console.log([cellIndex, cellType]);
     onUpdate();
 }
@@ -79,6 +74,7 @@ function onDelete(cellIndex: number) {
 
 // Move cell upwards or downwards, then scroll to it
 function onMove(cellIndex: number, direction: "up" | "down") {
+    console.log(cellIndex, direction);
     if (cells.value.length > 0) {
         const newCells = [...cells.value];
         const swapIndex = direction === "up" ? cellIndex - 1 : cellIndex + 1;
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index ec9d87180d6f..79adc98d83cf 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -5,10 +5,10 @@
                 class="cell-guide d-flex flex-column justify-content-between cursor-pointer"
                 :class="{ 'cell-hover': hover }"
                 @click="$emit('toggle')">
-                <CellButton title="Learn more">
+                <div class="text-center text-primary">
                     <div v-if="VALID_TYPES.includes(name)" class="small font-weight-bold">{{ name }}</div>
                     <div v-else class="small font-weight-bold">unknown</div>
-                </CellButton>
+                </div>
                 <CellButton v-if="toggle" title="Collapse" @click="$emit('toggle')">
                     <FontAwesomeIcon :icon="faAngleDoubleUp" />
                 </CellButton>
@@ -43,10 +43,10 @@
                 <CellButton title="Delete Cell" @click="confirmDelete = true">
                     <FontAwesomeIcon :icon="faTrash" />
                 </CellButton>
-                <CellButton title="Move Up" :disabled="cellIndex < 1" @click="$emit('move-up')">
+                <CellButton title="Move Up" :disabled="cellIndex < 1" @click="$emit('move', 'up')">
                     <FontAwesomeIcon :icon="faArrowUp" />
                 </CellButton>
-                <CellButton title="Move Down" :disabled="cellTotal - cellIndex < 2" @click="$emit('move-down')">
+                <CellButton title="Move Down" :disabled="cellTotal - cellIndex < 2" @click="$emit('move', 'down')">
                     <FontAwesomeIcon :icon="faArrowDown" />
                 </CellButton>
             </div>
@@ -91,7 +91,7 @@ defineProps<{
     toggle: boolean;
 }>();
 
-defineEmits(["change", "clone", "delete", "move-down", "move-up", "toggle"]);
+defineEmits(["change", "clone", "delete", "move", "toggle"]);
 
 const confirmDelete = ref(false);
 const hover = ref(false);
diff --git a/client/src/components/Markdown/Editor/types.ts b/client/src/components/Markdown/Editor/types.ts
new file mode 100644
index 000000000000..fb62eba912a6
--- /dev/null
+++ b/client/src/components/Markdown/Editor/types.ts
@@ -0,0 +1,5 @@
+export interface CellType {
+    name: string;
+    content: string;
+    toggle: boolean;
+}

From 20234aaeede1728cfb7db8efe415828eb6fa3347 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 15:23:47 -0500
Subject: [PATCH 128/158] Preliminary draft of insertion popover

---
 .../components/Markdown/Editor/CellAdd.vue    | 54 ++++++++-----------
 .../components/Markdown/Editor/CellOption.vue | 14 +++--
 2 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index c4f5b5d6ceb3..779e7fcb93d6 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -4,13 +4,22 @@
             <FontAwesomeIcon :icon="faPlus" />
         </CellButton>
         <Popper v-if="buttonRef" :reference-el="buttonRef.$el" trigger="click" placement="right" mode="light">
-            <div class="cursor-pointer">
-                <CellOption
-                    v-for="(option, optionIndex) of options"
-                    :key="optionIndex"
-                    :title="option.title"
-                    :description="option.description"
-                    @click="$emit('click', { ...option.cell, toggle: true })" />
+            <DelayedInput class="p-1" :delay="100" placeholder="Search" @change="onQuery" />
+            <div class="cursor-pointer overflow-auto" style="max-height: 20rem">
+                <div v-for="(category, categoryIndex) of options" :key="categoryIndex">
+                    <hr class="solid m-0" />
+                    <span class="d-flex justify-content-between">
+                        <small class="my-1 mx-3 text-info">{{ category.name }}</small>
+                    </span>
+                    <div v-if="category.examples.length > 0">
+                        <CellOption
+                            v-for="(option, optionIndex) of category.examples"
+                            :key="optionIndex"
+                            :title="option.title"
+                            :description="option.description"
+                            @click="$emit('click', { ...option.cell, toggle: true })" />
+                    </div>
+                </div>
             </div>
         </Popper>
     </div>
@@ -21,10 +30,12 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
+import { cellTemplates } from "./templates";
 import type { CellType } from "./types";
 
 import CellButton from "./CellButton.vue";
 import CellOption from "./CellOption.vue";
+import DelayedInput from "@/components/Common/DelayedInput.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
 defineEmits<{
@@ -32,30 +43,7 @@ defineEmits<{
 }>();
 
 const buttonRef = ref();
-const options = ref([
-    {
-        title: "Markdown",
-        description: "Vitessce Graphics",
-        cell: {
-            name: "markdown",
-            content: "",
-        },
-    },
-    {
-        title: "Vega",
-        description: "Vitessce Graphics",
-        cell: {
-            name: "vega",
-            content: "",
-        },
-    },
-    {
-        title: "Vitessce",
-        description: "Vitessce Graphics",
-        cell: {
-            name: "markdown",
-            content: "",
-        },
-    },
-]);
+const options = ref(cellTemplates);
+
+function onQuery(query: String) {}
 </script>
diff --git a/client/src/components/Markdown/Editor/CellOption.vue b/client/src/components/Markdown/Editor/CellOption.vue
index 44a589c84516..86515595b9d1 100644
--- a/client/src/components/Markdown/Editor/CellOption.vue
+++ b/client/src/components/Markdown/Editor/CellOption.vue
@@ -1,14 +1,10 @@
 <template>
-    <span
-        role="button"
-        tabindex="0"
-        class="cell-option d-flex justify-content-between rounded m-1"
-        @click="$emit('click')">
-        <div class="m-2">
+    <span role="button" tabindex="0" class="cell-option d-flex justify-content-between" @click="$emit('click')">
+        <div class="my-1 mx-3">
             <div class="font-weight-bold">{{ title }}</div>
-            <small>{{ description }}</small>
+            <small class="d-inline-block text-wrap text-break">{{ description }}</small>
         </div>
-        <div v-if="icon" class="m-2 align-self-center">
+        <div v-if="icon" class="my-2 mx-3 align-self-center">
             <FontAwesomeIcon :icon="icon" />
         </div>
     </span>
@@ -32,6 +28,8 @@ defineEmits<{
 @import "theme/blue.scss";
 
 .cell-option {
+    max-width: 15rem;
+    min-width: 15rem;
     &:hover {
         background: $brand-primary;
         color: $white;

From dce2ababad07903dd267b63bce9158c3d6afb596 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 15:38:57 -0500
Subject: [PATCH 129/158] Add basic templates

---
 .../components/Markdown/Editor/CellEditor.vue |  7 +--
 .../components/Markdown/Editor/templates.ts   | 46 +++++++++++++++++++
 .../Editor/templates/vega-bar-chart.json      | 16 +++++++
 3 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/templates.ts
 create mode 100644 client/src/components/Markdown/Editor/templates/vega-bar-chart.json

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index bcac411f73aa..04dd7d60a5f1 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -40,8 +40,10 @@ const cells = ref<Array<CellType>>(parseCells());
 const cellRefs = ref<Array<HTMLElement>>([]);
 
 // Add new cell
-function onAdd(cellIndex: number, cellType: CellType) {
-    console.log([cellIndex, cellType]);
+function onAdd(cellIndex: number, cell: CellType) {
+    const newCells = [...cells.value];
+    newCells.splice(cellIndex + 1, 0, { ...cell });
+    cells.value = newCells;
     onUpdate();
 }
 
@@ -74,7 +76,6 @@ function onDelete(cellIndex: number) {
 
 // Move cell upwards or downwards, then scroll to it
 function onMove(cellIndex: number, direction: "up" | "down") {
-    console.log(cellIndex, direction);
     if (cells.value.length > 0) {
         const newCells = [...cells.value];
         const swapIndex = direction === "up" ? cellIndex - 1 : cellIndex + 1;
diff --git a/client/src/components/Markdown/Editor/templates.ts b/client/src/components/Markdown/Editor/templates.ts
new file mode 100644
index 000000000000..5a12ef94876b
--- /dev/null
+++ b/client/src/components/Markdown/Editor/templates.ts
@@ -0,0 +1,46 @@
+import vegaBarChart from "./templates/vega-bar-chart.json"
+
+export const cellTemplates = [
+    {
+        name: "Markdown",
+        examples: [
+            {
+                title: "Heading 1",
+                description: "Main headline",
+                cell: {
+                    name: "markdown",
+                    content: "# Heading 1",
+                },
+            },
+            {
+                title: "Heading 2",
+                description: "Section headline",
+                cell: {
+                    name: "markdown",
+                    content: "## Heading 2",
+                },
+            },
+            {
+                title: "Heading 3",
+                description: "Subhead",
+                cell: {
+                    name: "markdown",
+                    content: "### Heading 3",
+                },
+            },
+        ],
+    },
+    {
+        name: "Vega",
+        examples: [
+            {
+                title: "Bar Diagram",
+                description: "Basic bar diagram",
+                cell: {
+                    name: "vega",
+                    content: JSON.stringify(vegaBarChart, null, 4),
+                },
+            },
+        ],
+    },
+];
diff --git a/client/src/components/Markdown/Editor/templates/vega-bar-chart.json b/client/src/components/Markdown/Editor/templates/vega-bar-chart.json
new file mode 100644
index 000000000000..b6481277e7e0
--- /dev/null
+++ b/client/src/components/Markdown/Editor/templates/vega-bar-chart.json
@@ -0,0 +1,16 @@
+{
+    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+    "description": "A simple bar chart with embedded data.",
+    "data": {
+      "values": [
+        {"a": "A", "b": 3}, {"a": "B", "b": 575}, {"a": "C", "b": 43},
+        {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
+        {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
+      ]
+    },
+    "mark": "line",
+    "encoding": {
+      "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
+      "y": {"field": "b", "type": "quantitative"}
+    }
+  }
\ No newline at end of file

From 83804209a5f7cc614736d959c12e08d1c059c086 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 15:42:49 -0500
Subject: [PATCH 130/158] Fix scroll to new insert

---
 client/src/components/Markdown/Editor/CellEditor.vue | 5 +++--
 client/src/components/Markdown/Editor/templates.ts   | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 04dd7d60a5f1..84d031fad6f3 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -16,7 +16,7 @@
                 @toggle="onToggle(cellIndex)" />
             <hr class="solid m-0" />
         </div>
-        <CellAdd @click="onAdd(cells.length - 1, $event)" />
+        <CellAdd @click="onAdd(cells.length, $event)" />
     </div>
 </template>
 
@@ -42,9 +42,10 @@ const cellRefs = ref<Array<HTMLElement>>([]);
 // Add new cell
 function onAdd(cellIndex: number, cell: CellType) {
     const newCells = [...cells.value];
-    newCells.splice(cellIndex + 1, 0, { ...cell });
+    newCells.splice(cellIndex, 0, { ...cell });
     cells.value = newCells;
     onUpdate();
+    scrollToCell(cellIndex);
 }
 
 // Handle cell code changes
diff --git a/client/src/components/Markdown/Editor/templates.ts b/client/src/components/Markdown/Editor/templates.ts
index 5a12ef94876b..abcf6aa7b21f 100644
--- a/client/src/components/Markdown/Editor/templates.ts
+++ b/client/src/components/Markdown/Editor/templates.ts
@@ -1,4 +1,4 @@
-import vegaBarChart from "./templates/vega-bar-chart.json"
+import vegaBarChart from "./templates/vega-bar-chart.json";
 
 export const cellTemplates = [
     {

From 5ca4a67cf9e4cf7a063c2fe53dda57991c4bb74d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 17:00:47 -0500
Subject: [PATCH 131/158] Add basic template filter

---
 .../components/Markdown/Editor/CellAdd.vue    | 14 ++---
 .../Markdown/Editor/CellWrapper.vue           |  2 +-
 .../components/Markdown/Editor/templates.ts   | 47 ++++++++++++++-
 .../Editor/templates/vega-bar-chart.json      | 60 ++++++++++++++++---
 .../Editor/templates/vega-line-chart.json     | 58 ++++++++++++++++++
 .../src/components/Markdown/Editor/types.ts   |  2 +-
 6 files changed, 161 insertions(+), 22 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/templates/vega-line-chart.json

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index 779e7fcb93d6..54b0f4b85c13 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -4,16 +4,16 @@
             <FontAwesomeIcon :icon="faPlus" />
         </CellButton>
         <Popper v-if="buttonRef" :reference-el="buttonRef.$el" trigger="click" placement="right" mode="light">
-            <DelayedInput class="p-1" :delay="100" placeholder="Search" @change="onQuery" />
+            <DelayedInput class="p-1" :delay="100" placeholder="Search" @change="query = $event" />
             <div class="cursor-pointer overflow-auto" style="max-height: 20rem">
-                <div v-for="(category, categoryIndex) of options" :key="categoryIndex">
+                <div v-for="(category, categoryIndex) of getTemplates(query)" :key="categoryIndex">
                     <hr class="solid m-0" />
                     <span class="d-flex justify-content-between">
                         <small class="my-1 mx-3 text-info">{{ category.name }}</small>
                     </span>
-                    <div v-if="category.examples.length > 0">
+                    <div v-if="category.templates.length > 0">
                         <CellOption
-                            v-for="(option, optionIndex) of category.examples"
+                            v-for="(option, optionIndex) of category.templates"
                             :key="optionIndex"
                             :title="option.title"
                             :description="option.description"
@@ -30,7 +30,7 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
-import { cellTemplates } from "./templates";
+import { getTemplates } from "./templates";
 import type { CellType } from "./types";
 
 import CellButton from "./CellButton.vue";
@@ -43,7 +43,5 @@ defineEmits<{
 }>();
 
 const buttonRef = ref();
-const options = ref(cellTemplates);
-
-function onQuery(query: String) {}
+const query = ref("");
 </script>
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 79adc98d83cf..1f8dc5e5baa8 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -88,7 +88,7 @@ defineProps<{
     cellTotal: number;
     content: string;
     name: string;
-    toggle: boolean;
+    toggle?: boolean;
 }>();
 
 defineEmits(["change", "clone", "delete", "move", "toggle"]);
diff --git a/client/src/components/Markdown/Editor/templates.ts b/client/src/components/Markdown/Editor/templates.ts
index abcf6aa7b21f..d1c2f844d35d 100644
--- a/client/src/components/Markdown/Editor/templates.ts
+++ b/client/src/components/Markdown/Editor/templates.ts
@@ -1,9 +1,22 @@
 import vegaBarChart from "./templates/vega-bar-chart.json";
+import vegaLineChart from "./templates/vega-line-chart.json";
+import type { CellType } from "./types";
 
-export const cellTemplates = [
+interface TemplateEntry {
+    title: string;
+    description: string;
+    cell: CellType;
+}
+
+interface TemplateCategory {
+    name: string;
+    templates: Array<TemplateEntry>;
+}
+
+export const templateCategories: Array<TemplateCategory> = [
     {
         name: "Markdown",
-        examples: [
+        templates: [
             {
                 title: "Heading 1",
                 description: "Main headline",
@@ -32,7 +45,7 @@ export const cellTemplates = [
     },
     {
         name: "Vega",
-        examples: [
+        templates: [
             {
                 title: "Bar Diagram",
                 description: "Basic bar diagram",
@@ -41,6 +54,34 @@ export const cellTemplates = [
                     content: JSON.stringify(vegaBarChart, null, 4),
                 },
             },
+            {
+                title: "Line Chart",
+                description: "Basic line chart",
+                cell: {
+                    name: "vega",
+                    content: JSON.stringify(vegaLineChart, null, 4),
+                },
+            },
         ],
     },
 ];
+
+export function getTemplates(query: string): Array<TemplateCategory> {
+    const filteredCategories: Array<TemplateCategory> = [];
+    templateCategories.forEach((category) => {
+        const matchedTemplates = category.templates.filter(
+            (template) =>
+                category.name.toLowerCase().includes(query.toLowerCase()) ||
+                template.title.toLowerCase().includes(query.toLowerCase()) ||
+                template.description.toLowerCase().includes(query.toLowerCase())
+        );
+        if (matchedTemplates.length > 0) {
+            filteredCategories.push({
+                name: category.name,
+                templates: matchedTemplates,
+            });
+        }
+    });
+
+    return filteredCategories;
+}
diff --git a/client/src/components/Markdown/Editor/templates/vega-bar-chart.json b/client/src/components/Markdown/Editor/templates/vega-bar-chart.json
index b6481277e7e0..1e9f8b5c401b 100644
--- a/client/src/components/Markdown/Editor/templates/vega-bar-chart.json
+++ b/client/src/components/Markdown/Editor/templates/vega-bar-chart.json
@@ -2,15 +2,57 @@
     "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
     "description": "A simple bar chart with embedded data.",
     "data": {
-      "values": [
-        {"a": "A", "b": 3}, {"a": "B", "b": 575}, {"a": "C", "b": 43},
-        {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
-        {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
-      ]
+        "values": [
+            {
+                "a": "A",
+                "b": 1
+            },
+            {
+                "a": "B",
+                "b": 2
+            },
+            {
+                "a": "C",
+                "b": 3
+            },
+            {
+                "a": "D",
+                "b": 4
+            },
+            {
+                "a": "E",
+                "b": 5
+            },
+            {
+                "a": "F",
+                "b": 6
+            },
+            {
+                "a": "G",
+                "b": 7
+            },
+            {
+                "a": "H",
+                "b": 8
+            },
+            {
+                "a": "I",
+                "b": 9
+            }
+        ]
     },
-    "mark": "line",
+    "mark": "bar",
     "encoding": {
-      "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
-      "y": {"field": "b", "type": "quantitative"}
+        "x": {
+            "field": "a",
+            "type": "nominal",
+            "axis": {
+                "labelAngle": 0
+            }
+        },
+        "y": {
+            "field": "b",
+            "type": "quantitative"
+        }
     }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/client/src/components/Markdown/Editor/templates/vega-line-chart.json b/client/src/components/Markdown/Editor/templates/vega-line-chart.json
new file mode 100644
index 000000000000..b16cf3e81052
--- /dev/null
+++ b/client/src/components/Markdown/Editor/templates/vega-line-chart.json
@@ -0,0 +1,58 @@
+{
+    "$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
+            },
+            {
+                "a": "D",
+                "b": 4
+            },
+            {
+                "a": "E",
+                "b": 5
+            },
+            {
+                "a": "F",
+                "b": 6
+            },
+            {
+                "a": "G",
+                "b": 7
+            },
+            {
+                "a": "H",
+                "b": 8
+            },
+            {
+                "a": "I",
+                "b": 9
+            }
+        ]
+    },
+    "mark": "line",
+    "encoding": {
+        "x": {
+            "field": "a",
+            "type": "nominal",
+            "axis": {
+                "labelAngle": 0
+            }
+        },
+        "y": {
+            "field": "b",
+            "type": "quantitative"
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/src/components/Markdown/Editor/types.ts b/client/src/components/Markdown/Editor/types.ts
index fb62eba912a6..e96aaa1b6da8 100644
--- a/client/src/components/Markdown/Editor/types.ts
+++ b/client/src/components/Markdown/Editor/types.ts
@@ -1,5 +1,5 @@
 export interface CellType {
     name: string;
     content: string;
-    toggle: boolean;
+    toggle?: boolean;
 }

From 834575f533840254d6cbd41fa16ec3ad422a9dc5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 17:09:34 -0500
Subject: [PATCH 132/158] Move filter helper to add button, simplify templates
 file

---
 .../components/Markdown/Editor/CellAdd.vue    | 31 ++++++++++++++--
 .../components/Markdown/Editor/templates.ts   | 35 ++-----------------
 .../src/components/Markdown/Editor/types.ts   | 11 ++++++
 3 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index 54b0f4b85c13..af5f70e559d3 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -5,7 +5,7 @@
         </CellButton>
         <Popper v-if="buttonRef" :reference-el="buttonRef.$el" trigger="click" placement="right" mode="light">
             <DelayedInput class="p-1" :delay="100" placeholder="Search" @change="query = $event" />
-            <div class="cursor-pointer overflow-auto" style="max-height: 20rem">
+            <div class="cell-add-categories cursor-pointer overflow-auto">
                 <div v-for="(category, categoryIndex) of getTemplates(query)" :key="categoryIndex">
                     <hr class="solid m-0" />
                     <span class="d-flex justify-content-between">
@@ -30,8 +30,8 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
-import { getTemplates } from "./templates";
-import type { CellType } from "./types";
+import { cellTemplates } from "./templates";
+import type { CellType, TemplateCategory } from "./types";
 
 import CellButton from "./CellButton.vue";
 import CellOption from "./CellOption.vue";
@@ -44,4 +44,29 @@ defineEmits<{
 
 const buttonRef = ref();
 const query = ref("");
+
+function getTemplates(query: string): Array<TemplateCategory> {
+    const filteredCategories: Array<TemplateCategory> = [];
+    cellTemplates.forEach((category) => {
+        const matchedTemplates = category.templates.filter(
+            (template) =>
+                category.name.toLowerCase().includes(query.toLowerCase()) ||
+                template.title.toLowerCase().includes(query.toLowerCase()) ||
+                template.description.toLowerCase().includes(query.toLowerCase())
+        );
+        if (matchedTemplates.length > 0) {
+            filteredCategories.push({
+                name: category.name,
+                templates: matchedTemplates,
+            });
+        }
+    });
+    return filteredCategories;
+}
 </script>
+
+<style>
+.cell-add-categories {
+    max-height: 20rem;
+}
+</style>
diff --git a/client/src/components/Markdown/Editor/templates.ts b/client/src/components/Markdown/Editor/templates.ts
index d1c2f844d35d..94f43ef1a61d 100644
--- a/client/src/components/Markdown/Editor/templates.ts
+++ b/client/src/components/Markdown/Editor/templates.ts
@@ -1,19 +1,8 @@
 import vegaBarChart from "./templates/vega-bar-chart.json";
 import vegaLineChart from "./templates/vega-line-chart.json";
-import type { CellType } from "./types";
+import type { TemplateCategory } from "./types";
 
-interface TemplateEntry {
-    title: string;
-    description: string;
-    cell: CellType;
-}
-
-interface TemplateCategory {
-    name: string;
-    templates: Array<TemplateEntry>;
-}
-
-export const templateCategories: Array<TemplateCategory> = [
+export const cellTemplates: Array<TemplateCategory> = [
     {
         name: "Markdown",
         templates: [
@@ -65,23 +54,3 @@ export const templateCategories: Array<TemplateCategory> = [
         ],
     },
 ];
-
-export function getTemplates(query: string): Array<TemplateCategory> {
-    const filteredCategories: Array<TemplateCategory> = [];
-    templateCategories.forEach((category) => {
-        const matchedTemplates = category.templates.filter(
-            (template) =>
-                category.name.toLowerCase().includes(query.toLowerCase()) ||
-                template.title.toLowerCase().includes(query.toLowerCase()) ||
-                template.description.toLowerCase().includes(query.toLowerCase())
-        );
-        if (matchedTemplates.length > 0) {
-            filteredCategories.push({
-                name: category.name,
-                templates: matchedTemplates,
-            });
-        }
-    });
-
-    return filteredCategories;
-}
diff --git a/client/src/components/Markdown/Editor/types.ts b/client/src/components/Markdown/Editor/types.ts
index e96aaa1b6da8..2e0e656fd969 100644
--- a/client/src/components/Markdown/Editor/types.ts
+++ b/client/src/components/Markdown/Editor/types.ts
@@ -3,3 +3,14 @@ export interface CellType {
     content: string;
     toggle?: boolean;
 }
+
+export interface TemplateCategory {
+    name: string;
+    templates: Array<TemplateEntry>;
+}
+
+export interface TemplateEntry {
+    title: string;
+    description: string;
+    cell: CellType;
+}

From 1bff866314ccd4ea63eaf35f2b1d5e730dc85bd0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 17:30:24 -0500
Subject: [PATCH 133/158] Add error message if filtering fails, fix popup
 closing on background

---
 .../components/Markdown/Editor/CellAdd.vue    | 43 +++++++++++--------
 .../components/Markdown/Editor/CellButton.vue |  2 +-
 .../components/Markdown/Editor/CellOption.vue |  2 -
 .../Markdown/Editor/CellWrapper.vue           |  4 +-
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index af5f70e559d3..774d0b89ec62 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -5,21 +5,24 @@
         </CellButton>
         <Popper v-if="buttonRef" :reference-el="buttonRef.$el" trigger="click" placement="right" mode="light">
             <DelayedInput class="p-1" :delay="100" placeholder="Search" @change="query = $event" />
-            <div class="cell-add-categories cursor-pointer overflow-auto">
-                <div v-for="(category, categoryIndex) of getTemplates(query)" :key="categoryIndex">
-                    <hr class="solid m-0" />
-                    <span class="d-flex justify-content-between">
-                        <small class="my-1 mx-3 text-info">{{ category.name }}</small>
-                    </span>
-                    <div v-if="category.templates.length > 0">
-                        <CellOption
-                            v-for="(option, optionIndex) of category.templates"
-                            :key="optionIndex"
-                            :title="option.title"
-                            :description="option.description"
-                            @click="$emit('click', { ...option.cell, toggle: true })" />
+            <div class="cell-add-categories overflow-auto">
+                <div v-if="filteredTemplates.length > 0">
+                    <div v-for="(category, categoryIndex) of filteredTemplates" :key="categoryIndex">
+                        <hr class="solid m-0" />
+                        <span class="d-flex justify-content-between">
+                            <small class="my-1 mx-3 text-info">{{ category.name }}</small>
+                        </span>
+                        <div v-if="category.templates.length > 0" class="cell-add-options">
+                            <CellOption
+                                v-for="(option, optionIndex) of category.templates"
+                                :key="optionIndex"
+                                :title="option.title"
+                                :description="option.description"
+                                @click="$emit('click', { ...option.cell, toggle: true })" />
+                        </div>
                     </div>
                 </div>
+                <b-alert v-else class="m-1 p-1" variant="info" show> No results found for "{{ query }}". </b-alert>
             </div>
         </Popper>
     </div>
@@ -28,7 +31,7 @@
 <script setup lang="ts">
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import { cellTemplates } from "./templates";
 import type { CellType, TemplateCategory } from "./types";
@@ -45,14 +48,14 @@ defineEmits<{
 const buttonRef = ref();
 const query = ref("");
 
-function getTemplates(query: string): Array<TemplateCategory> {
+const filteredTemplates = computed(() => {
     const filteredCategories: Array<TemplateCategory> = [];
     cellTemplates.forEach((category) => {
         const matchedTemplates = category.templates.filter(
             (template) =>
-                category.name.toLowerCase().includes(query.toLowerCase()) ||
-                template.title.toLowerCase().includes(query.toLowerCase()) ||
-                template.description.toLowerCase().includes(query.toLowerCase())
+                category.name.toLowerCase().includes(query.value.toLowerCase()) ||
+                template.title.toLowerCase().includes(query.value.toLowerCase()) ||
+                template.description.toLowerCase().includes(query.value.toLowerCase())
         );
         if (matchedTemplates.length > 0) {
             filteredCategories.push({
@@ -62,11 +65,13 @@ function getTemplates(query: string): Array<TemplateCategory> {
         }
     });
     return filteredCategories;
-}
+});
 </script>
 
 <style>
 .cell-add-categories {
     max-height: 20rem;
+    max-width: 15rem;
+    min-width: 15rem;
 }
 </style>
diff --git a/client/src/components/Markdown/Editor/CellButton.vue b/client/src/components/Markdown/Editor/CellButton.vue
index 6a900559d819..4b3921460539 100644
--- a/client/src/components/Markdown/Editor/CellButton.vue
+++ b/client/src/components/Markdown/Editor/CellButton.vue
@@ -4,7 +4,7 @@
         class="border-0 m-1 px-1 py-0"
         :title="title"
         variant="outline-primary"
-        @click.stop="onClick()"
+        @click="onClick()"
         @mouseleave="onMouseLeave($event)">
         <slot />
     </BButton>
diff --git a/client/src/components/Markdown/Editor/CellOption.vue b/client/src/components/Markdown/Editor/CellOption.vue
index 86515595b9d1..529b4e9a1dab 100644
--- a/client/src/components/Markdown/Editor/CellOption.vue
+++ b/client/src/components/Markdown/Editor/CellOption.vue
@@ -28,8 +28,6 @@ defineEmits<{
 @import "theme/blue.scss";
 
 .cell-option {
-    max-width: 15rem;
-    min-width: 15rem;
     &:hover {
         background: $brand-primary;
         color: $white;
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 1f8dc5e5baa8..a82e88ee5706 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -9,10 +9,10 @@
                     <div v-if="VALID_TYPES.includes(name)" class="small font-weight-bold">{{ name }}</div>
                     <div v-else class="small font-weight-bold">unknown</div>
                 </div>
-                <CellButton v-if="toggle" title="Collapse" @click="$emit('toggle')">
+                <CellButton v-if="toggle" title="Collapse">
                     <FontAwesomeIcon :icon="faAngleDoubleUp" />
                 </CellButton>
-                <CellButton v-else title="Expand" @click="$emit('toggle')">
+                <CellButton v-else title="Expand">
                     <FontAwesomeIcon :icon="faAngleDoubleDown" />
                 </CellButton>
             </div>

From f36f95af85e757f456b3fd4d57f66947c906eece Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 18:20:05 -0500
Subject: [PATCH 134/158] Add more draft entries to the insertion list

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

diff --git a/client/src/components/Markdown/Editor/templates.ts b/client/src/components/Markdown/Editor/templates.ts
index 94f43ef1a61d..0dd430e45782 100644
--- a/client/src/components/Markdown/Editor/templates.ts
+++ b/client/src/components/Markdown/Editor/templates.ts
@@ -32,6 +32,171 @@ export const cellTemplates: Array<TemplateCategory> = [
             },
         ],
     },
+    {
+        name: "Galaxy",
+        templates: [
+            {
+                title: "Collection",
+                description: "Display a Collection",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_collection_display(history_dataset_collection_id=)",
+                },
+            },
+            {
+                title: "Dataset",
+                description: "Display a Dataset",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_display(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Dataset Details",
+                description: "Display a Dataset Information",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_info(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Dataset Index",
+                description: "Display a Dataset Index",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_index(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Dataset Type",
+                description: "Display a Dataset Type",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_index(history_dataset_type=)",
+                },
+            },
+            {
+                title: "Embedded Dataset",
+                description: "Embed a Dataset",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_embedded(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Embedded Dataset as Table",
+                description: "Embed a Dataset as Table",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_as_table(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Image",
+                description: "Embed an Image",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_as_image(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Link to Dataset",
+                description: "Create link to a Dataset",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_link(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Link to Import",
+                description: "Link to Import a History",
+                cell: {
+                    name: "galaxy",
+                    content: "history_link(history_id=)",
+                },
+            },
+            {
+                title: "Name of Dataset",
+                description: "Display a Dataset name",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_name(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Peek into Dataset",
+                description: "Display a Dataset peek",
+                cell: {
+                    name: "galaxy",
+                    content: "history_dataset_peek(history_dataset_id=)",
+                },
+            },
+            {
+                title: "Job Metrics as Table",
+                description: "Display job resource consumption",
+                cell: {
+                    name: "galaxy",
+                    content: "job_metrics(job_id=)",
+                },
+            },
+            {
+                title: "Job Parameters as Table",
+                description: "Display the input parameters of a Job",
+                cell: {
+                    name: "galaxy",
+                    content: "job_parameters(job_id=)",
+                },
+            },
+            {
+                title: "Tool Error of Job run",
+                description: "Display Tool errors",
+                cell: {
+                    name: "galaxy",
+                    content: "tool_stderr(job_id=)",
+                },
+            },
+            {
+                title: "Tool Output of Job run",
+                description: "Display Tool standard output",
+                cell: {
+                    name: "galaxy",
+                    content: "tool_stdout(job_id=)",
+                },
+            },
+            {
+                title: "Display a Workflow",
+                description: "Display all Workflow steps",
+                cell: {
+                    name: "galaxy",
+                    content: "workflow_display(workflow_id=)",
+                },
+            },
+            {
+                title: "Time a Workflow was invoked",
+                description: "Inovcation time of a Workflow run",
+                cell: {
+                    name: "galaxy",
+                    content: "invocation_time(workflow_id=)",
+                },
+            },
+            {
+                title: "Workflow (as image)",
+                description: "A static image of a Workflow",
+                cell: {
+                    name: "galaxy",
+                    content: "workflow_image(workflow_id=)",
+                },
+            },
+            {
+                title: "Workflow License",
+                description: "Usage license of a Workflow",
+                cell: {
+                    name: "galaxy",
+                    content: "workflow_license(workflow_id=)",
+                },
+            },
+        ],
+    },
     {
         name: "Vega",
         templates: [

From 34627674a75cd956a4a94073c5e8d73ce4e256ac Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 18:24:39 -0500
Subject: [PATCH 135/158] Remove unused = from template

---
 .../components/Markdown/Editor/templates.ts   | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Markdown/Editor/templates.ts b/client/src/components/Markdown/Editor/templates.ts
index 0dd430e45782..0b4937296b6b 100644
--- a/client/src/components/Markdown/Editor/templates.ts
+++ b/client/src/components/Markdown/Editor/templates.ts
@@ -40,7 +40,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display a Collection",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_collection_display(history_dataset_collection_id=)",
+                    content: "history_dataset_collection_display(history_dataset_collection_id)",
                 },
             },
             {
@@ -48,7 +48,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display a Dataset",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_display(history_dataset_id=)",
+                    content: "history_dataset_display(history_dataset_id)",
                 },
             },
             {
@@ -56,7 +56,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display a Dataset Information",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_info(history_dataset_id=)",
+                    content: "history_dataset_info(history_dataset_id)",
                 },
             },
             {
@@ -64,7 +64,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display a Dataset Index",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_index(history_dataset_id=)",
+                    content: "history_dataset_index(history_dataset_id)",
                 },
             },
             {
@@ -80,7 +80,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Embed a Dataset",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_embedded(history_dataset_id=)",
+                    content: "history_dataset_embedded(history_dataset_id)",
                 },
             },
             {
@@ -88,7 +88,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Embed a Dataset as Table",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_as_table(history_dataset_id=)",
+                    content: "history_dataset_as_table(history_dataset_id)",
                 },
             },
             {
@@ -96,7 +96,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Embed an Image",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_as_image(history_dataset_id=)",
+                    content: "history_dataset_as_image(history_dataset_id)",
                 },
             },
             {
@@ -104,7 +104,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Create link to a Dataset",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_link(history_dataset_id=)",
+                    content: "history_dataset_link(history_dataset_id)",
                 },
             },
             {
@@ -112,7 +112,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Link to Import a History",
                 cell: {
                     name: "galaxy",
-                    content: "history_link(history_id=)",
+                    content: "history_link(history_id)",
                 },
             },
             {
@@ -120,7 +120,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display a Dataset name",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_name(history_dataset_id=)",
+                    content: "history_dataset_name(history_dataset_id)",
                 },
             },
             {
@@ -128,7 +128,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display a Dataset peek",
                 cell: {
                     name: "galaxy",
-                    content: "history_dataset_peek(history_dataset_id=)",
+                    content: "history_dataset_peek(history_dataset_id)",
                 },
             },
             {
@@ -136,7 +136,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display job resource consumption",
                 cell: {
                     name: "galaxy",
-                    content: "job_metrics(job_id=)",
+                    content: "job_metrics(job_id)",
                 },
             },
             {
@@ -144,7 +144,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display the input parameters of a Job",
                 cell: {
                     name: "galaxy",
-                    content: "job_parameters(job_id=)",
+                    content: "job_parameters(job_id)",
                 },
             },
             {
@@ -152,7 +152,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display Tool errors",
                 cell: {
                     name: "galaxy",
-                    content: "tool_stderr(job_id=)",
+                    content: "tool_stderr(job_id)",
                 },
             },
             {
@@ -160,7 +160,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display Tool standard output",
                 cell: {
                     name: "galaxy",
-                    content: "tool_stdout(job_id=)",
+                    content: "tool_stdout(job_id)",
                 },
             },
             {
@@ -168,7 +168,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Display all Workflow steps",
                 cell: {
                     name: "galaxy",
-                    content: "workflow_display(workflow_id=)",
+                    content: "workflow_display(workflow_id)",
                 },
             },
             {
@@ -176,7 +176,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Inovcation time of a Workflow run",
                 cell: {
                     name: "galaxy",
-                    content: "invocation_time(workflow_id=)",
+                    content: "invocation_time(workflow_id)",
                 },
             },
             {
@@ -184,7 +184,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "A static image of a Workflow",
                 cell: {
                     name: "galaxy",
-                    content: "workflow_image(workflow_id=)",
+                    content: "workflow_image(workflow_id)",
                 },
             },
             {
@@ -192,7 +192,7 @@ export const cellTemplates: Array<TemplateCategory> = [
                 description: "Usage license of a Workflow",
                 cell: {
                     name: "galaxy",
-                    content: "workflow_license(workflow_id=)",
+                    content: "workflow_license(workflow_id)",
                 },
             },
         ],

From cbe0208b2442ed4246ca3f4eb8bf99d1ec6faee9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 22:46:41 -0500
Subject: [PATCH 136/158] Add placeholder configuration component to attach
 data

---
 .../Markdown/Editor/CellConfigure.vue         | 34 +++++++++++++++++++
 .../components/Markdown/Editor/CellEditor.vue | 14 ++++++--
 .../Markdown/Editor/CellWrapper.vue           |  9 +++--
 .../src/components/Markdown/Editor/types.ts   |  1 +
 4 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/CellConfigure.vue

diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
new file mode 100644
index 000000000000..140477023315
--- /dev/null
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="p-4 border rounded bg-white mb-2">
+        <div class="d-flex justify-content-between align-items-center mb-3">
+            <div>
+                <div class="h4">Attach Data</div>
+                <div class="small">Fill in the fields below to map required inputs to this cell.</div>
+            </div>
+            <BButton variant="link" class="align-self-start"><FontAwesomeIcon :icon="faTimes" /></BButton>
+        </div>
+        <div class="mb-3">
+            <label class="form-label">Workflow</label>
+            <input type="text" class="form-control">
+        </div>
+        <div class="mb-3">
+            <label class="form-label">History Dataset</label>
+            <input type="text" class="form-control">
+        </div>
+        <div class="d-flex justify-content-end">
+            <BButton variant="outline-primary" class="mr-2">Cancel</BButton>
+            <BButton variant="outline-primary">OK</BButton>
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+defineProps<{}>();
+
+const emit = defineEmits<{
+    (e: "click"): void;
+}>();
+</script>
diff --git a/client/src/components/Markdown/Editor/CellEditor.vue b/client/src/components/Markdown/Editor/CellEditor.vue
index 84d031fad6f3..fcb1355bebcb 100644
--- a/client/src/components/Markdown/Editor/CellEditor.vue
+++ b/client/src/components/Markdown/Editor/CellEditor.vue
@@ -8,7 +8,9 @@
                 :cell-total="cells.length"
                 :name="cell.name"
                 :content="cell.content"
+                :configure="cell.configure"
                 :toggle="cell.toggle"
+                @configure="onConfigure(cellIndex)"
                 @change="onChange(cellIndex, $event)"
                 @clone="onClone(cellIndex)"
                 @delete="onDelete(cellIndex)"
@@ -48,6 +50,14 @@ function onAdd(cellIndex: number, cell: CellType) {
     scrollToCell(cellIndex);
 }
 
+// Toggle
+function onConfigure(cellIndex: number) {
+    const cell = cells.value?.[cellIndex];
+    if (cell) {
+        cell.configure = !cell.configure;
+    }
+}
+
 // Handle cell code changes
 function onChange(cellIndex: number, cellContent: string) {
     const cell = cells.value?.[cellIndex];
@@ -117,8 +127,8 @@ function onToggle(cellIndex: number) {
 }
 
 // Parse cells
-function parseCells(toggle: boolean = false) {
-    return parseMarkdown(props.markdownText).map((cell) => ({ ...cell, toggle }));
+function parseCells(configure: boolean = false, toggle: boolean = false) {
+    return parseMarkdown(props.markdownText).map((cell) => ({ ...cell, configure, toggle }));
 }
 
 // Scroll a specific cell into view
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index a82e88ee5706..30b913019383 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -34,7 +34,7 @@
         </div>
         <div v-if="toggle" class="d-flex">
             <div class="cell-guide d-flex flex-column" :class="{ 'cell-hover': hover }">
-                <CellButton title="Attach Data">
+                <CellButton title="Attach Data" @click="$emit('configure')">
                     <FontAwesomeIcon :icon="faPaperclip" />
                 </CellButton>
                 <CellButton title="Clone Cell" @click="$emit('clone')">
@@ -51,7 +51,8 @@
                 </CellButton>
             </div>
             <div class="ml-2 w-100">
-                <CellCode :key="name" :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
+                <CellConfigure v-if="configure" />
+                <CellCode v-else :key="name" :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
             </div>
         </div>
         <BModal v-model="confirmDelete" title="Delete Cell" title-tag="h2" @ok="$emit('delete')">
@@ -80,18 +81,20 @@ import MarkdownVega from "../Sections/MarkdownVega.vue";
 import MarkdownVisualization from "../Sections/MarkdownVisualization.vue";
 import CellButton from "./CellButton.vue";
 import CellCode from "./CellCode.vue";
+import CellConfigure from "./CellConfigure.vue";
 
 const VALID_TYPES = ["galaxy", "markdown", "vega", "visualization", "vitessce"];
 
 defineProps<{
     cellIndex: number;
     cellTotal: number;
+    configure?: boolean;
     content: string;
     name: string;
     toggle?: boolean;
 }>();
 
-defineEmits(["change", "clone", "delete", "move", "toggle"]);
+defineEmits(["change", "clone", "configure", "delete", "move", "toggle"]);
 
 const confirmDelete = ref(false);
 const hover = ref(false);
diff --git a/client/src/components/Markdown/Editor/types.ts b/client/src/components/Markdown/Editor/types.ts
index 2e0e656fd969..2e1a93c31936 100644
--- a/client/src/components/Markdown/Editor/types.ts
+++ b/client/src/components/Markdown/Editor/types.ts
@@ -1,6 +1,7 @@
 export interface CellType {
     name: string;
     content: string;
+    configure?: boolean;
     toggle?: boolean;
 }
 

From 3f3cced4160f8ed2d5cfa48014e94be3c69214aa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 2 Feb 2025 23:10:18 -0500
Subject: [PATCH 137/158] Align styles, add separator for config dialog

---
 .../src/components/Markdown/Editor/CellCode.vue  |  2 +-
 .../components/Markdown/Editor/CellConfigure.vue | 16 ++++++++--------
 .../components/Markdown/Editor/CellWrapper.vue   |  1 +
 .../Markdown/Sections/MarkdownDefault.vue        |  2 +-
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index dfbc8c379105..c71de06f7961 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="editor" class="w-100" />
+    <div ref="editor" class="mt-1 w-100" />
 </template>
 
 <script setup>
diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
index 140477023315..5184720c2e1b 100644
--- a/client/src/components/Markdown/Editor/CellConfigure.vue
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -1,19 +1,19 @@
 <template>
-    <div class="p-4 border rounded bg-white mb-2">
+    <div class="p-4 bg-white mb-2">
         <div class="d-flex justify-content-between align-items-center mb-3">
             <div>
-                <div class="h4">Attach Data</div>
+                <div class="h2">Attach Data</div>
                 <div class="small">Fill in the fields below to map required inputs to this cell.</div>
             </div>
-            <BButton variant="link" class="align-self-start"><FontAwesomeIcon :icon="faTimes" /></BButton>
+            <BButton variant="link" class="align-self-start"><FontAwesomeIcon :icon="faTimes" class="fa-lg" /></BButton>
         </div>
         <div class="mb-3">
             <label class="form-label">Workflow</label>
-            <input type="text" class="form-control">
+            <input type="text" class="form-control" />
         </div>
         <div class="mb-3">
             <label class="form-label">History Dataset</label>
-            <input type="text" class="form-control">
+            <input type="text" class="form-control" />
         </div>
         <div class="d-flex justify-content-end">
             <BButton variant="outline-primary" class="mr-2">Cancel</BButton>
@@ -22,13 +22,13 @@
     </div>
 </template>
 
-
 <script setup lang="ts">
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
 defineProps<{}>();
 
-const emit = defineEmits<{
+defineEmits<{
     (e: "click"): void;
 }>();
 </script>
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index 30b913019383..a36e87b1278b 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -51,6 +51,7 @@
                 </CellButton>
             </div>
             <div class="ml-2 w-100">
+                <hr class="solid m-0" />
                 <CellConfigure v-if="configure" />
                 <CellCode v-else :key="name" :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
             </div>
diff --git a/client/src/components/Markdown/Sections/MarkdownDefault.vue b/client/src/components/Markdown/Sections/MarkdownDefault.vue
index f4f5e79b6079..07b359a9d013 100644
--- a/client/src/components/Markdown/Sections/MarkdownDefault.vue
+++ b/client/src/components/Markdown/Sections/MarkdownDefault.vue
@@ -19,5 +19,5 @@ const renderedContent = computed(() => md.render(props.content));
 </script>
 
 <template>
-    <p class="text-justify" v-html="renderedContent" />
+    <div class="text-justify px-4" v-html="renderedContent" />
 </template>

From a3176986018c9864c1f61b1d26d51857f38e76f5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 3 Feb 2025 11:31:46 -0500
Subject: [PATCH 138/158] Add close event handlers for data attachment view,
 hide option for markdown cells

---
 .../components/Markdown/Editor/CellCode.vue   |  2 +-
 .../Markdown/Editor/CellConfigure.vue         | 13 +++++++---
 .../Markdown/Editor/CellWrapper.vue           | 26 +++++++++++++------
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellCode.vue b/client/src/components/Markdown/Editor/CellCode.vue
index c71de06f7961..dfbc8c379105 100644
--- a/client/src/components/Markdown/Editor/CellCode.vue
+++ b/client/src/components/Markdown/Editor/CellCode.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="editor" class="mt-1 w-100" />
+    <div ref="editor" class="w-100" />
 </template>
 
 <script setup>
diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
index 5184720c2e1b..5ac757b85550 100644
--- a/client/src/components/Markdown/Editor/CellConfigure.vue
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -5,7 +5,9 @@
                 <div class="h2">Attach Data</div>
                 <div class="small">Fill in the fields below to map required inputs to this cell.</div>
             </div>
-            <BButton variant="link" class="align-self-start"><FontAwesomeIcon :icon="faTimes" class="fa-lg" /></BButton>
+            <BButton variant="link" class="align-self-start" @click="$emit('cancel')">
+                <FontAwesomeIcon :icon="faTimes" class="fa-lg" />
+            </BButton>
         </div>
         <div class="mb-3">
             <label class="form-label">Workflow</label>
@@ -16,7 +18,7 @@
             <input type="text" class="form-control" />
         </div>
         <div class="d-flex justify-content-end">
-            <BButton variant="outline-primary" class="mr-2">Cancel</BButton>
+            <BButton variant="outline-primary" class="mr-2" @click="$emit('cancel')">Cancel</BButton>
             <BButton variant="outline-primary">OK</BButton>
         </div>
     </div>
@@ -26,9 +28,12 @@
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-defineProps<{}>();
+defineProps<{
+    content: string;
+}>();
 
 defineEmits<{
-    (e: "click"): void;
+    (e: "cancel"): void;
+    (e: "change", content: string): void;
 }>();
 </script>
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index a36e87b1278b..c6d80e1ef7b8 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -34,7 +34,7 @@
         </div>
         <div v-if="toggle" class="d-flex">
             <div class="cell-guide d-flex flex-column" :class="{ 'cell-hover': hover }">
-                <CellButton title="Attach Data" @click="$emit('configure')">
+                <CellButton v-if="name !== 'markdown'" title="Attach Data" @click="$emit('configure')">
                     <FontAwesomeIcon :icon="faPaperclip" />
                 </CellButton>
                 <CellButton title="Clone Cell" @click="$emit('clone')">
@@ -52,8 +52,18 @@
             </div>
             <div class="ml-2 w-100">
                 <hr class="solid m-0" />
-                <CellConfigure v-if="configure" />
-                <CellCode v-else :key="name" :value="content" :mode="getMode(name)" @change="$emit('change', $event)" />
+                <CellConfigure
+                    v-if="configure"
+                    :content="content"
+                    @cancel="$emit('configure')"
+                    @change="$emit('change', $event)" />
+                <CellCode
+                    v-else
+                    :key="name"
+                    class="mt-1"
+                    :value="content"
+                    :mode="mode"
+                    @change="$emit('change', $event)" />
             </div>
         </div>
         <BModal v-model="confirmDelete" title="Delete Cell" title-tag="h2" @ok="$emit('delete')">
@@ -74,7 +84,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BModal } from "bootstrap-vue";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import MarkdownDefault from "../Sections/MarkdownDefault.vue";
 import MarkdownGalaxy from "../Sections/MarkdownGalaxy.vue";
@@ -86,7 +96,7 @@ import CellConfigure from "./CellConfigure.vue";
 
 const VALID_TYPES = ["galaxy", "markdown", "vega", "visualization", "vitessce"];
 
-defineProps<{
+const props = defineProps<{
     cellIndex: number;
     cellTotal: number;
     configure?: boolean;
@@ -100,15 +110,15 @@ defineEmits(["change", "clone", "configure", "delete", "move", "toggle"]);
 const confirmDelete = ref(false);
 const hover = ref(false);
 
-function getMode(cellName: string) {
-    switch (cellName) {
+const mode = computed(() => {
+    switch (props.name) {
         case "galaxy":
             return "python";
         case "markdown":
             return "markdown";
     }
     return "json";
-}
+});
 </script>
 
 <style lang="scss">

From df0c3577842edca5b7529a4c8a676e85004878fa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 4 Feb 2025 20:30:57 -0500
Subject: [PATCH 139/158] Move to subcomponent for data attachment

---
 .../Markdown/Editor/CellConfigure.vue         | 12 ++++------
 .../Markdown/Editor/CellWrapper.vue           |  1 +
 .../Editor/configurations/ConfigureGalaxy.vue | 22 +++++++++++++++++++
 3 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/configurations/ConfigureGalaxy.vue

diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
index 5ac757b85550..18eaad6003fa 100644
--- a/client/src/components/Markdown/Editor/CellConfigure.vue
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -9,14 +9,7 @@
                 <FontAwesomeIcon :icon="faTimes" class="fa-lg" />
             </BButton>
         </div>
-        <div class="mb-3">
-            <label class="form-label">Workflow</label>
-            <input type="text" class="form-control" />
-        </div>
-        <div class="mb-3">
-            <label class="form-label">History Dataset</label>
-            <input type="text" class="form-control" />
-        </div>
+        <ConfigureGalaxy v-if="name === 'galaxy'" :content="content" @change="$emit('change', $event)" />
         <div class="d-flex justify-content-end">
             <BButton variant="outline-primary" class="mr-2" @click="$emit('cancel')">Cancel</BButton>
             <BButton variant="outline-primary">OK</BButton>
@@ -28,7 +21,10 @@
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
+import ConfigureGalaxy from "./configurations/ConfigureGalaxy.vue";
+
 defineProps<{
+    name: string;
     content: string;
 }>();
 
diff --git a/client/src/components/Markdown/Editor/CellWrapper.vue b/client/src/components/Markdown/Editor/CellWrapper.vue
index c6d80e1ef7b8..efda2ef43883 100644
--- a/client/src/components/Markdown/Editor/CellWrapper.vue
+++ b/client/src/components/Markdown/Editor/CellWrapper.vue
@@ -54,6 +54,7 @@
                 <hr class="solid m-0" />
                 <CellConfigure
                     v-if="configure"
+                    :name="name"
                     :content="content"
                     @cancel="$emit('configure')"
                     @change="$emit('change', $event)" />
diff --git a/client/src/components/Markdown/Editor/configurations/ConfigureGalaxy.vue b/client/src/components/Markdown/Editor/configurations/ConfigureGalaxy.vue
new file mode 100644
index 000000000000..a856b70104bf
--- /dev/null
+++ b/client/src/components/Markdown/Editor/configurations/ConfigureGalaxy.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="p-4 bg-white mb-2">
+        <div class="mb-3">
+            <label class="form-label">Workflow</label>
+            <input type="text" class="form-control" />
+        </div>
+        <div class="mb-3">
+            <label class="form-label">History Dataset</label>
+            <input type="text" class="form-control" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    content: string;
+}>();
+
+defineEmits<{
+    (e: "change", content: string): void;
+}>();
+</script>

From 2e760cd23d462b4adf20cf82448c7aef70a06d7f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 6 Feb 2025 20:48:47 -0500
Subject: [PATCH 140/158] Update ngl and plotly packages with latest charts
 module

---
 config/plugins/visualizations/ngl/config/ngl.xml       | 2 +-
 config/plugins/visualizations/plotly/config/plotly.xml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index aadb4c040130..d9b3bb7aac6d 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.18" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.19" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>
diff --git a/config/plugins/visualizations/plotly/config/plotly.xml b/config/plugins/visualizations/plotly/config/plotly.xml
index 641af2fc3cd8..0030545458cc 100644
--- a/config/plugins/visualizations/plotly/config/plotly.xml
+++ b/config/plugins/visualizations/plotly/config/plotly.xml
@@ -14,7 +14,7 @@
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
     </params>
     <requirements>
-        <requirement type="npm" version="0.0.4" package="@galaxyproject/plotly"/>
+        <requirement type="npm" version="0.0.5" package="@galaxyproject/plotly"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From 25549051990eef160b5dc198aa903bc2bd2a47b8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 6 Feb 2025 21:53:32 -0500
Subject: [PATCH 141/158] Close popover on escape

---
 client/src/components/Popper/usePopper.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index dbdcb5cd5041..b033d8a0d348 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -16,11 +16,17 @@ export function usePopper(
 
     const doOpen = () => (visible.value = true);
     const doClose = () => (visible.value = false);
-    const doCloseForDocument = (e: Event) => {
+    const doCloseDocument = (e: Event) => {
         if (!reference.value?.contains(e.target as Node) && !popper.value?.contains(e.target as Node)) {
             visible.value = false;
         }
     };
+    const doCloseEscape = (event: Event) => {
+        const keyboardEvent = event as KeyboardEvent;
+        if (keyboardEvent.key === "Escape") {
+            visible.value = false;
+        }
+    };
 
     const addEventListener = (target: EventTarget, event: string, handler: EventListener) => {
         target.addEventListener(event, handler);
@@ -44,7 +50,8 @@ export function usePopper(
         const trigger = options.trigger ?? defaultTrigger;
         if (trigger === "click") {
             addEventListener(reference.value, "click", doOpen);
-            addEventListener(document, "click", doCloseForDocument);
+            addEventListener(document, "click", doCloseDocument);
+            addEventListener(document, "keydown", doCloseEscape);
         } else if (trigger === "hover") {
             addEventListener(reference.value, "mouseover", doOpen);
             addEventListener(reference.value, "mouseout", doClose);

From 8df8690b0b1c511cd9666079ce7ed1348fd03f4e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 6 Feb 2025 22:25:02 -0500
Subject: [PATCH 142/158] Add additional option to close when clicking on
 particular elements inside the popup, simplify disabled prop handling

---
 client/src/components/Markdown/Editor/CellAdd.vue |  2 +-
 client/src/components/Popper/Popper.vue           | 14 ++------------
 client/src/components/Popper/usePopper.ts         |  7 +++++++
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index 774d0b89ec62..7823f6bcddf7 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -12,7 +12,7 @@
                         <span class="d-flex justify-content-between">
                             <small class="my-1 mx-3 text-info">{{ category.name }}</small>
                         </span>
-                        <div v-if="category.templates.length > 0" class="cell-add-options">
+                        <div v-if="category.templates.length > 0" class="cell-add-options popper-close">
                             <CellOption
                                 v-for="(option, optionIndex) of category.templates"
                                 :key="optionIndex"
diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index d9776e2bd48b..2cae2db3d11c 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -3,7 +3,7 @@
         <span v-if="!referenceEl" ref="reference">
             <slot name="reference" />
         </span>
-        <div v-show="visible" ref="popper" class="popper-element" :class="`popper-element-${mode}`">
+        <div v-show="!disabled && visible" ref="popper" class="popper-element" :class="`popper-element-${mode}`">
             <div v-if="arrow" class="popper-arrow" data-popper-arrow />
             <div v-if="title" class="popper-header px-2 py-1 rounded-top d-flex justify-content-between">
                 <span class="px-1">{{ title }}</span>
@@ -22,7 +22,7 @@ import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { type Placement } from "@popperjs/core";
 import type { PropType } from "vue";
-import { ref, watch } from "vue";
+import { ref } from "vue";
 
 import { type Trigger, usePopper } from "./usePopper";
 
@@ -47,16 +47,6 @@ const { visible } = usePopper(reference, popper, {
     trigger: props.trigger,
 });
 
-watch(
-    () => [visible.value, props.disabled],
-    () => {
-        if (props.disabled && visible.value) {
-            visible.value = false;
-        }
-    },
-    { flush: "sync" }
-);
-
 defineExpose({
     visible,
     reference,
diff --git a/client/src/components/Popper/usePopper.ts b/client/src/components/Popper/usePopper.ts
index b033d8a0d348..b32502f17a7a 100644
--- a/client/src/components/Popper/usePopper.ts
+++ b/client/src/components/Popper/usePopper.ts
@@ -21,6 +21,12 @@ export function usePopper(
             visible.value = false;
         }
     };
+    const doCloseElement = (event: Event) => {
+        const target = event.target as Element;
+        if (target && target.closest(".popper-close")) {
+            doClose();
+        }
+    };
     const doCloseEscape = (event: Event) => {
         const keyboardEvent = event as KeyboardEvent;
         if (keyboardEvent.key === "Escape") {
@@ -50,6 +56,7 @@ export function usePopper(
         const trigger = options.trigger ?? defaultTrigger;
         if (trigger === "click") {
             addEventListener(reference.value, "click", doOpen);
+            addEventListener(popper.value, "click", doCloseElement);
             addEventListener(document, "click", doCloseDocument);
             addEventListener(document, "keydown", doCloseEscape);
         } else if (trigger === "hover") {

From 57a2a10a4edc651402b6969401b001fca4b2bf2a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 6 Feb 2025 23:00:24 -0500
Subject: [PATCH 143/158] Use actual triangle for popper arrow

---
 client/src/components/Popper/Popper.vue | 85 +++++++++----------------
 1 file changed, 30 insertions(+), 55 deletions(-)

diff --git a/client/src/components/Popper/Popper.vue b/client/src/components/Popper/Popper.vue
index 2cae2db3d11c..d75b4488507d 100644
--- a/client/src/components/Popper/Popper.vue
+++ b/client/src/components/Popper/Popper.vue
@@ -73,20 +73,12 @@ defineExpose({
     color: $brand-light;
     max-width: 12rem;
     opacity: 0.95;
-    .popper-arrow:before {
-        background: $brand-dark;
-        border: popper-border($brand-dark);
-    }
 }
 
 .popper-element-light {
     background: $white;
     border: popper-border($border-color);
     color: $brand-dark;
-    .popper-arrow:before {
-        background: $white;
-        border: popper-border($border-color);
-    }
 }
 
 .popper-element-primary-title {
@@ -97,63 +89,46 @@ defineExpose({
         background: $brand-primary;
         color: $white;
     }
-    .popper-arrow:before {
-        background: $brand-primary;
-        border: popper-border($border-color);
-    }
 }
 
-/** Arrow positioning and border handling */
-.popper-arrow,
-.popper-arrow:before {
-    height: 9px;
-    width: 9px;
+/** Triangle Arrow */
+.popper-arrow {
     position: absolute;
-    content: "";
-    transform: rotate(45deg);
+    width: 0;
+    height: 0;
+    border-style: solid;
 }
 
-.popper-element[data-popper-placement^="top"] {
-    > .popper-arrow {
-        bottom: 0px;
-    }
-    > .popper-arrow:before {
-        bottom: -5px;
-        border-top: none;
-        border-left: none;
-    }
+/** Arrow positioning based on placement */
+.popper-element[data-popper-placement^="top"] > .popper-arrow {
+    bottom: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 7px;
+    border-color: $brand-dark transparent transparent transparent;
 }
 
-.popper-element[data-popper-placement^="right"] {
-    > .popper-arrow {
-        left: 0px;
-    }
-    > .popper-arrow:before {
-        left: -5px;
-        border-top: none;
-        border-right: none;
-    }
+.popper-element[data-popper-placement^="bottom"] > .popper-arrow {
+    top: -14px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 7px;
+    border-color: transparent transparent $brand-dark transparent;
 }
 
-.popper-element[data-popper-placement^="bottom"] {
-    > .popper-arrow {
-        top: 0px;
-    }
-    > .popper-arrow:before {
-        top: -5px;
-        border-bottom: none;
-        border-right: none;
-    }
+.popper-element[data-popper-placement^="left"] > .popper-arrow {
+    right: -14px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 7px;
+    border-color: transparent transparent transparent $brand-dark;
 }
 
-.popper-element[data-popper-placement^="left"] {
-    > .popper-arrow {
-        right: 0px;
-    }
-    > .popper-arrow:before {
-        right: -5px;
-        border-bottom: none;
-        border-left: none;
-    }
+.popper-element[data-popper-placement^="right"] > .popper-arrow {
+    left: -14px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 7px;
+    border-color: transparent $brand-dark transparent transparent;
 }
 </style>

From b592ab45f257eabe2c157171fb6b6fab96f2c12e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 7 Feb 2025 11:56:40 -0500
Subject: [PATCH 144/158] Update ngl and plotly package version

---
 config/plugins/visualizations/ngl/config/ngl.xml       | 2 +-
 config/plugins/visualizations/plotly/config/plotly.xml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index d9b3bb7aac6d..57beec0d15d8 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.19" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.20" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>
diff --git a/config/plugins/visualizations/plotly/config/plotly.xml b/config/plugins/visualizations/plotly/config/plotly.xml
index 0030545458cc..2bebc0fd1b8a 100644
--- a/config/plugins/visualizations/plotly/config/plotly.xml
+++ b/config/plugins/visualizations/plotly/config/plotly.xml
@@ -14,7 +14,7 @@
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
     </params>
     <requirements>
-        <requirement type="npm" version="0.0.5" package="@galaxyproject/plotly"/>
+        <requirement type="npm" version="0.0.6" package="@galaxyproject/plotly"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From 3acac810c5252f5addb0df71824627968dedd5f2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 8 Feb 2025 13:47:06 -0500
Subject: [PATCH 145/158] Update charts package with fixed tooltip attachment,
 add warning to data attachment component

---
 client/src/components/Markdown/Editor/CellConfigure.vue | 2 ++
 config/plugins/visualizations/ngl/config/ngl.xml        | 2 +-
 config/plugins/visualizations/plotly/config/plotly.xml  | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
index 18eaad6003fa..46469e83591a 100644
--- a/client/src/components/Markdown/Editor/CellConfigure.vue
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -10,6 +10,8 @@
             </BButton>
         </div>
         <ConfigureGalaxy v-if="name === 'galaxy'" :content="content" @change="$emit('change', $event)" />
+        <ConfigureGalaxy v-else-if="name === 'visualization'" :content="content" @change="$emit('change', $event)" />
+        <b-alert v-else variant="warning" show> Data cannot be linked to this cell type. </b-alert>
         <div class="d-flex justify-content-end">
             <BButton variant="outline-primary" class="mr-2" @click="$emit('cancel')">Cancel</BButton>
             <BButton variant="outline-primary">OK</BButton>
diff --git a/config/plugins/visualizations/ngl/config/ngl.xml b/config/plugins/visualizations/ngl/config/ngl.xml
index 57beec0d15d8..e14941302ab9 100644
--- a/config/plugins/visualizations/ngl/config/ngl.xml
+++ b/config/plugins/visualizations/ngl/config/ngl.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.20" package="@galaxyproject/ngl"/>
+        <requirement type="npm" version="0.0.21" package="@galaxyproject/ngl"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>
diff --git a/config/plugins/visualizations/plotly/config/plotly.xml b/config/plugins/visualizations/plotly/config/plotly.xml
index 2bebc0fd1b8a..67bd94d58e5e 100644
--- a/config/plugins/visualizations/plotly/config/plotly.xml
+++ b/config/plugins/visualizations/plotly/config/plotly.xml
@@ -14,7 +14,7 @@
         <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
     </params>
     <requirements>
-        <requirement type="npm" version="0.0.6" package="@galaxyproject/plotly"/>
+        <requirement type="npm" version="0.0.7" package="@galaxyproject/plotly"/>
     </requirements>
     <entry_point entry_point_type="script" src="dist/index.js" css="dist/index.css" />
     <settings>

From 8b9e9ba73b22259080bb1a1e6b83013a0b550236 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 8 Feb 2025 14:40:16 -0500
Subject: [PATCH 146/158] Draft data attachment select field

---
 .../Markdown/Editor/CellConfigure.vue         |  6 +-
 .../configurations/ConfigureVisualization.vue | 66 +++++++++++++++++++
 2 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue

diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
index 46469e83591a..898f52374aa8 100644
--- a/client/src/components/Markdown/Editor/CellConfigure.vue
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -10,7 +10,10 @@
             </BButton>
         </div>
         <ConfigureGalaxy v-if="name === 'galaxy'" :content="content" @change="$emit('change', $event)" />
-        <ConfigureGalaxy v-else-if="name === 'visualization'" :content="content" @change="$emit('change', $event)" />
+        <ConfigureVisualization
+            v-else-if="name === 'visualization'"
+            :content="content"
+            @change="$emit('change', $event)" />
         <b-alert v-else variant="warning" show> Data cannot be linked to this cell type. </b-alert>
         <div class="d-flex justify-content-end">
             <BButton variant="outline-primary" class="mr-2" @click="$emit('cancel')">Cancel</BButton>
@@ -24,6 +27,7 @@ import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 import ConfigureGalaxy from "./configurations/ConfigureGalaxy.vue";
+import ConfigureVisualization from "./configurations/ConfigureVisualization.vue";
 
 defineProps<{
     name: string;
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..0cdbafe18c88
--- /dev/null
+++ b/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="my-4">
+        <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
+        <label class="form-label">Select a visualization dataset:</label>
+        <Multiselect v-model="currentValue" label="name" :options="options" @search-change="search" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from "lodash";
+import { computed, type Ref, ref } from "vue";
+import Multiselect from "vue-multiselect";
+
+import { GalaxyApi } from "@/api";
+
+const DELAY = 300;
+
+interface OptionType {
+    id: string | null | undefined;
+    name: string | null | undefined;
+}
+
+const props = defineProps<{
+    content: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "change", content: string): void;
+}>();
+
+const errorMessage = ref("");
+const options: Ref<Array<OptionType>> = ref([]);
+
+const currentContent = computed(() => JSON.parse(props.content));
+const currentValue = computed({
+    get: () => ({
+        id: currentContent.value?.dataset_id,
+        name: currentContent.value?.dataset_id,
+    }),
+    set: (newValue) => {
+        const newValues = { ...currentContent.value, dataset_id: newValue.id };
+        emit("change", JSON.stringify(newValues, null, 4));
+    },
+});
+
+const search = debounce(async (query: string = "") => {
+    const { data, error } = await GalaxyApi().GET("/api/datasets", {
+        params: {
+            query: {
+                q: ["name-contains"],
+                qv: [query],
+                offset: 0,
+                limit: 100,
+            },
+        },
+    });
+    if (error) {
+        errorMessage.value = error.err_msg;
+    } else {
+        errorMessage.value = "";
+        options.value = data.map((d) => ({ id: d.id, name: d.name }));
+    }
+}, DELAY);
+
+search();
+</script>

From abd4a7cc98bb769affe8d4fdb54d6ddbad304b3e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 8 Feb 2025 14:58:25 -0500
Subject: [PATCH 147/158] Improve error handling when selecting datasets,
 preserve dataset name

---
 .../Markdown/Editor/CellConfigure.vue         |  4 --
 .../configurations/ConfigureVisualization.vue | 60 ++++++++++++-------
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
index 898f52374aa8..7eb163c3391f 100644
--- a/client/src/components/Markdown/Editor/CellConfigure.vue
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -15,10 +15,6 @@
             :content="content"
             @change="$emit('change', $event)" />
         <b-alert v-else variant="warning" show> Data cannot be linked to this cell type. </b-alert>
-        <div class="d-flex justify-content-end">
-            <BButton variant="outline-primary" class="mr-2" @click="$emit('cancel')">Cancel</BButton>
-            <BButton variant="outline-primary">OK</BButton>
-        </div>
     </div>
 </template>
 
diff --git a/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue b/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
index 0cdbafe18c88..eb0a8e6d8e52 100644
--- a/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
+++ b/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
@@ -1,14 +1,16 @@
 <template>
     <div class="my-4">
         <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
-        <label class="form-label">Select a visualization dataset:</label>
-        <Multiselect v-model="currentValue" label="name" :options="options" @search-change="search" />
+        <div v-else>
+            <label class="form-label">Select a dataset:</label>
+            <Multiselect v-model="currentValue" label="name" :options="options" @search-change="search" />
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import { debounce } from "lodash";
-import { computed, type Ref, ref } from "vue";
+import { computed, type Ref, ref, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { GalaxyApi } from "@/api";
@@ -31,36 +33,54 @@ const emit = defineEmits<{
 const errorMessage = ref("");
 const options: Ref<Array<OptionType>> = ref([]);
 
-const currentContent = computed(() => JSON.parse(props.content));
+const currentContent = ref();
+
 const currentValue = computed({
     get: () => ({
         id: currentContent.value?.dataset_id,
-        name: currentContent.value?.dataset_id,
+        name: currentContent.value?.dataset_name || currentContent.value?.dataset_id,
     }),
     set: (newValue) => {
-        const newValues = { ...currentContent.value, dataset_id: newValue.id };
+        const newValues = { ...currentContent.value, dataset_id: newValue.id, dataset_name: newValue.name };
         emit("change", JSON.stringify(newValues, null, 4));
     },
 });
 
 const search = debounce(async (query: string = "") => {
-    const { data, error } = await GalaxyApi().GET("/api/datasets", {
-        params: {
-            query: {
-                q: ["name-contains"],
-                qv: [query],
-                offset: 0,
-                limit: 100,
+    if (!errorMessage.value) {
+        const { data, error } = await GalaxyApi().GET("/api/datasets", {
+            params: {
+                query: {
+                    q: ["name-contains"],
+                    qv: [query],
+                    offset: 0,
+                    limit: 50,
+                },
             },
-        },
-    });
-    if (error) {
-        errorMessage.value = error.err_msg;
-    } else {
-        errorMessage.value = "";
-        options.value = data.map((d) => ({ id: d.id, name: d.name }));
+        });
+        if (error) {
+            errorMessage.value = error.err_msg;
+        } else {
+            errorMessage.value = "";
+            options.value = data.map((d) => ({ id: d.id, name: d.name }));
+        }
     }
 }, DELAY);
 
+function parseContent() {
+    try {
+        currentContent.value = JSON.parse(props.content);
+        errorMessage.value = "";
+    } catch (e) {
+        errorMessage.value = `Failed to parse: ${e}`;
+    }
+}
+
+parseContent();
 search();
+
+watch(
+    () => props.content,
+    () => parseContent()
+);
 </script>

From 9b64694fea67c0a6ac54380638ad3cf8b6fe4732 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 8 Feb 2025 16:59:02 -0500
Subject: [PATCH 148/158] Remove unused import

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

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index 9f1ad5a811d9..a6cabfe4dc7a 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -23,7 +23,6 @@
     Any,
     Dict,
     List,
-    Match,
     Optional,
 )
 

From 638f86de35d2a9d2fec0c6aadb26ed1f419b4d6a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 8 Feb 2025 17:41:39 -0500
Subject: [PATCH 149/158] Add ace code editor package

---
 client/package.json | 1 +
 client/yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/client/package.json b/client/package.json
index a4366da532f2..8d1b3b3f0594 100644
--- a/client/package.json
+++ b/client/package.json
@@ -45,6 +45,7 @@
     "@types/jest": "^29.5.12",
     "@vueuse/core": "^10.5.0",
     "@vueuse/math": "^10.9.0",
+    "ace-builds": "^1.37.5",
     "assert": "^2.1.0",
     "axios": "^1.6.2",
     "babel-runtime": "^6.26.0",
diff --git a/client/yarn.lock b/client/yarn.lock
index da1ef5451e05..7dea0b3a20ed 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3155,6 +3155,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+ace-builds@^1.37.5:
+  version "1.37.5"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.37.5.tgz#8cf3c3a2e869f32a193d314c8f4346e6218bfdae"
+  integrity sha512-VMJ4Cnhq6L9dwvOCyuyyvQuiVTSwdZC7zDKJBBBJJax0wGQ7MvzQZFoi0gMmCm2I4Zuv/ZbtwU/dlglIhCNLhw==
+
 acorn-globals@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"

From c4112b5839e155456235baa22abe3874e4f4c9df Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 9 Feb 2025 10:14:37 -0500
Subject: [PATCH 150/158] Adjust directive handler

---
 lib/galaxy/managers/markdown_util.py | 43 +++++++++++++++++-----------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index a6cabfe4dc7a..bbb8dc44c46e 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -216,16 +216,25 @@ def _remap(container, line):
                 url = trans.app.config.organization_url
                 rval = self.handle_instance_organization_link(line, title, url)
             elif container == "invocation_inputs":
-                rval = self.handle_invocation_inputs(line, title, url)
+                if object_id is not None:
+                    invocation = workflow_manager.get_invocation(
+                        trans, object_id, check_ownership=False, check_accessible=True
+                    )
+                    rval = self.handle_invocation_inputs(line, invocation)
             elif container == "invocation_outputs":
-                rval = self.handle_invocation_outputs(line, title, url)
+                if object_id is not None:
+                    invocation = workflow_manager.get_invocation(
+                        trans, object_id, check_ownership=False, check_accessible=True
+                    )
+                    rval = self.handle_invocation_outputs(line, invocation)
             elif container == "invocation_time":
-                invocation = workflow_manager.get_invocation(
-                    trans, object_id, check_ownership=False, check_accessible=True
-                )
-                rval = self.handle_invocation_time(line, invocation)
+                if object_id is not None:
+                    invocation = workflow_manager.get_invocation(
+                        trans, object_id, check_ownership=False, check_accessible=True
+                    )
+                    rval = self.handle_invocation_time(line, invocation)
             elif container == "visualization":
-                rval = self.handle_visualization(line, title, url)
+                rval = self.handle_visualization(line)
             else:
                 raise MalformedContents(f"Unknown Galaxy Markdown directive encountered [{container}].")
             if rval is not None:
@@ -357,19 +366,19 @@ def handle_instance_organization_link(self, line, title, url):
         pass
 
     @abc.abstractmethod
-    def handle_invocation_time(self, line, date):
+    def handle_invocation_time(self, line, invocation):
         pass
 
     @abc.abstractmethod
-    def handle_invocation_inputs(self, line, date):
+    def handle_invocation_inputs(self, line, invocation):
         pass
 
     @abc.abstractmethod
-    def handle_invocation_outputs(self, line, date):
+    def handle_invocation_outputs(self, line, invocation):
         pass
 
     @abc.abstractmethod
-    def handle_visualization(self, line, date):
+    def handle_visualization(self, line):
         pass
 
     @abc.abstractmethod
@@ -481,13 +490,13 @@ def handle_invocation_time(self, line, invocation):
             "%Y-%m-%d, %H:%M:%S"
         )
 
-    def handle_invocation_inputs(self, line, date):
+    def handle_invocation_inputs(self, line, invocation):
         pass
 
-    def handle_invocation_outputs(self, line, date):
+    def handle_invocation_outputs(self, line, invocation):
         pass
 
-    def handle_visualization(self, line, date):
+    def handle_visualization(self, line):
         pass
 
     def handle_dataset_type(self, line, hda):
@@ -751,13 +760,13 @@ def handle_invocation_time(self, line, invocation):
         content = literal_via_fence(invocation.create_time.strftime("%Y-%m-%d, %H:%M:%S"))
         return (content, True)
 
-    def handle_invocation_inputs(self, line, date):
+    def handle_invocation_inputs(self, line, invocation):
         return ("*Invocation inputs not implemented*", True)
 
-    def handle_invocation_outputs(self, line, date):
+    def handle_invocation_outputs(self, line, invocation):
         return ("*Invocation outputs not implemented*", True)
 
-    def handle_visualization(self, line, date):
+    def handle_visualization(self, line):
         return ("*Visualization inputs not implemented*", True)
 
     def handle_dataset_name(self, line, hda):

From 48d8db45f667b89c7940703bb524a90927cfac4c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 9 Feb 2025 10:23:23 -0500
Subject: [PATCH 151/158] Fix linting

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

diff --git a/lib/galaxy/managers/markdown_util.py b/lib/galaxy/managers/markdown_util.py
index bbb8dc44c46e..70ef74fe943d 100644
--- a/lib/galaxy/managers/markdown_util.py
+++ b/lib/galaxy/managers/markdown_util.py
@@ -921,7 +921,7 @@ def _remap(container, line):
         input_match = re.search(INPUT_LABEL_PATTERN, line)
         step_match = re.search(STEP_LABEL_PATTERN, line)
         target_match = input_match or output_match or step_match
-        if (target_match):
+        if target_match:
             line = line.replace(f"{container}(", f"{container}(invocation_id={invocation.id}, ")
 
         return (line, False)

From 1e5fb0c08d75e6f479a979a4eef60d3ec40fb217 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 9 Feb 2025 10:57:54 -0500
Subject: [PATCH 152/158] Fix parse client test

---
 client/src/components/Markdown/parse.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Markdown/parse.test.js b/client/src/components/Markdown/parse.test.js
index 33e5673cc072..11f7c7e1d51f 100644
--- a/client/src/components/Markdown/parse.test.js
+++ b/client/src/components/Markdown/parse.test.js
@@ -28,11 +28,11 @@ describe("parse.ts", () => {
             expect(sections.length).toBe(4);
             expect(sections[0].name).toBe("galaxy");
             expect(sections[0].content).toBe("job_metrics(job_id=THISFAKEID)");
-            expect(sections[1].name).toBe("default");
+            expect(sections[1].name).toBe("markdown");
             expect(sections[1].content).toBe("DEFAULT_CONTENT");
             expect(sections[2].name).toBe("special");
             expect(sections[2].content).toBe("SPECIAL_CONTENT");
-            expect(sections[3].name).toBe("default");
+            expect(sections[3].name).toBe("markdown");
             expect(sections[3].content).toBe("MORE_DEFAULT_CONTENT");
         });
     });

From fff04e0c4be4139613df8cbdfe15d1ccc860a366 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 9 Feb 2025 13:02:11 -0500
Subject: [PATCH 153/158] Allow invocation identifier in custom report

---
 lib/galaxy_test/api/test_workflows.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/galaxy_test/api/test_workflows.py b/lib/galaxy_test/api/test_workflows.py
index b97cccb9f15f..7eec5128bea9 100644
--- a/lib/galaxy_test/api/test_workflows.py
+++ b/lib/galaxy_test/api/test_workflows.py
@@ -3105,7 +3105,7 @@ def test_workflow_invocation_report_custom(self):
             assert report_json["render_format"] == "markdown"
             markdown_content = report_json["markdown"]
             assert "## Workflow Outputs" in markdown_content
-            assert "\n```galaxy\nhistory_dataset_display(history_dataset_id=" in markdown_content
+            assert "\n```galaxy\nhistory_dataset_display(invocation_id=" in markdown_content
             assert "## Workflow Inputs" in markdown_content
             assert "## About This Report" in markdown_content
 

From 21c89221fcee95713e09f0e1ca148f8fb1455853 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 9 Feb 2025 14:02:38 -0500
Subject: [PATCH 154/158] Transition changes made in #19470 by @ahmedhamidawan

---
 .../Elements/HistoryDatasetDisplay.vue        | 118 ++++++++++--------
 1 file changed, 63 insertions(+), 55 deletions(-)

diff --git a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
index 379749f913e0..b0d5e340891a 100644
--- a/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
+++ b/client/src/components/Markdown/Sections/Elements/HistoryDatasetDisplay.vue
@@ -51,30 +51,29 @@
                 </span>
                 <span>
                     <span>Dataset:</span>
-                    <span class="font-weight-light">{{ metaData.name }}</span>
+                    <span class="font-weight-light">{{ metaData?.name }}</span>
                 </span>
             </b-card-header>
             <b-card-body>
-                <UrlDataProvider v-slot="{ result: itemContent, loading, error }" :url="itemUrl">
-                    <UrlDataProvider v-slot="{ result: datatypesModel, loading: datatypesLoading }" :url="datatypesUrl">
-                        <LoadingSpan v-if="loading" message="Loading Dataset" />
-                        <LoadingSpan v-else-if="datatypesLoading" message="Loading Datatypes" />
-                        <div v-else-if="error">{{ error }}</div>
-                        <div v-else :class="contentClass">
-                            <b-embed
-                                v-if="isSubTypeOfAny(metaData.ext, ['pdf', 'html'], datatypesModel)"
-                                type="iframe"
-                                aspect="16by9"
-                                :src="displayUrl" />
-                            <HistoryDatasetAsImage
-                                v-else-if="
-                                    isSubTypeOfAny(metaData.ext, ['galaxy.datatypes.images.Image'], datatypesModel)
-                                "
-                                :dataset-id="datasetId" />
-                            <div v-else-if="itemContent.item_data">
-                                <div v-if="isSubTypeOfAny(metaData.ext, ['tabular'], datatypesModel)">
-                                    <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
-                                    <div v-else-if="metaError">{{ metaError }}</div>
+                <UrlDataProvider v-slot="{ result: itemContent, loading: datasetLoading, error }" :url="itemUrl">
+                    <LoadingSpan v-if="datasetLoading" message="Loading Dataset" />
+                    <LoadingSpan v-else-if="datatypesMapperStore.loading" message="Loading Datatypes" />
+                    <div v-else-if="error">{{ error }}</div>
+                    <div v-else-if="!datatypesMapper">Datatypes not loaded.</div>
+                    <div v-else :class="contentClass(metaData?.ext)">
+                        <b-embed
+                            v-if="datatypesMapper.isSubTypeOfAny(metaData?.ext, ['pdf', 'html'])"
+                            type="iframe"
+                            aspect="16by9"
+                            :src="displayUrl" />
+                        <HistoryDatasetAsImage
+                            v-else-if="datatypesMapper.isSubTypeOfAny(metaData?.ext, ['galaxy.datatypes.images.Image'])"
+                            :args="args" />
+                        <div v-else-if="itemContent.item_data">
+                            <div v-if="datatypesMapper.isSubTypeOfAny(metaData?.ext, ['tabular'])">
+                                <LoadingSpan v-if="metaLoading" message="Loading Metadata" />
+                                <div v-else-if="metaError">{{ metaError }}</div>
+                                <div v-else>
                                     <b-table
                                         id="tabular-dataset-table"
                                         sticky-header
@@ -85,15 +84,21 @@
                                         :current-page="currentPage"
                                         :fields="getFields(metaData)"
                                         :items="getItems(itemContent.item_data, metaData)" />
+                                    <b-pagination
+                                        v-model="currentPage"
+                                        align="center"
+                                        :total-rows="getItems(itemContent.item_data, metaData).length"
+                                        :per-page="perPage"
+                                        aria-controls="tabular-dataset-table" />
                                 </div>
-                                <pre v-else>
-                                    <code class="word-wrap-normal">{{ itemContent.item_data }}</code>
-                                </pre>
                             </div>
-                            <div v-else>No content found.</div>
-                            <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+                            <pre v-else>
+                                <code class="word-wrap-normal">{{ itemContent.item_data }}</code>
+                            </pre>
                         </div>
-                    </UrlDataProvider>
+                        <div v-else>No content found.</div>
+                        <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+                    </div>
                 </UrlDataProvider>
             </b-card-body>
         </b-card>
@@ -101,41 +106,46 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 
-import { DatatypesMapperModel } from "@/components/Datatypes/model";
 import { UrlDataProvider } from "@/components/providers/UrlDataProvider";
 import { getAppRoot } from "@/onload/loadConfig";
+import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 
 import HistoryDatasetAsImage from "./HistoryDatasetAsImage.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
+// Props
 const props = defineProps<{
     datasetId: string;
     embedded?: boolean;
 }>();
 
+// Reactive state
+const currentPage = ref(1);
 const expanded = ref(false);
+const perPage = ref(100);
 
-const contentClass = computed(() => (expanded.value ? "embedded-dataset-expanded" : "embedded-dataset"));
+// Store
+const datatypesMapperStore = useDatatypesMapperStore();
+const { datatypesMapper } = datatypesMapperStore;
 
-const datatypesUrl = computed(() => "/api/datatypes/types_and_mapping");
+// Computed
 const downloadUrl = computed(() => `${getAppRoot()}dataset/display?dataset_id=${props.datasetId}`);
 const displayUrl = computed(() => `${getAppRoot()}datasets/${props.datasetId}/display/?preview=True`);
 const importUrl = computed(() => `${getAppRoot()}dataset/imp?dataset_id=${props.datasetId}`);
 const itemUrl = computed(() => `/api/datasets/${props.datasetId}/get_content_as_text`);
 const metaUrl = computed(() => `/api/datasets/${props.datasetId}`);
 
-function onExpand() {
-    expanded.value = !expanded.value;
-}
-
-function isSubTypeOfAny(child: string, parents: string[], datatypesModel: any) {
-    const datatypesMapper = new DatatypesMapperModel(datatypesModel);
-    return datatypesMapper.isSubTypeOfAny(child, parents);
-}
+// Methods
+const contentClass = (datasetType: string) => {
+    if (datatypesMapper?.isSubTypeOfAny(datasetType, ["tabular"])) {
+        return "";
+    }
+    return expanded.value ? "embedded-dataset-expanded" : "embedded-dataset";
+};
 
-function getFields(metaData: any) {
+const getFields = (metaData: any) => {
     const fields = [];
     const columnNames = metaData.metadata_column_names || [];
     const columnCount = metaData.metadata_columns;
@@ -147,10 +157,10 @@ function getFields(metaData: any) {
         });
     }
     return fields;
-}
+};
 
-function getItems(textData: string, metaData: any) {
-    const tableData: any = [];
+const getItems = (textData: string, metaData: any) => {
+    const tableData: any[] = [];
     const delimiter = metaData.metadata_delimiter || "\t";
     const comments = metaData.metadata_comment_lines || 0;
     const lines = textData.split("\n");
@@ -172,16 +182,14 @@ function getItems(textData: string, metaData: any) {
         }
     });
     return tableData;
-}
-</script>
+};
+
+const onExpand = () => {
+    expanded.value = !expanded.value;
+};
 
-<style scoped>
-.embedded-dataset {
-    max-height: 20rem;
-    overflow-y: auto;
-}
-.embedded-dataset-expanded {
-    max-height: 40rem;
-    overflow-y: auto;
-}
-</style>
+// Lifecycle hooks
+onMounted(() => {
+    datatypesMapperStore.createMapper();
+});
+</script>

From 68a79a435074f642389547e9bf02a328fa6430f9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Feb 2025 11:12:50 -0500
Subject: [PATCH 155/158] Fix unit tests

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

diff --git a/test/unit/workflows/test_workflow_markdown.py b/test/unit/workflows/test_workflow_markdown.py
index 381fc4069506..3fe75341f8c1 100644
--- a/test/unit/workflows/test_workflow_markdown.py
+++ b/test/unit/workflows/test_workflow_markdown.py
@@ -17,7 +17,7 @@ def test_workflow_section_expansion():
 """
     galaxy_markdown = resolved_markdown(workflow_markdown)
     assert "## Workflow\n" in galaxy_markdown
-    assert "```galaxy\nworkflow_display(workflow_id=342,workflow_checkpoint=0)\n```\n" in galaxy_markdown
+    assert "```galaxy\nworkflow_display(workflow_id=342, workflow_checkpoint=0)\n```\n" in galaxy_markdown
 
 
 def test_inputs_section_expansion():
@@ -29,7 +29,7 @@ def test_inputs_section_expansion():
 """
     galaxy_markdown = resolved_markdown(workflow_markdown)
     assert "## Workflow Inputs" in galaxy_markdown
-    assert "```galaxy\nhistory_dataset_display(history_dataset_id=567)\n" in galaxy_markdown
+    assert "```galaxy\ninvocation_outputs(invocation_id=44)\n" in galaxy_markdown
     assert len(galaxy_markdown.split("```")) == 3
 
 
@@ -42,7 +42,7 @@ def test_outputs_section_expansion():
 """
     galaxy_markdown = resolved_markdown(workflow_markdown)
     assert "## Workflow Outputs" in galaxy_markdown
-    assert "```galaxy\nhistory_dataset_display(history_dataset_id=563)" in galaxy_markdown
+    assert "```galaxy\ninvocation_outputs(invocation_id=44)" in galaxy_markdown
 
 
 def test_input_reference_mapping():
@@ -54,7 +54,7 @@ def test_input_reference_mapping():
 ```
 """
     galaxy_markdown = resolved_markdown(workflow_markdown)
-    assert "```galaxy\nhistory_dataset_peek(history_dataset_id=567)\n```" in galaxy_markdown
+    assert "```galaxy\nhistory_dataset_peek(invocation_id=44, input=input1)\n```" in galaxy_markdown
 
 
 def test_invocation_time():
@@ -78,7 +78,7 @@ def test_output_reference_mapping():
 ```
 """
     galaxy_markdown = resolved_markdown(workflow_markdown)
-    assert "```galaxy\nhistory_dataset_as_image(history_dataset_id=563)\n```" in galaxy_markdown
+    assert "```galaxy\nhistory_dataset_as_image(invocation_id=44, output=output_label)\n```" in galaxy_markdown
 
 
 def resolved_markdown(workflow_markdown):

From 9728a864e36fb4eab59bf07fe3c16ba11c6cab99 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 10 Feb 2025 12:34:55 -0500
Subject: [PATCH 156/158] Fix invocation output unit test

---
 test/unit/workflows/test_workflow_markdown.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/workflows/test_workflow_markdown.py b/test/unit/workflows/test_workflow_markdown.py
index 3fe75341f8c1..8bd9389c3e9d 100644
--- a/test/unit/workflows/test_workflow_markdown.py
+++ b/test/unit/workflows/test_workflow_markdown.py
@@ -29,7 +29,7 @@ def test_inputs_section_expansion():
 """
     galaxy_markdown = resolved_markdown(workflow_markdown)
     assert "## Workflow Inputs" in galaxy_markdown
-    assert "```galaxy\ninvocation_outputs(invocation_id=44)\n" in galaxy_markdown
+    assert "```galaxy\ninvocation_inputs(invocation_id=44)\n" in galaxy_markdown
     assert len(galaxy_markdown.split("```")) == 3
 
 

From e248d5c4a41a431de50726b7bca26acffa7970a1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 13 Feb 2025 13:41:24 -0500
Subject: [PATCH 157/158] Modularize data attachment selectors

---
 .../components/Markdown/Editor/CellAdd.vue    |  2 +-
 .../Markdown/Editor/CellConfigure.vue         | 24 +++++-
 .../configurations/ConfigureSelector.vue      | 73 ++++++++++++++++++
 .../configurations/ConfigureVisualization.vue | 76 +++----------------
 4 files changed, 106 insertions(+), 69 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/configurations/ConfigureSelector.vue

diff --git a/client/src/components/Markdown/Editor/CellAdd.vue b/client/src/components/Markdown/Editor/CellAdd.vue
index 7823f6bcddf7..f3e1112bf5ba 100644
--- a/client/src/components/Markdown/Editor/CellAdd.vue
+++ b/client/src/components/Markdown/Editor/CellAdd.vue
@@ -18,7 +18,7 @@
                                 :key="optionIndex"
                                 :title="option.title"
                                 :description="option.description"
-                                @click="$emit('click', { ...option.cell, toggle: true })" />
+                                @click="$emit('click', { ...option.cell, configure: false, toggle: true })" />
                         </div>
                     </div>
                 </div>
diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
index 7eb163c3391f..91bfec185f87 100644
--- a/client/src/components/Markdown/Editor/CellConfigure.vue
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -9,10 +9,11 @@
                 <FontAwesomeIcon :icon="faTimes" class="fa-lg" />
             </BButton>
         </div>
+        <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
         <ConfigureGalaxy v-if="name === 'galaxy'" :content="content" @change="$emit('change', $event)" />
         <ConfigureVisualization
             v-else-if="name === 'visualization'"
-            :content="content"
+            :content-object="contentObject"
             @change="$emit('change', $event)" />
         <b-alert v-else variant="warning" show> Data cannot be linked to this cell type. </b-alert>
     </div>
@@ -21,11 +22,12 @@
 <script setup lang="ts">
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref, watch } from "vue";
 
 import ConfigureGalaxy from "./configurations/ConfigureGalaxy.vue";
 import ConfigureVisualization from "./configurations/ConfigureVisualization.vue";
 
-defineProps<{
+const props = defineProps<{
     name: string;
     content: string;
 }>();
@@ -34,4 +36,22 @@ defineEmits<{
     (e: "cancel"): void;
     (e: "change", content: string): void;
 }>();
+
+const contentObject = ref();
+const errorMessage = ref("");
+
+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/configurations/ConfigureSelector.vue b/client/src/components/Markdown/Editor/configurations/ConfigureSelector.vue
new file mode 100644
index 000000000000..0f6b87479951
--- /dev/null
+++ b/client/src/components/Markdown/Editor/configurations/ConfigureSelector.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="my-4">
+        <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
+        <div v-else>
+            <label class="form-label">Select a dataset:</label>
+            <Multiselect v-model="currentValue" label="name" :options="options" @search-change="search" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from "lodash";
+import { computed, type Ref, ref } from "vue";
+import Multiselect from "vue-multiselect";
+
+import { GalaxyApi } from "@/api";
+
+const DELAY = 300;
+
+interface OptionType {
+    id: string | null | undefined;
+    name: string | null | undefined;
+}
+
+interface ContentType {
+    dataset_id: string;
+    dataset_name?: string;
+}
+
+const props = defineProps<{
+    contentObject: ContentType;
+}>();
+
+const emit = defineEmits<{
+    (e: "change", content: OptionType): void;
+}>();
+
+const errorMessage = ref("");
+const options: Ref<Array<OptionType>> = ref([]);
+
+const currentValue = computed({
+    get: () => ({
+        id: props.contentObject?.dataset_id,
+        name: props.contentObject?.dataset_name || props.contentObject?.dataset_id,
+    }),
+    set: (newValue: OptionType) => {
+        emit("change", newValue);
+    },
+});
+
+const search = debounce(async (query: string = "") => {
+    if (!errorMessage.value) {
+        const { data, error } = await GalaxyApi().GET("/api/datasets", {
+            params: {
+                query: {
+                    q: ["name-contains"],
+                    qv: [query],
+                    offset: 0,
+                    limit: 50,
+                },
+            },
+        });
+        if (error) {
+            errorMessage.value = error.err_msg;
+        } else {
+            errorMessage.value = "";
+            options.value = data.map((d) => ({ id: d.id, name: d.name }));
+        }
+    }
+}, DELAY);
+
+search();
+</script>
diff --git a/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue b/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
index eb0a8e6d8e52..14765c6c8362 100644
--- a/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
+++ b/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
@@ -1,21 +1,14 @@
 <template>
-    <div class="my-4">
-        <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
-        <div v-else>
-            <label class="form-label">Select a dataset:</label>
-            <Multiselect v-model="currentValue" label="name" :options="options" @search-change="search" />
-        </div>
-    </div>
+    <ConfigureSelector :content-object="contentObject" @change="onChange($event)" />
 </template>
 
 <script setup lang="ts">
-import { debounce } from "lodash";
-import { computed, type Ref, ref, watch } from "vue";
-import Multiselect from "vue-multiselect";
+import ConfigureSelector from "./ConfigureSelector.vue";
 
-import { GalaxyApi } from "@/api";
-
-const DELAY = 300;
+interface ContentType {
+    dataset_id: string;
+    dataset_name?: string;
+}
 
 interface OptionType {
     id: string | null | undefined;
@@ -23,64 +16,15 @@ interface OptionType {
 }
 
 const props = defineProps<{
-    content: string;
+    contentObject: ContentType;
 }>();
 
 const emit = defineEmits<{
     (e: "change", content: string): void;
 }>();
 
-const errorMessage = ref("");
-const options: Ref<Array<OptionType>> = ref([]);
-
-const currentContent = ref();
-
-const currentValue = computed({
-    get: () => ({
-        id: currentContent.value?.dataset_id,
-        name: currentContent.value?.dataset_name || currentContent.value?.dataset_id,
-    }),
-    set: (newValue) => {
-        const newValues = { ...currentContent.value, dataset_id: newValue.id, dataset_name: newValue.name };
-        emit("change", JSON.stringify(newValues, null, 4));
-    },
-});
-
-const search = debounce(async (query: string = "") => {
-    if (!errorMessage.value) {
-        const { data, error } = await GalaxyApi().GET("/api/datasets", {
-            params: {
-                query: {
-                    q: ["name-contains"],
-                    qv: [query],
-                    offset: 0,
-                    limit: 50,
-                },
-            },
-        });
-        if (error) {
-            errorMessage.value = error.err_msg;
-        } else {
-            errorMessage.value = "";
-            options.value = data.map((d) => ({ id: d.id, name: d.name }));
-        }
-    }
-}, DELAY);
-
-function parseContent() {
-    try {
-        currentContent.value = JSON.parse(props.content);
-        errorMessage.value = "";
-    } catch (e) {
-        errorMessage.value = `Failed to parse: ${e}`;
-    }
+function onChange(newValue: OptionType) {
+    const newValues = { ...props.contentObject, dataset_id: newValue.id, dataset_name: newValue.name };
+    emit("change", JSON.stringify(newValues, null, 4));
 }
-
-parseContent();
-search();
-
-watch(
-    () => props.content,
-    () => parseContent()
-);
 </script>

From 3643b06dd8b735e8280e3018a087e7c034694cd3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sat, 15 Feb 2025 15:39:44 -0500
Subject: [PATCH 158/158] Add handler for Galaxy cells

---
 .../Markdown/Editor/CellConfigure.vue         | 28 ++--------
 .../Editor/configurations/ConfigureGalaxy.vue | 52 +++++++++++++-----
 .../configurations/ConfigureSelector.vue      | 53 ++++++++++---------
 .../configurations/ConfigureVisualization.vue | 42 ++++++++++-----
 .../Markdown/Editor/configurations/types.ts   | 14 +++++
 5 files changed, 116 insertions(+), 73 deletions(-)
 create mode 100644 client/src/components/Markdown/Editor/configurations/types.ts

diff --git a/client/src/components/Markdown/Editor/CellConfigure.vue b/client/src/components/Markdown/Editor/CellConfigure.vue
index 91bfec185f87..440f88f46bca 100644
--- a/client/src/components/Markdown/Editor/CellConfigure.vue
+++ b/client/src/components/Markdown/Editor/CellConfigure.vue
@@ -9,11 +9,10 @@
                 <FontAwesomeIcon :icon="faTimes" class="fa-lg" />
             </BButton>
         </div>
-        <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
         <ConfigureGalaxy v-if="name === 'galaxy'" :content="content" @change="$emit('change', $event)" />
         <ConfigureVisualization
             v-else-if="name === 'visualization'"
-            :content-object="contentObject"
+            :content="content"
             @change="$emit('change', $event)" />
         <b-alert v-else variant="warning" show> Data cannot be linked to this cell type. </b-alert>
     </div>
@@ -22,12 +21,11 @@
 <script setup lang="ts">
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { ref, watch } from "vue";
 
-import ConfigureGalaxy from "./configurations/ConfigureGalaxy.vue";
-import ConfigureVisualization from "./configurations/ConfigureVisualization.vue";
+import ConfigureGalaxy from "./Configurations/ConfigureGalaxy.vue";
+import ConfigureVisualization from "./Configurations/ConfigureVisualization.vue";
 
-const props = defineProps<{
+defineProps<{
     name: string;
     content: string;
 }>();
@@ -36,22 +34,4 @@ defineEmits<{
     (e: "cancel"): void;
     (e: "change", content: string): void;
 }>();
-
-const contentObject = ref();
-const errorMessage = ref("");
-
-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/configurations/ConfigureGalaxy.vue b/client/src/components/Markdown/Editor/configurations/ConfigureGalaxy.vue
index a856b70104bf..56bbfc0ce911 100644
--- a/client/src/components/Markdown/Editor/configurations/ConfigureGalaxy.vue
+++ b/client/src/components/Markdown/Editor/configurations/ConfigureGalaxy.vue
@@ -1,22 +1,50 @@
 <template>
-    <div class="p-4 bg-white mb-2">
-        <div class="mb-3">
-            <label class="form-label">Workflow</label>
-            <input type="text" class="form-control" />
-        </div>
-        <div class="mb-3">
-            <label class="form-label">History Dataset</label>
-            <input type="text" class="form-control" />
-        </div>
-    </div>
+    <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
+    <ConfigureSelector v-else type="datasets" @change="onChange($event)" />
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { type Ref, ref, watch } from "vue";
+
+import type { OptionType } from "@/components/Markdown/Editor/Configurations/types";
+import { getArgs } from "@/components/Markdown/parse";
+
+import ConfigureSelector from "./ConfigureSelector.vue";
+
+const props = defineProps<{
     content: string;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
     (e: "change", content: string): void;
 }>();
+
+interface ObjectType {
+    args: Record<string, any>;
+    name: string;
+}
+
+const contentObject: Ref<ObjectType | undefined> = ref();
+const errorMessage = ref("");
+
+function onChange(newValue: OptionType) {
+    const newValues = { ...contentObject.value?.args, history_dataset_id: newValue.id };
+    const newContent = Object.entries(newValues).map(([key, value]) => `${key}=${value}`).join(" ");
+    emit("change", `${contentObject.value?.name}(${newContent})`);
+}
+
+function parseContent() {
+    try {
+        contentObject.value = getArgs(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/configurations/ConfigureSelector.vue b/client/src/components/Markdown/Editor/configurations/ConfigureSelector.vue
index 0f6b87479951..9da6e43fa1be 100644
--- a/client/src/components/Markdown/Editor/configurations/ConfigureSelector.vue
+++ b/client/src/components/Markdown/Editor/configurations/ConfigureSelector.vue
@@ -15,24 +15,18 @@ import Multiselect from "vue-multiselect";
 
 import { GalaxyApi } from "@/api";
 
-const DELAY = 300;
-
-interface OptionType {
-    id: string | null | undefined;
-    name: string | null | undefined;
-}
+import type { ApiResponse, OptionType } from "./types";
 
-interface ContentType {
-    dataset_id: string;
-    dataset_name?: string;
-}
+const DELAY = 300;
 
 const props = defineProps<{
-    contentObject: ContentType;
+    type: "datasets" | "workflows";
+    name?: string;
+    id?: string;
 }>();
 
 const emit = defineEmits<{
-    (e: "change", content: OptionType): void;
+    (e: "change", newValue: OptionType): void;
 }>();
 
 const errorMessage = ref("");
@@ -40,8 +34,8 @@ const options: Ref<Array<OptionType>> = ref([]);
 
 const currentValue = computed({
     get: () => ({
-        id: props.contentObject?.dataset_id,
-        name: props.contentObject?.dataset_name || props.contentObject?.dataset_id,
+        id: props.name,
+        name: props.name || props.id,
     }),
     set: (newValue: OptionType) => {
         emit("change", newValue);
@@ -50,24 +44,33 @@ const currentValue = computed({
 
 const search = debounce(async (query: string = "") => {
     if (!errorMessage.value) {
-        const { data, error } = await GalaxyApi().GET("/api/datasets", {
-            params: {
-                query: {
-                    q: ["name-contains"],
-                    qv: [query],
-                    offset: 0,
-                    limit: 50,
-                },
-            },
-        });
+        const { data, error } = await getDatasets(query);
         if (error) {
             errorMessage.value = error.err_msg;
         } else {
             errorMessage.value = "";
-            options.value = data.map((d) => ({ id: d.id, name: d.name }));
+            if (data) {
+                options.value = data.map((d) => ({ id: d.id, name: d.name }));
+            } else {
+                options.value = [];
+            }
         }
     }
 }, DELAY);
 
+async function getDatasets(query: string = ""): Promise<ApiResponse> {
+    const { data, error } = await GalaxyApi().GET("/api/datasets", {
+        params: {
+            query: {
+                q: ["name-contains"],
+                qv: [query],
+                offset: 0,
+                limit: 50,
+            },
+        },
+    });
+    return { data, error };
+}
+
 search();
 </script>
diff --git a/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue b/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
index 14765c6c8362..54fb38db2a69 100644
--- a/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
+++ b/client/src/components/Markdown/Editor/configurations/ConfigureVisualization.vue
@@ -1,30 +1,48 @@
 <template>
-    <ConfigureSelector :content-object="contentObject" @change="onChange($event)" />
+    <b-alert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</b-alert>
+    <ConfigureSelector
+        v-else
+        :id="contentObject.dataset_id"
+        :name="contentObject.dataset_name"
+        type="datasets"
+        @change="onChange($event)" />
 </template>
 
 <script setup lang="ts">
-import ConfigureSelector from "./ConfigureSelector.vue";
+import { ref, watch } from "vue";
 
-interface ContentType {
-    dataset_id: string;
-    dataset_name?: string;
-}
+import type { OptionType } from "@/components/Markdown/Editor/Configurations/types";
 
-interface OptionType {
-    id: string | null | undefined;
-    name: string | null | undefined;
-}
+import ConfigureSelector from "./ConfigureSelector.vue";
 
 const props = defineProps<{
-    contentObject: ContentType;
+    content: string;
 }>();
 
 const emit = defineEmits<{
     (e: "change", content: string): void;
 }>();
 
+const contentObject = ref();
+const errorMessage = ref("");
+
 function onChange(newValue: OptionType) {
-    const newValues = { ...props.contentObject, dataset_id: newValue.id, dataset_name: newValue.name };
+    const newValues = { ...contentObject.value, dataset_id: newValue.id, dataset_name: newValue.name };
     emit("change", JSON.stringify(newValues, null, 4));
 }
+
+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/configurations/types.ts b/client/src/components/Markdown/Editor/configurations/types.ts
new file mode 100644
index 000000000000..8daf51db0e01
--- /dev/null
+++ b/client/src/components/Markdown/Editor/configurations/types.ts
@@ -0,0 +1,14 @@
+export interface ApiResponse {
+    data: Array<any> | undefined;
+    error?: { err_msg: string };
+}
+
+export interface ContentType {
+    dataset_id: string;
+    dataset_name?: string;
+}
+
+export interface OptionType {
+    id: string | null | undefined;
+    name: string | null | undefined;
+}