@molgenis/vip-report-template 6.2.0 → 7.0.1

package/src/components/RecordsTable.tsx

@@ -0,0 +1,130 @@
+import { VcfRecord } from "@molgenis/vip-report-vcf";
+import { Item } from "@molgenis/vip-report-api";
+import { Component, For, Match, Show, Switch } from "solid-js";
+import { CellValue, ConfigCellGroup, ConfigCellItem } from "../types/configCells";
+import { ConfigCells } from "../types/config";
+import { Abbr } from "./Abbr";
+import { Field } from "./field/Field";
+import { Table } from "./Table.tsx";
+
+export const RecordsTable: Component<{
+  fieldConfigs: ConfigCells;
+  records: Item<VcfRecord>[];
+  verticalHeaders?: boolean;
+}> = (props) => {
+  return (
+    <Table>
+      <RecordsTableHeader fieldConfigs={props.fieldConfigs} verticalHeaders={props.verticalHeaders} />
+      <RecordsTableBody fieldConfigs={props.fieldConfigs} records={props.records} />
+    </Table>
+  );
+};
+
+const RecordsTableHeader: Component<{
+  fieldConfigs: ConfigCells;
+  verticalHeaders?: boolean;
+}> = (props) => {
+  return (
+    <thead>
+      <tr style={props.verticalHeaders ? { "writing-mode": "vertical-rl" } : undefined}>
+        <RecordsTableHeaderCells fieldConfigs={props.fieldConfigs} />
+      </tr>
+    </thead>
+  );
+};
+
+export const RecordsTableHeaderCells: Component<{ fieldConfigs: ConfigCells }> = (props) => {
+  return (
+    <For each={props.fieldConfigs}>
+      {(fieldConfig) => (
+        <Switch fallback={<RecordsTableHeaderCell fieldConfig={fieldConfig as ConfigCellItem} />}>
+          <Match when={fieldConfig.type === "group"}>
+            <For each={(fieldConfig as ConfigCellGroup).fieldConfigs}>
+              {(childConfigField) => <RecordsTableHeaderCell fieldConfig={childConfigField} />}
+            </For>
+          </Match>
+        </Switch>
+      )}
+    </For>
+  );
+};
+
+const RecordsTableHeaderCell: Component<{
+  fieldConfig: ConfigCellItem;
+}> = (props) => {
+  const label = () => props.fieldConfig.label();
+  const description = () => props.fieldConfig.description();
+
+  return (
+    <th>
+      <Show when={description()} fallback={label()}>
+        {(description) => <Abbr title={description()} value={label()} />}
+      </Show>
+    </th>
+  );
+};
+
+const RecordsTableBody: Component<{
+  fieldConfigs: ConfigCells;
+  records: Item<VcfRecord>[];
+}> = (props) => {
+  return (
+    <tbody>
+      <For each={props.records}>
+        {(record) => (
+          <tr>
+            <RecordsTableCells fieldConfigs={props.fieldConfigs} record={record} />
+          </tr>
+        )}
+      </For>
+    </tbody>
+  );
+};
+
+export const RecordsTableCells: Component<{ fieldConfigs: ConfigCells; record: Item<VcfRecord> }> = (props) => {
+  return (
+    <For each={props.fieldConfigs}>
+      {(fieldConfig) => (
+        <Switch fallback={<RecordsTableCell fieldConfig={fieldConfig as ConfigCellItem} record={props.record} />}>
+          <Match when={fieldConfig.type === "group"}>
+            <For each={(fieldConfig as ConfigCellGroup).fieldConfigs}>
+              {(childConfigField) => <RecordsTableCell fieldConfig={childConfigField} record={props.record} />}
+            </For>
+          </Match>
+        </Switch>
+      )}
+    </For>
+  );
+};
+
+export const RecordsTableCell: Component<{
+  fieldConfig: ConfigCellItem;
+  record: Item<VcfRecord>;
+}> = (props) => {
+  const lineIndices = () => [...Array(props.fieldConfig.valueCount(props.record))].map((_, i) => i);
+  return (
+    <td>
+      <For each={lineIndices()}>
+        {(valueIndex) => (
+          <RecordsTableCellLine fieldConfig={props.fieldConfig} record={props.record} valueIndex={valueIndex} />
+        )}
+      </For>
+    </td>
+  );
+};
+
+const RecordsTableCellLine: Component<{
+  fieldConfig: ConfigCellItem;
+  record: Item<VcfRecord>;
+  valueIndex: number;
+}> = (props) => {
+  const value = (): CellValue => props.fieldConfig.value(props.record, props.valueIndex);
+
+  return (
+    <div>
+      <Field config={props.fieldConfig} value={value()} />
+      {/* print Unicode zero width space character to ensure a line with non-zero height */}
+      <span>{"\u200b"}</span>
+    </div>
+  );
+};

package/src/components/SampleTable.tsx

@@ -1,110 +1,82 @@
-import { useNavigate, A } from "@solidjs/router";
-import { Component, createMemo, For, Show } from "solid-js";
-import { Item, Phenotype, PhenotypicFeature, Sample } from "@molgenis/vip-report-api/src/Api";
+import { A, useNavigate } from "@solidjs/router";
+import { Component, For, Show } from "solid-js";
+import { Item, PhenotypicFeature } from "@molgenis/vip-report-api";
 import { HpoTerm } from "./HpoTerm";
 import { Anchor } from "./Anchor";
-import {
-  getSampleAffectedStatusLabel,
-  getSampleFather,
-  getSampleLabel,
-  getSampleMother,
-  getSampleSexLabel,
-} from "../utils/sample";
-
-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;
-}
+import { getSampleAffectedStatusLabel, getSampleLabel, getSampleSexLabel } from "../utils/sample";
+import { href } from "../utils/utils.ts";
+import { SampleContainer } from "../utils/api.ts";
+import { Table } from "./Table.tsx";
 
 export const SampleTable: Component<{
-  samples: Item<Sample>[];
-  phenotypes: Item<Phenotype>[];
+  samples: Item<SampleContainer>[];
 }> = (props) => {
   const navigate = useNavigate();
-  const samples = createMemo(() => props.samples.map((item) => item.data));
-  const phenoMap = createMemo(() => mapPhenotypes(props.phenotypes));
-
-  const samplePhenotypes = (sample: Sample): PhenotypicFeature[] => {
-    return phenoMap()[sample.person.individualId] ?? [];
-  };
-
-  const sampleFatherLabel = (sample: Sample): string => {
-    const sampleFather = getSampleFather(sample, samples());
-    return sampleFather ? getSampleLabel(sampleFather) : "";
-  };
-
-  const sampleMotherLabel = (sample: Sample): string => {
-    const sampleMother = getSampleMother(sample, samples());
-    return sampleMother ? getSampleLabel(sampleMother) : "";
-  };
 
   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>
+    <Table>
+      <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>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        <For each={props.samples.map((sample) => sample.data)}>
+          {(sample) => (
             <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>
-              <th />
+              <td>{sample.item.data.person.familyId}</td>
+              <td>
+                <A href={href(["samples", sample.item.id])} end={true}>
+                  {getSampleLabel(sample.item)}
+                </A>
+              </td>
+              <td>{sample.paternalSample ? getSampleLabel(sample.paternalSample) : ""}</td>
+              <td>{sample.maternalSample ? getSampleLabel(sample.maternalSample) : ""}</td>
+              <td>{sample.item.data.proband ? "True" : "False"}</td>
+              <td>{getSampleSexLabel(sample.item)}</td>
+              <td>{getSampleAffectedStatusLabel(sample.item)}</td>
+              <td>
+                <For each={sample.phenotypes}>
+                  {(phenotypicFeature: PhenotypicFeature, i) => (
+                    <>
+                      {i() > 0 ? ", " : ""}
+                      <HpoTerm ontologyClass={phenotypicFeature.type} />
+                    </>
+                  )}
+                </For>
+              </td>
+              <td>
+                <Show when={sample.phenotypes.length > 0}>
+                  <Anchor
+                    href={`https://vibe.molgeniscloud.org/?phenotypes=${sample.phenotypes
+                      .map((feature) => feature.type.id)
+                      .join(",")}`}
+                  >
+                    <i class="fas fa-external-link" />
+                  </Anchor>
+                </Show>
+              </td>
+              <td>
+                <button
+                  class="button is-primary py-1"
+                  onClick={() => navigate(href(["samples", sample.item.id, "variants"]))}
+                >
+                  Explore Variants
+                </button>
+              </td>
             </tr>
-          </thead>
-          <tbody>
-            <For each={props.samples}>
-              {(sample) => (
-                <tr>
-                  <td>{sample.data.person.familyId}</td>
-                  <td>
-                    <A href={`/samples/${sample.id}`}>{getSampleLabel(sample.data)}</A>
-                  </td>
-                  <td>{sampleFatherLabel(sample.data)}</td>
-                  <td>{sampleMotherLabel(sample.data)}</td>
-                  <td>{sample.data.proband === true ? "True" : "False"}</td>
-                  <td>{getSampleSexLabel(sample.data)}</td>
-                  <td>{getSampleAffectedStatusLabel(sample.data)}</td>
-                  <td>
-                    <For each={samplePhenotypes(sample.data)}>
-                      {(phenotypicFeature: PhenotypicFeature, i) => (
-                        <>
-                          {i() > 0 ? ", " : ""}
-                          <HpoTerm ontologyClass={phenotypicFeature.type} />
-                        </>
-                      )}
-                    </For>
-                  </td>
-                  <td>
-                    <Show when={samplePhenotypes(sample.data).length > 0}>
-                      <Anchor
-                        href={`https://vibe.molgeniscloud.org/?phenotypes=${samplePhenotypes(sample.data)
-                          .map((feature) => feature.type.id)
-                          .join(",")}`}
-                      >
-                        <i class="fas fa-external-link" />
-                      </Anchor>
-                    </Show>
-                  </td>
-                  <td>
-                    <button class="button is-primary py-1" onClick={() => navigate(`/samples/${sample.id}/variants`)}>
-                      Explore Variants
-                    </button>
-                  </td>
-                </tr>
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
-    </div>
+          )}
+        </For>
+      </tbody>
+    </Table>
   );
 };

package/src/components/SearchBox.tsx

@@ -1,7 +1,13 @@
-import { Component, createSignal } from "solid-js";
+import { Component, createEffect, createSignal } from "solid-js";
 
 export const SearchBox: Component<{ value?: string | null; onInput: (value: string) => void }> = (props) => {
-  const [value, setValue] = createSignal(props.value || "");
+  const [value, setValue] = createSignal("");
+
+  createEffect(() => {
+    if (props.value) {
+      setValue(props.value);
+    }
+  });
 
   return (
     <div class="field has-addons">

package/src/components/Sort.tsx

@@ -1,36 +1,40 @@
 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";
+import { isNumerical } from "../utils/vcf.ts";
+import { SortOrder } from "@molgenis/vip-report-api";
+import { DIRECTION_ASCENDING, mapOrder } from "../utils/query/sort.ts";
+import { ConfigSort, ConfigSortOrder } from "../types/configSort";
 
-export type SortOption = {
-  order: Order;
-  selected?: boolean;
-};
-
-export type SortEvent = { order: SortOrder };
+export type SortChangeEvent = { order: SortOrder | SortOrder[] };
+export type SortChangeCallback = (event: SortChangeEvent) => void;
+export type SortClearCallback = () => void;
 
 export const Sort: Component<{
-  options: SortOption[];
-  onChange: (event: SortEvent) => void;
-  onClear: () => void;
+  options: ConfigSort[];
+  onChange: SortChangeCallback;
+  onClear: SortClearCallback;
 }> = (props) => {
   const sortableOptions = () =>
-    props.options.filter((option) => isNumerical(option.order.field) && option.order.field.number.count === 1);
-
+    props.options.filter((option) =>
+      option.orders.every((order) => isNumerical(order.field) && 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,
-          },
-        });
+    if (index === -1) {
+      props.onClear();
+    } else {
+      const sortOption = sortableOptions()[index]!;
+      props.onChange({
+        order: sortOption.orders.map((order) => mapOrder(order)),
+      });
+    }
   };
 
+  function getLabel(orders: ConfigSortOrder[]) {
+    return orders.length > 0 && orders[0] !== undefined
+      ? `${orders[0].field.label || orders[0].field.id} ${orders[0].direction === DIRECTION_ASCENDING ? "(ascending)" : "(descending)"}`
+      : " ";
+  }
+
   return (
     <div class="control">
       <span class="inline-control-text mr-2">Sort by</span>
@@ -40,8 +44,7 @@ export const Sort: Component<{
           <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)"}
+                {getLabel(option.orders)}
               </option>
             )}
           </For>

package/src/components/Table.tsx

@@ -0,0 +1,16 @@
+import { ParentComponent } from "solid-js";
+
+export const Table: ParentComponent<{
+  borderless?: boolean;
+}> = (props) => {
+  // workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776
+  return (
+    <div style={{ display: "grid" }}>
+      <div class="table-container">
+        <table classList={{ table: true, "is-narrow": true, "is-borderless": props.borderless }}>
+          {props.children}
+        </table>
+      </div>
+    </div>
+  );
+};

package/src/components/Tooltip.tsx

@@ -0,0 +1,20 @@
+import { For, ParentComponent } from "solid-js";
+import { Anchor } from "./Anchor.tsx";
+
+export const Tooltip: ParentComponent<{
+  text: string | null;
+}> = (props) => {
+  const elements = () =>
+    props.text
+      ? props.text
+          .split(" ", -1)
+          .map((token) => (token.startsWith("http") ? <Anchor href={token}>{token + " "}</Anchor> : token + " "))
+      : [];
+
+  return (
+    <div class="tooltip has-background-dark has-text-light">
+      <For each={elements()}>{(element) => element}</For>
+      {props.children}
+    </div>
+  );
+};

package/src/components/VariantBreadcrumb.tsx

@@ -0,0 +1,54 @@
+import { Component } from "solid-js";
+import { SampleContainer } from "../utils/api.ts";
+import { VariantType } from "../utils/variantType.ts";
+import { Item } from "@molgenis/vip-report-api";
+import { VcfRecord } from "@molgenis/vip-report-vcf";
+import { getSampleLabel } from "../utils/sample.ts";
+import { getRecordLabel, href } from "../utils/utils.ts";
+import { Breadcrumb, BreadcrumbItem } from "./Breadcrumb.tsx";
+
+export const VariantBreadcrumb: Component<{
+  variantType: VariantType;
+  sample?: SampleContainer;
+  record?: Item<VcfRecord>;
+  consequenceId?: number;
+}> = (props) => {
+  function createBreadcrumbItems(
+    variantType: VariantType,
+    sample?: SampleContainer,
+    record?: Item<VcfRecord>,
+    consequenceId?: number,
+  ) {
+    const items: BreadcrumbItem[] = [];
+
+    const tokens: (string | number)[] = [];
+    if (sample) {
+      tokens.push("samples");
+      items.push({ href: href(tokens), text: "Samples" });
+      tokens.push(sample.item.id);
+      items.push({ href: href(tokens), text: getSampleLabel(sample.item) });
+    }
+
+    tokens.push("variants");
+    items.push({ href: href(tokens), text: "Variants" });
+    tokens.push(variantType.id);
+    items.push({ href: href(tokens), text: variantType.label });
+
+    if (record) {
+      tokens.push("variant");
+      tokens.push(record.id);
+      items.push({ href: href(tokens), text: getRecordLabel(record) });
+
+      if (consequenceId !== undefined) {
+        tokens.push(consequenceId);
+        items.push({ href: href(tokens), text: `Consequence #${consequenceId}` });
+      }
+    }
+
+    return items;
+  }
+
+  return (
+    <Breadcrumb items={createBreadcrumbItems(props.variantType, props.sample, props.record, props.consequenceId)} />
+  );
+};

package/src/components/VariantConsequenceContainer.tsx

@@ -0,0 +1,100 @@
+import { Component, Show } from "solid-js";
+import { MetadataContainer, SampleContainer } from "../utils/api.ts";
+import { Value, VcfRecord } from "@molgenis/vip-report-vcf";
+import { DecisionTree, Item, Sample } from "@molgenis/vip-report-api";
+import { VariantInfoTable } from "./VariantInfoTable.tsx";
+import { VariantConsequenceTable } from "./VariantConsequenceTable.tsx";
+import { VariantTable } from "./VariantTable.tsx";
+import { DecisionTreePath } from "./tree/DecisionTreePath.tsx";
+import { getDecisionTreePath, getSampleTreePath } from "../utils/decisionTree.ts";
+import { VariantType } from "../utils/variantType.ts";
+import { getPedigreeSamples } from "../utils/sample.ts";
+import { getInfoField, getInfoValue } from "../utils/vcf.ts";
+import { RuntimeError } from "../utils/error.ts";
+import { ConfigJson } from "../types/config";
+import { VariantGenotypeTable } from "./VariantGenotypeTable.tsx";
+import { initConfig } from "../utils/config/config.ts";
+
+export const VariantConsequenceContainer: Component<{
+  config: ConfigJson;
+  metadata: MetadataContainer;
+  variantType: VariantType;
+  consequenceId: number;
+  record: Item<VcfRecord>;
+  sample: SampleContainer | null;
+  decisionTree: DecisionTree | null;
+  sampleTree: DecisionTree | null;
+}> = (props) => {
+  const config = () => initConfig(props.config, props.variantType, props.metadata, props.sample);
+
+  const samples = (): Item<Sample>[] => (props.sample ? getPedigreeSamples(props.sample) : []);
+  const csqField = () => {
+    const csqField = getInfoField(props.metadata.records, "CSQ");
+    if (csqField === undefined) throw new RuntimeError();
+    return csqField;
+  };
+  const hasDecisionTreePathMeta = () =>
+    (props.metadata.records.info.CSQ?.nested?.items || []).findIndex((csq) => csq.id === "VIPP") !== -1;
+  const hasSampleTreePathMeta = () => props.metadata.records.format.VIPP_S != null;
+
+  return (
+    <>
+      <div class="columns">
+        <div class="column is-4">
+          <div>
+            <h1 class="title is-5">Info</h1>
+            <VariantInfoTable infoMetadataContainer={props.metadata.records.info} infoContainer={props.record.data.n} />
+          </div>
+          <div class="mt-3">
+            <h1 class="title is-5">Consequence</h1>
+            <VariantConsequenceTable
+              csqMetadata={csqField().nested?.items || []}
+              csqValues={(getInfoValue(props.record, 0, csqField()) as Value[])[props.consequenceId] as Value[]}
+              record={props.record}
+            />
+          </div>
+          <div class="mt-3">
+            <h1 class="title is-5">Record</h1>
+            <VariantTable variant={props.record.data} />
+          </div>
+        </div>
+        <div class="column is-8">
+          <Show when={config().variant.samplesCells}>
+            {(samplesCells) => (
+              <div class="column">
+                <h1 class="title is-5">Samples</h1>
+                <VariantGenotypeTable
+                  config={samplesCells()}
+                  samples={samples()}
+                  metadata={props.metadata}
+                  variantType={props.variantType}
+                  record={props.record}
+                />
+              </div>
+            )}
+          </Show>
+          <div class="columns mt-3">
+            {props.decisionTree !== null && hasDecisionTreePathMeta() && (
+              <div class="column is-6">
+                <h1 class="title is-5">Variant classification tree path</h1>
+                <DecisionTreePath
+                  decisionTree={props.decisionTree}
+                  path={getDecisionTreePath(props.metadata.records, props.record, props.consequenceId)}
+                />
+              </div>
+            )}
+            {props.sampleTree !== null && hasSampleTreePathMeta() && props.sample && (
+              <div class="column is-6">
+                <h1 class="title is-5">Sample classification tree path</h1>
+                <DecisionTreePath
+                  decisionTree={props.sampleTree}
+                  path={getSampleTreePath(props.metadata.records, props.sample, props.record, props.consequenceId)}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/components/VariantConsequenceTable.tsx

@@ -0,0 +1,58 @@
+import { Component, createMemo, For, Show } from "solid-js";
+import { FieldMetadata, ValueArray, VcfRecord } from "@molgenis/vip-report-vcf";
+import { Item } from "@molgenis/vip-report-api";
+import { FieldTyped } from "./field/typed/FieldTyped.tsx";
+import { Table } from "./Table.tsx";
+import { abbreviateHeader } from "../utils/utils.ts";
+
+export const VariantConsequenceTable: Component<{
+  csqMetadata: FieldMetadata[];
+  csqValues: ValueArray;
+  record: Item<VcfRecord>;
+}> = (props) => {
+  function getValues(index: number): ValueArray {
+    return props.csqValues[index] !== null ? (props.csqValues[index] as ValueArray) : [];
+  }
+
+  return (
+    <Table borderless={true}>
+      <tbody>
+        <For each={props.csqMetadata}>
+          {(field: FieldMetadata, index) => (
+            <Show when={!(getValues(index()).length === 0)}>
+              <tr>
+                <FieldHeader field={field} />
+                <td>
+                  <FieldTyped metadata={field} value={props.csqValues[index()]} />
+                </td>
+              </tr>
+            </Show>
+          )}
+        </For>
+      </tbody>
+    </Table>
+  );
+};
+
+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>
+  );
+};