Add alert for invalid cell types

galaxyproject · Jan 28, 2025 · ca2f9bc · ca2f9bc
1 parent 6c590de
commit ca2f9bc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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>