@molgenis/vip-report-template 3.1.4 → 4.0.0

package/.travis.yml

@@ -3,7 +3,7 @@ node_js:
   - lts/*
 branches:
   only:
-    - master
+    - main
     - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
 cache:
   npm: false
@@ -29,7 +29,7 @@ deploy:
     edge: true
   - provider: releases
     token:
-      secure: kWHX+ZVa4I+CGHKDYbSnuIYY2DoTbWsaxPAhONb2Iv0AIJE7TPN/RLxW1czMozYOS302SEpSKuOI7JR7akoV691ZWJFbSuQXeEWsosRZdruraf3hKQVGCLSexXKjCypkI4DRWPYOP1o+iExF3Et+JToY4IIdpeLOq12LGJctmytycFn3WAaaIcvW7eIbngPPt701r2zgDiW06POx6Tizuc/nPrhVk0ldfSSE8/+tMIFvTG1P6q2+VQ6z0tVIcZh+Q/4oVRI9bDncdep1q6aJYnAOK0ck9SN+EHu9VLwVXLjyKPZiO4bSaC9TDn9JqyrLb70MbPnJex6VnSRtJoE0yQ0qmtQeU32wba34mazatp+ze68oM6/UMOApoYC7I/DI7QlAB4ZzjrCQGrCcXLAjNkDHfZSgRaKxzx9ncSmgn3gQnSY0EnnTgEWJlstG4znreKnnBJOWUc/RoWQXbjgEoH3C7X0lpdnIOPhpnqaLoUhhinYAu69kpIVSJHbc6yrHH9COUA8aHLjQysQXtA3la7cozy2jdpUyQoiF5M8Vm3IbqUHCIYXbB50N0+DS5wrzNZwH2kvdQnTGFBAiuygQajmYatbnSuUDOUyYzpSftKu4PFtacFCWZwKOLNzotHLUjmo6qBu4J/uXbziIm/8p18i6ZzfPp4V+9k2K5tThSrk=
+      secure: rQ19Q5xN6T+dJp4nDT+B4QREJNCc9HpOdipE7jcAP/PVD49kd3AI4joZD9nBn53a091rl7VHviqzyRvHyvBI00VWGhQOmbUqd45c5h4Vn0qUZno2Wl2M7iuUyllvovQHS0C34nLDSBkKhJv0ESit/xiyyVy8JxwO1mgFcLgsY0cKiupwbhepUw5V2S458pNLW9e4RxT7RIaQWUagYp+PJYRKAYn5AAxih65mv2+wSGQPzcOKJDRSTlDtLaCrfZCNJm/7f3iSAOm1CCA1HLxNO2ACFL4bhnghWPS7O6VyTv1POexgwbH0OQxHmO/pdm3geLrTWX7PaHaZNUB1CHoNXC5FE/J9sUSrjClfGL9qFo5WEkBAgH3a5lLwUoCWZecUJPnyeIEFieg5OSjnXFrTECWo5Ut4g5RtzOWQtTLEwOXQgDBtE3NLkH/DRayO9vliEs9/6CnZ8AndH17cj/GmB//2DTjOMr3yCQVuI5ZeANBAUoXAg/C6kQDTdP8oyLay7UBJnX1aEWWLf3Gwo0UBFE83YIuzqVzIvU8HYgFiPgjxFwKBmebS4qu1n9ils2X0nWaY9KZY4lIjzkxsgsZ2pqt1Z6a5AQsEqXv06Tjy6tB7/I9TG7vl4eTBBJBPsRKMNnTfkE6Zr3oHC+ihWIMolAqyaTriOh23Gs/xzEuK+T8=
     file: dist/vip-report-template.html
     on:
       tags: true

package/README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://app.travis-ci.com/molgenis/vip-report-template.svg?branch=master)](https://app.travis-ci.com/molgenis/vip-report-template)
+[![Build Status](https://app.travis-ci.com/molgenis/vip-report-template.svg?branch=main)](https://app.travis-ci.com/molgenis/vip-report-template)
 # vip-report-template
 The default report template for the [VIP report generator](https://github.com/molgenis/vip-report). This template is a good default for any .vcf file with support for .vcf files annotated with [VIP](https://github.com/molgenis/vip).   
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "3.1.4",
+  "version": "4.0.0",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",
@@ -15,32 +15,32 @@
   },
   "license": "LGPL-3.0",
   "devDependencies": {
-    "@molgenis/vite-plugin-inline": "^1.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "@vitest/coverage-c8": "^0.22.1",
+    "@molgenis/vite-plugin-inline": "^1.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
+    "@vitest/coverage-c8": "^0.23.4",
     "bulma": "^0.9.4",
-    "eslint": "^8.22.0",
+    "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-solid": "^0.7.1",
+    "eslint-plugin-solid": "^0.7.3",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
-    "sass": "^1.54.5",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.9",
-    "vite-plugin-solid": "^2.3.0",
-    "vitest": "^0.22.1"
+    "sass": "^1.55.0",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.3",
+    "vite-plugin-solid": "^2.3.9",
+    "vitest": "^0.23.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "@molgenis/vip-report-api": "^3.5.4",
-    "@molgenis/vip-report-vcf": "^1.2.3",
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@molgenis/vip-report-api": "^4.0.1",
+    "@molgenis/vip-report-vcf": "^1.2.7",
     "base64-js": "^1.5.1",
-    "igv": "^2.13.1",
+    "igv": "^2.13.3",
     "solid-app-router": "^0.4.2",
-    "solid-js": "^1.4.8"
+    "solid-js": "^1.5.6"
   },
   "lint-staged": {
     "src/**/*.{tsx,ts}": [

package/src/assets/sass/main.scss

@@ -111,3 +111,9 @@ table.is-borderless td,
 .table.is-borderless th {
   border: 0;
 }
+
+.igv-center-line {
+  transform: translateX(-50%) translateX(-1px) !important;
+  border-left-width: 2px !important;
+  border-right-width: 2px !important;
+}

package/src/components/Anchor.tsx

@@ -4,7 +4,7 @@ export const Anchor: ParentComponent<{
   href: string | null | undefined;
 }> = (props) => {
   return (
-    <Show when={props.href} fallback={props.children}>
+    <Show when={props.href} fallback={props.children} keyed>
       {(href) => (
         <a href={href} target="_blank" rel="noopener noreferrer nofollow">
           {props.children}

package/src/components/GenomeBrowser.tsx

@@ -1,9 +1,9 @@
 import { Component, onCleanup, onMount } from "solid-js";
-import igv from "igv";
+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, Cram, Sample } from "@molgenis/vip-report-api/src/Api";
 
 async function createVcf(contig: string, position: number, samples: Sample[]): Promise<Uint8Array> {
   const query: ComposedQuery = {
@@ -34,12 +34,10 @@ const createBrowserConfig = async (contig: string, position: number, samples: Sa
     api.getFastaGz(contig, position),
     createVcf(contig, position, samples),
     api.getGenesGz(),
-    ...samples.map((sample) => api.getBam(sample.person.individualId)),
   ]);
   const fastaGz = data[0];
   const vcf = data[1];
   const genesGz = data[2];
-  const bams = data.slice(3);
 
   if (fastaGz === null) {
     return null;
@@ -63,21 +61,6 @@ const createBrowserConfig = async (contig: string, position: number, samples: Sa
     url: "data:application/octet-stream;base64," + fromByteArray(vcf),
   });
 
-  for (let i = 0; i < samples.length; ++i) {
-    const bam = bams[i];
-
-    if (bam !== null) {
-      const sampleId = samples[i].person.individualId;
-      tracks.push({
-        order: order++,
-        type: "alignment",
-        format: "bam",
-        name: `Alignment (${sampleId})`,
-        url: "data:application/gzip;base64," + fromByteArray(bam),
-      });
-    }
-  }
-
   const htsFileMetadata = await api.getHtsFileMetadata();
 
   return {
@@ -94,14 +77,37 @@ 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);
+
+  for (let i = 0; i < samples.length; ++i) {
+    const cram = crams[i];
+
+    if (cram !== null) {
+      const sampleId = samples[i].person.individualId;
+      await browser.loadTrack({
+        type: "alignment",
+        format: "cram",
+        name: `Alignment (${sampleId})`,
+        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",
+      });
+    }
+  }
+};
+
 export const GenomeBrowser: Component<{ contig: string; position: number; samples: Sample[] }> = (props) => {
   let divRef: HTMLDivElement;
-  let browser: unknown;
+  let browser: Browser;
   onMount(() => {
     (async () => {
       const config = await createBrowserConfig(props.contig, props.position, props.samples);
       if (config !== null) {
         browser = await igv.createBrowser(divRef, config);
+        await updateBrowser(browser, props.samples);
       }
     })().catch((err) => console.error(err));
   });

package/src/components/filter/FilterCategorical.tsx

@@ -54,7 +54,7 @@ export const FilterCategorical: Component<
             <Checkbox
               value={category}
               label={props.labels ? props.labels[category] : category}
-              checked={props.query && (props.query.args as string[]).includes(category)}
+              checked={props.query && (props.query.args as (string | null)[]).includes(category)}
               onChange={onChange}
             />
           </div>
@@ -64,7 +64,7 @@ export const FilterCategorical: Component<
         <Checkbox
           value={nullValue}
           label="No value"
-          checked={props.query && (props.query.args as string[]).includes(nullValue)}
+          checked={props.query && (props.query.args as (string | null)[]).includes(null)}
           onChange={onChange}
         />
       )}

package/src/components/record/Info.tsx

@@ -8,6 +8,7 @@ import { Hgvs } from "./info/Hgvs";
 import { ClinVar } from "./info/ClinVar";
 import { GnomAD } from "./info/GnomAD";
 import { isAnyCsqInfo, isCsqInfo } from "../../utils/csqUtils";
+import { Vkgl } from "./info/Vkgl";
 
 export const Info: Component<{
   info: FieldValue;
@@ -34,6 +35,9 @@ export const Info: Component<{
       <Match when={isCsqInfo(props.infoMeta, "clinVar_CLNSIG")}>
         <ClinVar {...props} />
       </Match>
+      <Match when={isCsqInfo(props.infoMeta, "VKGL_CL")}>
+        <Vkgl {...props} />
+      </Match>
     </Switch>
   );
 };

package/src/components/record/info/ClinVar.tsx

@@ -70,7 +70,7 @@ export const ClinVar: Component<FieldProps> = (props) => {
   };
 
   return (
-    <Show when={label()}>
+    <Show when={label()} keyed>
       {(label) => (
         <Anchor href={href()}>
           {description() ? <Abbr title={description()!} value={label} /> : <span>{label}</span>}

package/src/components/record/info/Gene.tsx

@@ -38,7 +38,7 @@ export const Gene: Component<FieldProps> = (props) => {
   };
 
   return (
-    <Show when={symbol()}>
+    <Show when={symbol()} keyed>
       {(symbol) => (
         <>
           <Anchor href={href()}>

package/src/components/record/info/GnomAD.tsx

@@ -34,9 +34,9 @@ export const GnomAD: Component<FieldProps> = (props) => {
   };
 
   return (
-    <Show when={af()}>
+    <Show when={af()} keyed>
       {(af) => (
-        <Show when={href()} fallback={<FieldValueFloat value={af} />}>
+        <Show when={href()} fallback={<FieldValueFloat value={af} />} keyed>
           {(href) => (
             <Anchor href={href}>
               <FieldValueFloat value={af} />

package/src/components/record/info/Hgvs.tsx

@@ -16,5 +16,9 @@ function abbreviate(notation: string): string {
 
 export const Hgvs: Component<FieldProps> = (props) => {
   const value = () => props.info.value as ValueString;
-  return <Show when={value()}>{(value) => <Abbr title={value} value={abbreviate(value)} />}</Show>;
+  return (
+    <Show when={value()} keyed>
+      {(value) => <Abbr title={value} value={abbreviate(value)} />}
+    </Show>
+  );
 };

package/src/components/record/info/Vkgl.tsx

@@ -0,0 +1,42 @@
+import { Component, Show } from "solid-js";
+import { Abbr } from "../../Abbr";
+import { FieldProps } from "../field/Field";
+import { ValueString } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { getCsqInfo, getCsqInfoIndex } from "../../../utils/csqUtils";
+
+export const Vkgl: Component<FieldProps> = (props) => {
+  const value = () => props.info.value as ValueString;
+  const title = () => {
+    if (value() === null) return undefined;
+
+    const labs: { [key: string]: string } = {
+      VKGL_AMC: "AMC",
+      VKGL_ERASMUS: "Erasmus",
+      VKGL_LUMC: "LUMC",
+      VKGL_NKI: "NKI",
+      VKGL_RADBOUD_MUMC: "Radboud/MUMC",
+      VKGL_UMCG: "UMCG",
+      VKGL_UMCU: "UMCU",
+      VKGL_VUMC: "VUMC",
+    };
+
+    const descriptions = [];
+    for (const key in labs) {
+      const fieldIndex = getCsqInfoIndex(props.infoMeta, key);
+      if (fieldIndex !== -1) {
+        const value = getCsqInfo(props.info, fieldIndex) as ValueString;
+        if (value !== null) descriptions.push(`${labs[key]}:${value}`);
+      }
+    }
+    return descriptions.length > 0 ? descriptions.join(", ") : null;
+  };
+  return (
+    <Show when={value()} keyed>
+      {(value) => (
+        <Show when={title()} fallback={<span>{value}</span>} keyed>
+          {(title) => <Abbr title={title} value={value} />}
+        </Show>
+      )}
+    </Show>
+  );
+};

package/src/igv.d.ts

@@ -1,4 +1,8 @@
 declare module "igv" {
-  export function createBrowser(div: HTMLDivElement, config: unknown): unknown;
-  export function removeBrowser(browser: unknown): void;
+  export class Browser {
+    loadTrack(config: unknown): Promise<unknown>;
+  }
+
+  export function createBrowser(div: HTMLDivElement, config: unknown): Promise<Browser>;
+  export function removeBrowser(browser: Browser): void;
 }

package/src/mocks/GRCh37/static.ts

@@ -1,4 +1,5 @@
-import bamUrl from "./alignment.bam.blob";
+import cramUrl from "./alignment.cram.blob";
+import craiUrl from "./alignment.cram.crai.blob";
 import decisionTreeJson from "./decisionTree.json";
 import fastaUrl1_10042288_10042788 from "./fasta/1-10042288-10042788.fasta.gz.blob";
 import fastaUrl1_16375333_16375833 from "./fasta/1-16375333-16375833.fasta.gz.blob";
@@ -47,7 +48,8 @@ import vcfUrlSamples100 from "./vcf/samples_100.vcf.blob";
 import { fetchAsBytes } from "../utils";
 import { DecisionTree } from "@molgenis/vip-report-api/src/Api";
 
-export const bam = await fetchAsBytes(bamUrl as string);
+export const cram = await fetchAsBytes(cramUrl as string);
+export const crai = await fetchAsBytes(craiUrl as string);
 
 export const decisionTree: DecisionTree = decisionTreeJson as DecisionTree;
 

package/src/mocks/GRCh37/vcf/family.vcf.blob

@@ -47,7 +47,7 @@
 ##VIPC=VIP decision tree classification
 ##VIPL=VIP decision tree labels (ampersand separated)
 ##VIPP=VIP decision tree path (ampersand separated)
-##VIP_Command=nextflow run ./main.nf --input /groups/solve-rd/tmp10/bcharbon/testdata/testdata_b37.vcf --output /groups/solve-rd/tmp10/projects/vip/testdata_out --keep --pedigree /groups/solve-rd/tmp10/bcharbon/example.ped --probands Patient --phenotypes 'HP:0000951;HP:0003124' --assembly GRCh37
+##VIP_Command=nextflow run ./main.nf --input /groups/solve-rd/tmp10/bcharbon/testdata/testdata_b37.vcf --output /groups/solve-rd/tmp10/projects/vip/testdata_out --keep --pedigree /groups/solve-rd/tmp10/bcharbon/example.ped --probands Patient --phenotypes 'HP:0000951;HP:0003124' --assembly GRCh37 --param_with_equals_sign x=y
 ##VIP_Version=4.3.0
 ##VIP_treeCommand=--input testdata_b37_chunk0_annotated.vcf.gz --config /groups/solve-rd/tmp10/projects/vip/git/vip/resources/decision_tree.json --labels 0 --path 0 --output testdata_b37_chunk0_classified.vcf.gz
 ##VIP_treeVersion=3.0.0

package/src/mocks/GRCh38/static.ts

@@ -1,4 +1,5 @@
-import bamUrl from "./alignment.bam.blob";
+import cramUrl from "./alignment.cram.blob";
+import craiUrl from "./alignment.cram.crai.blob";
 import fastaUrl_chr1_9982230_9982730 from "./fasta/chr1-9982230-9982730.fasta.gz.blob";
 import fastaUrl_chr1_16049667_16050167 from "./fasta/chr1-16049667-16050167.fasta.gz.blob";
 import fastaUrl_chr1_17022474_17022974 from "./fasta/chr1-17022474-17022974.fasta.gz.blob";
@@ -36,7 +37,8 @@ import { fetchAsBytes } from "../utils";
 import decisionTreeJson from "./decisionTree.json";
 import { DecisionTree } from "@molgenis/vip-report-api/src/Api";
 
-export const bam = await fetchAsBytes(bamUrl as string);
+export const cram = await fetchAsBytes(cramUrl as string);
+export const crai = await fetchAsBytes(craiUrl as string);
 
 export const decisionTree: DecisionTree = decisionTreeJson as DecisionTree;
 

package/src/mocks/MockApiClient.ts

@@ -3,6 +3,7 @@ import { parseVcf } from "@molgenis/vip-report-vcf/src/VcfParser";
 import {
   Api,
   AppMetadata,
+  Cram,
   DecisionTree,
   HtsFileMetadata,
   Item,
@@ -14,7 +15,8 @@ import {
 } from "@molgenis/vip-report-api/src/Api";
 import { samples1, samples100 } from "./static";
 import {
-  bam as bamGRCh37,
+  cram as cramGRCh37,
+  crai as craiGRCh37,
   decisionTree as decisionTreeGRCh37,
   fastaGz as fastaGzGRCh37,
   genesGz as genesGzGRCh37,
@@ -26,7 +28,8 @@ import {
   vcfSamples100 as vcfSamples100GRCh37,
 } from "./GRCh37/static";
 import {
-  bam as bamGRCh38,
+  cram as cramGRCh38,
+  crai as craiGRCh38,
   decisionTree as decisionTreeGRCh38,
   fastaGz as fastaGzGRCh38,
   genesGz as genesGzGRCh38,
@@ -59,8 +62,8 @@ export class MockApiClient implements Api {
     return this.apiClient.getGenesGz();
   }
 
-  getBam(sampleId: string): Promise<Uint8Array | null> {
-    return this.apiClient.getBam(sampleId);
+  getCram(sampleId: string): Promise<Cram | null> {
+    return this.apiClient.getCram(sampleId);
   }
 
   getDecisionTree(): Promise<DecisionTree | null> {
@@ -130,8 +133,11 @@ export class MockApiClient implements Api {
         vcf: vcfFamilyGRCh37,
         fastaGz: fastaGzGRCh37,
         genesGz: genesGzGRCh37,
-        bam: {
-          Patient: bamGRCh37,
+        cram: {
+          Patient: {
+            cram: cramGRCh37,
+            crai: craiGRCh37,
+          },
         },
       },
       decisionTree: decisionTreeGRCh37,
@@ -155,8 +161,11 @@ export class MockApiClient implements Api {
         vcf: vcfNoVepGRCh37,
         fastaGz: fastaGzGRCh37,
         genesGz: genesGzGRCh37,
-        bam: {
-          Patient: bamGRCh37,
+        cram: {
+          Patient: {
+            cram: cramGRCh37,
+            crai: craiGRCh37,
+          },
         },
       },
       decisionTree: decisionTreeGRCh37,
@@ -180,8 +189,11 @@ export class MockApiClient implements Api {
         vcf: vcfSamples1GRCh37,
         fastaGz: fastaGzGRCh37,
         genesGz: genesGzGRCh37,
-        bam: {
-          SAMPLE1: bamGRCh37,
+        cram: {
+          SAMPLE1: {
+            cram: cramGRCh37,
+            crai: craiGRCh37,
+          },
         },
       },
       decisionTree: decisionTreeGRCh37,
@@ -249,8 +261,11 @@ export class MockApiClient implements Api {
         vcf: vcfFamilyGRCh38,
         fastaGz: fastaGzGRCh38,
         genesGz: genesGzGRCh38,
-        bam: {
-          Patient: bamGRCh38,
+        cram: {
+          Patient: {
+            cram: cramGRCh38,
+            crai: craiGRCh38,
+          },
         },
       },
       decisionTree: decisionTreeGRCh38,
@@ -274,8 +289,11 @@ export class MockApiClient implements Api {
         vcf: vcfNoVepGRCh38,
         fastaGz: fastaGzGRCh38,
         genesGz: genesGzGRCh38,
-        bam: {
-          Patient: bamGRCh38,
+        cram: {
+          Patient: {
+            cram: cramGRCh38,
+            crai: craiGRCh38,
+          },
         },
       },
       decisionTree: decisionTreeGRCh38,
@@ -299,8 +317,11 @@ export class MockApiClient implements Api {
         vcf: vcfSamples1GRCh38,
         fastaGz: fastaGzGRCh38,
         genesGz: genesGzGRCh38,
-        bam: {
-          SAMPLE1: bamGRCh38,
+        cram: {
+          SAMPLE1: {
+            cram: cramGRCh38,
+            crai: craiGRCh38,
+          },
         },
       },
       decisionTree: decisionTreeGRCh38,

package/src/utils/viewUtils.ts

@@ -21,18 +21,12 @@ export function getRecordSamples(record: Record, sample: Sample, pedigreeSamples
   return [record.s[sample.index], ...pedigreeSamples.map((pedigreeSample) => record.s[pedigreeSample.index])];
 }
 
-export function getHeaderValue(key: string, lines: string[]) {
-  let value = null;
-  lines.forEach((line: string) => {
-    if (line.startsWith(`##${key}`)) {
-      const splitted: string[] = line.split("=");
-      if (splitted.length === 2) {
-        value = splitted[1];
-        return;
-      } else {
-        throw new Error("Invalid header format for key");
-      }
+export function getHeaderValue(key: string, lines: string[]): string | null {
+  const token = `##${key}=`;
+  for (const line of lines) {
+    if (line.startsWith(token)) {
+      return line.substring(token.length);
     }
-  });
-  return value;
+  }
+  return null;
 }

package/src/views/SampleVariants.tsx

@@ -210,14 +210,14 @@ export const SampleVariants: Component<{
             {infoFields().length > 0 && <Sort options={sortOptions()} onChange={onSortChange} onClear={onSortClear} />}
           </div>
           <div class="column is-4">
-            <Show when={records()} fallback={<Loader />}>
+            <Show when={records()} fallback={<Loader />} keyed>
               {(records) => <Pager page={records.page} onPageChange={onPageChange} />}
             </Show>
           </div>
           <div class="column">
             <div class="columns">
               <div class="column is-10">
-                <Show when={records()} fallback={<Loader />}>
+                <Show when={records()} fallback={<Loader />} keyed>
                   {(records) => (
                     <span class="is-pulled-right" style={{ margin: "auto" }}>
                       {records.page.totalElements} records
@@ -238,7 +238,7 @@ export const SampleVariants: Component<{
           </div>
         </div>
         <div class="columns">
-          <Show when={records()} fallback={<Loader />}>
+          <Show when={records()} fallback={<Loader />} keyed>
             {(records) => (
               <VariantsSampleTable
                 item={props.sample}

package/src/views/Samples.tsx

@@ -75,7 +75,7 @@ export const Samples: Component = () => {
   return (
     <>
       <Breadcrumb items={[{ text: "Samples" }]} />
-      <Show when={samples()} fallback={<Loader />}>
+      <Show when={samples()} fallback={<Loader />} keyed>
         {(samples) => (
           <>
             <div class="columns">

package/src/views/VariantConsequence.tsx

@@ -45,7 +45,7 @@ export const VariantConsequence: Component = () => {
           <ConsequenceTable csqMetadata={csqFields()} csqValues={csqValues()} record={variant()} />
         </div>
         {hasDecisionTreePathMeta() && (
-          <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)}>
+          <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)} keyed>
             {(decisionTree) => (
               <div class="column">
                 <h1 class="title is-5">Classification tree path</h1>