@molgenis/vip-report-template 6.1.1 → 7.0.0

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

@@ -0,0 +1,32 @@
+import { Component, Show } from "solid-js";
+import { FieldTypedMultiple } from "../typed/FieldTypedMultiple";
+import { CellValueInheritanceModes } from "../../../types/configCellComposed";
+import { ValueCategorical } from "../../../utils/vcf.ts";
+
+export const FieldInheritanceModes: Component<{ value: CellValueInheritanceModes }> = (props) => {
+  const inheritanceModesGene = (): ValueCategorical[] => props.value.inheritanceModesGene;
+  const isArInheritance = () => {
+    let isArInheritance = false;
+    if (
+      (inheritanceModesGene() !== undefined && inheritanceModesGene().length === 0) ||
+      inheritanceModesGene().findIndex((category) => category?.value === "AR") !== -1
+    ) {
+      isArInheritance =
+        props.value.isPossibleCompound !== undefined &&
+        props.value.isPossibleCompound !== null &&
+        props.value.isPossibleCompound;
+    }
+    return isArInheritance;
+  };
+
+  return (
+    <>
+      <FieldTypedMultiple info={inheritanceModesGene()} infoMetadata={props.value.fieldInheritanceModesGene} />
+      <Show when={isArInheritance()} keyed>
+        <abbr title="Variant is possibly part of a compound." class="ml-1 is-clickable">
+          <i class="fas fa-circle-exclamation has-text-info" />
+        </abbr>
+      </Show>
+    </>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { Component } from "solid-js";
+import { useNavigate } from "@solidjs/router";
+import { FieldChrom } from "../FieldChrom";
+import { FieldPos } from "../FieldPos";
+import { CellValueLocus } from "../../../types/configCellComposed";
+
+export const FieldLocus: Component<{ value: CellValueLocus }> = (props) => {
+  // use 'navigate' instead of '<A href=' such that cache is used
+  const navigate = useNavigate();
+
+  return (
+    <a onClick={() => navigate(props.value.href)}>
+      <FieldChrom value={props.value.c} />
+      <span>:</span>
+      <FieldPos value={props.value.p} />
+    </a>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { Component, Show } from "solid-js";
+import { CellValueVipC } from "../../../types/configCellComposed";
+import { Abbr } from "../../Abbr";
+import { useNavigate } from "@solidjs/router";
+
+export const FieldVipC: Component<{
+  value: CellValueVipC;
+}> = (props) => {
+  const navigate = useNavigate();
+
+  const onClick = () => {
+    if (props.value.href) {
+      // use 'navigate' instead of '<A href=' such that cache is used
+      navigate(props.value.href);
+    }
+  };
+
+  return (
+    <a onClick={onClick}>
+      <Show when={props.value.vipP} fallback={<span>{props.value.vipC!.value}</span>} keyed>
+        {(vipPItem) => <Abbr title={vipPItem.join(", ")} value={props.value.vipC!.value!} />}
+      </Show>
+    </a>
+  );
+};

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

@@ -0,0 +1,15 @@
+import { Component, Show } from "solid-js";
+import { CellValueVipCS } from "../../../types/configCellComposed";
+import { Abbr } from "../../Abbr";
+
+export const FieldVipCS: Component<{
+  value: CellValueVipCS;
+}> = (props) => {
+  return (
+    <Show when={props.value.vipCS !== null}>
+      <Show when={props.value.vipPS} fallback={<span>{props.value.vipCS!.value}</span>} keyed>
+        {(vipPSItem) => <Abbr title={vipPSItem.join(", ")} value={props.value.vipCS!.value!} />}
+      </Show>
+    </Show>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { Component, Show } from "solid-js";
+import { Abbr } from "../../Abbr";
+import { CellValueVkgl } from "../../../types/configCellComposed";
+import { ValueCategorical } from "../../../utils/vcf.ts";
+
+export const FieldVkgl: Component<{ value: CellValueVkgl }> = (props) => {
+  const label = (): string | null => props.value.vkglCl?.label || null;
+  const title = () => {
+    if (label() === null) return undefined;
+
+    const labValues: Record<string, ValueCategorical | undefined> = {
+      AMC: props.value.vkglAmc,
+      Erasmus: props.value.vkglErasmus,
+      LUMC: props.value.vkglLumc,
+      NKI: props.value.vkglNki,
+      "Radboud/MUMC": props.value.vkglRadboudMumc,
+      UMCG: props.value.vkglUmcg,
+      UMCU: props.value.vkglUmcu,
+      VUMC: props.value.vkglVumc,
+    };
+
+    const descriptions = Object.entries(labValues)
+      .filter(([, value]) => value !== null && value !== undefined)
+      .map(([key, value]) => `${key}:${value?.label}`);
+
+    return descriptions.length > 0 ? descriptions.join(", ") : null;
+  };
+  return (
+    <Show when={label()} keyed>
+      {(value) => (
+        <Show when={title()} fallback={<span>{value}</span>} keyed>
+          {(title) => <Abbr title={title} value={value} />}
+        </Show>
+      )}
+    </Show>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { Component, Match, Switch } from "solid-js";
+import { FieldTyped } from "../typed/FieldTyped";
+import { FieldGenotypeType } from "./FieldGenotypeType";
+import { FieldMetadata, Genotype, Value } from "@molgenis/vip-report-vcf";
+import { CellValueGenotype } from "../../../types/configCells";
+
+export const FieldGenotype: Component<{
+  metadata: FieldMetadata;
+  value: CellValueGenotype;
+}> = (props) => {
+  // add genotype fields with composed rendering here
+  return (
+    <Switch fallback={<FieldTyped metadata={props.metadata} value={props.value as Value} />}>
+      <Match when={props.metadata.id === "GT"}>
+        <FieldGenotypeType value={props.value as Genotype} />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/field/genotype/FieldGenotypeType.tsx

@@ -0,0 +1,9 @@
+import { Component } from "solid-js";
+import { Genotype } from "@molgenis/vip-report-vcf";
+
+export const FieldGenotypeType: Component<{
+  value: Genotype;
+}> = (props) => {
+  const displayValue = () => props.value.a.join(props.value.p ? "|" : "/");
+  return <span>{displayValue()}</span>;
+};

package/src/components/field/info/FieldConsequence.tsx

@@ -0,0 +1,15 @@
+import { Component } from "solid-js";
+import { Abbr } from "../../Abbr";
+
+export const FieldConsequence: Component<{ value: string[] }> = (props) => {
+  return (
+    <>
+      <span>{props.value[0]}</span>
+      {props.value.length > 1 && (
+        <span>
+          , <Abbr title={props.value.slice(1).join(", ")} value={"\u2026"} />
+        </span>
+      )}
+    </>
+  );
+};

package/src/components/{record/info/Hgvs.tsx → field/info/FieldHgvs.tsx}

@@ -1,23 +1,21 @@
 import { Component, Show } from "solid-js";
 import { Abbr } from "../../Abbr";
-import { FieldProps } from "../field/Field";
-import { ValueString } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { ValueString } from "@molgenis/vip-report-vcf";
 
 function abbreviate(notation: string): string {
   let abbreviated;
   const tokens = notation.split(":");
   if (tokens.length === 2) {
-    abbreviated = tokens[1];
+    abbreviated = tokens[1]!;
   } else {
     abbreviated = notation;
   }
   return abbreviated.length > 20 ? abbreviated.slice(0, 18) + "\u2026" : abbreviated;
 }
 
-export const Hgvs: Component<FieldProps> = (props) => {
-  const value = () => props.info.value as ValueString;
+export const FieldHgvs: Component<{ value: ValueString }> = (props) => {
   return (
-    <Show when={value()} keyed>
+    <Show when={props.value} keyed>
       {(value) => <Abbr title={value} value={abbreviate(value)} />}
     </Show>
   );

package/src/components/field/info/FieldInfo.tsx

@@ -0,0 +1,27 @@
+import { Component, Match, Switch } from "solid-js";
+import { FieldConsequence } from "./FieldConsequence";
+import { FieldTyped } from "../typed/FieldTyped";
+import { FieldPubMed } from "./FieldPubMed";
+import { FieldHgvs } from "./FieldHgvs";
+import { isAnyCsqInfo, isCsqInfo } from "../../../utils/csq.ts";
+import { InfoMetadata, ValueString } from "@molgenis/vip-report-vcf";
+import { CellValueInfo } from "../../../types/configCells";
+
+export const FieldInfo: Component<{
+  metadata: InfoMetadata;
+  value: CellValueInfo;
+}> = (props) => {
+  return (
+    <Switch fallback={<FieldTyped metadata={props.metadata} value={props.value} />}>
+      <Match when={isCsqInfo(props.metadata, "Consequence")}>
+        <FieldConsequence value={props.value as string[]} />
+      </Match>
+      <Match when={isCsqInfo(props.metadata, "PUBMED")}>
+        <FieldPubMed value={props.value as number[]} />
+      </Match>
+      <Match when={isAnyCsqInfo(props.metadata, ["HGVSc", "HGVSp"])}>
+        <FieldHgvs value={props.value as ValueString} />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/{record/info/PubMed.tsx → field/info/FieldPubMed.tsx}

@@ -1,12 +1,9 @@
 import { Component, Show } from "solid-js";
 import { Anchor } from "../../Anchor";
-import { FieldProps } from "../field/Field";
-
-export const PubMed: Component<FieldProps> = (props) => {
-  const pubmedIds = () => props.info.value as number[];
 
+export const FieldPubMed: Component<{ value: number[] }> = (props) => {
   const href = () => {
-    const ids = pubmedIds();
+    const ids = props.value;
     if (ids) {
       const term = ids.map((id) => `${id}[UID]`).join("+OR+");
       return `https://pubmed.ncbi.nlm.nih.gov/?term=${term}&sort=pubdate`;
@@ -14,9 +11,9 @@ export const PubMed: Component<FieldProps> = (props) => {
   };
 
   return (
-    <Show when={pubmedIds().length > 0}>
+    <Show when={props.value.length > 0}>
       <Anchor href={href()}>
-        <span>{`citations (${pubmedIds().length})`}</span>
+        <span>{`citations (${props.value.length})`}</span>
       </Anchor>
     </Show>
   );

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

@@ -0,0 +1,17 @@
+import { Component, Show } from "solid-js";
+import { Abbr } from "../../Abbr";
+import { ValueCategorical } from "../../../utils/vcf.ts";
+import { FieldMetadata } from "@molgenis/vip-report-vcf";
+
+export const FieldCategorical: Component<{
+  value: ValueCategorical | undefined;
+  metadata: FieldMetadata;
+}> = (props) => {
+  return (
+    <Show when={props.value !== null && props.value !== undefined}>
+      <Show when={props.value!.description} fallback={<span>{props.value!.label}</span>}>
+        {(description) => <Abbr title={description()} value={props.value!.label} />}
+      </Show>
+    </Show>
+  );
+};

package/src/components/{record/field/FieldValueCharacter.tsx → field/typed/FieldCharacter.tsx}

@@ -1,7 +1,8 @@
 import { Component, Show } from "solid-js";
+import { ValueString } from "@molgenis/vip-report-vcf";
 
-export const FieldValueCharacter: Component<{
-  value: string | null | undefined;
+export const FieldCharacter: Component<{
+  value: ValueString | undefined;
 }> = (props) => {
   return (
     <Show when={props.value !== null && props.value !== undefined}>

package/src/components/{record/field/FieldValueFlag.tsx → field/typed/FieldFlag.tsx}

@@ -1,7 +1,8 @@
 import { Component, Show } from "solid-js";
+import { ValueFlag } from "@molgenis/vip-report-vcf";
 
-export const FieldValueFlag: Component<{
-  value: boolean | null | undefined;
+export const FieldFlag: Component<{
+  value: ValueFlag | undefined;
 }> = (props) => {
   return (
     <Show when={props.value !== null && props.value !== undefined}>

package/src/components/{record/field/FieldValueFloat.tsx → field/typed/FieldFloat.tsx}

@@ -1,8 +1,9 @@
 import { Component, Show } from "solid-js";
 import { Abbr } from "../../Abbr";
+import { ValueFloat } from "@molgenis/vip-report-vcf";
 
-export const FieldValueFloat: Component<{
-  value: number | null | undefined;
+export const FieldFloat: Component<{
+  value: ValueFloat | undefined;
 }> = (props) => {
   return (
     <Show when={props.value !== null && props.value !== undefined}>

package/src/components/{record/field/FieldValueInteger.tsx → field/typed/FieldInteger.tsx}

@@ -1,7 +1,8 @@
 import { Component, Show } from "solid-js";
+import { ValueInteger } from "@molgenis/vip-report-vcf";
 
-export const FieldValueInteger: Component<{
-  value: number | null | undefined;
+export const FieldInteger: Component<{
+  value: ValueInteger | undefined;
 }> = (props) => {
   return (
     <Show when={props.value !== null && props.value !== undefined}>

package/src/components/{record/field/FieldValueString.tsx → field/typed/FieldString.tsx}

@@ -1,8 +1,9 @@
 import { Component, Show } from "solid-js";
 import { Abbr } from "../../Abbr";
+import { ValueString } from "@molgenis/vip-report-vcf";
 
-export const FieldValueString: Component<{
-  value: string | null | undefined;
+export const FieldString: Component<{
+  value: ValueString | undefined;
 }> = (props) => {
   return (
     <Show when={props.value !== null && props.value !== undefined}>

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

@@ -0,0 +1,20 @@
+import { Component } from "solid-js";
+import { FieldTypedItem, FieldValueSingle } from "./FieldTypedItem";
+import { FieldTypedMultiple } from "./FieldTypedMultiple";
+import { FieldMetadata } from "@molgenis/vip-report-vcf";
+import { CellValueFormat, CellValueInfo } from "../../../types/configCells";
+
+export const FieldTyped: Component<{
+  metadata: FieldMetadata;
+  value: CellValueInfo | CellValueFormat;
+}> = (props) => {
+  return (
+    <>
+      {props.metadata.number.count === 1 ? (
+        <FieldTypedItem value={props.value as FieldValueSingle | undefined} metadata={props.metadata} />
+      ) : (
+        <FieldTypedMultiple info={props.value as FieldValueSingle[]} infoMetadata={props.metadata} />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,49 @@
+import { Component, Match, Switch } from "solid-js";
+import {
+  FieldMetadata,
+  ValueCharacter,
+  ValueFlag,
+  ValueFloat,
+  ValueInteger,
+  ValueObject,
+  ValueString,
+} from "@molgenis/vip-report-vcf";
+import { FieldFloat } from "./FieldFloat";
+import { FieldString } from "./FieldString";
+import { FieldCharacter } from "./FieldCharacter";
+import { FieldInteger } from "./FieldInteger";
+import { FieldFlag } from "./FieldFlag";
+import { ErrorNotification } from "../../ErrorNotification";
+import { FieldCategorical } from "./FieldCategorical";
+import { ValueCategorical } from "../../../utils/vcf.ts";
+
+export type FieldValueSingle = ValueCharacter | ValueFlag | ValueFloat | ValueInteger | ValueObject | ValueString;
+
+export const FieldTypedItem: Component<{
+  value: FieldValueSingle | undefined;
+  metadata: FieldMetadata;
+}> = (props) => {
+  const type = () => props.metadata.type;
+  return (
+    <Switch fallback={<ErrorNotification error={`unexpected field type ${type()}`} />}>
+      <Match when={type() === "CATEGORICAL"}>
+        <FieldCategorical value={props.value as ValueCategorical | undefined} metadata={props.metadata} />
+      </Match>
+      <Match when={type() === "CHARACTER"}>
+        <FieldCharacter value={props.value as ValueString | undefined} />
+      </Match>
+      <Match when={type() === "FLAG"}>
+        <FieldFlag value={props.value as ValueFlag | undefined} />
+      </Match>
+      <Match when={type() === "FLOAT"}>
+        <FieldFloat value={props.value as ValueFloat | undefined} />
+      </Match>
+      <Match when={type() === "INTEGER"}>
+        <FieldInteger value={props.value as ValueInteger | undefined} />
+      </Match>
+      <Match when={type() === "STRING"}>
+        <FieldString value={props.value as ValueString | undefined} />
+      </Match>
+    </Switch>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { Component, For } from "solid-js";
+import { FieldMetadata } from "@molgenis/vip-report-vcf";
+import { FieldTypedItem, FieldValueSingle } from "./FieldTypedItem";
+
+export const FieldTypedMultiple: Component<{
+  info: FieldValueSingle[];
+  infoMetadata: FieldMetadata;
+}> = (props) => {
+  return (
+    <>
+      <For each={props.info}>
+        {(value, i) => (
+          <>
+            {i() !== 0 && <span>, </span>}
+            <FieldTypedItem value={value} metadata={props.infoMetadata} />
+          </>
+        )}
+      </For>
+    </>
+  );
+};

package/src/components/filter/Filter.tsx

@@ -1,54 +1,62 @@
 import { Component, Match, Switch } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { FilterCategorical } from "./FilterCategorical";
-import { FilterIntegerGq } from "./FilterIntegerGq";
-import { Item, Query, Sample } from "@molgenis/vip-report-api/src/Api";
-import { FilterClinVar } from "./FilterClinVar";
-import { isAnyCsqInfo } from "../../utils/csqUtils";
-import { FilterChangeEvent, FilterClearEvent } from "./Filters";
-import { FilterAllelicBalance } from "./FilterAllelicBalance";
-import { FilterHpo } from "./FilterHpo";
-import { FilterGene } from "./FilterGene";
-import { FilterVI } from "./FilterVI";
-import { FilterVariantType } from "./FilterVariantType";
+import {
+  ConfigFilter,
+  ConfigFilterBase,
+  ConfigFilterField,
+  ConfigFilterFixed,
+  FilterValue,
+  FilterValueField,
+  FilterValueFixed,
+} from "../../types/configFilter";
+import { FilterTyped } from "./typed/FilterTyped";
+import { ConfigFilterComposed, FilterValueComposed } from "../../types/configFilterComposed";
+import { FilterComposed } from "./composed/FilterComposed";
+import { ErrorNotification } from "../ErrorNotification";
+import { FilterFixed } from "./fixed/FilterFixed.tsx";
 
-export type FilterProps = {
-  field: FieldMetadata;
-  query?: Query;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-  sample?: Item<Sample>;
-};
+export interface FilterValueChangeEvent<FilterValueType> {
+  value: FilterValueType;
+}
+
+export type FilterValueChangeCallback<FilterValueType> = (event: FilterValueChangeEvent<FilterValueType>) => void;
+export type FilterValueClearCallback = () => void;
+
+export interface FilterProps<C extends ConfigFilterBase, FilterValueType> {
+  config: C;
+  value?: FilterValueType;
+  onValueChange: FilterValueChangeCallback<FilterValueType>;
+  onValueClear: FilterValueClearCallback;
+}
+
+export const Filter: Component<FilterProps<ConfigFilter, FilterValue>> = (props) => {
+  const type = () => props.config.type;
 
-export const Filter: Component<FilterProps> = (props) => {
   return (
-    <>
-      <Switch>
-        <Match when={props.field.id === "GQ"}>
-          <FilterIntegerGq {...props} />
-        </Match>
-        <Match when={props.field.id === "VIAB"}>
-          <FilterAllelicBalance {...props} />
-        </Match>
-        <Match when={props.field.id === "VI"}>
-          <FilterVI {...props} />
-        </Match>
-        <Match when={props.field.id === "SVTYPE"}>
-          <FilterVariantType {...props} />
-        </Match>
-        <Match when={isAnyCsqInfo(props.field, ["clinVar_CLNSIG", "clinVar_CLNSIGINCL"])}>
-          <FilterClinVar {...props} />
-        </Match>
-        <Match when={props.field.id === "HPO"}>
-          <FilterHpo {...props} />
-        </Match>
-        <Match when={props.field.id === "IncompletePenetrance"}>
-          <FilterGene {...props} />
-        </Match>
-        <Match when={props.field.type === "CATEGORICAL"}>
-          <FilterCategorical {...props} />
-        </Match>
-      </Switch>
-    </>
+    <Switch fallback={<ErrorNotification error={`unexpected field type ${type()}`} />}>
+      <Match when={type() === "fixed"}>
+        <FilterFixed
+          config={props.config as ConfigFilterFixed}
+          value={props.value as FilterValueFixed}
+          onValueChange={props.onValueChange}
+          onValueClear={props.onValueClear}
+        />
+      </Match>
+      <Match when={type() === "info" || type() === "genotype"}>
+        <FilterTyped
+          config={props.config as ConfigFilterField}
+          value={props.value as FilterValueField}
+          onValueChange={props.onValueChange}
+          onValueClear={props.onValueClear}
+        />
+      </Match>
+      <Match when={type() === "composed"}>
+        <FilterComposed
+          config={props.config as ConfigFilterComposed}
+          value={props.value as FilterValueComposed}
+          onValueChange={props.onValueChange}
+          onValueClear={props.onValueClear}
+        />
+      </Match>
+    </Switch>
   );
 };

package/src/components/filter/FilterWrapper.scss

@@ -0,0 +1,23 @@
+.filter {
+  padding: 0 0 1rem;
+}
+
+.filter-header {
+  display: flex;
+  align-items: stretch;
+  padding: 0 0 0.5rem;
+  border-bottom: 1px solid var(--bulma-hr-background-color);
+}
+
+.filter-header-title {
+  flex-grow: 1;
+  font-weight: var(--bulma-weight-semibold);
+}
+
+.filter-header-icon {
+  cursor: pointer
+}
+
+.filter-container {
+  padding: 0.5rem 0 0;
+}

package/src/components/filter/FilterWrapper.tsx

@@ -0,0 +1,63 @@
+import "./FilterWrapper.scss";
+import { createSignal, JSX, ParentComponent, Show, Signal } from "solid-js";
+import { ConfigFilterBase } from "../../types/configFilter";
+import { Tooltip } from "../Tooltip.tsx";
+
+export const FilterWrapper: ParentComponent<{
+  config: ConfigFilterBase;
+  error?: string | undefined;
+  tooltipContentElement?: JSX.Element; // additional tooltip content
+}> = (props) => {
+  const [collapsed, setCollapsed]: Signal<boolean> = createSignal(false);
+  const [showTooltip, setShowTooltip]: Signal<boolean> = createSignal(false);
+
+  const isCollapsible = () => false; // TODO add to config filter base
+  const label = () => props.config.label();
+  const description = () => props.config.description();
+  const hasTooltipContent = () => description() || props.tooltipContentElement;
+
+  function toggleShowTooltip() {
+    setShowTooltip(!showTooltip());
+  }
+
+  function toggleCollapse() {
+    setCollapsed(!collapsed());
+  }
+
+  const ErrorMessage = (props: { error: string | undefined }) => (
+    <div class="notification is-danger is-light">{props.error}</div>
+  );
+
+  return (
+    <div class="filter">
+      <header class="filter-header">
+        <p class="filter-header-title">{label()}</p>
+        <Show when={hasTooltipContent()}>
+          <button class="filter-header-icon" onClick={toggleShowTooltip}>
+            <span class="icon">
+              <i class="fas fa-info" />
+            </span>
+            <Show when={showTooltip()}>
+              <Tooltip text={description()}>{props.tooltipContentElement}</Tooltip>
+            </Show>
+          </button>
+        </Show>
+        <Show when={isCollapsible()}>
+          <button class="filter-header-icon" onClick={toggleCollapse}>
+            <span class="icon">
+              <Show when={collapsed()} fallback={<i class="fas fa-angle-up" />}>
+                <i class="fas fa-angle-down" />
+              </Show>
+            </span>
+          </button>
+        </Show>
+      </header>
+      <Show when={props.error !== undefined}>
+        <ErrorMessage error={props.error} />
+      </Show>
+      <Show when={!collapsed()}>
+        <div class="filter-container">{props.children}</div>
+      </Show>
+    </div>
+  );
+};