@molgenis/vip-report-template 7.1.3 → 8.0.0

package/src/components/VariantsContainer.tsx

@@ -1,13 +1,13 @@
 import { VariantFilters } from "./VariantFilters";
-import { Params } from "@molgenis/vip-report-api";
+import { HtsFileMetadata, RecordParams } 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 { InfoOrder, VariantRecords, writeVcf } from "@molgenis/vip-report-vcf";
+import { fetchInfoOrder, fetchRecords, MetadataContainer, SampleContainer } from "../utils/api.ts";
 import { createVcfDownloadFilename } from "../utils/download.ts";
 import { RecordsPerPageChangeEvent } from "./RecordsPerPage";
 import { SortChangeEvent } from "./Sort";
@@ -33,7 +33,8 @@ export const VariantsContainer: Component<{
 
   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 query = () =>
+    createQuery(config(), props.metadata, props.variantType, props.sample, props.store.getFilterValues());
 
   const defaultSort = () => config().variants.sorts.find((configSort) => configSort.selected);
   const sort = () => createSort(props.store.getSort(), defaultSort()) || undefined;
@@ -41,12 +42,31 @@ export const VariantsContainer: Component<{
   const recordsPerPage = () =>
     props.store.getPageSize() !== null ? props.store.getPageSize()! : defaultRecordsPerPage();
 
+  const sampleIds = () => {
+    let sampleIds: number[] | undefined;
+    if (props.sample !== null) {
+      sampleIds = [props.sample.item.id];
+      if (props.sample.maternalSample !== null && props.sample.maternalSample !== undefined) {
+        sampleIds.push(props.sample.maternalSample.id);
+      }
+      if (props.sample.paternalSample !== null && props.sample.paternalSample !== undefined) {
+        sampleIds.push(props.sample.paternalSample.id);
+      }
+    }
+    return sampleIds;
+  };
+
+  const hasSvTypeField = () => {
+    return Object.hasOwn(props.metadata.records.info, "SVTYPE");
+  };
+
   const [records] = createResource(
-    (): Params => ({
+    (): RecordParams => ({
       query: query() || undefined,
       page: props.store.getPageNumber() || 0,
       size: recordsPerPage(),
       sort: sort(),
+      sampleIds: sampleIds(),
     }),
     fetchRecords,
   );
@@ -64,15 +84,33 @@ export const VariantsContainer: Component<{
   const onRecordsDownload = async () => {
     const samples = props.sample ? getPedigreeSamples(props.sample) : [];
     const filter = samples ? { samples: samples.map((sample) => sample.data.person.individualId) } : undefined;
+    const sampleIds = samples ? samples.map((sample) => sample.id) : ([] as number[]);
 
     // 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 records = await fetchRecords({
+      query: query() || undefined,
+      page: 0,
+      size: Number.MAX_SAFE_INTEGER,
+      sampleIds: sampleIds,
+    });
+
+    const infoOrder: InfoOrder = await fetchInfoOrder();
+    const vcf = writeVcf(
+      {
+        metadata: props.metadata.records,
+        data: records.items.reduce((acc, item) => {
+          acc[item.id] = item.data;
+          return acc;
+        }, {} as VariantRecords),
+        infoOrder: infoOrder,
+      },
+      filter,
+    );
 
     const url = window.URL.createObjectURL(new Blob([vcf]));
     const link = document.createElement("a");
     link.href = url;
-    link.setAttribute("download", createVcfDownloadFilename(props.metadata.htsFile));
+    link.setAttribute("download", createVcfDownloadFilename(props.metadata.app.htsFile as HtsFileMetadata));
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
@@ -101,7 +139,7 @@ export const VariantsContainer: Component<{
       </div>
       <div class="columns is-1">
         <div class="column is-2-fullhd is-3">
-          <Show when={variantTypeIds().size > 1}>
+          <Show when={variantTypeIds().size > 1 && hasSvTypeField()}>
             <div class="columns">
               <div class="column">
                 <VariantTypeSelect

package/src/components/VariantsContainerHeader.tsx

@@ -32,9 +32,8 @@ export const VariantsContainerHeader: Component<{
     if (props.sample) {
       const sampleFather = props.sample.paternalSample;
       const sampleMother = props.sample.maternalSample;
-      const sampleOtherFamilyMembers = props.sample.otherPedigreeSamples;
 
-      if (!(sampleFather === null && sampleMother === null && sampleOtherFamilyMembers.length === 0)) {
+      if (sampleFather !== null || sampleMother !== null) {
         const tokens: string[] = [];
         if (sampleMother !== null) {
           tokens.push(`mother (${getTitleAffectedStatusLabel(sampleMother)})`);
@@ -43,12 +42,6 @@ export const VariantsContainerHeader: Component<{
           tokens.push(`father (${getTitleAffectedStatusLabel(sampleFather)})`);
         }
 
-        for (const familyMember of sampleOtherFamilyMembers) {
-          tokens.push(
-            `${getSampleLabel(familyMember)} (${getTitleSampleSexLabel(familyMember)} ${getTitleAffectedStatusLabel(familyMember)})`,
-          );
-        }
-
         let str = tokens.pop() as string;
         if (tokens.length > 0) str = `${tokens.join(", ")} and ${str}`;
         subtitle = `Includes genotypes for ${str}`;

package/src/components/field/composed/FieldGenotype.tsx

@@ -12,7 +12,7 @@ export const FieldGenotype: Component<{
     const value = props.value.svType;
 
     let variantType: VariantTypeId;
-    if (value === null) {
+    if (value === null || value === undefined) {
       variantType = "snv";
     } else if (value === "STR") {
       variantType = "str";

package/src/components/field/composed/FieldGenotypeStr.tsx

@@ -6,20 +6,17 @@ import { FieldGenotypeSnvSv } from "./FieldGenotypeSnvSv.tsx";
 export const FieldGenotypeStr: Component<{
   value: CellValueGenotype;
 }> = (props) => {
-  const showGenotype = () =>
-    props.value.displayRepeatUnit !== undefined &&
-    props.value.repeatUnitValue !== undefined &&
-    props.value.repeatCount !== undefined &&
-    props.value.repeatUnitMatch !== undefined;
+  const showGenotype = () => props.value.repeatUnitValue != null && props.value.repeatCount != null;
 
   return (
     <Show when={showGenotype()} fallback={<FieldGenotypeSnvSv value={props.value} />}>
-      <abbr title={`display repeat unit familiar to clinician: ${props.value.displayRepeatUnit!}`}>
-        <Allele value={props.value.repeatUnitValue!} isAbbreviate={false} />
-        <sub>n</sub>
-      </abbr>
+      <Show when={props.value.displayRepeatUnit != null} fallback={<AlleleStr value={props.value.repeatUnitValue!} />}>
+        <abbr title={`display repeat unit familiar to clinician: ${props.value.displayRepeatUnit!}`}>
+          <AlleleStr value={props.value.repeatUnitValue!} />
+        </abbr>
+      </Show>
       <span class="ml-1">{`(n=${props.value.repeatCount!})`}</span>
-      <Show when={!props.value.repeatUnitMatch!}>
+      <Show when={props.value.repeatUnitMatch === false}>
         <abbr
           title={"the called repeat unit does not match the repeat unit in the loci bed file"}
           class="ml-1 is-clickable"
@@ -30,3 +27,14 @@ export const FieldGenotypeStr: Component<{
     </Show>
   );
 };
+
+const AlleleStr: Component<{
+  value: string;
+}> = (props) => {
+  return (
+    <>
+      <Allele value={props.value} isAbbreviate={false} />
+      <sub>n</sub>
+    </>
+  );
+};

package/src/components/field/composed/FieldGnomAd.tsx

@@ -26,7 +26,7 @@ export const FieldGnomAd: Component<{
 
   const lowCoverage = () => {
     const cov = gnomAdCov();
-    return cov !== undefined && cov !== null && cov < 0.5;
+    return cov != null && cov < 0.5;
   };
 
   return (

package/src/components/field/composed/FieldInheritanceModes.tsx

@@ -11,10 +11,7 @@ export const FieldInheritanceModes: Component<{ value: CellValueInheritanceModes
       (inheritanceModesGene() !== undefined && inheritanceModesGene().length === 0) ||
       inheritanceModesGene().findIndex((category) => category?.value === "AR") !== -1
     ) {
-      isArInheritance =
-        props.value.isPossibleCompound !== undefined &&
-        props.value.isPossibleCompound !== null &&
-        props.value.isPossibleCompound;
+      isArInheritance = props.value.isPossibleCompound != null && props.value.isPossibleCompound;
     }
     return isArInheritance;
   };

package/src/components/field/composed/FieldVkgl.tsx

@@ -20,7 +20,7 @@ export const FieldVkgl: Component<{ value: CellValueVkgl }> = (props) => {
     };
 
     const descriptions = Object.entries(labValues)
-      .filter(([, value]) => value !== null && value !== undefined)
+      .filter(([, value]) => value != null)
       .map(([key, value]) => `${key}:${value?.label}`);
 
     return descriptions.length > 0 ? descriptions.join(", ") : null;

package/src/components/field/typed/FieldCategorical.tsx

@@ -8,7 +8,7 @@ export const FieldCategorical: Component<{
   metadata: FieldMetadata;
 }> = (props) => {
   return (
-    <Show when={props.value !== null && props.value !== undefined}>
+    <Show when={props.value != null}>
       <Show when={props.value!.description} fallback={<span>{props.value!.label}</span>}>
         {(description) => <Abbr title={description()} value={props.value!.label} />}
       </Show>

package/src/components/field/typed/FieldCharacter.tsx

@@ -5,7 +5,7 @@ export const FieldCharacter: Component<{
   value: ValueString | undefined;
 }> = (props) => {
   return (
-    <Show when={props.value !== null && props.value !== undefined}>
+    <Show when={props.value != null}>
       <span>{props.value as string}</span>
     </Show>
   );

package/src/components/field/typed/FieldFlag.tsx

@@ -5,7 +5,7 @@ export const FieldFlag: Component<{
   value: ValueFlag | undefined;
 }> = (props) => {
   return (
-    <Show when={props.value !== null && props.value !== undefined}>
+    <Show when={props.value != null}>
       <span>{(props.value as boolean).toString()}</span>
     </Show>
   );

package/src/components/field/typed/FieldFloat.tsx

@@ -6,7 +6,7 @@ export const FieldFloat: Component<{
   value: ValueFloat | undefined;
 }> = (props) => {
   return (
-    <Show when={props.value !== null && props.value !== undefined}>
+    <Show when={props.value != null}>
       <Show
         when={(props.value as number).toString().length > 6}
         fallback={<span>{(props.value as number).toString()}</span>}

package/src/components/field/typed/FieldInteger.tsx

@@ -5,7 +5,7 @@ export const FieldInteger: Component<{
   value: ValueInteger | undefined;
 }> = (props) => {
   return (
-    <Show when={props.value !== null && props.value !== undefined}>
+    <Show when={props.value != null}>
       <span>{props.value as number}</span>
     </Show>
   );

package/src/components/field/typed/FieldString.tsx

@@ -6,7 +6,7 @@ export const FieldString: Component<{
   value: ValueString | undefined;
 }> = (props) => {
   return (
-    <Show when={props.value !== null && props.value !== undefined}>
+    <Show when={props.value != null}>
       <Show when={(props.value as string).length > 20} fallback={<span>{props.value as string}</span>}>
         <Abbr title={props.value as string} value={(props.value as string).substring(0, 20)} />
       </Show>

package/src/components/filter/Filter.tsx

@@ -24,6 +24,7 @@ export type FilterValueClearCallback = () => void;
 export interface FilterProps<C extends ConfigFilterBase, FilterValueType> {
   config: C;
   value?: FilterValueType;
+  defaultValue?: string;
   onValueChange: FilterValueChangeCallback<FilterValueType>;
   onValueClear: FilterValueClearCallback;
 }

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

@@ -19,6 +19,7 @@ export const FilterAllelicImbalance: Component<
     <FilterCategorical
       config={config()}
       value={props.value as FilterValueCategorical}
+      defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
     />

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

@@ -35,6 +35,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
         <FilterHpo
           config={props.config as ConfigFilterHpo}
           value={props.value as FilterValueHpo | undefined}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -43,6 +44,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
         <FilterLocus
           config={props.config as ConfigFilterLocus}
           value={props.value as FilterValueLocus | undefined}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -51,6 +53,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
         <FilterAllelicImbalance
           config={props.config as ConfigFilterAllelicImbalance}
           value={props.value as FilterValueAllelicImbalance | undefined}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -59,6 +62,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
         <FilterInheritance
           config={props.config as ConfigFilterInheritanceMatch}
           value={props.value as FilterValueInheritanceMatch | undefined}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -67,6 +71,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
         <FilterDeNovo
           config={props.config as ConfigFilterDeNovo}
           value={props.value as FilterValueDeNovo | undefined}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -75,6 +80,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
         <FilterVipC
           config={props.config as ConfigFilterVipC}
           value={props.value as FilterValueVipC | undefined}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -83,6 +89,7 @@ export const FilterComposed: Component<FilterProps<ConfigFilterComposed, FilterV
         <FilterVipCS
           config={props.config as ConfigFilterVipCS}
           value={props.value as FilterValueVipCS | undefined}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />

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

@@ -28,6 +28,7 @@ export const FilterDeNovo: Component<FilterProps<ConfigFilterDeNovo, FilterValue
     <FilterCategorical
       config={config()}
       value={props.value as FilterValueCategorical}
+      defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
     />

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

@@ -9,6 +9,7 @@ export const FilterHpo: Component<FilterProps<ConfigFilterHpo, FilterValueHpo>>
     <FilterTyped
       config={props.config as ConfigFilterField}
       value={props.value as FilterValueCategorical}
+      defaultValue={props.defaultValue}
       onValueChange={props.onValueChange as FilterValueChangeCallback<FilterValueField>}
       onValueClear={props.onValueClear}
     />

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

@@ -35,6 +35,7 @@ export const FilterInheritance: Component<FilterProps<ConfigFilterInheritanceMat
     <FilterCategorical
       config={config()}
       value={props.value as FilterValueCategorical}
+      defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
     />

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

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal } from "solid-js";
+import { Component, createEffect, createSignal, onMount } from "solid-js";
 import { FilterWrapper } from "../FilterWrapper";
 import { ButtonApply } from "../../form/ButtonApply";
 import { ButtonReset } from "../../form/ButtonReset";
@@ -23,6 +23,21 @@ export const FilterLocus: Component<FilterProps<ConfigFilterLocus, FilterValueLo
     }
   });
 
+  onMount(() => {
+    const pattern = /^(\w+):(\w+)-(\w+)$/;
+    if (props.config.defaultValue !== undefined) {
+      const match = (props.config.defaultValue as string).match(pattern);
+      if (!match) {
+        throw new Error(`Invalid region format: ${props.config.defaultValue}`);
+      }
+      const [, chrom, start, end] = match;
+      setChromosome(chrom);
+      setStartPosition(start);
+      setEndPosition(end);
+      onApply();
+    }
+  });
+
   const onApply = () => {
     const chr = chromosome();
     if (chr === undefined) return;
@@ -47,7 +62,6 @@ export const FilterLocus: Component<FilterProps<ConfigFilterLocus, FilterValueLo
 
     props.onValueClear();
   };
-
   return (
     <FilterWrapper config={props.config} error={error()}>
       <div class="field is-grouped">
@@ -66,7 +80,7 @@ export const FilterLocus: Component<FilterProps<ConfigFilterLocus, FilterValueLo
           <Input placeholder="End" value={endPosition()} onValueChange={(e) => setEndPosition(e.value)} />
         </div>
         <div class="control">
-          <ButtonApply onClick={onApply} />
+          <ButtonApply onClick={onApply} isEnabled={() => chromosome() !== undefined && chromosome() !== ""} />
         </div>
       </div>
       <ButtonReset onClick={() => onReset()} />

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

@@ -0,0 +1,30 @@
+import { Component } from "solid-js";
+import { ConfigFilterPick, FilterValuePick } from "../../../types/configFilterComposed";
+import { FilterProps } from "../Filter.tsx";
+import { ConfigFilterField, FilterValueCategorical } from "../../../types/configFilter";
+import { FilterCategorical } from "../typed/FilterCategorical";
+
+export const FilterPick: Component<FilterProps<ConfigFilterPick, FilterValuePick>> = (props) => {
+  const config = (): ConfigFilterField => ({
+    ...props.config,
+    field: {
+      ...props.config.field,
+      categories: {
+        true: {
+          label: "True",
+          description: "VEP Picked transcript.",
+        },
+      },
+    },
+  });
+
+  return (
+    <FilterCategorical
+      config={config()}
+      value={props.value as FilterValueCategorical}
+      defaultValue={props.defaultValue}
+      onValueChange={props.onValueChange}
+      onValueClear={props.onValueClear}
+    />
+  );
+};

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

@@ -9,6 +9,7 @@ export const FilterVipC: Component<FilterProps<ConfigFilterVipC, FilterValueVipC
     <FilterTyped
       config={props.config as ConfigFilterField}
       value={props.value as FilterValueCategorical}
+      defaultValue={props.defaultValue}
       onValueChange={props.onValueChange as FilterValueChangeCallback<FilterValueField>}
       onValueClear={props.onValueClear}
     />

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

@@ -9,6 +9,7 @@ export const FilterVipCS: Component<FilterProps<ConfigFilterVipCS, FilterValueVi
     <FilterTyped
       config={props.config as ConfigFilterField}
       value={props.value as FilterValueCategorical}
+      defaultValue={props.defaultValue}
       onValueChange={props.onValueChange as FilterValueChangeCallback<FilterValueField>}
       onValueClear={props.onValueClear}
     />

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

@@ -39,6 +39,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
         <FilterChrom
           config={props.config as ConfigFilterChrom}
           value={props.value as FilterValueChrom}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -47,6 +48,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
         <FilterPos
           config={props.config as ConfigFilterPos}
           value={props.value as FilterValuePos}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -55,6 +57,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
         <FilterId
           config={props.config as ConfigFilterId}
           value={props.value as FilterValueId}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -63,6 +66,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
         <FilterRef
           config={props.config as ConfigFilterRef}
           value={props.value as FilterValueRef}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -71,6 +75,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
         <FilterAlt
           config={props.config as ConfigFilterAlt}
           value={props.value as FilterValueAlt}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -79,6 +84,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
         <FilterQual
           config={props.config as ConfigFilterQual}
           value={props.value as FilterValueQual}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />
@@ -87,6 +93,7 @@ export const FilterFixed: Component<FilterProps<ConfigFilterFixed, FilterValue>>
         <FilterFilter
           config={props.config as ConfigFilterFilter}
           value={props.value as FilterValueFilter}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />

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

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal, For, JSX, Show } from "solid-js";
+import { Component, createEffect, createSignal, For, JSX, onMount, Show } from "solid-js";
 import { FilterWrapper } from "../FilterWrapper";
 import {
   ConfigFilterField,
@@ -88,6 +88,23 @@ export const FilterCategorical: Component<FilterProps<ConfigFilterField, FilterV
     }
   };
 
+  function validateValues(values: string[], filterCategories: FilterCategory[]) {
+    const invalidValues = values.filter((v) => !filterCategories.map((fc) => fc.id).includes(v));
+    if (invalidValues.length > 0) {
+      throw new Error(
+        `Invalid default values ('${invalidValues.join(", ")}') found for filter '${props.config.field.id}'.`,
+      );
+    }
+  }
+
+  onMount(() => {
+    if (props.config.defaultValue !== undefined) {
+      const values = props.config.defaultValue.split(",");
+      validateValues(values, categories());
+      props.onValueChange({ value: values as FilterValueCategorical });
+    }
+  });
+
   return (
     <FilterWrapper config={props.config} tooltipContentElement={tooltipContentElement()}>
       <div class="field">

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

@@ -9,6 +9,7 @@ export const FilterFlag: Component<FilterProps<ConfigFilterField, FilterValueFla
     field: {
       ...props.config.field,
       categories: { true: { label: "True" }, false: { label: "False" } },
+      required: true, //Missing == false for flags
     },
   });
 
@@ -16,6 +17,7 @@ export const FilterFlag: Component<FilterProps<ConfigFilterField, FilterValueFla
     <FilterCategorical
       config={config()}
       value={props.value as FilterValueCategorical}
+      defaultValue={props.defaultValue}
       onValueChange={props.onValueChange}
       onValueClear={props.onValueClear}
     />

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

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal } from "solid-js";
+import { Component, createEffect, createSignal, onMount } from "solid-js";
 import { FilterWrapper } from "../FilterWrapper";
 import { ConfigFilterField, FilterValueInterval } from "../../../types/configFilter";
 import { Input } from "../../form/Input";
@@ -24,6 +24,34 @@ export const FilterInterval: Component<FilterProps<ConfigFilterField, FilterValu
     }
   });
 
+  onMount(() => {
+    if (props.config.defaultValue !== undefined) {
+      const split = props.config.defaultValue.split(",");
+      if (split.length >= 1) {
+        if (split[0] !== undefined && split[0] !== "") {
+          if (Number.isNaN(Number(split[0]))) {
+            throw new TypeError(
+              `'${props.config.defaultValue}' is not a valid default value for field '${props.config.field.id}'.`,
+            );
+          }
+          setLeftInputValue(split[0]);
+        }
+      }
+      if (split.length === 2) {
+        if (split[1] !== undefined && split[1] !== "") {
+          if (Number.isNaN(Number(split[1]))) {
+            throw new TypeError(
+              `'${props.config.defaultValue}' is not a valid default value for field '${props.config.field.id}'.`,
+            );
+          }
+          console.log("7");
+          setRightInputValue(split[1]);
+        }
+        onApply();
+      }
+    }
+  });
+
   const onApply = () => {
     const validationResult = validateIntervalInput(props.config.id, leftInputValue(), rightInputValue());
     if (validationResult !== undefined) {

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

@@ -1,4 +1,4 @@
-import { Component, createEffect, createSignal } from "solid-js";
+import { Component, createEffect, createSignal, onMount } from "solid-js";
 import { FilterWrapper } from "../FilterWrapper";
 import { ConfigFilterField, FilterValueString } from "../../../types/configFilter";
 import { Input } from "../../form/Input";
@@ -23,6 +23,13 @@ export const FilterString: Component<FilterProps<ConfigFilterField, FilterValueS
     }
   };
 
+  onMount(() => {
+    if (props.config.defaultValue !== undefined) {
+      setInputValue(props.config.defaultValue);
+      onApply();
+    }
+  });
+
   return (
     <FilterWrapper config={props.config}>
       <div class="field is-grouped">

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

@@ -31,6 +31,7 @@ export const FilterTyped: Component<FilterProps<ConfigFilterField, FilterValueFi
         <FilterString
           config={props.config}
           value={props.value as FilterValueString}
+          defaultValue={props.defaultValue}
           onValueChange={props.onValueChange}
           onValueClear={props.onValueClear}
         />