Merge pull request #16 from molgenis/feat/format

feature: sample details

package.json

@@ -10,7 +10,7 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "@molgenis/vip-report-api": "0.0.6",
+    "@molgenis/vip-report-api": "0.0.7",
     "bootstrap-vue": "^2.15.0",
     "core-js": "^3.6.5",
     "html-webpack-plugin": "latest",

src/components/Anchor.vue

@@ -0,0 +1,18 @@
+<template>
+    <a :href="href" target="_blank">
+        {{ text }}
+        <b-icon-box-arrow-in-up-right class="ml-1"/>
+    </a>
+</template>
+
+<script lang="ts">
+    // eslint-disable-next-line no-unused-vars
+    import Vue, {PropType} from 'vue'
+
+    export default Vue.extend({
+        props: {
+            href: String as PropType<string>,
+            text: [String, Number, Boolean] as PropType<string | number | boolean>
+        }
+    })
+</script>

src/components/Identifiers.vue

@@ -2,15 +2,13 @@
     <div>
         <span v-for="(id, index) in identifiers" :key="id">
             <!-- dbSNP ID -->
-            <a v-if="id.startsWith('rs')" :href="'https://www.ncbi.nlm.nih.gov/snp/' + encodeURIComponent(id)" target="_blank">
-                {{ id }}
-                <b-icon-box-arrow-in-up-right class="ml-1"/>
-            </a>
+            <Anchor v-if="id.startsWith('rs')"
+                    :href="'https://www.ncbi.nlm.nih.gov/snp/' + encodeURIComponent(id)"
+                    :text="id"/>
             <!-- dbVar ID -->
-            <a v-else-if="id.startsWith('esv') || id.startsWith('nsv')" :href="'https://www.ncbi.nlm.nih.gov/dbvar/variants/' + encodeURIComponent(id)" target="_blank">
-                {{ id }}
-                <b-icon-box-arrow-in-up-right class="ml-1"/>
-            </a>
+            <Anchor v-else-if="id.startsWith('esv') || id.startsWith('nsv')"
+                    :href="'https://www.ncbi.nlm.nih.gov/dbvar/variants/' + encodeURIComponent(id)"
+                    :text="id"/>
             <span v-else>{{ id }}</span>
             <span v-if="index < identifiers.length - 1">, </span>
         </span>
@@ -20,8 +18,10 @@
 <script lang="ts">
     // eslint-disable-next-line no-unused-vars
     import Vue, {PropType} from 'vue'
+    import Anchor from '@/components/Anchor.vue'
 
     export default Vue.extend({
+        components: {Anchor},
         props: {
             identifiers: Array as PropType<string[]>
         }

src/components/RecordDetails.vue

@@ -4,7 +4,7 @@
         <h4>Info</h4>
         <RecordInfoDetails :metadata="metadata.info" :info="record.n" />
         <h4>Sample</h4>
-        <RecordSampleDetails :data="record.s[sample.index]" />
+        <RecordSampleDetails :metadata="metadata.format" :data="record.s[sample.index]" />
     </div>
 </template>
 

src/components/RecordInfoDetailsItem.vue

@@ -1,14 +1,15 @@
 <template>
     <div>
         <span v-if="metadata.number === undefined">
-            {{ value }}
+            <RecordInfoDetailsItemValue v-if="value !== null" :metadataId="metadata.id" :value="value"/>
         </span>
         <span v-else-if="metadata.number && metadata.number.type === 'NUMBER' && metadata.number.count === 1">
-            {{ value }}
+            <RecordInfoDetailsItemValue v-if="value !== null" :metadataId="metadata.id" :value="value"/>
         </span>
         <span v-else>
             <span v-for="(item, index) in value" :key="index">
-            {{ item }}<span v-if="index < value.length - 1">, </span>
+                <RecordInfoDetailsItemValue v-if="value !== null" :metadataId="metadata.id" :value="item"/>
+                <span v-if="index < value.length - 1">, </span>
             </span>
         </span>
     </div>
@@ -19,8 +20,10 @@
     import Vue, {PropType} from 'vue'
     // eslint-disable-next-line no-unused-vars
     import {InfoMetadata} from '@molgenis/vip-report-api'
+    import RecordInfoDetailsItemValue from '@/components/RecordInfoDetailsItemValue.vue'
 
     export default Vue.extend({
+        components: {RecordInfoDetailsItemValue},
         props: {
             metadata: Object as PropType<InfoMetadata>,
             value: [String, Number, Boolean, Array, Object] as PropType<string | number | boolean | object | string[] | number[] | boolean[] | object[]>

src/components/RecordInfoDetailsItemValue.vue

@@ -0,0 +1,27 @@
+<template>
+    <span v-if="metadataId === 'Consequence'">
+        <Anchor
+                :href="'http://www.sequenceontology.org/browser/obob.cgi?rm=term_list&obo_query=' + encodeURIComponent(value) + '&release=current_release'"
+                :text="value"/>
+    </span>
+    <span v-else-if="metadataId === 'SYMBOL'">
+        <Anchor :href="'https://www.omim.org/search?search=' + encodeURIComponent(value) + '&field=approved_gene_symbol'" :text="value" />
+    </span>
+    <span v-else>
+        {{ value }}
+    </span>
+</template>
+
+<script lang="ts">
+    // eslint-disable-next-line no-unused-vars
+    import Vue, {PropType} from 'vue'
+    import Anchor from '@/components/Anchor.vue'
+
+    export default Vue.extend({
+        components: {Anchor},
+        props: {
+            metadataId: String as PropType<String>,
+            value: [String, Number, Boolean] as PropType<string | number | boolean>
+        }
+    })
+</script>

src/components/RecordInfoNestedDetails.vue

@@ -8,17 +8,7 @@
                 {{ data.label }}
             </template>
             <template v-slot:cell()="data">
-                <span v-if="data.field.metadata.number === undefined">
-                    {{ data.item[data.field.index] }}
-                </span>
-                <span v-else-if="data.field.metadata.number && data.field.metadata.number.type === 'NUMBER' && data.field.metadata.number.count === 1">
-                    {{ data.item[data.field.index] }}
-                </span>
-                <span v-else>
-                    <span v-for="(item, index) in data.item[data.field.index]" :key="index">
-                        {{ item }}<span v-if="index < data.item[data.field.index].length - 1">, </span>
-                    </span>
-                </span>
+                <RecordInfoDetailsItem :metadata="data.field.metadata" :value="data.item[data.field.index]"/>
             </template>
         </b-table>
     </div>
@@ -29,8 +19,10 @@
     import Vue, {PropType} from 'vue'
     // eslint-disable-next-line no-unused-vars
     import {InfoMetadata} from '@molgenis/vip-report-api'
+    import RecordInfoDetailsItem from '@/components/RecordInfoDetailsItem.vue'
 
     export default Vue.extend({
+        components: {RecordInfoDetailsItem},
         props: {
             metadata: Array as PropType<InfoMetadata[]>,
             info: Array as PropType<object[]>
@@ -41,7 +33,7 @@
                 let index = 0
                 for (const info of this.metadata) {
                     // @ts-ignore
-                    if(this.hasData(index)) {
+                    if (this.hasData(index)) {
                         fields.push({key: info.id, label: info.description, index: index, metadata: info})
                     }
                     ++index
@@ -56,7 +48,7 @@
             hasData(index: number): boolean {
                 for (let item of this.info) {
                     // @ts-ignore
-                    if(!(item[index] === null || (Array.isArray(item[index]) && item[index].length === 0))) {
+                    if (!(item[index] === null || (Array.isArray(item[index]) && item[index].length === 0))) {
                         return true
                     }
                 }

src/components/RecordSampleDetails.vue

@@ -1,17 +1,27 @@
 <template>
     <div>
-        <!-- TODO: improve rendering once we have format metadata available -->
-        {{ data }}
+        <div>
+            <span v-for="(alt, index) in data.gt.a" :key="index">
+                <Allele :allele="alt"/>
+                <span v-if="index < data.gt.a.length - 1"> {{ data.gt.p ? '|' : '/'}} </span>
+            </span>
+        </div>
+        <RecordInfoDetails :metadata="metadata" :info="data.f" />
     </div>
 </template>
 
 <script lang="ts">
     // eslint-disable-next-line no-unused-vars
     import Vue, {PropType} from 'vue'
     // eslint-disable-next-line no-unused-vars
+    import {FormatMetadata} from '@molgenis/vip-report-api'
+    import RecordInfoDetails from '@/components/RecordInfoDetails.vue'
+    import Allele from '@/components/Allele.vue'
 
     export default Vue.extend({
+        components: {Allele, RecordInfoDetails},
         props: {
+            metadata: Array as PropType<FormatMetadata[]>,
             data: Object as PropType<object>
         }
     })

src/components/RecordTable.vue

@@ -51,13 +51,9 @@ f
                 </b-button>
             </template>
             <template v-slot:cell(p)="data">
-                <a v-if="genomeBrowserDb"
-                   :href="'https://genome-euro.ucsc.edu/cgi-bin/hgTracks?db=' + encodeURIComponent(genomeBrowserDb) + '&position=' + encodeURIComponent('chr' + data.item.c + ':' + Math.max(0, (data.item.p - 500)) + '-' + (data.item.p + 500))"
-                   target="_blank">
-                    {{ data.item.c }}:{{ data.item.p | numberWithCommas }}
-                    <b-icon-box-arrow-in-up-right class="ml-1"/>
-                </a>
-                <span v-else>{{ data.item.c }}:{{ data.item.p | numberWithCommas }}</span>
+                <Anchor v-if="genomeBrowserDb"
+                        :href="'https://genome-euro.ucsc.edu/cgi-bin/hgTracks?db=' + encodeURIComponent(genomeBrowserDb) + '&position=' + encodeURIComponent('chr' + data.item.c + ':' + Math.max(0, (data.item.p - 500)) + '-' + (data.item.p + 500))"
+                        :text="data.item.c + ':' + data.item.p | numberWithCommas"/>
             </template>
             <template v-slot:cell(i)="data">
                 <Identifiers :identifiers="data.item.i"/>
@@ -136,9 +132,10 @@ f
     import RecordDetails from '@/components/RecordDetails.vue'
     import Identifiers from '@/components/Identifiers.vue'
     import Allele from '@/components/Allele.vue'
+    import Anchor from '@/components/Anchor.vue'
 
     export default Vue.extend({
-        components: {Allele, Identifiers, RecordDetails},
+        components: {Allele, Anchor, Identifiers, RecordDetails},
         props: {
             sample: Object as PropType<Sample>
         },

src/components/SamplePheno.vue

@@ -2,11 +2,9 @@
     <div v-if="phenotypes.items.length === 1 && phenotypes.items[0].phenotypicFeaturesList.length > 0">
         <span v-for="(phenotypicFeature, index) in phenotypes.items[0].phenotypicFeaturesList" :key="index">
             <span class="mr-1">
-                <a v-if="phenotypicFeature.type.id.startsWith('HP:')"
-                   :href="'https://hpo.jax.org/app/browse/term/' + phenotypicFeature.type.id" target="_blank">
-                    {{ phenotypicFeature.type.label }}
-                    <b-icon-box-arrow-in-up-right class="ml-1" />
-                </a>
+                <Anchor v-if="phenotypicFeature.type.id.startsWith('HP:')"
+                        :href="'https://hpo.jax.org/app/browse/term/' + encodeURIComponent(phenotypicFeature.type.id)"
+                        :text="phenotypicFeature.type.label"/>
                 <span v-else>
                     {{ phenotypicFeature.type.label }}
                 </span>
@@ -20,7 +18,7 @@
                   :href="'https://molgenis102.gcc.rug.nl?phenotypes=' + hpoTerms.join(',')"
                   target="_blank">
             {{ $t('vibe') }}
-            <b-icon-box-arrow-in-up-right class="ml-1" />
+            <b-icon-box-arrow-in-up-right class="ml-1"/>
         </b-button>
     </div>
     <div v-else>
@@ -30,16 +28,18 @@
 
 <script lang="ts">
     import Vue from 'vue'
+    import Anchor from '@/components/Anchor.vue'
 
     export default Vue.extend({
+        components: {Anchor},
         props: {
             phenotypes: Object
         },
         computed: {
             hpoTerms: function () {
                 let hpoTerms = []
                 for (let phenotypicFeature of this.phenotypes.items[0].phenotypicFeaturesList) {
-                    if (phenotypicFeature.type.id.startsWith("HP:")) {
+                    if (phenotypicFeature.type.id.startsWith('HP:')) {
                         hpoTerms.push(phenotypicFeature.type.id)
                     }
                 }