@molgenis/vip-report-template 2.7.2 → 3.0.0-beta2

package/src/utils/sortUtils.ts

@@ -0,0 +1,65 @@
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
+import { CompareFn, SortOrder, SortPath } from "@molgenis/vip-report-api/src/Api";
+
+export type Direction = "asc" | "desc";
+
+export type Order = {
+  field: FieldMetadata;
+  direction: Direction;
+};
+
+export type Sort = {
+  orders: Order[];
+};
+
+export const DIRECTION_ASCENDING = "asc" as Direction;
+export const DIRECTION_DESCENDING = "desc" as Direction;
+
+class InvalidSortPathError extends Error {
+  constructor(path: SortPath) {
+    super(`invalid record sort path '[${path.join(",")}]'`);
+    this.name = "InvalidSortPathError";
+  }
+}
+export function createRecordSort(recordsMeta: Metadata, sort?: SortOrder | SortOrder[]): Sort {
+  const orders = sort ? (Array.isArray(sort) ? sort : [sort]) : [];
+  return { orders: orders.map((order) => createOrder(order, recordsMeta)) };
+}
+
+function createOrder(sort: SortOrder, recordsMeta: Metadata): Order {
+  return {
+    field: createField(sort.property, recordsMeta),
+    direction: createDirection(sort.compare),
+  };
+}
+
+function createField(property: string | SortPath, recordsMeta: Metadata): FieldMetadata {
+  const path = Array.isArray(property) ? property : [property];
+  if (path.length < 2 || path.length > 3 || path[0] !== "n" || typeof path[1] !== "string") {
+    throw new Error(`invalid record sort path '[${path.join(",")}]'`);
+  }
+
+  const pathItem = path[1];
+  if (typeof pathItem !== "string") throw new InvalidSortPathError(path);
+
+  let field = recordsMeta.info[pathItem];
+  if (field === undefined) throw new InvalidSortPathError(path);
+
+  if (path.length === 3) {
+    const pathIndex = path[2];
+    if (typeof pathIndex !== "number") throw new InvalidSortPathError(path);
+    if (field.nested === undefined) throw new InvalidSortPathError(path);
+
+    field = field.nested.items[pathIndex];
+  }
+  return field;
+}
+
+function createDirection(compare?: "asc" | "desc" | CompareFn): Direction {
+  if (compare === undefined) return DIRECTION_ASCENDING;
+  else if (compare === DIRECTION_ASCENDING) return DIRECTION_ASCENDING;
+  else if (compare === DIRECTION_DESCENDING) return DIRECTION_DESCENDING;
+  else if (typeof compare === "function") throw new Error("cannot convert sort with custom compare function");
+  else throw new Error(`invalid sort compare '${compare}'`);
+}

package/src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function arrayEquals<T>(a: T[], b: T[]) {
+  return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
+}

package/src/utils/viewUtils.ts

@@ -0,0 +1,38 @@
+import { Value, ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Sample } from "@molgenis/vip-report-api/src/Api";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+
+export function getSpecificConsequence(csqs: ValueArray, rowIndex: number): ValueArray {
+  if (rowIndex < 0) {
+    throw new Error("Consequences index must be 0 or higher.");
+  }
+  return csqs.length >= rowIndex ? (csqs[rowIndex] as ValueArray) : [];
+}
+
+export function getConsequenceLabel(csq: ValueArray, rowIndex: number, csqMetadataArray: FieldMetadata[]) {
+  const csqIndex = csqMetadataArray.findIndex((csqMetadata) => csqMetadata.id === "Consequence");
+  const csqValues: ValueArray = getSpecificConsequence(csq, rowIndex);
+  const csqValue: Value = csqValues[csqIndex];
+  return csqValue;
+}
+
+export function getRecordSamples(record: Record, sample: Sample, pedigreeSamples: Sample[]) {
+  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");
+      }
+    }
+  });
+  return value;
+}

package/src/views/Home.tsx

@@ -0,0 +1,121 @@
+import { Component, createResource, createSignal, For, Show } from "solid-js";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { Item, Phenotype, PhenotypicFeature } from "@molgenis/vip-report-api/src/Api";
+import { HpoTerm } from "../components/record/info/HpoTerm";
+import {
+  EMPTY_APP_METADATA,
+  EMPTY_HTS_FILE_METADATA,
+  EMPTY_PARAMS,
+  EMPTY_PHENOTYPES,
+  EMPTY_RECORDS_METADATA,
+  EMPTY_RECORDS_PAGE,
+  EMPTY_SAMPLES_PAGE,
+  fetchAppMetadata,
+  fetchHtsFileMetadata,
+  fetchPhenotypes,
+  fetchRecords,
+  fetchRecordsMeta,
+  fetchSamples,
+} from "../utils/ApiUtils";
+import { getHeaderValue } from "../utils/viewUtils";
+import { Loader } from "../components/Loader";
+import { VcfHeaderRow } from "../components/VcfHeaderRow";
+
+export const Home: Component = () => {
+  const [params] = createSignal(EMPTY_PARAMS);
+  const [samples] = createResource(params, fetchSamples, { initialValue: EMPTY_SAMPLES_PAGE });
+  const [records] = createResource(params, fetchRecords, { initialValue: EMPTY_RECORDS_PAGE });
+  const [recordsMetadata] = createResource(params, fetchRecordsMeta, { initialValue: EMPTY_RECORDS_METADATA });
+  const [phenotypes] = createResource(params, fetchPhenotypes, { initialValue: EMPTY_PHENOTYPES });
+  const [htsFileMetadata] = createResource(params, fetchHtsFileMetadata, { initialValue: EMPTY_HTS_FILE_METADATA });
+  const [appMetadata] = createResource(params, fetchAppMetadata, { initialValue: EMPTY_APP_METADATA });
+
+  return (
+    <Show
+      when={
+        !samples.loading &&
+        !records.loading &&
+        !recordsMetadata.loading &&
+        !phenotypes.loading &&
+        !htsFileMetadata.loading &&
+        !appMetadata.loading
+      }
+      fallback={<Loader />}
+    >
+      <Breadcrumb items={[]} />
+      <div class="table-container">
+        <table class="table is-narrow">
+          <thead>
+            <tr>
+              <th colSpan={2}>Software metadata</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>Name:</th>
+              <td>{appMetadata().name}</td>
+            </tr>
+            <tr>
+              <th>Version:</th>
+              <td>{appMetadata().version}</td>
+            </tr>
+            <tr>
+              <th>Arguments:</th>
+              <td>{appMetadata().args}</td>
+            </tr>
+            <VcfHeaderRow value={getHeaderValue("VIP_Version", recordsMetadata().lines)} title={"VIP Version"} />
+            <VcfHeaderRow value={getHeaderValue("VIP_Command", recordsMetadata().lines)} title={"VIP Command"} />
+          </tbody>
+        </table>
+      </div>
+      <div class="table-container">
+        <table class="table is-narrow">
+          <thead>
+            <tr>
+              <th colSpan={2}>Input metadata</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>Filename:</th>
+              <td>{htsFileMetadata().uri}</td>
+            </tr>
+            <tr>
+              <th>Assembly:</th>
+              <td>{htsFileMetadata().genomeAssembly}</td>
+            </tr>
+            <tr>
+              <th>Number of records:</th>
+              <td>{records().total}</td>
+            </tr>
+            <tr>
+              <th>Number of samples:</th>
+              <td>{samples().total}</td>
+            </tr>
+            <tr>
+              <th>Phenotypes:</th>
+              <td>
+                <For each={phenotypes().items}>
+                  {(item: Item<Phenotype>) => (
+                    <>
+                      <b>{item.data.subject.id}: </b>
+                      <For each={item.data.phenotypicFeaturesList}>
+                        {(phenotypicFeature: PhenotypicFeature, i) => (
+                          <>
+                            {i() > 0 ? ", " : ""}
+                            <HpoTerm ontologyClass={phenotypicFeature.type} />
+                          </>
+                        )}
+                      </For>
+                      <br />
+                    </>
+                  )}
+                </For>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Show>
+  );
+};

package/src/views/Sample.tsx

@@ -0,0 +1,26 @@
+import { Component, For, Show } from "solid-js";
+import { Link, useRouteData } from "solid-app-router";
+import { Loader } from "../components/Loader";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { SampleRouteData } from "./data/SampleData";
+
+export const Sample: Component = () => {
+  const { sample } = useRouteData<SampleRouteData>();
+
+  return (
+    <Show when={!sample.loading} fallback={<Loader />}>
+      <Breadcrumb items={[{ href: "/samples", text: "Samples" }, { text: sample().data.person.individualId }]} />
+      <p class="has-text-weight-semibold">Sample</p>
+      <div class="columns">
+        <div class="column is-1">
+          <For each={Object.keys(sample().data.person)}>{(key) => <p>{key}</p>}</For>
+        </div>
+        <div class="column is-1">
+          <For each={Object.values(sample().data.person)}>{(value) => <p>{value}</p>}</For>
+        </div>
+      </div>
+      <br />
+      <Link href={`/samples/${sample().id}/variants`}>Variants</Link>
+    </Show>
+  );
+};

package/src/views/SampleVariant.tsx

@@ -0,0 +1,115 @@
+import { Component, createResource, For, Show } from "solid-js";
+import { useRouteData } from "solid-app-router";
+import { Loader } from "../components/Loader";
+import { GenomeBrowser } from "../components/GenomeBrowser";
+import { fetchPedigreeSamples, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
+import { VariantTable } from "../components/VariantTable";
+import { VariantInfoTable } from "../components/VariantInfoTable";
+import { VariantInfoNestedTable } from "../components/VariantInfoNestedTable";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { getNestedInfoFieldsWithValues } from "../utils/field";
+import { VariantSampleTable } from "../components/VariantSampleTable";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { getRecordSamples } from "../utils/viewUtils";
+import { SampleVariantRouteData } from "./data/SampleVariantData";
+import { getSampleLabel } from "../utils/sample";
+import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
+
+export const SampleVariantView: Component = () => {
+  const { sample, variant } = useRouteData<SampleVariantRouteData>();
+
+  const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
+  const [recordsMeta] = createResource(fetchRecordsMeta);
+
+  return (
+    <Show when={sample() && variant()} fallback={<Loader />}>
+      <Breadcrumb
+        items={[
+          { href: "/samples", text: "Samples" },
+          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
+          { href: `/samples/${sample()!.id}/variants`, text: "Variants" },
+          { text: getRecordLabel(variant()!) },
+        ]}
+      />
+      <Show when={pedigreeSamples() && recordsMeta()} fallback={<Loader />}>
+        <SampleVariant
+          sample={sample()!}
+          pedigreeSamples={pedigreeSamples()!.items}
+          recordsMeta={recordsMeta()!}
+          record={variant()!}
+        />
+      </Show>
+    </Show>
+  );
+};
+
+export const SampleVariant: Component<{
+  sample: Item<Sample>;
+  pedigreeSamples: Item<Sample>[];
+  recordsMeta: Metadata;
+  record: Item<Record>;
+}> = (props) => {
+  return (
+    <>
+      <div class="columns">
+        <div class="column">
+          <GenomeBrowser
+            contig={props.record.data.c}
+            position={props.record.data.p}
+            samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
+          />
+        </div>
+      </div>
+      <div class="columns">
+        <div class="column is-3">
+          <h1 class="title is-5">Record</h1>
+          <VariantTable variant={props.record.data} />
+        </div>
+        <Show
+          when={
+            Object.values(props.recordsMeta.info).filter(
+              (info) => !info.nested && props.record.data.n[info.id] !== undefined
+            ).length > 0
+          }
+        >
+          <div class="column is-3">
+            <h1 class="title is-5">Info</h1>
+            <VariantInfoTable infoValues={props.record.data.n} infoFields={props.recordsMeta.info} />
+          </div>
+        </Show>
+        <div class="column">
+          <h1 class="title is-5">Samples</h1>
+          <VariantSampleTable
+            formatFields={props.recordsMeta.format}
+            samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
+            sampleValues={getRecordSamples(
+              props.record.data,
+              props.sample.data,
+              props.pedigreeSamples.map((item) => item.data)
+            )}
+            record={props.record.data}
+          />
+        </div>
+      </div>
+      <div class="columns">
+        <div class="column" style={{ "max-width": "100%" }}>
+          <For each={getNestedInfoFieldsWithValues(props.recordsMeta.info, props.record.data.n)}>
+            {(infoField) => (
+              <>
+                <h1 class="title is-5">{infoField.id}</h1>
+                <p class="mb-4">{infoField.description}</p>
+                <VariantInfoNestedTable
+                  infoValue={props.record.data.n[infoField.id] as unknown as Value[][]}
+                  infoField={infoField}
+                  sample={{ id: props.sample.id, label: props.sample.data.person.individualId }}
+                  record={props.record}
+                />
+              </>
+            )}
+          </For>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/views/SampleVariantConsequence.tsx

@@ -0,0 +1,105 @@
+import { Component, createResource, Show } from "solid-js";
+import { useRouteData } from "solid-app-router";
+import { Loader } from "../components/Loader";
+import { fetchDecisionTree, fetchPedigreeSamples, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
+import { VariantTable } from "../components/VariantTable";
+import { VariantInfoTable } from "../components/VariantInfoTable";
+import { VariantSampleTable } from "../components/VariantSampleTable";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { ConsequenceTable } from "../components/ConsequenceTable";
+import { getRecordSamples, getSpecificConsequence } from "../utils/viewUtils";
+import { DecisionTreePath } from "../components/tree/DecisionTreePath";
+import { getDecisionTreePath } from "../utils/decisionTreeUtils";
+import { SampleVariantConsequenceRouteData } from "./data/SampleVariantConsequenceData";
+import { getSampleLabel } from "../utils/sample";
+import { DecisionTree, Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
+
+export const SampleVariantConsequenceView: Component = () => {
+  const { sample, variant, consequenceId } = useRouteData<SampleVariantConsequenceRouteData>();
+
+  const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
+  const [recordsMeta] = createResource(fetchRecordsMeta);
+  const [decisionTree] = createResource(fetchDecisionTree, { initialValue: null });
+
+  return (
+    <Show when={sample() && variant()} fallback={<Loader />}>
+      <Breadcrumb
+        items={[
+          { href: "/samples", text: "Samples" },
+          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
+          { href: `/samples/${sample()!.id}/variants`, text: "Variants" },
+          { href: `/samples/${sample()!.id}/variants/${variant()!.id}`, text: getRecordLabel(variant()!) },
+          { text: `Consequence #${consequenceId}` },
+        ]}
+      />
+      <Show when={pedigreeSamples() && recordsMeta()} fallback={<Loader />}>
+        <SampleVariantConsequence
+          sample={sample()!}
+          pedigreeSamples={pedigreeSamples()!.items}
+          recordsMeta={recordsMeta()!}
+          variant={variant()!}
+          consequenceId={consequenceId}
+          decisionTree={decisionTree()}
+        />
+      </Show>
+    </Show>
+  );
+};
+
+export const SampleVariantConsequence: Component<{
+  sample: Item<Sample>;
+  pedigreeSamples: Item<Sample>[];
+  recordsMeta: Metadata;
+  variant: Item<Record>;
+  consequenceId: number;
+  decisionTree: DecisionTree | null;
+}> = (props) => {
+  return (
+    <>
+      <div class="columns">
+        <div class="column is-6">
+          <h1 class="title is-5">Consequence</h1>
+          <ConsequenceTable
+            csqMetadata={props.recordsMeta.info.CSQ.nested !== undefined ? props.recordsMeta.info.CSQ.nested.items : []}
+            csqValues={getSpecificConsequence(props.variant.data.n.CSQ as ValueArray, props.consequenceId)}
+            record={props.variant.data}
+          />
+        </div>
+        {props.decisionTree !== null && (
+          <div class="column">
+            <h1 class="title is-5">Classification tree path</h1>
+            <DecisionTreePath
+              decisionTree={props.decisionTree}
+              path={getDecisionTreePath(props.recordsMeta, props.variant, props.consequenceId)}
+            />
+          </div>
+        )}
+      </div>
+      <div class="columns">
+        <div class="column is-3">
+          <h1 class="title is-5">Record</h1>
+          <VariantTable variant={props.variant.data} />
+        </div>
+        <div class="column is-3">
+          <h1 class="title is-5">Info</h1>
+          <VariantInfoTable infoValues={props.variant.data.n} infoFields={props.recordsMeta.info} />
+        </div>
+        <div class="column">
+          <h1 class="title is-5">Samples</h1>
+          <VariantSampleTable
+            formatFields={props.recordsMeta.format}
+            samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
+            sampleValues={getRecordSamples(
+              props.variant.data,
+              props.sample.data,
+              props.pedigreeSamples.map((item) => item.data)
+            )}
+            record={props.variant.data}
+          />
+        </div>
+      </div>
+    </>
+  );
+};