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

package/src/components/SampleDetails.vue

@@ -1,91 +0,0 @@
-<template>
-  <span>
-    {{ sample.person.individualId }}
-    <b-button
-      size="sm"
-      variant="link"
-      v-if="sample.person.affectedStatus === 'AFFECTED' && sample.person.sex === 'MALE'"
-      v-b-tooltip.click
-      :title="$t('maleAffected')"
-    >
-      <b-icon-square-fill />
-    </b-button>
-    <b-button
-      size="sm"
-      variant="link"
-      v-else-if="sample.person.affectedStatus === 'UNAFFECTED' && sample.person.sex === 'MALE'"
-      v-b-tooltip.click
-      :title="$t('maleUnaffected')"
-    >
-      <b-icon-square />
-    </b-button>
-    <b-button
-      size="sm"
-      variant="link"
-      v-else-if="sample.person.affectedStatus === 'AFFECTED' && sample.person.sex === 'FEMALE'"
-      v-b-tooltip.click
-      :title="$t('femaleAffected')"
-    >
-      <b-icon-circle-fill />
-    </b-button>
-    <b-button
-      size="sm"
-      variant="link"
-      v-else-if="sample.person.affectedStatus === 'UNAFFECTED' && sample.person.sex === 'FEMALE'"
-      v-b-tooltip.click
-      :title="$t('femaleUnaffected')"
-    >
-      <b-icon-circle />
-    </b-button>
-    <b-button
-      size="sm"
-      variant="link"
-      v-else-if="sample.person.sex === 'FEMALE'"
-      v-b-tooltip.click
-      :title="$t('femaleUnknown')"
-    >
-      <b-icon-question-circle />
-    </b-button>
-    <b-button
-      size="sm"
-      variant="link"
-      v-else-if="sample.person.sex === 'MALE'"
-      v-b-tooltip.click
-      :title="$t('maleUnknown')"
-    >
-      <b-icon-question-square />
-    </b-button>
-    <b-button
-      size="sm"
-      variant="link"
-      v-else-if="sample.person.affectedStatus === 'AFFECTED'"
-      v-b-tooltip.click
-      :title="$t('sexUnknownAffected')"
-    >
-      <b-icon-diamond-fill />
-    </b-button>
-    <b-button
-      size="sm"
-      variant="link"
-      v-else-if="sample.person.affectedStatus === 'UNAFFECTED'"
-      v-b-tooltip.click
-      :title="$t('sexUnknownUnaffected')"
-    >
-      <b-icon-diamond />
-    </b-button>
-    <b-button size="sm" variant="link" v-else v-b-tooltip.click :title="$t('sexUnknownAffectedUnknown')">
-      <b-icon-question-diamond />
-    </b-button>
-  </span>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Api } from '@molgenis/vip-report-api';
-
-export default Vue.extend({
-  props: {
-    sample: Object as PropType<Api.Sample>
-  }
-});
-</script>

package/src/components/SampleInfo.vue

@@ -1,36 +0,0 @@
-<template>
-  <b-row>
-    <b-col>
-      <b-row>
-        <b-col cols="1">
-          <span>{{ $t('pedigree') }}:</span>
-        </b-col>
-        <b-col>
-          <SamplePedigree :sample="sample" />
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="1">
-          <span>{{ $t('phenotypes') }}:</span>
-        </b-col>
-        <b-col>
-          <SamplePheno :phenotypes="phenotypes" />
-        </b-col>
-      </b-row>
-    </b-col>
-  </b-row>
-</template>
-
-<script lang="ts">
-import SamplePheno from '@/components/SamplePheno.vue';
-import SamplePedigree from '@/components/SamplePedigree.vue';
-import Vue from 'vue';
-
-export default Vue.extend({
-  components: { SamplePheno, SamplePedigree },
-  props: {
-    sample: Object,
-    phenotypes: Object
-  }
-});
-</script>

package/src/components/SampleNavigation.vue

@@ -1,45 +0,0 @@
-<template>
-  <b-nav pills vertical class="nav-vertical">
-    <b-nav-item
-      v-for="sample in probandSamples"
-      :key="getId(sample)"
-      :active="isActive(sample)"
-      :disabled="isDisabled(sample)"
-      :to="{ params: { id: getId(sample) } }"
-    >
-      {{ getLabel(sample) }}
-    </b-nav-item>
-  </b-nav>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { mapState } from 'vuex';
-import { Api } from '@molgenis/vip-report-api';
-
-export default Vue.extend({
-  computed: {
-    ...mapState(['selectedSample']),
-    probandSamples(): Api.Sample[] {
-      return this.samples.filter((sample) => sample.proband === true);
-    }
-  },
-  props: {
-    samples: Array as PropType<Api.Sample[]>
-  },
-  methods: {
-    getId(sample: Api.Sample) {
-      return sample.person.individualId;
-    },
-    getLabel(sample: Api.Sample) {
-      return sample.person.individualId;
-    },
-    isActive(sample: Api.Sample) {
-      return this.selectedSample !== null && this.getId(sample) === this.getId(this.selectedSample);
-    },
-    isDisabled(sample: Api.Sample) {
-      return sample.index === -1;
-    }
-  }
-});
-</script>

package/src/components/SamplePedigree.vue

@@ -1,40 +0,0 @@
-<template>
-  <b-row>
-    <b-col>
-      <b-row v-if="sample">
-        <b-col> {{ $t('sample') }}: <SampleDetails :sample="sample" /> </b-col>
-      </b-row>
-      <b-row v-if="sample && samplePaternal">
-        <b-col> {{ $t('father') }}: <SampleDetails :sample="samplePaternal" /> </b-col>
-      </b-row>
-      <b-row v-if="sample && sampleMaternal">
-        <b-col> {{ $t('mother') }}: <SampleDetails :sample="sampleMaternal" /> </b-col>
-      </b-row>
-    </b-col>
-  </b-row>
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Api } from '@molgenis/vip-report-api';
-import SampleDetails from '@/components/SampleDetails.vue';
-import { mapGetters } from 'vuex';
-
-export default Vue.extend({
-  components: { SampleDetails },
-  props: {
-    sample: Object as PropType<Api.Sample>
-  },
-  computed: {
-    ...mapGetters(['getSampleById']),
-    samplePaternal(): Api.Sample | null {
-      const paternalId = this.sample.person.paternalId;
-      return paternalId !== '0' ? this.getSampleById(paternalId) : null;
-    },
-    sampleMaternal(): Api.Sample | null {
-      const maternalId = this.sample.person.maternalId;
-      return maternalId !== '0' ? this.getSampleById(maternalId) : null;
-    }
-  }
-});
-</script>

package/src/components/SamplePheno.vue

@@ -1,55 +0,0 @@
-<template>
-  <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">
-        <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>
-      </span>
-    </span>
-    <b-button
-      v-if="hpoTerms.length > 0"
-      class="ml-3"
-      type="button"
-      size="sm"
-      variant="info"
-      :href="'https://vibe.molgeniscloud.org?phenotypes=' + hpoTerms.join(',')"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      {{ $t('vibe') }}
-      <b-icon-box-arrow-in-up-right class="ml-1" />
-    </b-button>
-  </div>
-  <div v-else>
-    <span class="font-italic">{{ $t('phenotypesUnavailable') }}</span>
-  </div>
-</template>
-
-<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 () {
-      const hpoTerms = [];
-      for (const phenotypicFeature of this.phenotypes.items[0].phenotypicFeaturesList) {
-        if (phenotypicFeature.type.id.startsWith('HP:')) {
-          hpoTerms.push(phenotypicFeature.type.id);
-        }
-      }
-      return hpoTerms;
-    }
-  }
-});
-</script>

package/src/components/SampleReport.vue

@@ -1,36 +0,0 @@
-<template>
-  <b-row>
-    <b-col>
-      <b-row>
-        <b-col>
-          <SampleInfo :sample="sample" :phenotypes="phenotypes" />
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <RecordTable :sample="sample" />
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col>
-          <GenomeBrowser />
-        </b-col>
-      </b-row>
-    </b-col>
-  </b-row>
-</template>
-
-<script lang="ts">
-import RecordTable from '@/components/RecordTable.vue';
-import SampleInfo from '@/components/SampleInfo.vue';
-import Vue from 'vue';
-import GenomeBrowser from '@/components/GenomeBrowser.vue';
-
-export default Vue.extend({
-  components: { SampleInfo, GenomeBrowser, RecordTable },
-  props: {
-    sample: Object,
-    phenotypes: Object
-  }
-});
-</script>

package/src/components/TreeVisualisation.vue

@@ -1,240 +0,0 @@
-<template>
-  <div class="d3-tree-visualisation">
-    <b-button-group vertical class="float-right">
-      <b-button class="btn-xs" v-b-tooltip.click :title="$t('treeInfo')">
-        <b-icon-info-circle />
-      </b-button>
-      <b-button class="btn-xs">
-        <b-icon-arrow-repeat @click="flipGraph" />
-      </b-button>
-      <b-button class="btn-xs" @click="fitOnScreen ? resetZoom() : zoomToFit()">
-        <b-icon-box-arrow-up-right v-if="fitOnScreen" />
-        <b-icon-box-arrow-in-down-left v-else />
-      </b-button>
-    </b-button-group>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-import {
-  BIconInfoCircle,
-  BIconArrowRepeat,
-  BIconBoxArrowInDownLeft,
-  BIconBoxArrowUpRight,
-  BButtonGroup
-} from 'bootstrap-vue';
-import { select as d3Select, Selection } from 'd3-selection';
-import { transition as d3Transition } from 'd3-transition';
-import graphlib from 'dagre/lib/graphlib';
-import * as layout from 'dagre/lib/layout';
-import { retrieveNodes, retrieveEdges } from '@/utils/treeBuilder';
-import { DecisionTree, TreeEdgesArray, TreeNodes } from '@/types/DecisionTree';
-import { Graph } from '@dagrejs/graphlib';
-import {
-  getNode,
-  drawNodes,
-  drawEdges,
-  getBarHeightFromFontSize,
-  defineCanvas,
-  getGraphScale,
-  calculateScaleToFit
-} from '@/utils/treeDrawer';
-import { zoom, ZoomBehavior, zoomIdentity } from 'd3-zoom';
-
-d3Select.prototype.transition = d3Transition;
-
-Vue.component('BIconInfoCircle', BIconInfoCircle);
-Vue.component('BIconArrowRepeat', BIconArrowRepeat);
-Vue.component('BIconBoxArrowInDownLeft', BIconBoxArrowInDownLeft);
-Vue.component('BIconBoxArrowUpRight', BIconBoxArrowUpRight);
-
-export default Vue.extend({
-  name: 'TreeVisualisation',
-  components: {
-    BButtonGroup
-  },
-  props: {
-    tree: String,
-    width: {
-      type: Number,
-      required: false
-    },
-    height: {
-      type: Number,
-      required: false
-    }
-  },
-  mounted(): void {
-    this.render(this.nodes, this.edges);
-  },
-  created(): void {
-    window.addEventListener('resize', this.refresh);
-  },
-  destroyed(): void {
-    window.removeEventListener('resize', this.refresh);
-  },
-  data(): {
-    graphWidth: number;
-    graphHeight: number;
-    graphZoom: ZoomBehavior<SVGSVGElement, never> | undefined;
-    fitOnScreen: boolean;
-    horizontal: boolean;
-    svg: Selection<SVGSVGElement, never, null, undefined> | undefined;
-    clientWidth: number;
-    clientHeight: number;
-  } {
-    return {
-      graphWidth: 0,
-      graphHeight: 0,
-      graphZoom: undefined,
-      fitOnScreen: false,
-      horizontal: false,
-      svg: undefined,
-      clientWidth: 0,
-      clientHeight: 0
-    };
-  },
-  computed: {
-    svgWidth: {
-      set(clientWidth: number): void {
-        this.clientWidth = clientWidth;
-      },
-      get(): number {
-        return this.width ? this.width : this.clientWidth;
-      }
-    },
-    svgHeight: {
-      set(clientHeight: number): void {
-        this.clientHeight = clientHeight;
-      },
-      get(): number {
-        return this.height ? this.height : this.clientHeight;
-      }
-    },
-    fontSize(): number {
-      const fontSize = this.getCss('font-size');
-      return fontSize ? Number(fontSize.replace('px', '')) : 10;
-    },
-    font(): string {
-      const font = this.getCss('font');
-      return font || 'Avenir, Helvetica, Arial, sans-serif';
-    },
-    barHeight(): number {
-      return getBarHeightFromFontSize(this.fontSize);
-    },
-    jsonTree(): DecisionTree {
-      return JSON.parse(this.tree);
-    },
-    nodes(): TreeNodes {
-      return retrieveNodes(this.jsonTree);
-    },
-    edges(): TreeEdgesArray {
-      return retrieveEdges(this.jsonTree);
-    }
-  },
-  watch: {
-    nodes(): void {
-      this.refresh();
-    },
-    edges(): void {
-      this.refresh();
-    },
-    horizontal(): void {
-      this.refresh();
-    }
-  },
-  methods: {
-    flipGraph() {
-      this.horizontal = !this.horizontal;
-      this.refresh();
-    },
-    zoomToFit() {
-      const heightRatio = getGraphScale(this.svgHeight, this.graphHeight);
-      const widthRatio = getGraphScale(this.svgWidth, this.graphWidth);
-      const scale = calculateScaleToFit(heightRatio, widthRatio);
-      if (this.graphZoom && this.svg) {
-        this.refresh();
-        this.graphZoom.scaleBy(this.svg.transition().duration(750), scale, [widthRatio / 2, 0]);
-      }
-    },
-    resetZoom() {
-      if (this.graphZoom && this.svg) {
-        this.svg.transition().duration(750).call(this.graphZoom.transform, zoomIdentity);
-      }
-    },
-    setSvg() {
-      this.svg = defineCanvas(d3Select(this.$el), this.svgWidth, this.svgHeight);
-    },
-    getCss(property: string) {
-      const element = d3Select(this.$el).node();
-      if (element) {
-        return window.getComputedStyle(element).getPropertyValue(property);
-      }
-    },
-    defineNodes(nodes: TreeNodes, g: Graph): void {
-      nodes.forEach((node) => {
-        g.setNode(node.id, getNode(node.label, this.fontSize, node.type, this.font));
-      });
-    },
-    defineEdges(edges: TreeEdgesArray, g: Graph): void {
-      edges.forEach((edge) => {
-        g.setEdge(edge.from, edge.to, { label: edge.label });
-      });
-    },
-    generateGraph(nodes: TreeNodes, edges: TreeEdgesArray) {
-      const g: Graph = new graphlib.Graph();
-      g.setGraph({});
-      this.defineNodes(nodes, g);
-      this.defineEdges(edges, g);
-      if (this.horizontal) {
-        g.graph().rankdir = 'LR';
-      }
-      layout(g);
-      this.graphWidth = g.graph().width;
-      this.graphHeight = g.graph().height;
-      return g;
-    },
-    drawGraph(g: Graph) {
-      if (this.svg) {
-        drawNodes(this.svg, g, this.fontSize, this.graphWidth, this.graphHeight, this.horizontal);
-        drawEdges(this.svg, g, this.barHeight, this.font, this.graphWidth, this.graphHeight, this.horizontal);
-        this.graphZoom = this.defineZoom(this.svg, 0.2, 8);
-        this.svg.call(this.graphZoom);
-      } else {
-        this.refresh();
-      }
-    },
-    defineZoom(
-      svg: Selection<SVGSVGElement, never, null, undefined>,
-      min: number,
-      max: number
-    ): ZoomBehavior<SVGSVGElement, never> {
-      return zoom<SVGSVGElement, never>()
-        .scaleExtent([min, max])
-        .on('zoom', (event) => {
-          const widthFitsScreen = this.svgWidth > this.graphWidth * event.transform.k + event.transform.x;
-          const heightFitsScreen = this.svgHeight > this.graphHeight * event.transform.k + event.transform.y;
-          this.fitOnScreen = widthFitsScreen && heightFitsScreen;
-          svg.selectAll('line').attr('transform', event.transform);
-          svg.selectAll('rect').attr('transform', event.transform);
-          svg.selectAll('text').attr('transform', event.transform);
-        });
-    },
-    render(nodes: TreeNodes, edges: TreeEdgesArray): void {
-      this.svgWidth = (document.documentElement.clientWidth || document.body.clientWidth) - 100;
-      this.svgHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 100;
-      this.setSvg();
-      const g: Graph = this.generateGraph(nodes, edges);
-      this.drawGraph(g);
-    },
-    refresh(): void {
-      if (this.svg) {
-        this.svg.remove();
-      }
-      this.render(this.nodes, this.edges);
-    }
-  }
-});
-</script>

package/src/components/annotation/AnnotationControl.vue

@@ -1,46 +0,0 @@
-<template>
-  <GeneMatchAnnotation v-if="type === 'geneMatch'" :value="annotation.geneMatch" @update="onUpdate" />
-  <ClassificationAnnotation v-else-if="type === 'class'" :value="annotation.class" @update="onUpdate" />
-  <NotesAnnotation v-else-if="type === 'notes'" :value="annotation.txt" @update="onUpdate" />
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import { Annotation } from '@/types/Annotations';
-import GeneMatchAnnotation from '@/components/annotation/GeneMatchAnnotation.vue';
-import ClassificationAnnotation from '@/components/annotation/ClassificationAnnotation.vue';
-import NotesAnnotation from '@/components/annotation/NotesAnnotation.vue';
-import { mapActions } from 'vuex';
-
-export default Vue.extend({
-  components: { ClassificationAnnotation, GeneMatchAnnotation, NotesAnnotation },
-  props: {
-    annotation: { type: Object as PropType<Annotation> },
-    type: {
-      validator: function (value: string) {
-        return ['geneMatch', 'class', 'notes'].indexOf(value) !== -1;
-      }
-    }
-  },
-  methods: {
-    ...mapActions(['upsertAnnotation']),
-    onUpdate(value: string) {
-      const annotation: Annotation = Object.assign({}, this.annotation);
-      switch (this.type) {
-        case 'geneMatch':
-          annotation.geneMatch = value;
-          break;
-        case 'class':
-          annotation.class = value;
-          break;
-        case 'notes':
-          annotation.txt = value;
-          break;
-        default:
-          throw "unknown type '" + this.type + "'";
-      }
-      this.upsertAnnotation(annotation);
-    }
-  }
-});
-</script>

package/src/components/annotation/ClassificationAnnotation.vue

@@ -1,37 +0,0 @@
-<template>
-  <b-form-select v-model="selected" :options="options" size="sm" @change="onChange" />
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-
-export default Vue.extend({
-  props: {
-    value: { type: String as PropType<string> }
-  },
-  data() {
-    return {
-      selected: this.value,
-      options: [
-        { value: null, text: '' },
-        { value: 'P', text: 'P' },
-        { value: 'LP', text: 'LP' },
-        { value: 'VUS', text: 'VUS' },
-        { value: 'LB', text: 'LB' },
-        { value: 'B', text: 'B' },
-        { value: 'ART', text: 'ART' }
-      ]
-    };
-  },
-  methods: {
-    onChange() {
-      this.$emit('update', this.selected);
-    }
-  },
-  watch: {
-    value(value) {
-      this.selected = value;
-    }
-  }
-});
-</script>

package/src/components/annotation/GeneMatchAnnotation.vue

@@ -1,33 +0,0 @@
-<template>
-  <b-form-select v-model="selected" :options="options" size="sm" @change="onChange" />
-</template>
-
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-
-export default Vue.extend({
-  props: {
-    value: { type: String as PropType<string> }
-  },
-  data() {
-    return {
-      selected: this.value,
-      options: [
-        { value: null, text: '' },
-        { value: 'true', text: 'Yes' },
-        { value: 'false', text: 'No' }
-      ]
-    };
-  },
-  methods: {
-    onChange() {
-      this.$emit('update', this.selected);
-    }
-  },
-  watch: {
-    value(value) {
-      this.selected = value;
-    }
-  }
-});
-</script>