@molgenis/vip-report-template 2.7.3 → 3.0.0

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

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

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

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+import { Anchor } from "../../Anchor";
+
+export const Gene: Component<{
+  symbol: string;
+}> = (props) => {
+  const toHref = (symbol: string) =>
+    `https://www.genenames.org/tools/search/#!/?query=${symbol}&filter=document_type:%22gene%22`;
+
+  return <Anchor href={toHref(props.symbol)} value={props.symbol} />;
+};

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

@@ -0,0 +1,29 @@
+import { Component, createResource, Show } from "solid-js";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { FieldValueFloat } from "../field/FieldValueFloat";
+import { EMPTY_HTS_FILE_METADATA, fetchHtsFileMetadata } from "../../../utils/ApiUtils";
+import { FieldValueInteger } from "../field/FieldValueInteger";
+
+export const GnomAD: Component<{
+  id: string;
+  variant: Record;
+  value: number;
+}> = (props) => {
+  const [htsFileMetadata] = createResource({}, fetchHtsFileMetadata, { initialValue: EMPTY_HTS_FILE_METADATA });
+
+  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"}`;
+  }
+
+  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>
+      </a>
+    </Show>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { Component } from "solid-js";
+import { Abbr } from "../../Abbr";
+
+function abbreviate(notation: string): string {
+  let abbreviated;
+  const splitted = notation.split(":");
+  if (splitted.length === 2) {
+    abbreviated = splitted[1];
+  } else {
+    abbreviated = notation;
+  }
+  return abbreviated;
+}
+export const Hgvs: Component<{
+  notation: string;
+}> = (props) => {
+  return <Abbr title={props.notation} value={abbreviate(props.notation)} />;
+};

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

@@ -0,0 +1,12 @@
+import { Component } from "solid-js";
+import { Anchor } from "../../Anchor";
+import { OntologyClass } from "@molgenis/vip-report-api/src/Api";
+
+export const HpoTerm: Component<{
+  ontologyClass: OntologyClass;
+}> = (props) => {
+  const hpoTerm = () => props.ontologyClass.id;
+  const label = () => props.ontologyClass.label;
+
+  return <>{<Anchor href={`https://hpo.jax.org/app/browse/term/${hpoTerm()}`} value={label()} />}</>;
+};

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

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

package/src/components/tree/DecisionTreeBoolMultiQuery.tsx

@@ -0,0 +1,21 @@
+import { Component, For } from "solid-js";
+import { BoolMultiQuery } from "@molgenis/vip-report-api/src/Api";
+import { DecisionTreeBoolQuery } from "./DecisionTreeBoolQuery";
+import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
+
+export const DecisionTreeBoolMultiQuery: Component<{ query: BoolMultiQuery }> = (props) => {
+  return (
+    <>
+      <For each={props.query.queries}>
+        {(query, i) => (
+          <>
+            {i() !== 0 && <span class="ml-1 mr-1">{props.query.operator}</span>}
+            <DecisionTreeBoolQuery query={query} />
+          </>
+        )}
+      </For>
+      <span class="ml-1 mr-1">{"\u2192"}</span>
+      <DecisionTreeOutcomeNode node={props.query.outcomeTrue} />
+    </>
+  );
+};

package/src/components/tree/DecisionTreeBoolQuery.tsx

@@ -0,0 +1,22 @@
+import { Component, createMemo } from "solid-js";
+import { BoolQuery } from "@molgenis/vip-report-api/src/Api";
+import { Abbr } from "../Abbr";
+
+export const DecisionTreeBoolQuery: Component<{ query: BoolQuery }> = (props) => {
+  const value = createMemo(() => props.query.field + " " + props.query.operator + " " + String(props.query.value));
+
+  function label(value: string) {
+    let label = undefined;
+    if (value.length > 100) {
+      label = value.slice(0, 100);
+    }
+    return label;
+  }
+
+  return (
+    <>
+      {label(value()) !== undefined && <Abbr title={value()} value={label(value()) as string} />}
+      {label(value()) === undefined && <span>{value()}</span>}
+    </>
+  );
+};

package/src/components/tree/DecisionTreeNode.tsx

@@ -0,0 +1,64 @@
+import { Component, createSignal, Match, Show, Signal, Switch } from "solid-js";
+import { BoolMultiNode, BoolNode, CategoricalNode, ExistsNode, LeafNode, Node } from "@molgenis/vip-report-api/src/Api";
+import { Error } from "../Error";
+import { DecisionTreeNodeBool } from "./DecisionTreeNodeBool";
+import { DecisionTreeNodeBoolMulti } from "./DecisionTreeNodeBoolMulti";
+import { DecisionTreeNodeCategorical } from "./DecisionTreeNodeCategorical";
+import { DecisionTreeNodeExists } from "./DecisionTreeNodeExists";
+import { DecisionTreeNodeLeaf } from "./DecisionTreeNodeLeaf";
+
+export const DecisionTreeNode: Component<{ nodeId: string; node: Node }> = (props) => {
+  const [collapsed, setCollapsed]: Signal<boolean> = createSignal(true);
+
+  function toggleCollapse() {
+    setCollapsed(!collapsed());
+  }
+
+  return (
+    <Show
+      when={props.node !== undefined}
+      fallback={
+        <div class="notification is-danger is-light">
+          Error: Unknown node "{props.nodeId}". (Possible mismatch between VCF file and provided decision tree.)
+        </div>
+      }
+    >
+      <div classList={{ card: true, "has-background-success": props.node.type === "LEAF" }}>
+        <header class="card-header">
+          <p class="card-header-title">
+            <span>{props.nodeId}</span>
+            {props.node.description && <span class="ml-1">({props.node.description})</span>}
+          </p>
+          <button class="card-header-icon" aria-label="more options" onClick={toggleCollapse}>
+            <span class="icon">
+              <i classList={{ fas: true, "fa-angle-down": collapsed(), "fa-angle-up": !collapsed() }} />
+            </span>
+          </button>
+        </header>
+        {!collapsed() && (
+          <div class="card-content">
+            <div class="content">
+              <Switch fallback={<Error error={`invalid node type ${props.node.type}`} />}>
+                <Match when={props.node.type === "BOOL"}>
+                  <DecisionTreeNodeBool node={props.node as BoolNode} />
+                </Match>
+                <Match when={props.node.type === "BOOL_MULTI"}>
+                  <DecisionTreeNodeBoolMulti node={props.node as BoolMultiNode} />
+                </Match>
+                <Match when={props.node.type === "CATEGORICAL"}>
+                  <DecisionTreeNodeCategorical node={props.node as CategoricalNode} />
+                </Match>
+                <Match when={props.node.type === "EXISTS"}>
+                  <DecisionTreeNodeExists node={props.node as ExistsNode} />
+                </Match>
+                <Match when={props.node.type === "LEAF"}>
+                  <DecisionTreeNodeLeaf node={props.node as LeafNode} />
+                </Match>
+              </Switch>
+            </div>
+          </div>
+        )}
+      </div>
+    </Show>
+  );
+};

package/src/components/tree/DecisionTreeNodeBool.tsx

@@ -0,0 +1,35 @@
+import { Component } from "solid-js";
+import { BoolNode } from "@molgenis/vip-report-api/src/Api";
+import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
+import { DecisionTreeBoolQuery } from "./DecisionTreeBoolQuery";
+
+export const DecisionTreeNodeBool: Component<{ node: BoolNode }> = (props) => {
+  return (
+    <>
+      <p>
+        Query: <DecisionTreeBoolQuery query={props.node.query} />
+      </p>
+      {props.node.outcomeTrue && (
+        <p class="ml-3">
+          <span>True</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeTrue} />
+        </p>
+      )}
+      {props.node.outcomeFalse && (
+        <p class="ml-3">
+          <span>False</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeFalse} />
+        </p>
+      )}
+      {props.node.outcomeMissing && (
+        <p class="ml-3">
+          <span>Missing</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeMissing} />
+        </p>
+      )}
+    </>
+  );
+};

package/src/components/tree/DecisionTreeNodeBoolMulti.tsx

@@ -0,0 +1,32 @@
+import { Component, For } from "solid-js";
+import { BoolMultiNode } from "@molgenis/vip-report-api/src/Api";
+import { DecisionTreeBoolMultiQuery } from "./DecisionTreeBoolMultiQuery";
+import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
+
+export const DecisionTreeNodeBoolMulti: Component<{ node: BoolMultiNode }> = (props) => {
+  return (
+    <>
+      <For each={props.node.outcomes}>
+        {(outcome) => (
+          <div class="ml-3">
+            <DecisionTreeBoolMultiQuery query={outcome} />
+          </div>
+        )}
+      </For>
+      {props.node.outcomeMissing && (
+        <p class="ml-3">
+          <span>Missing</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeMissing} />
+        </p>
+      )}
+      {props.node.outcomeDefault && (
+        <p class="ml-3">
+          <span>Default</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeDefault} />
+        </p>
+      )}
+    </>
+  );
+};

package/src/components/tree/DecisionTreeNodeCategorical.tsx

@@ -0,0 +1,32 @@
+import { Component, For } from "solid-js";
+import { CategoricalNode } from "@molgenis/vip-report-api/src/Api";
+import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
+
+export const DecisionTreeNodeCategorical: Component<{ node: CategoricalNode }> = (props) => {
+  return (
+    <>
+      <p>field: {props.node.field}</p>
+      <For each={Object.entries(props.node.outcomeMap)}>
+        {(entry) => (
+          <p class="ml-3">
+            {entry[0]}: <DecisionTreeOutcomeNode node={entry[1]} />
+          </p>
+        )}
+      </For>
+      {props.node.outcomeMissing && (
+        <p class="ml-3">
+          <span>Missing</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeMissing} />
+        </p>
+      )}
+      {props.node.outcomeDefault && (
+        <p class="ml-3">
+          <span>Default</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeDefault} />
+        </p>
+      )}
+    </>
+  );
+};

package/src/components/tree/DecisionTreeNodeExists.tsx

@@ -0,0 +1,25 @@
+import { Component } from "solid-js";
+import { ExistsNode } from "@molgenis/vip-report-api/src/Api";
+import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
+
+export const DecisionTreeNodeExists: Component<{ node: ExistsNode }> = (props) => {
+  return (
+    <>
+      <p>exists: {props.node.field}</p>
+      {props.node.outcomeTrue && (
+        <p class="ml-3">
+          <span>True</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeTrue} />
+        </p>
+      )}
+      {props.node.outcomeFalse && (
+        <p class="ml-3">
+          <span>False</span>
+          <span class="ml-1 mr-1">{"\u2192"}</span>
+          <DecisionTreeOutcomeNode node={props.node.outcomeFalse} />
+        </p>
+      )}
+    </>
+  );
+};

package/src/components/tree/DecisionTreeNodeLeaf.tsx

@@ -0,0 +1,6 @@
+import { Component } from "solid-js";
+import { LeafNode } from "@molgenis/vip-report-api/src/Api";
+
+export const DecisionTreeNodeLeaf: Component<{ node: LeafNode }> = (props) => {
+  return <span>classification: {props.node.class}</span>;
+};

package/src/components/tree/DecisionTreeOutcomeNode.tsx

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+import { NodeOutcome } from "@molgenis/vip-report-api/src/Api";
+
+export const DecisionTreeOutcomeNode: Component<{ node: NodeOutcome }> = (props) => {
+  return (
+    <>
+      <span>{props.node.nextNode}</span>
+      {props.node.label && <span class="ml-1">(${props.node.label})</span>}
+    </>
+  );
+};

package/src/components/tree/DecisionTreePath.tsx

@@ -0,0 +1,27 @@
+import { Component, For } from "solid-js";
+import { DecisionTree } from "@molgenis/vip-report-api/src/Api";
+import { DecisionTreeNode } from "./DecisionTreeNode";
+
+export type DecisionTreePath = string[];
+
+export const DecisionTreePath: Component<{
+  decisionTree: DecisionTree;
+  path: DecisionTreePath;
+}> = (props) => {
+  return (
+    <>
+      <For each={props.path}>
+        {(nodeId, index) => (
+          <>
+            {index() !== 0 && (
+              <div class="has-text-centered">
+                <span>{"\u2193"}</span>
+              </div>
+            )}
+            <DecisionTreeNode nodeId={nodeId} node={props.decisionTree.nodes[nodeId]} />
+          </>
+        )}
+      </For>
+    </>
+  );
+};

package/src/igv.d.ts

@@ -1 +1,4 @@
-declare module 'igv';
+declare module "igv" {
+  export function createBrowser(div: HTMLDivElement, config: unknown): unknown;
+  export function removeBrowser(browser: unknown): void;
+}

package/src/index.tsx

@@ -0,0 +1,40 @@
+/* @refresh reload */
+import { render } from "solid-js/web";
+import "./assets/sass/main.scss";
+
+import App from "./App";
+
+import { dom, library } from "@fortawesome/fontawesome-svg-core";
+import {
+  faAngleDown,
+  faAngleUp,
+  faCircleExclamation,
+  faCircleXmark,
+  faDownload,
+  faExternalLink,
+  faHome,
+  faSearch,
+} from "@fortawesome/free-solid-svg-icons";
+import { Provider } from "./store";
+
+library.add(faAngleDown, faAngleUp, faCircleExclamation, faCircleXmark, faDownload, faExternalLink, faHome, faSearch);
+
+function processIcons() {
+  void dom.i2svg();
+  dom.watch();
+}
+
+if (document.readyState === "complete") {
+  processIcons();
+} else {
+  window.addEventListener("DOMContentLoaded", processIcons);
+}
+
+render(
+  () => (
+    <Provider>
+      <App />
+    </Provider>
+  ),
+  document.body
+);