@molgenis/vip-report-template 2.7.3 → 3.0.0

package/src/components/VariantTable.tsx

@@ -0,0 +1,71 @@
+import { Component } from "solid-js";
+import { Chrom } from "./record/Chrom";
+import { Pos } from "./record/Pos";
+import { Id } from "./record/Id";
+import { Ref } from "./record/Ref";
+import { Alt } from "./record/Alt";
+import { Qual } from "./record/Qual";
+import { Filter } from "./record/Filter";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+
+export const VariantTable: Component<{ variant: 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>
+            <tr>
+              <td>Contig</td>
+              <td>
+                <Chrom value={props.variant.c} />
+              </td>
+            </tr>
+            <tr>
+              <td>Position</td>
+              <td>
+                <Pos value={props.variant.p} />
+              </td>
+            </tr>
+            {props.variant.i.length > 0 && (
+              <tr>
+                <td>Identifiers</td>
+                <td>
+                  <Id value={props.variant.i} />
+                </td>
+              </tr>
+            )}
+            <tr>
+              <td>Reference allele</td>
+              <td>
+                <Ref value={props.variant.r} isAbbreviate={false} />
+              </td>
+            </tr>
+            <tr>
+              <td>Alternate allele(s)</td>
+              <td>
+                <Alt value={props.variant.a} isAbbreviate={false} />
+              </td>
+            </tr>
+            {props.variant.q !== null && (
+              <tr>
+                <td>Quality</td>
+                <td>
+                  <Qual value={props.variant.q} />
+                </td>
+              </tr>
+            )}
+            {props.variant.f.length > 0 && (
+              <tr>
+                <td>Filter(s)</td>
+                <td>
+                  <Filter value={props.variant.f} />
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

package/src/components/VariantsSampleTable.tsx

@@ -0,0 +1,87 @@
+import { Genotype, Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Ref } from "./record/Ref";
+import { Chrom } from "./record/Chrom";
+import { Pos } from "./record/Pos";
+import { Link } from "solid-app-router";
+import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { GenotypeField } from "./record/format/GenotypeField";
+import { InfoCollapsablePane } from "./InfoCollapsablePane";
+import { Component, createMemo, For } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FieldHeader } from "./FieldHeader";
+import { Abbr } from "./Abbr";
+import { abbreviateHeader } from "../utils/field";
+
+export const VariantsSampleTable: Component<{
+  item: Item<Sample>;
+  pedigreeSamples: Item<Sample>[];
+  records: Item<Record>[];
+  recordsMetadata: Metadata;
+  nestedFields: FieldMetadata[];
+}> = (props) => {
+  const samples = createMemo(() => [props.item.data, ...props.pedigreeSamples.map((item) => item.data)]);
+
+  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>Position</th>
+              <th>Reference</th>
+              <For each={samples()}>
+                {(sample: Sample) => (
+                  <th>
+                    <Abbr
+                      title={`${
+                        sample.person.individualId
+                      }: ${sample.person.sex.toLowerCase()}, ${sample.person.affectedStatus.toLowerCase()}`}
+                      value={abbreviateHeader(sample.person.individualId)}
+                    />
+                  </th>
+                )}
+              </For>
+              {/* column containing collapse/expand icon */}
+              <th />
+              <For each={props.nestedFields}>{(field) => <FieldHeader field={field} />}</For>
+            </tr>
+          </thead>
+          <tbody>
+            <For each={props.records}>
+              {(record) => (
+                <tr>
+                  <td>
+                    <Link href={`/samples/${props.item.id}/variants/${record.id}`}>
+                      <Chrom value={record.data.c} />
+                      <span>:</span>
+                      <Pos value={record.data.p} />
+                    </Link>
+                  </td>
+                  <td>
+                    <Ref value={record.data.r} isAbbreviate={true} />
+                  </td>
+                  <For each={samples()}>
+                    {(sample: Sample) => (
+                      <td>
+                        <GenotypeField
+                          genotype={record.data.s[sample.index]["GT"] as Genotype}
+                          refAllele={record.data.r}
+                          altAlleles={record.data.a}
+                          isAbbreviate={true}
+                          allelicDepth={record.data.s[sample.index]["AD"] as number[]}
+                          readDepth={record.data.s[sample.index]["DP"] as number}
+                        />
+                      </td>
+                    )}
+                  </For>
+                  <InfoCollapsablePane fields={props.nestedFields} record={record} />
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

package/src/components/VariantsTable.tsx

@@ -0,0 +1,140 @@
+import { Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Component, createMemo, For } from "solid-js";
+import { Ref } from "./record/Ref";
+import { Chrom } from "./record/Chrom";
+import { Pos } from "./record/Pos";
+import { Id } from "./record/Id";
+import { Alt } from "./record/Alt";
+import { Qual } from "./record/Qual";
+import { Filter } from "./record/Filter";
+import { Info } from "./record/Info";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Link } from "solid-app-router";
+import { Item } from "@molgenis/vip-report-api/src/Api";
+import { FieldHeader } from "./FieldHeader";
+
+const computeRowspan = (recordsMetadata: Metadata) =>
+  Object.values(recordsMetadata.info).find((field) => field.nested) !== undefined ? 2 : 1;
+const computeColspan = (field: FieldMetadata) => (field.nested ? field.nested.items.length : undefined);
+
+export const VariantsTable: Component<{
+  records: Item<Record>[];
+  recordsMetadata: Metadata;
+}> = (props) => {
+  const infoFields = () => Object.values(props.recordsMetadata.info);
+  const infoFieldsNested = () => infoFields().filter((infoField) => infoField.nested);
+
+  const rowspan = createMemo(() => computeRowspan(props.recordsMetadata));
+
+  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 rowspan={rowspan()}>CHROM</th>
+              <th rowspan={rowspan()}>POS</th>
+              <th rowspan={rowspan()}>ID</th>
+              <th rowspan={rowspan()}>REF</th>
+              <th rowspan={rowspan()}>ALT</th>
+              <th rowspan={rowspan()}>QUAL</th>
+              <th rowspan={rowspan()}>FILTER</th>
+              <For each={infoFields()}>
+                {(infoField) => (
+                  <FieldHeader
+                    field={infoField}
+                    rowspan={infoField.nested ? undefined : rowspan()}
+                    colspan={computeColspan(infoField)}
+                  />
+                )}
+              </For>
+            </tr>
+            {rowspan() && rowspan() > 1 && (
+              <tr>
+                <For each={infoFieldsNested()}>
+                  {(infoField) => (
+                    <For each={infoField.nested?.items}>
+                      {(nestedInfoField) => <FieldHeader field={nestedInfoField} />}
+                    </For>
+                  )}
+                </For>
+              </tr>
+            )}
+          </thead>
+          <tbody>
+            <For each={props.records}>
+              {(record) => (
+                <tr>
+                  <td>
+                    <Chrom value={record.data.c} />
+                  </td>
+                  <td>
+                    <Link href={`/variants/${record.id}`}>
+                      <Pos value={record.data.p} />
+                    </Link>
+                  </td>
+                  <td>
+                    <Id value={record.data.i} />
+                  </td>
+                  <td>
+                    <Ref value={record.data.r} isAbbreviate={true} />
+                  </td>
+                  <td>
+                    <Alt value={record.data.a} isAbbreviate={true} />
+                  </td>
+                  <td>
+                    <Qual value={record.data.q} />
+                  </td>
+                  <td>
+                    <Filter value={record.data.f} />
+                  </td>
+                  <For each={infoFields()}>
+                    {(infoField) =>
+                      infoField.nested ? (
+                        <For each={infoField.nested.items}>
+                          {(infoFieldNested, i) => (
+                            <td>
+                              {infoField.number.count === 1 ? (
+                                <>
+                                  <Info
+                                    info={(record.data.n[infoField.id] as Value[])[i()]}
+                                    infoMetadata={infoFieldNested}
+                                    variant={record.data}
+                                  />
+                                </>
+                              ) : (
+                                <For each={record.data.n[infoField.id] as unknown as Value[][]}>
+                                  {(value, j) => (
+                                    <>
+                                      {j() !== 0 && <br />}
+                                      <Info
+                                        info={value[i()]}
+                                        infoMetadata={infoFieldNested}
+                                        variant={record.data}
+                                        href={`/variants/${record.id}/consequences/${j()}`}
+                                      />
+                                    </>
+                                  )}
+                                </For>
+                              )}
+                            </td>
+                          )}
+                        </For>
+                      ) : (
+                        <td>
+                          <Info info={record.data.n[infoField.id]} infoMetadata={infoField} variant={record.data} />
+                        </td>
+                      )
+                    }
+                  </For>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

package/src/components/VcfHeaderRow.tsx

@@ -0,0 +1,15 @@
+import { Component, Show } from "solid-js";
+
+export const VcfHeaderRow: Component<{
+  value: string | null;
+  title: string;
+}> = (props) => {
+  return (
+    <Show when={props.value !== null}>
+      <tr>
+        <th>{props.title}:</th>
+        <td>{props.value}</td>
+      </tr>
+    </Show>
+  );
+};

package/src/components/filter/Filter.tsx

@@ -0,0 +1,37 @@
+import { Component, Match, Switch } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FilterCategorical } from "./FilterCategorical";
+import { FilterIntegerVim } from "./FilterIntegerVim";
+import { FilterIntegerDp } from "./FilterIntegerDp";
+import { FilterIntegerVid } from "./FilterIntegerVid";
+import { QueryClause, Selector } from "@molgenis/vip-report-api/src/Api";
+
+export type FilterChangeEvent = { query: QueryClause };
+export type FilterClearEvent = { selector: Selector };
+
+export const Filter: Component<{
+  field: FieldMetadata;
+  query?: QueryClause;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const onChange = (event: FilterChangeEvent) => props.onChange(event);
+  const onClear = (event: FilterClearEvent) => props.onClear(event);
+
+  return (
+    <Switch>
+      <Match when={props.field.id === "DP"}>
+        <FilterIntegerDp field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
+      </Match>
+      <Match when={props.field.id === "VID"}>
+        <FilterIntegerVid field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
+      </Match>
+      <Match when={props.field.id === "VIM"}>
+        <FilterIntegerVim field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
+      </Match>
+      <Match when={props.field.type === "CATEGORICAL"}>
+        <FilterCategorical field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/filter/FilterCategorical.tsx

@@ -0,0 +1,72 @@
+import { Component, For } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Checkbox, CheckboxEvent } from "../Checkbox";
+import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { selector } from "../../utils/query";
+import { QueryClause } from "@molgenis/vip-report-api/src/Api";
+
+export type CheckboxGroup = {
+  [key: string]: boolean;
+};
+
+export const FilterCategorical: Component<{
+  field: FieldMetadata;
+  query?: QueryClause;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const group: CheckboxGroup = {};
+  if (props.query !== undefined) {
+    (props.query?.args as string[]).forEach((key) => {
+      group[key] = true;
+    });
+  }
+
+  const nullValue = "__null";
+
+  // enable null category for any_has_any case if someone asks for it (requires query to be composed)
+  const includeNullCategory = () => !props.field.required && props.field.number.count === 1;
+
+  const onChange = (event: CheckboxEvent) => {
+    group[event.value !== undefined ? event.value : nullValue] = event.checked;
+    const values = Object.keys(group)
+      .filter((key) => group[key])
+      .map((key) => (key !== nullValue ? key : null));
+    if (values.length > 0) {
+      props.onChange({
+        query: {
+          selector: selector(props.field),
+          operator: props.field.number.count === 1 ? "has_any" : "any_has_any",
+          args: values,
+        },
+      });
+    } else {
+      props.onClear({ selector: selector(props.field) });
+    }
+  };
+
+  return (
+    <>
+      <For each={props.field.categories}>
+        {(category) => (
+          <div class="control">
+            <Checkbox
+              value={category}
+              label={category}
+              checked={props.query && (props.query.args as string[]).includes(category)}
+              onChange={onChange}
+            />
+          </div>
+        )}
+      </For>
+      {includeNullCategory() && (
+        <Checkbox
+          value={nullValue}
+          label="No value"
+          checked={props.query && (props.query.args as string[]).includes(nullValue)}
+          onChange={onChange}
+        />
+      )}
+    </>
+  );
+};

package/src/components/filter/FilterIntegerDp.tsx

@@ -0,0 +1,24 @@
+import { Component } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { Checkbox, CheckboxEvent } from "../Checkbox";
+import { selector } from "../../utils/query";
+import { QueryClause } from "@molgenis/vip-report-api/src/Api";
+
+export const FilterIntegerDp: Component<{
+  field: FieldMetadata;
+  query?: QueryClause;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const onFilterChange = (event: CheckboxEvent) => {
+    if (event.checked) props.onChange({ query: { selector: selector(props.field), operator: ">=", args: 20 } });
+    else props.onClear({ selector: selector(props.field) });
+  };
+
+  return (
+    <div class="control">
+      <Checkbox label="Read depth >= 20" checked={props.query && props.query.args === 20} onChange={onFilterChange} />
+    </div>
+  );
+};

package/src/components/filter/FilterIntegerVid.tsx

@@ -0,0 +1,28 @@
+import { Component } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { Checkbox, CheckboxEvent } from "../Checkbox";
+import { selector } from "../../utils/query";
+import { QueryClause } from "@molgenis/vip-report-api/src/Api";
+
+export const FilterIntegerVid: Component<{
+  field: FieldMetadata;
+  query?: QueryClause;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const onFilterChange = (event: CheckboxEvent) => {
+    if (event.checked) props.onChange({ query: { selector: selector(props.field), operator: "==", args: 1 } });
+    else props.onClear({ selector: selector(props.field) });
+  };
+
+  return (
+    <div class="control">
+      <Checkbox
+        label="Inheritance: de novo"
+        checked={props.query && props.query.args === 1}
+        onChange={onFilterChange}
+      />
+    </div>
+  );
+};

package/src/components/filter/FilterIntegerVim.tsx

@@ -0,0 +1,24 @@
+import { Component } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { Checkbox, CheckboxEvent } from "../Checkbox";
+import { selector } from "../../utils/query";
+import { QueryClause } from "@molgenis/vip-report-api/src/Api";
+
+export const FilterIntegerVim: Component<{
+  field: FieldMetadata;
+  query?: QueryClause;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const onFilterChange = (event: CheckboxEvent) => {
+    if (event.checked) props.onChange({ query: { selector: selector(props.field), operator: "==", args: 1 } });
+    else props.onClear({ selector: selector(props.field) });
+  };
+
+  return (
+    <div class="control">
+      <Checkbox label="Inheritance: match" checked={props.query && props.query.args === 1} onChange={onFilterChange} />
+    </div>
+  );
+};

package/src/components/filter/Filters.tsx

@@ -0,0 +1,30 @@
+import { Component } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { InfoFilters } from "./InfoFilters";
+import { SamplesFilters } from "./SamplesFilters";
+import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { FilterQueries } from "../../store";
+
+export const Filters: Component<{
+  fields: FieldMetadata[];
+  samplesFields: { sample: Item<Sample>; fields: FieldMetadata[] }[];
+  queries?: FilterQueries;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const onChange = (event: FilterChangeEvent) => props.onChange(event);
+  const onClear = (event: FilterClearEvent) => props.onClear(event);
+
+  return (
+    <>
+      <InfoFilters fields={props.fields} queries={props.queries} onChange={onChange} onClear={onClear} />
+      <SamplesFilters
+        samplesFields={props.samplesFields}
+        queries={props.queries}
+        onChange={onChange}
+        onClear={onClear}
+      />
+    </>
+  );
+};

package/src/components/filter/InfoFilter.tsx

@@ -0,0 +1,36 @@
+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";
+
+export const InfoFilter: Component<{
+  field: FieldMetadata;
+  query?: QueryClause;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const label = () => (props.field.label !== undefined ? props.field.label : props.field.id);
+
+  const onChange = (event: FilterChangeEvent) => {
+    props.onChange({
+      query: { ...event.query, selector: ["n", ...(event.query.selector as SelectorPart[])] },
+    });
+  };
+
+  const onClear = (event: FilterClearEvent) => {
+    props.onClear({
+      selector: ["n", ...(event.selector as SelectorPart[])],
+    });
+  };
+
+  return (
+    <>
+      <p class="has-text-weight-semibold">
+        {props.field.description ? <abbr title={props.field.description}>{label()}</abbr> : <span>{label()}</span>}
+      </p>
+      <div class="field">
+        <Filter field={props.field} query={props.query} onChange={onChange} onClear={onClear} />
+      </div>
+    </>
+  );
+};

package/src/components/filter/InfoFilters.tsx

@@ -0,0 +1,32 @@
+import { Component, For } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { InfoFilter } from "./InfoFilter";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { FilterQueries } from "../../store";
+import { infoFieldKey } from "../../utils/query";
+
+export const InfoFilters: Component<{
+  fields: FieldMetadata[];
+  queries?: FilterQueries;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+  defaultValues?: { [key: string]: Value };
+}> = (props) => {
+  const filterableFields = () => props.fields.filter((field) => field.type === "CATEGORICAL");
+
+  return (
+    <>
+      <For each={filterableFields()}>
+        {(field) => (
+          <InfoFilter
+            field={field}
+            query={props.queries ? props.queries[infoFieldKey(field)] : undefined}
+            onChange={props.onChange}
+            onClear={props.onClear}
+          />
+        )}
+      </For>
+    </>
+  );
+};

package/src/components/filter/SampleFilters.tsx

@@ -0,0 +1,44 @@
+import { Component, For } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Item, Sample, SelectorPart } from "@molgenis/vip-report-api/src/Api";
+import { Filter, FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { FilterQueries } from "../../store";
+import { sampleFieldKey } from "../../utils/query";
+
+export const SampleFilters: Component<{
+  sample: Item<Sample>;
+  fields: FieldMetadata[];
+  queries?: FilterQueries;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const onChange = (event: FilterChangeEvent) => {
+    props.onChange({
+      query: { ...event.query, selector: ["s", props.sample.data.index, ...(event.query.selector as SelectorPart[])] },
+    });
+  };
+
+  const onClear = (event: FilterClearEvent) => {
+    props.onClear({
+      selector: ["s", props.sample.data.index, ...(event.selector as SelectorPart[])],
+    });
+  };
+
+  return (
+    <>
+      <p class="has-text-weight-semibold">{props.sample.data.person.individualId}</p>
+      <div class="field">
+        <For each={props.fields}>
+          {(field) => (
+            <Filter
+              field={field}
+              query={props.queries ? props.queries[sampleFieldKey(props.sample, field)] : undefined}
+              onChange={onChange}
+              onClear={onClear}
+            />
+          )}
+        </For>
+      </div>
+    </>
+  );
+};