From 009a17f0fcb1d0d643d12a60caebee5138ff9e53 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Tue, 30 Jan 2024 22:53:49 -0500
Subject: [PATCH 1/3] Refactor MarkdownDialog.vue to ts+composition.

---
 .../components/Markdown/MarkdownDialog.vue    | 436 +++++++++---------
 1 file changed, 220 insertions(+), 216 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownDialog.vue b/client/src/components/Markdown/MarkdownDialog.vue
index 648c9696c4f7..9473fdc41634 100644
--- a/client/src/components/Markdown/MarkdownDialog.vue
+++ b/client/src/components/Markdown/MarkdownDialog.vue
@@ -1,3 +1,223 @@
+<script setup lang="ts">
+import axios from "axios";
+import BootstrapVue from "bootstrap-vue";
+import Vue, { computed, ref } from "vue";
+
+import { getAppRoot } from "@/onload/loadConfig";
+import { getCurrentGalaxyHistory } from "@/utils/data";
+
+import MarkdownSelector from "./MarkdownSelector.vue";
+import MarkdownVisualization from "./MarkdownVisualization.vue";
+import DataDialog from "@/components/DataDialog/DataDialog.vue";
+import BasicSelectionDialog from "@/components/SelectionDialog/BasicSelectionDialog.vue";
+import DatasetCollectionDialog from "@/components/SelectionDialog/DatasetCollectionDialog.vue";
+
+Vue.use(BootstrapVue);
+
+interface MarkdownDialogProps {
+    argumentName?: string;
+    argumentType?: string;
+    argumentPayload?: object;
+    labels: string[];
+    useLabels: boolean;
+}
+
+const props = withDefaults(defineProps<MarkdownDialogProps>(), {
+    argumentName: undefined,
+    argumentType: undefined,
+    argumentPayload: undefined,
+});
+
+const emit = defineEmits<{
+    (e: "onCancel"): void;
+    (e: "onInsert", value: string): void;
+}>();
+
+interface SelectTitles {
+    labelTitle: string;
+}
+
+type SelectType = "job_id" | "invocation_id" | "history_dataset_id" | "history_dataset_collection_id";
+
+const selectorConfig = {
+    job_id: {
+        labelTitle: "Step",
+    },
+    invocation_id: {
+        labelTitle: "Step",
+    },
+    history_dataset_id: {
+        labelTitle: "Output",
+    },
+    history_dataset_collection_id: {
+        labelTitle: "Output",
+    },
+};
+
+const jobsUrl = `${getAppRoot()}api/jobs`;
+const workflowsUrl = `${getAppRoot()}api/workflows`;
+const invocationsUrl = `${getAppRoot()}api/invocations`;
+const historiesUrl = `${getAppRoot()}api/histories?view=detailed&q=published&qv=True`;
+
+const selectedShow = ref(false);
+const visualizationShow = ref(false);
+const workflowShow = ref(false);
+const historyShow = ref(false);
+const jobShow = ref(false);
+const invocationShow = ref(false);
+const dataShow = ref(false);
+const dataCollectionShow = ref(false);
+const dataHistoryId = ref<string | null>(null as string | null);
+
+const selectedLabelTitle = computed(() => {
+    const config: SelectTitles = selectorConfig[props.argumentType as SelectType] as SelectTitles;
+    return (config && config.labelTitle) || "Select Label";
+});
+
+function getInvocations() {
+    return axios.get(invocationsUrl);
+}
+
+function getJobs() {
+    return axios.get(jobsUrl);
+}
+
+function getWorkflows() {
+    return axios.get(workflowsUrl);
+}
+
+function getHistories() {
+    return axios.get(historiesUrl);
+}
+
+function onData(response: string) {
+    dataShow.value = false;
+    emit("onInsert", `${props.argumentName}(history_dataset_id=${response})`);
+}
+
+interface ObjectReference {
+    id: string;
+}
+
+function onDataCollection(response: ObjectReference) {
+    dataCollectionShow.value = false;
+    emit("onInsert", `${props.argumentName}(history_dataset_collection_id=${response.id})`);
+}
+
+function onJob(response: ObjectReference) {
+    jobShow.value = false;
+    emit("onInsert", `${props.argumentName}(job_id=${response.id})`);
+}
+
+function onInvocation(response: ObjectReference) {
+    invocationShow.value = false;
+    emit("onInsert", `${props.argumentName}(invocation_id=${response.id})`);
+}
+
+function onHistory(response: ObjectReference) {
+    historyShow.value = false;
+    emit("onInsert", `history_link(history_id=${response.id})`);
+}
+
+function onWorkflow(response: ObjectReference) {
+    workflowShow.value = false;
+    emit("onInsert", `${props.argumentName}(workflow_id=${response.id})`);
+}
+
+function onVisualization(response: string) {
+    visualizationShow.value = false;
+    emit("onInsert", response);
+}
+
+function onOk(selectedLabel: string) {
+    selectedLabel = selectedLabel || "<ENTER LABEL>";
+    selectedShow.value = false;
+    if (props.argumentType == "history_dataset_id") {
+        if (props.useLabels) {
+            emit("onInsert", `${props.argumentName}(output="${selectedLabel}")`);
+        } else {
+            getCurrentGalaxyHistory().then((historyId) => {
+                dataShow.value = true;
+                dataHistoryId.value = historyId;
+            });
+        }
+    } else if (props.argumentType == "history_dataset_collection_id") {
+        if (props.useLabels) {
+            emit("onInsert", `${props.argumentName}(output="${selectedLabel}")`);
+        } else {
+            getCurrentGalaxyHistory().then((historyId) => {
+                dataCollectionShow.value = true;
+                dataHistoryId.value = historyId;
+            });
+        }
+    } else if (props.argumentType == "job_id") {
+        if (props.useLabels) {
+            emit("onInsert", `${props.argumentName}(step="${selectedLabel}")`);
+        } else {
+            jobShow.value = true;
+        }
+    } else if (props.argumentType == "invocation_id") {
+        if (props.useLabels) {
+            emit("onInsert", `${props.argumentName}(step="${selectedLabel}")`);
+        } else {
+            invocationShow.value = true;
+        }
+    }
+}
+
+function onCancel() {
+    dataCollectionShow.value = false;
+    selectedShow.value = false;
+    workflowShow.value = false;
+    visualizationShow.value = false;
+    jobShow.value = false;
+    invocationShow.value = false;
+    dataShow.value = false;
+    emit("onCancel");
+}
+
+if (props.argumentType == "workflow_id") {
+    workflowShow.value = true;
+} else if (props.argumentType == "history_id") {
+    historyShow.value = true;
+} else if (props.argumentType == "history_dataset_id") {
+    if (props.useLabels) {
+        selectedShow.value = true;
+    } else {
+        getCurrentGalaxyHistory().then((historyId) => {
+            dataHistoryId.value = historyId;
+            dataShow.value = true;
+        });
+    }
+} else if (props.argumentType == "history_dataset_collection_id") {
+    if (props.useLabels) {
+        selectedShow.value = true;
+    } else {
+        getCurrentGalaxyHistory().then((historyId) => {
+            dataHistoryId.value = historyId;
+            dataCollectionShow.value = true;
+        });
+    }
+} else if (props.argumentType == "invocation_id") {
+    if (props.useLabels) {
+        selectedShow.value = true;
+    } else {
+        invocationShow.value = true;
+    }
+} else if (props.argumentType == "job_id") {
+    if (props.useLabels) {
+        selectedShow.value = true;
+    } else {
+        jobShow.value = true;
+    }
+} else if (props.argumentType == "visualization_id") {
+    getCurrentGalaxyHistory().then((historyId) => {
+        dataHistoryId.value = historyId;
+        visualizationShow.value = true;
+    });
+}
+</script>
+
 <template>
     <span>
         <MarkdownSelector
@@ -57,219 +277,3 @@
             @onCancel="onCancel" />
     </span>
 </template>
-
-<script>
-import axios from "axios";
-import BootstrapVue from "bootstrap-vue";
-import DataDialog from "components/DataDialog/DataDialog";
-import BasicSelectionDialog from "components/SelectionDialog/BasicSelectionDialog";
-import DatasetCollectionDialog from "components/SelectionDialog/DatasetCollectionDialog";
-import { getAppRoot } from "onload/loadConfig";
-import { getCurrentGalaxyHistory } from "utils/data";
-import Vue from "vue";
-
-import MarkdownSelector from "./MarkdownSelector";
-import MarkdownVisualization from "./MarkdownVisualization";
-
-Vue.use(BootstrapVue);
-
-export default {
-    components: {
-        MarkdownSelector,
-        MarkdownVisualization,
-        BasicSelectionDialog,
-        DatasetCollectionDialog,
-        DataDialog,
-    },
-    props: {
-        argumentName: {
-            type: String,
-            default: null,
-        },
-        argumentType: {
-            type: String,
-            default: null,
-        },
-        argumentPayload: {
-            type: Object,
-            default: null,
-        },
-        labels: {
-            type: Array,
-            default: null,
-        },
-        useLabels: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            selectorConfig: {
-                job_id: {
-                    labelTitle: "Step",
-                },
-                invocation_id: {
-                    labelTitle: "Step",
-                },
-                history_dataset_id: {
-                    labelTitle: "Output",
-                },
-                history_dataset_collection_id: {
-                    labelTitle: "Output",
-                },
-            },
-            jobsUrl: `${getAppRoot()}api/jobs`,
-            workflowsUrl: `${getAppRoot()}api/workflows`,
-            invocationsUrl: `${getAppRoot()}api/invocations`,
-            historiesUrl: `${getAppRoot()}api/histories?view=detailed&q=published&qv=True`,
-            selectedShow: false,
-            visualizationShow: false,
-            workflowShow: false,
-            historyShow: false,
-            jobShow: false,
-            invocationShow: false,
-            dataShow: false,
-            dataCollectionShow: false,
-        };
-    },
-    computed: {
-        selectedLabelTitle() {
-            const config = this.selectorConfig[this.argumentType];
-            return (config && config.labelTitle) || "Select Label";
-        },
-    },
-    created() {
-        this.onCreate();
-    },
-    methods: {
-        getInvocations() {
-            return axios.get(this.invocationsUrl);
-        },
-        getJobs() {
-            return axios.get(this.jobsUrl);
-        },
-        getWorkflows() {
-            return axios.get(this.workflowsUrl);
-        },
-        getHistories() {
-            return axios.get(this.historiesUrl);
-        },
-        onData(response) {
-            this.dataShow = false;
-            this.$emit("onInsert", `${this.argumentName}(history_dataset_id=${response})`);
-        },
-        onDataCollection(response) {
-            this.dataCollectionShow = false;
-            this.$emit("onInsert", `${this.argumentName}(history_dataset_collection_id=${response.id})`);
-        },
-        onJob(response) {
-            this.jobShow = false;
-            this.$emit("onInsert", `${this.argumentName}(job_id=${response.id})`);
-        },
-        onInvocation(response) {
-            this.invocationShow = false;
-            this.$emit("onInsert", `${this.argumentName}(invocation_id=${response.id})`);
-        },
-        onHistory(response) {
-            this.historyShow = false;
-            this.$emit("onInsert", `history_link(history_id=${response.id})`);
-        },
-        onWorkflow(response) {
-            this.workflowShow = false;
-            this.$emit("onInsert", `${this.argumentName}(workflow_id=${response.id})`);
-        },
-        onVisualization(response) {
-            this.visualizationShow = false;
-            this.$emit("onInsert", response);
-        },
-        onCreate() {
-            if (this.argumentType == "workflow_id") {
-                this.workflowShow = true;
-            } else if (this.argumentType == "history_id") {
-                this.historyShow = true;
-            } else if (this.argumentType == "history_dataset_id") {
-                if (this.useLabels) {
-                    this.selectedShow = true;
-                } else {
-                    getCurrentGalaxyHistory().then((historyId) => {
-                        this.dataHistoryId = historyId;
-                        this.dataShow = true;
-                    });
-                }
-            } else if (this.argumentType == "history_dataset_collection_id") {
-                if (this.useLabels) {
-                    this.selectedShow = true;
-                } else {
-                    getCurrentGalaxyHistory().then((historyId) => {
-                        this.dataHistoryId = historyId;
-                        this.dataCollectionShow = true;
-                    });
-                }
-            } else if (this.argumentType == "invocation_id") {
-                if (this.useLabels) {
-                    this.selectedShow = true;
-                } else {
-                    this.invocationShow = true;
-                }
-            } else if (this.argumentType == "job_id") {
-                if (this.useLabels) {
-                    this.selectedShow = true;
-                } else {
-                    this.jobShow = true;
-                }
-            } else if (this.argumentType == "visualization_id") {
-                getCurrentGalaxyHistory().then((historyId) => {
-                    this.dataHistoryId = historyId;
-                    this.visualizationShow = true;
-                });
-            }
-        },
-        onOk(selectedLabel) {
-            selectedLabel = selectedLabel || "<ENTER LABEL>";
-            this.selectedShow = false;
-            if (this.argumentType == "history_dataset_id") {
-                if (this.useLabels) {
-                    this.$emit("onInsert", `${this.argumentName}(output="${selectedLabel}")`);
-                } else {
-                    getCurrentGalaxyHistory().then((historyId) => {
-                        this.dataShow = true;
-                        this.dataHistoryId = historyId;
-                    });
-                }
-            } else if (this.argumentType == "history_dataset_collection_id") {
-                if (this.useLabels) {
-                    this.$emit("onInsert", `${this.argumentName}(output="${selectedLabel}")`);
-                } else {
-                    getCurrentGalaxyHistory().then((historyId) => {
-                        this.dataCollectionShow = true;
-                        this.dataHistoryId = historyId;
-                    });
-                }
-            } else if (this.argumentType == "job_id") {
-                if (this.useLabels) {
-                    this.$emit("onInsert", `${this.argumentName}(step="${selectedLabel}")`);
-                } else {
-                    this.jobShow = true;
-                }
-            } else if (this.argumentType == "invocation_id") {
-                if (this.useLabels) {
-                    this.$emit("onInsert", `${this.argumentName}(step="${selectedLabel}")`);
-                } else {
-                    this.invocationShow = true;
-                }
-            }
-        },
-        onCancel() {
-            this.dataCollectionShow = false;
-            this.selectedShow = false;
-            this.workflowShow = false;
-            this.visualizationShow = false;
-            this.jobShow = false;
-            this.invocationShow = false;
-            this.dataShow = false;
-            this.$emit("onCancel");
-        },
-    },
-};
-</script>

From 8761a3c8a8174e37bdceeabc27ebedb616c0fa41 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Fri, 2 Feb 2024 10:48:22 -0500
Subject: [PATCH 2/3] Reactive history id in MarkdownDialog.vue.

---
 .../components/Markdown/MarkdownDialog.vue    | 36 ++++++-------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownDialog.vue b/client/src/components/Markdown/MarkdownDialog.vue
index 9473fdc41634..cbb4344bd03f 100644
--- a/client/src/components/Markdown/MarkdownDialog.vue
+++ b/client/src/components/Markdown/MarkdownDialog.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import axios from "axios";
 import BootstrapVue from "bootstrap-vue";
+import { storeToRefs } from "pinia";
 import Vue, { computed, ref } from "vue";
 
 import { getAppRoot } from "@/onload/loadConfig";
-import { getCurrentGalaxyHistory } from "@/utils/data";
+import { useHistoryStore } from "@/stores/historyStore";
 
 import MarkdownSelector from "./MarkdownSelector.vue";
 import MarkdownVisualization from "./MarkdownVisualization.vue";
@@ -67,7 +68,7 @@ const jobShow = ref(false);
 const invocationShow = ref(false);
 const dataShow = ref(false);
 const dataCollectionShow = ref(false);
-const dataHistoryId = ref<string | null>(null as string | null);
+const { currentHistoryId } = storeToRefs(useHistoryStore());
 
 const selectedLabelTitle = computed(() => {
     const config: SelectTitles = selectorConfig[props.argumentType as SelectType] as SelectTitles;
@@ -136,19 +137,13 @@ function onOk(selectedLabel: string) {
         if (props.useLabels) {
             emit("onInsert", `${props.argumentName}(output="${selectedLabel}")`);
         } else {
-            getCurrentGalaxyHistory().then((historyId) => {
-                dataShow.value = true;
-                dataHistoryId.value = historyId;
-            });
+            dataShow.value = true;
         }
     } else if (props.argumentType == "history_dataset_collection_id") {
         if (props.useLabels) {
             emit("onInsert", `${props.argumentName}(output="${selectedLabel}")`);
         } else {
-            getCurrentGalaxyHistory().then((historyId) => {
-                dataCollectionShow.value = true;
-                dataHistoryId.value = historyId;
-            });
+            dataCollectionShow.value = true;
         }
     } else if (props.argumentType == "job_id") {
         if (props.useLabels) {
@@ -184,19 +179,13 @@ if (props.argumentType == "workflow_id") {
     if (props.useLabels) {
         selectedShow.value = true;
     } else {
-        getCurrentGalaxyHistory().then((historyId) => {
-            dataHistoryId.value = historyId;
-            dataShow.value = true;
-        });
+        dataShow.value = true;
     }
 } else if (props.argumentType == "history_dataset_collection_id") {
     if (props.useLabels) {
         selectedShow.value = true;
     } else {
-        getCurrentGalaxyHistory().then((historyId) => {
-            dataHistoryId.value = historyId;
-            dataCollectionShow.value = true;
-        });
+        dataCollectionShow.value = true;
     }
 } else if (props.argumentType == "invocation_id") {
     if (props.useLabels) {
@@ -211,10 +200,7 @@ if (props.argumentType == "workflow_id") {
         jobShow.value = true;
     }
 } else if (props.argumentType == "visualization_id") {
-    getCurrentGalaxyHistory().then((historyId) => {
-        dataHistoryId.value = historyId;
-        visualizationShow.value = true;
-    });
+    visualizationShow.value = true;
 }
 </script>
 
@@ -234,13 +220,13 @@ if (props.argumentType == "workflow_id") {
             :argument-payload="argumentPayload"
             :labels="labels"
             :use-labels="useLabels"
-            :history="dataHistoryId"
+            :history="currentHistoryId"
             @onOk="onVisualization"
             @onCancel="onCancel" />
-        <DataDialog v-else-if="dataShow" :history="dataHistoryId" format="id" @onOk="onData" @onCancel="onCancel" />
+        <DataDialog v-else-if="dataShow" :history="currentHistoryId" format="id" @onOk="onData" @onCancel="onCancel" />
         <DatasetCollectionDialog
             v-else-if="dataCollectionShow"
-            :history="dataHistoryId"
+            :history="currentHistoryId"
             format="id"
             @onOk="onDataCollection"
             @onCancel="onCancel" />

From 741650dd3e52f3d60e9a3b30c1d3088ff9384cc6 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sat, 3 Feb 2024 11:26:17 -0500
Subject: [PATCH 3/3] Migrate MarkdownDialog API interactions to fetchers.

---
 client/src/api/histories.ts                   |  1 +
 client/src/api/invocations.ts                 |  4 +++-
 client/src/api/jobs.ts                        |  2 ++
 client/src/api/workflows.ts                   |  3 +++
 .../components/Markdown/MarkdownDialog.vue    | 21 ++++++++-----------
 .../components/Markdown/MarkdownToolBox.vue   |  2 +-
 6 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 client/src/api/workflows.ts

diff --git a/client/src/api/histories.ts b/client/src/api/histories.ts
index a4da4bb0627f..da0564f0ab43 100644
--- a/client/src/api/histories.ts
+++ b/client/src/api/histories.ts
@@ -7,3 +7,4 @@ export const deleteHistories = fetcher.path("/api/histories/batch/delete").metho
 export const undeleteHistory = fetcher.path("/api/histories/deleted/{history_id}/undelete").method("post").create();
 export const undeleteHistories = fetcher.path("/api/histories/batch/undelete").method("put").create();
 export const historiesQuery = fetcher.path("/api/histories/query").method("get").create();
+export const publishedHistoriesFetcher = fetcher.path("/api/histories/published").method("get").create();
diff --git a/client/src/api/invocations.ts b/client/src/api/invocations.ts
index fe8b8d5da4c7..c604a40998b3 100644
--- a/client/src/api/invocations.ts
+++ b/client/src/api/invocations.ts
@@ -2,7 +2,9 @@ import axios from "axios";
 
 import { getAppRoot } from "@/onload";
 
-import { ApiResponse } from "./schema";
+import { ApiResponse, fetcher } from "./schema";
+
+export const invocationsFetcher = fetcher.path("/api/invocations").method("get").create();
 
 // TODO: Replace these interfaces with real schema models after https://github.com/galaxyproject/galaxy/pull/16707 is merged
 export interface WorkflowInvocation {
diff --git a/client/src/api/jobs.ts b/client/src/api/jobs.ts
index e915a9179098..65399c0beb96 100644
--- a/client/src/api/jobs.ts
+++ b/client/src/api/jobs.ts
@@ -6,3 +6,5 @@ export const jobLockStatus = fetcher.path("/api/job_lock").method("get").create(
 export const jobLockUpdate = fetcher.path("/api/job_lock").method("put").create();
 
 export const fetchJobDestinationParams = fetcher.path("/api/jobs/{job_id}/destination_params").method("get").create();
+
+export const jobsFetcher = fetcher.path("/api/jobs").method("get").create();
diff --git a/client/src/api/workflows.ts b/client/src/api/workflows.ts
new file mode 100644
index 000000000000..168e85ed00c4
--- /dev/null
+++ b/client/src/api/workflows.ts
@@ -0,0 +1,3 @@
+import { fetcher } from "@/api/schema";
+
+export const workflowsFetcher = fetcher.path("/api/workflows").method("get").create();
diff --git a/client/src/components/Markdown/MarkdownDialog.vue b/client/src/components/Markdown/MarkdownDialog.vue
index cbb4344bd03f..4076696f47ee 100644
--- a/client/src/components/Markdown/MarkdownDialog.vue
+++ b/client/src/components/Markdown/MarkdownDialog.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import axios from "axios";
 import BootstrapVue from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import Vue, { computed, ref } from "vue";
 
-import { getAppRoot } from "@/onload/loadConfig";
+import { publishedHistoriesFetcher } from "@/api/histories";
+import { invocationsFetcher } from "@/api/invocations";
+import { jobsFetcher } from "@/api/jobs";
+import { workflowsFetcher } from "@/api/workflows";
 import { useHistoryStore } from "@/stores/historyStore";
 
 import MarkdownSelector from "./MarkdownSelector.vue";
@@ -19,7 +21,7 @@ interface MarkdownDialogProps {
     argumentName?: string;
     argumentType?: string;
     argumentPayload?: object;
-    labels: string[];
+    labels?: string[];
     useLabels: boolean;
 }
 
@@ -55,11 +57,6 @@ const selectorConfig = {
     },
 };
 
-const jobsUrl = `${getAppRoot()}api/jobs`;
-const workflowsUrl = `${getAppRoot()}api/workflows`;
-const invocationsUrl = `${getAppRoot()}api/invocations`;
-const historiesUrl = `${getAppRoot()}api/histories?view=detailed&q=published&qv=True`;
-
 const selectedShow = ref(false);
 const visualizationShow = ref(false);
 const workflowShow = ref(false);
@@ -76,19 +73,19 @@ const selectedLabelTitle = computed(() => {
 });
 
 function getInvocations() {
-    return axios.get(invocationsUrl);
+    return invocationsFetcher({});
 }
 
 function getJobs() {
-    return axios.get(jobsUrl);
+    return jobsFetcher({});
 }
 
 function getWorkflows() {
-    return axios.get(workflowsUrl);
+    return workflowsFetcher({});
 }
 
 function getHistories() {
-    return axios.get(historiesUrl);
+    return publishedHistoriesFetcher({});
 }
 
 function onData(response: string) {
diff --git a/client/src/components/Markdown/MarkdownToolBox.vue b/client/src/components/Markdown/MarkdownToolBox.vue
index 2f6e5d027858..c8f7341f6fed 100644
--- a/client/src/components/Markdown/MarkdownToolBox.vue
+++ b/client/src/components/Markdown/MarkdownToolBox.vue
@@ -105,7 +105,7 @@ export default {
         return {
             selectedArgumentName: null,
             selectedType: null,
-            selectedLabels: null,
+            selectedLabels: undefined,
             selectedShow: false,
             selectedPayload: null,
             visualizationIndex: {},