@molgenis/vip-report-template 5.0.0 → 5.1.0

package/.travis.yml

@@ -1,3 +1,5 @@
+os: linux
+dist: focal
 language: node_js
 node_js:
   - lts/*
@@ -10,7 +12,7 @@ cache:
   directories:
     - "~/.pnpm-store"
 before_install:
-  - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@7
+  - curl -f https://get.pnpm.io/v6.32.js | node - add --global pnpm@7
   - pnpm config set store-dir ~/.pnpm-store
 install:
   - pnpm install

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@molgenis/vip-report-api": "^4.0.1",
-    "@molgenis/vip-report-vcf": "^1.2.7",
+    "@molgenis/vip-report-api": "^4.3.1",
+    "@molgenis/vip-report-vcf": "^1.3.2",
     "base64-js": "^1.5.1",
     "igv": "^2.13.3",
     "solid-app-router": "^0.4.2",

package/src/components/VariantSampleTable.tsx

@@ -39,8 +39,10 @@ export const VariantSampleTable: Component<{
                           formatMetadata={formatField}
                           record={props.record}
                           isAbbreviate={false}
-                          allelicDepth={props.record.data.s[props.samples[i()].index]["AD"] as number[]}
-                          readDepth={props.record.data.s[props.samples[i()].index]["DP"] as number}
+                          allelicBalance={
+                            props.record.data.s[props.samples[i()].index]["VIAB"] as number | undefined | null
+                          }
+                          readDepth={props.record.data.s[props.samples[i()].index]["DP"] as number | undefined}
                         />
                       </td>
                     )}

package/src/components/VariantsSampleTable.tsx

@@ -6,7 +6,7 @@ import { Link } from "solid-app-router";
 import { HtsFileMetadata, Item, Sample } from "@molgenis/vip-report-api/src/Api";
 import { GenotypeField } from "./record/format/GenotypeField";
 import { InfoCollapsablePane } from "./InfoCollapsablePane";
-import { Component, createMemo, For } from "solid-js";
+import { Component, createMemo, createSignal, For, onMount, Show } from "solid-js";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { FieldHeader } from "./FieldHeader";
 import { Abbr } from "./Abbr";
@@ -22,6 +22,32 @@ export const VariantsSampleTable: Component<{
 }> = (props) => {
   const samples = createMemo(() => [props.item.data, ...props.pedigreeSamples.map((item) => item.data)]);
 
+  const [proband, setProband] = createSignal<Sample | undefined>();
+  const [father, setFather] = createSignal<Sample | undefined>();
+  const [mother, setMother] = createSignal<Sample | undefined>();
+  const [otherFamilyMembers, setOtherFamilyMembers] = createSignal<Sample[]>([]);
+
+  onMount(() => {
+    const familyMembers: Sample[] = [];
+    setProband(props.item.data);
+    samples().forEach((sample) => {
+      if (
+        (proband() as Sample).person.maternalId !== "0" &&
+        sample.person.individualId === (proband() as Sample).person.maternalId
+      ) {
+        setMother(sample);
+      } else if (
+        (proband() as Sample).person.paternalId !== "0" &&
+        sample.person.individualId === (proband() as Sample).person.paternalId
+      ) {
+        setFather(sample);
+      } else if (sample.person.individualId !== (proband() as Sample).person.individualId) {
+        familyMembers.push(sample);
+      }
+    });
+    setOtherFamilyMembers(familyMembers);
+  });
+
   return (
     <div style={{ display: "grid" }}>
       {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
@@ -31,7 +57,43 @@ export const VariantsSampleTable: Component<{
             <tr>
               <th>Position</th>
               <th>Reference</th>
-              <For each={samples()}>
+              <Show when={proband()} keyed>
+                {(proband) => (
+                  <th>
+                    <Abbr
+                      title={`${
+                        proband.person.individualId
+                      }: ${proband.person.sex.toLowerCase()}, ${proband.person.affectedStatus.toLowerCase()}`}
+                      value="Proband"
+                    />
+                  </th>
+                )}
+              </Show>
+              <Show when={mother()} keyed>
+                {(mother) => (
+                  <th>
+                    <Abbr
+                      title={`${
+                        mother.person.individualId
+                      }: ${mother.person.sex.toLowerCase()}, ${mother.person.affectedStatus.toLowerCase()}`}
+                      value="Mother"
+                    />
+                  </th>
+                )}
+              </Show>
+              <Show when={father()} keyed>
+                {(father) => (
+                  <th>
+                    <Abbr
+                      title={`${
+                        father.person.individualId
+                      }: ${father.person.sex.toLowerCase()}, ${father.person.affectedStatus.toLowerCase()}`}
+                      value="Father"
+                    />
+                  </th>
+                )}
+              </Show>
+              <For each={otherFamilyMembers()}>
                 {(sample: Sample) => (
                   <th>
                     <Abbr
@@ -62,19 +124,63 @@ export const VariantsSampleTable: Component<{
                   <td>
                     <Ref value={record.data.r} isAbbreviate={true} />
                   </td>
-                  <For each={samples()}>
-                    {(sample: Sample) => (
+                  <Show when={proband()} keyed>
+                    {(proband) => (
+                      <td>
+                        <GenotypeField
+                          genotype={record.data.s[proband.index]["GT"] as Genotype}
+                          refAllele={record.data.r}
+                          altAlleles={record.data.a}
+                          isAbbreviate={true}
+                          allelicBalance={record.data.s[proband.index]["VIAB"] as number | undefined | null}
+                          readDepth={record.data.s[proband.index]["DP"] as number | undefined}
+                        />
+                      </td>
+                    )}
+                  </Show>
+                  <Show when={mother()} keyed>
+                    {(mother) => (
                       <td>
                         <GenotypeField
-                          genotype={record.data.s[sample.index]["GT"] as Genotype}
+                          genotype={record.data.s[mother.index]["GT"] as Genotype}
                           refAllele={record.data.r}
                           altAlleles={record.data.a}
                           isAbbreviate={true}
-                          allelicDepth={record.data.s[sample.index]["AD"] as number[]}
-                          readDepth={record.data.s[sample.index]["DP"] as number}
+                          allelicBalance={record.data.s[mother.index]["VIAB"] as number | undefined | null}
+                          readDepth={record.data.s[mother.index]["DP"] as number | undefined}
                         />
                       </td>
                     )}
+                  </Show>
+                  <Show when={father()} keyed>
+                    {(father) => (
+                      <td>
+                        <GenotypeField
+                          genotype={record.data.s[father.index]["GT"] as Genotype}
+                          refAllele={record.data.r}
+                          altAlleles={record.data.a}
+                          isAbbreviate={true}
+                          allelicBalance={record.data.s[father.index]["VIAB"] as number | undefined | null}
+                          readDepth={record.data.s[father.index]["DP"] as number | undefined}
+                        />
+                      </td>
+                    )}
+                  </Show>
+                  <For each={otherFamilyMembers()}>
+                    {(sample: Sample) => (
+                      <>
+                        <td>
+                          <GenotypeField
+                            genotype={record.data.s[sample.index]["GT"] as Genotype}
+                            refAllele={record.data.r}
+                            altAlleles={record.data.a}
+                            isAbbreviate={true}
+                            allelicBalance={record.data.s[sample.index]["VIAB"] as number | undefined | null}
+                            readDepth={record.data.s[sample.index]["DP"] as number | undefined}
+                          />
+                        </td>
+                      </>
+                    )}
                   </For>
                   <InfoCollapsablePane fields={props.nestedFields} record={record} htsFileMeta={props.htsFileMeta} />
                 </tr>

package/src/components/filter/Filter.tsx

@@ -2,40 +2,49 @@ import { Component, Match, Switch } from "solid-js";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { FilterCategorical } from "./FilterCategorical";
 import { FilterIntegerVim } from "./FilterIntegerVim";
+import { FilterIntegerGq } from "./FilterIntegerGq";
 import { FilterIntegerDp } from "./FilterIntegerDp";
 import { FilterIntegerVid } from "./FilterIntegerVid";
-import { QueryClause, Selector } from "@molgenis/vip-report-api/src/Api";
+import { Item, Query, Sample } from "@molgenis/vip-report-api/src/Api";
 import { FilterClinVar } from "./FilterClinVar";
 import { isAnyCsqInfo } from "../../utils/csqUtils";
-
-export type FilterChangeEvent = { query: QueryClause };
-export type FilterClearEvent = { selector: Selector };
+import { FilterChangeEvent, FilterClearEvent } from "./Filters";
+import { FilterAllelicBalance } from "./FilterAllelicBalance";
 
 export type FilterProps = {
   field: FieldMetadata;
-  query?: QueryClause;
+  query?: Query;
   onChange: (event: FilterChangeEvent) => void;
   onClear: (event: FilterClearEvent) => void;
+  sample?: Item<Sample>;
 };
 
 export const Filter: Component<FilterProps> = (props) => {
   return (
-    <Switch>
-      <Match when={props.field.id === "DP"}>
-        <FilterIntegerDp {...props} />
-      </Match>
-      <Match when={props.field.id === "VID"}>
-        <FilterIntegerVid {...props} />
-      </Match>
-      <Match when={props.field.id === "VIM"}>
-        <FilterIntegerVim {...props} />
-      </Match>
-      <Match when={isAnyCsqInfo(props.field, ["clinVar_CLNSIG", "clinVar_CLNSIGINCL"])}>
-        <FilterClinVar {...props} />
-      </Match>
-      <Match when={props.field.type === "CATEGORICAL"}>
-        <FilterCategorical {...props} />
-      </Match>
-    </Switch>
+    <>
+      <Switch>
+        <Match when={props.field.id === "GQ"}>
+          <FilterIntegerGq {...props} />
+        </Match>
+        <Match when={props.field.id === "DP"}>
+          <FilterIntegerDp {...props} />
+        </Match>
+        <Match when={props.field.id === "VID"}>
+          <FilterIntegerVid {...props} />
+        </Match>
+        <Match when={props.field.id === "VIM"}>
+          <FilterIntegerVim {...props} />
+        </Match>
+        <Match when={props.field.id === "VIAB"}>
+          <FilterAllelicBalance {...props} />
+        </Match>
+        <Match when={isAnyCsqInfo(props.field, ["clinVar_CLNSIG", "clinVar_CLNSIGINCL"])}>
+          <FilterClinVar {...props} />
+        </Match>
+        <Match when={props.field.type === "CATEGORICAL"}>
+          <FilterCategorical {...props} />
+        </Match>
+      </Switch>
+    </>
   );
 };

package/src/components/filter/FilterAllelicBalance.tsx

@@ -0,0 +1,75 @@
+import { Component } from "solid-js";
+import { ComposedQuery, Item, Query, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
+import { Checkbox, CheckboxEvent } from "../Checkbox";
+import { FilterChangeEvent, FilterClearEvent } from "./Filters";
+import { selector, selectorKey } from "../../utils/query";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+
+export function getAllelicBalanceQuery(sampleIndex: number): ComposedQuery {
+  const hetQuery: ComposedQuery = {
+    operator: "and",
+    args: [
+      { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "het" },
+      {
+        operator: "and",
+        args: [
+          { selector: ["s", sampleIndex, "VIAB"], operator: ">", args: 0.2 },
+          { selector: ["s", sampleIndex, "VIAB"], operator: "<", args: 0.8 },
+        ],
+      },
+    ],
+  };
+  const homQuery: ComposedQuery = {
+    operator: "and",
+    args: [
+      {
+        operator: "or",
+        args: [
+          { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "hom_a" },
+          { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "hom_r" },
+        ],
+      },
+      { selector: ["s", sampleIndex, "VIAB"], operator: "<", args: 0.02 },
+    ],
+  };
+  const otherGtQuery: ComposedQuery = {
+    operator: "or",
+    args: [
+      { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "miss" },
+      { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "part" },
+      { selector: ["s", sampleIndex, "VIAB"], operator: "==", args: null },
+      { selector: ["s", sampleIndex, "VIAB"], operator: "==", args: undefined },
+    ],
+  };
+  const combinedQuery: ComposedQuery = { operator: "or", args: [hetQuery, homQuery, otherGtQuery] };
+
+  return combinedQuery;
+}
+
+export const FilterAllelicBalance: Component<{
+  field: FieldMetadata;
+  sample?: Item<Sample>;
+  query?: Query;
+  onChange: (event: FilterChangeEvent) => void;
+  onClear: (event: FilterClearEvent) => void;
+}> = (props) => {
+  const onFilterChange = (event: CheckboxEvent) => {
+    const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
+    if (event.checked) {
+      props.onChange({
+        query: getAllelicBalanceQuery((props.sample?.data as Sample).index),
+        key: selectorKey(fieldSelector),
+      });
+    } else props.onClear({ key: selectorKey(fieldSelector) });
+  };
+  return (
+    <div class="control">
+      <Checkbox
+        desc="Filter variants with allelic imbalance; For hetrozygote calls: AB < 0.2 or AB > 0.8 and for homozygote calls: AB > 0.02 are consided allelic imbalance"
+        label="No allelic imbalance"
+        checked={props.query && props.query.args !== undefined}
+        onChange={onFilterChange}
+      />
+    </div>
+  );
+};

package/src/components/filter/FilterCategorical.tsx

@@ -1,7 +1,7 @@
 import { Component, For } from "solid-js";
 import { Checkbox, CheckboxEvent } from "../Checkbox";
 import { FilterProps } from "./Filter";
-import { selector } from "../../utils/query";
+import { selector, selectorKey } from "../../utils/query";
 
 export type CheckboxGroup = {
   [key: string]: boolean;
@@ -35,6 +35,7 @@ export const FilterCategorical: Component<
       .map((key) => (key !== nullValue ? key : null));
     if (values.length > 0) {
       props.onChange({
+        key: selectorKey(selector(props.field)),
         query: {
           selector: selector(props.field),
           operator: props.field.number.count === 1 ? "has_any" : "any_has_any",
@@ -42,7 +43,7 @@ export const FilterCategorical: Component<
         },
       });
     } else {
-      props.onClear({ selector: selector(props.field) });
+      props.onClear({ key: selectorKey(selector(props.field)) });
     }
   };
 

package/src/components/filter/FilterIntegerDp.tsx

@@ -1,17 +1,32 @@
 import { Component } from "solid-js";
 import { FilterProps } from "./Filter";
 import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { selector } from "../../utils/query";
+import { selector, selectorKey } from "../../utils/query";
+import { Item, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
 
 export const FilterIntegerDp: Component<FilterProps> = (props) => {
   const onFilterChange = (event: CheckboxEvent) => {
-    if (event.checked) props.onChange({ query: { selector: selector(props.field), operator: ">=", args: 20 } });
-    else props.onClear({ selector: selector(props.field) });
+    const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
+    if (event.checked)
+      props.onChange({
+        key: selectorKey(fieldSelector),
+        query: {
+          selector: fieldSelector,
+          operator: ">=",
+          args: 10,
+        },
+      });
+    else props.onClear({ key: selectorKey(fieldSelector) });
   };
 
   return (
     <div class="control">
-      <Checkbox label="Read depth >= 20" checked={props.query && props.query.args === 20} onChange={onFilterChange} />
+      <Checkbox
+        desc="Sequencing depth >= 10"
+        label="Depth >= 10"
+        checked={props.query && props.query.args === 10}
+        onChange={onFilterChange}
+      />
     </div>
   );
 };

package/src/components/filter/FilterIntegerGq.tsx

@@ -0,0 +1,32 @@
+import { Component } from "solid-js";
+import { FilterProps } from "./Filter";
+import { Checkbox, CheckboxEvent } from "../Checkbox";
+import { selector, selectorKey } from "../../utils/query";
+import { Item, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
+
+export const FilterIntegerGq: Component<FilterProps> = (props) => {
+  const onFilterChange = (event: CheckboxEvent) => {
+    const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
+    if (event.checked)
+      props.onChange({
+        key: selectorKey(fieldSelector),
+        query: {
+          selector: fieldSelector,
+          operator: ">=",
+          args: 20,
+        },
+      });
+    else props.onClear({ key: selectorKey(fieldSelector) });
+  };
+
+  return (
+    <div class="control">
+      <Checkbox
+        desc="Genotype quality >= 20"
+        label="GT quality >= 20"
+        checked={props.query && props.query.args === 20}
+        onChange={onFilterChange}
+      />
+    </div>
+  );
+};

package/src/components/filter/FilterIntegerVid.tsx

@@ -1,12 +1,22 @@
 import { Component } from "solid-js";
 import { FilterProps } from "./Filter";
 import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { selector } from "../../utils/query";
+import { selector, selectorKey } from "../../utils/query";
+import { Item, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
 
 export const FilterIntegerVid: Component<FilterProps> = (props) => {
   const onFilterChange = (event: CheckboxEvent) => {
-    if (event.checked) props.onChange({ query: { selector: selector(props.field), operator: "==", args: 1 } });
-    else props.onClear({ selector: selector(props.field) });
+    const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
+    if (event.checked)
+      props.onChange({
+        key: selectorKey(fieldSelector),
+        query: {
+          selector: fieldSelector,
+          operator: "==",
+          args: 1,
+        },
+      });
+    else props.onClear({ key: selectorKey(fieldSelector) });
   };
 
   return (

package/src/components/filter/FilterIntegerVim.tsx

@@ -1,12 +1,22 @@
 import { Component } from "solid-js";
 import { FilterProps } from "./Filter";
 import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { selector } from "../../utils/query";
+import { selector, selectorKey } from "../../utils/query";
+import { Item, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
 
 export const FilterIntegerVim: Component<FilterProps> = (props) => {
   const onFilterChange = (event: CheckboxEvent) => {
-    if (event.checked) props.onChange({ query: { selector: selector(props.field), operator: "==", args: 1 } });
-    else props.onClear({ selector: selector(props.field) });
+    const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
+    if (event.checked)
+      props.onChange({
+        key: selectorKey(fieldSelector),
+        query: {
+          selector: fieldSelector,
+          operator: "==",
+          args: 1,
+        },
+      });
+    else props.onClear({ key: selectorKey(fieldSelector) });
   };
 
   return (

package/src/components/filter/Filters.tsx

@@ -1,11 +1,13 @@
 import { Component } from "solid-js";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { Item, Query, Sample } from "@molgenis/vip-report-api/src/Api";
 import { InfoFilters } from "./InfoFilters";
 import { SamplesFilters } from "./SamplesFilters";
-import { FilterChangeEvent, FilterClearEvent } from "./Filter";
 import { FilterQueries } from "../../store";
 
+export type FilterChangeEvent = { key: string; query: Query };
+export type FilterClearEvent = { key: string };
+
 export const Filters: Component<{
   fields: FieldMetadata[];
   samplesFields: { sample: Item<Sample>; fields: FieldMetadata[] }[];
@@ -13,17 +15,14 @@ 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={onChange} onClear={onClear} />
+      <InfoFilters fields={props.fields} queries={props.queries} onChange={props.onChange} onClear={props.onClear} />
       <SamplesFilters
         samplesFields={props.samplesFields}
         queries={props.queries}
-        onChange={onChange}
-        onClear={onClear}
+        onChange={props.onChange}
+        onClear={props.onClear}
       />
     </>
   );

package/src/components/filter/InfoFilter.tsx

@@ -1,19 +1,25 @@
 import { Component } from "solid-js";
-import { Filter, FilterChangeEvent, FilterClearEvent, FilterProps } from "./Filter";
-import { SelectorPart } from "@molgenis/vip-report-api/src/Api";
+import { Filter, FilterProps } from "./Filter";
+import { FilterChangeEvent, FilterClearEvent } from "./Filters";
+import { QueryClause, SelectorPart } from "@molgenis/vip-report-api/src/Api";
+import { selectorKey } from "../../utils/query";
 
 export const InfoFilter: Component<FilterProps> = (props) => {
   const label = () => (props.field.label !== undefined ? props.field.label : props.field.id);
 
   const onChange = (event: FilterChangeEvent) => {
     props.onChange({
-      query: { ...event.query, selector: ["n", ...(event.query.selector as SelectorPart[])] },
+      key: selectorKey(["n", event.key]),
+      query: {
+        ...(event.query as QueryClause),
+        selector: ["n", ...((event.query as QueryClause).selector as SelectorPart[])],
+      },
     });
   };
 
   const onClear = (event: FilterClearEvent) => {
     props.onClear({
-      selector: ["n", ...(event.selector as SelectorPart[])],
+      key: selectorKey(["n", event.key]),
     });
   };
 

package/src/components/filter/InfoFilters.tsx

@@ -1,10 +1,10 @@
 import { Component, For } from "solid-js";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { FilterChangeEvent, FilterClearEvent } from "./Filter";
 import { InfoFilter } from "./InfoFilter";
 import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
 import { FilterQueries } from "../../store";
 import { infoFieldKey } from "../../utils/query";
+import { FilterChangeEvent, FilterClearEvent } from "./Filters";
 
 export const InfoFilters: Component<{
   fields: FieldMetadata[];

package/src/components/filter/SampleFilters.tsx

@@ -1,9 +1,10 @@
 import { Component, For } from "solid-js";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Item, Sample, SelectorPart } from "@molgenis/vip-report-api/src/Api";
-import { Filter, FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { Filter } from "./Filter";
 import { FilterQueries } from "../../store";
 import { sampleFieldKey } from "../../utils/query";
+import { FilterChangeEvent, FilterClearEvent } from "./Filters";
 
 export const SampleFilters: Component<{
   sample: Item<Sample>;
@@ -12,17 +13,9 @@ export const SampleFilters: Component<{
   onChange: (event: FilterChangeEvent) => void;
   onClear: (event: FilterClearEvent) => void;
 }> = (props) => {
-  const onChange = (event: FilterChangeEvent) => {
-    props.onChange({
-      query: { ...event.query, selector: ["s", props.sample.data.index, ...(event.query.selector as SelectorPart[])] },
-    });
-  };
-
-  const onClear = (event: FilterClearEvent) => {
-    props.onClear({
-      selector: ["s", props.sample.data.index, ...(event.selector as SelectorPart[])],
-    });
-  };
+  if (props.sample == undefined) {
+    throw Error("Cannot create Sample filters without a sample.");
+  }
 
   return (
     <>
@@ -30,12 +23,16 @@ export const SampleFilters: Component<{
       <div class="field">
         <For each={props.fields}>
           {(field) => (
-            <Filter
-              field={field}
-              query={props.queries ? props.queries[sampleFieldKey(props.sample, field)] : undefined}
-              onChange={onChange}
-              onClear={onClear}
-            />
+            <>
+              {" "}
+              <Filter
+                field={field}
+                query={props.queries ? props.queries[sampleFieldKey(props.sample, field)] : undefined}
+                onChange={props.onChange}
+                onClear={props.onClear}
+                sample={props.sample}
+              />
+            </>
           )}
         </For>
       </div>