@molgenis/vip-report-template 6.2.0 → 7.0.1

package/src/views/VariantConsequence.tsx

@@ -1,81 +1,51 @@
-import { Component, createResource, Show } from "solid-js";
+import { Component, Show } from "solid-js";
 import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
-import { DecisionTree } from "@molgenis/vip-report-api/src/Api";
-import { VariantTable } from "../components/VariantTable";
-import { VariantInfoTable } from "../components/VariantInfoTable";
-import { Breadcrumb } from "../components/Breadcrumb";
-import { getSpecificConsequence } from "../utils/viewUtils";
-import { ConsequenceTable } from "../components/ConsequenceTable";
-import { DecisionTreePath } from "../components/tree/DecisionTreePath";
-import { getDecisionTreePath } from "../utils/decisionTreeUtils";
-import {
-  EMPTY_DECISION_TREE,
-  EMPTY_RECORDS_METADATA,
-  fetchDecisionTree,
-  fetchRecordsMeta,
-  getRecordLabel,
-} from "../utils/ApiUtils";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
-import { getVariant } from "./data/data";
+import { getConfig, getDecisionTree, getMetadata, getRecordById } from "./data/data";
+import { parseId } from "../utils/utils.ts";
+import { VariantConsequenceContainer } from "../components/VariantConsequenceContainer.tsx";
+import { parseVariantType } from "../utils/variantType.ts";
+import { VariantBreadcrumb } from "../components/VariantBreadcrumb.tsx";
 
 export const VariantConsequence: Component<RouteSectionProps> = (props) => {
-  const variant = createAsync(() => getVariant(Number(props.params.variantId)));
-  const consequenceId = () => Number(props.params.consequenceId);
+  const variantType = () => parseVariantType(props.params.variantType);
+  const consequenceId = () => parseId(props.params.consequenceId);
+  const metadata = createAsync(() => getMetadata());
+  const record = createAsync(() => getRecordById(props.params.variantId));
+  const config = createAsync(() => getConfig());
+  const decisionTree = createAsync(() => getDecisionTree());
 
-  const [recordsMetadata] = createResource(fetchRecordsMeta, { initialValue: EMPTY_RECORDS_METADATA });
-  const [decisionTree] = createResource(fetchDecisionTree, { initialValue: EMPTY_DECISION_TREE });
-
-  const csqFields = (): FieldMetadata[] => recordsMetadata().info.CSQ?.nested?.items || [];
-
-  const hasDecisionTreePathMeta = () => csqFields().findIndex((csq) => csq.id === "VIPP") !== -1;
   return (
-    <Show when={variant()} fallback={<Loader />} keyed>
-      {(variant) => (
-        <>
-          <Breadcrumb
-            items={[
-              { href: "/variants", text: "Variants" },
-              { href: `/variants/${variant.id}`, text: getRecordLabel(variant) },
-              { text: `Consequence #${consequenceId()}` },
-            ]}
-          />
-          <div class="columns">
-            <div class="column is-6">
-              <h1 class="title is-5">Consequence</h1>
-              <ConsequenceTable
-                csqMetadata={csqFields()}
-                csqValues={getSpecificConsequence(variant.data.n.CSQ as ValueArray, consequenceId())}
-                record={variant}
-              />
-            </div>
-            {hasDecisionTreePathMeta() && (
-              <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)} keyed>
-                {(decisionTree) => (
-                  <div class="column">
-                    <h1 class="title is-5">Classification tree path</h1>
-                    <DecisionTreePath
-                      decisionTree={decisionTree}
-                      path={getDecisionTreePath(recordsMetadata(), variant, consequenceId())}
-                    />
-                  </div>
-                )}
-              </Show>
-            )}
-          </div>
-          <div class="columns">
-            <div class="column is-6">
-              <h1 class="title is-5">Record</h1>
-              <VariantTable variant={variant.data} />
-            </div>
-            <div class="column">
-              <h1 class="title is-5">Info</h1>
-              <VariantInfoTable infoFields={recordsMetadata().info} record={variant} />
-            </div>
-          </div>
-        </>
-      )}
+    <Show when={record()} fallback={<Loader />}>
+      {(record) => {
+        return (
+          <>
+            <VariantBreadcrumb variantType={variantType()} record={record()} consequenceId={consequenceId()} />
+            <Show when={metadata()} fallback={<Loader />}>
+              {(metadata) => (
+                <Show when={config()} fallback={<Loader />}>
+                  {(config) => (
+                    <Show when={decisionTree()} fallback={<Loader />}>
+                      {(decisionTree) => (
+                        <VariantConsequenceContainer
+                          config={config()}
+                          metadata={metadata()}
+                          variantType={variantType()}
+                          consequenceId={consequenceId()}
+                          record={record()}
+                          sample={null}
+                          decisionTree={decisionTree()}
+                          sampleTree={null}
+                        />
+                      )}
+                    </Show>
+                  )}
+                </Show>
+              )}
+            </Show>
+          </>
+        );
+      }}
     </Show>
   );
 };

package/src/views/Variants.tsx

@@ -1,147 +1,38 @@
-import { Component, createResource, Show } from "solid-js";
-import { VariantsTable } from "../components/VariantsTable";
-import { Pager } from "../components/record/Pager";
-import { SearchBox } from "../components/SearchBox";
-import { InfoFilters } from "../components/filter/InfoFilters";
-import { Sort, SortEvent } from "../components/Sort";
-import { RecordDownload } from "../components/record/RecordDownload";
-import { Breadcrumb } from "../components/Breadcrumb";
-import { fetchHtsFileMetadata, fetchRecords, fetchRecordsMeta } from "../utils/ApiUtils";
-import { flattenFieldMetadata } from "../utils/field";
-import { DIRECTION_ASCENDING, DIRECTION_DESCENDING } from "../utils/sortUtils";
-import { HtsFileMetadata, Params, SortPath } from "@molgenis/vip-report-api/src/Api";
-import { useStore } from "../store";
-import { createQuery, infoSortPath } from "../utils/query";
+import { Component, Show } from "solid-js";
 import { Loader } from "../components/Loader";
-import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
-import { arrayEquals } from "../utils/utils";
-import { FilterChangeEvent, FilterClearEvent } from "../components/filter/Filters";
-import { RecordsPerPage, RecordsPerPageEvent } from "../components/RecordsPerPage";
+import { parseVariantType } from "../utils/variantType.ts";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
+import { VariantsContainer } from "../components/VariantsContainer";
+import { getConfig, getMetadata } from "./data/data";
+import { VariantBreadcrumb } from "../components/VariantBreadcrumb.tsx";
+import { useStore } from "../store";
+import { wrapStore } from "../store/variants.ts";
+
+export const Variants: Component<RouteSectionProps> = (props) => {
+  const store = useStore();
 
-export const VariantsView: Component = () => {
-  const [recordsMeta] = createResource(fetchRecordsMeta);
-  const [htsFileMeta] = createResource(fetchHtsFileMetadata);
+  const variantType = () => parseVariantType(props.params.variantType);
+  const config = createAsync(() => getConfig());
+  const metadata = createAsync(() => getMetadata());
 
   return (
     <>
-      <Breadcrumb items={[{ text: "Variants" }]} />
-      <Show when={recordsMeta() && htsFileMeta} fallback={<Loader />}>
-        <Variants recordsMeta={recordsMeta()!} htsFileMeta={htsFileMeta()!} />
+      <VariantBreadcrumb variantType={variantType()} />
+      <Show when={config()} fallback={<Loader />}>
+        {(config) => (
+          <Show when={metadata()} fallback={<Loader />}>
+            {(metadata) => (
+              <VariantsContainer
+                store={wrapStore(store, null, variantType())}
+                config={config()}
+                metadata={metadata()}
+                variantType={variantType()}
+                sample={null}
+              />
+            )}
+          </Show>
+        )}
       </Show>
     </>
   );
 };
-
-export const Variants: Component<{
-  recordsMeta: Metadata;
-  htsFileMeta: HtsFileMetadata;
-}> = (props) => {
-  const [state, actions] = useStore();
-
-  const page = () => state.variants?.page;
-  const pageSize = () => state.variants?.pageSize;
-  const searchQuery = () => state.variants?.searchQuery;
-  const filterQueries = () => state.variants?.filterQueries;
-  const sort = () => state.variants?.sort;
-
-  const onPageChange = (page: number) => actions.setVariantsPage(page);
-  const onSearchChange = (search: string) => actions.setVariantsSearchQuery(search);
-  const onFilterChange = (event: FilterChangeEvent) => actions.setVariantsFilterQuery(event.query, event.key);
-  const onFilterClear = (event: FilterClearEvent) => actions.clearVariantsFilterQuery(event.key);
-  const onSortChange = (event: SortEvent) => actions.setVariantsSort(event.order);
-  const onSortClear = () => actions.setVariantsSort(null);
-  const onRecordsPerPageChange = (event: RecordsPerPageEvent) => actions.setVariantsPageSize(event.number);
-  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 = () => {
-    return flattenFieldMetadata(props.recordsMeta.info).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 is-variable is-1">
-      <div class="scrolling-div column is-1-fullhd is-2">
-        <SearchBox onInput={onSearchChange} />
-        <InfoFilters
-          fields={flattenFieldMetadata(props.recordsMeta.info)}
-          queries={filterQueries()}
-          onChange={onFilterChange}
-          onClear={onFilterClear}
-        />
-      </div>
-      <div class="scrolling-div column">
-        <div class="columns is-gapless">
-          <div class="column">
-            <p class="title is-3">Reported variants</p>
-            <p class="subtitle is-5">Includes all reported variants without genotypes</p>
-          </div>
-        </div>
-        <div class="columns is-gapless">
-          <div class="column is-offset-1-fullhd is-3-fullhd is-4">
-            <Show when={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={records()} fallback={<Loader />} keyed>
-              {(records) => <Pager page={records.page} onPageChange={onPageChange} />}
-            </Show>
-          </div>
-          <div class="column">
-            <div class="field is-grouped is-grouped-right">
-              <Sort options={sortOptions()} onChange={onSortChange} onClear={onSortClear} />
-              <RecordDownload recordsMetadata={props.recordsMeta} query={params().query} />
-            </div>
-          </div>
-        </div>
-        <div class="columns is-gapless">
-          <div class="column is-full">
-            <Show when={records()} fallback={<Loader />} keyed>
-              {(records) => (
-                <>
-                  <VariantsTable
-                    records={records.items}
-                    recordsMetadata={props.recordsMeta}
-                    htsFileMeta={props.htsFileMeta}
-                  />
-                  <div class="columns is-gapless">
-                    <div class="column">
-                      <div class="field is-grouped is-grouped-right">
-                        <RecordsPerPage initialValue={pageSize() || 20} onChange={onRecordsPerPageChange} />
-                      </div>
-                    </div>
-                  </div>
-                </>
-              )}
-            </Show>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/views/VariantsRedirect.tsx

@@ -0,0 +1,25 @@
+import { Component, Show } from "solid-js";
+import { createAsync, Navigate, RouteSectionProps } from "@solidjs/router";
+import { Loader } from "../components/Loader";
+import { getMetadata } from "./data/data.tsx";
+import { MetadataContainer } from "../utils/api.ts";
+import { href } from "../utils/utils.ts";
+
+/**
+ * View that redirects to the variant type specific view based on the available variant types
+ */
+export const VariantsRedirect: Component<RouteSectionProps> = () => {
+  const metadata = createAsync(() => getMetadata());
+
+  function getHref(metadata: MetadataContainer) {
+    const variantTypeIds = metadata.variantTypeIds;
+    const variantType = variantTypeIds.size === 1 ? variantTypeIds.values().next().value! : "all";
+    return href(["variants", variantType]);
+  }
+
+  return (
+    <Show when={metadata()} fallback={<Loader />}>
+      {(metadata) => <Navigate href={getHref(metadata())} />}
+    </Show>
+  );
+};

package/src/views/data/data.tsx

@@ -1,7 +1,33 @@
-import { cache } from "@solidjs/router";
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
-import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
-import api from "../../Api";
+import { query } from "@solidjs/router";
+import { DecisionTree, Item } from "@molgenis/vip-report-api";
+import { VcfRecord } from "@molgenis/vip-report-vcf";
+import {
+  fetchConfig,
+  fetchDecisionTree,
+  fetchMetadata,
+  fetchRecordById,
+  fetchSampleById,
+  fetchSampleTree,
+  MetadataContainer,
+  SampleContainer,
+} from "../../utils/api.ts";
+import { parseId } from "../../utils/utils.ts";
+import { ConfigJson } from "../../types/config";
 
-export const getSample = cache(async (id: number): Promise<Item<Sample>> => api.getSampleById(id), "sample");
-export const getVariant = cache(async (id: number): Promise<Item<Record>> => api.getRecordById(id), "variant");
+export const getConfig = query((): Promise<ConfigJson> => fetchConfig(), "config");
+
+export const getMetadata = query((): Promise<MetadataContainer> => fetchMetadata(), "metadata");
+
+export const getSampleById = query(
+  (id: string | undefined): Promise<SampleContainer> => fetchSampleById(parseId(id)),
+  "sample",
+);
+
+export const getRecordById = query(
+  (id: string | undefined): Promise<Item<VcfRecord>> => fetchRecordById(parseId(id)),
+  "variant",
+);
+
+export const getDecisionTree = query((): Promise<DecisionTree | null> => fetchDecisionTree(), "decisionTree");
+
+export const getSampleTree = query((): Promise<DecisionTree | null> => fetchSampleTree(), "sampleTree");

package/tests/store/variants.test.ts

@@ -0,0 +1,122 @@
+import { afterAll, beforeAll, describe, expect, test } from "vitest";
+import { wrapStore } from "../../src/store/variants.ts";
+import { createAppStore } from "../../src/store/app.ts";
+import { SampleContainer } from "../../src/utils/api.ts";
+import { VariantType } from "../../src/utils/variantType.ts";
+
+describe("variants", () => {
+  const consoleLog = console.log;
+
+  beforeAll(() => {
+    console.log = () => {};
+  });
+
+  afterAll(() => {
+    console.log = consoleLog;
+  });
+
+  describe("wrapStore", () => {
+    const sample = { item: { id: 2 } } as SampleContainer;
+    const variantType = { id: "all" } as VariantType;
+
+    describe("setFilterValue", () => {
+      test("set new value", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.setFilterValue("f", ["val"]);
+        expect(store.getFilterValues()).toStrictEqual({ f: ["val"] });
+        expect(store.getPageNumber()).toStrictEqual(0);
+      });
+
+      test("update value", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.setFilterValue("f", ["val"]);
+        store.setFilterValue("f", ["val_new"]);
+        expect(store.getFilterValues()).toStrictEqual({ f: ["val_new"] });
+        expect(store.getPageNumber()).toStrictEqual(0);
+      });
+
+      test("set value resets page number", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.setPageNumber(2);
+        store.setFilterValue("f", ["val"]);
+        expect(store.getFilterValues()).toStrictEqual({ f: ["val"] });
+        expect(store.getPageNumber()).toStrictEqual(0);
+      });
+
+      test("do not mix sample state", () => {
+        const appStore = createAppStore();
+        const sample0 = { item: { id: 0 } } as SampleContainer;
+        const sample1 = { item: { id: 1 } } as SampleContainer;
+        const sample0Store = wrapStore(appStore, sample0, variantType);
+        const sample1Store = wrapStore(appStore, sample1, variantType);
+
+        sample0Store.setFilterValue("f", ["val0"]);
+        sample1Store.setFilterValue("f", ["val1"]);
+        expect(sample0Store.getFilterValues()).toStrictEqual({ f: ["val0"] });
+        expect(sample1Store.getFilterValues()).toStrictEqual({ f: ["val1"] });
+      });
+
+      test("no sample", () => {
+        const store = wrapStore(createAppStore(), null, variantType);
+        store.setFilterValue("f", ["val"]);
+        expect(store.getFilterValues()).toStrictEqual({ f: ["val"] });
+        expect(store.getPageNumber()).toStrictEqual(0);
+      });
+    });
+
+    describe("clearFilter", () => {
+      test("clear", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.setFilterValue("f", ["val"]);
+        store.clearFilter("f");
+        expect(store.getFilterValues()).toStrictEqual({});
+      });
+
+      test("clear resets page number", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.setFilterValue("f", ["val"]);
+        store.setPageNumber(2);
+        store.clearFilter("f");
+        expect(store.getFilterValues()).toStrictEqual({});
+        expect(store.getPageNumber()).toStrictEqual(0);
+      });
+    });
+
+    describe("setPageNumber", () => {
+      test("set value", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.setPageNumber(0);
+        expect(store.getPageNumber()).toStrictEqual(0);
+      });
+    });
+
+    describe("setPageSize", () => {
+      test("set size resets page number", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.setPageNumber(2);
+        store.setPageSize(10);
+        expect(store.getPageSize()).toStrictEqual(10);
+        expect(store.getPageNumber()).toStrictEqual(0);
+      });
+    });
+
+    describe("setSort", () => {
+      test("initial sort is undefined", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        expect(store.getSort()).toStrictEqual(undefined); // must not be null
+      });
+
+      test("clear sort", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.clearSort();
+        expect(store.getSort()).toStrictEqual(null); // must not be undefined
+      });
+
+      test("clear sort", () => {
+        const store = wrapStore(createAppStore(), sample, variantType);
+        store.setSort({ property: "f" });
+        expect(store.getSort()).toStrictEqual({ property: "f" });
+      });
+    });
+  });
+});

package/tests/utils/config/config.test.ts

@@ -0,0 +1,167 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { initConfig } from "../../../src/utils/config/config.ts";
+import {
+  ConfigJson,
+  ConfigJsonVariant,
+  ConfigJsonVariantConsequence,
+  ConfigJsonVariants,
+  ConfigJsonVip,
+  ConfigRecordsPerPage,
+  ConfigVip,
+} from "../../../src/types/config";
+import { MetadataContainer, SampleContainer } from "../../../src/utils/api.ts";
+import { VariantType } from "../../../src/utils/variantType.ts";
+import { initConfigCells } from "../../../src/utils/config/configCells.ts";
+import { initConfigFilters } from "../../../src/utils/config/configFilters.ts";
+import { initConfigSorts } from "../../../src/utils/config/configSorts.ts";
+import { ConfigCell } from "../../../src/types/configCells";
+import { ConfigFilter } from "../../../src/types/configFilter";
+import { ConfigSort } from "../../../src/types/configSort";
+import { initConfigVip } from "../../../src/utils/config/configVip.ts";
+
+describe("config", () => {
+  vi.mock(import("../../../src/utils/config/configCells.ts"));
+  vi.mock(import("../../../src/utils/config/configFilters.ts"));
+  vi.mock(import("../../../src/utils/config/configSorts.ts"));
+  vi.mock(import("../../../src/utils/config/configVip.ts"));
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  const configVariantsMinimal: ConfigJsonVariants = {
+    cells: {
+      all: [
+        {
+          type: "fixed",
+          name: "chrom",
+        },
+      ],
+    },
+  };
+  const metadata: Partial<MetadataContainer> = {};
+  const sample: Partial<SampleContainer> | null = null;
+
+  describe("initConfig", () => {
+    const recordsPerPageBase = [
+      {
+        number: 10,
+        selected: true,
+      },
+      { number: 20 },
+      { number: 50 },
+      { number: 100 },
+    ];
+
+    test("regular config", () => {
+      vi.mocked(initConfigVip).mockReturnValue(0 as unknown as ConfigVip);
+      vi.mocked(initConfigCells)
+        .mockReturnValueOnce([4 as unknown as ConfigCell])
+        .mockReturnValueOnce([5 as unknown as ConfigCell])
+        .mockReturnValue([-1 as unknown as ConfigCell]);
+      vi.mocked(initConfigFilters).mockReturnValue([2 as unknown as ConfigFilter]);
+      vi.mocked(initConfigSorts).mockReturnValue([3 as unknown as ConfigSort]);
+
+      const recordsPerPage: ConfigRecordsPerPage = [{ number: 1 }, { number: 2, selected: true }, { number: 3 }];
+
+      const config: ConfigJson = {
+        vip: { params: {} } as ConfigJsonVip,
+        sample_variants: {} as ConfigJsonVariants,
+        variants: {
+          ...configVariantsMinimal,
+          filters: { all: [] },
+          sorts: { all: [] },
+          recordsPerPage: { all: recordsPerPage },
+        },
+        sample_variant: { cells: { all: [{}] } } as ConfigJsonVariant,
+        variant: { cells: { all: [{}] } } as ConfigJsonVariant,
+        sample_variant_consequence: { samples_cells: { all: [{}] } } as ConfigJsonVariantConsequence,
+        variant_consequence: { sample_cells: { all: [{}] } } as ConfigJsonVariantConsequence,
+      };
+      const variantType: Partial<VariantType> = { id: "snv" };
+
+      expect(
+        initConfig(config, variantType as VariantType, metadata as MetadataContainer, sample as SampleContainer | null),
+      ).toStrictEqual({
+        vip: 0,
+        variants: { cells: [4], filters: [2], sorts: [3], recordsPerPage },
+        variant: {
+          cells: [5],
+          samplesCells: undefined,
+        },
+        variantConsequence: {
+          samplesCells: undefined,
+        },
+      });
+    });
+
+    test("minimal config", () => {
+      vi.mocked(initConfigVip).mockReturnValue(0 as unknown as ConfigVip);
+      vi.mocked(initConfigCells)
+        .mockReturnValueOnce([1 as unknown as ConfigCell])
+        .mockReturnValueOnce([2 as unknown as ConfigCell]);
+
+      const config: ConfigJson = {
+        vip: { params: {} } as ConfigJsonVip,
+        sample_variants: {} as ConfigJsonVariants,
+        variants: configVariantsMinimal,
+        sample_variant: {} as ConfigJsonVariant,
+        variant: configVariantsMinimal,
+        sample_variant_consequence: {} as ConfigJsonVariantConsequence,
+        variant_consequence: {} as ConfigJsonVariantConsequence,
+      };
+
+      const variantType: Partial<VariantType> = { id: "snv" };
+
+      expect(
+        initConfig(config, variantType as VariantType, metadata as MetadataContainer, sample as SampleContainer | null),
+      ).toStrictEqual({
+        vip: 0,
+        variants: { cells: [1], filters: [], sorts: [], recordsPerPage: recordsPerPageBase },
+        variant: {
+          cells: [2],
+          samplesCells: undefined,
+        },
+        variantConsequence: {
+          samplesCells: undefined,
+        },
+      });
+      expect(initConfigFilters).toBeCalledTimes(0);
+      expect(initConfigSorts).toBeCalledTimes(0);
+    });
+
+    test("throws error on empty config property 'cells.all'", () => {
+      const config: ConfigJson = {
+        vip: { params: {} } as ConfigJsonVip,
+        sample_variants: { cells: { all: [] } },
+        variants: { cells: { all: [] } },
+        sample_variant: {} as ConfigJsonVariant,
+        variant: {} as ConfigJsonVariant,
+        sample_variant_consequence: {} as ConfigJsonVariantConsequence,
+        variant_consequence: {} as ConfigJsonVariantConsequence,
+      };
+      const variantType: Partial<VariantType> = { id: "all" };
+
+      expect(() =>
+        initConfig(config, variantType as VariantType, metadata as MetadataContainer, sample as SampleContainer | null),
+      ).toThrow(/^config invalid: property 'cells.all' requires at least one value$/);
+    });
+
+    test("throws error on missing config property 'cells.all'", () => {
+      const config: ConfigJson = {
+        vip: { params: {} } as ConfigJsonVip,
+        sample_variants: { cells: { all: [] } },
+        variants: { cells: {} },
+        sample_variant: {} as ConfigJsonVariant,
+        variant: {} as ConfigJsonVariant,
+        sample_variant_consequence: {} as ConfigJsonVariantConsequence,
+        variant_consequence: {} as ConfigJsonVariantConsequence,
+      };
+      const variantType: Partial<VariantType> = { id: "all" };
+
+      expect(() =>
+        initConfig(config, variantType as VariantType, metadata as MetadataContainer, sample as SampleContainer | null),
+      ).toThrow(/^config invalid: missing required property 'cells.all'$/);
+    });
+  });
+});