@molgenis/vip-report-template 2.7.3 → 3.0.0-beta

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>
+    </>
+  );
+};

package/src/views/SampleVariants.tsx

@@ -0,0 +1,244 @@
+import { Component, createMemo, createResource, Show } from "solid-js";
+import { useRouteData } from "solid-app-router";
+import { Item, Params, PhenotypicFeature, Sample, SortPath } from "@molgenis/vip-report-api/src/Api";
+import { Loader } from "../components/Loader";
+import { SearchBox } from "../components/SearchBox";
+import { Sort, SortEvent } from "../components/Sort";
+import { Pager } from "../components/record/Pager";
+import { RecordDownload } from "../components/record/RecordDownload";
+import { createQuery, infoSelector, infoSortPath, sampleSelector } from "../utils/query";
+import { VariantsSampleTable } from "../components/VariantsSampleTable";
+import { fetchPedigreeSamples, fetchPhenotypicFeatures, fetchRecords, fetchRecordsMeta } from "../utils/ApiUtils";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Filters } from "../components/filter/Filters";
+import { DIRECTION_ASCENDING, DIRECTION_DESCENDING } from "../utils/sortUtils";
+import { SampleRouteData } from "./data/SampleData";
+import { useStore } from "../store";
+import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
+import { getSampleLabel } from "../utils/sample";
+import { FilterChangeEvent, FilterClearEvent } from "../components/filter/Filter";
+import { arrayEquals } from "../utils/utils";
+
+export const SampleVariantsView: Component = () => {
+  const { sample } = useRouteData<SampleRouteData>();
+
+  const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
+  const [samplePhenotypes] = createResource(sample, fetchPhenotypicFeatures);
+  const [recordsMeta] = createResource(fetchRecordsMeta);
+
+  return (
+    <Show when={sample()} fallback={<Loader />}>
+      <Breadcrumb
+        items={[
+          { href: "/samples", text: "Samples" },
+          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
+          { text: "Variants" },
+        ]}
+      />
+      <Show when={pedigreeSamples() && samplePhenotypes() && recordsMeta()} fallback={<Loader />}>
+        <SampleVariants
+          sample={sample()!}
+          samplePhenotypes={samplePhenotypes()!}
+          pedigreeSamples={pedigreeSamples()!.items}
+          recordsMeta={recordsMeta()!}
+        />
+      </Show>
+    </Show>
+  );
+};
+
+export const SampleVariants: Component<{
+  sample: Item<Sample>;
+  samplePhenotypes: PhenotypicFeature[];
+  pedigreeSamples: Item<Sample>[];
+  recordsMeta: Metadata;
+}> = (props) => {
+  const [state, actions] = useStore();
+
+  // state initialization - start
+  if (state.samples[props.sample.id]?.variants?.page === undefined) {
+    actions.setSampleVariantsPage(props.sample, 0);
+  }
+  if (state.samples[props.sample.id]?.variants?.pageSize === undefined) {
+    actions.setSampleVariantsPageSize(props.sample, 20);
+  }
+
+  if (state.samples[props.sample.id]?.variants?.filterQueries === undefined) {
+    const hpoField = props.recordsMeta.info?.CSQ?.nested?.items?.find((field) => field.id === "HPO");
+    if (hpoField) {
+      actions.setSampleVariantsFilterQuery(props.sample, {
+        selector: infoSelector(hpoField),
+        operator: "any_has_any",
+        args: props.samplePhenotypes.map((phenotype) => phenotype.type.id),
+      });
+    }
+
+    const vimField = props.recordsMeta.format?.VIM;
+    if (vimField) {
+      actions.setSampleVariantsFilterQuery(props.sample, {
+        selector: sampleSelector(props.sample, vimField),
+        operator: "==",
+        args: 1,
+      });
+    }
+    const dpField = props.recordsMeta.format?.DP;
+    if (dpField) {
+      actions.setSampleVariantsFilterQuery(props.sample, {
+        selector: sampleSelector(props.sample, dpField),
+        operator: ">=",
+        args: 20,
+      });
+    }
+  }
+
+  if (state.samples[props.sample.id]?.variants?.sort === undefined) {
+    const capiceScField = props.recordsMeta.info?.CSQ?.nested?.items?.find((field) => field.id === "CAPICE_SC");
+    if (capiceScField) {
+      actions.setSampleVariantsSort(props.sample, {
+        property: infoSortPath(capiceScField),
+        compare: DIRECTION_DESCENDING,
+      });
+    }
+  }
+  // state initialization - end
+
+  const infoFields = createMemo(() => {
+    const csqNestedFields = props.recordsMeta.info.CSQ?.nested?.items;
+    const includedFields = [
+      "Consequence",
+      "SYMBOL",
+      "InheritanceModesGene",
+      "IncompletePenetrance",
+      "HPO",
+      "HGVSc",
+      "HGVSp",
+      "CAPICE_SC",
+      "VIPC",
+      "UMCG_CL",
+      "VKGL_CL",
+      "CLIN_SIG",
+      "gnomAD_AF",
+      "gnomAD_HN",
+      "PUBMED",
+    ];
+    return csqNestedFields
+      ? (includedFields
+          .map((fieldId) => csqNestedFields.find((field) => field.id === fieldId))
+          .filter((field) => field !== undefined) as FieldMetadata[])
+      : [];
+  });
+
+  const formatFields = createMemo(() => {
+    const formatFieldMap = props.recordsMeta.format;
+    const includedFields = ["VIM", "VID", "DP"];
+    return formatFieldMap
+      ? includedFields.map((fieldId) => formatFieldMap[fieldId]).filter((field) => field !== undefined)
+      : [];
+  });
+
+  const page = () => state.samples[props.sample.id]?.variants?.page;
+  const pageSize = () => state.samples[props.sample.id]?.variants?.pageSize;
+  const searchQuery = () => state.samples[props.sample.id]?.variants?.searchQuery;
+  const filterQueries = () => state.samples[props.sample.id]?.variants?.filterQueries;
+  const sort = () => state.samples[props.sample.id]?.variants?.sort;
+
+  const onPageChange = (page: number) => actions.setSampleVariantsPage(props.sample, page);
+  const onSearchChange = (search: string) => actions.setSampleVariantsSearchQuery(props.sample, search);
+  const onFilterChange = (event: FilterChangeEvent) => actions.setSampleVariantsFilterQuery(props.sample, event.query);
+  const onFilterClear = (event: FilterClearEvent) =>
+    actions.clearSampleVariantsFilterQuery(props.sample, event.selector);
+  const onSortChange = (event: SortEvent) => actions.setSampleVariantsSort(props.sample, event.order);
+  const onSortClear = () => actions.setSampleVariantsSort(props.sample, null);
+
+  const params = (): Params => {
+    return {
+      query: createQuery(searchQuery(), filterQueries(), props.recordsMeta) || undefined,
+      sort: sort() || undefined,
+      page: page() || undefined,
+      size: pageSize() || undefined,
+    };
+  };
+
+  const [records] = createResource(params, fetchRecords);
+
+  const sortOptions = () =>
+    infoFields().flatMap((field) => [
+      {
+        order: { field, direction: DIRECTION_ASCENDING },
+        selected:
+          arrayEquals(infoSortPath(field), sort()?.property as SortPath) && sort()?.compare === DIRECTION_ASCENDING
+            ? true
+            : undefined,
+      },
+      {
+        order: { field, direction: DIRECTION_DESCENDING },
+        selected:
+          arrayEquals(infoSortPath(field), sort()?.property as SortPath) && sort()?.compare === DIRECTION_DESCENDING
+            ? true
+            : undefined,
+      },
+    ]);
+
+  return (
+    <div class="columns">
+      <div class="column is-1-fullhd is-2">
+        <SearchBox value={searchQuery()} onInput={onSearchChange} />
+        <Filters
+          fields={infoFields()}
+          samplesFields={[{ sample: props.sample, fields: formatFields() }]}
+          queries={filterQueries()}
+          onChange={onFilterChange}
+          onClear={onFilterClear}
+        />
+      </div>
+      <div class="column">
+        <div class="columns">
+          <div class="column is-offset-1-fullhd is-3-fullhd is-4">
+            {infoFields().length > 0 && <Sort options={sortOptions()} onChange={onSortChange} onClear={onSortClear} />}
+          </div>
+          <div class="column is-4">
+            <Show when={records()} fallback={<Loader />}>
+              {(records) => <Pager page={records.page} onPageChange={onPageChange} />}
+            </Show>
+          </div>
+          <div class="column">
+            <div class="columns">
+              <div class="column is-10">
+                <Show when={records()} fallback={<Loader />}>
+                  {(records) => (
+                    <span class="is-pulled-right" style={{ margin: "auto" }}>
+                      {records.page.totalElements} records
+                    </span>
+                  )}
+                </Show>
+              </div>
+              <div class="column">
+                <div class="is-pulled-right">
+                  <RecordDownload
+                    recordsMetadata={props.recordsMeta}
+                    query={params().query}
+                    samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="columns">
+          <Show when={records()} fallback={<Loader />}>
+            {(records) => (
+              <VariantsSampleTable
+                item={props.sample}
+                pedigreeSamples={props.pedigreeSamples}
+                records={records.items}
+                recordsMetadata={props.recordsMeta}
+                nestedFields={infoFields()}
+              />
+            )}
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+};