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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "3.0.0-beta",
+  "version": "3.0.0-beta2",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",

package/src/__tests__/query.test.ts

@@ -2,28 +2,54 @@ import { describe, expect, test } from "vitest";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
 import { FilterQueries } from "../store";
-import { createQuery } from "../utils/query";
-import { QueryClause } from "@molgenis/vip-report-api/src/Api";
+import {
+  createQuery,
+  infoFieldKey,
+  infoSelector,
+  infoSortPath,
+  sampleFieldKey,
+  sampleSelector,
+  selectorKey,
+} from "../utils/query";
+import { Person, QueryClause } from "@molgenis/vip-report-api/src/Api";
 
 describe("query utilities", () => {
+  let fieldMetaCsq: FieldMetadata = {
+    id: "CSQ",
+    number: { type: "NUMBER" },
+    type: "STRING",
+  };
+
   const fieldMeta1: FieldMetadata = {
     id: "field1",
     number: { type: "NUMBER" },
     type: "CATEGORICAL",
+    parent: fieldMetaCsq,
   };
+
   const fieldMeta2: FieldMetadata = {
     id: "field2",
     number: { type: "NUMBER" },
     type: "CATEGORICAL",
+    parent: fieldMetaCsq,
   };
 
-  const fieldMetaCsq: FieldMetadata = {
+  fieldMetaCsq = {
     id: "CSQ",
     number: { type: "NUMBER" },
     type: "STRING",
     nested: { items: [fieldMeta1, fieldMeta2], separator: "|" },
   };
 
+  const person: Person = {
+    familyId: "FAM001",
+    individualId: "Patient",
+    sex: "FEMALE",
+    affectedStatus: "AFFECTED",
+    maternalId: "Mother",
+    paternalId: "Father",
+  };
+
   const meta: Metadata = { info: { CSQ: fieldMetaCsq } } as unknown as Metadata;
 
   test("create query", () => {
@@ -96,4 +122,35 @@ describe("query utilities", () => {
     };
     expect(createQuery(undefined, filterQueries, meta)).toBe(queryClause);
   });
+
+  test("infoSelector", () => {
+    expect(infoSelector(fieldMeta1)).toStrictEqual(["n", "CSQ", "field1"]);
+  });
+
+  test("sampleSelector", () => {
+    expect(sampleSelector({ id: 1, data: { person: person, index: 0, proband: false } }, fieldMeta1)).toStrictEqual([
+      "s",
+      0,
+      "CSQ",
+      "field1",
+    ]);
+  });
+
+  test("selectorKey", () => {
+    expect(selectorKey([1, "test", 2, "3"])).toStrictEqual("1/test/2/3");
+  });
+
+  test("infoFieldKey", () => {
+    expect(infoFieldKey(fieldMeta1)).toStrictEqual("n/CSQ/field1");
+  });
+
+  test("sampleFieldKey", () => {
+    expect(sampleFieldKey({ id: 1, data: { person: person, index: 0, proband: false } }, fieldMeta1)).toStrictEqual(
+      "s/0/CSQ/field1"
+    );
+  });
+
+  test("infoSortPath", () => {
+    expect(infoSortPath(fieldMetaCsq)).toStrictEqual(["n", "CSQ"]);
+  });
 });

package/src/components/DatasetDropdown.tsx

@@ -1,14 +1,18 @@
 import { Component, createSignal, For } from "solid-js";
 import api from "../Api";
 import { useNavigate } from "solid-app-router";
+import { useStore } from "../store";
 
 export const DatasetDropdown: Component = () => {
+  const [, actions] = useStore();
+
   const navigate = useNavigate();
   const [selectedDataset, setSelectedDataset] = createSignal("GRCh37 Family");
 
   function switchIt(datasetName: string) {
     setSelectedDataset(datasetName);
     api.selectDataset(datasetName);
+    actions.reset();
     (async () => {
       navigate(`/`);
       const samples = await api.getSamples({ query: { selector: ["proband"], operator: "==", args: true } });

package/src/components/filter/Filter.tsx

@@ -15,19 +15,22 @@ export const Filter: Component<{
   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={props.onChange} onClear={props.onClear} query={props.query} />
+        <FilterIntegerDp field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
       </Match>
       <Match when={props.field.id === "VID"}>
-        <FilterIntegerVid field={props.field} onChange={props.onChange} onClear={props.onClear} query={props.query} />
+        <FilterIntegerVid field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
       </Match>
       <Match when={props.field.id === "VIM"}>
-        <FilterIntegerVim field={props.field} onChange={props.onChange} onClear={props.onClear} query={props.query} />
+        <FilterIntegerVim field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
       </Match>
       <Match when={props.field.type === "CATEGORICAL"}>
-        <FilterCategorical field={props.field} onChange={props.onChange} onClear={props.onClear} query={props.query} />
+        <FilterCategorical field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
       </Match>
     </Switch>
   );

package/src/components/filter/Filters.tsx

@@ -13,14 +13,17 @@ export const Filters: Component<{
   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={props.onChange} onClear={props.onClear} />
+      <InfoFilters fields={props.fields} queries={props.queries} onChange={onChange} onClear={onClear} />
       <SamplesFilters
         samplesFields={props.samplesFields}
         queries={props.queries}
-        onChange={props.onChange}
-        onClear={props.onClear}
+        onChange={onChange}
+        onClear={onClear}
       />
     </>
   );

package/src/store/index.tsx

@@ -14,15 +14,15 @@ type AppStateVariants = {
   sort?: SortOrder | null; // null: do not sort. undefined: sort undefined
 };
 
-// TODO clear store on dataset change
 export type AppState = {
-  variants: AppStateVariants;
-  samples: {
-    [key: string]: { variants: AppStateVariants };
+  variants?: AppStateVariants;
+  samples?: {
+    [key: number]: { variants: AppStateVariants };
   };
 };
 
 export type AppActions = {
+  reset(): void;
   setVariantsPage(page: number): void;
   setVariantsPageSize(pageSize: number): void;
   setVariantsSearchQuery(searchQuery: string): void;
@@ -49,58 +49,64 @@ export const Provider: ParentComponent = (props) => {
   const [state, setState] = createStore(defaultState);
 
   function getVariants(sample: Item<Sample>) {
-    return state.samples[sample.id]?.variants || {};
+    return state.samples ? state.samples[sample.id]?.variants || {} : {};
   }
 
   const actions: AppActions = {
+    reset() {
+      setState({ variants: undefined, samples: undefined });
+    },
     setVariantsPage(page: number) {
-      setState({ variants: { ...state.variants, page } });
+      setState({ variants: { ...(state.variants || {}), page } });
     },
     setVariantsPageSize(pageSize: number) {
-      setState({ variants: { ...state.variants, pageSize } });
+      setState({ variants: { ...(state.variants || {}), pageSize } });
     },
     setVariantsSearchQuery(searchQuery: string) {
-      setState({ variants: { ...state.variants, searchQuery } });
+      setState({ variants: { ...(state.variants || {}), searchQuery } });
     },
     clearVariantsSearchQuery() {
-      setState({ variants: { ...state.variants, searchQuery: undefined } });
+      setState({ variants: { ...(state.variants || {}), searchQuery: undefined } });
     },
     setVariantsFilterQuery(query: QueryClause) {
       setState({
         variants: {
-          ...state.variants,
-          filterQueries: { ...(state.variants.filterQueries || {}), [selectorKey(query.selector)]: query },
+          ...(state.variants || {}),
+          filterQueries: { ...(state.variants?.filterQueries || {}), [selectorKey(query.selector)]: query },
         },
       });
     },
     clearVariantsFilterQuery(selector: Selector) {
       setState({
         variants: {
-          ...state.variants,
-          filterQueries: { ...(state.variants.filterQueries || {}), [selectorKey(selector)]: undefined },
+          ...(state.variants || {}),
+          filterQueries: { ...(state.variants?.filterQueries || {}), [selectorKey(selector)]: undefined },
         },
       });
     },
     setVariantsSort(sort: SortOrder | null) {
       setState({
         variants: {
-          ...state.variants,
+          ...(state.variants || {}),
           sort,
         },
       });
     },
     setSampleVariantsPage(sample: Item<Sample>, page: number) {
-      setState({ samples: { ...state.samples, [sample.id]: { variants: { ...getVariants(sample), page } } } });
+      setState({ samples: { ...(state.samples || {}), [sample.id]: { variants: { ...getVariants(sample), page } } } });
     },
     setSampleVariantsPageSize(sample: Item<Sample>, pageSize: number) {
       setState({
-        samples: { ...state.samples, [sample.id]: { variants: { ...getVariants(sample), pageSize, page: undefined } } },
+        samples: {
+          ...(state.samples || {}),
+          [sample.id]: { variants: { ...getVariants(sample), pageSize, page: undefined } },
+        },
       });
     },
     setSampleVariantsSearchQuery(sample: Item<Sample>, searchQuery: string) {
       setState({
         samples: {
-          ...state.samples,
+          ...(state.samples || {}),
           [sample.id]: { variants: { ...getVariants(sample), searchQuery, page: undefined } },
         },
       });
@@ -108,7 +114,7 @@ export const Provider: ParentComponent = (props) => {
     clearSampleVariantsSearchQuery(sample: Item<Sample>) {
       setState({
         samples: {
-          ...state.samples,
+          ...(state.samples || {}),
           [sample.id]: { variants: { ...getVariants(sample), searchQuery: undefined, page: undefined } },
         },
       });
@@ -117,7 +123,7 @@ export const Provider: ParentComponent = (props) => {
       const variants = getVariants(sample);
       setState({
         samples: {
-          ...state.samples,
+          ...(state.samples || {}),
           [sample.id]: {
             variants: {
               ...variants,
@@ -132,7 +138,7 @@ export const Provider: ParentComponent = (props) => {
       const variants = getVariants(sample);
       setState({
         samples: {
-          ...state.samples,
+          ...(state.samples || {}),
           [sample.id]: {
             variants: {
               ...getVariants(sample),
@@ -145,7 +151,7 @@ export const Provider: ParentComponent = (props) => {
     },
     setSampleVariantsSort(sample: Item<Sample>, sort: SortOrder | null) {
       setState({
-        samples: { ...state.samples, [sample.id]: { variants: { ...getVariants(sample), sort } } },
+        samples: { ...(state.samples || {}), [sample.id]: { variants: { ...getVariants(sample), sort } } },
       });
     },
   };

package/src/views/SampleVariants.tsx

@@ -56,15 +56,19 @@ export const SampleVariants: Component<{
 }> = (props) => {
   const [state, actions] = useStore();
 
+  function getStateVariants() {
+    return state.samples ? state.samples[props.sample.id]?.variants : undefined;
+  }
+
   // state initialization - start
-  if (state.samples[props.sample.id]?.variants?.page === undefined) {
+  if (getStateVariants()?.page === undefined) {
     actions.setSampleVariantsPage(props.sample, 0);
   }
-  if (state.samples[props.sample.id]?.variants?.pageSize === undefined) {
+  if (getStateVariants()?.pageSize === undefined) {
     actions.setSampleVariantsPageSize(props.sample, 20);
   }
 
-  if (state.samples[props.sample.id]?.variants?.filterQueries === undefined) {
+  if (getStateVariants()?.filterQueries === undefined) {
     const hpoField = props.recordsMeta.info?.CSQ?.nested?.items?.find((field) => field.id === "HPO");
     if (hpoField) {
       actions.setSampleVariantsFilterQuery(props.sample, {
@@ -92,7 +96,7 @@ export const SampleVariants: Component<{
     }
   }
 
-  if (state.samples[props.sample.id]?.variants?.sort === undefined) {
+  if (getStateVariants()?.sort === undefined) {
     const capiceScField = props.recordsMeta.info?.CSQ?.nested?.items?.find((field) => field.id === "CAPICE_SC");
     if (capiceScField) {
       actions.setSampleVariantsSort(props.sample, {
@@ -137,11 +141,11 @@ export const SampleVariants: Component<{
       : [];
   });
 
-  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 page = () => getStateVariants()?.page;
+  const pageSize = () => getStateVariants()?.pageSize;
+  const searchQuery = () => getStateVariants()?.searchQuery;
+  const filterQueries = () => getStateVariants()?.filterQueries;
+  const sort = () => getStateVariants()?.sort;
 
   const onPageChange = (page: number) => actions.setSampleVariantsPage(props.sample, page);
   const onSearchChange = (search: string) => actions.setSampleVariantsSearchQuery(props.sample, search);

package/src/views/Variants.tsx

@@ -35,11 +35,11 @@ export const Variants: Component<{
 }> = (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 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);