@molgenis/vip-report-template 2.6.1 → 2.7.0

package/.travis.yml

@@ -1,6 +1,10 @@
 language: node_js
 node_js:
 - lts/*
+branches:
+  only:
+    - master
+    - /^v\d+\.\d+(\.\d+)?(-\S*)?$/    
 addons:
   sonarcloud:
     organization: molgenis
@@ -26,4 +30,4 @@ deploy:
     file: dist/vip-report-template.html
     on:
       tags: true
-    edge: true # opt in to dpl v2
+    edge: true # opt in to dpl v2

package/README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.com/molgenis/vip-report-template.svg?branch=master)](https://travis-ci.com/molgenis/vip-report-template)
+[![Build Status](https://app.travis-ci.com/molgenis/vip-report-template.svg?branch=master)](https://app.travis-ci.com/molgenis/vip-report-template)
 [![Quality Status](https://sonarcloud.io/api/project_badges/measure?project=molgenis_vip-report-template&metric=alert_status)](https://sonarcloud.io/dashboard?id=molgenis_vip-report-template)
 # Variant Interpretation Pipeline - VCF Report Generator
 See https://github.com/molgenis/vip-report#readme

package/jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   collectCoverage: true,
-  transformIgnorePatterns: ['node_modules/(?!(@molgenis|igv)/)']
+  transformIgnorePatterns: ['node_modules/(?!(@molgenis|igv|d3*)|/)']
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -10,12 +10,14 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "@molgenis/vip-report-api": "^2.4.1",
+    "@molgenis/vip-report-api": "^2.4.3",
     "bootstrap-vue": "^2.21.2",
     "core-js": "^3.9.1",
+    "d3": "^7.0.0",
+    "dagre": "^0.8.5",
     "fflate": "^0.6.10",
     "file-saver": "^2.0.5",
-    "igv": "^2.8.6",
+    "igv": "^2.10.4",
     "vue": "^2.6.12",
     "vue-class-component": "^7.2.6",
     "vue-i18n": "^8.24.0",
@@ -24,6 +26,11 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "@types/d3": "^7.0.0",
+    "@types/d3-selection": "^3.0.0",
+    "@types/d3-shape": "^3.0.1",
+    "@types/d3-zoom": "^3.0.1",
+    "@types/dagre": "^0.7.45",
     "@types/file-saver": "^2.0.1",
     "@types/jest": "^26.0.20",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
@@ -44,7 +51,7 @@
     "eslint-plugin-vue": "^7.7.0",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^5.3.1",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.1",
     "prettier": "^2.2.1",
     "sass-loader": "^11.0.1",
     "ts-mockito": "^2.6.1",

package/src/App.vue

@@ -114,4 +114,36 @@ textarea {
 .igv-ui-popover {
   z-index: 999;
 }
+
+/* Decision tree styling */
+.tree-node {
+  fill: #6c757d;
+}
+
+.tree-exit-node {
+  fill: #007bff;
+}
+
+.tree-exit-node-label {
+  fill: #fff;
+}
+
+.tree-node-label {
+  fill: #fff;
+}
+
+.tree-edge-label {
+  fill: #000;
+}
+
+.d3-tree-visualisation {
+  font-size: 0.8rem;
+}
+.d3-tree-visualisation > svg {
+  border-color: #000;
+  border-style: solid;
+  border-width: thin;
+  display: block;
+  margin: auto;
+}
 </style>

package/src/components/Gene.vue

@@ -0,0 +1,30 @@
+<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/NavigationBar.vue

@@ -7,6 +7,7 @@
       <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">

package/src/components/RecordInfoDetailsItem.vue

@@ -1,11 +1,17 @@
 <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" />
@@ -20,9 +26,10 @@ 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: { PubMedAnchor, RecordInfoDetailsItemValue },
+  components: { Gene, PubMedAnchor, RecordInfoDetailsItemValue },
   props: {
     metadata: Object as PropType<Vcf.InfoMetadata>,
     value: [String, Number, Boolean, Array, Object] as PropType<

package/src/components/RecordInfoDetailsItemValue.vue

@@ -9,7 +9,10 @@
       :text="details ? value : value.replace(/_variant$/, '')"
     />
   </span>
-  <span v-else-if="metadataId === 'SYMBOL' || metadataId === 'Gene_Name'">
+  <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"
@@ -73,10 +76,11 @@
 <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 },
+  components: { Anchor, Gene },
   props: {
     metadataId: String as PropType<string>,
     value: [String, Number, Boolean, Object] as PropType<string | number | boolean | unknown>,

package/src/components/RecordTable.vue

@@ -86,10 +86,10 @@
           :values="data.item.expand ? data.item.effect.items : data.item.effect.items.slice(0, 1)"
         />
       </template>
-      <template v-slot:cell(symbol)="data">
+      <template v-slot:cell(gene)="data">
         <RecordInfoDetailsItemMultiline
-          :metadata="data.item.symbol.metadata"
-          :values="data.item.expand ? data.item.symbol.items : data.item.symbol.items.slice(0, 1)"
+          :metadata="data.item.gene.metadata"
+          :values="data.item.expand ? data.item.gene.items : data.item.gene.items.slice(0, 1)"
         />
       </template>
       <template v-slot:cell(inheritance)="data">
@@ -229,7 +229,7 @@ interface Row {
   f: string[];
   s: Vcf.RecordSample[];
   effect?: unknown;
-  symbol?: unknown;
+  gene?: unknown;
   inheritance?: unknown;
   hgvsC?: unknown;
   hgvsP?: unknown;
@@ -281,6 +281,7 @@ export default Vue.extend({
       'isSamplesContainInheritance',
       'isSamplesContainDenovo',
       'isSamplesContainDepth',
+      'isRecordsContainIncompletePenetrance',
       'sampleMaternal',
       'samplePaternal'
     ]),
@@ -316,7 +317,7 @@ export default Vue.extend({
       if (this.hasConsequences) {
         fields.push({ key: 'expand', label: '', class: ['compact', 'align-top'] });
         fields.push({ key: 'effect', label: 'effect' });
-        fields.push({ key: 'symbol', label: 'symbol' });
+        fields.push({ key: 'gene', label: 'symbol' });
         if (this.isSamplesContainInheritance) {
           fields.push({ key: 'inheritance', label: 'inheritance' });
         }
@@ -509,9 +510,16 @@ export default Vue.extend({
           metadata: consequences.metadata.effect,
           items: consequences.items.map((consequence) => consequence.effect)
         };
-        row.symbol = {
-          metadata: consequences.metadata.symbol,
-          items: consequences.items.map((consequence) => consequence.symbol)
+        row.gene = {
+          metadata: { id: 'GeneObject', type: 'Other', number: { type: 'NUMBER', count: 1 }, description: 'GeneObject' },
+          items: consequences.items.map((consequence) =>
+            consequence.symbol !== null
+              ? {
+                  symbol: consequence.symbol,
+                  incompletePenetrance: consequence.incompletePenetrance
+                }
+              : null
+          )
         };
         if (this.isSamplesContainInheritance) {
           row.inheritance = {