@molgenis/vip-report-template 7.1.3 → 8.0.0

package/.gitattributes

@@ -1,4 +1,6 @@
 *.* text eol=lf
 *.cram.blob binary
 *.cram.crai.blob binary
-*.gz.blob binary
+*.gz.blob binary
+*.wasm.blob binary
+*.db.blob binary

package/README.md

@@ -158,6 +158,19 @@ The following composed filters are available:
 | vipC             | `INFO/CSQ/VIPC`, parameter `vcf.filter.consequences=true`, `vcf.filter.classes` > 0                |          | Filter on the VIP classification value stored in INFO/CSQ/VIPC, but only includes categories defined in the VIP configuration parameter `vcf.filter.classes`                |
 | vipCS            | `FORMAT/VIPC_S`, `sample` exists, `sample.proband=true`, parameter `vcf.filter.sample_classes` > 0 |          | Filter on the VIP sample classification value stored in FORMAT/VIPC_S, but only includes categories defined in the VIP configuration parameter `vcf.filter_samples.classes` |
 
+##### Default values
+Filters can be given a default value using the "defaultValue" property.
+
+The defaultValue is a string that should be properly formatted for the type of filters / values:
+
+| filter / value type | format                                                                                                                                                                                          | examples                    |
+|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------|
+| string              | any string.                                                                                                                                                                                     | "test"                      |
+| interval (numbers)  | comma separated string with a from and to value, if no comma is provided the value is used as the 'from' value. If only the 'to' value should be provided the string should start with a comma. | "1,100", ",100", "1"        |
+| locus               | the format for this filter is: 'contig:form-to' or a string providing only the contig                   .                                                                                       | "chr1:1-10000000", "chrX"   |
+| categorical         | comma separated string with the id's of the categories, '__null' is used for the 'unspecified' checkbox.                                                                                        | "LP,P", "cat1,cat2,__null"  |
+| flag / boolean      | this is a special case of 'categorical' with categories 'true', 'false' and optionally '__null'                                                                                                 | "true", "true,false,__null" |
+
 #### Sorts
 
 Via this section available sort options and the default sort of the different views can be configured.

package/eslint.config.mjs

@@ -4,8 +4,13 @@ import solid from "eslint-plugin-solid/configs/typescript";
 import tseslint from "typescript-eslint";
 
 export default [
+  {
+    ignores: [
+      "**/*.precompiled.ts"
+    ]
+  },
   { files: ["**/*.{js,mjs,cjs,ts,tsx}"] },
   pluginJs.configs.recommended,
   solid,
   ...tseslint.configs.recommended,
-];
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "7.1.3",
+  "version": "8.0.0",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "license": "LGPL-3.0",
   "devDependencies": {
@@ -19,20 +19,21 @@
     "sass": "^1.85.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.24.0",
-    "vite": "^6.1.0",
+    "vite": "^6.4.1",
     "vite-plugin-solid": "^2.11.1",
     "vitest": "^3.0.5"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@molgenis/vip-report-api": "^6.2.3",
-    "@molgenis/vip-report-vcf": "^3.1.1",
+    "@molgenis/vip-report-api": "^7.0.1",
+    "@molgenis/vip-report-vcf": "^4.0.2",
     "@solidjs/router": "^0.15.3",
     "ajv": "^8.17.1",
     "base64-js": "^1.5.1",
     "igv": "^3.1.4",
-    "solid-js": "^1.9.4"
+    "solid-js": "^1.9.4",
+    "sql.js": "^1.13.0"
   },
   "lint-staged": {
     "src/**/*.{tsx,ts}": [

package/scripts/validateConfig/README.txt

@@ -0,0 +1,5 @@
+If the schema is updated, either the schema.ts or its dependencies, run the following to generate a new validator:
+"npx tsx .\scripts\validateConfig\createSchema.ts"
+and
+"npx tsx .\scripts\validateConfig\compileValidator.ts"
+this will create a new version of the validator in: src/utils/config/configValidator.precompiled.ts

package/scripts/validateConfig/compileValidator.ts

@@ -0,0 +1,17 @@
+import Ajv from "ajv/dist/jtd";
+import { readFileSync, writeFileSync } from "fs";
+
+const schema = JSON.parse(readFileSync("schemaConfigJson.jtd.json", "utf-8"));
+const ajv = new Ajv();
+const validateCode = ajv.compile(schema).toString();
+
+writeFileSync(
+  "src/utils/config/configValidator.precompiled.ts",
+  `import { ValidateFunction } from "ajv/dist/jtd";
+import type { ConfigJson } from "../../types/config";
+
+const validate: ValidateFunction<ConfigJson> = ${validateCode};
+export default validate;`
+);
+
+console.log("Wrote validateConfig.precompiled.js");

package/scripts/validateConfig/createSchema.ts

@@ -0,0 +1,6 @@
+import { writeFileSync } from "fs";
+import { schema } from "./schema"; // adjust the path if needed
+
+// Write the JSON schema to file
+writeFileSync("schemaConfigJson.jtd.json", JSON.stringify(schema, null, 2));
+console.log("Wrote schemaConfigJson.jtd.json");

package/scripts/validateConfig/schema.ts

@@ -0,0 +1,370 @@
+// noinspection TypeScriptUnresolvedReference
+
+import { JTDSchemaType } from "ajv/dist/types/jtd-schema";
+import {
+  ConfigJson,
+  ConfigJsonField,
+  ConfigJsonFilter,
+  ConfigJsonRecordsPerPageOption,
+  ConfigJsonSort,
+  ConfigJsonSortOrder, ConfigJsonVariant, ConfigJsonVariantConsequence,
+  ConfigJsonVariants,
+  ConfigJsonVip,
+  ConfigJsonVipParams,
+  ConfigJsonVipParamsCram,
+  ConfigJsonVipParamsVcf
+} from "../../src/types/config";
+
+// allow additional properties so we can extend config in vip without updating vip-report-template
+const schemaConfigJsonVipParamsVcf: JTDSchemaType<ConfigJsonVipParamsVcf> = {
+  properties: {
+    filter: {
+      properties: { classes: { type: "string" }, consequences: { type: "boolean" } },
+      additionalProperties: true,
+    },
+    filter_samples: {
+      properties: { classes: { type: "string" } },
+      additionalProperties: true,
+    },
+  },
+  additionalProperties: true,
+};
+
+// allow additional properties so we can extend config in vip without updating vip-report-template
+const schemaConfigJsonVipParamsCram: JTDSchemaType<ConfigJsonVipParamsCram> = {
+  properties: {
+    call_snv: { type: "boolean" },
+    call_str: { type: "boolean" },
+    call_sv: { type: "boolean" },
+    call_cnv: { type: "boolean" },
+  },
+  additionalProperties: true,
+};
+
+// allow additional properties so we can extend config in vip without updating vip-report-template
+const schemaConfigJsonVipParams: JTDSchemaType<ConfigJsonVipParams> = {
+  properties: {
+    vcf: schemaConfigJsonVipParamsVcf,
+  },
+  optionalProperties: {
+    cram: schemaConfigJsonVipParamsCram,
+  },
+  additionalProperties: true,
+};
+
+const schemaConfigJsonVip: JTDSchemaType<ConfigJsonVip> = {
+  properties: {
+    filter_field: {
+      properties: { type: { enum: ["genotype"] }, name: { type: "string" } },
+      optionalProperties: { label: { type: "string" }, description: { type: "string" } },
+    },
+    params: schemaConfigJsonVipParams,
+  },
+};
+
+const schemaConfigJsonField: JTDSchemaType<ConfigJsonField> = {
+  discriminator: "type",
+  mapping: {
+    fixed: {
+      properties: {
+        name: { enum: ["chrom", "pos", "id", "ref", "alt", "qual", "filter"] },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+      },
+    },
+    info: {
+      properties: {
+        name: { type: "string" },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+      },
+    },
+    format: {
+      properties: {
+        name: { type: "string" },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+      },
+    },
+    genotype: {
+      properties: {
+        name: { type: "string" },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+      },
+    },
+    composed: {
+      properties: {
+        name: {
+          enum: [
+            "clinVar",
+            "gene",
+            "genotype",
+            "genotype_maternal",
+            "genotype_paternal",
+            "gnomAdAf",
+            "hpo",
+            "inheritancePattern",
+            "locus",
+            "vipC",
+            "vipCS",
+            "vkgl",
+          ],
+        },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+      },
+    },
+    group: {
+      // TODO deduplicate code, see mappings listed above
+      properties: {
+        fields: {
+          elements: {
+            discriminator: "type",
+            mapping: {
+              fixed: {
+                properties: {
+                  name: { enum: ["chrom", "pos", "id", "ref", "alt", "qual", "filter"] },
+                },
+                optionalProperties: {
+                  label: { type: "string" },
+                  description: { type: "string" },
+                },
+              },
+              info: {
+                properties: {
+                  name: { type: "string" },
+                },
+                optionalProperties: {
+                  label: { type: "string" },
+                  description: { type: "string" },
+                },
+              },
+              format: {
+                properties: {
+                  name: { type: "string" },
+                },
+                optionalProperties: {
+                  label: { type: "string" },
+                  description: { type: "string" },
+                },
+              },
+              genotype: {
+                properties: {
+                  name: { type: "string" },
+                },
+                optionalProperties: {
+                  label: { type: "string" },
+                  description: { type: "string" },
+                },
+              },
+              composed: {
+                properties: {
+                  name: {
+                    enum: [
+                      "clinVar",
+                      "gene",
+                      "genotype",
+                      "gnomAdAf",
+                      "hpo",
+                      "inheritancePattern",
+                      "locus",
+                      "ref",
+                      "vipC",
+                      "vipCS",
+                      "vkgl",
+                    ],
+                  },
+                },
+                optionalProperties: {
+                  label: { type: "string" },
+                  description: { type: "string" },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const schemaConfigJsonFilter: JTDSchemaType<ConfigJsonFilter> = {
+  discriminator: "type",
+  mapping: {
+    fixed: {
+      properties: {
+        name: { enum: ["chrom", "pos", "id", "ref", "alt", "qual", "filter"] },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+        defaultValue: { type: "string" }
+      },
+    },
+    info: {
+      properties: {
+        name: { type: "string" },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+        defaultValue: { type: "string" }
+      },
+    },
+    format: {
+      properties: {
+        name: { type: "string" },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+        defaultValue: { type: "string" }
+      },
+    },
+    genotype: {
+      properties: {
+        name: { type: "string" },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+        defaultValue: { type: "string" }
+      },
+    },
+    composed: {
+      properties: {
+        name: {
+          enum: ["allelicImbalance", "deNovo", "hpo", "inheritanceMatch", "locus", "vipC", "vipCS"],
+        },
+      },
+      optionalProperties: {
+        label: { type: "string" },
+        description: { type: "string" },
+        defaultValue: { type: "string" }
+      },
+    },
+  },
+};
+
+const schemaConfigJsonSortOrder: JTDSchemaType<ConfigJsonSortOrder> = {
+  properties: {
+    direction: { enum: ["asc", "desc"] },
+    field: schemaConfigJsonField,
+  },
+};
+
+const schemaConfigJsonSort: JTDSchemaType<ConfigJsonSort> = {
+  properties: {
+    selected: { type: "boolean" },
+    orders: {
+      elements: schemaConfigJsonSortOrder,
+    },
+  },
+};
+
+const schemaConfigJsonRecordsPerPageOption: JTDSchemaType<ConfigJsonRecordsPerPageOption> = {
+  properties: {
+    number: { type: "uint16" },
+  },
+  optionalProperties: {
+    selected: { type: "boolean" },
+  },
+};
+
+const schemaConfigJsonVariants: JTDSchemaType<ConfigJsonVariants> = {
+  properties: {
+    cells: {
+      optionalProperties: {
+        all: { elements: schemaConfigJsonField },
+        snv: { elements: schemaConfigJsonField },
+        str: { elements: schemaConfigJsonField },
+        sv: { elements: schemaConfigJsonField },
+      },
+    },
+  },
+  optionalProperties: {
+    filters: {
+      optionalProperties: {
+        all: { elements: schemaConfigJsonFilter },
+        snv: { elements: schemaConfigJsonFilter },
+        str: { elements: schemaConfigJsonFilter },
+        sv: { elements: schemaConfigJsonFilter },
+      },
+    },
+    sorts: {
+      optionalProperties: {
+        all: { elements: schemaConfigJsonSort },
+        snv: { elements: schemaConfigJsonSort },
+        str: { elements: schemaConfigJsonSort },
+        sv: { elements: schemaConfigJsonSort },
+      },
+    },
+    recordsPerPage: {
+      optionalProperties: {
+        all: { elements: schemaConfigJsonRecordsPerPageOption },
+        snv: { elements: schemaConfigJsonRecordsPerPageOption },
+        str: { elements: schemaConfigJsonRecordsPerPageOption },
+        sv: { elements: schemaConfigJsonRecordsPerPageOption },
+      },
+    },
+  },
+};
+
+const schemaConfigJsonVariant: JTDSchemaType<ConfigJsonVariant> = {
+  properties: {
+    cells: {
+      optionalProperties: {
+        all: { elements: schemaConfigJsonField },
+        snv: { elements: schemaConfigJsonField },
+        str: { elements: schemaConfigJsonField },
+        sv: { elements: schemaConfigJsonField },
+      },
+    },
+  },
+  optionalProperties: {
+    sample_cells: {
+      optionalProperties: {
+        all: { elements: schemaConfigJsonField },
+        snv: { elements: schemaConfigJsonField },
+        str: { elements: schemaConfigJsonField },
+        sv: { elements: schemaConfigJsonField },
+      },
+    },
+  },
+};
+
+const schemaConfigJsonVariantConsequence: JTDSchemaType<ConfigJsonVariantConsequence> = {
+  optionalProperties: {
+    sample_cells: {
+      optionalProperties: {
+        all: { elements: schemaConfigJsonField },
+        snv: { elements: schemaConfigJsonField },
+        str: { elements: schemaConfigJsonField },
+        sv: { elements: schemaConfigJsonField },
+      },
+    },
+  },
+};
+
+export const schema: JTDSchemaType<ConfigJson> = {
+  properties: {
+    vip: schemaConfigJsonVip,
+    sample_variants: schemaConfigJsonVariants,
+    variants: schemaConfigJsonVariants,
+    sample_variant: schemaConfigJsonVariant,
+    variant: schemaConfigJsonVariant,
+    sample_variant_consequence: schemaConfigJsonVariantConsequence,
+    variant_consequence: schemaConfigJsonVariantConsequence,
+  },
+};

package/src/App.tsx

@@ -4,11 +4,12 @@ import { DatasetDropdown } from "./components/DatasetDropdown";
 import { fetchSampleProbandIds, isDatasetSupport } from "./utils/api.ts";
 import { href } from "./utils/utils.ts";
 import { getMetadata } from "./views/data/data.tsx";
+import { HtsFileMetadata } from "@molgenis/vip-report-api";
 
 // export for development purposes
 export function init(navigate: Navigator, location?: Location) {
   (async () => {
-    document.title = `VCF Report (${(await getMetadata()).htsFile.uri})`;
+    document.title = `VCF Report (${((await getMetadata()).app.htsFile as HtsFileMetadata).uri})`;
     const sampleIds = await fetchSampleProbandIds();
     if (location === undefined || location.pathname === "/") {
       let components: (string | number)[];

package/src/components/DatasetDropdown.tsx

@@ -8,7 +8,7 @@ export const DatasetDropdown: Component = () => {
   const navigate = useNavigate();
   const [, actions] = useStore();
 
-  const [selectedDataset, setSelectedDataset] = createSignal("GRCh37 Family");
+  const [selectedDataset, setSelectedDataset] = createSignal("GRCh38 Family");
 
   function switchIt(datasetName: string) {
     actions.reset();

package/src/components/GenomeBrowser.tsx

@@ -1,7 +1,7 @@
 import { Component, onCleanup, onMount } from "solid-js";
 import igv, { Browser } from "igv";
 import { fromByteArray } from "base64-js";
-import { VcfRecord, writeVcf } from "@molgenis/vip-report-vcf";
+import { VariantRecords, VcfRecord, writeVcf } from "@molgenis/vip-report-vcf";
 import { ComposedQuery, Cram, Item, Sample } from "@molgenis/vip-report-api";
 import { fetchCram, fetchFastaGz, fetchGenesGz, fetchRecords, MetadataContainer } from "../utils/api.ts";
 
@@ -24,9 +24,19 @@ async function fetchVcf(
       },
     ],
   };
-  const records = await fetchRecords({ query, size: Number.MAX_SAFE_INTEGER });
+  const records = await fetchRecords({
+    query,
+    size: Number.MAX_SAFE_INTEGER,
+    sampleIds: samples.map((sample) => sample.id),
+  });
   const vcf = writeVcf(
-    { metadata: metadata.records, data: records.items.map((item) => item.data) },
+    {
+      metadata: metadata.records,
+      data: records.items.reduce((acc, item) => {
+        acc[item.id] = item.data;
+        return acc;
+      }, {} as VariantRecords),
+    },
     { samples: samples.map((sample) => sample.data.person.individualId) },
   );
   return toBytes(vcf);
@@ -75,7 +85,7 @@ const createBrowserConfig = async (
 
   return {
     reference: {
-      id: metadata.htsFile.genomeAssembly,
+      id: metadata.app.htsFile?.genomeAssembly,
       name: "Reference",
       fastaURL: "data:application/gzip;base64," + fromByteArray(fastaGz),
       tracks: tracks,

package/src/components/RecordsTable.tsx

@@ -11,10 +11,15 @@ export const RecordsTable: Component<{
   fieldConfigs: ConfigCells;
   records: Item<VcfRecord>[];
   verticalHeaders?: boolean;
+  showParentHeader?: boolean;
 }> = (props) => {
   return (
     <Table>
-      <RecordsTableHeader fieldConfigs={props.fieldConfigs} verticalHeaders={props.verticalHeaders} />
+      <RecordsTableHeader
+        fieldConfigs={props.fieldConfigs}
+        verticalHeaders={props.verticalHeaders}
+        showParentHeader={props.showParentHeader !== undefined ? props.showParentHeader : false}
+      />
       <RecordsTableBody fieldConfigs={props.fieldConfigs} records={props.records} />
     </Table>
   );
@@ -23,24 +28,32 @@ export const RecordsTable: Component<{
 const RecordsTableHeader: Component<{
   fieldConfigs: ConfigCells;
   verticalHeaders?: boolean;
+  showParentHeader: boolean;
 }> = (props) => {
   return (
     <thead>
       <tr style={props.verticalHeaders ? { "writing-mode": "vertical-rl" } : undefined}>
-        <RecordsTableHeaderCells fieldConfigs={props.fieldConfigs} />
+        <RecordsTableHeaderCells fieldConfigs={props.fieldConfigs} showParentHeader={props.showParentHeader} />
       </tr>
     </thead>
   );
 };
 
-export const RecordsTableHeaderCells: Component<{ fieldConfigs: ConfigCells }> = (props) => {
+export const RecordsTableHeaderCells: Component<{ fieldConfigs: ConfigCells; showParentHeader: boolean }> = (props) => {
+  const showParentHeader = () => props.showParentHeader;
   return (
     <For each={props.fieldConfigs}>
       {(fieldConfig) => (
-        <Switch fallback={<RecordsTableHeaderCell fieldConfig={fieldConfig as ConfigCellItem} />}>
+        <Switch
+          fallback={
+            <RecordsTableHeaderCell fieldConfig={fieldConfig as ConfigCellItem} showParentHeader={showParentHeader()} />
+          }
+        >
           <Match when={fieldConfig.type === "group"}>
             <For each={(fieldConfig as ConfigCellGroup).fieldConfigs}>
-              {(childConfigField) => <RecordsTableHeaderCell fieldConfig={childConfigField} />}
+              {(childConfigField) => (
+                <RecordsTableHeaderCell fieldConfig={childConfigField} showParentHeader={showParentHeader()} />
+              )}
             </For>
           </Match>
         </Switch>
@@ -51,8 +64,12 @@ export const RecordsTableHeaderCells: Component<{ fieldConfigs: ConfigCells }> =
 
 export const RecordsTableHeaderCell: Component<{
   fieldConfig: ConfigCellItem;
+  showParentHeader: boolean;
 }> = (props) => {
-  const label = () => props.fieldConfig.label();
+  const label = () =>
+    props.fieldConfig.parentLabel !== undefined && props.fieldConfig.parentLabel() !== "" && props.showParentHeader
+      ? `${props.fieldConfig.parentLabel()}/${props.fieldConfig.label()}`
+      : props.fieldConfig.label();
   const description = () => props.fieldConfig.description();
 
   return (

package/src/components/VariantConsequenceContainer.tsx

@@ -27,8 +27,15 @@ export const VariantConsequenceContainer: Component<{
 
   const samples = (): Item<Sample>[] => (props.sample ? getPedigreeSamples(props.sample) : []);
   const hasDecisionTreePathMeta = () =>
-    (props.metadata.records.info.CSQ?.nested?.items || []).findIndex((csq) => csq.id === "VIPP") !== -1;
+    Object.values(props.metadata.records.info.CSQ?.nested?.items || {}).some((csq) => csq.id === "VIPP");
   const hasSampleTreePathMeta = () => props.metadata.records.format.VIPP_S != null;
+  const showSampleTree = () => {
+    if (props.sample) {
+      const treePath = getSampleTreePath(props.metadata.records, props.sample, props.record, props.consequenceId);
+      return treePath !== undefined && treePath.length > 0;
+    }
+    return false;
+  };
 
   return (
     <>
@@ -77,7 +84,7 @@ export const VariantConsequenceContainer: Component<{
                 />
               </div>
             )}
-            {props.sampleTree !== null && hasSampleTreePathMeta() && props.sample && (
+            {showSampleTree() && props.sampleTree !== null && hasSampleTreePathMeta() && props.sample && (
               <div class="column is-6">
                 <h1 class="title is-5">Sample classification tree path</h1>
                 <DecisionTreePath

package/src/components/VariantInfoTable.tsx

@@ -31,7 +31,7 @@ export const VariantInfoTable: Component<{
         <For each={configCells()}>
           {(fieldConfig) => (
             <tr>
-              <RecordsTableHeaderCell fieldConfig={fieldConfig} />
+              <RecordsTableHeaderCell fieldConfig={fieldConfig} showParentHeader={true} />
               <RecordsTableCell fieldConfig={fieldConfig} record={props.record} />
             </tr>
           )}