@molgenis/vip-report-template 2.7.2 → 3.0.0-beta2

package/src/components/AnnotationsNav.vue

@@ -1,66 +0,0 @@
-<template>
-  <b-navbar-nav>
-    <b-nav-item-dropdown :text="$t('annotations')">
-      <b-dropdown-item href="#" @click="newAnnotations">{{ $t('new') }}</b-dropdown-item>
-      <b-dropdown-item href="#" @click="openAnnotations">{{ $t('open') }}</b-dropdown-item>
-      <b-dropdown-item href="#" @click="saveAnnotations" :disabled="!isAnnotationEnabled">{{
-        $t('save')
-      }}</b-dropdown-item>
-      <b-dropdown-divider />
-      <b-dropdown-item href="#" @click="exitAnnotations" :disabled="!isAnnotationEnabled">{{
-        $t('exit')
-      }}</b-dropdown-item>
-    </b-nav-item-dropdown>
-  </b-navbar-nav>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { mapActions, mapGetters, mapState } from 'vuex';
-import { saveAs } from 'file-saver';
-
-export default Vue.extend({
-  computed: {
-    ...mapGetters(['isAnnotationEnabled']),
-    ...mapState(['metadata', 'annotations'])
-  },
-  methods: {
-    ...mapActions(['enableAnnotations', 'disableAnnotations', 'importAnnotations']),
-    newAnnotations(): void {
-      this.enableAnnotations();
-    },
-    openAnnotations(): void {
-      const input: HTMLInputElement = document.createElement('input');
-      input.type = 'file';
-      input.accept = '.json';
-      input.onchange = () => {
-        if (input.files === null || input.files.length !== 1) {
-          return;
-        }
-
-        const file = input.files[0];
-        const reader = new FileReader();
-
-        reader.onload = (event) => {
-          if (event.target === null) {
-            return;
-          }
-          this.importAnnotations(JSON.parse(event.target.result as string));
-        };
-
-        reader.readAsText(file);
-      };
-      input.click();
-    },
-    saveAnnotations(): void {
-      const json = JSON.stringify(this.annotations);
-      const filename = this.metadata.htsFile.uri.replace('.vcf.gz', '').replace('.vcf', '') + '_annotations.json';
-      const blob = new Blob([json], { type: 'application/json' });
-      saveAs(blob, filename);
-    },
-    exitAnnotations(): void {
-      this.disableAnnotations();
-    }
-  }
-});
-</script>

package/src/components/Gene.vue

@@ -1,32 +0,0 @@
-<template>
-  <span>
-    <Anchor
-      :href="'https://www.omim.org/search?search=' + encodeURIComponent(value.symbol) + '&field=approved_gene_symbol'"
-      :text="value.symbol"
-    />
-    <b-button
-      pill
-      v-if="value.incompletePenetrance"
-      size="sm"
-      variant="info"
-      class="ml-2 p-0"
-      v-b-tooltip.click
-      :title="$t('incompletePenetrance')"
-    >
-      <sup>IP</sup>
-    </b-button>
-  </span>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import Anchor from '@/components/Anchor.vue';
-import { Gene } from '@/types/Gene';
-
-export default Vue.extend({
-  components: { Anchor },
-  props: {
-    value: { type: Object as PropType<Gene> }
-  }
-});
-</script>

package/src/components/GenomeBrowser.vue

@@ -1,143 +0,0 @@
-<template>
-  <div>
-    <span v-if="genomeBrowserUnavailable">{{ $t('genomeBrowserUnavailable') }}</span>
-    <div ref="igv"></div>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import igv from 'igv';
-import { mapActions, mapGetters, mapState } from 'vuex';
-import { Vcf } from '@molgenis/vip-report-api';
-
-export default Vue.extend({
-  computed: {
-    ...mapGetters(['genomeBrowserDb']),
-    ...mapState(['selectedRecord', 'selectedSample'])
-  },
-  data() {
-    return {
-      genomeBrowserUnavailable: false
-    };
-  },
-  methods: {
-    ...mapActions(['getBam', 'getFastaGz', 'getGenesGz', 'getVcfGz']),
-    hasGenomeBrowser() {
-      return Vue.prototype.$browser !== undefined;
-    },
-    async createGenomeBrowser(config: unknown) {
-      Vue.prototype.$browser = await igv.createBrowser(this.$refs.igv, config);
-    },
-    async updateGenomeBrowser(record: Vcf.Record | null) {
-      const config = record !== null ? await this.createBrowserConfig(record) : null;
-      if (config === null) {
-        if (this.hasGenomeBrowser()) {
-          await this.deleteGenomeBrowser();
-        }
-      } else {
-        if (this.hasGenomeBrowser()) {
-          Vue.prototype.$browser.loadSessionObject(config);
-        } else {
-          await this.createGenomeBrowser(config);
-        }
-      }
-      this.genomeBrowserUnavailable = config === null;
-    },
-    async deleteGenomeBrowser() {
-      igv.removeBrowser(Vue.prototype.$browser);
-      Vue.prototype.$browser = undefined;
-      this.genomeBrowserUnavailable = this.hasGenomeBrowser();
-    },
-    async createBrowserConfig(record: Vcf.Record): Promise<unknown | null> {
-      const sampleIds = [];
-      if (this.selectedSample) {
-        const sampleId = this.selectedSample.person.individualId;
-        sampleIds.push(sampleId);
-
-        const paternalId = this.selectedSample.person.paternalId;
-        if (paternalId !== '0') {
-          sampleIds.push(paternalId);
-        }
-
-        const maternalId = this.selectedSample.person.maternalId;
-        if (maternalId !== '0') {
-          sampleIds.push(maternalId);
-        }
-      }
-
-      const data = await Promise.all([
-        this.getFastaGz({ contig: record.c, pos: record.p }),
-        this.getVcfGz(),
-        this.getGenesGz(),
-        ...sampleIds.map((sampleId) => this.getBam(sampleId))
-      ]);
-      const fastaGz = data[0];
-      const vcfGz = data[1];
-      const genesGz = data[2];
-      const bams = data.slice(3);
-      if (fastaGz === null) {
-        return null;
-      }
-
-      let order = 1;
-      let tracks = [];
-      if (genesGz) {
-        tracks.push({
-          order: order++,
-          type: 'annotation',
-          format: 'refGene',
-          name: 'Genes',
-          url: 'data:application/gzip;base64,' + genesGz.toString('base64')
-        });
-      }
-      tracks.push({
-        order: order++,
-        type: 'variant',
-        format: 'vcf',
-        name: 'Variants',
-        url: 'data:application/gzip;base64,' + vcfGz.toString('base64')
-      });
-
-      for (let i = 0; i < sampleIds.length; ++i) {
-        const bam = bams[i];
-        if (bam !== null) {
-          const sampleId = sampleIds[i];
-          tracks.push({
-            order: order++,
-            type: 'alignment',
-            format: 'bam',
-            name: `Alignment (${sampleId})`,
-            url: 'data:application/gzip;base64,' + bam.toString('base64')
-          });
-        }
-      }
-
-      return {
-        reference: {
-          id: this.genomeBrowserDb !== null ? this.genomeBrowserDb : 'reference_unknown',
-          name: this.genomeBrowserDb !== null ? this.genomeBrowserDb : 'Reference',
-          fastaURL: 'data:application/gzip;base64,' + fastaGz.toString('base64'),
-          tracks: tracks
-        },
-        locus: record.c + ':' + record.p,
-        showChromosomeWidget: false,
-        loadDefaultGenomes: false,
-        nucleotideColors: {
-          A: 'rgb(144, 238, 144)',
-          C: 'rgb(176, 196, 222)',
-          T: 'rgb(238, 162, 173)',
-          G: 'rgb(255, 236, 139)',
-          N: 'rgb(80,80,80)'
-        },
-        showCenterGuide: true
-      };
-    }
-  },
-  watch: {
-    selectedRecord(newRecord: Vcf.Record | null) {
-      this.updateGenomeBrowser(newRecord);
-    }
-  }
-});
-</script>

package/src/components/Genotype.vue

@@ -1,59 +0,0 @@
-<template>
-  <span>
-    <span v-for="(alleleIndex, index) in genotype.a" :key="index">
-      <Allele :allele="alleles[alleleIndex]" />
-      <span v-if="index < genotype.a.length - 1">
-        {{ genotype.p ? '|' : '/' }}
-      </span>
-    </span>
-    <b-button
-      v-if="allelicImbalance || lowReadDepth"
-      size="sm"
-      variant="link"
-      class="ml-2 p-0"
-      v-b-tooltip.click
-      :title="
-        (lowReadDepth ? $t('lowReadDepth') : '') +
-        (allelicImbalance ? (lowReadDepth ? ' & ' : '') + $t('allelicImbalance') : '')
-      "
-    >
-      <b-icon-exclamation-circle variant="danger" />
-    </b-button>
-  </span>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Vcf } from '@molgenis/vip-report-api';
-import Allele from '@/components/Allele.vue';
-
-export default Vue.extend({
-  components: { Allele },
-  props: {
-    genotype: Object as PropType<Vcf.Genotype>,
-    alleles: Array as PropType<(string | null)[]>,
-    readDepth: { type: Number as PropType<number>, required: false },
-    allelicDepth: { type: Array as PropType<number[]>, required: false }
-  },
-  computed: {
-    lowReadDepth(): boolean {
-      let lowReadDepth = false;
-      if (this.readDepth && this.readDepth < 20) {
-        lowReadDepth = true;
-      }
-      return lowReadDepth;
-    },
-    allelicImbalance(): boolean {
-      let allelicImbalance = false;
-      if (this.allelicDepth && this.genotype.t === 'het') {
-        const total = this.allelicDepth.reduce((a, b) => a + b, 0);
-        const balance = this.allelicDepth[0] / total;
-        if (balance < 0.2 || balance > 0.8) {
-          allelicImbalance = true;
-        }
-      }
-      return allelicImbalance;
-    }
-  }
-});
-</script>

package/src/components/Identifiers.vue

@@ -1,32 +0,0 @@
-<template>
-  <div>
-    <span v-for="(id, index) in identifiers" :key="id">
-      <!-- dbSNP ID -->
-      <Anchor
-        v-if="id.startsWith('rs')"
-        :href="'https://www.ncbi.nlm.nih.gov/snp/' + encodeURIComponent(id)"
-        text="dbSNP"
-      />
-      <!-- dbVar ID -->
-      <Anchor
-        v-else-if="id.startsWith('esv') || id.startsWith('nsv')"
-        :href="'https://www.ncbi.nlm.nih.gov/dbvar/variants/' + encodeURIComponent(id)"
-        text="dbVar"
-      />
-      <span v-else>{{ id }}</span>
-      <span v-if="index < identifiers.length - 1">, </span>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import Anchor from '@/components/Anchor.vue';
-
-export default Vue.extend({
-  components: { Anchor },
-  props: {
-    identifiers: Array as PropType<string[]>
-  }
-});
-</script>

package/src/components/InfoButton.vue

@@ -1,15 +0,0 @@
-<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">
-import Vue, { PropType } from 'vue';
-
-export default Vue.extend({
-  props: {
-    info: String as PropType<string>
-  }
-});
-</script>

package/src/components/NavigationBar.vue

@@ -1,27 +0,0 @@
-<template>
-  <b-navbar type="light" variant="light">
-    <b-navbar-brand :to="{ name: 'home' }">{{ $t('brand') }}</b-navbar-brand>
-    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
-    <b-collapse id="nav-collapse" is-nav>
-      <AnnotationsNav />
-      <b-navbar-nav>
-        <b-nav-item-dropdown :text="$t('data')">
-          <b-dropdown-item :to="{ name: 'vcf' }">{{ $t('vcf') }}</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'decision-tree' }">{{ $t('treeViewer') }}</b-dropdown-item>
-        </b-nav-item-dropdown>
-      </b-navbar-nav>
-      <b-navbar-nav class="ml-auto">
-        <b-nav-item :to="{ name: 'about' }">{{ $t('about') }}</b-nav-item>
-      </b-navbar-nav>
-    </b-collapse>
-  </b-navbar>
-</template>
-
-<script lang="ts">
-import AnnotationsNav from '@/components/AnnotationsNav.vue';
-import Vue from 'vue';
-
-export default Vue.extend({
-  components: { AnnotationsNav }
-});
-</script>

package/src/components/PubMedAnchor.vue

@@ -1,25 +0,0 @@
-<template>
-  <Anchor
-    :href="
-      'https://pubmed.ncbi.nlm.nih.gov/?term=' +
-      pubMedIds
-        .filter((pubMedId) => pubMedId !== 25741868)
-        .map((pubMedId) => encodeURIComponent(pubMedId) + '[UID]')
-        .join('+OR+') +
-      '&sort=pubdate'
-    "
-    text="PubMed"
-  />
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import Anchor from '@/components/Anchor.vue';
-
-export default Vue.extend({
-  components: { Anchor },
-  props: {
-    pubMedIds: Array as PropType<number[]>
-  }
-});
-</script>

package/src/components/RecordCommonDetails.vue

@@ -1,106 +0,0 @@
-<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" :abbreviate="false" />
-        </span>
-        <span v-else-if="data.item.key === 'a'">
-          <span v-for="(alt, index) in data.item.val" :key="index">
-            <Allele :allele="alt" :abbreviate="false" />
-            <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'">
-          <span v-for="(val, index) in data.item.val" :key="index">
-            {{ val }}<span v-if="index < data.item.val.length - 1">, </span>
-          </span>
-        </span>
-      </template>
-    </b-table>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Vcf } from '@molgenis/vip-report-api';
-import Allele from '@/components/Allele.vue';
-import Identifiers from '@/components/Identifiers.vue';
-import { BvTableFieldArray } from 'bootstrap-vue/src/components/table';
-
-interface Item {
-  key: string;
-  val: string | (string | null)[] | number | number[] | boolean | null;
-}
-
-export default Vue.extend({
-  components: { Allele, Identifiers },
-  props: {
-    record: Object as PropType<Vcf.Record>
-  },
-  computed: {
-    fields(): BvTableFieldArray {
-      return [
-        { key: 'key', label: 'key' },
-        { key: 'val', label: 'value' }
-      ];
-    },
-    items(): Item[] {
-      const items: Item[] = [
-        { key: 'c', val: this.record['c'] },
-        { key: 'p', val: this.record['p'] }
-      ];
-      if (Object.prototype.hasOwnProperty.call(this.record, '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'] });
-      if (Object.prototype.hasOwnProperty.call(this.record, 'q')) {
-        items.push({ key: 'q', val: this.record['q'] });
-      }
-      if (Object.prototype.hasOwnProperty.call(this.record, 'f')) {
-        items.push({ key: 'f', val: this.record['f'] });
-      }
-      return items;
-    }
-  }
-});
-</script>

package/src/components/RecordDetails.vue

@@ -1,56 +0,0 @@
-<template>
-  <div>
-    <RecordCommonDetails :record="record" />
-    <h4>Info</h4>
-    <RecordInfoDetails :metadata="metadata.info" :info="record.n" />
-    <b-row v-if="sample">
-      <b-col>
-        <h4>{{ $t('sample') }}</h4>
-        <RecordSampleDetails
-          :metadata="metadata.format"
-          :data="record.s[sample.index]"
-          :alleles="[record.r].concat(record.a)"
-        />
-      </b-col>
-      <b-col>
-        <h4>{{ $t('father') }}</h4>
-        <RecordSampleDetails
-          v-if="samplePaternal !== null"
-          :metadata="metadata.format"
-          :data="record.s[samplePaternal.index]"
-          :alleles="[record.r].concat(record.a)"
-        />
-      </b-col>
-      <b-col>
-        <h4>{{ $t('mother') }}</h4>
-        <RecordSampleDetails
-          v-if="sampleMaternal !== null"
-          :metadata="metadata.format"
-          :data="record.s[sampleMaternal.index]"
-          :alleles="[record.r].concat(record.a)"
-        />
-      </b-col>
-    </b-row>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Api, Vcf } from '@molgenis/vip-report-api';
-import RecordCommonDetails from '@/components/RecordCommonDetails.vue';
-import RecordInfoDetails from '@/components/RecordInfoDetails.vue';
-import RecordSampleDetails from '@/components/RecordSampleDetails.vue';
-import { mapGetters } from 'vuex';
-
-export default Vue.extend({
-  components: { RecordCommonDetails, RecordInfoDetails, RecordSampleDetails },
-  props: {
-    metadata: Object as PropType<Vcf.Metadata>,
-    record: Object as PropType<Vcf.Record>,
-    sample: { type: Object as PropType<Api.Sample>, required: false }
-  },
-  computed: {
-    ...mapGetters(['sampleMaternal', 'samplePaternal'])
-  }
-});
-</script>

package/src/components/RecordInfoDetails.vue

@@ -1,58 +0,0 @@
-<template>
-  <div>
-    <RecordInfoUnnestedDetails :metadata="unnestedMetadata" :info="info" />
-    <div v-for="metadata in nestedMetadata" :key="metadata.key">
-      <h4>
-        {{ metadata.id }}
-        <InfoButton :info="metadata.description" />
-      </h4>
-      <RecordInfoNestedDetails :metadata="metadata.nested" :info="getNestedInfo(metadata)" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Vcf } from '@molgenis/vip-report-api';
-import RecordInfoNestedDetails from '@/components/RecordInfoNestedDetails.vue';
-import RecordInfoUnnestedDetails from '@/components/RecordInfoUnnestedDetails.vue';
-import InfoButton from '@/components/InfoButton.vue';
-
-export default Vue.extend({
-  components: {
-    InfoButton,
-    RecordInfoNestedDetails,
-    RecordInfoUnnestedDetails
-  },
-  props: {
-    metadata: Object as PropType<Vcf.InfoMetadataContainer>,
-    info: Object as PropType<Vcf.InfoContainer>
-  },
-  computed: {
-    unnestedMetadata: function () {
-      const unnestedMetadata = Object.values(this.metadata).filter((infoMetadata) => infoMetadata.nested === undefined);
-      unnestedMetadata.sort(this.sortMetadata);
-      return unnestedMetadata;
-    },
-    nestedMetadata: function () {
-      const nestedMetadata = Object.values(this.metadata).filter((infoMetadata) => infoMetadata.nested !== undefined);
-      nestedMetadata.sort(this.sortMetadata);
-      return nestedMetadata;
-    }
-  },
-  methods: {
-    sortMetadata(thisItem: Vcf.InfoMetadata, thatItem: Vcf.InfoMetadata): number {
-      return thisItem.id.localeCompare(thatItem.id);
-    },
-    getNestedInfo(metadata: Vcf.InfoMetadata): Vcf.Value[] {
-      let nestedInfo: Vcf.Value[][];
-      if (metadata.number && metadata.number.count === 1) {
-        nestedInfo = [this.info[metadata.id] as Vcf.Value[]];
-      } else {
-        nestedInfo = this.info[metadata.id] as Vcf.Value[][];
-      }
-      return nestedInfo;
-    }
-  }
-});
-</script>

package/src/components/RecordInfoDetailsItem.vue

@@ -1,44 +0,0 @@
-<template>
-  <span v-if="metadata.number.type === 'NUMBER' && metadata.number.count === 1">
-    <span v-if="metadata.id === 'GeneObject'">
-      <Gene v-if="value.length > 0" :value="value" />
-    </span>
-    <RecordInfoDetailsItemValue v-if="value !== null" :metadataId="metadata.id" :value="value" :details="details" />
-  </span>
-  <span v-else>
-    <span v-if="metadata.id === 'PUBMED'">
-      <PubMedAnchor v-if="value.length > 0" :pubMedIds="value" />
-    </span>
-    <span v-else-if="metadata.id === 'GeneObject'">
-      <Gene v-if="value.length > 0" :value="value" />
-    </span>
-    <span v-else>
-      <span v-for="(item, index) in value" :key="index">
-        <RecordInfoDetailsItemValue v-if="value !== null" :metadataId="metadata.id" :value="item" :details="details" />
-        <span v-if="index < value.length - 1">, </span>
-      </span>
-    </span>
-  </span>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Vcf } from '@molgenis/vip-report-api';
-import RecordInfoDetailsItemValue from '@/components/RecordInfoDetailsItemValue.vue';
-import PubMedAnchor from '@/components/PubMedAnchor.vue';
-import Gene from '@/components/Gene.vue';
-
-export default Vue.extend({
-  components: { Gene, PubMedAnchor, RecordInfoDetailsItemValue },
-  props: {
-    metadata: Object as PropType<Vcf.InfoMetadata>,
-    value: [String, Number, Boolean, Array, Object] as PropType<
-      string | number | boolean | unknown | string[] | number[] | boolean[] | unknown[]
-    >,
-    details: {
-      type: Boolean as PropType<boolean>,
-      default: false
-    }
-  }
-});
-</script>