@molgenis/vip-report-template 6.1.1 → 7.0.0

package/src/components/VariantContainer.tsx

@@ -0,0 +1,71 @@
+import { Component, Show } from "solid-js";
+import { MetadataContainer, SampleContainer } from "../utils/api.ts";
+import { Item, Sample } from "@molgenis/vip-report-api";
+import { VcfRecord } from "@molgenis/vip-report-vcf";
+import { GenomeBrowser } from "./GenomeBrowser.tsx";
+import { VariantTable } from "./VariantTable.tsx";
+import { VariantInfoTable } from "./VariantInfoTable.tsx";
+import { RecordsTable } from "./RecordsTable.tsx";
+import { ConfigJson } from "../types/config";
+import { VariantType } from "../utils/variantType.ts";
+import { getPedigreeSamples } from "../utils/sample.ts";
+import { VariantGenotypeTable } from "./VariantGenotypeTable.tsx";
+import { initConfig } from "../utils/config/config.ts";
+
+export const VariantContainer: Component<{
+  config: ConfigJson;
+  metadata: MetadataContainer;
+  variantType: VariantType;
+  record: Item<VcfRecord>;
+  sample: SampleContainer | null;
+}> = (props) => {
+  const config = () => initConfig(props.config, props.variantType, props.metadata, props.sample);
+  const samples = (): Item<Sample>[] => (props.sample ? getPedigreeSamples(props.sample) : []);
+
+  return (
+    <>
+      <div class="columns">
+        <div class="column">
+          <GenomeBrowser metadata={props.metadata} samples={samples()} record={props.record} />
+        </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.metadata.records.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 infoMetadataContainer={props.metadata.records.info} infoContainer={props.record.data.n} />
+          </div>
+        </Show>
+        <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>
+      <div class="columns">
+        <div class="column is-full">
+          <RecordsTable fieldConfigs={config().variant.cells} records={[props.record]} verticalHeaders={true} />
+        </div>
+      </div>
+    </>
+  );
+};

package/src/components/VariantFilters.tsx

@@ -0,0 +1,27 @@
+import { Component, For } from "solid-js";
+import { FilterValueField } from "../types/configFilter";
+import { ConfigFilters } from "../types/config";
+import { FilterChangeCallback, FilterClearCallback, FilterValueMap } from "../types/filter";
+import { Filter } from "./filter/Filter";
+
+export const VariantFilters: Component<{
+  filterConfigs: ConfigFilters;
+  filterValues: FilterValueMap;
+  onFilterChange: FilterChangeCallback;
+  onFilterClear: FilterClearCallback;
+}> = (props) => {
+  return (
+    <>
+      <For each={props.filterConfigs}>
+        {(filter) => (
+          <Filter
+            config={filter}
+            value={props.filterValues[filter.id] as FilterValueField | undefined}
+            onValueChange={(event) => props.onFilterChange({ id: filter.id, ...event })}
+            onValueClear={() => props.onFilterClear({ id: filter.id })}
+          />
+        )}
+      </For>
+    </>
+  );
+};

package/src/components/VariantGenotypeTable.tsx

@@ -0,0 +1,44 @@
+import { Component, For, Show } from "solid-js";
+import { VcfRecord } from "@molgenis/vip-report-vcf";
+import { getSampleLabel } from "../utils/sample.ts";
+import { Item, Sample } from "@molgenis/vip-report-api";
+import { Table } from "./Table.tsx";
+import { MetadataContainer } from "../utils/api.ts";
+import { VariantType } from "../utils/variantType.ts";
+import { ConfigSamplesCells } from "../types/config";
+import { RecordsTableCells, RecordsTableHeaderCells } from "./RecordsTable.tsx";
+
+export const VariantGenotypeTable: Component<{
+  config: ConfigSamplesCells;
+  samples: Item<Sample>[];
+  metadata: MetadataContainer;
+  variantType: VariantType;
+  record: Item<VcfRecord>;
+}> = (props) => {
+  return (
+    <Show when={props.samples.length >= 0}>
+      <Table>
+        <thead>
+          <tr>
+            <th />
+            <RecordsTableHeaderCells fieldConfigs={props.config[props.samples[0]!.id]!} />
+          </tr>
+        </thead>
+        <tbody>
+          <For each={props.samples}>
+            {(sample) => (
+              <Show when={props.config[sample.id]}>
+                {(config) => (
+                  <tr>
+                    <th>{getSampleLabel(sample)}</th>
+                    <RecordsTableCells fieldConfigs={config()} record={props.record} />
+                  </tr>
+                )}
+              </Show>
+            )}
+          </For>
+        </tbody>
+      </Table>
+    </Show>
+  );
+};

package/src/components/VariantInfoTable.tsx

@@ -1,40 +1,31 @@
 import { Component, For } from "solid-js";
-import { FieldMetadataContainer } from "@molgenis/vip-report-vcf/src/VcfParser";
-import { Info } from "./record/Info";
-import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
-import { Item } from "@molgenis/vip-report-api/src/Api";
+import { FieldMetadataContainer, InfoContainer } from "@molgenis/vip-report-vcf";
+import { FieldInfo } from "./field/info/FieldInfo.tsx";
+import { Table } from "./Table.tsx";
 
 export const VariantInfoTable: Component<{
-  infoFields: FieldMetadataContainer;
-  record: Item<Record>;
+  infoMetadataContainer: FieldMetadataContainer;
+  infoContainer: InfoContainer;
 }> = (props) => {
+  const fieldMetadatas = () =>
+    Object.values(props.infoMetadataContainer).filter(
+      (info) => !info.nested && props.infoContainer[info.id] !== undefined,
+    );
+
   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.data.n[info.id] !== undefined,
-              )}
-            >
-              {(infoField) => (
-                <tr>
-                  <td>{infoField.id}</td>
-                  <td>
-                    <Info
-                      info={{ value: props.record.data.n[infoField.id], record: props.record }}
-                      infoMeta={infoField}
-                      context={{}}
-                    />
-                  </td>
-                </tr>
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <Table>
+      <tbody>
+        <For each={fieldMetadatas()}>
+          {(fieldMetadata) => (
+            <tr>
+              <td>{fieldMetadata.id}</td>
+              <td>
+                <FieldInfo metadata={fieldMetadata} value={props.infoContainer[fieldMetadata.id]} />
+              </td>
+            </tr>
+          )}
+        </For>
+      </tbody>
+    </Table>
   );
 };

package/src/components/VariantResults.tsx

@@ -0,0 +1,103 @@
+import { Component, Show } from "solid-js";
+import { PagedItems } from "@molgenis/vip-report-api";
+import { Loader } from "./Loader";
+import { Sort, SortChangeCallback, SortClearCallback } from "./Sort";
+import { PageChangeCallback, Pager } from "./Pager";
+import { RecordsTable } from "./RecordsTable";
+import { RecordsPerPage, RecordsPerPageChangeCallback } from "./RecordsPerPage";
+import { VcfRecord } from "@molgenis/vip-report-vcf";
+import { ButtonDownload } from "./form/ButtonDownload";
+import { ConfigCells, ConfigRecordsPerPage } from "../types/config";
+import { ConfigCellGroup, ConfigCellInfo } from "../types/configCells";
+import { DIRECTION_ASCENDING, DIRECTION_DESCENDING } from "../utils/query/sort.ts";
+
+import { MetadataContainer } from "../utils/api.ts";
+import { ConfigSort } from "../types/configSort";
+
+export type RecordsDownloadCallback = () => void;
+
+export const VariantResults: Component<{
+  metadata: MetadataContainer;
+  fieldConfigs: ConfigCells;
+  records: PagedItems<VcfRecord>;
+  sortOptions: ConfigSort[] | undefined;
+  recordsPerPage: ConfigRecordsPerPage;
+  onRecordsPerPageChange: RecordsPerPageChangeCallback;
+  onRecordsDownload: RecordsDownloadCallback;
+  onPageChange: PageChangeCallback;
+  onSortChange: SortChangeCallback;
+  onSortClear: SortClearCallback;
+}> = (props) => {
+  const sortOptions = (): ConfigSort[] => {
+    if (props.sortOptions !== undefined && props.sortOptions.length !== 0) {
+      return props.sortOptions;
+    } else {
+      return props.fieldConfigs
+        .flatMap((fieldConfig) =>
+          fieldConfig.type === "group" ? (fieldConfig as ConfigCellGroup).fieldConfigs : [fieldConfig],
+        )
+        .filter((fieldConfig) => fieldConfig.type === "info")
+        .map((fieldConfig) => fieldConfig as ConfigCellInfo)
+        .flatMap((fieldConfig) => [
+          {
+            orders: [{ field: fieldConfig.field, direction: DIRECTION_ASCENDING }],
+            selected: undefined,
+          },
+          {
+            orders: [{ field: fieldConfig.field, direction: DIRECTION_DESCENDING }],
+            selected: undefined,
+          },
+        ]);
+    }
+  };
+
+  return (
+    <>
+      <div class="columns is-gapless">
+        <div class="column is-offset-1-fullhd is-3-fullhd is-4">
+          <Show when={props.records} fallback={<Loader />} keyed>
+            {(records) => (
+              <span class="is-pulled-left inline-control-text ml-2">{records.page.totalElements} records</span>
+            )}
+          </Show>
+        </div>
+        <div class="column is-4">
+          <Show when={props.records} fallback={<Loader />} keyed>
+            {(records) => <Pager page={records.page} onPageChange={props.onPageChange} />}
+          </Show>
+        </div>
+        <div class="column">
+          <div class="field is-grouped is-grouped-right">
+            {sortOptions().length > 0 && (
+              <Sort options={sortOptions()} onChange={props.onSortChange} onClear={props.onSortClear} />
+            )}
+            <div class="control">
+              <ButtonDownload
+                title="Download vcf file with records matching filters and search queries"
+                onClick={props.onRecordsDownload}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="columns is-gapless">
+        <div class="column is-full">
+          <Show when={props.records} fallback={<Loader />} keyed>
+            {(records) => (
+              <>
+                <RecordsTable fieldConfigs={props.fieldConfigs} records={records.items} />
+                <div class="columns is-gapless">
+                  <div class="column">
+                    <div class="field is-grouped is-grouped-right">
+                      <RecordsPerPage config={props.recordsPerPage} onChange={props.onRecordsPerPageChange} />
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+          </Show>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/components/VariantTable.tsx

@@ -1,71 +1,67 @@
 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";
+import { VcfRecord } from "@molgenis/vip-report-vcf";
+import { FieldChrom } from "./field/FieldChrom";
+import { FieldPos } from "./field/FieldPos";
+import { FieldId } from "./field/FieldId";
+import { FieldRef } from "./field/FieldRef";
+import { FieldAlt } from "./field/FieldAlt";
+import { FieldQual } from "./field/FieldQual";
+import { FieldFilter } from "./field/FieldFilter";
+import { Table } from "./Table.tsx";
 
-export const VariantTable: Component<{ variant: Record }> = (props) => {
+export const VariantTable: Component<{ variant: VcfRecord }> = (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>
+    <Table>
+      <tbody>
+        <tr>
+          <td>Contig</td>
+          <td>
+            <FieldChrom value={props.variant.c} />
+          </td>
+        </tr>
+        <tr>
+          <td>Position</td>
+          <td>
+            <FieldPos value={props.variant.p} />
+          </td>
+        </tr>
+        {props.variant.i.length > 0 && (
+          <tr>
+            <td>Identifiers</td>
+            <td>
+              <FieldId value={props.variant.i} />
+            </td>
+          </tr>
+        )}
+        <tr>
+          <td>Reference allele</td>
+          <td>
+            <FieldRef value={props.variant.r} isAbbreviate={false} />
+          </td>
+        </tr>
+        <tr>
+          <td>Alternate allele(s)</td>
+          <td>
+            <FieldAlt value={props.variant.a} isAbbreviate={false} />
+          </td>
+        </tr>
+        {props.variant.q !== null && (
+          <tr>
+            <td>Quality</td>
+            <td>
+              <FieldQual value={props.variant.q} />
+            </td>
+          </tr>
+        )}
+        {props.variant.f.length > 0 && (
+          <tr>
+            <td>Filter(s)</td>
+            <td>
+              <FieldFilter value={props.variant.f} />
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </Table>
   );
 };

package/src/components/VariantTypeSelect.tsx

@@ -0,0 +1,34 @@
+import { Component, For } from "solid-js";
+import { getVariantTypes, VariantType, VariantTypeId } from "../utils/variantType.ts";
+
+export type VariantTypeChangeEvent = { id: VariantTypeId };
+export type VariantTypeChangeCallback = (event: VariantTypeChangeEvent) => void;
+
+export const VariantTypeSelect: Component<{
+  value: VariantType | null;
+  variantTypeIds: Set<VariantTypeId>;
+  onChange: VariantTypeChangeCallback;
+}> = (props) => {
+  const onChange = (variantTypeId: VariantTypeId) => {
+    return props.onChange({ id: variantTypeId });
+  };
+
+  return (
+    <>
+      <p class="has-text-weight-semibold">Variant types</p>
+      <div class="field">
+        <ul>
+          <For each={getVariantTypes(props.variantTypeIds)}>
+            {(variantType: VariantType) => (
+              <li>
+                <a onClick={() => onChange(variantType.id)}>
+                  <abbr title={variantType.description}>{variantType.label}</abbr>
+                </a>
+              </li>
+            )}
+          </For>
+        </ul>
+      </div>
+    </>
+  );
+};

package/src/components/VariantsContainer.tsx

@@ -0,0 +1,150 @@
+import { VariantFilters } from "./VariantFilters";
+import { Params } from "@molgenis/vip-report-api";
+import { Component, createResource, Show } from "solid-js";
+import { VariantType } from "../utils/variantType.ts";
+import { useNavigate } from "@solidjs/router";
+import { initConfig } from "../utils/config/config.ts";
+import { createQuery } from "../utils/query/query.ts";
+import { PageChangeEvent } from "./Pager";
+import { writeVcf } from "@molgenis/vip-report-vcf";
+import { fetchRecords, MetadataContainer, SampleContainer } from "../utils/api.ts";
+import { createVcfDownloadFilename } from "../utils/download.ts";
+import { RecordsPerPageChangeEvent } from "./RecordsPerPage";
+import { SortChangeEvent } from "./Sort";
+import { VariantTypeChangeEvent, VariantTypeSelect } from "./VariantTypeSelect";
+import { Loader } from "./Loader";
+import { VariantResults } from "./VariantResults";
+import { FilterChangeEvent, FilterClearEvent } from "../types/filter";
+import { VariantsContainerHeader } from "./VariantsContainerHeader";
+import { href } from "../utils/utils.ts";
+import { getPedigreeSamples } from "../utils/sample.ts";
+import { ConfigJson } from "../types/config";
+import { createSort } from "../utils/query/sort.ts";
+import { VariantStore } from "../store/variants.ts";
+
+export const VariantsContainer: Component<{
+  store: VariantStore;
+  config: ConfigJson;
+  metadata: MetadataContainer;
+  variantType: VariantType;
+  sample: SampleContainer | null;
+}> = (props) => {
+  const navigate = useNavigate();
+
+  const config = () => initConfig(props.config, props.variantType, props.metadata, props.sample);
+  const variantTypeIds = () => (props.sample !== null ? props.sample.variantTypeIds : props.metadata.variantTypeIds);
+  const query = () => createQuery(config(), props.variantType, props.sample, props.store.getFilterValues());
+
+  const defaultSort = () => config().variants.sorts.find((configSort) => configSort.selected);
+  const sort = () => createSort(props.store.getSort(), defaultSort()) || undefined;
+  const defaultRecordsPerPage = () => config().variants.recordsPerPage.find((option) => option.selected)?.number || 10;
+  const recordsPerPage = () =>
+    props.store.getPageSize() !== null ? props.store.getPageSize()! : defaultRecordsPerPage();
+
+  const [records] = createResource(
+    (): Params => ({
+      query: query() || undefined,
+      page: props.store.getPageNumber() || 0,
+      size: recordsPerPage(),
+      sort: sort(),
+    }),
+    fetchRecords,
+  );
+
+  const onFilterChange = (event: FilterChangeEvent) => {
+    props.store.setFilterValue(event.id, event.value);
+  };
+  const onFilterClear = (event: FilterClearEvent) => {
+    props.store.clearFilter(event.id);
+  };
+  const onPageChange = (event: PageChangeEvent) => {
+    props.store.setPageNumber(event.page);
+  };
+
+  const onRecordsDownload = async () => {
+    const samples = props.sample ? getPedigreeSamples(props.sample) : [];
+    const filter = samples ? { samples: samples.map((sample) => sample.data.person.individualId) } : undefined;
+
+    // create vcf using all records that match filters, use default sort to ensure valid vcf ordering
+    const records = await fetchRecords({ query: query() || undefined, page: 0, size: Number.MAX_SAFE_INTEGER });
+    const vcf = writeVcf({ metadata: props.metadata.records, data: records.items.map((item) => item.data) }, filter);
+
+    const url = window.URL.createObjectURL(new Blob([vcf]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", createVcfDownloadFilename(props.metadata.htsFile));
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  const onRecordsPerPageChange = (event: RecordsPerPageChangeEvent) => {
+    props.store.setPageSize(event.number);
+  };
+  const onSortChange = (event: SortChangeEvent) => {
+    props.store.setSort(event.order);
+  };
+  const onSortClear = () => {
+    props.store.clearSort();
+  };
+  const onVariantTypeChange = (event: VariantTypeChangeEvent) => {
+    const components = props.sample !== null ? ["samples", props.sample.item.id] : [];
+    components.push("variants", event.id);
+    navigate(href(components));
+  };
+
+  return (
+    <>
+      <div class="columns is-1 mb-1">
+        <div class="column is-offset-2-fullhd is-offset-3">
+          <VariantsContainerHeader sample={props.sample} />
+        </div>
+      </div>
+      <div class="columns is-1">
+        <div class="column is-2-fullhd is-3">
+          <Show when={variantTypeIds().size > 1}>
+            <div class="columns">
+              <div class="column">
+                <VariantTypeSelect
+                  value={props.variantType}
+                  variantTypeIds={variantTypeIds()}
+                  onChange={onVariantTypeChange}
+                />
+              </div>
+            </div>
+          </Show>
+          <div class="columns">
+            <div class="column">
+              <VariantFilters
+                filterConfigs={config().variants.filters}
+                filterValues={props.store.getFilterValues()}
+                onFilterChange={onFilterChange}
+                onFilterClear={onFilterClear}
+              />
+            </div>
+          </div>
+        </div>
+        <div class="column">
+          <Show when={records()} fallback={<Loader />}>
+            {(records) => (
+              <VariantResults
+                metadata={props.metadata}
+                fieldConfigs={config().variants.cells}
+                records={records()}
+                sortOptions={config().variants.sorts}
+                recordsPerPage={config().variants.recordsPerPage.map((option) => ({
+                  ...option,
+                  selected: option.number === recordsPerPage(),
+                }))}
+                onPageChange={onPageChange}
+                onRecordsPerPageChange={onRecordsPerPageChange}
+                onRecordsDownload={onRecordsDownload}
+                onSortChange={onSortChange}
+                onSortClear={onSortClear}
+              />
+            )}
+          </Show>
+        </div>
+      </div>
+    </>
+  );
+};