@molgenis/vip-report-template 3.0.0-beta2 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "3.0.0-beta2",
+  "version": "3.0.0",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",

package/src/components/Anchor.tsx

@@ -1,8 +1,8 @@
-import { Component } from "solid-js";
+import { Component, JSXElement } from "solid-js";
 
 export const Anchor: Component<{
   href: string;
-  value: string | number;
+  value: string | number | JSXElement;
 }> = (props) => {
   return (
     <a href={props.href} target="_blank" rel="noopener noreferrer nofollow">

package/src/components/SampleTable.tsx

@@ -2,6 +2,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 { Anchor } from "./Anchor";
 
 function getAffectedStatusLabel(affectedStatus: string) {
   let label;
@@ -96,15 +97,14 @@ export const SampleTable: Component<{
                   </td>
                   <td>
                     <Show when={getPhenotypes(sample.data.person.individualId).length > 0}>
-                      <Link
+                      <Anchor
                         href={`https://vibe.molgeniscloud.org/?phenotypes=${getPhenotypes(
                           sample.data.person.individualId
                         )
                           .map((feature) => feature.type.id)
                           .join(",")}`}
-                      >
-                        <i class="fas fa-external-link" />
-                      </Link>
+                        value={<i class="fas fa-external-link" />}
+                      />
                     </Show>
                   </td>
                 </tr>

package/src/components/VariantInfoTable.tsx

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

package/src/components/VariantsTable.tsx

@@ -109,7 +109,12 @@ export const VariantsTable: Component<{
                                   {(value, j) => (
                                     <>
                                       {j() !== 0 && <br />}
-                                      <Info info={value[i()]} infoMetadata={infoFieldNested} variant={record.data} />
+                                      <Info
+                                        info={value[i()]}
+                                        infoMetadata={infoFieldNested}
+                                        variant={record.data}
+                                        href={`/variants/${record.id}/consequences/${j()}`}
+                                      />
                                     </>
                                   )}
                                 </For>

package/src/components/filter/FilterCategorical.tsx

@@ -16,6 +16,12 @@ export const FilterCategorical: Component<{
   onClear: (event: FilterClearEvent) => void;
 }> = (props) => {
   const group: CheckboxGroup = {};
+  if (props.query !== undefined) {
+    (props.query?.args as string[]).forEach((key) => {
+      group[key] = true;
+    });
+  }
+
   const nullValue = "__null";
 
   // enable null category for any_has_any case if someone asks for it (requires query to be composed)

package/src/mocks/GRCh37/static.ts

@@ -136,7 +136,7 @@ export const samplesFamily = {
         paternalId: "0",
         maternalId: "0",
         sex: "MALE",
-        affectedStatus: "AFFECTED",
+        affectedStatus: "UNAFFECTED",
       },
       index: 1,
       proband: false,
@@ -175,18 +175,5 @@ export const samplesFamily = {
         id: "MotherHasQuiteALongName",
       },
     },
-    {
-      phenotypicFeaturesList: [
-        {
-          type: {
-            id: "HP:0000951",
-            label: "HP:0000951",
-          },
-        },
-      ],
-      subject: {
-        id: "Father",
-      },
-    },
   ],
 };

package/src/views/SampleVariant.tsx

@@ -15,6 +15,7 @@ import { SampleVariantRouteData } from "./data/SampleVariantData";
 import { getSampleLabel } from "../utils/sample";
 import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
 import { Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Abbr } from "../components/Abbr";
 
 export const SampleVariantView: Component = () => {
   const { sample, variant } = useRouteData<SampleVariantRouteData>();
@@ -75,7 +76,7 @@ export const SampleVariant: Component<{
         >
           <div class="column is-3">
             <h1 class="title is-5">Info</h1>
-            <VariantInfoTable infoValues={props.record.data.n} infoFields={props.recordsMeta.info} />
+            <VariantInfoTable infoFields={props.recordsMeta.info} record={props.record.data} />
           </div>
         </Show>
         <div class="column">
@@ -98,7 +99,9 @@ export const SampleVariant: Component<{
             {(infoField) => (
               <>
                 <h1 class="title is-5">{infoField.id}</h1>
-                <p class="mb-4">{infoField.description}</p>
+                <p class="mb-4">
+                  <Abbr value={infoField.description as string} title={infoField.description as string} />
+                </p>
                 <VariantInfoNestedTable
                   infoValue={props.record.data.n[infoField.id] as unknown as Value[][]}
                   infoField={infoField}

package/src/views/SampleVariantConsequence.tsx

@@ -84,7 +84,7 @@ export const SampleVariantConsequence: Component<{
         </div>
         <div class="column is-3">
           <h1 class="title is-5">Info</h1>
-          <VariantInfoTable infoValues={props.variant.data.n} infoFields={props.recordsMeta.info} />
+          <VariantInfoTable infoFields={props.recordsMeta.info} record={props.variant.data} />
         </div>
         <div class="column">
           <h1 class="title is-5">Samples</h1>

package/src/views/SampleVariants.tsx

@@ -70,7 +70,7 @@ export const SampleVariants: Component<{
 
   if (getStateVariants()?.filterQueries === undefined) {
     const hpoField = props.recordsMeta.info?.CSQ?.nested?.items?.find((field) => field.id === "HPO");
-    if (hpoField) {
+    if (hpoField && props.samplePhenotypes.length > 0) {
       actions.setSampleVariantsFilterQuery(props.sample, {
         selector: infoSelector(hpoField),
         operator: "any_has_any",

package/src/views/Samples.tsx

@@ -15,7 +15,7 @@ export const Samples: Component = () => {
   const onSearchChange = (search: string) =>
     setParams({
       page: 0,
-      query: search !== "" ? { selector: ["person", "individualId"], operator: "==", args: search } : undefined,
+      query: search !== "" ? { selector: ["person", "individualId"], operator: "~=", args: search } : undefined,
     });
   const onProbandFilterChange = (event: CheckboxEvent) => {
     setParams({

package/src/views/Variant.tsx

@@ -35,7 +35,7 @@ export const Variant: Component = () => {
           >
             <div class="column is-3">
               <h1 class="title is-5">Info</h1>
-              <VariantInfoTable infoValues={variant().data.n} infoFields={recordsMetadata().info} />
+              <VariantInfoTable infoFields={recordsMetadata().info} record={variant().data} />
             </div>
           </Show>
         </div>

package/src/views/VariantConsequence.tsx

@@ -61,7 +61,7 @@ export const VariantConsequence: Component = () => {
         </div>
         <div class="column">
           <h1 class="title is-5">Info</h1>
-          <VariantInfoTable infoValues={variant().data.n} infoFields={recordsMetadata().info} />
+          <VariantInfoTable infoFields={recordsMetadata().info} record={variant().data} />
         </div>
       </div>
     </Show>