@molgenis/vip-report-template 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "3.0.0",
+  "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/components/Anchor.tsx

@@ -1,12 +1,15 @@
-import { Component, JSXElement } from "solid-js";
+import { ParentComponent, Show } from "solid-js";
 
-export const Anchor: Component<{
-  href: string;
-  value: string | number | JSXElement;
+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/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,7 @@
 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) {
@@ -103,8 +103,9 @@ export const SampleTable: Component<{
                         )
                           .map((feature) => feature.type.id)
                           .join(",")}`}
-                        value={<i class="fas fa-external-link" />}
-                      />
+                      >
+                        <i class="fas fa-external-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,11 +1,12 @@
 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<{
   infoFields: FieldMetadataContainer;
-  record: Record;
+  record: Item<Record>;
 }> = (props) => {
   return (
     <div style={{ display: "grid" }}>
@@ -15,14 +16,18 @@ export const VariantInfoTable: Component<{
           <tbody>
             <For
               each={Object.values(props.infoFields).filter(
-                (info) => !info.nested && props.record.n[info.id] !== undefined
+                (info) => !info.nested && props.record.data.n[info.id] !== undefined
               )}
             >
               {(infoField) => (
                 <tr>
                   <td>{infoField.id}</td>
                   <td>
-                    <Info variant={props.record} info={props.record.n[infoField.id]} infoMetadata={infoField}></Info>
+                    <Info
+                      info={{ value: props.record.data.n[infoField.id], record: props.record }}
+                      infoMeta={infoField}
+                      context={{}}
+                    />
                   </td>
                 </tr>
               )}

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,38 +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}
-                                        href={`/variants/${record.id}/consequences/${j()}`}
-                                      />
-                                    </>
-                                  )}
-                                </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,32 +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) => {
-  const onChange = (event: FilterChangeEvent) => props.onChange(event);
-  const onClear = (event: FilterClearEvent) => props.onClear(event);
+};
 
+export const Filter: Component<FilterProps> = (props) => {
   return (
     <Switch>
       <Match when={props.field.id === "DP"}>
-        <FilterIntegerDp field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
+        <FilterIntegerDp {...props} />
       </Match>
       <Match when={props.field.id === "VID"}>
-        <FilterIntegerVid field={props.field} onChange={onChange} onClear={onClear} query={props.query} />
+        <FilterIntegerVid {...props} />
       </Match>
       <Match when={props.field.id === "VIM"}>
-        <FilterIntegerVim field={props.field} onChange={onChange} onClear={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={onChange} onClear={onClear} query={props.query} />
+        <FilterCategorical {...props} />
       </Match>
     </Switch>
   );

package/src/components/filter/FilterCategorical.tsx

@@ -1,20 +1,21 @@
 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) => {
@@ -52,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}
+    />
+  );
+};

package/src/components/filter/FilterIntegerDp.tsx

@@ -1,16 +1,9 @@
 import { Component } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { FilterProps } from "./Filter";
 import { Checkbox, CheckboxEvent } from "../Checkbox";
 import { selector } from "../../utils/query";
-import { QueryClause } from "@molgenis/vip-report-api/src/Api";
 
-export const FilterIntegerDp: Component<{
-  field: FieldMetadata;
-  query?: QueryClause;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
+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) });

package/src/components/filter/FilterIntegerVid.tsx

@@ -1,16 +1,9 @@
 import { Component } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { FilterProps } from "./Filter";
 import { Checkbox, CheckboxEvent } from "../Checkbox";
 import { selector } from "../../utils/query";
-import { QueryClause } from "@molgenis/vip-report-api/src/Api";
 
-export const FilterIntegerVid: Component<{
-  field: FieldMetadata;
-  query?: QueryClause;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
+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) });

package/src/components/filter/FilterIntegerVim.tsx

@@ -1,16 +1,9 @@
 import { Component } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { FilterChangeEvent, FilterClearEvent } from "./Filter";
+import { FilterProps } from "./Filter";
 import { Checkbox, CheckboxEvent } from "../Checkbox";
 import { selector } from "../../utils/query";
-import { QueryClause } from "@molgenis/vip-report-api/src/Api";
 
-export const FilterIntegerVim: Component<{
-  field: FieldMetadata;
-  query?: QueryClause;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
+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) });

package/src/components/filter/InfoFilter.tsx

@@ -1,14 +1,8 @@
 import { Component } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Filter, FilterChangeEvent, FilterClearEvent } from "./Filter";
-import { QueryClause, SelectorPart } from "@molgenis/vip-report-api/src/Api";
+import { Filter, FilterChangeEvent, FilterClearEvent, FilterProps } from "./Filter";
+import { SelectorPart } from "@molgenis/vip-report-api/src/Api";
 
-export const InfoFilter: Component<{
-  field: FieldMetadata;
-  query?: QueryClause;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
+export const InfoFilter: Component<FilterProps> = (props) => {
   const label = () => (props.field.label !== undefined ? props.field.label : props.field.id);
 
   const onChange = (event: FilterChangeEvent) => {

package/src/components/record/Format.tsx

@@ -5,22 +5,31 @@ import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { Field } from "./field/Field";
 import { GenotypeField } from "./format/GenotypeField";
 import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Item } from "@molgenis/vip-report-api/src/Api";
 
 export const Format: Component<{
   format: RecordSampleType;
   formatMetadata: FieldMetadata;
-  record: Record;
+  record: Item<Record>;
   isAbbreviate: boolean;
   allelicDepth: number[] | undefined;
   readDepth: number | undefined;
 }> = (props) => {
   return (
-    <Switch fallback={<Field info={props.format as Value | Value[]} infoMetadata={props.formatMetadata} />}>
+    <Switch
+      fallback={
+        <Field
+          info={{ value: props.format as Value | Value[], record: props.record }}
+          infoMeta={props.formatMetadata}
+          context={{}}
+        />
+      }
+    >
       <Match when={props.formatMetadata.id === "GT"}>
         <GenotypeField
           genotype={props.format as Genotype}
-          refAllele={props.record.r}
-          altAlleles={props.record.a}
+          refAllele={props.record.data.r}
+          altAlleles={props.record.data.a}
           isAbbreviate={props.isAbbreviate}
           allelicDepth={props.allelicDepth}
           readDepth={props.readDepth}