@molgenis/vip-report-template 5.5.5 → 5.7.0

package/.nvmrc

@@ -0,0 +1 @@
+18.18.2

package/.travis.yml

@@ -1,8 +1,6 @@
 os: linux
 dist: focal
 language: node_js
-node_js:
-  - lts/*
 branches:
   only:
     - main

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "5.5.5",
+  "version": "5.7.0",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",
@@ -15,33 +15,33 @@
   },
   "license": "LGPL-3.0",
   "devDependencies": {
-    "@molgenis/vite-plugin-inline": "^1.0.14",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "@vitest/coverage-v8": "^0.34.4",
+    "@molgenis/vite-plugin-inline": "^1.0.19",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "@vitest/coverage-v8": "^1.0.1",
     "bulma": "^0.9.4",
-    "eslint": "^8.49.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-solid": "^0.13.0",
     "husky": "^8.0.3",
-    "jsdom": "^22.1.0",
-    "prettier": "^3.0.3",
-    "sass": "^1.66.1",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vite-plugin-solid": "^2.7.0",
-    "vitest": "^0.34.4"
+    "jsdom": "^23.0.1",
+    "prettier": "^3.1.0",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.6",
+    "vite-plugin-solid": "^2.7.2",
+    "vitest": "^1.0.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@molgenis/vip-report-api": "^4.4.4",
-    "@molgenis/vip-report-vcf": "^1.4.4",
-    "@solidjs/router": "^0.8.3",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@molgenis/vip-report-api": "^4.7.0",
+    "@molgenis/vip-report-vcf": "^1.7.0",
+    "@solidjs/router": "^0.9.1",
     "base64-js": "^1.5.1",
-    "igv": "^2.15.10",
-    "solid-js": "^1.7.11"
+    "igv": "^2.15.11",
+    "solid-js": "^1.8.7"
   },
   "lint-staged": {
     "src/**/*.{tsx,ts}": [

package/src/App.tsx

@@ -17,6 +17,7 @@ import api from "./Api";
 import { DatasetDropdown } from "./components/DatasetDropdown";
 import SampleVariantConsequenceData from "./views/data/SampleVariantConsequenceData";
 import VariantConsequenceData from "./views/data/VariantConsequenceData";
+import { Help } from "./views/Help";
 
 const App: Component = () => {
   const navigate = useNavigate();
@@ -57,6 +58,11 @@ const App: Component = () => {
             </Link>
             {api.isDatasetSupport() && <DatasetDropdown />}
           </div>
+          <div class="navbar-end">
+            <Link class="navbar-item" href="/help">
+              Help
+            </Link>
+          </div>
         </div>
       </nav>
       <div class="container is-fluid">
@@ -91,6 +97,7 @@ const App: Component = () => {
                 </Route>
               </Route>
             </Route>
+            <Route path="/help" element={<Help />} />
           </Routes>
         </ErrorBoundary>
       </div>

package/src/components/filter/Filter.tsx

@@ -9,6 +9,9 @@ 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";
 
 export type FilterProps = {
   field: FieldMetadata;
@@ -31,12 +34,21 @@ export const Filter: Component<FilterProps> = (props) => {
         <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>

package/src/components/filter/FilterCategorical.tsx

@@ -17,6 +17,7 @@ export const FilterCategorical: Component<
   }
 > = (props) => {
   const group: CheckboxGroup = {};
+  const label = () => (props.field.label !== undefined ? props.field.label : props.field.id);
   if (props.query !== undefined) {
     (props.query?.args as string[]).forEach((key) => {
       group[key] = true;
@@ -49,26 +50,32 @@ export const FilterCategorical: Component<
 
   return (
     <>
-      <For each={props.field.categories}>
-        {(category) => (
-          <div class="control">
-            <Checkbox
-              value={category}
-              label={props.labels ? props.labels[category] : category}
-              checked={props.query && (props.query.args as (string | null)[]).includes(category)}
-              onChange={onChange}
-            />
-          </div>
+      <p class="has-text-weight-semibold">
+        {props.field.description ? <abbr title={props.field.description}>{label()}</abbr> : <span>{label()}</span>}
+      </p>
+
+      <div class="field">
+        <For each={props.field.categories}>
+          {(category) => (
+            <div class="control">
+              <Checkbox
+                value={category}
+                label={props.labels ? props.labels[category] : category}
+                checked={props.query && (props.query.args as (string | null)[]).includes(category)}
+                onChange={onChange}
+              />
+            </div>
+          )}
+        </For>
+        {includeNullCategory() && (
+          <Checkbox
+            value={nullValue}
+            label="No value"
+            checked={props.query && (props.query.args as (string | null)[]).includes(null)}
+            onChange={onChange}
+          />
         )}
-      </For>
-      {includeNullCategory() && (
-        <Checkbox
-          value={nullValue}
-          label="No value"
-          checked={props.query && (props.query.args as (string | null)[]).includes(null)}
-          onChange={onChange}
-        />
-      )}
+      </div>
     </>
   );
 };

package/src/components/filter/FilterGene.tsx

@@ -0,0 +1,34 @@
+import { Component } from "solid-js";
+import { FilterProps } from "./Filter";
+import { Checkbox, CheckboxEvent } from "../Checkbox";
+import { selector, selectorKey } from "../../utils/query";
+
+export const FilterGene: Component<FilterProps> = (props) => {
+  const onFilterChange = (event: CheckboxEvent) => {
+    const fieldSelector = selector(props.field);
+    if (event.checked) {
+      props.onChange({
+        key: selectorKey(fieldSelector),
+        query: {
+          selector: fieldSelector,
+          operator: "any_has_any",
+          args: ["1"],
+        },
+      });
+    } else props.onClear({ key: selectorKey(fieldSelector) });
+  };
+
+  return (
+    <>
+      <p class="has-text-weight-semibold">{<span>Various</span>}</p>
+      <div class="field">
+        <Checkbox
+          desc="Gene is associated with incomplete penetrance"
+          label="Inc. Penetrance"
+          checked={props.query && props.query.args !== undefined}
+          onChange={onFilterChange}
+        />
+      </div>
+    </>
+  );
+};

package/src/components/filter/FilterHpo.tsx

@@ -21,6 +21,7 @@ export const FilterHpo: Component<
   const group: CheckboxGroup = {};
   const hpoSelector = selector(props.field);
   const csqMeta = props.field.parent;
+  const label = () => (props.field.label !== undefined ? props.field.label : props.field.id);
   let gadoHcChecked = false;
   let gadoLcChecked = false;
   let hpoValues: (string | null)[] = [];
@@ -118,38 +119,43 @@ export const FilterHpo: Component<
   };
   return (
     <>
-      <For each={props.field.categories}>
-        {(category) => (
+      <p class="has-text-weight-semibold">
+        {props.field.description ? <abbr title={props.field.description}>{label()}</abbr> : <span>{label()}</span>}
+      </p>
+      <div class="field">
+        <For each={props.field.categories}>
+          {(category) => (
+            <div class="control">
+              <Checkbox
+                value={category}
+                label={props.labels ? props.labels[category] : category}
+                checked={hpoValues && hpoValues.includes(category)}
+                onChange={onChange}
+              />
+            </div>
+          )}
+        </For>
+        <Show when={gadoMeta !== null}>
           <div class="control">
             <Checkbox
-              value={category}
-              label={props.labels ? props.labels[category] : category}
-              checked={hpoValues && hpoValues.includes(category)}
+              value="gado_hc"
+              label="GADO high"
+              desc="Gene predicted to have a relation with phenotypes of the proband (phenotypes of other samples are ignored!) with high confidence (Z-Score above 5)."
+              checked={gadoHcChecked}
               onChange={onChange}
             />
           </div>
-        )}
-      </For>
-      <Show when={gadoMeta !== null}>
-        <div class="control">
-          <Checkbox
-            value="gado_hc"
-            label="GADO high"
-            desc="Gene predicted to have a relation with phenotypes of the proband (phenotypes of other samples are ignored!) with high confidence (Z-Score above 5)."
-            checked={gadoHcChecked}
-            onChange={onChange}
-          />
-        </div>
-        <div class="control">
-          <Checkbox
-            value="gado_lc"
-            label="GADO low"
-            desc="Gene predicted to have a relation with phenotypes of the proband (phenotypes of other samples are ignored!) with low confidence (Z-Score above 3 but below 5)."
-            checked={gadoLcChecked}
-            onChange={onChange}
-          />
-        </div>
-      </Show>
+          <div class="control">
+            <Checkbox
+              value="gado_lc"
+              label="GADO low"
+              desc="Gene predicted to have a relation with phenotypes of the proband (phenotypes of other samples are ignored!) with low confidence (Z-Score above 3 but below 5)."
+              checked={gadoLcChecked}
+              onChange={onChange}
+            />
+          </div>
+        </Show>
+      </div>
     </>
   );
 };

package/src/components/filter/FilterInheritance.tsx

@@ -17,11 +17,13 @@ export type FilterInheritanceProps = {
 export const FilterInheritance: Component<FilterInheritanceProps> = (props) => {
   const VIM_TRUE = "VIM_true";
   const VIM_MISSING = "VIM_missing";
-  const VID = "VID";
+  const VID = "VID_true";
+  const VID_MISSING = "VID_missing";
 
   let isVimMissingChecked = false;
   let isVimTrueChecked = false;
-  let isVidChecked = false;
+  let isVidTrueChecked = false;
+  let isVidMissingChecked = false;
 
   const vimFieldSelector: Selector = ["s", props.sample.data.index, ...selector(props.vimField)];
   const vidFieldSelector: Selector = ["s", props.sample.data.index, ...selector(props.vidField)];
@@ -37,7 +39,12 @@ export const FilterInheritance: Component<FilterInheritanceProps> = (props) => {
       ) {
         isVimMissingChecked = true;
       } else if (selectorKeyValue === selectorKey(vidFieldSelector) && query.args === 1) {
-        isVidChecked = true;
+        isVidTrueChecked = true;
+      } else if (
+        selectorKeyValue === selectorKey(vidFieldSelector) &&
+        (query.args === null || query.args === undefined)
+      ) {
+        isVidMissingChecked = true;
       }
     });
   }
@@ -71,15 +78,29 @@ export const FilterInheritance: Component<FilterInheritanceProps> = (props) => {
     } else if (isVimMissingChecked && event.value === VIM_MISSING && !event.checked) {
       isVimMissingChecked = false;
     }
-    if ((event.value === VID && event.checked) || (isVidChecked && event.value !== VID)) {
+    if ((event.value === VID && event.checked) || (isVidTrueChecked && event.value !== VID)) {
       queries.push({
         selector: vidFieldSelector,
         operator: "==",
         args: 1,
       });
-      isVidChecked = true;
-    } else if (isVidChecked && event.value === VID && !event.checked) {
-      isVidChecked = false;
+      isVidTrueChecked = true;
+    } else if ((event.value === VID_MISSING && event.checked) || (isVidMissingChecked && event.value !== VID_MISSING)) {
+      queries.push(
+        {
+          selector: vidFieldSelector,
+          operator: "==",
+          args: null,
+        },
+        {
+          selector: vidFieldSelector,
+          operator: "==",
+          args: undefined,
+        },
+      );
+      isVimMissingChecked = true;
+    } else if (isVidTrueChecked && event.value === VID && !event.checked) {
+      isVidTrueChecked = false;
     }
     if (queries.length > 0) {
       props.onChange({
@@ -108,7 +129,7 @@ export const FilterInheritance: Component<FilterInheritanceProps> = (props) => {
       <div class="control">
         <Checkbox
           value={VIM_MISSING}
-          label="Match: Possible"
+          label="Match: Potential"
           desc="Genotypes, affected statuses match but gene inheritance pattern is unknown (can include de novo variants)."
           checked={isVimMissingChecked}
           onChange={onFilterChange}
@@ -123,7 +144,16 @@ export const FilterInheritance: Component<FilterInheritanceProps> = (props) => {
 On the X chromosome:
 - Female proband: same as autosomes.
 - Male proband: Mother does not have the variant, or mother genotype missing."
-          checked={isVidChecked}
+          checked={isVidTrueChecked}
+          onChange={onFilterChange}
+        />
+      </div>
+      <div class="control">
+        <Checkbox
+          value={VID_MISSING}
+          label="De novo: Potential"
+          desc="Variant could be denovo but some genotype data of the sample or parents is missing."
+          checked={isVidTrueChecked}
           onChange={onFilterChange}
         />
       </div>

package/src/components/filter/FilterIntegerDp.tsx

@@ -11,9 +11,24 @@ export const FilterIntegerDp: Component<FilterProps> = (props) => {
       props.onChange({
         key: selectorKey(fieldSelector),
         query: {
-          selector: fieldSelector,
-          operator: ">=",
-          args: 20,
+          operator: "or",
+          args: [
+            {
+              selector: fieldSelector,
+              operator: ">=",
+              args: 20,
+            },
+            {
+              selector: fieldSelector,
+              operator: "==",
+              args: null,
+            },
+            {
+              selector: fieldSelector,
+              operator: "==",
+              args: undefined,
+            },
+          ],
         },
       });
     else props.onClear({ key: selectorKey(fieldSelector) });
@@ -24,7 +39,7 @@ export const FilterIntegerDp: Component<FilterProps> = (props) => {
       <Checkbox
         desc="Sequencing depth >= 20"
         label="Depth >= 20"
-        checked={props.query && props.query.args === 20}
+        checked={props.query && props.query.args !== undefined}
         onChange={onFilterChange}
       />
     </div>

package/src/components/filter/FilterIntegerGq.tsx

@@ -11,9 +11,24 @@ export const FilterIntegerGq: Component<FilterProps> = (props) => {
       props.onChange({
         key: selectorKey(fieldSelector),
         query: {
-          selector: fieldSelector,
-          operator: ">=",
-          args: 20,
+          operator: "or",
+          args: [
+            {
+              selector: fieldSelector,
+              operator: ">=",
+              args: 20,
+            },
+            {
+              selector: fieldSelector,
+              operator: "==",
+              args: null,
+            },
+            {
+              selector: fieldSelector,
+              operator: "==",
+              args: undefined,
+            },
+          ],
         },
       });
     else props.onClear({ key: selectorKey(fieldSelector) });
@@ -24,7 +39,7 @@ export const FilterIntegerGq: Component<FilterProps> = (props) => {
       <Checkbox
         desc="Genotype quality >= 20"
         label="GT quality >= 20"
-        checked={props.query && props.query.args === 20}
+        checked={props.query && props.query.args !== undefined}
         onChange={onFilterChange}
       />
     </div>

package/src/components/filter/FilterVI.tsx

@@ -0,0 +1,68 @@
+import { Component, For } from "solid-js";
+import { Checkbox, CheckboxEvent } from "../Checkbox";
+import { FilterProps } from "./Filter";
+import { selector, selectorKey } from "../../utils/query";
+import { Item, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
+
+export type CheckboxGroup = {
+  [key: string]: boolean;
+};
+
+export type CategoryDescriptions = {
+  [key: string]: string;
+};
+
+const labels: CategoryDescriptions = {
+  AR_C: "Autosomal Recessive: Compound Hetrozygote",
+  AD_IP: "Autosomal Dominant: Incomplete Penentrance",
+  AR: "Autosomal Recessive",
+  AD: "Autosomal Dominant",
+  XLD: "X-Linked Dominant",
+  XLR: "X-Linked Recessive",
+};
+
+export const FilterVI: Component<FilterProps> = (props) => {
+  const group: CheckboxGroup = {};
+  if (props.query !== undefined) {
+    (props.query?.args as string[]).forEach((key) => {
+      group[key] = true;
+    });
+  }
+
+  // enable null category for any_has_any case if someone asks for it (requires query to be composed)
+  const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
+  const onChange = (event: CheckboxEvent) => {
+    group[event.value] = event.checked;
+    const values = Object.keys(group).filter((key) => group[key]);
+    if (values.length > 0) {
+      props.onChange({
+        key: selectorKey(fieldSelector),
+        query: {
+          selector: fieldSelector,
+          operator: "has_any",
+          args: values,
+        },
+      });
+    } else {
+      props.onClear({ key: selectorKey(fieldSelector) });
+    }
+  };
+
+  return (
+    <>
+      <For each={props.field.categories}>
+        {(category) => (
+          <div class="control">
+            <Checkbox
+              value={category}
+              label={category}
+              desc={labels[category] !== undefined ? labels[category] : category}
+              checked={props.query && (props.query.args as (string | null)[]).includes(category)}
+              onChange={onChange}
+            />
+          </div>
+        )}
+      </For>
+    </>
+  );
+};