Merge pull request #13 from molgenis/fix/small-issues

fix: small issues and improve details rendering
molgenis · Jun 23, 2020 · 801b0a5 · 801b0a5
2 parents 8a3683a + d9ac9c4
commit 801b0a5
Show file tree

Hide file tree

Showing 11 changed files with 272 additions and 157 deletions.
diff --git a/src/components/InfoButton.vue b/src/components/InfoButton.vue
@@ -0,0 +1,16 @@
+<template>
+    <b-button size="sm" variant="link" v-b-tooltip.click :title="info">
+        <b-icon-question-circle class="mr-1"/>
+    </b-button>
+</template>
+
+<script lang="ts">
+    // eslint-disable-next-line no-unused-vars
+    import Vue, {PropType} from 'vue'
+
+    export default Vue.extend({
+        props: {
+            info: String as PropType<string>
+        }
+    })
+</script>
diff --git a/src/components/RecordCommonDetails.vue b/src/components/RecordCommonDetails.vue
@@ -0,0 +1,104 @@
+<template>
+    <div>
+        <b-table
+                small
+                responsive=true
+                borderless
+                :fields="fields"
+                :items="items">
+            <template v-slot:head()>
+                {{ '' }}
+            </template>
+            <template v-slot:cell(key)="data">
+                <span v-if="data.item.key === 'c'">
+                    {{ $t('chr') }}
+                </span>
+                <span v-else-if="data.item.key === 'p'">
+                    {{ $t('pos') }}
+                </span>
+                <span v-else-if="data.item.key === 'i'">
+                    {{ $t('id') }}
+                </span>
+                <span v-else-if="data.item.key === 'r'">
+                    {{ $t('ref') }}
+                </span>
+                <span v-else-if="data.item.key === 'a'">
+                    {{ $t('alt') }}
+                </span>
+                <span v-else-if="data.item.key === 'q'">
+                    {{ $t('qual') }}
+                </span>
+                <span v-else-if="data.item.key === 'f'">
+                    {{ $t('filter') }}
+                </span>
+            </template>
+            <template v-slot:cell(val)="data">
+                <span v-if="data.item.key === 'c'">
+                    {{ data.item.val }}
+                </span>
+                <span v-else-if="data.item.key === 'p'">
+                    {{ data.item.val }}
+                </span>
+                <span v-else-if="data.item.key === 'i'">
+                    <Identifiers :identifiers="data.item.val" />
+                </span>
+                <span v-else-if="data.item.key === 'r'">
+                    <Allele :allele="data.item.val"/>
+                </span>
+                <span v-else-if="data.item.key === 'a'">
+                    <span v-for="(alt, index) in data.item.val" :key="index">
+                        <Allele :allele="alt"/>
+                        <span v-if="index < data.item.val.length - 1">, </span>
+                    </span>
+                </span>
+                <span v-else-if="data.item.key === 'q'">
+                    {{ data.item.val }}
+                </span>
+                <span v-else-if="data.item.key === 'f'">
+                    {{ data.item.val }}
+                </span>
+            </template>
+        </b-table>
+    </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 {Record} from '@molgenis/vip-report-api'
+    import Allele from '@/components/Allele.vue'
+    import Identifiers from '@/components/Identifiers.vue'
+
+    export default Vue.extend({
+        components: {Allele, Identifiers},
+        props: {
+            record: Object as PropType<Record>
+        },
+        computed: {
+            fields: function () {
+                return [
+                    {key: 'key', label: 'key'},
+                    {key: 'val', label: 'value'}]
+            },
+            items() {
+                const items:object[] = [{key: 'c', val: this.record['c']},{key: 'p', val: this.record['p']}]
+                // eslint-disable-next-line
+                if(this.record.hasOwnProperty('i')) {
+                    items.push({key: 'i', val: this.record['i']})
+                }
+                items.push({key: 'r', val: this.record['r']})
+                items.push({key: 'a', val: this.record['a']})
+                // eslint-disable-next-line
+                if(this.record.hasOwnProperty('q')) {
+                    items.push({key: 'q', val: this.record['q']})
+                }
+                // eslint-disable-next-line
+                if(this.record.hasOwnProperty('f')) {
+                    items.push({key: 'f', val: this.record['f']})
+                }
+                return items
+            }
+        }
+    })
+</script>
diff --git a/src/components/RecordDetails.vue b/src/components/RecordDetails.vue
@@ -1,75 +1,10 @@
 <template>
     <div>
-        <b-table
-                small
-                responsive=true
-                :fields="fields"
-                :items="items">
-            <template v-slot:head()="data">
-                {{ data.label ? $t(data.label) : '' }}
-            </template>
-            <template v-slot:cell(key)="data">
-                <span v-if="data.item.key === 'c'">
-                    {{ $t('chr') }}
-                </span>
-                <span v-else-if="data.item.key === 'p'">
-                    {{ $t('pos') }}
-                </span>
-                <span v-else-if="data.item.key === 'i'">
-                    {{ $t('id') }}
-                </span>
-                <span v-else-if="data.item.key === 'r'">
-                    {{ $t('ref') }}
-                </span>
-                <span v-else-if="data.item.key === 'a'">
-                    {{ $t('alt') }}
-                </span>
-                <span v-else-if="data.item.key === 'q'">
-                    {{ $t('qual') }}
-                </span>
-                <span v-else-if="data.item.key === 'f'">
-                    {{ $t('filter') }}
-                </span>
-                <span v-else-if="data.item.key === 'n'">
-                    {{ $t('info') }}
-                </span>
-                <span v-else-if="data.item.key === 's'">
-                    {{ $t('sample') }}
-                </span>
-            </template>
-            <template v-slot:cell(val)="data">
-                <span v-if="data.item.key === 'c'">
-                    {{ data.item.val }}
-                </span>
-                <span v-else-if="data.item.key === 'p'">
-                    {{ data.item.val }}
-                </span>
-                <span v-else-if="data.item.key === 'i'">
-                    <Identifiers :identifiers="data.item.val" />
-                </span>
-                <span v-else-if="data.item.key === 'r'">
-                    <Allele :allele="data.item.val"/>
-                </span>
-                <span v-else-if="data.item.key === 'a'">
-                    <span v-for="(alt, index) in data.item.val" :key="index">
-                        <Allele :allele="alt"/>
-                        <span v-if="index < data.item.val.length - 1">, </span>
-                    </span>
-                </span>
-                <span v-else-if="data.item.key === 'q'">
-                    {{ data.item.val }}
-                </span>
-                <span v-else-if="data.item.key === 'f'">
-                    {{ data.item.val }}
-                </span>
-                <span v-else-if="data.item.key === 'n'">
-                    <RecordInfoDetails :metadata="metadata.info" :info="data.item.val" />
-                </span>
-                <span v-else-if="data.item.key === 's'">
-                    {{ data.item.val[sample.index] }}
-                </span>
-            </template>
-        </b-table>
+        <RecordCommonDetails :record="record" />
+        <h4>Info</h4>
+        <RecordInfoDetails :metadata="metadata.info" :info="record.n" />
+        <h4>Sample</h4>
+        <RecordSampleDetails :data="record.s[sample.index]" />
     </div>
 </template>
 
@@ -78,31 +13,16 @@
     import Vue, {PropType} from 'vue'
     // eslint-disable-next-line no-unused-vars
     import {Record, RecordsMetadata, Sample} from '@molgenis/vip-report-api'
-    import Allele from '@/components/Allele.vue'
-    import Identifiers from '@/components/Identifiers.vue'
+    import RecordCommonDetails from '@/components/RecordCommonDetails.vue'
     import RecordInfoDetails from '@/components/RecordInfoDetails.vue'
+    import RecordSampleDetails from '@/components/RecordSampleDetails.vue'
 
     export default Vue.extend({
-        components: {Allele, Identifiers, RecordInfoDetails},
+        components: {RecordCommonDetails, RecordInfoDetails, RecordSampleDetails},
         props: {
             metadata: Object as PropType<RecordsMetadata>,
             record: Object as PropType<Record>,
             sample: Object as PropType<Sample>
-        },
-        computed: {
-            fields: function () {
-                return [
-                    {key: 'key', label: 'prop'},
-                    {key: 'val', label: 'value'}]
-            },
-            items() {
-                const items = []
-                for (let key in this.record) {
-                    const item = {key: key, val: this.record[key]}
-                    items.push(item)
-                }
-                return items
-            }
         }
     })
 </script>
diff --git a/src/components/RecordInfoDetails.vue b/src/components/RecordInfoDetails.vue
@@ -1,21 +1,13 @@
 <template>
     <div>
-        <b-table
-                small
-                responsive=true
-                :fields="fields"
-                :items="items">
-            <template v-slot:head()="data">
-                {{ $t(data.label) }}
-            </template>
-            <template v-slot:cell(key)="data">
-                <!-- todo: show description in addition to key: {{ getInfoMetadata(data.item.key).description }} -->
-                {{ data.item.key }}
-            </template>
-            <template v-slot:cell(val)="data">
-                <RecordInfoDetailsItem :metadata="getInfoMetadata(data.item.key)" :value="data.item.val"/>
-            </template>
-        </b-table>
+        <RecordInfoUnnestedDetails :metadata="unnestedMetadata" :info="info" />
+        <div v-for="metadata in nestedMetadata" :key="metadata.key">
+            <h5>
+                {{ metadata.id }}
+                <InfoButton :info="metadata.description" />
+            </h5>
+            <RecordInfoNestedDetails :metadata="metadata.nested" :info="getNestedInfo(metadata)" />
+        </div>
     </div>
 </template>
 
@@ -24,40 +16,42 @@
     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'
+    import RecordInfoNestedDetails from '@/components/RecordInfoNestedDetails.vue'
+    import RecordInfoUnnestedDetails from '@/components/RecordInfoUnnestedDetails.vue'
+    import InfoButton from '@/components/InfoButton.vue'
 
     export default Vue.extend({
-        components: {RecordInfoDetailsItem},
+        components: {InfoButton, RecordInfoNestedDetails, RecordInfoUnnestedDetails},
         props: {
             metadata: Array as PropType<InfoMetadata[]>,
             info: Object as PropType<object>
         },
         computed: {
-            fields: function () {
-                return [
-                    {key: 'key', label: 'prop'},
-                    {key: 'val', label: 'value'}]
+            unnestedMetadata: function () {
+                const unnestedMetadata = this.metadata.filter(infoMetadata => infoMetadata.type !== 'NESTED')
+                unnestedMetadata.sort(this.sortMetadata)
+                return unnestedMetadata
             },
-            items() {
-                const items = []
-                for (let key in this.info) {
-                    // fix for invalid VCF
-                    if (key !== '') {
-                        // @ts-ignore
-                        const item = {key: key, val: this.info[key]}
-                        items.push(item)
-                    }
-                }
-                return items
+            nestedMetadata: function () {
+                const nestedMetadata = this.metadata.filter(infoMetadata => infoMetadata.type === 'NESTED')
+                nestedMetadata.sort(this.sortMetadata)
+                return nestedMetadata
             }
         },
         methods: {
-            getInfoMetadata(key: string): InfoMetadata {
-                const infoMetadata = this.metadata.find(item => item.id === key)
-                if (infoMetadata === undefined) {
-                    throw new Error('missing info metadata for \'' + key + '\'')
+            sortMetadata(thisItem: InfoMetadata, thatItem: InfoMetadata): number {
+                return thisItem.id.localeCompare(thatItem.id)
+            },
+            getNestedInfo(metadata: InfoMetadata): object[] {
+                let nestedInfo: object[]
+                if(metadata.number && metadata.number.count === 1) {
+                    // @ts-ignore
+                    nestedInfo = [this.info[metadata.id]]
+                } else {
+                    // @ts-ignore
+                    nestedInfo = this.info[metadata.id]
                 }
-                return infoMetadata
+                return nestedInfo
             }
         }
     })

diff --git a/src/components/RecordInfoDetailsItem.vue b/src/components/RecordInfoDetailsItem.vue
@@ -4,21 +4,11 @@
             {{ value }}
         </span>
         <span v-else-if="metadata.number && metadata.number.type === 'NUMBER' && metadata.number.count === 1">
-            <span v-if="metadata.type === 'NESTED'">
-                <RecordInfoNestedDetails :metadata="metadata.nested" :info="[value]"/>
-            </span>
-            <span v-else>
-                {{ value }}
-            </span>
+            {{ value }}
         </span>
         <span v-else>
-            <span v-if="metadata.type === 'NESTED'">
-                <RecordInfoNestedDetails :metadata="metadata.nested" :info="value"/>
-            </span>
-            <span v-else>
-                <span v-for="(item, index) in value" :key="index">
-                {{ item }}<span v-if="index < value.length - 1">, </span>
-                </span>
+            <span v-for="(item, index) in value" :key="index">
+            {{ item }}<span v-if="index < value.length - 1">, </span>
             </span>
         </span>
     </div>
@@ -29,10 +19,8 @@
     import Vue, {PropType} from 'vue'
     // eslint-disable-next-line no-unused-vars
     import {InfoMetadata} from '@molgenis/vip-report-api'
-    import RecordInfoNestedDetails from '@/components/RecordInfoNestedDetails.vue'
 
     export default Vue.extend({
-        components: {RecordInfoNestedDetails},
         props: {
             metadata: Object as PropType<InfoMetadata>,
             value: [String, Number, Boolean, Array, Object] as PropType<string | number | boolean | object | string[] | number[] | boolean[] | object[]>

diff --git a/src/components/RecordInfoNestedDetails.vue b/src/components/RecordInfoNestedDetails.vue
@@ -5,7 +5,7 @@
                 :fields="fields"
                 :items="items">
             <template v-slot:head()="data">
-                {{ $t(data.label) }}
+                {{ data.label }}
             </template>
             <template v-slot:cell()="data">
                 <span v-if="data.field.metadata.number === undefined">