genome browser: use embedded bam data

package.json

@@ -10,7 +10,7 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "@molgenis/vip-report-api": "^2.3.0",
+    "@molgenis/vip-report-api": "^2.3.1",
     "bootstrap-vue": "^2.21.2",
     "core-js": "^3.9.1",
     "file-saver": "^2.0.5",

src/components/GenomeBrowser.vue

@@ -11,10 +11,10 @@ import { Vcf } from '@molgenis/vip-report-api';
 export default Vue.extend({
   computed: {
     ...mapGetters(['genomeBrowserDb']),
-    ...mapState(['selectedRecord'])
+    ...mapState(['selectedRecord', 'selectedSample'])
   },
   methods: {
-    ...mapActions(['getFastaGz', 'getGenesGz', 'getVcfGz']),
+    ...mapActions(['getBam', 'getFastaGz', 'getGenesGz', 'getVcfGz']),
     hasGenomeBrowser() {
       return Vue.prototype.$browser !== undefined;
     },
@@ -40,33 +40,69 @@ export default Vue.extend({
       Vue.prototype.$browser = undefined;
     },
     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()
+        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 = [];
-      tracks.push({
-        type: 'variant',
-        format: 'vcf',
-        name: 'Variants',
-        url: 'data:application/gzip;base64,' + vcfGz.toString('base64')
-      });
-      if (genesGz !== undefined) {
+      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',

src/store/actions.ts

@@ -110,6 +110,10 @@ export default {
   },
   getGenesGz(): Promise<Buffer | null> {
     return api.getGenesGz();
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getBam({ commit }: ActionContext<State, State>, sampleId: string): Promise<Buffer | null> {
+    return api.getBam(sampleId);
   }
 };
 

tests/unit/store/actions.spec.ts

@@ -183,3 +183,9 @@ test('get genes gz', async (done) => {
   expect(await actions.getGenesGz()).not.toBe(null);
   done();
 });
+
+test('get bam', async (done) => {
+  const commit = jest.fn() as Commit;
+  expect(await actions.getBam({ commit } as ActionContext<State, State>, 'Patient')).not.toBe(null);
+  done();
+});