@molgenis/vip-report-template 3.0.0 → 3.1.2

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 infoFields={props.recordsMeta.info} record={props.variant.data} />
+          <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,14 +1,20 @@
 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";
 import { Pager } from "../components/record/Pager";
 import { RecordDownload } from "../components/record/RecordDownload";
-import { createQuery, infoSelector, infoSortPath, sampleSelector } from "../utils/query";
+import { createSampleQuery, 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,6 +61,7 @@ export const SampleVariants: Component<{
   samplePhenotypes: PhenotypicFeature[];
   pedigreeSamples: Item<Sample>[];
   recordsMeta: Metadata;
+  htsFileMeta: HtsFileMetadata;
 }> = (props) => {
   const [state, actions] = useStore();
 
@@ -113,7 +122,6 @@ export const SampleVariants: Component<{
       "Consequence",
       "SYMBOL",
       "InheritanceModesGene",
-      "IncompletePenetrance",
       "HPO",
       "HGVSc",
       "HGVSp",
@@ -121,7 +129,7 @@ export const SampleVariants: Component<{
       "VIPC",
       "UMCG_CL",
       "VKGL_CL",
-      "CLIN_SIG",
+      "clinVar_CLNSIG",
       "gnomAD_AF",
       "gnomAD_HN",
       "PUBMED",
@@ -157,7 +165,7 @@ export const SampleVariants: Component<{
 
   const params = (): Params => {
     return {
-      query: createQuery(searchQuery(), filterQueries(), props.recordsMeta) || undefined,
+      query: createSampleQuery(props.sample, searchQuery(), filterQueries(), props.recordsMeta) || undefined,
       sort: sort() || undefined,
       page: page() || undefined,
       size: pageSize() || undefined,
@@ -238,6 +246,7 @@ export const SampleVariants: Component<{
                 records={records.items}
                 recordsMetadata={props.recordsMeta}
                 nestedFields={infoFields()}
+                htsFileMeta={props.htsFileMeta}
               />
             )}
           </Show>

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 infoFields={recordsMetadata().info} record={variant().data} />
+              <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 infoFields={recordsMetadata().info} record={variant().data} />
+          <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,6 +33,7 @@ export const VariantsView: Component = () => {
 
 export const Variants: Component<{
   recordsMeta: Metadata;
+  htsFileMeta: HtsFileMetadata;
 }> = (props) => {
   const [state, actions] = useStore();
 
@@ -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()} />}</>;
-};