From ff0240bedbc78aaea3219b5d1d9827ef7c9bf06e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 20 Jan 2025 11:51:06 -0500
Subject: [PATCH] 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>