@molgenis/vip-report-template 3.0.0 → 3.1.2

package/src/components/filter/InfoFilter.tsx

@@ -1,14 +1,8 @@
 import { Component } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Filter, FilterChangeEvent, FilterClearEvent } from "./Filter";
-import { QueryClause, SelectorPart } from "@molgenis/vip-report-api/src/Api";
+import { Filter, FilterChangeEvent, FilterClearEvent, FilterProps } from "./Filter";
+import { SelectorPart } from "@molgenis/vip-report-api/src/Api";
 
-export const InfoFilter: Component<{
-  field: FieldMetadata;
-  query?: QueryClause;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
+export const InfoFilter: Component<FilterProps> = (props) => {
   const label = () => (props.field.label !== undefined ? props.field.label : props.field.id);
 
   const onChange = (event: FilterChangeEvent) => {

package/src/components/record/Format.tsx

@@ -5,22 +5,31 @@ 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";
+import { Item } from "@molgenis/vip-report-api/src/Api";
 
 export const Format: Component<{
   format: RecordSampleType;
   formatMetadata: FieldMetadata;
-  record: Record;
+  record: Item<Record>;
   isAbbreviate: boolean;
   allelicDepth: number[] | undefined;
   readDepth: number | undefined;
 }> = (props) => {
   return (
-    <Switch fallback={<Field info={props.format as Value | Value[]} infoMetadata={props.formatMetadata} />}>
+    <Switch
+      fallback={
+        <Field
+          info={{ value: props.format as Value | Value[], record: props.record }}
+          infoMeta={props.formatMetadata}
+          context={{}}
+        />
+      }
+    >
       <Match when={props.formatMetadata.id === "GT"}>
         <GenotypeField
           genotype={props.format as Genotype}
-          refAllele={props.record.r}
-          altAlleles={props.record.a}
+          refAllele={props.record.data.r}
+          altAlleles={props.record.data.a}
           isAbbreviate={props.isAbbreviate}
           allelicDepth={props.allelicDepth}
           readDepth={props.readDepth}

package/src/components/record/Info.tsx

@@ -1,52 +1,38 @@
 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 { Field, FieldContext, FieldValue } 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";
+import { isAnyCsqInfo, isCsqInfo } from "../../utils/csqUtils";
 
 export const Info: Component<{
-  info: Value | Value[];
-  infoMetadata: FieldMetadata;
-  href?: string;
-  variant: Record;
+  info: FieldValue;
+  infoMeta: FieldMetadata;
+  context: FieldContext;
 }> = (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} />
+    <Switch fallback={<Field {...props} />}>
+      <Match when={isCsqInfo(props.infoMeta, "Consequence")}>
+        <Consequence {...props} />
       </Match>
-      <Match when={props.infoMetadata.id === "PUBMED" && props.infoMetadata.parent?.id === "CSQ"}>
-        <PubMed ids={props.info as number[]} />
+      <Match when={isCsqInfo(props.infoMeta, "PUBMED")}>
+        <PubMed {...props} />
       </Match>
-      <Match when={props.infoMetadata.id === "SYMBOL" && props.infoMetadata.parent?.id === "CSQ"}>
-        {props.info !== null && <Gene symbol={props.info as string} />}
+      <Match when={isCsqInfo(props.infoMeta, "SYMBOL")}>
+        <Gene {...props} />
       </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 when={isCsqInfo(props.infoMeta, "gnomAD_AF")}>
+        <GnomAD {...props} />
       </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 when={isAnyCsqInfo(props.infoMeta, ["HGVSc", "HGVSp"])}>
+        <Hgvs {...props} />
       </Match>
-      <Match when={props.infoMetadata.id === "CLIN_SIG" && props.infoMetadata.parent?.id === "CSQ"}>
-        {props.info !== null && <ClinVar value={props.info as string} />}
+      <Match when={isCsqInfo(props.infoMeta, "clinVar_CLNSIG")}>
+        <ClinVar {...props} />
       </Match>
     </Switch>
   );

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

@@ -3,17 +3,32 @@ 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";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Item } from "@molgenis/vip-report-api/src/Api";
 
-export const Field: Component<{
-  info: Value | Value[];
-  infoMetadata: FieldMetadata;
-}> = (props) => {
+export type FieldProps = {
+  info: FieldValue;
+  infoMeta: FieldMetadata;
+  context: FieldContext;
+};
+
+export type FieldValue = {
+  value: Value | Value[];
+  valueParent?: Value | Value[];
+  record: Item<Record>;
+};
+
+export type FieldContext = {
+  genomeAssembly?: string;
+};
+
+export const Field: Component<FieldProps> = (props) => {
   return (
     <>
-      {props.infoMetadata.number.count === 1 ? (
-        <FieldSingleValue info={props.info as Value} infoMetadata={props.infoMetadata} />
+      {props.infoMeta.number.count === 1 ? (
+        <FieldSingleValue info={props.info.value as Value} infoMetadata={props.infoMeta} />
       ) : (
-        <FieldMultipleValue info={props.info as Value[]} infoMetadata={props.infoMetadata} />
+        <FieldMultipleValue info={props.info.value as Value[]} infoMetadata={props.infoMeta} />
       )}
     </>
   );

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

@@ -1,37 +1,81 @@
-import { Component } from "solid-js";
+import { Component, Show } from "solid-js";
+import { FieldProps } from "../field/Field";
+import { Anchor } from "../../Anchor";
+import { Abbr } from "../../Abbr";
+import { getCsqInfo, getCsqInfoIndex } from "../../../utils/csqUtils";
 
-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);
-      }
+export const ClinVar: Component<FieldProps> = (props) => {
+  const label = () => {
+    const classes = props.info.value as string[] | null;
+    return classes
+      ? classes
+          .map((token) => {
+            switch (token.toLowerCase()) {
+              case "benign":
+                return "B";
+              case "likely_benign":
+                return "LB";
+              case "uncertain_significance":
+                return "VUS";
+              case "likely_pathogenic":
+                return "LP";
+              case "pathogenic":
+                return "P";
+              case "conflicting_interpretations_of_pathogenicity":
+                return "Conflict";
+              default:
+                return token;
+            }
+          })
+          .join(", ")
+      : null;
+  };
+
+  const href = () => {
+    const clinVarIdsField = getCsqInfoIndex(props.infoMeta, "clinVar");
+    const clinVarIds = clinVarIdsField ? (getCsqInfo(props.info, clinVarIdsField) as number[]) : [];
+    return clinVarIds.length === 1 ? `https://www.ncbi.nlm.nih.gov/clinvar/variation/${clinVarIds[0]}/` : undefined;
+  };
+
+  const description = () => {
+    const statusField = getCsqInfoIndex(props.infoMeta, "clinVar_CLNREVSTAT");
+    const status = statusField ? (getCsqInfo(props.info, statusField) as string[]) : [];
+    if (status.length === 0) return;
+
+    let description;
+    if (status.length === 1 && status.includes("practice_guideline")) {
+      description = "\u2605\u2605\u2605\u2605";
+    } else if (status.length === 1 && status.includes("reviewed_by_expert_panel")) {
+      description = "\u2605\u2605\u2605\u2606";
+    } else if (
+      status.length === 3 &&
+      status.includes("criteria_provided") &&
+      status.includes("_multiple_submitters") &&
+      status.includes("_no_conflicts")
+    ) {
+      description = "\u2605\u2605\u2606\u2606";
+    } else if (
+      status.length === 2 &&
+      status.includes("criteria_provided") &&
+      status.includes("_conflicting_interpretations")
+    ) {
+      description = "\u2605\u2606\u2606\u2606";
+    } else if (status.length === 2 && status.includes("criteria_provided") && status.includes("_single_submitter")) {
+      description = "\u2605\u2606\u2606\u2606";
+    } else {
+      description = "\u2606\u2606\u2606\u2606";
     }
-    return [...new Set(vClasses)].sort().join("/");
-  }
+    description += " (" + status.map((status) => status.replaceAll("_", " ").trim()).join(", ") + ")";
+    return description;
+  };
 
-  return <span>{getClass(props.value)}</span>;
+  return (
+    <Show when={label()}>
+      {(label) => (
+        <Anchor href={href()}>
+          {description() ? <Abbr title={description()!} value={label} /> : <span>{label}</span>}
+        </Anchor>
+      )}
+    </Show>
+  );
 };

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

@@ -1,17 +1,16 @@
 import { Component } from "solid-js";
+import { FieldProps } from "../field/Field";
 import { Abbr } from "../../Abbr";
-import { Link } from "solid-app-router";
 
-export const Consequence: Component<{
-  terms: string[];
-  href?: string;
-}> = (props) => {
+export const Consequence: Component<FieldProps> = (props) => {
+  const consequence = (): string[] => props.info.value as string[];
+
   return (
     <>
-      {props.href ? <Link href={props.href}>{props.terms[0]}</Link> : <span>{props.terms[0]}</span>}
-      {props.terms.length > 1 && (
+      <span>{consequence()[0]}</span>
+      {consequence().length > 1 && (
         <span>
-          , <Abbr title={props.terms.slice(1).join(", ")} value="\u2026" />
+          , <Abbr title={consequence().slice(1).join(", ")} value="\u2026" />
         </span>
       )}
     </>

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

@@ -1,11 +1,56 @@
-import { Component } from "solid-js";
+import { Component, createMemo, Show } from "solid-js";
 import { Anchor } from "../../Anchor";
+import { FieldProps } from "../field/Field";
+import { ValueFlag, ValueString } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { getCsqInfo, getCsqInfoIndex } from "../../../utils/csqUtils";
+import { Abbr } from "../../Abbr";
 
-export const Gene: Component<{
-  symbol: string;
-}> = (props) => {
-  const toHref = (symbol: string) =>
-    `https://www.genenames.org/tools/search/#!/?query=${symbol}&filter=document_type:%22gene%22`;
+export const Gene: Component<FieldProps> = (props) => {
+  const symbol = (): ValueString => props.info.value as ValueString;
 
-  return <Anchor href={toHref(props.symbol)} value={props.symbol} />;
+  const symbolSource = createMemo((): ValueString | undefined => {
+    if (symbol() === null) return undefined;
+
+    const symbolSourceFieldIndex = getCsqInfoIndex(props.infoMeta, "SYMBOL_SOURCE");
+    return symbolSourceFieldIndex !== -1 ? (getCsqInfo(props.info, symbolSourceFieldIndex) as ValueString) : undefined;
+  });
+
+  const geneId = createMemo((): ValueString | undefined => {
+    if (symbol() === null) return undefined;
+
+    const geneFieldIndex = getCsqInfoIndex(props.infoMeta, "Gene");
+    return geneFieldIndex !== -1 ? (getCsqInfo(props.info, geneFieldIndex) as ValueString) : undefined;
+  });
+
+  const href = (): string | undefined => {
+    if (symbol() === null) return undefined;
+
+    const queryString =
+      symbolSource() === "EntrezGene" && geneId()
+        ? `query=ncbi_gene_id:${geneId()!}`
+        : `query=${encodeURIComponent(symbol()!)}&filter=document_type:%22gene%22`;
+    return `https://www.genenames.org/tools/search/#!/?${queryString}`;
+  };
+
+  const incompletePenetrance = (): ValueFlag | undefined => {
+    const ipFieldIndex = getCsqInfoIndex(props.infoMeta, "IncompletePenetrance");
+    return ipFieldIndex !== -1 ? (getCsqInfo(props.info, ipFieldIndex) as ValueFlag) : undefined;
+  };
+
+  return (
+    <Show when={symbol()}>
+      {(symbol) => (
+        <>
+          <Anchor href={href()}>
+            <span>{symbol}</span>
+          </Anchor>
+          {incompletePenetrance() && (
+            <sup class="ml-1">
+              <Abbr title="gene is known for incomplete penetrance" value="IP" />
+            </sup>
+          )}
+        </>
+      )}
+    </Show>
+  );
 };

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

@@ -1,29 +1,49 @@
-import { Component, createResource, Show } from "solid-js";
-import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Component, Show } from "solid-js";
 import { FieldValueFloat } from "../field/FieldValueFloat";
-import { EMPTY_HTS_FILE_METADATA, fetchHtsFileMetadata } from "../../../utils/ApiUtils";
-import { FieldValueInteger } from "../field/FieldValueInteger";
+import { FieldProps } from "../field/Field";
+import { ValueFloat } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { Anchor } from "../../Anchor";
 
-export const GnomAD: Component<{
-  id: string;
-  variant: Record;
-  value: number;
-}> = (props) => {
-  const [htsFileMetadata] = createResource({}, fetchHtsFileMetadata, { initialValue: EMPTY_HTS_FILE_METADATA });
+export const GnomAD: Component<FieldProps> = (props) => {
+  const af = (): number | null => props.info.value as ValueFloat;
 
-  function getHref(genomeAssembly: string) {
-    return `https://gnomad.broadinstitute.org/variant/${encodeURIComponent(
-      [props.variant.c, props.variant.p, props.variant.r, props.variant.a].join("-")
-    )}?dataset=${genomeAssembly === "GRCh38" ? "gnomad_r3" : "gnomad_r2_1"}`;
-  }
+  const href = (): string | undefined => {
+    let href;
+    if (af()) {
+      let dataset;
+      switch (props.context.genomeAssembly) {
+        case "GRCh37":
+          dataset = "gnomad_r2_1";
+          break;
+        case "GRCh38":
+          dataset = "gnomad_r3";
+          break;
+        default:
+          dataset = null;
+          break;
+      }
+
+      if (dataset) {
+        const record = props.info.record.data;
+        // FIXME record.a incorrect: select record.a through CSQ:ALLELE_NUM
+        const variantId = [record.c, record.p, record.r, record.a].join("-");
+        href = `https://gnomad.broadinstitute.org/variant/${encodeURIComponent(variantId)}?dataset=${dataset}`;
+      }
+    }
+    return href;
+  };
 
   return (
-    <Show when={!htsFileMetadata.loading}>
-      <a href={getHref(htsFileMetadata().genomeAssembly)} target="_blank" rel="noopener noreferrer nofollow">
-        <Show when={props.id === "GNOMAD_AD"} fallback={<FieldValueFloat value={props.value} />}>
-          <FieldValueInteger value={props.value} />
+    <Show when={af()}>
+      {(af) => (
+        <Show when={href()} fallback={<FieldValueFloat value={af} />}>
+          {(href) => (
+            <Anchor href={href}>
+              <FieldValueFloat value={af} />
+            </Anchor>
+          )}
         </Show>
-      </a>
+      )}
     </Show>
   );
 };

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

@@ -1,18 +1,20 @@
-import { Component } from "solid-js";
+import { Component, Show } from "solid-js";
 import { Abbr } from "../../Abbr";
+import { FieldProps } from "../field/Field";
+import { ValueString } from "@molgenis/vip-report-vcf/src/ValueParser";
 
 function abbreviate(notation: string): string {
   let abbreviated;
-  const splitted = notation.split(":");
-  if (splitted.length === 2) {
-    abbreviated = splitted[1];
+  const tokens = notation.split(":");
+  if (tokens.length === 2) {
+    abbreviated = tokens[1];
   } else {
     abbreviated = notation;
   }
-  return abbreviated;
+  return abbreviated.length > 20 ? abbreviated.slice(0, 18) + "\u2026" : abbreviated;
 }
-export const Hgvs: Component<{
-  notation: string;
-}> = (props) => {
-  return <Abbr title={props.notation} value={abbreviate(props.notation)} />;
+
+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>;
 };

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

@@ -1,19 +1,23 @@
-import { Component } from "solid-js";
+import { Component, Show } from "solid-js";
 import { Anchor } from "../../Anchor";
+import { FieldProps } from "../field/Field";
 
-export const PubMed: Component<{
-  ids: number[];
-}> = (props) => {
-  const term = () => props.ids.map((pubMedId) => `${pubMedId}[UID]`).join("+OR+");
+export const PubMed: Component<FieldProps> = (props) => {
+  const pubmedIds = () => props.info.value as number[];
+
+  const href = () => {
+    const ids = pubmedIds();
+    if (ids) {
+      const term = ids.map((id) => `${id}[UID]`).join("+OR+");
+      return `https://pubmed.ncbi.nlm.nih.gov/?term=${term}&sort=pubdate`;
+    }
+  };
 
   return (
-    <>
-      {term.length > 0 && (
-        <Anchor
-          href={`https://pubmed.ncbi.nlm.nih.gov/?term=${term()}&sort=pubdate`}
-          value={`citations (${props.ids.length})`}
-        />
-      )}
-    </>
+    <Show when={pubmedIds().length > 0}>
+      <Anchor href={href()}>
+        <span>{`citations (${pubmedIds().length})`}</span>
+      </Anchor>
+    </Show>
   );
 };