From f2ec5c6e22835f90aef6ddf79d9cd719239627f8 Mon Sep 17 00:00:00 2001
From: gromdimon <grom.dima.grom@gmail.com>
Date: Thu, 14 Sep 2023 14:44:07 +0200
Subject: [PATCH] wip

---
 frontend/src/components/ClinVarFreqPlot.vue |  2 +-
 frontend/src/components/VegaPlot.vue        | 27 +++++++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ClinVarFreqPlot.vue b/frontend/src/components/ClinVarFreqPlot.vue
index 84e18bc0..04d7a0f0 100644
--- a/frontend/src/components/ClinVarFreqPlot.vue
+++ b/frontend/src/components/ClinVarFreqPlot.vue
@@ -124,7 +124,7 @@ const vegaEncoding = {
       Population frequency of ClinVar variants
     </figcaption>
     <VegaPlot
-      :data-values="vegaData"
+      :data-values="vegaData as any"
       :encoding="vegaEncoding"
       :mark="false"
       :layer="vegaLayer"
diff --git a/frontend/src/components/VegaPlot.vue b/frontend/src/components/VegaPlot.vue
index 79174f56..995fb02f 100644
--- a/frontend/src/components/VegaPlot.vue
+++ b/frontend/src/components/VegaPlot.vue
@@ -1,11 +1,11 @@
-<script setup lang="js">
+<script setup lang="ts">
 /** Simple wrapper around vega for plotting data.
  *
  * The "vue-vega" library has not been updated for a long time.
  */
 import * as vega from 'vega'
 import vegaEmbed from 'vega-embed'
-import { onMounted, computed, ref, watch } from 'vue'
+import { onMounted, computed, ref, type Ref, watch } from 'vue'
 
 /** Define the props. */
 const props = defineProps({
@@ -58,13 +58,15 @@ const vegaLiteSpec = computed(() => {
       name: props.dataName
     },
     encoding: props.encoding,
-    transform: props.transform
+    transform: props.transform,
+    mark: true,
+    layer: []
   }
   if (props.mark !== undefined && props.mark !== null && props.mark !== false) {
-    res.mark = props.mark
+    res.mark = props.mark as any
   }
   if (props.layer !== undefined && props.layer !== null) {
-    res.layer = props.layer
+    res.layer = props.layer as any
   }
   return res
 })
@@ -78,22 +80,27 @@ watch(
         .changeset()
         .remove(() => true)
         .insert(newValue)
-      vegaViewRef.value.change(props.dataName, changeset).run()
-      vegaViewRef.value.resize()
+
+      ;(vegaViewRef.value as any).change(props.dataName, changeset).run()
+      ;(vegaViewRef.value as any).resize()
     }
   }
 )
 
 /** `ref` to `vegaEmbed()` result so we can `await` the rendering. */
-const vegaEmbedPromiseRef = ref(null)
+const vegaEmbedPromiseRef: Ref<Promise<{ view: any }> | null> = ref(null)
 
 /** Create vega-embed plot on mounting. */
 onMounted(() => {
   const vegaOpts = {
     renderer: props.renderer
   }
-  vegaEmbedPromiseRef.value = vegaEmbed(plotDivRef.value, vegaLiteSpec.value, vegaOpts)
-  vegaEmbedPromiseRef.value.then(({ view }) => {
+  vegaEmbedPromiseRef.value = vegaEmbed(
+    plotDivRef.value as any,
+    vegaLiteSpec.value as any,
+    vegaOpts as any
+  )
+  vegaEmbedPromiseRef.value.then(({ view }: { view: any }) => {
     vegaViewRef.value = view
   })
 })