Improve markdown editor modularity and structure

client/src/components/Common/VegaWrapper.vue

@@ -3,14 +3,14 @@
         <b-alert v-if="errorMessage" class="p-2" variant="danger" show>
             {{ errorMessage }}
         </b-alert>
-        <div ref="chartContainer" :style="style" />
+        <div ref="chartContainer" :class="fillWidth && 'w-100'" />
     </div>
 </template>
 
 <script setup lang="ts">
 import { useResizeObserver } from "@vueuse/core";
 import embed, { type VisualizationSpec } from "vega-embed";
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 export interface VisSpec {
     spec: VisualizationSpec;
@@ -21,20 +21,14 @@ const props = withDefaults(defineProps<VisSpec>(), {
     fillWidth: true,
 });
 
-const style = computed(() => {
-    if (props.fillWidth) {
-        return { width: "100%" };
-    }
-    return {};
-});
-
 const chartContainer = ref<HTMLDivElement | null>(null);
 const errorMessage = ref<string>("");
 
 let vegaView: any;
 
 async function embedChart() {
     try {
+        await nextTick();
         if (vegaView) {
             vegaView.finalize();
         }
@@ -48,13 +42,16 @@ async function embedChart() {
     }
 }
 
-watch(props, embedChart, { deep: true, immediate: true });
+watch(props, embedChart, { deep: true });
+
 useResizeObserver(chartContainer, () => {
     if (vegaView) {
         vegaView.resize();
     }
 });
 
+onMounted(() => embedChart());
+
 // Cleanup the chart when the component is unmounted
 onBeforeUnmount(() => {
     if (vegaView) {

client/src/components/Markdown/Editor/CellAdd.test.js

@@ -8,19 +8,11 @@ import DelayedInput from "@/components/Common/DelayedInput.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
 jest.mock("./templates", () => ({
-    cellTemplates: [
-        {
-            name: "Category 1",
-            templates: [
-                { title: "Option A", description: "Desc A", cell: { id: 1 } },
-                { title: "Option B", description: "Desc B", cell: { id: 2 } },
-            ],
-        },
-        {
-            name: "Category 2",
-            templates: [{ title: "Option C", description: "Desc C", cell: { id: 3 } }],
-        },
+    "Category 1": [
+        { title: "Option A", description: "Desc A", cell: { id: 1 } },
+        { title: "Option B", description: "Desc B", cell: { id: 2 } },
     ],
+    "Category 2": [{ title: "Option C", description: "Desc C", cell: { id: 3 } }],
 }));
 
 const createContainer = (tag = "div") => {

client/src/components/Markdown/Editor/CellAdd.vue

@@ -4,18 +4,19 @@
         <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 overflow-auto">
-                <div v-if="filteredTemplates.length > 0">
-                    <div v-for="(category, categoryIndex) of filteredTemplates" :key="categoryIndex">
+                <div v-if="Object.keys(filteredTemplates).length > 0">
+                    <div v-for="(templates, categoryName) of filteredTemplates" :key="categoryName">
                         <hr class="solid m-0" />
                         <span class="d-flex justify-content-between">
-                            <small class="my-1 mx-3 text-info">{{ category.name }}</small>
+                            <small class="my-1 mx-3 text-info">{{ categoryName }}</small>
                         </span>
-                        <div v-if="category.templates.length > 0" class="cell-add-options popper-close">
+                        <div v-if="templates.length > 0" class="cell-add-options popper-close">
                             <CellOption
-                                v-for="(option, optionIndex) of category.templates"
+                                v-for="(option, optionIndex) of templates"
                                 :key="optionIndex"
                                 :title="option.title"
                                 :description="option.description"
+                                :logo="option.logo"
                                 @click="$emit('click', { configure: false, toggle: true, ...option.cell })" />
                         </div>
                     </div>
@@ -31,8 +32,8 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { BAlert } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-import { cellTemplates } from "./templates";
-import type { CellType, TemplateCategory } from "./types";
+import cellTemplates from "./templates.yml";
+import type { CellType, TemplateEntry } from "./types";
 
 import CellButton from "./CellButton.vue";
 import CellOption from "./CellOption.vue";
@@ -46,20 +47,22 @@ defineEmits<{
 const buttonRef = ref();
 const query = ref("");
 
+const allTemplates = computed(() => {
+    const result = { ...(cellTemplates as Record<string, Array<TemplateEntry>>) };
+    return result;
+});
+
 const filteredTemplates = computed(() => {
-    const filteredCategories: Array<TemplateCategory> = [];
-    cellTemplates.forEach((category) => {
-        const matchedTemplates = category.templates.filter(
+    const filteredCategories: Record<string, TemplateEntry[]> = {};
+    Object.entries(allTemplates.value).forEach(([categoryName, templates]) => {
+        const matchedTemplates = templates.filter(
             (template) =>
-                category.name.toLowerCase().includes(query.value.toLowerCase()) ||
+                categoryName.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({
-                name: category.name,
-                templates: matchedTemplates,
-            });
+            filteredCategories[categoryName] = matchedTemplates;
         }
     });
     return filteredCategories;

client/src/components/Markdown/Editor/CellEditor.vue

@@ -6,9 +6,10 @@
             <CellWrapper
                 :cell-index="cellIndex"
                 :cell-total="cells.length"
-                :name="cell.name"
                 :content="cell.content"
                 :configure="cell.configure"
+                :labels="labels"
+                :name="cell.name"
                 :toggle="cell.toggle"
                 @configure="onConfigure(cellIndex)"
                 @change="onChange(cellIndex, $event)"
@@ -27,13 +28,14 @@ import { nextTick, ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
-import type { CellType } from "./types";
+import type { CellType, WorkflowLabel } from "./types";
 
 import CellAdd from "./CellAdd.vue";
 import CellWrapper from "./CellWrapper.vue";
 
 const props = defineProps<{
     markdownText: string;
+    labels?: Array<WorkflowLabel>;
 }>();
 
 const emit = defineEmits(["update"]);

client/src/components/Markdown/Editor/CellOption.vue

@@ -4,19 +4,24 @@
             <div class="font-weight-bold">{{ title }}</div>
             <small v-if="description" class="d-inline-block text-wrap text-break">{{ description }}</small>
         </div>
-        <div v-if="icon" class="my-2 mx-3 align-self-center">
-            <FontAwesomeIcon :icon="icon" />
+        <div v-if="icon" class="my-2 mx-3 align-self-start">
+            <FontAwesomeIcon :icon="icon" class="cell-option-icon" />
+        </div>
+        <div v-else-if="logo" class="my-2 mx-3 align-self-start">
+            <Img class="cell-option-logo" :src="logo" :alt="title" />
         </div>
     </span>
 </template>
 
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import type { IconDefinition } from "font-awesome-6";
 
 defineProps<{
     title: string;
-    description?: string;
-    icon?: any;
+    description: string;
+    icon?: IconDefinition;
+    logo?: string;
 }>();
 
 defineEmits<{
@@ -38,5 +43,11 @@ defineEmits<{
     small {
         color: $text-muted;
     }
+    .cell-option-icon {
+        font-size: 1rem;
+    }
+    .cell-option-logo {
+        width: 2rem;
+    }
 }
 </style>

client/src/components/Markdown/Editor/CellWrapper.vue

@@ -8,13 +8,12 @@
                 <CellButton v-if="toggle" title="Collapse" :icon="faAngleDoubleUp" />
                 <CellButton v-else title="Expand" :icon="faAngleDoubleDown" />
             </div>
-            <div class="w-100">
-                <div class="m-2">
-                    <MarkdownDefault v-if="name === 'markdown'" :content="content" />
-                    <MarkdownGalaxy v-else-if="name === 'galaxy'" :content="content" />
-                    <b-alert v-else variant="danger" show> This cell type `{{ name }}` is not available. </b-alert>
-                </div>
-            </div>
+            <SectionWrapper
+                class="m-2 w-100"
+                :name="name"
+                :content="content"
+                :labels="labels"
+                @change="$emit('change', $event)" />
         </div>
         <div v-if="toggle" class="d-flex">
             <div class="d-flex flex-column" :class="{ 'cell-wrapper-hover': hover }">
@@ -34,9 +33,16 @@
                     v-if="name === 'galaxy' && configure"
                     :name="name"
                     :content="content"
+                    :labels="labels"
                     @cancel="$emit('configure')"
                     @change="handleConfigure($event)" />
-                <CellCode :key="name" class="mt-1" :value="content" :mode="mode" @change="$emit('change', $event)" />
+                <CellCode
+                    :key="name"
+                    class="mt-1"
+                    :value="content"
+                    :max-lines="30"
+                    :mode="mode"
+                    @change="$emit('change', $event)" />
                 <small class="cell-wrapper-type position-absolute">
                     {{ VALID_TYPES.includes(name) ? name : "unknown" }}
                 </small>
@@ -49,12 +55,13 @@
 import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { computed, ref } from "vue";
 
-import MarkdownDefault from "../Sections/MarkdownDefault.vue";
-import MarkdownGalaxy from "../Sections/MarkdownGalaxy.vue";
+import type { WorkflowLabel } from "./types";
+
 import CellAction from "./CellAction.vue";
 import CellButton from "./CellButton.vue";
 import CellCode from "./CellCode.vue";
 import ConfigureGalaxy from "./Configurations/ConfigureGalaxy.vue";
+import SectionWrapper from "@/components/Markdown/Sections/SectionWrapper.vue";
 
 const VALID_TYPES = ["galaxy", "markdown", "vega", "visualization", "vitessce"];
 
@@ -63,6 +70,7 @@ const props = defineProps<{
     cellTotal: number;
     configure?: boolean;
     content: string;
+    labels?: Array<WorkflowLabel>;
     name: string;
     toggle?: boolean;
 }>();

client/src/components/Markdown/Editor/Configurations/ConfigureGalaxy.vue

@@ -5,7 +5,7 @@
         :argument-type="requirement"
         :argument-name="contentObject?.name"
         :argument-payload="contentObject?.args"
-        :useLabels="false"
+        :labels="labels"
         @onInsert="$emit('change', $event)"
         @onCancel="$emit('cancel')" />
     <b-alert v-else v-localize variant="info" show>
@@ -16,14 +16,16 @@
 <script setup lang="ts">
 import { computed, type Ref, ref, watch } from "vue";
 
+import type { WorkflowLabel } from "@/components/Markdown/Editor/types";
 import { getArgs } from "@/components/Markdown/parse";
 
-import REQUIREMENTS from "./requirements";
+import REQUIREMENTS from "./requirements.yml";
 
 import MarkdownDialog from "@/components/Markdown/MarkdownDialog.vue";
 
 const props = defineProps<{
     content: string;
+    labels?: Array<WorkflowLabel>;
 }>();
 
 defineEmits<{
@@ -43,7 +45,7 @@ const requirement = computed(() => {
     const name = contentObject.value?.name || "";
     if (name) {
         for (const [key, values] of Object.entries(REQUIREMENTS)) {
-            if (values.includes(name)) {
+            if (Array.isArray(values) && values.includes(name)) {
                 return key;
             }
         }

client/src/components/Markdown/Editor/Configurations/requirements.yml

@@ -0,0 +1,28 @@
+history_dataset_collection_id:
+  - history_dataset_collection_display
+history_dataset_id:
+  - history_dataset_display
+  - history_dataset_info
+  - history_dataset_index
+  - history_dataset_type
+  - history_dataset_embedded
+  - history_dataset_as_table
+  - history_dataset_as_image
+  - history_dataset_link
+  - history_dataset_name
+  - history_dataset_peek
+history_id:
+  - history_link
+invocation_id:
+  - invocation_inputs
+  - invocation_outputs
+  - invocation_time
+job_id:
+  - job_metrics
+  - job_parameters
+  - tool_stderr
+  - tool_stdout
+workflow_id:
+  - workflow_display
+  - workflow_image
+  - workflow_license