Poc/methylation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "5.8.0",
+  "version": "5.8.0 - methylation",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",
@@ -36,11 +36,11 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@molgenis/vip-report-api": "^4.8.0",
+    "@molgenis/vip-report-api": "link:..\\vip-report-api",
     "@molgenis/vip-report-vcf": "^1.8.0",
     "@solidjs/router": "^0.9.1",
     "base64-js": "^1.5.1",
-    "igv": "^2.15.11",
+    "igv": "link:..\\igv.js",
     "solid-js": "^1.8.7"
   },
   "lint-staged": {

src/Api.ts

@@ -1,4 +1,4 @@
-import { WindowApiClient } from "@molgenis/vip-report-api/src/WindowApiClient";
+import { WindowApiClient } from "../../vip-report-api/src/WindowApiClient";
 
 // lazy import MockApiClient to ensure that it is excluded from the build artifact
 const api = import.meta.env.PROD

src/components/GenomeBrowser.tsx

@@ -3,7 +3,7 @@ import igv, { Browser } from "igv";
 import api from "../Api";
 import { fromByteArray } from "base64-js";
 import { writeVcf } from "@molgenis/vip-report-vcf/src/VcfWriter";
-import { ComposedQuery, Sample } from "@molgenis/vip-report-api/src/Api";
+import { ComposedQuery, Sample } from "../../../vip-report-api/src/Api";
 
 async function createVcf(contig: string, position: number, samples: Sample[]): Promise<Uint8Array> {
   const query: ComposedQuery = {
@@ -78,11 +78,26 @@ const createBrowserConfig = async (contig: string, position: number, samples: Sa
 };
 
 const updateBrowser = async (browser: Browser, samples: Sample[]): Promise<void> => {
-  const data = await Promise.all([...samples.map((sample) => api.getCram(sample.person.individualId))]);
-  const crams = data.slice(0);
+  const cramData = await Promise.all([...samples.map((sample) => api.getCram(sample.person.individualId))]);
+  const crams = cramData.slice(0);
+
+  const bedmethylData = await Promise.all([...samples.map((sample) => api.getBedmethyl(sample.person.individualId))]);
+  const bedmethyls = bedmethylData.slice(0);
 
   for (let i = 0; i < samples.length; ++i) {
     const cram = crams[i];
+    const bedmethyl = bedmethyls[i];
+
+    if (bedmethyl !== null) {
+      const sampleId = samples[i].person.individualId;
+      await browser.loadTrack({
+        type: "annotation",
+        format: "bedMethyl",
+        name: `Bedmethyl (${sampleId})`,
+        url: "data:application/octet-stream;base64," + fromByteArray(bedmethyl),
+        checkSequenceMD5: false,
+      });
+    }
 
     if (cram !== null) {
       const sampleId = samples[i].person.individualId;
@@ -93,7 +108,7 @@ const updateBrowser = async (browser: Browser, samples: Sample[]): Promise<void>
         url: "data:application/octet-stream;base64," + fromByteArray(cram.cram),
         indexURL: "data:application/octet-stream;base64," + fromByteArray(cram.crai),
         checkSequenceMD5: false, //  disable verifying the MD5 checksum of the reference sequence underlying a slice
-        colorBy: "strand",
+        colorBy: "basemod2",
       });
     }
   }

src/components/record/info/GnomAD.tsx

@@ -33,8 +33,8 @@ export const GnomAD: Component<FieldProps> = (props) => {
             <Anchor href={href}>
               <FieldValueFloat value={af()} />
             </Anchor>
-            <Show when={qc().length > 0}>
-              <abbr title={"Failed quality control filters: " + qc().join(", ")} class="ml-1 is-clickable">
+            <Show when={qc() != null && qc().length > 0}>
+              <abbr title="Failed quality control filters: <workaround:disabled>" class="ml-1 is-clickable">
                 <i class="fas fa-circle-exclamation has-text-warning" />
               </abbr>
             </Show>