From 555fae4b5d59a1a9139a5ccb1ac7f4c6ed1bb920 Mon Sep 17 00:00:00 2001
From: Dzmitry Hramyka <grom.dima.grom@gmail.com>
Date: Mon, 16 Oct 2023 13:32:03 +0200
Subject: [PATCH] fix: Add support for large displays (#113) (#128)

---
 .../src/assets/__tests__/BRCA1Transcripts.json    |  3 +++
 frontend/src/components/ClinVarFreqPlot.vue       |  1 -
 frontend/src/components/GtexGenePlot.vue          |  1 -
 frontend/src/components/SvDetails/SvGenes.vue     |  2 +-
 frontend/src/components/VariationLandscape.vue    |  3 +--
 frontend/src/components/VegaPlot.vue              | 15 ++++++++++++---
 .../__tests__/VariationLandscape.spec.ts          |  4 +++-
 7 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/assets/__tests__/BRCA1Transcripts.json

diff --git a/frontend/src/assets/__tests__/BRCA1Transcripts.json b/frontend/src/assets/__tests__/BRCA1Transcripts.json
new file mode 100644
index 00000000..be13442f
--- /dev/null
+++ b/frontend/src/assets/__tests__/BRCA1Transcripts.json
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f78007f8bab23d77eb0ddb8d67641e0962a0af6cf5b4fb490a4a3f8a9b2e4a86
+size 143647
diff --git a/frontend/src/components/ClinVarFreqPlot.vue b/frontend/src/components/ClinVarFreqPlot.vue
index 04d7a0f0..6a477fab 100644
--- a/frontend/src/components/ClinVarFreqPlot.vue
+++ b/frontend/src/components/ClinVarFreqPlot.vue
@@ -128,7 +128,6 @@ const vegaEncoding = {
       :encoding="vegaEncoding"
       :mark="false"
       :layer="vegaLayer"
-      :width="800"
       :height="300"
       renderer="svg"
     />
diff --git a/frontend/src/components/GtexGenePlot.vue b/frontend/src/components/GtexGenePlot.vue
index cadcc994..a28a9947 100644
--- a/frontend/src/components/GtexGenePlot.vue
+++ b/frontend/src/components/GtexGenePlot.vue
@@ -180,7 +180,6 @@ const vegaLayer = [
       :encoding="vegaEncoding"
       :layer="vegaLayer"
       :mark="false"
-      :width="1000"
       :height="300"
       renderer="svg"
     />
diff --git a/frontend/src/components/SvDetails/SvGenes.vue b/frontend/src/components/SvDetails/SvGenes.vue
index aa95de1c..54a0a050 100644
--- a/frontend/src/components/SvDetails/SvGenes.vue
+++ b/frontend/src/components/SvDetails/SvGenes.vue
@@ -133,7 +133,7 @@ const onRowClicked = (event: Event, { item }: { item: GeneInfo }): void => {
 
 <template>
   <div>
-    <div style="max-width: 1300px">
+    <div>
       <v-data-table
         v-model:items-per-page="itemsPerPage"
         :headers="headers"
diff --git a/frontend/src/components/VariationLandscape.vue b/frontend/src/components/VariationLandscape.vue
index 00ac69aa..428c8acb 100644
--- a/frontend/src/components/VariationLandscape.vue
+++ b/frontend/src/components/VariationLandscape.vue
@@ -342,12 +342,11 @@ const vegaLayer = [
     <figcaption class="figure-caption text-center">
       Variation Landscape of {{ props.hgnc }}
     </figcaption>
-    <div style="width: 1100px; height: 350px; overflow: none">
+    <div style="height: 350px; overflow: none">
       <VegaPlot
         :data-values="vegaData"
         :encoding="vegaEncoding"
         :layer="vegaLayer"
-        :width="1000"
         :height="300"
         renderer="canvas"
       />
diff --git a/frontend/src/components/VegaPlot.vue b/frontend/src/components/VegaPlot.vue
index 94e68775..e01ecda2 100644
--- a/frontend/src/components/VegaPlot.vue
+++ b/frontend/src/components/VegaPlot.vue
@@ -7,6 +7,15 @@ import * as vega from 'vega'
 import vegaEmbed from 'vega-embed'
 import { type Ref, computed, onMounted, ref, watch } from 'vue'
 
+const widthPlot = computed(() => {
+  const windowWidth = window.innerWidth
+  if (windowWidth < 1264) {
+    return windowWidth - 210
+  } else {
+    return windowWidth - 600
+  }
+})
+
 /** Define the props. */
 const props = defineProps({
   description: String,
@@ -23,11 +32,11 @@ const props = defineProps({
   layer: Object,
   width: {
     type: [Number, String],
-    default: 300
+    default: null
   },
   height: {
     type: [Number, String],
-    default: 300
+    default: null
   },
   mark: {
     type: [Boolean, Object],
@@ -49,7 +58,7 @@ const vegaViewRef = ref(null)
 const vegaLiteSpec = computed(() => {
   const res = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-    width: props.width,
+    width: props.width === null ? widthPlot.value : props.width,
     height: props.height,
     description: props.description,
     params: props.params,
diff --git a/frontend/src/components/__tests__/VariationLandscape.spec.ts b/frontend/src/components/__tests__/VariationLandscape.spec.ts
index c281b153..54231166 100644
--- a/frontend/src/components/__tests__/VariationLandscape.spec.ts
+++ b/frontend/src/components/__tests__/VariationLandscape.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import * as BRCA1Clinvar from '@/assets/__tests__/BRCA1ClinVar.json'
+import * as BRCA1Transcripts from '@/assets/__tests__/BRCA1Transcripts.json'
 import VariationLandscape from '@/components/VariationLandscape.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
@@ -12,7 +13,8 @@ describe.concurrent('VariationLandscape', async () => {
         props: {
           clinvar: BRCA1Clinvar['genes']['HGNC:1100'],
           genomeRelease: 'grch37',
-          geneSymbol: 'HGNC:1100'
+          hgnc: 'HGNC:1100',
+          transcripts: BRCA1Transcripts
         }
       }
     )