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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "3.0.0-beta",
+  "version": "3.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.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@molgenis/vip-report-api": "^3.4.2",
-    "@molgenis/vip-report-vcf": "^1.1.1",
+    "@molgenis/vip-report-api": "^3.5.2",
+    "@molgenis/vip-report-vcf": "^1.2.2",
     "base64-js": "^1.5.1",
     "igv": "^2.12.6",
     "solid-app-router": "^0.3.3",

package/src/__tests__/query.test.ts

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

package/src/components/Anchor.tsx

@@ -1,12 +1,15 @@
-import { Component } from "solid-js";
+import { ParentComponent, Show } from "solid-js";
 
-export const Anchor: Component<{
-  href: string;
-  value: string | number;
+export const Anchor: ParentComponent<{
+  href: string | null | undefined;
 }> = (props) => {
   return (
-    <a href={props.href} target="_blank" rel="noopener noreferrer nofollow">
-      {props.value}
-    </a>
+    <Show when={props.href} fallback={props.children}>
+      {(href) => (
+        <a href={href} target="_blank" rel="noopener noreferrer nofollow">
+          {props.children}
+        </a>
+      )}
+    </Show>
   );
 };

package/src/components/ConsequenceTable.tsx

@@ -4,10 +4,13 @@ import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { Info } from "./record/Info";
 import { FieldHeader } from "./FieldHeader";
 import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Item } from "@molgenis/vip-report-api/src/Api";
 
-export const ConsequenceTable: Component<{ csqMetadata: FieldMetadata[]; csqValues: ValueArray; record: Record }> = (
-  props
-) => {
+export const ConsequenceTable: Component<{
+  csqMetadata: FieldMetadata[];
+  csqValues: ValueArray;
+  record: Item<Record>;
+}> = (props) => {
   function getValues(index: number): ValueArray {
     return props.csqValues[index] !== null ? (props.csqValues[index] as ValueArray) : [];
   }
@@ -24,7 +27,11 @@ export const ConsequenceTable: Component<{ csqMetadata: FieldMetadata[]; csqValu
                   <tr>
                     <FieldHeader field={field} />
                     <td>
-                      <Info info={props.csqValues[index()]} infoMetadata={field} variant={props.record} />
+                      <Info
+                        info={{ value: props.csqValues[index()], valueParent: props.csqValues, record: props.record }}
+                        infoMeta={field}
+                        context={{}}
+                      />
                     </td>
                   </tr>
                 </Show>

package/src/components/DatasetDropdown.tsx

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

package/src/components/HpoTerm.tsx

@@ -0,0 +1,13 @@
+import { Component } from "solid-js";
+import { Anchor } from "./Anchor";
+import { OntologyClass } from "@molgenis/vip-report-api/src/Api";
+
+export const HpoTerm: Component<{
+  ontologyClass: OntologyClass;
+}> = (props) => {
+  return (
+    <Anchor href={`https://hpo.jax.org/app/browse/term/${props.ontologyClass.id}`}>
+      <span>{props.ontologyClass.label}</span>
+    </Anchor>
+  );
+};

package/src/components/InfoCollapsablePane.tsx

@@ -1,39 +1,40 @@
 import { Component, createMemo, createSignal, For, Signal } from "solid-js";
-import { FieldMetadata, InfoMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
-import { Item } from "@molgenis/vip-report-api/src/Api";
+import { HtsFileMetadata, Item } from "@molgenis/vip-report-api/src/Api";
 import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
 import { Info } from "./record/Info";
-import { useLocation } from "solid-app-router";
+import { FieldValue } from "./record/field/Field";
+import { isCsqInfo } from "../utils/csqUtils";
+import { Link, useLocation } from "solid-app-router";
 
 export const InfoCollapsablePane: Component<{
   fields: FieldMetadata[];
   record: Item<Record>;
+  htsFileMeta: HtsFileMetadata;
 }> = (props) => {
   const [collapsed, setCollapsed]: Signal<boolean> = createSignal(false);
 
-  function getHref(field: InfoMetadata, consequenceIndex: number): string | undefined {
-    let href;
-    if (field.id === "Consequence" && field.parent?.id === "CSQ") {
-      href = `${useLocation().pathname}/${props.record.id}/consequences/${consequenceIndex}`;
-    }
-    return href;
-  }
-
   function toggleCollapse() {
     setCollapsed(!collapsed());
   }
 
-  const values = createMemo(() =>
+  const values = createMemo((): FieldValue[][] =>
     props.fields.map((field) => {
       if (field.parent) {
-        return (props.record.data.n[field.parent.id] as ValueArray).map((nestedValues) =>
-          field.parent && field.parent.nested
-            ? (nestedValues as ValueArray)[
-                field.parent.nested.items.findIndex((nestedField) => nestedField.id === field.id)
-              ]
-            : null
-        );
+        return (props.record.data.n[field.parent.id] as ValueArray).map((nestedValues) => {
+          const value =
+            field.parent && field.parent.nested
+              ? (nestedValues as ValueArray)[
+                  field.parent.nested.items.findIndex((nestedField) => nestedField.id === field.id)
+                ]
+              : null;
+          return {
+            record: props.record,
+            value: value,
+            valueParent: nestedValues,
+          };
+        });
       }
       throw new Error(`Nested field '${field.id}' needs to have a parent field.`);
     })
@@ -54,9 +55,14 @@ export const InfoCollapsablePane: Component<{
               {(value, j) => (
                 <>
                   {j() != 0 && collapsed() && <br />}
-                  {(j() == 0 || collapsed()) && (
-                    <Info info={value} infoMetadata={field} href={getHref(field, j())} variant={props.record.data} />
-                  )}
+                  {(j() == 0 || collapsed()) &&
+                    (isCsqInfo(field, "Consequence") ? (
+                      <Link href={`${useLocation().pathname}/${props.record.id}/consequences/${j()}`}>
+                        <Info info={value} infoMeta={field} context={props.htsFileMeta} />
+                      </Link>
+                    ) : (
+                      <Info info={value} infoMeta={field} context={props.htsFileMeta} />
+                    ))}
                 </>
               )}
             </For>

package/src/components/SampleTable.tsx

@@ -1,7 +1,8 @@
 import { Link } from "solid-app-router";
 import { Component, createMemo, For, Show } from "solid-js";
 import { Item, Phenotype, PhenotypicFeature, Sample } from "@molgenis/vip-report-api/src/Api";
-import { HpoTerm } from "./record/info/HpoTerm";
+import { HpoTerm } from "./HpoTerm";
+import { Anchor } from "./Anchor";
 
 function getAffectedStatusLabel(affectedStatus: string) {
   let label;
@@ -96,7 +97,7 @@ export const SampleTable: Component<{
                   </td>
                   <td>
                     <Show when={getPhenotypes(sample.data.person.individualId).length > 0}>
-                      <Link
+                      <Anchor
                         href={`https://vibe.molgeniscloud.org/?phenotypes=${getPhenotypes(
                           sample.data.person.individualId
                         )
@@ -104,7 +105,7 @@ export const SampleTable: Component<{
                           .join(",")}`}
                       >
                         <i class="fas fa-external-link" />
-                      </Link>
+                      </Anchor>
                     </Show>
                   </td>
                 </tr>

package/src/components/VariantInfoNestedTable.tsx

@@ -5,6 +5,8 @@ import { FieldMetadata, InfoMetadata } from "@molgenis/vip-report-vcf/src/Metada
 import { FieldHeader } from "./FieldHeader";
 import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
 import { Item } from "@molgenis/vip-report-api/src/Api";
+import { isCsqInfo } from "../utils/csqUtils";
+import { Link, useLocation } from "solid-app-router";
 
 function isNonEmptyNestedInfoItem(nestedInfoField: FieldMetadata, index: number, value: Value[] | Value[][]): boolean {
   const infoField = nestedInfoField.nested?.items[index];
@@ -43,15 +45,6 @@ export const VariantInfoNestedTable: Component<{
   record: Item<Record>;
   sample: { id: number; label: string } | null;
 }> = (props) => {
-  function getHref(field: InfoMetadata, consequenceIndex: number): string | undefined {
-    let href;
-    if (field.id === "Consequence" && field.parent?.id === "CSQ") {
-      href = `/variants/${props.record.id}/consequences/${consequenceIndex}`;
-      if (props.sample !== null) href = `/samples/${props.sample.id}` + href;
-    }
-    return href;
-  }
-
   return (
     <div style={{ display: "grid" }}>
       {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
@@ -76,7 +69,7 @@ export const VariantInfoNestedTable: Component<{
                     <>
                       {isNonEmptyNestedInfoItem(props.infoField, -1, props.infoValue) && (
                         <td>
-                          <Info info={value} infoMetadata={props.infoField} variant={props.record.data} />
+                          <Info info={{ value: value, record: props.record }} infoMeta={props.infoField} context={{}} />
                         </td>
                       )}
                     </>
@@ -93,12 +86,29 @@ export const VariantInfoNestedTable: Component<{
                           <>
                             {isNonEmptyNestedInfoItem(props.infoField, i(), props.infoValue) && (
                               <td>
-                                <Info
-                                  info={Array.isArray(value) ? value[i()] : null}
-                                  infoMetadata={infoFieldItem}
-                                  href={getHref(infoFieldItem, j())}
-                                  variant={props.record.data}
-                                />
+                                {isCsqInfo(infoFieldItem, "Consequence") ? (
+                                  <Link href={`${useLocation().pathname}/consequences/${j()}`}>
+                                    <Info
+                                      info={{
+                                        value: Array.isArray(value) ? value[i()] : null,
+                                        valueParent: value,
+                                        record: props.record,
+                                      }}
+                                      infoMeta={infoFieldItem}
+                                      context={{}}
+                                    />
+                                  </Link>
+                                ) : (
+                                  <Info
+                                    info={{
+                                      value: Array.isArray(value) ? value[i()] : null,
+                                      valueParent: value,
+                                      record: props.record,
+                                    }}
+                                    infoMeta={infoFieldItem}
+                                    context={{}}
+                                  />
+                                )}
                               </td>
                             )}
                           </>

package/src/components/VariantInfoTable.tsx

@@ -1,9 +1,13 @@
 import { Component, For } from "solid-js";
-import { FieldMetadataContainer, InfoContainer } from "@molgenis/vip-report-vcf/src/VcfParser";
+import { FieldMetadataContainer } from "@molgenis/vip-report-vcf/src/VcfParser";
+import { Info } from "./record/Info";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Item } from "@molgenis/vip-report-api/src/Api";
 
-export const VariantInfoTable: Component<{ infoValues: InfoContainer; infoFields: FieldMetadataContainer }> = (
-  props
-) => {
+export const VariantInfoTable: Component<{
+  infoFields: FieldMetadataContainer;
+  record: Item<Record>;
+}> = (props) => {
   return (
     <div style={{ display: "grid" }}>
       {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
@@ -12,13 +16,19 @@ export const VariantInfoTable: Component<{ infoValues: InfoContainer; infoFields
           <tbody>
             <For
               each={Object.values(props.infoFields).filter(
-                (info) => !info.nested && props.infoValues[info.id] !== undefined
+                (info) => !info.nested && props.record.data.n[info.id] !== undefined
               )}
             >
               {(infoField) => (
                 <tr>
                   <td>{infoField.id}</td>
-                  <td>{props.infoValues[infoField.id] as string}</td>
+                  <td>
+                    <Info
+                      info={{ value: props.record.data.n[infoField.id], record: props.record }}
+                      infoMeta={infoField}
+                      context={{}}
+                    />
+                  </td>
                 </tr>
               )}
             </For>

package/src/components/VariantSampleTable.tsx

@@ -3,14 +3,14 @@ import { Record, RecordSample } from "@molgenis/vip-report-vcf/src/Vcf";
 import { FieldMetadataContainer } from "@molgenis/vip-report-vcf/src/VcfParser";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { Format } from "./record/Format";
-import { Sample } from "@molgenis/vip-report-api/src/Api";
+import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
 import { FieldHeader } from "./FieldHeader";
 
 export const VariantSampleTable: Component<{
   formatFields: FieldMetadataContainer;
   samples: Sample[];
   sampleValues: RecordSample[];
-  record: Record;
+  record: Item<Record>;
 }> = (props) => {
   const sampleFields = createMemo((): FieldMetadata[] =>
     Object.keys(props.sampleValues[0]).map((fieldId) => props.formatFields[fieldId])
@@ -39,8 +39,8 @@ export const VariantSampleTable: Component<{
                           formatMetadata={formatField}
                           record={props.record}
                           isAbbreviate={false}
-                          allelicDepth={props.record.s[props.samples[i()].index]["AD"] as number[]}
-                          readDepth={props.record.s[props.samples[i()].index]["DP"] as number}
+                          allelicDepth={props.record.data.s[props.samples[i()].index]["AD"] as number[]}
+                          readDepth={props.record.data.s[props.samples[i()].index]["DP"] as number}
                         />
                       </td>
                     )}

package/src/components/VariantsSampleTable.tsx

@@ -3,7 +3,7 @@ import { Ref } from "./record/Ref";
 import { Chrom } from "./record/Chrom";
 import { Pos } from "./record/Pos";
 import { Link } from "solid-app-router";
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+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";
@@ -18,6 +18,7 @@ export const VariantsSampleTable: Component<{
   records: Item<Record>[];
   recordsMetadata: Metadata;
   nestedFields: FieldMetadata[];
+  htsFileMeta: HtsFileMetadata;
 }> = (props) => {
   const samples = createMemo(() => [props.item.data, ...props.pedigreeSamples.map((item) => item.data)]);
 
@@ -75,7 +76,7 @@ export const VariantsSampleTable: Component<{
                       </td>
                     )}
                   </For>
-                  <InfoCollapsablePane fields={props.nestedFields} record={record} />
+                  <InfoCollapsablePane fields={props.nestedFields} record={record} htsFileMeta={props.htsFileMeta} />
                 </tr>
               )}
             </For>

package/src/components/VariantsTable.tsx

@@ -8,11 +8,11 @@ import { Alt } from "./record/Alt";
 import { Qual } from "./record/Qual";
 import { Filter } from "./record/Filter";
 import { Info } from "./record/Info";
-import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { Link } from "solid-app-router";
-import { Item } from "@molgenis/vip-report-api/src/Api";
+import { HtsFileMetadata, Item } from "@molgenis/vip-report-api/src/Api";
 import { FieldHeader } from "./FieldHeader";
+import { InfoCollapsablePane } from "./InfoCollapsablePane";
 
 const computeRowspan = (recordsMetadata: Metadata) =>
   Object.values(recordsMetadata.info).find((field) => field.nested) !== undefined ? 2 : 1;
@@ -21,6 +21,7 @@ const computeColspan = (field: FieldMetadata) => (field.nested ? field.nested.it
 export const VariantsTable: Component<{
   records: Item<Record>[];
   recordsMetadata: Metadata;
+  htsFileMeta: HtsFileMetadata;
 }> = (props) => {
   const infoFields = () => Object.values(props.recordsMetadata.info);
   const infoFieldsNested = () => infoFields().filter((infoField) => infoField.nested);
@@ -93,33 +94,18 @@ export const VariantsTable: Component<{
                   <For each={infoFields()}>
                     {(infoField) =>
                       infoField.nested ? (
-                        <For each={infoField.nested.items}>
-                          {(infoFieldNested, i) => (
-                            <td>
-                              {infoField.number.count === 1 ? (
-                                <>
-                                  <Info
-                                    info={(record.data.n[infoField.id] as Value[])[i()]}
-                                    infoMetadata={infoFieldNested}
-                                    variant={record.data}
-                                  />
-                                </>
-                              ) : (
-                                <For each={record.data.n[infoField.id] as unknown as Value[][]}>
-                                  {(value, j) => (
-                                    <>
-                                      {j() !== 0 && <br />}
-                                      <Info info={value[i()]} infoMetadata={infoFieldNested} variant={record.data} />
-                                    </>
-                                  )}
-                                </For>
-                              )}
-                            </td>
-                          )}
-                        </For>
+                        <InfoCollapsablePane
+                          fields={infoField.nested.items}
+                          record={record}
+                          htsFileMeta={props.htsFileMeta}
+                        />
                       ) : (
                         <td>
-                          <Info info={record.data.n[infoField.id]} infoMetadata={infoField} variant={record.data} />
+                          <Info
+                            info={{ value: record.data.n[infoField.id], record: record }}
+                            infoMeta={infoField}
+                            context={props.htsFileMeta}
+                          />
                         </td>
                       )
                     }

package/src/components/filter/Filter.tsx

@@ -5,29 +5,36 @@ import { FilterIntegerVim } from "./FilterIntegerVim";
 import { FilterIntegerDp } from "./FilterIntegerDp";
 import { FilterIntegerVid } from "./FilterIntegerVid";
 import { QueryClause, Selector } 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 };
 
-export const Filter: Component<{
+export type FilterProps = {
   field: FieldMetadata;
   query?: QueryClause;
   onChange: (event: FilterChangeEvent) => void;
   onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
+};
+
+export const Filter: Component<FilterProps> = (props) => {
   return (
     <Switch>
       <Match when={props.field.id === "DP"}>
-        <FilterIntegerDp field={props.field} onChange={props.onChange} onClear={props.onClear} query={props.query} />
+        <FilterIntegerDp {...props} />
       </Match>
       <Match when={props.field.id === "VID"}>
-        <FilterIntegerVid field={props.field} onChange={props.onChange} onClear={props.onClear} query={props.query} />
+        <FilterIntegerVid {...props} />
       </Match>
       <Match when={props.field.id === "VIM"}>
-        <FilterIntegerVim field={props.field} onChange={props.onChange} onClear={props.onClear} query={props.query} />
+        <FilterIntegerVim {...props} />
+      </Match>
+      <Match when={isAnyCsqInfo(props.field, ["clinVar_CLNSIG", "clinVar_CLNSIGINCL"])}>
+        <FilterClinVar {...props} />
       </Match>
       <Match when={props.field.type === "CATEGORICAL"}>
-        <FilterCategorical field={props.field} onChange={props.onChange} onClear={props.onClear} query={props.query} />
+        <FilterCategorical {...props} />
       </Match>
     </Switch>
   );

package/src/components/filter/FilterCategorical.tsx

@@ -1,21 +1,28 @@
 import { Component, For } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { FilterProps } from "./Filter";
 import { selector } from "../../utils/query";
-import { QueryClause } from "@molgenis/vip-report-api/src/Api";
 
 export type CheckboxGroup = {
   [key: string]: boolean;
 };
 
-export const FilterCategorical: Component<{
-  field: FieldMetadata;
-  query?: QueryClause;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
+export type CategoryLabels = {
+  [key: string]: string;
+};
+
+export const FilterCategorical: Component<
+  FilterProps & {
+    labels?: CategoryLabels;
+  }
+> = (props) => {
   const group: CheckboxGroup = {};
+  if (props.query !== undefined) {
+    (props.query?.args as string[]).forEach((key) => {
+      group[key] = true;
+    });
+  }
+
   const nullValue = "__null";
 
   // enable null category for any_has_any case if someone asks for it (requires query to be composed)
@@ -46,7 +53,7 @@ export const FilterCategorical: Component<{
           <div class="control">
             <Checkbox
               value={category}
-              label={category}
+              label={props.labels ? props.labels[category] : category}
               checked={props.query && (props.query.args as string[]).includes(category)}
               onChange={onChange}
             />

package/src/components/filter/FilterClinVar.tsx

@@ -0,0 +1,21 @@
+import { Component } from "solid-js";
+import { FilterProps } from "./Filter";
+import { FilterCategorical } from "./FilterCategorical";
+
+export const FilterClinVar: Component<FilterProps> = (props) => {
+  return (
+    <FilterCategorical
+      field={props.field}
+      labels={{
+        Benign: "B",
+        Likely_benign: "LB",
+        Uncertain_significance: "VUS",
+        Likely_pathogenic: "LP",
+        Pathogenic: "P",
+        Conflicting_interpretations_of_pathogenicity: "Conflict",
+      }}
+      onChange={props.onChange}
+      onClear={props.onClear}
+    />
+  );
+};