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

package/src/components/RecordInfoDetailsItemMultiline.vue

@@ -1,26 +0,0 @@
-<template>
-  <span>
-    <span v-for="(value, index) in values" :key="index">
-      <RecordInfoDetailsItem :metadata="metadata" :value="value" :details="details" />
-      <br v-if="index < values.length - 1" />
-    </span>
-  </span>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Vcf } from '@molgenis/vip-report-api';
-import RecordInfoDetailsItem from '@/components/RecordInfoDetailsItem.vue';
-
-export default Vue.extend({
-  components: { RecordInfoDetailsItem },
-  props: {
-    metadata: Object as PropType<Vcf.InfoMetadata>,
-    values: Array as PropType<(string | number | boolean | unknown | string[] | number[] | boolean[] | unknown[])[]>,
-    details: {
-      type: Boolean as PropType<boolean>,
-      default: false
-    }
-  }
-});
-</script>

package/src/components/RecordInfoDetailsItemValue.vue

@@ -1,166 +0,0 @@
-<template>
-  <span v-if="metadataId === 'Consequence' || metadataId === 'Annotation'">
-    <Anchor
-      :href="
-        'http://www.sequenceontology.org/browser/obob.cgi?rm=term_list&obo_query=' +
-        encodeURIComponent(value) +
-        '&release=current_release'
-      "
-      :text="details ? value : value.replace(/_variant$/, '')"
-    />
-  </span>
-  <span v-else-if="metadataId === 'GeneObject'">
-    <Gene :value="value" />
-  </span>
-  <span v-else-if="metadataId === 'Gene_Name'">
-    <Anchor
-      :href="'https://www.omim.org/search?search=' + encodeURIComponent(value) + '&field=approved_gene_symbol'"
-      :text="value"
-    />
-  </span>
-  <span v-else-if="metadataId === 'Feature' || metadataId === 'Feature_ID'">
-    <Anchor
-      v-if="isRefSeqFeatureId()"
-      :href="'https://www.ncbi.nlm.nih.gov/nuccore/' + encodeURIComponent(value)"
-      :text="value"
-    />
-    <Anchor
-      v-else-if="isEnsemblFeatureId() && (genomeAssembly === 'GRCh37' || genomeAssembly === 'GRCh38')"
-      :href="
-        'https://' +
-        (genomeAssembly === 'GRCh37' ? 'grch37' : 'www') +
-        '.ensembl.org/Homo_sapiens/Transcript/Summary?db=core;t=' +
-        encodeURIComponent(value)
-      "
-      :text="value"
-    />
-    <span v-else>{{ value }}</span>
-  </span>
-  <span v-else-if="metadataId === 'hgvsC' || metadataId === 'HGVSc'">
-    <Anchor
-      v-if="isRefSeqFeatureId()"
-      :href="'https://www.ncbi.nlm.nih.gov/nuccore/' + encodeURIComponent(value.substring(0, value.indexOf(':')))"
-      :text="getHgvsText(value)"
-    />
-    <Anchor
-      v-else-if="isEnsemblFeatureId() && (genomeAssembly === 'GRCh37' || genomeAssembly === 'GRCh38')"
-      :href="
-        'https://' +
-        (genomeAssembly === 'GRCh37' ? 'grch37' : 'www') +
-        '.ensembl.org/Homo_sapiens/Transcript/Summary?db=core;t=' +
-        encodeURIComponent(value.substring(0, value.indexOf(':')))
-      "
-      :text="getHgvsText(value)"
-    />
-    <span v-else>{{ getHgvsText(value) }}</span>
-  </span>
-  <span v-else-if="metadataId === 'hgvsP' || metadataId === 'HGVSp'">
-    <span>{{ getHgvsText(value) }}</span>
-  </span>
-  <span v-else-if="metadataId === 'gnomAD_AF'">
-    <Anchor
-      v-if="typeof value === 'object' && value.variant !== null"
-      :href="
-        'https://gnomad.broadinstitute.org/variant/' +
-        encodeURIComponent([value.variant.chr, value.variant.pos, value.variant.ref, value.variant.alt].join('-')) +
-        '?dataset=gnomad_r2_1'
-      "
-      :text="details ? value.gnomAD : value.gnomAD.toFixed(5)"
-    />
-    <span v-else>{{ details ? value.gnomAD : value.gnomAD.toFixed(5) }}</span>
-  </span>
-  <span v-else-if="metadataId === 'CLIN_SIG'">{{ getClass(value) }}</span>
-  <span v-else>{{ value }}</span>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import Anchor from '@/components/Anchor.vue';
-import Gene from '@/components/Gene.vue';
-import { mapState } from 'vuex';
-
-export default Vue.extend({
-  components: { Anchor, Gene },
-  props: {
-    metadataId: String as PropType<string>,
-    value: [String, Number, Boolean, Object] as PropType<string | number | boolean | unknown>,
-    details: {
-      type: Boolean as PropType<boolean>,
-      default: false
-    }
-  },
-  computed: {
-    ...mapState(['metadata']),
-    genomeAssembly(): string {
-      return this.metadata.htsFile.genomeAssembly;
-    }
-  },
-  methods: {
-    isRefSeqFeatureId(): boolean {
-      let isRefSeqFeatureId;
-      if (typeof this.value === 'string') {
-        isRefSeqFeatureId =
-          this.value.startsWith('NM_') ||
-          this.value.startsWith('NR_') ||
-          this.value.startsWith('NP_') ||
-          this.value.startsWith('XM_') ||
-          this.value.startsWith('XR_') ||
-          this.value.startsWith('XP_');
-      } else {
-        isRefSeqFeatureId = false;
-      }
-      return isRefSeqFeatureId;
-    },
-    isEnsemblFeatureId(): boolean {
-      let isEnsemblFeatureId;
-      if (typeof this.value === 'string') {
-        isEnsemblFeatureId = this.value.startsWith('ENST');
-      } else {
-        isEnsemblFeatureId = false;
-      }
-      return isEnsemblFeatureId;
-    },
-    getClass(value: string): string {
-      const tokens = value.split('/');
-      const vClasses = [];
-      for (const token of tokens) {
-        let vClass;
-        switch (token) {
-          case 'benign':
-            vClass = 'B';
-            break;
-          case 'likely_benign':
-            vClass = 'LB';
-            break;
-          case 'uncertain_significance':
-            vClass = 'VUS';
-            break;
-          case 'likely_pathogenic':
-            vClass = 'LP';
-            break;
-          case 'pathogenic':
-            vClass = 'P';
-            break;
-          default:
-            vClass = value;
-        }
-        vClasses.push(vClass);
-      }
-      return vClasses.join('/');
-    },
-    getHgvsText(value: string): string {
-      let textValue;
-      value = decodeURIComponent(value);
-      if (this.details) {
-        textValue = value;
-      } else {
-        textValue = value.indexOf(':') !== -1 ? value.substring(value.indexOf(':') + 1) : value;
-        if (textValue.length > 29) {
-          textValue = textValue.substring(0, 26) + '...';
-        }
-      }
-      return textValue;
-    }
-  }
-});
-</script>

package/src/components/RecordInfoNestedDetails.vue

@@ -1,73 +0,0 @@
-<template>
-  <div>
-    <b-table small :fields="fields" :items="items">
-      <template v-slot:head()="data">
-        {{ data.label }}
-      </template>
-      <template v-slot:cell()="data">
-        <RecordInfoDetailsItem :metadata="data.field.metadata" :value="data.item[data.field.index]" :details="true" />
-      </template>
-    </b-table>
-  </div>
-</template>
-
-// FIXME broken due to API changes
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Vcf } from '@molgenis/vip-report-api';
-import RecordInfoDetailsItem from '@/components/RecordInfoDetailsItem.vue';
-import { BvTableField } from 'bootstrap-vue/src/components/table';
-
-interface RecordInfoBvTableField extends BvTableField {
-  index: number;
-  metadata: Vcf.InfoMetadata;
-}
-
-type RecordInfoBvTableFieldArray = Array<string | ({ key: string } & RecordInfoBvTableField)>;
-
-export default Vue.extend({
-  components: { RecordInfoDetailsItem },
-  props: {
-    metadata: Object as PropType<Vcf.NestedInfoMetadata>,
-    info: Array as PropType<Vcf.Value[][]>
-  },
-  computed: {
-    fields(): RecordInfoBvTableFieldArray {
-      const fields = [];
-      let index = 0;
-      for (const info of this.metadata.items) {
-        if (this.hasData(index)) {
-          fields.push({
-            key: info.id,
-            label: info.description,
-            index: index,
-            metadata: info
-          });
-        }
-        ++index;
-      }
-      return fields;
-    },
-    items(): Vcf.Value[] {
-      return this.info;
-    }
-  },
-  methods: {
-    hasData(index: number): boolean {
-      for (const item of this.info) {
-        if (
-          !(
-            item[index] === null ||
-            (Array.isArray(item[index]) && (item[index] as string[] | number[] | Vcf.Value[]).length === 0)
-          )
-        ) {
-          return true;
-        }
-      }
-
-      return false;
-    }
-  }
-});
-</script>

package/src/components/RecordInfoUnnestedDetails.vue

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <b-table small responsive="true" borderless :fields="fields" :items="items">
-      <template v-slot:head()>
-        {{ '' }}
-      </template>
-      <template v-slot:cell(actions)="data">
-        <InfoButton :info="data.item.metadata.description" />
-      </template>
-      <template v-slot:cell(key)="data">
-        {{ data.item.key }}
-      </template>
-      <template v-slot:cell(val)="data">
-        <RecordInfoDetailsItem :metadata="data.item.metadata" :value="data.item.val" :details="true" />
-      </template>
-    </b-table>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Vcf } from '@molgenis/vip-report-api';
-import RecordInfoDetailsItem from '@/components/RecordInfoDetailsItem.vue';
-import InfoButton from '@/components/InfoButton.vue';
-import { BvTableFieldArray } from 'bootstrap-vue/src/components/table';
-
-interface Item {
-  key: string;
-  val: string | string[] | number | number[] | boolean;
-  metadata: Vcf.InfoMetadata;
-}
-export default Vue.extend({
-  components: { InfoButton, RecordInfoDetailsItem },
-  props: {
-    metadata: Array as PropType<Vcf.InfoMetadata[]>,
-    info: Object as PropType<Vcf.InfoContainer>
-  },
-  computed: {
-    fields(): BvTableFieldArray {
-      return [
-        { key: 'actions', label: '', class: ['compact', 'align-middle'] },
-        { key: 'key', label: 'key' },
-        { key: 'val', label: 'value' }
-      ];
-    },
-    items(): Item[] {
-      const items: Item[] = [];
-      for (const metadata of this.metadata) {
-        const info = this.info[metadata.id];
-        if (info !== undefined && info !== null) {
-          const item = {
-            key: metadata.id,
-            val: info as string | string[] | number | number[] | boolean,
-            metadata: metadata
-          };
-          items.push(item);
-        }
-      }
-      items.sort(function (thisItem, thatItem) {
-        return thisItem.key.localeCompare(thatItem.key);
-      });
-      return items;
-    }
-  }
-});
-</script>

package/src/components/RecordSampleDetails.vue

@@ -1,32 +0,0 @@
-<template>
-  <div>
-    <div>
-      <span v-for="(alleleIndex, index) in data.GT.a" :key="index">
-        <Allele :allele="alleles[alleleIndex]" :abbreviate="false" />
-        <span v-if="index < data.GT.a.length - 1">
-          {{ data.GT.p ? '|' : '/' }}
-        </span>
-      </span>
-    </div>
-    <RecordInfoDetails
-      :metadata="metadata"
-      :info="Object.fromEntries(Object.entries(data).filter(([key]) => key !== 'GT'))"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Vcf } 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: Object as PropType<Vcf.FormatMetadataContainer>,
-    data: Object as PropType<unknown>,
-    alleles: Array as PropType<(string | null)[]>
-  }
-});
-</script>