@molgenis/vip-report-template 3.1.2 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",
@@ -15,32 +15,32 @@
   },
   "license": "LGPL-3.0",
   "devDependencies": {
-    "@molgenis/vite-plugin-inline": "^1.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@molgenis/vite-plugin-inline": "^1.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.35.1",
+    "@typescript-eslint/parser": "^5.35.1",
+    "@vitest/coverage-c8": "^0.22.1",
     "bulma": "^0.9.4",
-    "c8": "^7.11.3",
-    "eslint": "^8.17.0",
+    "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-solid": "^0.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-solid": "^0.7.1",
     "husky": "^8.0.1",
-    "prettier": "^2.7.0",
-    "sass": "^1.52.3",
-    "typescript": "^4.7.3",
-    "vite": "^2.9.12",
-    "vite-plugin-solid": "^2.2.6",
-    "vitest": "^0.14.2"
+    "prettier": "^2.7.1",
+    "sass": "^1.54.5",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.9",
+    "vite-plugin-solid": "^2.3.0",
+    "vitest": "^0.22.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@molgenis/vip-report-api": "^3.5.2",
-    "@molgenis/vip-report-vcf": "^1.2.2",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@molgenis/vip-report-api": "^3.5.4",
+    "@molgenis/vip-report-vcf": "^1.2.3",
     "base64-js": "^1.5.1",
-    "igv": "^2.12.6",
-    "solid-app-router": "^0.3.3",
-    "solid-js": "^1.4.4"
+    "igv": "^2.13.1",
+    "solid-app-router": "^0.4.2",
+    "solid-js": "^1.4.8"
   },
   "lint-staged": {
     "src/**/*.{tsx,ts}": [

package/src/components/VariantsTable.tsx

@@ -56,9 +56,12 @@ export const VariantsTable: Component<{
               <tr>
                 <For each={infoFieldsNested()}>
                   {(infoField) => (
-                    <For each={infoField.nested?.items}>
-                      {(nestedInfoField) => <FieldHeader field={nestedInfoField} />}
-                    </For>
+                    <>
+                      {infoField.number.count !== 1 && <th />}
+                      <For each={infoField.nested?.items}>
+                        {(nestedInfoField) => <FieldHeader field={nestedInfoField} />}
+                      </For>
+                    </>
                   )}
                 </For>
               </tr>

package/src/components/record/RecordDownload.tsx

@@ -1,13 +1,18 @@
 import { Component } from "solid-js";
-import { Query, Sample } from "@molgenis/vip-report-api/src/Api";
+import { HtsFileMetadata, Query, Sample } from "@molgenis/vip-report-api/src/Api";
 import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
 import api from "../../Api";
 import { Filter, writeVcf } from "@molgenis/vip-report-vcf/src/VcfWriter";
 
+const DOWNLOAD_POSTFIX = "_report.vcf";
 export const RecordDownload: Component<{ recordsMetadata: Metadata; query?: Query; samples?: Sample[] }> = (props) => {
   const filter = (): Filter | undefined =>
     props.samples ? { samples: props.samples.map((sample) => sample.person.individualId) } : undefined;
 
+  function parseFilename(htsFile: HtsFileMetadata) {
+    return htsFile.uri.split("\\").pop()?.split("/").pop()?.split(".").shift();
+  }
+
   function onClick() {
     const handler = async () => {
       const records = await api.getRecords({ query: props.query, size: Number.MAX_SAFE_INTEGER });
@@ -16,7 +21,9 @@ export const RecordDownload: Component<{ recordsMetadata: Metadata; query?: Quer
       const url = window.URL.createObjectURL(new Blob([vcf]));
       const link = document.createElement("a");
       link.href = url;
-      link.setAttribute("download", "data.vcf");
+      const htsFile = await api.getHtsFileMetadata();
+      const filename = parseFilename(htsFile) as string;
+      link.setAttribute("download", filename + DOWNLOAD_POSTFIX);
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
@@ -26,7 +33,11 @@ export const RecordDownload: Component<{ recordsMetadata: Metadata; query?: Quer
 
   return (
     <div class="control">
-      <button class="button is-info" onClick={onClick}>
+      <button
+        class="button is-info"
+        onClick={onClick}
+        title="Download vcf file with records matching filters and search queries"
+      >
         <span class="icon is-small">
           <i class="fas fa-download" />
         </span>

package/src/components/record/info/Gene.tsx

@@ -45,9 +45,9 @@ export const Gene: Component<FieldProps> = (props) => {
             <span>{symbol}</span>
           </Anchor>
           {incompletePenetrance() && (
-            <sup class="ml-1">
+            <span class="ml-1">
               <Abbr title="gene is known for incomplete penetrance" value="IP" />
-            </sup>
+            </span>
           )}
         </>
       )}

package/src/mocks/GRCh37/vcf/family.vcf.blob

@@ -80,8 +80,8 @@
 1	16375583	.	GA	G	.	PASS	CSQ=-|intron_variant|MODIFIER|CLCNKB|1188|Transcript|NM_000085.5|protein_coding||7/19|NM_000085.5:c.656-31del|||||||rs751608665|1||1||1|EntrezGene||||||||uncertain_significance&pathogenic||1||||||||20|45|-14|-45|0.05|0.00|0.00|0.00|CLCNKB|VUS|0.032507|HP:0000951||AR|LP||||1:16375584-16375585|0.000548455|0|638508|Conflicting_interpretations_of_pathogenicity||criteria_provided&_conflicting_interpretations|LP|filter&vkgl&exit_lp|,-|frameshift_variant|HIGH|CLCNKB|1188|Transcript|NM_001165945.2|protein_coding|1/13||NM_001165945.2:c.118del|NP_001159417.2:p.Arg40GlyfsTer4|328/2174|118/1554|40/517|R/X|Agg/gg|rs751608665|1||1|||EntrezGene||||||||uncertain_significance&pathogenic||1||||||||20|45|-14|-45|0.05|0.00|0.00|0.00|CLCNKB|VUS|0.9770811|HP:0000951||AR|LP||||1:16375584-16375585|0.000548455|0|638508|Conflicting_interpretations_of_pathogenicity||criteria_provided&_conflicting_interpretations|LP|filter&vkgl&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM:VIS	1|0:25,25:50:AR:1_16376412_G_A,1_16376412_G_N:0:1188:1:AR_C	1|0:25,25:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.
 1	16376412	n_alt	G	N	.	PASS	CSQ=N|splice_donor_variant|HIGH|CLCNKB|1188|Transcript|NM_000085.5|protein_coding||10/19||||||||CS1211892&CS971662|1||1||1|EntrezGene||||||||||1&1|||||||||||||||||VUS|0.373989|HP:0000951||AR||||||||||||LP|filter&vkgl&clinVar&gnomad&effect&spliceAI&annotSV&impact&exit_lp|,N|splice_donor_variant|HIGH|CLCNKB|1188|Transcript|NM_001165945.2|protein_coding||3/12||||||||CS1211892&CS971662|1||1|||EntrezGene||||||||||1&1|||||||||||||||||VUS|0.373989|HP:0000951||AR||||||||||||LP|filter&vkgl&clinVar&gnomad&effect&spliceAI&annotSV&impact&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM:VIS	1|0:5,45:50:AR,AD:1_16376412_G_A,1_16375583_GA_G:1:1188:1:AR_C	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.
 1	16376412	.	G	A	.	PASS	CSQ=A|splice_donor_variant|HIGH|CLCNKB|1188|Transcript|NM_000085.5|protein_coding||10/19|NM_000085.5:c.968+1G>A|||||||rs201204502&CS1211892&CS971662|1||1||1|EntrezGene||||||||||0&1&1||||||||17|-36|-28|-1|0.00|0.00|0.03|0.97|CLCNKB|VUS|0.9855972|HP:0000951||AR|LP||||1:16376412-16376412|6.38086e-05|0|1285112|Pathogenic/Likely_pathogenic||no_assertion_criteria_provided|LP|filter&vkgl&exit_lp|,A|splice_donor_variant|HIGH|CLCNKB|1188|Transcript|NM_001165945.2|protein_coding||3/12|NM_001165945.2:c.461+1G>A|||||||rs201204502&CS1211892&CS971662|1||1|||EntrezGene||||||||||0&1&1||||||||17|-36|-28|-1|0.00|0.00|0.03|0.97|CLCNKB|VUS|0.9855972|HP:0000951||AR|LP||||1:16376412-16376412|6.38086e-05|0|1285112|Pathogenic/Likely_pathogenic||no_assertion_criteria_provided|LP|filter&vkgl&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM:VIS	0|1:50:50:AR:1_16375583_GA_G,1_16376412_G_N:0:1188:1:AR_C	0|0:50,0:50:.:.:.:.:.:.	1|0:25,25:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.:.
-1	17349219	g_ref	G	A	.	PASS	CSQ=A|missense_variant|MODERATE|SDHB|6390|Transcript|NM_003000.3|protein_coding|7/8||NM_003000.3:c.649C>T|NP_002991.2:p.Arg217Cys|662/1015|649/843|217/280|R/C|Cgc/Tgc|rs200245469&CM094752&CM1210440&COSV64965760|1||-1||1|EntrezGene|||||0|1||likely_pathogenic|0&0&0&1|1&1&1&1||||||||28|6|6|5|0.00|0.00|0.00|0.00|SDHB|VUS|0.89070946|HP:0000951||AD&AR|LP|||||||183735|Pathogenic/Likely_pathogenic||criteria_provided&_multiple_submitters&_no_conflicts|LP|filter&vkgl&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM	1|1:0,50:50:AR:.:1:6390:1	1|0:45,5:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	1|0:25,25:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.
-1	17355094	.	C	T	.	PASS	CSQ=T|splice_donor_variant|HIGH|SDHB|6390|Transcript|NM_003000.3|protein_coding||4/7|NM_003000.3:c.423+1G>A|||||||rs398122805&CS056774&CS062098&COSV64965540|1||-1||1|EntrezGene||||||||pathogenic|0&0&0&1|1&1&1&1|21348866&17667967&17804857&16405730&21565294&15383933|||||||-49|12|26|1|0.00|0.00|0.14|0.97|SDHB|VUS|0.9641474|HP:0000951||AD&AR|LP||||1:17355094-17355094|1.19344e-05|0|29896|Pathogenic||criteria_provided&_multiple_submitters&_no_conflicts|LP|filter&vkgl&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM	1|0:5,45:50:AD:.:1:6390:1	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.
+1	17349219	g_ref	G	A	.	PASS	CSQ=A|missense_variant|MODERATE|SDHB|6390|Transcript|NM_003000.3|protein_coding|7/8||NM_003000.3:c.649C>T|NP_002991.2:p.Arg217Cys|662/1015|649/843|217/280|R/C|Cgc/Tgc|rs200245469&CM094752&CM1210440&COSV64965760|1||-1||1|EntrezGene|||||0|1||likely_pathogenic|0&0&0&1|1&1&1&1||||||||28|6|6|5|0.00|0.00|0.00|0.00|SDHB|VUS|0.89070946|HP:0000951&HP:0003124||AD&AR|LP|||||||183735|Pathogenic/Likely_pathogenic||criteria_provided&_multiple_submitters&_no_conflicts|LP|filter&vkgl&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM	1|1:0,50:50:AR:.:1:6390:1	1|0:45,5:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	1|0:25,25:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.
+1	17355094	.	C	T	.	PASS	CSQ=T|splice_donor_variant|HIGH|SDHB|6390|Transcript|NM_003000.3|protein_coding||4/7|NM_003000.3:c.423+1G>A|||||||rs398122805&CS056774&CS062098&COSV64965540|1||-1||1|EntrezGene||||||||pathogenic|0&0&0&1|1&1&1&1|21348866&17667967&17804857&16405730&21565294&15383933|||||||-49|12|26|1|0.00|0.00|0.14|0.97|SDHB|VUS|0.9641474|HP:0003124||AD&AR|LP||||1:17355094-17355094|1.19344e-05|0|29896|Pathogenic||criteria_provided&_multiple_submitters&_no_conflicts|LP|filter&vkgl&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM	1|0:5,45:50:AD:.:1:6390:1	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.
 1	152520788	symbolic1	A	<DEL>	.	PASS	CSQ=deletion|transcript_ablation|HIGH|LCE3D|84648|Transcript|NM_032563.2|protein_coding|||||||||||1||-1||1|EntrezGene|||||||||||||||||||||||||||||||||||||||||||LP|filter&vkgl&clinVar&gnomad&effect&spliceAI&annotSV&impact&exit_lp|,deletion|transcript_ablation|HIGH|LCE3E|353145|Transcript|NM_178435.4|protein_coding|||||||||||1||-1|||EntrezGene|||||||||||||||||||||||||||||||||||||||||||LP|filter&vkgl&clinVar&gnomad&effect&spliceAI&annotSV&impact&exit_lp|,deletion|TFBS_ablation&TF_binding_site_variant|MODERATE|||MotifFeature|ENSM00701519957||||||||||||1||||||||||||||||||||||||||||||||||||||||||||||||VUS|filter&vkgl&clinVar&gnomad&effect&spliceAI&annotSV&impact&exit_vus|,deletion|TFBS_ablation&TF_binding_site_variant|MODERATE|||MotifFeature|ENSM00905971885||||||||||||1||||||||||||||||||||||||||||||||||||||||||||||||VUS|filter&vkgl&clinVar&gnomad&effect&spliceAI&annotSV&impact&exit_vus|,deletion|TFBS_ablation&TF_binding_site_variant|MODERATE|||MotifFeature|ENSM00522719201||||||||||||1||||||||||||||||||||||||||||||||||||||||||||||||VUS|filter&vkgl&clinVar&gnomad&effect&spliceAI&annotSV&impact&exit_vus|;SVLEN=-49314;SVTYPE=DEL	GT:AD:DP:VI:VIC:VID:VIM	1|1:0,50:50:AR:.:1:0	0|0:50,0:50:.:.:.:.	0|0:50,0:50:.:.:.:.	0|0:50,0:50:.:.:.:.	0|0:50,0:50:.:.:.:.	1|0:25,25:50:.:.:.:.
 4	106320294	.	G	A	.	PASS	CSQ=A|missense_variant|MODERATE|PPA2|27068|Transcript|NM_006903.4|protein_coding|7/11||NM_006903.4:c.596C>T|NP_008834.3:p.Pro199Leu|616/1586|596/918|199/305|P/L|cCg/cTg|rs138215926&CM1610192&COSV58994362|1||-1|||EntrezGene|||||0|0.985||pathogenic|0&0&1|1&1&1|27523597|||||||-34|27|-2|-43|0.00|0.00|0.00|0.00|PPA2|VUS|0.8097311|||AR|LP||||4:106320294-106320294|0.000211803|0|372226|Likely_pathogenic||criteria_provided&_single_submitter|LP|filter&vkgl&exit_lp|,A|missense_variant|MODERATE|PPA2|27068|Transcript|NM_176866.2|protein_coding|4/8||NM_176866.2:c.377C>T|NP_789842.2:p.Pro126Leu|397/1367|377/699|126/232|P/L|cCg/cTg|rs138215926&CM1610192&COSV58994362|1||-1|||EntrezGene|||||0|0.992||pathogenic|0&0&1|1&1&1|27523597|||||||-34|27|-2|-43|0.00|0.00|0.00|0.00|PPA2|VUS|0.7550335|||AR|LP||||4:106320294-106320294|0.000211803|0|372226|Likely_pathogenic||criteria_provided&_single_submitter|LP|filter&vkgl&exit_lp|,A|missense_variant|MODERATE|PPA2|27068|Transcript|NM_176867.3|protein_coding|2/6||NM_176867.3:c.185C>T|NP_789843.2:p.Pro62Leu|205/1175|185/507|62/168|P/L|cCg/cTg|rs138215926&CM1610192&COSV58994362|1||-1|||EntrezGene|||||0|0.995||pathogenic|0&0&1|1&1&1|27523597|||||||-34|27|-2|-43|0.00|0.00|0.00|0.00|PPA2|VUS|0.8145551|||AR|LP||||4:106320294-106320294|0.000211803|0|372226|Likely_pathogenic||criteria_provided&_single_submitter|LP|filter&vkgl&exit_lp|,A|missense_variant|MODERATE|PPA2|27068|Transcript|NM_176869.3|protein_coding|8/12||NM_176869.3:c.683C>T|NP_789845.1:p.Pro228Leu|695/1665|683/1005|228/334|P/L|cCg/cTg|rs138215926&CM1610192&COSV58994362|1||-1||1|EntrezGene|||||0|0.993||pathogenic|0&0&1|1&1&1|27523597|||||||-34|27|-2|-43|0.00|0.00|0.00|0.00|PPA2|VUS|0.76490384|||AR|LP||||4:106320294-106320294|0.000211803|0|372226|Likely_pathogenic||criteria_provided&_single_submitter|LP|filter&vkgl&exit_lp|,A|regulatory_region_variant|MODIFIER|||RegulatoryFeature|ENSR00001994744|promoter_flanking_region||||||||||rs138215926&CM1610192&COSV58994362|1|||||||||||||pathogenic|0&0&1|1&1&1|27523597|||||||||||||||||||||||||4:106320294-106320294|0.000211803|0|372226|Likely_pathogenic||criteria_provided&_single_submitter|LP|filter&vkgl&clinVar&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM	1|1:0,50:50:AR:.:1:27068:1	1|0:25,25:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	1|1:0,50:50:.:.:.:.:.
 9	107546633	.	AAAGAT	A	.	PASS	CSQ=-|frameshift_variant|HIGH|ABCA1|19|Transcript|NM_005502.4|protein_coding|50/50||NM_005502.4:c.6744_6748del|NP_005493.2:p.Phe2250ThrfsTer3|7057-7061/10408|6744-6748/6786|2248-2250/2261|TSF/TX|acATCTTtt/actt||1||-1||1|EntrezGene|||||||||||||||||||||||||||VUS|0.9823047|HP:0000951||AD&AR||||||||||||LP|filter&vkgl&clinVar&gnomad&effect&spliceAI&annotSV&impact&exit_lp|	GT:AD:DP:VI:VIC:VID:VIG:VIM	1|1:0,10:10:AR:.:0:19:1	0|1:1,49:50:.:.:.:.:.	1|0:0,50:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.	0|0:50,0:50:.:.:.:.:.

package/src/mocks/GRCh37/vcf/samples_1.vcf.blob

@@ -9,7 +9,7 @@
 ##FORMAT=<ID=GT,Number=1,Type=String,Description="Genotype">
 ##HPO=List of HPO terms for the gene
 ##INFO=<ID=BND_DEPTH,Number=1,Type=Integer,Description="Read depth at local translocation breakend">
-##INFO=<ID=CSQ,Number=.,Type=String,Description="Consequence annotations from Ensembl VEP. Format: Allele|Consequence|IMPACT|SYMBOL|Gene|Feature_type|Feature|BIOTYPE|EXON|INTRON|HGVSc|HGVSp|cDNA_position|CDS_position|Protein_position|Amino_acids|Codons|Existing_variation|ALLELE_NUM|DISTANCE|STRAND|FLAGS|PICK|SYMBOL_SOURCE|HGNC_ID|REFSEQ_MATCH|REFSEQ_OFFSET|SOURCE|SIFT|PolyPhen|HGVS_OFFSET|CLIN_SIG|SOMATIC|PHENO|PUBMED|CHECK_REF|MOTIF_NAME|MOTIF_POS|HIGH_INF_POS|MOTIF_SCORE_CHANGE|TRANSCRIPTION_FACTORS|SpliceAI_pred_DP_AG|SpliceAI_pred_DP_AL|SpliceAI_pred_DP_DG|SpliceAI_pred_DP_DL|SpliceAI_pred_DS_AG|SpliceAI_pred_DS_AL|SpliceAI_pred_DS_DG|SpliceAI_pred_DS_DL|SpliceAI_pred_SYMBOL|CAPICE_CL|CAPICE_SC|HPO|IncompletePenetrance|InheritanceModesGene|VKGL_CL|ASV_ACMG_class|ASV_AnnotSV_ranking_criteria|ASV_AnnotSV_ranking_score|gnomAD|gnomAD_AF|gnomAD_HN|VIPC|VIPP|VIPL">
+##INFO=<ID=CSQ,Number=.,Type=String,Description="Consequence annotations from Ensembl VEP. Format: Allele|Consequence|IMPACT|SYMBOL|Gene|Feature_type|Feature|BIOTYPE|EXON|INTRON|HGVSc|HGVSp|cDNA_position|CDS_position|Protein_position|Amino_acids|Codons|Existing_variation|ALLELE_NUM|DISTANCE|STRAND|FLAGS|PICK|SYMBOL_SOURCE|HGNC_ID|REFSEQ_MATCH|REFSEQ_OFFSET|SOURCE|SIFT|PolyPhen|HGVS_OFFSET|CLIN_SIG|SOMATIC|PHENO|PUBMED|CHECK_REF|MOTIF_NAME|MOTIF_POS|HIGH_INF_POS|MOTIF_SCORE_CHANGE|TRANSCRIPTION_FACTORS|SpliceAI_pred_DP_AG|SpliceAI_pred_DP_AL|SpliceAI_pred_DP_DG|SpliceAI_pred_DP_DL|SpliceAI_pred_DS_AG|SpliceAI_pred_DS_AL|SpliceAI_pred_DS_DG|SpliceAI_pred_DS_DL|SpliceAI_pred_SYMBOL|CAPICE_CL|CAPICE_SC|HPO|IncompletePenetrance|InheritanceModesGene|VKGL_CL|ASV_ACMG_class|ASV_AnnotSV_ranking_criteria|ASV_AnnotSV_ranking_score|gnomAD|gnomAD_AF|gnomAD_HN|VIPC|VIPP_renamed|VIPL_renamed">
 ##INFO=<ID=MATEID,Number=.,Type=String,Description="ID of mate breakend">
 ##INFO=<ID=MATE_BND_DEPTH,Number=1,Type=Integer,Description="Read depth at remote translocation mate breakend">
 ##INFO=<ID=SVLEN,Number=.,Type=Integer,Description="Difference in length between REF and ALT alleles">

package/src/mocks/MockApiClient.ts

@@ -120,7 +120,7 @@ export class MockApiClient implements Api {
           args: "-i testdata_b37_vip.vcf -t /Users/user/vip-report-template/dist/vip-report-template.html -f",
         },
         htsFile: {
-          uri: "testdata_b37_vip.vcf",
+          uri: "/path/to/testdata_b37_vip.vcf",
           htsFormat: "VCF",
           genomeAssembly: "GRCh37",
         },

package/src/store/index.tsx

@@ -14,11 +14,18 @@ type AppStateVariants = {
   sort?: SortOrder | null; // null: do not sort. undefined: sort undefined
 };
 
+type AppStateSamples = {
+  page?: number;
+  searchQuery?: string;
+  probandFilterValue?: boolean;
+};
+
 export type AppState = {
   variants?: AppStateVariants;
-  samples?: {
+  sampleVariants?: {
     [key: number]: { variants: AppStateVariants };
   };
+  samples?: AppStateSamples;
 };
 
 export type AppActions = {
@@ -26,22 +33,23 @@ export type AppActions = {
   setVariantsPage(page: number): void;
   setVariantsPageSize(pageSize: number): void;
   setVariantsSearchQuery(searchQuery: string): void;
-  clearVariantsSearchQuery(): void;
   setVariantsFilterQuery(query: QueryClause): void;
   clearVariantsFilterQuery(selector: Selector): void;
   setVariantsSort(sort: SortOrder | null): void;
   setSampleVariantsPage(sample: Item<Sample>, page: number): void;
   setSampleVariantsPageSize(sample: Item<Sample>, pageSize: number): void;
   setSampleVariantsSearchQuery(sample: Item<Sample>, searchQuery: string): void;
-  clearSampleVariantsSearchQuery(sample: Item<Sample>): void;
   setSampleVariantsFilterQuery(sample: Item<Sample>, query: QueryClause): void;
   clearSampleVariantsFilterQuery(sample: Item<Sample>, selector: Selector): void;
   setSampleVariantsSort(sample: Item<Sample>, sort: SortOrder | null): void;
+  setSamplePage(page: number): void;
+  setSampleSearchQuery(searchQuery: string): void;
+  setSampleProbandFilterValue(probandFilterValue: boolean): void;
 };
 
 export type AppStore = [state: AppState, actions: AppActions];
 
-const defaultState: AppState = { variants: {}, samples: {} };
+const defaultState: AppState = { variants: {}, sampleVariants: {} };
 
 const StoreContext = createContext<AppStore>() as Context<AppStore>;
 
@@ -49,12 +57,12 @@ export const Provider: ParentComponent = (props) => {
   const [state, setState] = createStore(defaultState);
 
   function getVariants(sample: Item<Sample>) {
-    return state.samples ? state.samples[sample.id]?.variants || {} : {};
+    return state.sampleVariants ? state.sampleVariants[sample.id]?.variants || {} : {};
   }
 
   const actions: AppActions = {
     reset() {
-      setState({ variants: undefined, samples: undefined });
+      setState({ variants: undefined, sampleVariants: undefined, samples: undefined });
     },
     setVariantsPage(page: number) {
       setState({ variants: { ...(state.variants || {}), page } });
@@ -65,9 +73,6 @@ export const Provider: ParentComponent = (props) => {
     setVariantsSearchQuery(searchQuery: string) {
       setState({ variants: { ...(state.variants || {}), searchQuery } });
     },
-    clearVariantsSearchQuery() {
-      setState({ variants: { ...(state.variants || {}), searchQuery: undefined } });
-    },
     setVariantsFilterQuery(query: QueryClause) {
       setState({
         variants: {
@@ -93,37 +98,34 @@ export const Provider: ParentComponent = (props) => {
       });
     },
     setSampleVariantsPage(sample: Item<Sample>, page: number) {
-      setState({ samples: { ...(state.samples || {}), [sample.id]: { variants: { ...getVariants(sample), page } } } });
+      setState({
+        sampleVariants: {
+          ...(state.sampleVariants || {}),
+          [sample.id]: { variants: { ...getVariants(sample), page } },
+        },
+      });
     },
     setSampleVariantsPageSize(sample: Item<Sample>, pageSize: number) {
       setState({
-        samples: {
-          ...(state.samples || {}),
+        sampleVariants: {
+          ...(state.sampleVariants || {}),
           [sample.id]: { variants: { ...getVariants(sample), pageSize, page: undefined } },
         },
       });
     },
     setSampleVariantsSearchQuery(sample: Item<Sample>, searchQuery: string) {
       setState({
-        samples: {
-          ...(state.samples || {}),
+        sampleVariants: {
+          ...(state.sampleVariants || {}),
           [sample.id]: { variants: { ...getVariants(sample), searchQuery, page: undefined } },
         },
       });
     },
-    clearSampleVariantsSearchQuery(sample: Item<Sample>) {
-      setState({
-        samples: {
-          ...(state.samples || {}),
-          [sample.id]: { variants: { ...getVariants(sample), searchQuery: undefined, page: undefined } },
-        },
-      });
-    },
     setSampleVariantsFilterQuery(sample: Item<Sample>, query: QueryClause) {
       const variants = getVariants(sample);
       setState({
-        samples: {
-          ...(state.samples || {}),
+        sampleVariants: {
+          ...(state.sampleVariants || {}),
           [sample.id]: {
             variants: {
               ...variants,
@@ -137,8 +139,8 @@ export const Provider: ParentComponent = (props) => {
     clearSampleVariantsFilterQuery(sample: Item<Sample>, selector: Selector) {
       const variants = getVariants(sample);
       setState({
-        samples: {
-          ...(state.samples || {}),
+        sampleVariants: {
+          ...(state.sampleVariants || {}),
           [sample.id]: {
             variants: {
               ...getVariants(sample),
@@ -151,9 +153,21 @@ export const Provider: ParentComponent = (props) => {
     },
     setSampleVariantsSort(sample: Item<Sample>, sort: SortOrder | null) {
       setState({
-        samples: { ...(state.samples || {}), [sample.id]: { variants: { ...getVariants(sample), sort } } },
+        sampleVariants: {
+          ...(state.sampleVariants || {}),
+          [sample.id]: { variants: { ...getVariants(sample), sort } },
+        },
       });
     },
+    setSamplePage(page: number) {
+      setState({ samples: { ...(state.samples || {}), page } });
+    },
+    setSampleSearchQuery(searchQuery: string) {
+      setState({ samples: { ...(state.samples || {}), searchQuery } });
+    },
+    setSampleProbandFilterValue(probandFilterValue: boolean) {
+      setState({ samples: { ...(state.samples || {}), probandFilterValue } });
+    },
   };
   const store: AppStore = [state, actions];
 

package/src/utils/query.ts

@@ -29,7 +29,6 @@ export function createSampleQuery(
   const searchFilterQuery = createQuery(search, filters, metadata);
   const query: Query =
     searchFilterQuery !== null ? { operator: "and", args: [sampleQuery, searchFilterQuery] } : sampleQuery;
-  console.log(query);
   return query;
 }
 

package/src/views/SampleVariantConsequence.tsx

@@ -63,6 +63,9 @@ export const SampleVariantConsequence: Component<{
   consequenceId: number;
   decisionTree: DecisionTree | null;
 }> = (props) => {
+  const hasDecisionTreePathMeta = () =>
+    (props.recordsMeta.info.CSQ?.nested?.items || []).findIndex((csq) => csq.id === "VIPP") !== -1;
+
   return (
     <>
       <div class="columns">
@@ -74,7 +77,7 @@ export const SampleVariantConsequence: Component<{
             record={props.variant}
           />
         </div>
-        {props.decisionTree !== null && (
+        {props.decisionTree !== null && hasDecisionTreePathMeta() && (
           <div class="column">
             <h1 class="title is-5">Classification tree path</h1>
             <DecisionTreePath

package/src/views/SampleVariants.tsx

@@ -66,7 +66,7 @@ export const SampleVariants: Component<{
   const [state, actions] = useStore();
 
   function getStateVariants() {
-    return state.samples ? state.samples[props.sample.id]?.variants : undefined;
+    return state.sampleVariants ? state.sampleVariants[props.sample.id]?.variants : undefined;
   }
 
   // state initialization - start

package/src/views/Samples.tsx

@@ -1,57 +1,116 @@
-import { Component, createResource, createSignal } from "solid-js";
+import { Component, createResource, Show } from "solid-js";
 import { SampleTable } from "../components/SampleTable";
 import { Pager } from "../components/record/Pager";
 import { SearchBox } from "../components/SearchBox";
 import { Checkbox, CheckboxEvent } from "../components/Checkbox";
 import { Breadcrumb } from "../components/Breadcrumb";
-import { EMPTY_PARAMS, EMPTY_PHENOTYPES, EMPTY_SAMPLES_PAGE, fetchPhenotypes, fetchSamples } from "../utils/ApiUtils";
+import { EMPTY_PARAMS, EMPTY_PHENOTYPES, fetchPhenotypes, fetchSamples } from "../utils/ApiUtils";
+import { useStore } from "../store";
+import { Params, Query, QueryClause } from "@molgenis/vip-report-api/src/Api";
+import { Loader } from "../components/Loader";
 
 export const Samples: Component = () => {
-  const [params, setParams] = createSignal(EMPTY_PARAMS);
-  const [samples] = createResource(params, fetchSamples, { initialValue: EMPTY_SAMPLES_PAGE });
+  const [state, actions] = useStore();
   const [phenotypes] = createResource(EMPTY_PARAMS, fetchPhenotypes, { initialValue: EMPTY_PHENOTYPES });
 
-  const onPageChange = (page: number) => setParams({ page });
-  const onSearchChange = (search: string) =>
-    setParams({
-      page: 0,
-      query: search !== "" ? { selector: ["person", "individualId"], operator: "~=", args: search } : undefined,
-    });
+  function getStateSamples() {
+    return state.samples ? state.samples : undefined;
+  }
+
+  if (getStateSamples()?.page === undefined) {
+    actions.setSamplePage(0);
+  }
+
+  const onPageChange = (page: number) => actions.setSamplePage(page);
+  const onSearchChange = (search: string) => {
+    actions.setSampleSearchQuery(search);
+    actions.setSamplePage(0);
+  };
   const onProbandFilterChange = (event: CheckboxEvent) => {
-    setParams({
-      page: 0,
-      query: event.checked ? { selector: ["proband"], operator: "==", args: event.checked } : undefined,
-    });
+    actions.setSampleProbandFilterValue(event.checked);
+    actions.setSamplePage(0);
+  };
+
+  function createQuery(search: string | undefined, probandFilterValue: boolean | undefined): Query | null {
+    const searchQuery: QueryClause | undefined =
+      search !== undefined && search !== ""
+        ? { selector: ["person", "individualId"], operator: "~=", args: search }
+        : undefined;
+    const probandQuery: QueryClause | undefined =
+      probandFilterValue !== undefined && probandFilterValue
+        ? { selector: ["proband"], operator: "==", args: probandFilterValue }
+        : undefined;
+    if (searchQuery !== undefined || probandQuery != undefined) {
+      const args: QueryClause[] = [];
+      if (searchQuery !== undefined) {
+        args.push(searchQuery);
+      }
+      if (probandQuery !== undefined) {
+        args.push(probandQuery);
+      }
+      if (args.length > 0) {
+        const query: Query = {
+          operator: "and",
+          args: args,
+        };
+        return query;
+      }
+    }
+    return null;
+  }
+
+  const params = (): Params => {
+    return {
+      query: createQuery(searchQuery(), probandFilterValue()) || undefined,
+      page: page() || undefined,
+    };
   };
 
+  const page = () => getStateSamples()?.page;
+  const searchQuery = () => getStateSamples()?.searchQuery;
+  const probandFilterValue = () => getStateSamples()?.probandFilterValue;
+
+  const [samples] = createResource(params, fetchSamples);
+
   return (
     <>
       <Breadcrumb items={[{ text: "Samples" }]} />
-      <div class="columns">
-        <div class="column is-4 is-offset-3">
-          {!samples.loading && <Pager page={samples().page} onPageChange={onPageChange} />}
-        </div>
-        <div class="column is-2 is-offset-1">
-          {!samples.loading && <span class="is-pulled-right">{samples().page.totalElements} records</span>}
-        </div>
-      </div>
-
-      <div class="columns">
-        <div class="column is-1-fullhd is-2">
-          <SearchBox onInput={onSearchChange} />
-          <p class="has-text-weight-semibold">Proband</p>
-          <div class="field">
-            <div class="control">
-              <Checkbox value={"proband"} label="" onChange={onProbandFilterChange} />
+      <Show when={samples()} fallback={<Loader />}>
+        {(samples) => (
+          <>
+            <div class="columns">
+              <div class="column is-4 is-offset-3">{<Pager page={samples.page} onPageChange={onPageChange} />}</div>
+              <div class="column is-2 is-offset-1">
+                {<span class="is-pulled-right">{samples.page.totalElements} records</span>}
+              </div>
+            </div>
+
+            <div class="columns">
+              <div class="column is-1-fullhd is-2">
+                <SearchBox onInput={onSearchChange} value={state.samples?.searchQuery} />
+                <p class="has-text-weight-semibold">Proband</p>
+                <div class="field">
+                  <div class="control">
+                    <Checkbox
+                      value={"proband"}
+                      label=""
+                      onChange={onProbandFilterChange}
+                      checked={state.samples?.probandFilterValue}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="column">
+                <span class="is-italic">
+                  Click on an individual id for detailed information for this sample. In this screen a link to the
+                  variants for this sample is available.
+                </span>
+                {!phenotypes.loading && <SampleTable samples={samples.items} phenotypes={phenotypes().items} />}
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="column">
-          {!samples.loading && !phenotypes.loading && (
-            <SampleTable samples={samples().items} phenotypes={phenotypes().items} />
-          )}
-        </div>
-      </div>
+          </>
+        )}
+      </Show>
     </>
   );
 };

package/src/views/VariantConsequence.tsx

@@ -28,6 +28,8 @@ export const VariantConsequence: Component = () => {
 
   const csqFields = (): FieldMetadata[] => recordsMetadata().info.CSQ?.nested?.items || [];
   const csqValues = (): ValueArray => getSpecificConsequence(variant().data.n.CSQ as ValueArray, consequenceId);
+
+  const hasDecisionTreePathMeta = () => csqFields().findIndex((csq) => csq.id === "VIPP") !== -1;
   return (
     <Show when={!variant.loading} fallback={<Loader />}>
       <Breadcrumb
@@ -42,17 +44,19 @@ export const VariantConsequence: Component = () => {
           <h1 class="title is-5">Consequence</h1>
           <ConsequenceTable csqMetadata={csqFields()} csqValues={csqValues()} record={variant()} />
         </div>
-        <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)}>
-          {(decisionTree) => (
-            <div class="column">
-              <h1 class="title is-5">Classification tree path</h1>
-              <DecisionTreePath
-                decisionTree={decisionTree}
-                path={getDecisionTreePath(recordsMetadata(), variant(), consequenceId)}
-              />
-            </div>
-          )}
-        </Show>
+        {hasDecisionTreePathMeta() && (
+          <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)}>
+            {(decisionTree) => (
+              <div class="column">
+                <h1 class="title is-5">Classification tree path</h1>
+                <DecisionTreePath
+                  decisionTree={decisionTree}
+                  path={getDecisionTreePath(recordsMetadata(), variant(), consequenceId)}
+                />
+              </div>
+            )}
+          </Show>
+        )}
       </div>
       <div class="columns">
         <div class="column is-6">