@molgenis/vip-report-template 2.7.3 → 3.0.0

package/src/components/Error.tsx

@@ -0,0 +1,9 @@
+import { Component } from "solid-js";
+
+export const Error: Component<{
+  error: unknown;
+}> = (props) => {
+  const error = () => props.error;
+  console.error(error());
+  return <div class="notification is-danger is-light">An unexpected error occurred</div>;
+};

package/src/components/FieldHeader.tsx

@@ -0,0 +1,26 @@
+import { Component, createMemo, Show } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { abbreviateHeader } from "../utils/field";
+
+export const FieldHeader: Component<{
+  field: FieldMetadata;
+  vertical?: boolean;
+  rowspan?: number;
+  colspan?: number;
+}> = (props) => {
+  const label = createMemo(() => abbreviateHeader(props.field.label || props.field.id));
+  return (
+    <th
+      style={props.vertical ? { "writing-mode": "vertical-rl" } : undefined}
+      rowspan={props.rowspan}
+      colspan={props.colspan}
+    >
+      <Show
+        when={props.field.description && props.field.description !== label()}
+        fallback={<abbr title={props.field.label || props.field.id}>{label()}</abbr>}
+      >
+        <abbr title={props.field.description}>{label()}</abbr>
+      </Show>
+    </th>
+  );
+};

package/src/components/GenomeBrowser.tsx

@@ -0,0 +1,114 @@
+import { Component, onCleanup, onMount } from "solid-js";
+import igv 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";
+
+async function createVcf(contig: string, position: number, samples: Sample[]): Promise<Uint8Array> {
+  const query: ComposedQuery = {
+    operator: "and",
+    args: [
+      { selector: "c", operator: "==", args: contig },
+      {
+        operator: "and",
+        args: [
+          { selector: "p", operator: ">=", args: position - 250 },
+          { selector: "p", operator: "<=", args: position + 250 },
+        ],
+      },
+    ],
+  };
+  const data = await Promise.all([api.getRecordsMeta(), api.getRecords({ query, size: Number.MAX_SAFE_INTEGER })]);
+  const vcf = writeVcf(
+    { metadata: data[0], data: data[1].items.map((item) => item.data) },
+    { samples: samples.map((sample) => sample.person.individualId) }
+  );
+  return toBytes(vcf);
+}
+
+const toBytes = (str: string): Uint8Array => Uint8Array.from(str.split("").map((letter) => letter.charCodeAt(0)));
+
+const createBrowserConfig = async (contig: string, position: number, samples: Sample[]): Promise<unknown | null> => {
+  const data = await Promise.all([
+    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;
+  }
+  let order = 1;
+  const tracks = [];
+  if (genesGz) {
+    tracks.push({
+      order: order++,
+      type: "annotation",
+      format: "refGene",
+      name: "Genes",
+      url: "data:application/gzip;base64," + fromByteArray(genesGz),
+    });
+  }
+  tracks.push({
+    order: order++,
+    type: "variant",
+    format: "vcf",
+    name: "Variants",
+    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 {
+    reference: {
+      id: htsFileMetadata.genomeAssembly,
+      name: "Reference",
+      fastaURL: "data:application/gzip;base64," + fromByteArray(fastaGz),
+      tracks: tracks,
+    },
+    locus: `${contig}:${position}`,
+    showChromosomeWidget: false,
+    loadDefaultGenomes: false,
+    showCenterGuide: true,
+  };
+};
+
+export const GenomeBrowser: Component<{ contig: string; position: number; samples: Sample[] }> = (props) => {
+  let divRef: HTMLDivElement;
+  let browser: unknown;
+  onMount(() => {
+    (async () => {
+      const config = await createBrowserConfig(props.contig, props.position, props.samples);
+      if (config !== null) {
+        browser = await igv.createBrowser(divRef, config);
+      }
+    })().catch((err) => console.error(err));
+  });
+  onCleanup(() => {
+    if (browser) {
+      igv.removeBrowser(browser);
+    }
+  });
+  return <div ref={divRef!} />;
+};

package/src/components/InfoCollapsablePane.tsx

@@ -0,0 +1,68 @@
+import { Component, createMemo, createSignal, For, Signal } from "solid-js";
+import { FieldMetadata, InfoMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Item } from "@molgenis/vip-report-api/src/Api";
+import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { Info } from "./record/Info";
+import { useLocation } from "solid-app-router";
+
+export const InfoCollapsablePane: Component<{
+  fields: FieldMetadata[];
+  record: Item<Record>;
+}> = (props) => {
+  const [collapsed, setCollapsed]: Signal<boolean> = createSignal(false);
+
+  function getHref(field: InfoMetadata, consequenceIndex: number): string | undefined {
+    let href;
+    if (field.id === "Consequence" && field.parent?.id === "CSQ") {
+      href = `${useLocation().pathname}/${props.record.id}/consequences/${consequenceIndex}`;
+    }
+    return href;
+  }
+
+  function toggleCollapse() {
+    setCollapsed(!collapsed());
+  }
+
+  const values = createMemo(() =>
+    props.fields.map((field) => {
+      if (field.parent) {
+        return (props.record.data.n[field.parent.id] as ValueArray).map((nestedValues) =>
+          field.parent && field.parent.nested
+            ? (nestedValues as ValueArray)[
+                field.parent.nested.items.findIndex((nestedField) => nestedField.id === field.id)
+              ]
+            : null
+        );
+      }
+      throw new Error(`Nested field '${field.id}' needs to have a parent field.`);
+    })
+  );
+  return (
+    <>
+      <td>
+        {values().length > 0 && values()[0].length > 1 && (
+          <span class="icon is-left is-clickable" onClick={toggleCollapse}>
+            {collapsed() ? <i class="fas fa-angle-up" /> : <i class="fas fa-angle-down" />}
+          </span>
+        )}
+      </td>
+      <For each={props.fields}>
+        {(field, i) => (
+          <td>
+            <For each={values()[i()]}>
+              {(value, j) => (
+                <>
+                  {j() != 0 && collapsed() && <br />}
+                  {(j() == 0 || collapsed()) && (
+                    <Info info={value} infoMetadata={field} href={getHref(field, j())} variant={props.record.data} />
+                  )}
+                </>
+              )}
+            </For>
+          </td>
+        )}
+      </For>
+    </>
+  );
+};

package/src/components/Loader.tsx

@@ -0,0 +1,5 @@
+import { Component } from "solid-js";
+
+export const Loader: Component = () => {
+  return <div>Loading ...</div>;
+};

package/src/components/SampleTable.tsx

@@ -0,0 +1,118 @@
+import { Link } from "solid-app-router";
+import { Component, createMemo, For, Show } from "solid-js";
+import { Item, Phenotype, PhenotypicFeature, Sample } from "@molgenis/vip-report-api/src/Api";
+import { HpoTerm } from "./record/info/HpoTerm";
+import { Anchor } from "./Anchor";
+
+function getAffectedStatusLabel(affectedStatus: string) {
+  let label;
+  switch (affectedStatus) {
+    case "AFFECTED":
+      label = "Affected";
+      break;
+    case "UNAFFECTED":
+      label = "Unaffected";
+      break;
+    default:
+      label = "?";
+      break;
+  }
+  return label;
+}
+
+function getSexLabel(sex: string) {
+  let label;
+  switch (sex) {
+    case "MALE":
+      label = "Male";
+      break;
+    case "FEMALE":
+      label = "Female";
+      break;
+    default:
+      label = "?";
+      break;
+  }
+  return label;
+}
+
+function mapPhenotypes(phenotypes: Item<Phenotype>[]) {
+  const phenoMap: { [key: string]: PhenotypicFeature[] } = {};
+  phenotypes.forEach((item: Item<Phenotype>) => {
+    phenoMap[item.data.subject.id] = item.data.phenotypicFeaturesList;
+  });
+  return phenoMap;
+}
+
+export const SampleTable: Component<{
+  samples: Item<Sample>[];
+  phenotypes: Item<Phenotype>[];
+}> = (props) => {
+  const phenoMap = createMemo(() => mapPhenotypes(props.phenotypes));
+
+  function getPhenotypes(sampleId: string) {
+    return phenoMap()[sampleId] !== undefined ? phenoMap()[sampleId] : [];
+  }
+
+  return (
+    <div style={{ display: "grid" }}>
+      {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
+      <div class="table-container">
+        <table class="table is-narrow">
+          <thead>
+            <tr>
+              <th>Family</th>
+              <th>Individual</th>
+              <th>Father</th>
+              <th>Mother</th>
+              <th>Proband</th>
+              <th>Sex</th>
+              <th>Affected</th>
+              <th>Phenotypes</th>
+              <th>VIBE</th>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={props.samples}>
+              {(sample) => (
+                <tr>
+                  <td>{sample.id}</td>
+                  <td>
+                    <Link href={`/samples/${sample.id}`}>{sample.data.person.individualId}</Link>
+                  </td>
+                  <td>{sample.data.person.paternalId}</td>
+                  <td>{sample.data.person.maternalId}</td>
+                  <td>{sample.data.proband === true ? "True" : "False"}</td>
+                  <td>{getSexLabel(sample.data.person.sex)}</td>
+                  <td>{getAffectedStatusLabel(sample.data.person.affectedStatus)}</td>
+                  <td>
+                    <For each={getPhenotypes(sample.data.person.individualId)}>
+                      {(phenotypicFeature: PhenotypicFeature, i) => (
+                        <>
+                          {i() > 0 ? ", " : ""}
+                          <HpoTerm ontologyClass={phenotypicFeature.type} />
+                        </>
+                      )}
+                    </For>
+                  </td>
+                  <td>
+                    <Show when={getPhenotypes(sample.data.person.individualId).length > 0}>
+                      <Anchor
+                        href={`https://vibe.molgeniscloud.org/?phenotypes=${getPhenotypes(
+                          sample.data.person.individualId
+                        )
+                          .map((feature) => feature.type.id)
+                          .join(",")}`}
+                        value={<i class="fas fa-external-link" />}
+                      />
+                    </Show>
+                  </td>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

package/src/components/SearchBox.tsx

@@ -0,0 +1,44 @@
+import { Component, createSignal } from "solid-js";
+
+export const SearchBox: Component<{ value?: string | null; onInput: (value: string) => void }> = (props) => {
+  const [value, setValue] = createSignal(props.value || "");
+
+  return (
+    <div class="field has-addons">
+      <p class="control has-icons-right is-expanded">
+        <input
+          class="input"
+          type="text"
+          value={value()}
+          onInput={(e) => setValue((e.target as HTMLInputElement).value)}
+          onKeyUp={(e) => {
+            if (e.code === "Enter") {
+              props.onInput(value());
+            } else if (e.code === "Escape") {
+              setValue("");
+              props.onInput("");
+            }
+          }}
+        />
+        {value().length > 0 && (
+          <span
+            class="icon is-clickable is-right"
+            onClick={() => {
+              setValue("");
+              props.onInput("");
+            }}
+          >
+            <i class="fas fa-circle-xmark" />
+          </span>
+        )}
+      </p>
+      <div class="control">
+        <a class="button is-info" onClick={() => props.onInput(value())}>
+          <span class="icon is-left">
+            <i class="fas fa-search" />
+          </span>
+        </a>
+      </div>
+    </div>
+  );
+};

package/src/components/Sort.tsx

@@ -0,0 +1,58 @@
+import { Component, For } from "solid-js";
+import { isNumerical } from "../utils/field";
+import { DIRECTION_ASCENDING, Order } from "../utils/sortUtils";
+import { SortOrder } from "@molgenis/vip-report-api/src/Api";
+import { infoSortPath } from "../utils/query";
+
+export type SortOption = {
+  order: Order;
+  selected?: boolean;
+};
+
+export type SortEvent = { order: SortOrder };
+
+export const Sort: Component<{
+  options: SortOption[];
+  onChange: (event: SortEvent) => void;
+  onClear: () => void;
+}> = (props) => {
+  const sortableOptions = () =>
+    props.options.filter((option) => isNumerical(option.order.field) && option.order.field.number.count === 1);
+
+  const onSortChange = (event: Event) => {
+    const index = Number((event.target as HTMLInputElement).value);
+    index === -1
+      ? props.onClear()
+      : props.onChange({
+          order: {
+            property: infoSortPath(sortableOptions()[index].order.field),
+            compare: sortableOptions()[index].order.direction,
+          },
+        });
+  };
+
+  return (
+    <div class="field is-horizontal">
+      <div class="field-label is-normal">
+        <label class="label">Sort by:</label>
+      </div>
+      <div class="field-body">
+        <div class="field">
+          <div class="select">
+            <select onChange={onSortChange}>
+              <option value="-1" />
+              <For each={sortableOptions()}>
+                {(option, i) => (
+                  <option value={i()} selected={option.selected === true}>
+                    {option.order.field.label || option.order.field.id}{" "}
+                    {option.order.direction === DIRECTION_ASCENDING ? "(ascending)" : "(descending)"}
+                  </option>
+                )}
+              </For>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/VariantInfoNestedTable.tsx

@@ -0,0 +1,117 @@
+import { Component, For } from "solid-js";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { Info } from "./record/Info";
+import { FieldMetadata, InfoMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FieldHeader } from "./FieldHeader";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Item } from "@molgenis/vip-report-api/src/Api";
+
+function isNonEmptyNestedInfoItem(nestedInfoField: FieldMetadata, index: number, value: Value[] | Value[][]): boolean {
+  const infoField = nestedInfoField.nested?.items[index];
+
+  if (infoField === undefined) {
+    throw new Error(`Missing nested metadata for '${nestedInfoField.id}' index [${index}]`);
+  }
+
+  let empty;
+  if (nestedInfoField.number.count === 0 || nestedInfoField.number.count === 1) {
+    if (value === null) {
+      empty = true;
+    }
+  } else {
+    empty = true;
+    for (const subValue of value as Value[][]) {
+      if (infoField.number.count === 0 || infoField.number.count === 1) {
+        if (subValue[index] !== null) {
+          empty = false;
+          break;
+        }
+      } else {
+        if ((subValue as Value[][])[index].length > 0) {
+          empty = false;
+          break;
+        }
+      }
+    }
+  }
+  return !empty;
+}
+
+export const VariantInfoNestedTable: Component<{
+  infoValue: Value[] | Value[][];
+  infoField: InfoMetadata;
+  record: Item<Record>;
+  sample: { id: number; label: string } | null;
+}> = (props) => {
+  function getHref(field: InfoMetadata, consequenceIndex: number): string | undefined {
+    let href;
+    if (field.id === "Consequence" && field.parent?.id === "CSQ") {
+      href = `/variants/${props.record.id}/consequences/${consequenceIndex}`;
+      if (props.sample !== null) href = `/samples/${props.sample.id}` + href;
+    }
+    return href;
+  }
+
+  return (
+    <div style={{ display: "grid" }}>
+      {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
+      <div class="table-container">
+        <table class="table is-narrow">
+          <thead>
+            <For each={props.infoField.nested !== undefined ? props.infoField.nested.items : []}>
+              {(infoFieldItem, i) => (
+                <>
+                  {isNonEmptyNestedInfoItem(props.infoField, i(), props.infoValue) && (
+                    <FieldHeader field={infoFieldItem} vertical={true} />
+                  )}
+                </>
+              )}
+            </For>
+          </thead>
+          <tbody>
+            {props.infoField.number.count === 1 ? (
+              <tr>
+                <For each={props.infoValue}>
+                  {(value) => (
+                    <>
+                      {isNonEmptyNestedInfoItem(props.infoField, -1, props.infoValue) && (
+                        <td>
+                          <Info info={value} infoMetadata={props.infoField} variant={props.record.data} />
+                        </td>
+                      )}
+                    </>
+                  )}
+                </For>
+              </tr>
+            ) : (
+              <For each={props.infoValue}>
+                {(value, j) => (
+                  <>
+                    <tr>
+                      <For each={props.infoField.nested !== undefined ? props.infoField.nested.items : []}>
+                        {(infoFieldItem, i) => (
+                          <>
+                            {isNonEmptyNestedInfoItem(props.infoField, i(), props.infoValue) && (
+                              <td>
+                                <Info
+                                  info={Array.isArray(value) ? value[i()] : null}
+                                  infoMetadata={infoFieldItem}
+                                  href={getHref(infoFieldItem, j())}
+                                  variant={props.record.data}
+                                />
+                              </td>
+                            )}
+                          </>
+                        )}
+                      </For>
+                    </tr>
+                  </>
+                )}
+              </For>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

package/src/components/VariantInfoTable.tsx

@@ -0,0 +1,35 @@
+import { Component, For } from "solid-js";
+import { FieldMetadataContainer, InfoContainer } from "@molgenis/vip-report-vcf/src/VcfParser";
+import { Info } from "./record/Info";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+
+export const VariantInfoTable: Component<{
+  infoFields: FieldMetadataContainer;
+  record: Record;
+}> = (props) => {
+  return (
+    <div style={{ display: "grid" }}>
+      {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
+      <div class="table-container">
+        <table class="table is-borderless is-narrow">
+          <tbody>
+            <For
+              each={Object.values(props.infoFields).filter(
+                (info) => !info.nested && props.record.n[info.id] !== undefined
+              )}
+            >
+              {(infoField) => (
+                <tr>
+                  <td>{infoField.id}</td>
+                  <td>
+                    <Info variant={props.record} info={props.record.n[infoField.id]} infoMetadata={infoField}></Info>
+                  </td>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

package/src/components/VariantSampleTable.tsx

@@ -0,0 +1,56 @@
+import { Component, createMemo, For } from "solid-js";
+import { Record, RecordSample } from "@molgenis/vip-report-vcf/src/Vcf";
+import { FieldMetadataContainer } from "@molgenis/vip-report-vcf/src/VcfParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Format } from "./record/Format";
+import { Sample } from "@molgenis/vip-report-api/src/Api";
+import { FieldHeader } from "./FieldHeader";
+
+export const VariantSampleTable: Component<{
+  formatFields: FieldMetadataContainer;
+  samples: Sample[];
+  sampleValues: RecordSample[];
+  record: Record;
+}> = (props) => {
+  const sampleFields = createMemo((): FieldMetadata[] =>
+    Object.keys(props.sampleValues[0]).map((fieldId) => props.formatFields[fieldId])
+  );
+  return (
+    <div style={{ display: "grid" }}>
+      {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
+      <div class="table-container">
+        <table class="table is-narrow">
+          <thead>
+            <tr>
+              <th />
+              <For each={sampleFields()}>{(formatField) => <FieldHeader field={formatField} />}</For>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={props.sampleValues}>
+              {(sampleValue, i) => (
+                <tr>
+                  <th>{props.samples[i()].person.individualId}</th>
+                  <For each={sampleFields()}>
+                    {(formatField) => (
+                      <td>
+                        <Format
+                          format={sampleValue[formatField.id]}
+                          formatMetadata={formatField}
+                          record={props.record}
+                          isAbbreviate={false}
+                          allelicDepth={props.record.s[props.samples[i()].index]["AD"] as number[]}
+                          readDepth={props.record.s[props.samples[i()].index]["DP"] as number}
+                        />
+                      </td>
+                    )}
+                  </For>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};