feat: integrate plotly-based clinvar landscape (#94)

package.json

@@ -50,8 +50,10 @@
     "@protobuf-ts/runtime": "^2.9.3",
     "@reactgular/chunks": "^1.0.1",
     "@types/luxon": "^3.4.2",
+    "downsample": "^1.4.0",
     "igv": "^2.15.11",
     "luxon": "^3.4.4",
+    "plotly.js-dist": "^2.29.0",
     "title-case": "^4.3.1",
     "vega": "^5.27.0",
     "vega-embed": "^6.24.0",
@@ -87,6 +89,7 @@
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-vue": "^9.21.1",
     "jsdom": "^24.0.0",
+    "jsdom-worker": "^0.3.0",
     "path": "^0.12.7",
     "prettier": "^3.2.5",
     "react": "^18.2.0",

src/components/GeneClinvarCard/GeneClinvarCard.spec.ts

@@ -70,7 +70,7 @@ describe.concurrent('GeneClinvarCard.vue', async () => {
       expect(wrapper.text()).toContain('ClinVar Information')
       const clinvarImpact = wrapper.findComponent({ name: 'ClinvarImpact' })
       expect(clinvarImpact.exists()).toBe(true)
-      const variationLandscape = wrapper.findComponent({ name: 'VariationLandscape' })
+      const variationLandscape = wrapper.findComponent({ name: 'VariationLandscapePlotly' })
       expect(variationLandscape.exists()).toBe(true)
       const clinvarFreqPlot = wrapper.findComponent({ name: 'ClinvarFreqPlot' })
       expect(clinvarFreqPlot.exists()).toBe(true)

src/components/GeneClinvarCard/GeneClinvarCard.vue

@@ -15,8 +15,11 @@ import ClinvarImpact from './ClinvarImpact.vue'
 
 // The variation landascape is defined as an async component as rendering it
 // may take a while.
-const VariationLandscape = defineAsyncComponent(() => import('./VariationLandscape.vue'))
+const VariationLandscapePlotly = defineAsyncComponent(
+  () => import('./VariationLandscapePlotly.vue')
+)
 
+/** This component's props. */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
   /** Gene per clinvar */
@@ -53,7 +56,7 @@ const props = defineProps<{
           <ClinvarFreqPlot :clinvar-per-gene="clinvarPerGene" />
         </v-col>
         <v-col cols="12">
-          <VariationLandscape
+          <VariationLandscapePlotly
             :clinvar-per-gene="clinvarPerGene"
             :transcripts="transcripts"
             :genome-build="genomeBuild"