@molgenis/vip-report-template 2.7.3 → 3.0.0

package/src/components/filter/SamplesFilters.tsx

@@ -0,0 +1,31 @@
+import { Component, For } from "solid-js";
+import { SampleFilters } from "./SampleFilters";
+import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { FilterQueries } from "../../store";
+
+export type SampleFields = { sample: Item<Sample>; fields: FieldMetadata[] };
+
+export const SamplesFilters: Component<{
+  samplesFields: SampleFields[];
+  queries?: FilterQueries;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  return (
+    <>
+      <For each={props.samplesFields}>
+        {(sampleField) => (
+          <SampleFilters
+            sample={sampleField.sample}
+            fields={sampleField.fields}
+            queries={props.queries}
+            onChange={props.onChange}
+            onClear={props.onClear}
+          />
+        )}
+      </For>
+    </>
+  );
+};

package/src/components/record/Allele.tsx

@@ -0,0 +1,38 @@
+import { Component, createMemo, Match, Switch } from "solid-js";
+import { AlleleBreakend } from "./AlleleBreakend";
+import { AlleleMissing } from "./AlleleMissing";
+import { AlleleSymbolic } from "./AlleleSymbolic";
+import { AlleleNucs } from "./AlleleNucs";
+
+type AlleleType = "breakend" | "missing" | "symbolic" | "nucs";
+
+export const Allele: Component<{ value: string | null; isAbbreviate: boolean }> = (props) => {
+  const type = createMemo((): AlleleType => {
+    const value = props.value;
+    let type: AlleleType;
+
+    if (value === null) type = "missing";
+    else if (value.startsWith("<") && value.endsWith(">")) type = "symbolic";
+    else if (value.indexOf("[") !== -1 || value.indexOf("]") !== -1 || value.indexOf(".") !== -1) type = "breakend";
+    else type = "nucs";
+
+    return type;
+  });
+
+  return (
+    <Switch>
+      <Match when={type() === "breakend"}>
+        <AlleleBreakend value={props.value as string} />
+      </Match>
+      <Match when={type() === "missing"}>
+        <AlleleMissing />
+      </Match>
+      <Match when={type() === "symbolic"}>
+        <AlleleSymbolic value={props.value as string} />
+      </Match>
+      <Match when={type() === "nucs"}>
+        <AlleleNucs values={(props.value as string).split("")} isAbbreviate={props.isAbbreviate} />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/record/AlleleBreakend.tsx

@@ -0,0 +1,5 @@
+import { Component } from "solid-js";
+
+export const AlleleBreakend: Component<{ value: string }> = (props) => {
+  return <span class="base-n">{props.value}</span>;
+};

package/src/components/record/AlleleMissing.tsx

@@ -0,0 +1,5 @@
+import { Component } from "solid-js";
+
+export const AlleleMissing: Component = () => {
+  return <span class="base-n">?</span>;
+};

package/src/components/record/AlleleNucs.tsx

@@ -0,0 +1,49 @@
+import { Component, For } from "solid-js";
+
+const Nucs: Component<{ bases: string[] }> = (props) => {
+  return (
+    <For each={props.bases}>
+      {(base) => (
+        <span
+          classList={{
+            base: true,
+            "base-a": base === "A",
+            "base-c": base === "C",
+            "base-g": base === "G",
+            "base-n": base === "N",
+            "base-t": base === "T",
+          }}
+        >
+          {base}
+        </span>
+      )}
+    </For>
+  );
+};
+
+export const AlleleNucs: Component<{ values: string[]; isAbbreviate: boolean }> = (props) => {
+  const abbreviate = (): boolean => props.values.length > 4 && props.isAbbreviate;
+
+  const nucs = (): string[] => {
+    let nucs = props.values;
+    if (abbreviate()) {
+      const lastNuc = nucs[nucs.length - 1];
+      nucs = nucs.slice(0, 2);
+      nucs.push("\u2026"); // ellipsis
+      nucs.push(lastNuc);
+    }
+    return nucs;
+  };
+
+  return (
+    <>
+      {abbreviate() ? (
+        <abbr title={props.values.join("")}>
+          <Nucs bases={nucs()} />
+        </abbr>
+      ) : (
+        <Nucs bases={nucs()} />
+      )}
+    </>
+  );
+};

package/src/components/record/AlleleSymbolic.tsx

@@ -0,0 +1,5 @@
+import { Component } from "solid-js";
+
+export const AlleleSymbolic: Component<{ value: string }> = (props) => {
+  return <span class="base-n">{props.value}</span>;
+};

package/src/components/record/Alt.tsx

@@ -0,0 +1,17 @@
+import { Component, For } from "solid-js";
+import { Allele } from "./Allele";
+
+export const Alt: Component<{ value: (string | null)[]; isAbbreviate: boolean }> = (props) => {
+  return (
+    <>
+      <For each={props.value}>
+        {(alt, i) => (
+          <>
+            {i() !== 0 && <span>, </span>}
+            <Allele value={alt} isAbbreviate={props.isAbbreviate} />
+          </>
+        )}
+      </For>
+    </>
+  );
+};

package/src/components/record/Chrom.tsx

@@ -0,0 +1,5 @@
+import { Component } from "solid-js";
+
+export const Chrom: Component<{ value: string }> = (props) => {
+  return <span>{props.value}</span>;
+};

package/src/components/record/Filter.tsx

@@ -0,0 +1,9 @@
+import { Component, For } from "solid-js";
+
+export const Filter: Component<{ value: string[] | null }> = (props) => {
+  return (
+    <>
+      <For each={props.value}>{(id) => <span>{id}</span>}</For>
+    </>
+  );
+};

package/src/components/record/Format.tsx

@@ -0,0 +1,31 @@
+import { Component, Match, Switch } from "solid-js";
+import { Genotype, RecordSampleType } from "@molgenis/vip-report-vcf/src/SampleDataParser";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Field } from "./field/Field";
+import { GenotypeField } from "./format/GenotypeField";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+
+export const Format: Component<{
+  format: RecordSampleType;
+  formatMetadata: FieldMetadata;
+  record: Record;
+  isAbbreviate: boolean;
+  allelicDepth: number[] | undefined;
+  readDepth: number | undefined;
+}> = (props) => {
+  return (
+    <Switch fallback={<Field info={props.format as Value | Value[]} infoMetadata={props.formatMetadata} />}>
+      <Match when={props.formatMetadata.id === "GT"}>
+        <GenotypeField
+          genotype={props.format as Genotype}
+          refAllele={props.record.r}
+          altAlleles={props.record.a}
+          isAbbreviate={props.isAbbreviate}
+          allelicDepth={props.allelicDepth}
+          readDepth={props.readDepth}
+        />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/record/Id.tsx

@@ -0,0 +1,9 @@
+import { Component, For } from "solid-js";
+
+export const Id: Component<{ value: string[] | null }> = (props) => {
+  return (
+    <>
+      <For each={props.value}>{(id) => <span>{id}</span>}</For>
+    </>
+  );
+};

package/src/components/record/Info.tsx

@@ -0,0 +1,53 @@
+import { Component, Match, Switch } from "solid-js";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Consequence } from "./info/Consequence";
+import { Field } from "./field/Field";
+import { Gene } from "./info/Gene";
+import { PubMed } from "./info/PubMed";
+import { Hgvs } from "./info/Hgvs";
+import { ClinVar } from "./info/ClinVar";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { GnomAD } from "./info/GnomAD";
+
+export const Info: Component<{
+  info: Value | Value[];
+  infoMetadata: FieldMetadata;
+  href?: string;
+  variant: Record;
+}> = (props) => {
+  return (
+    <Switch fallback={<Field info={props.info} infoMetadata={props.infoMetadata} />}>
+      <Match when={props.infoMetadata.id === "Consequence" && props.infoMetadata.parent?.id === "CSQ"}>
+        <Consequence terms={props.info as string[]} href={props.href} />
+      </Match>
+      <Match when={props.infoMetadata.id === "PUBMED" && props.infoMetadata.parent?.id === "CSQ"}>
+        <PubMed ids={props.info as number[]} />
+      </Match>
+      <Match when={props.infoMetadata.id === "SYMBOL" && props.infoMetadata.parent?.id === "CSQ"}>
+        {props.info !== null && <Gene symbol={props.info as string} />}
+      </Match>
+      <Match
+        when={
+          (props.infoMetadata.id === "gnomAD_HN" || props.infoMetadata.id === "gnomAD_AF") &&
+          props.infoMetadata.parent?.id === "CSQ"
+        }
+      >
+        {props.info !== null && (
+          <GnomAD id={props.infoMetadata.id} variant={props.variant} value={props.info as number} />
+        )}
+      </Match>
+      <Match
+        when={
+          (props.infoMetadata.id === "HGVSc" || props.infoMetadata.id === "HGVSp") &&
+          props.infoMetadata.parent?.id === "CSQ"
+        }
+      >
+        {props.info !== null && <Hgvs notation={props.info as string} />}
+      </Match>
+      <Match when={props.infoMetadata.id === "CLIN_SIG" && props.infoMetadata.parent?.id === "CSQ"}>
+        {props.info !== null && <ClinVar value={props.info as string} />}
+      </Match>
+    </Switch>
+  );
+};

package/src/components/record/Pager.tsx

@@ -0,0 +1,64 @@
+import { Component, createMemo, For } from "solid-js";
+import { Page } from "@molgenis/vip-report-api/src/Api";
+
+const createPages = (page: number, pages: number): (number | null)[] => {
+  if (pages <= 5) {
+    return [...Array(pages).keys()];
+  } else if (page < 3) {
+    return [0, 1, 2, null, pages - 1];
+  } else if (page > pages - 4) {
+    return [0, null, pages - 3, pages - 2, pages - 1];
+  } else {
+    return [0, null, page, null, pages - 1];
+  }
+};
+
+export const Pager: Component<{
+  page: Page;
+  onPageChange: (page: number) => void;
+}> = (props) => {
+  const currentPage = () => props.page.number;
+  const nrPages = createMemo(() => Math.ceil(props.page.totalElements / props.page.size));
+  const pages = createMemo(() => createPages(currentPage(), nrPages()));
+
+  return (
+    <>
+      {props.page.totalElements > props.page.size && (
+        <nav class="pagination is-centered">
+          <ul class="pagination-list">
+            <li>
+              <a
+                classList={{ "pagination-previous": true, "is-invisible": currentPage() === 0 }}
+                onClick={currentPage() > 0 ? () => props.onPageChange(currentPage() - 1) : undefined}
+              >
+                Previous
+              </a>
+            </li>
+            <For each={pages()}>
+              {(page) =>
+                page !== null ? (
+                  <a
+                    classList={{ "pagination-link": true, "is-current": page === currentPage() }}
+                    onClick={page !== currentPage() ? () => props.onPageChange(page) : undefined}
+                  >
+                    {page + 1}
+                  </a>
+                ) : (
+                  <span class="pagination-ellipsis">&hellip;</span>
+                )
+              }
+            </For>
+            <li>
+              <a
+                classList={{ "pagination-next": true, "is-invisible": currentPage() === nrPages() - 1 }}
+                onClick={currentPage() < nrPages() - 1 ? () => props.onPageChange(currentPage() + 1) : undefined}
+              >
+                Next
+              </a>
+            </li>
+          </ul>
+        </nav>
+      )}
+    </>
+  );
+};

package/src/components/record/Pos.tsx

@@ -0,0 +1,5 @@
+import { Component } from "solid-js";
+
+export const Pos: Component<{ value: number }> = (props) => {
+  return <span>{props.value}</span>;
+};

package/src/components/record/Qual.tsx

@@ -0,0 +1,5 @@
+import { Component } from "solid-js";
+
+export const Qual: Component<{ value: number | null }> = (props) => {
+  return <>{props.value && <span>{props.value}</span>}</>;
+};

package/src/components/record/RecordDownload.tsx

@@ -0,0 +1,36 @@
+import { Component } from "solid-js";
+import { Query, Sample } from "@molgenis/vip-report-api/src/Api";
+import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
+import api from "../../Api";
+import { Filter, writeVcf } from "@molgenis/vip-report-vcf/src/VcfWriter";
+
+export const RecordDownload: Component<{ recordsMetadata: Metadata; query?: Query; samples?: Sample[] }> = (props) => {
+  const filter = (): Filter | undefined =>
+    props.samples ? { samples: props.samples.map((sample) => sample.person.individualId) } : undefined;
+
+  function onClick() {
+    const handler = async () => {
+      const records = await api.getRecords({ query: props.query, size: Number.MAX_SAFE_INTEGER });
+      const vcf = writeVcf({ metadata: props.recordsMetadata, data: records.items.map((item) => item.data) }, filter());
+
+      const url = window.URL.createObjectURL(new Blob([vcf]));
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", "data.vcf");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    };
+    handler().catch((error) => console.error(error));
+  }
+
+  return (
+    <div class="control">
+      <button class="button is-info" onClick={onClick}>
+        <span class="icon is-small">
+          <i class="fas fa-download" />
+        </span>
+      </button>
+    </div>
+  );
+};

package/src/components/record/Ref.tsx

@@ -0,0 +1,6 @@
+import { Component } from "solid-js";
+import { Allele } from "./Allele";
+
+export const Ref: Component<{ value: string; isAbbreviate: boolean }> = (props) => {
+  return <Allele value={props.value} isAbbreviate={props.isAbbreviate} />;
+};

package/src/components/record/field/Field.tsx

@@ -0,0 +1,20 @@
+import { Component } from "solid-js";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FieldSingleValue } from "./FieldSingleValue";
+import { FieldMultipleValue } from "./FieldMultipleValue";
+
+export const Field: Component<{
+  info: Value | Value[];
+  infoMetadata: FieldMetadata;
+}> = (props) => {
+  return (
+    <>
+      {props.infoMetadata.number.count === 1 ? (
+        <FieldSingleValue info={props.info as Value} infoMetadata={props.infoMetadata} />
+      ) : (
+        <FieldMultipleValue info={props.info as Value[]} infoMetadata={props.infoMetadata} />
+      )}
+    </>
+  );
+};

package/src/components/record/field/FieldMultipleValue.tsx

@@ -0,0 +1,22 @@
+import { Component, For } from "solid-js";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FieldSingleValue } from "./FieldSingleValue";
+
+export const FieldMultipleValue: Component<{
+  info: Value[];
+  infoMetadata: FieldMetadata;
+}> = (props) => {
+  return (
+    <>
+      <For each={props.info}>
+        {(value, i) => (
+          <>
+            {i() !== 0 && <span>, </span>}
+            <FieldSingleValue info={value} infoMetadata={props.infoMetadata} />
+          </>
+        )}
+      </For>
+    </>
+  );
+};

package/src/components/record/field/FieldSingleValue.tsx

@@ -0,0 +1,35 @@
+import { Component, Match, Switch } from "solid-js";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FieldValueFloat } from "./FieldValueFloat";
+import { FieldValueString } from "./FieldValueString";
+import { FieldValueCharacter } from "./FieldValueCharacter";
+import { FieldValueInteger } from "./FieldValueInteger";
+import { FieldValueFlag } from "./FieldValueFlag";
+import { Error } from "../../Error";
+
+export const FieldSingleValue: Component<{
+  info: Value;
+  infoMetadata: FieldMetadata;
+}> = (props) => {
+  const type = () => props.infoMetadata.type;
+  return (
+    <Switch fallback={<Error error={`invalid info type ${type()}`} />}>
+      <Match when={type() === "CATEGORICAL" || type() === "STRING"}>
+        <FieldValueString value={props.info as string} />
+      </Match>
+      <Match when={type() === "CHARACTER"}>
+        <FieldValueCharacter value={props.info as string} />
+      </Match>
+      <Match when={type() === "FLAG"}>
+        <FieldValueFlag value={props.info as boolean} />
+      </Match>
+      <Match when={type() === "FLOAT"}>
+        <FieldValueFloat value={props.info as number} />
+      </Match>
+      <Match when={type() === "INTEGER"}>
+        <FieldValueInteger value={props.info as number} />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/record/field/FieldValueCharacter.tsx

@@ -0,0 +1,11 @@
+import { Component, Show } from "solid-js";
+
+export const FieldValueCharacter: Component<{
+  value: string | null | undefined;
+}> = (props) => {
+  return (
+    <Show when={props.value !== null && props.value !== undefined}>
+      <span>{props.value as string}</span>
+    </Show>
+  );
+};

package/src/components/record/field/FieldValueFlag.tsx

@@ -0,0 +1,11 @@
+import { Component, Show } from "solid-js";
+
+export const FieldValueFlag: Component<{
+  value: boolean | null | undefined;
+}> = (props) => {
+  return (
+    <Show when={props.value !== null && props.value !== undefined}>
+      <span>{props.value as boolean}</span>
+    </Show>
+  );
+};

package/src/components/record/field/FieldValueFloat.tsx

@@ -0,0 +1,17 @@
+import { Component, Show } from "solid-js";
+import { Abbr } from "../../Abbr";
+
+export const FieldValueFloat: Component<{
+  value: number | null | undefined;
+}> = (props) => {
+  return (
+    <Show when={props.value !== null && props.value !== undefined}>
+      <Show
+        when={(props.value as number).toString().length > 6}
+        fallback={<span>{(props.value as number).toString()}</span>}
+      >
+        <Abbr title={(props.value as number).toString()} value={(props.value as number).toFixed(4)} />
+      </Show>
+    </Show>
+  );
+};

package/src/components/record/field/FieldValueInteger.tsx

@@ -0,0 +1,11 @@
+import { Component, Show } from "solid-js";
+
+export const FieldValueInteger: Component<{
+  value: number | null | undefined;
+}> = (props) => {
+  return (
+    <Show when={props.value !== null && props.value !== undefined}>
+      <span>{props.value as number}</span>
+    </Show>
+  );
+};

package/src/components/record/field/FieldValueString.tsx

@@ -0,0 +1,14 @@
+import { Component, Show } from "solid-js";
+import { Abbr } from "../../Abbr";
+
+export const FieldValueString: Component<{
+  value: string | null | undefined;
+}> = (props) => {
+  return (
+    <Show when={props.value !== null && props.value !== undefined}>
+      <Show when={(props.value as string).length > 20} fallback={<span>{props.value as string}</span>}>
+        <Abbr title={props.value as string} value={(props.value as string).substring(0, 20)} />
+      </Show>
+    </Show>
+  );
+};

package/src/components/record/format/GenotypeField.tsx

@@ -0,0 +1,63 @@
+import { Component, For, Show } from "solid-js";
+import { Genotype } from "@molgenis/vip-report-vcf/src/SampleDataParser";
+import { Allele } from "../Allele";
+
+function isAllelicImbalance(genotype: Genotype, allelicDepth: number[] | undefined) {
+  if (genotype.t === "het" && allelicDepth !== undefined) {
+    let total = 0;
+    allelicDepth?.forEach((value) => {
+      total = total + value;
+    });
+    const balance = allelicDepth[0] / total;
+    return balance < 0.2 || balance > 0.8;
+  }
+  return false;
+}
+
+function getTitle(lowReadDepth: boolean, allelicImbalance: boolean) {
+  let title = "";
+  if (lowReadDepth) {
+    title = "Read depth < 20";
+  }
+  if (allelicImbalance) {
+    if (lowReadDepth) {
+      title = `${title}, `;
+    }
+    title = `${title}Allelic imbalance`;
+  }
+  return title;
+}
+
+export const GenotypeField: Component<{
+  genotype: Genotype;
+  refAllele: string;
+  altAlleles: (string | null)[];
+  isAbbreviate: boolean;
+  allelicDepth: number[] | undefined;
+  readDepth: number | undefined;
+}> = (props) => {
+  const allelicImbalance: boolean = isAllelicImbalance(props.genotype, props.allelicDepth);
+  const lowReadDepth = props.readDepth !== undefined && props.readDepth < 20;
+  return (
+    <>
+      <For each={props.genotype.a}>
+        {(alleleIndex, i) => (
+          <>
+            {i() !== 0 && <span class="phase">{props.genotype.p ? "|" : "/"}</span>}
+            <Allele
+              value={
+                alleleIndex !== null ? (alleleIndex === 0 ? props.refAllele : props.altAlleles[alleleIndex - 1]) : null
+              }
+              isAbbreviate={props.isAbbreviate}
+            />
+          </>
+        )}
+      </For>
+      <Show when={lowReadDepth || allelicImbalance}>
+        <abbr title={getTitle(lowReadDepth, allelicImbalance)} class="ml-1">
+          <i class="fas fa-circle-exclamation has-text-danger" />
+        </abbr>
+      </Show>
+    </>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { Component } from "solid-js";
+
+export const ClinVar: Component<{
+  value: string;
+}> = (props) => {
+  function getClass(value: string): string {
+    const vClasses = [];
+    for (const token of value) {
+      for (const subToken of token.split("/")) {
+        let vClass;
+        switch (subToken) {
+          case "benign":
+            vClass = "B";
+            break;
+          case "likely_benign":
+            vClass = "LB";
+            break;
+          case "uncertain_significance":
+            vClass = "VUS";
+            break;
+          case "likely_pathogenic":
+            vClass = "LP";
+            break;
+          case "pathogenic":
+            vClass = "P";
+            break;
+          default:
+            vClass = value;
+        }
+        vClasses.push(vClass);
+      }
+    }
+    return [...new Set(vClasses)].sort().join("/");
+  }
+
+  return <span>{getClass(props.value)}</span>;
+};