Add basic error handling to vega wrapper

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));
     }
 }
 

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));
 

client/src/components/Markdown/Sections/MarkdownVega.vue

@@ -1,18 +1,36 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref, watch } from "vue";
 
 const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
 
 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>