@molgenis/vip-report-template 8.0.3 → 8.1.0

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "8.0.3",
+  "version": "8.1.0",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "license": "LGPL-3.0",
   "devDependencies": {
-    "@molgenis/vite-plugin-inline": "^1.0.30",
+    "@molgenis/vite-plugin-inline": "^2.0.0",
     "@types/async-lock": "^1.4.2",
-    "@types/node": "^22.19.1",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@types/node": "^22.19.3",
+    "@vitest/coverage-v8": "^4.0.15",
     "async-lock": "^1.4.1",
     "bulma": "^1.0.4",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-solid": "^0.14.4",
+    "eslint-plugin-solid": "^0.14.5",
     "husky": "^9.1.7",
-    "jsdom": "^26.1.0",
-    "prettier": "^3.6.2",
-    "sass": "^1.94.2",
-    "typescript": "^5.8.0",
-    "typescript-eslint": "^8.48.0",
+    "jsdom": "^27.3.0",
+    "prettier": "^3.7.4",
+    "sass": "^1.97.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.49.0",
     "vite": "^6.4.1",
-    "vite-plugin-solid": "^2.11.09",
-    "vitest": "^3.2.4"
+    "vite-plugin-solid": "^2.11.10",
+    "vitest": "^4.0.15"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@molgenis/vip-report-api": "7.0.4",
-    "@molgenis/vip-report-vcf": "^4.0.4",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@molgenis/vip-report-api": "7.0.5",
+    "@molgenis/vip-report-vcf": "^4.0.5",
     "@solidjs/router": "^0.15.4",
     "ajv": "^8.17.1",
     "base64-js": "^1.5.1",

package/src/components/VariantFilters.tsx

@@ -1,7 +1,7 @@
 import { Component, For } from "solid-js";
 import { FilterValueField } from "../types/configFilter";
 import { ConfigFilters } from "../types/config";
-import { FilterChangeCallback, FilterClearCallback, FilterValueMap } from "../types/filter";
+import { FilterChangeCallback, FilterClearCallback, FilterInitedList, FilterValueMap } from "../types/filter";
 import { Filter } from "./filter/Filter";
 
 export const VariantFilters: Component<{
@@ -9,19 +9,19 @@ export const VariantFilters: Component<{
   filterValues: FilterValueMap;
   onFilterChange: FilterChangeCallback;
   onFilterClear: FilterClearCallback;
+  filtersInited: FilterInitedList;
 }> = (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>
-    </>
+    <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 })}
+          isInited={props.filtersInited.includes(filter.id)}
+        />
+      )}
+    </For>
   );
 };

package/src/components/VariantsContainer.tsx

@@ -157,6 +157,7 @@ export const VariantsContainer: Component<{
                 filterValues={props.store.getFilterValues()}
                 onFilterChange={onFilterChange}
                 onFilterClear={onFilterClear}
+                filtersInited={props.store.getFiltersInited()}
               />
             </div>
           </div>

package/src/components/filter/Filter.tsx

@@ -27,6 +27,7 @@ export interface FilterProps<C extends ConfigFilterBase, FilterValueType> {
   defaultValue?: string;
   onValueChange: FilterValueChangeCallback<FilterValueType>;
   onValueClear: FilterValueClearCallback;
+  isInited: boolean;
 }
 
 export const Filter: Component<FilterProps<ConfigFilter, FilterValue>> = (props) => {
@@ -40,6 +41,7 @@ export const Filter: Component<FilterProps<ConfigFilter, FilterValue>> = (props)
           value={props.value as FilterValueFixed}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={type() === "info" || type() === "genotype"}>
@@ -48,6 +50,7 @@ export const Filter: Component<FilterProps<ConfigFilter, FilterValue>> = (props)
           value={props.value as FilterValueField}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={type() === "composed"}>
@@ -56,6 +59,7 @@ export const Filter: Component<FilterProps<ConfigFilter, FilterValue>> = (props)
           value={props.value as FilterValueComposed}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
     </Switch>

package/src/components/filter/composed/FilterAllelicImbalance.tsx

@@ -22,6 +22,7 @@ export const FilterAllelicImbalance: Component<
       defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
+      isInited={props.isInited}
     />
   );
 };

package/src/components/filter/composed/FilterComposed.tsx

@@ -38,6 +38,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "composed/locus"}>
@@ -47,6 +48,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "composed/allelicImbalance"}>
@@ -56,6 +58,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "composed/inheritanceMatch"}>
@@ -65,6 +68,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "composed/deNovo"}>
@@ -74,6 +78,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "composed/vipC"}>
@@ -83,6 +88,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "composed/vipCS"}>
@@ -92,6 +98,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
     </Switch>

package/src/components/filter/composed/FilterDeNovo.tsx

@@ -31,6 +31,7 @@ export const FilterDeNovo: Component<FilterProps<ConfigFilterDeNovo, FilterValue
       defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
+      isInited={props.isInited}
     />
   );
 };

package/src/components/filter/composed/FilterHpo.tsx

@@ -12,6 +12,7 @@ export const FilterHpo: Component<FilterProps<ConfigFilterHpo, FilterValueHpo>>
       defaultValue={props.defaultValue}
       onValueChange={props.onValueChange as FilterValueChangeCallback<FilterValueField>}
       onValueClear={props.onValueClear}
+      isInited={props.isInited}
     />
   );
 };

package/src/components/filter/composed/FilterInheritance.tsx

@@ -38,6 +38,7 @@ export const FilterInheritance: Component<FilterProps<ConfigFilterInheritanceMat
       defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
+      isInited={props.isInited}
     />
   );
 };

package/src/components/filter/composed/FilterPick.tsx

@@ -25,6 +25,7 @@ export const FilterPick: Component<FilterProps<ConfigFilterPick, FilterValuePick
       defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
+      isInited={props.isInited}
     />
   );
 };

package/src/components/filter/composed/FilterVipC.tsx

@@ -12,6 +12,7 @@ export const FilterVipC: Component<FilterProps<ConfigFilterVipC, FilterValueVipC
       defaultValue={props.defaultValue}
       onValueChange={props.onValueChange as FilterValueChangeCallback<FilterValueField>}
       onValueClear={props.onValueClear}
+      isInited={props.isInited}
     />
   );
 };

package/src/components/filter/composed/FilterVipCS.tsx

@@ -12,6 +12,7 @@ export const FilterVipCS: Component<FilterProps<ConfigFilterVipCS, FilterValueVi
       defaultValue={props.defaultValue}
       onValueChange={props.onValueChange as FilterValueChangeCallback<FilterValueField>}
       onValueClear={props.onValueClear}
+      isInited={props.isInited}
     />
   );
 };

package/src/components/filter/fixed/FilterFixed.tsx

@@ -42,6 +42,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "fixed/pos"}>
@@ -51,6 +52,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "fixed/id"}>
@@ -60,6 +62,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "fixed/ref"}>
@@ -69,6 +72,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "fixed/alt"}>
@@ -78,6 +82,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "fixed/qual"}>
@@ -87,6 +92,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={id() === "fixed/filter"}>
@@ -96,6 +102,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
     </Switch>

package/src/components/filter/typed/FilterCategorical.tsx

@@ -98,7 +98,7 @@ export const FilterCategorical: Component<FilterProps<ConfigFilterField, FilterV
   }
 
   onMount(() => {
-    if (props.config.defaultValue !== undefined) {
+    if (props.config.defaultValue !== undefined && !props.isInited) {
       const values = props.config.defaultValue.split(",");
       validateValues(values, categories());
       props.onValueChange({ value: values as FilterValueCategorical });

package/src/components/filter/typed/FilterFlag.tsx

@@ -20,6 +20,7 @@ export const FilterFlag: Component<FilterProps<ConfigFilterField, FilterValueFla
       defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
+      isInited={props.isInited}
     />
   );
 };

package/src/components/filter/typed/FilterInterval.tsx

@@ -25,7 +25,7 @@ export const FilterInterval: Component<FilterProps<ConfigFilterField, FilterValu
   });
 
   onMount(() => {
-    if (props.config.defaultValue !== undefined) {
+    if (props.config.defaultValue !== undefined && !props.isInited) {
       const split = props.config.defaultValue.split(",");
       if (split.length >= 1) {
         if (split[0] !== undefined && split[0] !== "") {

package/src/components/filter/typed/FilterString.tsx

@@ -24,7 +24,7 @@ export const FilterString: Component<FilterProps<ConfigFilterField, FilterValueS
   };
 
   onMount(() => {
-    if (props.config.defaultValue !== undefined) {
+    if (props.config.defaultValue !== undefined && !props.isInited) {
       setInputValue(props.config.defaultValue);
       onApply();
     }

package/src/components/filter/typed/FilterTyped.tsx

@@ -25,6 +25,7 @@ export const FilterTyped: Component<FilterProps<ConfigFilterField, FilterValueFi
           value={props.value as FilterValueCategorical}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={type() === "CHARACTER" || type() === "STRING"}>
@@ -34,6 +35,7 @@ export const FilterTyped: Component<FilterProps<ConfigFilterField, FilterValueFi
           defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={type() === "INTEGER" || type() === "FLOAT"}>
@@ -42,6 +44,7 @@ export const FilterTyped: Component<FilterProps<ConfigFilterField, FilterValueFi
           value={props.value as FilterValueInterval}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
       <Match when={type() === "FLAG"}>
@@ -50,6 +53,7 @@ export const FilterTyped: Component<FilterProps<ConfigFilterField, FilterValueFi
           value={props.value as FilterValueFlag}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
+          isInited={props.isInited}
         />
       </Match>
     </Switch>

package/src/store/variants.ts

@@ -1,6 +1,6 @@
 import { VariantType } from "../utils/variantType.ts";
 import { SampleContainer } from "../utils/api.ts";
-import { FilterValueMap } from "../types/filter";
+import { FilterInitedList, FilterValueMap } from "../types/filter";
 import { FilterId, FilterValue } from "../types/configFilter";
 import { produce } from "solid-js/store";
 import { AppState, AppStateVariantType, AppStateVariantTypes, AppStore, Page, Sort } from "../types/store";
@@ -20,6 +20,7 @@ export type VariantStore = {
   getSort(): Sort | null | undefined;
   setSort(sort: Sort): void;
   clearSort(): void;
+  getFiltersInited(): FilterInitedList;
 };
 
 export function wrapStore(store: AppStore, sample: SampleContainer | null, variantType: VariantType) {
@@ -48,7 +49,7 @@ export function wrapStore(store: AppStore, sample: SampleContainer | null, varia
     if (variantTypeKey in stateVariantTypes) {
       stateVariantType = stateVariantTypes[variantTypeKey]!;
     } else {
-      stateVariantType = {};
+      stateVariantType = { initedFilters: [] };
     }
 
     return stateVariantType;
@@ -78,7 +79,7 @@ export function wrapStore(store: AppStore, sample: SampleContainer | null, varia
     if (variantTypeKey in stateVariantTypes) {
       stateVariantType = stateVariantTypes[variantTypeKey]!;
     } else {
-      stateVariantType = {};
+      stateVariantType = { initedFilters: [] };
       stateVariantTypes[variantTypeKey] = stateVariantType;
     }
 
@@ -95,6 +96,18 @@ export function wrapStore(store: AppStore, sample: SampleContainer | null, varia
     return page;
   }
 
+  function setVariantsStateFiltersInited(state: AppState, filterId: string): void {
+    const stateVariantType: AppStateVariantType = getCreateVariantsState(state);
+    if (!stateVariantType.initedFilters.includes(filterId)) {
+      stateVariantType.initedFilters.push(filterId);
+    }
+  }
+
+  function getVariantsStateFiltersInited(state: AppState): FilterInitedList {
+    const stateVariantType: AppStateVariantType = getCreateVariantsState(state);
+    return stateVariantType.initedFilters;
+  }
+
   function getCreateVariantsStateFilterValues(state: AppState): FilterValueMap {
     const stateVariantType: AppStateVariantType = getCreateVariantsState(state);
     let filterValues = stateVariantType.filterValues;
@@ -112,6 +125,7 @@ export function wrapStore(store: AppStore, sample: SampleContainer | null, varia
     setFilterValue(id: FilterId, value: FilterValue) {
       setState(
         produce((state) => {
+          setVariantsStateFiltersInited(state, id);
           const filterValueMap = getCreateVariantsStateFilterValues(state);
           filterValueMap[id] = value;
 
@@ -124,9 +138,9 @@ export function wrapStore(store: AppStore, sample: SampleContainer | null, varia
     clearFilter(id: FilterId) {
       setState(
         produce((state) => {
+          setVariantsStateFiltersInited(state, id);
           const filterValueMap = getCreateVariantsStateFilterValues(state);
           delete filterValueMap[id];
-
           const page = getCreateVariantsStatePage(state);
           page.number = 0;
         }),
@@ -178,5 +192,8 @@ export function wrapStore(store: AppStore, sample: SampleContainer | null, varia
         }),
       );
     },
+    getFiltersInited(): FilterInitedList {
+      return getVariantsStateFiltersInited(state);
+    },
   };
 }

package/src/types/configFilter.d.ts

@@ -37,7 +37,7 @@ export type FilterValueFixed =
 export type FilterValueField = FilterValueCategorical | FilterValueString | FilterValueInterval;
 
 export type FilterValue = FilterValueFixed | FilterValueField | FilterValueComposed;
-export type FilterValueMap = { [key: FilterId]: FilterValue };
+export type FilterValueMap = { [key: FilterId]: FilterValue | undefined };
 
 export type ConfigFilterFixed =
   | ConfigFilterChrom

package/src/types/filter.d.ts

@@ -2,6 +2,8 @@ import { FilterId, FilterValue } from "./configFilter";
 
 export type FilterValueMap = { [key: FilterId]: FilterValue };
 
+export type FilterInitedList = string[];
+
 export interface FilterValueChangeEvent<FilterValueType> {
   value: FilterValueType;
 }

package/src/types/store.d.ts

@@ -1,7 +1,7 @@
 import { SetStoreFunction } from "solid-js/store";
 import { VariantTypeId } from "../utils/variantType.ts";
 import { SortOrder } from "@molgenis/vip-report-api";
-import { FilterValueMap } from "./filter";
+import { FilterInitedList, FilterValueMap } from "./filter";
 
 export type Page = { number: number; size?: number };
 export type Sort = SortOrder | SortOrder[];
@@ -13,6 +13,7 @@ export type AppStateVariantType = {
    * undefined: sort behavior is undefined, the caller of this function could fall back to a default sort
    */
   sort?: Sort | null;
+  initedFilters: FilterInitedList;
 };
 export type AppStateVariantTypes = Partial<Record<VariantTypeId, AppStateVariantType>>;
 type AppStateSamples = {

package/src/utils/config/config.ts

@@ -166,7 +166,7 @@ function initConfigVariantsRecordsPerPage(
   variantType: VariantType,
 ): ConfigRecordsPerPage {
   const configValue = config && (config[variantType.id] || config["all"]);
-  return configValue || [{ number: 10, selected: true }, { number: 20 }, { number: 50 }, { number: 100 }];
+  return configValue || [{ number: 10 }, { number: 20, selected: true }, { number: 50 }, { number: 100 }];
 }
 
 export function getLabel(config: Describable, defaultLabel: string): string {

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

@@ -44,11 +44,10 @@ describe("config", () => {
 
   describe("initConfig", () => {
     const recordsPerPageBase = [
-      {
-        number: 10,
+      { number: 10 },
+      { number: 20,
         selected: true,
       },
-      { number: 20 },
       { number: 50 },
       { number: 100 },
     ];

package/vite.config.mts

@@ -10,12 +10,12 @@ export default defineConfig(({ command }) => ({
     pure: command === "build" ? ["console.log"] : [],
   },
   build: {
-    target: 'es2022',
+    target: "es2022",
     modulePreload: false,
     reportCompressedSize: false,
     // inline plugin build options
     rollupOptions: {
-      input: ["./index.html", "./node_modules/@molgenis/vite-plugin-inline/dist/loader.mjs"],
+      input: ["./index.html", "./node_modules/@molgenis/vite-plugin-inline/dist/loader/loader.js"],
       output: {
         manualChunks: undefined,
       },
@@ -24,12 +24,11 @@ export default defineConfig(({ command }) => ({
   assetsInclude: "**/*.blob",
   test: {
     coverage: {
-      include: ["src/**"],
+      // TODO remove /*.ts postfix once component tests are added
+      include: ["src/**/*.ts"],
       exclude: [...coverageConfigDefaults.exclude, "src/mocks/**", "**/*.precompiled.ts"],
-      // TODO add .tsx once component tests are added
-      extension: [".ts"],
       thresholds: {
-        branches: 80,
+        branches: 70,
         lines: 80,
         functions: 80,
         statements: 80,