@molgenis/vip-report-template 3.0.0-beta → 3.1.0

package/src/views/Home.tsx

@@ -1,7 +1,7 @@
 import { Component, createResource, createSignal, For, Show } from "solid-js";
 import { Breadcrumb } from "../components/Breadcrumb";
 import { Item, Phenotype, PhenotypicFeature } from "@molgenis/vip-report-api/src/Api";
-import { HpoTerm } from "../components/record/info/HpoTerm";
+import { HpoTerm } from "../components/HpoTerm";
 import {
   EMPTY_APP_METADATA,
   EMPTY_HTS_FILE_METADATA,

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} />
           </div>
         </Show>
         <div class="column">
@@ -88,7 +89,7 @@ export const SampleVariant: Component<{
               props.sample.data,
               props.pedigreeSamples.map((item) => item.data)
             )}
-            record={props.record.data}
+            record={props.record}
           />
         </div>
       </div>
@@ -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

@@ -1,7 +1,13 @@
 import { Component, createResource, Show } from "solid-js";
 import { useRouteData } from "solid-app-router";
 import { Loader } from "../components/Loader";
-import { fetchDecisionTree, fetchPedigreeSamples, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
+import {
+  fetchDecisionTree,
+  fetchHtsFileMetadata,
+  fetchPedigreeSamples,
+  fetchRecordsMeta,
+  getRecordLabel,
+} from "../utils/ApiUtils";
 import { VariantTable } from "../components/VariantTable";
 import { VariantInfoTable } from "../components/VariantInfoTable";
 import { VariantSampleTable } from "../components/VariantSampleTable";
@@ -22,6 +28,7 @@ export const SampleVariantConsequenceView: Component = () => {
   const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
   const [recordsMeta] = createResource(fetchRecordsMeta);
   const [decisionTree] = createResource(fetchDecisionTree, { initialValue: null });
+  const [htsFileMeta] = createResource(fetchHtsFileMetadata);
 
   return (
     <Show when={sample() && variant()} fallback={<Loader />}>
@@ -34,7 +41,7 @@ export const SampleVariantConsequenceView: Component = () => {
           { text: `Consequence #${consequenceId}` },
         ]}
       />
-      <Show when={pedigreeSamples() && recordsMeta()} fallback={<Loader />}>
+      <Show when={pedigreeSamples() && recordsMeta() && htsFileMeta()} fallback={<Loader />}>
         <SampleVariantConsequence
           sample={sample()!}
           pedigreeSamples={pedigreeSamples()!.items}
@@ -64,7 +71,7 @@ export const SampleVariantConsequence: Component<{
           <ConsequenceTable
             csqMetadata={props.recordsMeta.info.CSQ.nested !== undefined ? props.recordsMeta.info.CSQ.nested.items : []}
             csqValues={getSpecificConsequence(props.variant.data.n.CSQ as ValueArray, props.consequenceId)}
-            record={props.variant.data}
+            record={props.variant}
           />
         </div>
         {props.decisionTree !== null && (
@@ -84,7 +91,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} />
         </div>
         <div class="column">
           <h1 class="title is-5">Samples</h1>
@@ -96,7 +103,7 @@ export const SampleVariantConsequence: Component<{
               props.sample.data,
               props.pedigreeSamples.map((item) => item.data)
             )}
-            record={props.variant.data}
+            record={props.variant}
           />
         </div>
       </div>

package/src/views/SampleVariants.tsx

@@ -1,6 +1,6 @@
 import { Component, createMemo, createResource, Show } from "solid-js";
 import { useRouteData } from "solid-app-router";
-import { Item, Params, PhenotypicFeature, Sample, SortPath } from "@molgenis/vip-report-api/src/Api";
+import { HtsFileMetadata, Item, Params, PhenotypicFeature, Sample, SortPath } from "@molgenis/vip-report-api/src/Api";
 import { Loader } from "../components/Loader";
 import { SearchBox } from "../components/SearchBox";
 import { Sort, SortEvent } from "../components/Sort";
@@ -8,7 +8,13 @@ import { Pager } from "../components/record/Pager";
 import { RecordDownload } from "../components/record/RecordDownload";
 import { createQuery, infoSelector, infoSortPath, sampleSelector } from "../utils/query";
 import { VariantsSampleTable } from "../components/VariantsSampleTable";
-import { fetchPedigreeSamples, fetchPhenotypicFeatures, fetchRecords, fetchRecordsMeta } from "../utils/ApiUtils";
+import {
+  fetchHtsFileMetadata,
+  fetchPedigreeSamples,
+  fetchPhenotypicFeatures,
+  fetchRecords,
+  fetchRecordsMeta,
+} from "../utils/ApiUtils";
 import { Breadcrumb } from "../components/Breadcrumb";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { Filters } from "../components/filter/Filters";
@@ -26,6 +32,7 @@ export const SampleVariantsView: Component = () => {
   const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
   const [samplePhenotypes] = createResource(sample, fetchPhenotypicFeatures);
   const [recordsMeta] = createResource(fetchRecordsMeta);
+  const [htsFileMeta] = createResource(fetchHtsFileMetadata);
 
   return (
     <Show when={sample()} fallback={<Loader />}>
@@ -36,12 +43,13 @@ export const SampleVariantsView: Component = () => {
           { text: "Variants" },
         ]}
       />
-      <Show when={pedigreeSamples() && samplePhenotypes() && recordsMeta()} fallback={<Loader />}>
+      <Show when={pedigreeSamples() && samplePhenotypes() && recordsMeta() && htsFileMeta()} fallback={<Loader />}>
         <SampleVariants
           sample={sample()!}
           samplePhenotypes={samplePhenotypes()!}
           pedigreeSamples={pedigreeSamples()!.items}
           recordsMeta={recordsMeta()!}
+          htsFileMeta={htsFileMeta()!}
         />
       </Show>
     </Show>
@@ -53,20 +61,25 @@ export const SampleVariants: Component<{
   samplePhenotypes: PhenotypicFeature[];
   pedigreeSamples: Item<Sample>[];
   recordsMeta: Metadata;
+  htsFileMeta: HtsFileMetadata;
 }> = (props) => {
   const [state, actions] = useStore();
 
+  function getStateVariants() {
+    return state.samples ? state.samples[props.sample.id]?.variants : undefined;
+  }
+
   // state initialization - start
-  if (state.samples[props.sample.id]?.variants?.page === undefined) {
+  if (getStateVariants()?.page === undefined) {
     actions.setSampleVariantsPage(props.sample, 0);
   }
-  if (state.samples[props.sample.id]?.variants?.pageSize === undefined) {
+  if (getStateVariants()?.pageSize === undefined) {
     actions.setSampleVariantsPageSize(props.sample, 20);
   }
 
-  if (state.samples[props.sample.id]?.variants?.filterQueries === undefined) {
+  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",
@@ -92,7 +105,7 @@ export const SampleVariants: Component<{
     }
   }
 
-  if (state.samples[props.sample.id]?.variants?.sort === undefined) {
+  if (getStateVariants()?.sort === undefined) {
     const capiceScField = props.recordsMeta.info?.CSQ?.nested?.items?.find((field) => field.id === "CAPICE_SC");
     if (capiceScField) {
       actions.setSampleVariantsSort(props.sample, {
@@ -109,7 +122,6 @@ export const SampleVariants: Component<{
       "Consequence",
       "SYMBOL",
       "InheritanceModesGene",
-      "IncompletePenetrance",
       "HPO",
       "HGVSc",
       "HGVSp",
@@ -117,7 +129,7 @@ export const SampleVariants: Component<{
       "VIPC",
       "UMCG_CL",
       "VKGL_CL",
-      "CLIN_SIG",
+      "clinVar_CLNSIG",
       "gnomAD_AF",
       "gnomAD_HN",
       "PUBMED",
@@ -137,11 +149,11 @@ export const SampleVariants: Component<{
       : [];
   });
 
-  const page = () => state.samples[props.sample.id]?.variants?.page;
-  const pageSize = () => state.samples[props.sample.id]?.variants?.pageSize;
-  const searchQuery = () => state.samples[props.sample.id]?.variants?.searchQuery;
-  const filterQueries = () => state.samples[props.sample.id]?.variants?.filterQueries;
-  const sort = () => state.samples[props.sample.id]?.variants?.sort;
+  const page = () => getStateVariants()?.page;
+  const pageSize = () => getStateVariants()?.pageSize;
+  const searchQuery = () => getStateVariants()?.searchQuery;
+  const filterQueries = () => getStateVariants()?.filterQueries;
+  const sort = () => getStateVariants()?.sort;
 
   const onPageChange = (page: number) => actions.setSampleVariantsPage(props.sample, page);
   const onSearchChange = (search: string) => actions.setSampleVariantsSearchQuery(props.sample, search);
@@ -234,6 +246,7 @@ export const SampleVariants: Component<{
                 records={records.items}
                 recordsMetadata={props.recordsMeta}
                 nestedFields={infoFields()}
+                htsFileMeta={props.htsFileMeta}
               />
             )}
           </Show>

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()} />
             </div>
           </Show>
         </div>

package/src/views/VariantConsequence.tsx

@@ -40,7 +40,7 @@ export const VariantConsequence: Component = () => {
       <div class="columns">
         <div class="column is-6">
           <h1 class="title is-5">Consequence</h1>
-          <ConsequenceTable csqMetadata={csqFields()} csqValues={csqValues()} record={variant().data} />
+          <ConsequenceTable csqMetadata={csqFields()} csqValues={csqValues()} record={variant()} />
         </div>
         <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)}>
           {(decisionTree) => (
@@ -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()} />
         </div>
       </div>
     </Show>

package/src/views/Variants.tsx

@@ -6,10 +6,10 @@ import { InfoFilters } from "../components/filter/InfoFilters";
 import { Sort, SortEvent } from "../components/Sort";
 import { RecordDownload } from "../components/record/RecordDownload";
 import { Breadcrumb } from "../components/Breadcrumb";
-import { fetchRecords, fetchRecordsMeta } from "../utils/ApiUtils";
+import { fetchHtsFileMetadata, fetchRecords, fetchRecordsMeta } from "../utils/ApiUtils";
 import { flattenFieldMetadata } from "../utils/field";
 import { DIRECTION_ASCENDING, DIRECTION_DESCENDING } from "../utils/sortUtils";
-import { Params, SortPath } from "@molgenis/vip-report-api/src/Api";
+import { HtsFileMetadata, Params, SortPath } from "@molgenis/vip-report-api/src/Api";
 import { FilterChangeEvent, FilterClearEvent } from "../components/filter/Filter";
 import { useStore } from "../store";
 import { createQuery, infoSortPath } from "../utils/query";
@@ -19,12 +19,13 @@ import { arrayEquals } from "../utils/utils";
 
 export const VariantsView: Component = () => {
   const [recordsMeta] = createResource(fetchRecordsMeta);
+  const [htsFileMeta] = createResource(fetchHtsFileMetadata);
 
   return (
     <>
       <Breadcrumb items={[{ text: "Variants" }]} />
-      <Show when={recordsMeta()} fallback={<Loader />}>
-        <Variants recordsMeta={recordsMeta()!} />
+      <Show when={recordsMeta() && htsFileMeta} fallback={<Loader />}>
+        <Variants recordsMeta={recordsMeta()!} htsFileMeta={htsFileMeta()!} />
       </Show>
     </>
   );
@@ -32,14 +33,15 @@ export const VariantsView: Component = () => {
 
 export const Variants: Component<{
   recordsMeta: Metadata;
+  htsFileMeta: HtsFileMetadata;
 }> = (props) => {
   const [state, actions] = useStore();
 
-  const page = () => state.variants.page;
-  const pageSize = () => state.variants.pageSize;
-  const searchQuery = () => state.variants.searchQuery;
-  const filterQueries = () => state.variants.filterQueries;
-  const sort = () => state.variants.sort;
+  const page = () => state.variants?.page;
+  const pageSize = () => state.variants?.pageSize;
+  const searchQuery = () => state.variants?.searchQuery;
+  const filterQueries = () => state.variants?.filterQueries;
+  const sort = () => state.variants?.sort;
 
   const onPageChange = (page: number) => actions.setVariantsPage(page);
   const onSearchChange = (search: string) => actions.setVariantsSearchQuery(search);
@@ -114,7 +116,11 @@ export const Variants: Component<{
             </div>
           </div>
           <div class="columns">
-            <VariantsTable records={records()!.items} recordsMetadata={props.recordsMeta} />
+            <VariantsTable
+              records={records()!.items}
+              recordsMetadata={props.recordsMeta}
+              htsFileMeta={props.htsFileMeta}
+            />
           </div>
         </div>
       </div>

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

@@ -1,12 +0,0 @@
-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) => {
-  const hpoTerm = () => props.ontologyClass.id;
-  const label = () => props.ontologyClass.label;
-
-  return <>{<Anchor href={`https://hpo.jax.org/app/browse/term/${hpoTerm()}`} value={label()} />}</>;
-};