fix: allow tuning of StrucvarGeneListCard (#144)

bihealth · Feb 23, 2024 · bc98bdb · bc98bdb
1 parent 39de318
commit bc98bdb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/src/components/StrucvarGeneListCard/GeneListEntry.vue b/src/components/StrucvarGeneListCard/GeneListEntry.vue
@@ -7,14 +7,24 @@ import GeneDosage from './GeneDosage.vue'
 import ScoreChip from './ScoreChip.vue'
 
 /** This component's props. */
-const props = defineProps<{
-  item: any
-  hgncToEffect?: { [key: string]: string }
-  sortKey?: string
-  sortOrder?: 'asc' | 'desc'
-  isSelected: boolean
-  genomeBuild?: GenomeBuild
-}>()
+const props = withDefaults(
+  defineProps<{
+    item: any
+    hgncToEffect?: { [key: string]: string }
+    sortKey?: string
+    sortOrder?: 'asc' | 'desc'
+    isSelected: boolean
+    genomeBuild?: GenomeBuild
+    columnWidth?: string
+  }>(),
+  {
+    hgncToEffect: undefined,
+    sortKey: undefined,
+    sortOrder: undefined,
+    genomeBuild: undefined,
+    columnWidth: 'columnWidth'
+  }
+)
 
 /** This component's emits. */
 const emit = defineEmits(['toggleSelected'])
@@ -101,7 +111,7 @@ const sortIcon = computed<string>(() => {
       <v-col cols="10" class="d-flex flex-column pa-0">
         <v-row no-gutter class="ma-0">
           <v-col cols="3" class="pr-3 align-self-end pa-1">
-            <table style="width: 280px">
+            <table :style="`width: ${columnWidth}`">
               <tr>
                 <td
                   class="text-no-wrap"
@@ -147,7 +157,7 @@ const sortIcon = computed<string>(() => {
             </table>
           </v-col>
           <v-col cols="3" class="pr-3 align-self-end pa-1">
-            <table style="width: 280px">
+            <table :style="`width: ${columnWidth}`">
               <tr>
                 <td
                   class="text-no-wrap"
@@ -204,7 +214,7 @@ const sortIcon = computed<string>(() => {
               ClinGen Dosage Sensitivity Single Gene Evaluation Process v1.0 => >=0.9
 
             -->
-            <table style="width: 280px">
+            <table :style="`width: ${columnWidth}`">
               <tr>
                 <td
                   class="text-no-wrap"
@@ -242,7 +252,7 @@ const sortIcon = computed<string>(() => {
             <!--
               https://europepmc.org/article/MED/35917817
             -->
-            <table style="width: 280px">
+            <table :style="`width: ${columnWidth}`">
               <tr>
                 <td
                   class="text-no-wrap"

diff --git a/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue b/src/components/StrucvarGeneListCard/StrucvarGeneListCard.vue
@@ -23,13 +23,16 @@ const props = withDefaults(
     storeState?: StoreState
     /** The HGNC ID of the selected gene. */
     selectedGeneHgncId?: string
+    /** Column width of the entry. */
+    entryColumnWidth?: string
   }>(),
   {
     currentStrucvarRecord: undefined,
     csq: undefined,
     genesInfos: undefined,
     storeState: StoreState.Initial,
-    selectedGeneHgncId: undefined
+    selectedGeneHgncId: undefined,
+    entryColumnWidth: '280px'
   }
 )
 
@@ -225,6 +228,7 @@ onMounted(() => selectFirst(props.storeState))
               :sort-order="sortOrder"
               :is-selected="isSelected(item as any)"
               :genome-build="currentStrucvarRecord?.genomeBuild ?? 'grch37'"
+              :column-width="entryColumnWidth"
               @toggle-selected="() => toggleSelect(item as any)"
             />
           </template>