fix: Add support for large displays (#113) (#128)

bihealth · Oct 16, 2023 · 555fae4 · 555fae4
1 parent b3ab2b3
commit 555fae4
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 9 deletions.
diff --git a/frontend/src/assets/__tests__/BRCA1Transcripts.json b/frontend/src/assets/__tests__/BRCA1Transcripts.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
         }
       }
     )