@molgenis/vip-report-template 6.0.1 → 6.1.1

package/src/views/Home.tsx

@@ -1,121 +1,33 @@
-import { Component, createResource, createSignal, For, Show } from "solid-js";
+import { Component } from "solid-js";
 import { Breadcrumb } from "../components/Breadcrumb";
-import { Item, Phenotype, PhenotypicFeature } from "@molgenis/vip-report-api/src/Api";
-import { HpoTerm } from "../components/HpoTerm";
-import {
-  EMPTY_APP_METADATA,
-  EMPTY_HTS_FILE_METADATA,
-  EMPTY_PARAMS,
-  EMPTY_PHENOTYPES,
-  EMPTY_RECORDS_METADATA,
-  EMPTY_RECORDS_PAGE,
-  EMPTY_SAMPLES_PAGE,
-  fetchAppMetadata,
-  fetchHtsFileMetadata,
-  fetchPhenotypes,
-  fetchRecords,
-  fetchRecordsMeta,
-  fetchSamples,
-} from "../utils/ApiUtils";
-import { getHeaderValue } from "../utils/viewUtils";
-import { Loader } from "../components/Loader";
-import { VcfHeaderRow } from "../components/VcfHeaderRow";
+import { useNavigate } from "@solidjs/router";
 
 export const Home: Component = () => {
-  const [params] = createSignal(EMPTY_PARAMS);
-  const [samples] = createResource(params, fetchSamples, { initialValue: EMPTY_SAMPLES_PAGE });
-  const [records] = createResource(params, fetchRecords, { initialValue: EMPTY_RECORDS_PAGE });
-  const [recordsMetadata] = createResource(params, fetchRecordsMeta, { initialValue: EMPTY_RECORDS_METADATA });
-  const [phenotypes] = createResource(params, fetchPhenotypes, { initialValue: EMPTY_PHENOTYPES });
-  const [htsFileMetadata] = createResource(params, fetchHtsFileMetadata, { initialValue: EMPTY_HTS_FILE_METADATA });
-  const [appMetadata] = createResource(params, fetchAppMetadata, { initialValue: EMPTY_APP_METADATA });
+  const navigate = useNavigate();
 
   return (
-    <Show
-      when={
-        !samples.loading &&
-        !records.loading &&
-        !recordsMetadata.loading &&
-        !phenotypes.loading &&
-        !htsFileMetadata.loading &&
-        !appMetadata.loading
-      }
-      fallback={<Loader />}
-    >
+    <>
       <Breadcrumb items={[]} />
-      <div class="table-container">
-        <table class="table is-narrow">
-          <thead>
-            <tr>
-              <th colSpan={2}>Software metadata</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th>Name:</th>
-              <td>{appMetadata().name}</td>
-            </tr>
-            <tr>
-              <th>Version:</th>
-              <td>{appMetadata().version}</td>
-            </tr>
-            <tr>
-              <th>Arguments:</th>
-              <td>{appMetadata().args}</td>
-            </tr>
-            <VcfHeaderRow value={getHeaderValue("VIP_Version", recordsMetadata().lines)} title={"VIP Version"} />
-            <VcfHeaderRow value={getHeaderValue("VIP_Command", recordsMetadata().lines)} title={"VIP Command"} />
-          </tbody>
-        </table>
+      <div class="columns is-centered">
+        <div class="column is-three-quarters-widescreen">
+          <p class="title is-2">Report</p>
+          <p class="subtitle is-4">
+            Analyze annotated, classified and filtered variants to solve rare-disease patients
+          </p>
+          <div class="columns">
+            <div class="column">
+              <div class="buttons are-large">
+                <button class="button is-large" onClick={() => navigate("/variants")}>
+                  Explore Variants without samples
+                </button>
+                <button class="button is-large is-primary" onClick={() => navigate("/samples")}>
+                  Explore Variants for samples
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <div class="table-container">
-        <table class="table is-narrow">
-          <thead>
-            <tr>
-              <th colSpan={2}>Input metadata</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th>Filename:</th>
-              <td>{htsFileMetadata().uri}</td>
-            </tr>
-            <tr>
-              <th>Assembly:</th>
-              <td>{htsFileMetadata().genomeAssembly}</td>
-            </tr>
-            <tr>
-              <th>Number of records:</th>
-              <td>{records().total}</td>
-            </tr>
-            <tr>
-              <th>Number of samples:</th>
-              <td>{samples().total}</td>
-            </tr>
-            <tr>
-              <th>Phenotypes:</th>
-              <td>
-                <For each={phenotypes().items}>
-                  {(item: Item<Phenotype>) => (
-                    <>
-                      <b>{item.data.subject.id}: </b>
-                      <For each={item.data.phenotypicFeaturesList}>
-                        {(phenotypicFeature: PhenotypicFeature, i) => (
-                          <>
-                            {i() > 0 ? ", " : ""}
-                            <HpoTerm ontologyClass={phenotypicFeature.type} />
-                          </>
-                        )}
-                      </For>
-                      <br />
-                    </>
-                  )}
-                </For>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </Show>
+    </>
   );
 };

package/src/views/Sample.tsx

@@ -1,26 +1,30 @@
 import { Component, For, Show } from "solid-js";
-import { Link, useRouteData } from "@solidjs/router";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
 import { Breadcrumb } from "../components/Breadcrumb";
-import { SampleRouteData } from "./data/SampleData";
+import { getSample } from "./data/data";
 
-export const Sample: Component = () => {
-  const { sample } = useRouteData<SampleRouteData>();
+export const Sample: Component<RouteSectionProps> = (props) => {
+  const sample = createAsync(() => getSample(Number(props.params.sampleId)));
 
   return (
-    <Show when={!sample.loading} fallback={<Loader />}>
-      <Breadcrumb items={[{ href: "/samples", text: "Samples" }, { text: sample().data.person.individualId }]} />
-      <p class="has-text-weight-semibold">Sample</p>
-      <div class="columns">
-        <div class="column is-1">
-          <For each={Object.keys(sample().data.person)}>{(key) => <p>{key}</p>}</For>
-        </div>
-        <div class="column is-1">
-          <For each={Object.values(sample().data.person)}>{(value) => <p>{value}</p>}</For>
-        </div>
-      </div>
-      <br />
-      <Link href={`/samples/${sample().id}/variants`}>Variants</Link>
+    <Show when={sample()} fallback={<Loader />}>
+      {(sample) => (
+        <>
+          <Breadcrumb items={[{ href: "/samples", text: "Samples" }, { text: sample().data.person.individualId }]} />
+          <p class="has-text-weight-semibold">Sample</p>
+          <div class="columns">
+            <div class="column is-1">
+              <For each={Object.keys(sample().data.person)}>{(key) => <p>{key}</p>}</For>
+            </div>
+            <div class="column is-1">
+              <For each={Object.values(sample().data.person)}>{(value) => <p>{value}</p>}</For>
+            </div>
+          </div>
+          <br />
+          <a href={`/samples/${sample().id}/variants`}>Variants</a>
+        </>
+      )}
     </Show>
   );
 };

package/src/views/SampleVariant.tsx

@@ -1,5 +1,5 @@
 import { Component, createResource, For, Show } from "solid-js";
-import { useRouteData } from "@solidjs/router";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
 import { GenomeBrowser } from "../components/GenomeBrowser";
 import { fetchPedigreeSamples, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
@@ -11,36 +11,51 @@ import { getNestedInfoFieldsWithValues } from "../utils/field";
 import { VariantSampleTable } from "../components/VariantSampleTable";
 import { Breadcrumb } from "../components/Breadcrumb";
 import { getRecordSamples } from "../utils/viewUtils";
-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";
+import { getSample, getVariant } from "./data/data";
 
-export const SampleVariantView: Component = () => {
-  const { sample, variant } = useRouteData<SampleVariantRouteData>();
+export const SampleVariantView: Component<RouteSectionProps> = (props) => {
+  const sample = createAsync(() => getSample(Number(props.params.sampleId)));
+  const variant = createAsync(() => getVariant(Number(props.params.variantId)));
 
   const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
   const [recordsMeta] = createResource(fetchRecordsMeta);
 
   return (
-    <Show when={sample() && variant()} fallback={<Loader />}>
-      <Breadcrumb
-        items={[
-          { href: "/samples", text: "Samples" },
-          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
-          { href: `/samples/${sample()!.id}/variants`, text: "Variants" },
-          { text: getRecordLabel(variant()!) },
-        ]}
-      />
-      <Show when={pedigreeSamples() && recordsMeta()} fallback={<Loader />}>
-        <SampleVariant
-          sample={sample()!}
-          pedigreeSamples={pedigreeSamples()!.items}
-          recordsMeta={recordsMeta()!}
-          record={variant()!}
-        />
-      </Show>
+    <Show when={sample()} fallback={<Loader />}>
+      {(sample) => (
+        <Show when={variant()} fallback={<Loader />}>
+          {(variant) => (
+            <>
+              <Breadcrumb
+                items={[
+                  { href: "/samples", text: "Samples" },
+                  { href: `/samples/${sample().id}`, text: getSampleLabel(sample().data) },
+                  { href: `/samples/${sample().id}/variants`, text: "Variants" },
+                  { text: getRecordLabel(variant()) },
+                ]}
+              />
+              <Show when={pedigreeSamples()} fallback={<Loader />}>
+                {(pedigreeSamples) => (
+                  <Show when={recordsMeta()} fallback={<Loader />}>
+                    {(recordsMeta) => (
+                      <SampleVariant
+                        sample={sample()}
+                        pedigreeSamples={pedigreeSamples().items}
+                        recordsMeta={recordsMeta()}
+                        record={variant()}
+                      />
+                    )}
+                  </Show>
+                )}
+              </Show>
+            </>
+          )}
+        </Show>
+      )}
     </Show>
   );
 };

package/src/views/SampleVariantConsequence.tsx

@@ -1,13 +1,7 @@
 import { Component, createResource, Show } from "solid-js";
-import { useRouteData } from "@solidjs/router";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
-import {
-  fetchDecisionTree,
-  fetchHtsFileMetadata,
-  fetchPedigreeSamples,
-  fetchRecordsMeta,
-  getRecordLabel,
-} from "../utils/ApiUtils";
+import { fetchDecisionTree, fetchPedigreeSamples, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
 import { VariantTable } from "../components/VariantTable";
 import { VariantInfoTable } from "../components/VariantInfoTable";
 import { VariantSampleTable } from "../components/VariantSampleTable";
@@ -16,41 +10,58 @@ import { ConsequenceTable } from "../components/ConsequenceTable";
 import { getRecordSamples, getSpecificConsequence } from "../utils/viewUtils";
 import { DecisionTreePath } from "../components/tree/DecisionTreePath";
 import { getDecisionTreePath } from "../utils/decisionTreeUtils";
-import { SampleVariantConsequenceRouteData } from "./data/SampleVariantConsequenceData";
 import { getSampleLabel } from "../utils/sample";
 import { DecisionTree, Item, Sample } from "@molgenis/vip-report-api/src/Api";
 import { Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
 import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { getSample, getVariant } from "./data/data";
 
-export const SampleVariantConsequenceView: Component = () => {
-  const { sample, variant, consequenceId } = useRouteData<SampleVariantConsequenceRouteData>();
-
+export const SampleVariantConsequenceView: Component<RouteSectionProps> = (props) => {
+  const sample = createAsync(() => getSample(Number(props.params.sampleId)));
+  const variant = createAsync(() => getVariant(Number(props.params.variantId)));
+  const consequenceId = () => Number(props.params.consequenceId);
   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 />}>
-      <Breadcrumb
-        items={[
-          { href: "/samples", text: "Samples" },
-          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
-          { href: `/samples/${sample()!.id}/variants`, text: "Variants" },
-          { href: `/samples/${sample()!.id}/variants/${variant()!.id}`, text: getRecordLabel(variant()!) },
-          { text: `Consequence #${consequenceId}` },
-        ]}
-      />
-      <Show when={pedigreeSamples() && recordsMeta() && htsFileMeta()} fallback={<Loader />}>
-        <SampleVariantConsequence
-          sample={sample()!}
-          pedigreeSamples={pedigreeSamples()!.items}
-          recordsMeta={recordsMeta()!}
-          variant={variant()!}
-          consequenceId={consequenceId}
-          decisionTree={decisionTree()}
-        />
-      </Show>
+    <Show when={sample()} fallback={<Loader />}>
+      {(sample) => (
+        <Show when={variant()} fallback={<Loader />}>
+          {(variant) => (
+            <>
+              <Breadcrumb
+                items={[
+                  { href: "/samples", text: "Samples" },
+                  { href: `/samples/${sample().id}`, text: getSampleLabel(sample().data) },
+                  { href: `/samples/${sample().id}/variants`, text: "Variants" },
+                  {
+                    href: `/samples/${sample().id}/variants/${variant().id}`,
+                    text: getRecordLabel(variant()),
+                  },
+                  { text: `Consequence #${consequenceId()}` },
+                ]}
+              />
+              <Show when={pedigreeSamples()} fallback={<Loader />}>
+                {(pedigreeSamples) => (
+                  <Show when={recordsMeta()} fallback={<Loader />}>
+                    {(recordsMeta) => (
+                      <SampleVariantConsequence
+                        sample={sample()}
+                        pedigreeSamples={pedigreeSamples().items}
+                        recordsMeta={recordsMeta()}
+                        variant={variant()}
+                        consequenceId={consequenceId()}
+                        decisionTree={decisionTree()}
+                      />
+                    )}
+                  </Show>
+                )}
+              </Show>
+            </>
+          )}
+        </Show>
+      )}
     </Show>
   );
 };

package/src/views/SampleVariants.tsx

@@ -1,5 +1,4 @@
-import { Component, createMemo, createResource, Show } from "solid-js";
-import { useRouteData } from "@solidjs/router";
+import { Component, createMemo, createResource, createSignal, onMount, Show } from "solid-js";
 import {
   HtsFileMetadata,
   Item,
@@ -35,16 +34,24 @@ import { Breadcrumb } from "../components/Breadcrumb";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { FilterChangeEvent, FilterClearEvent, Filters } from "../components/filter/Filters";
 import { DIRECTION_ASCENDING, DIRECTION_DESCENDING } from "../utils/sortUtils";
-import { SampleRouteData } from "./data/SampleData";
 import { useStore } from "../store";
 import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
-import { getSampleLabel } from "../utils/sample";
+import {
+  getSampleAffectedStatusLabel,
+  getSampleFamilyMembersWithoutParents,
+  getSampleFather,
+  getSampleLabel,
+  getSampleMother,
+  getSampleSexLabel,
+} from "../utils/sample";
 import { arrayEquals } from "../utils/utils";
 import { getAllelicBalanceQuery } from "../components/filter/FilterAllelicBalance";
 import { RecordsPerPage, RecordsPerPageEvent } from "../components/RecordsPerPage";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
+import { getSample } from "./data/data";
 
-export const SampleVariantsView: Component = () => {
-  const { sample } = useRouteData<SampleRouteData>();
+export const SampleVariantsView: Component<RouteSectionProps> = (props) => {
+  const sample = createAsync(() => getSample(Number(props.params.sampleId)));
 
   const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
   const [samplePhenotypes] = createResource(sample, fetchPhenotypicFeatures);
@@ -56,7 +63,7 @@ export const SampleVariantsView: Component = () => {
       <Breadcrumb
         items={[
           { href: "/samples", text: "Samples" },
-          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
+          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!.data) },
           { text: "Variants" },
         ]}
       />
@@ -82,6 +89,20 @@ export const SampleVariants: Component<{
 }> = (props) => {
   const [state, actions] = useStore();
 
+  const samples = createMemo(() => [props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]);
+
+  const [proband, setProband] = createSignal<Sample | undefined>();
+  const [father, setFather] = createSignal<Sample | undefined>();
+  const [mother, setMother] = createSignal<Sample | undefined>();
+  const [otherFamilyMembers, setOtherFamilyMembers] = createSignal<Sample[]>([]);
+
+  onMount(() => {
+    setProband(props.sample.data);
+    setMother(getSampleMother(proband() as Sample, samples()));
+    setFather(getSampleFather(proband() as Sample, samples()));
+    setOtherFamilyMembers(getSampleFamilyMembersWithoutParents(proband() as Sample, samples()));
+  });
+
   function getStateVariants() {
     return state.sampleVariants ? state.sampleVariants[props.sample.id]?.variants : undefined;
   }
@@ -311,9 +332,51 @@ export const SampleVariants: Component<{
       },
     ]);
 
+  function getTitleSampleSexLabel(sample: Sample): string {
+    const label = getSampleSexLabel(sample);
+    return label !== "?" ? label : "sex:?";
+  }
+
+  function getTitleAffectedStatusLabel(sample: Sample): string {
+    const label = getSampleAffectedStatusLabel(sample);
+    return label !== "?" ? label : "affected status:?";
+  }
+
+  const title = (): string => {
+    return `Reported variants for ${getSampleLabel(props.sample.data)} (${getTitleSampleSexLabel(props.sample.data)} ${getTitleAffectedStatusLabel(props.sample.data)})`;
+  };
+
+  const subtitle = (): string | undefined => {
+    const sampleFather = father();
+    const sampleMother = mother();
+    const sampleOtherFamilyMembers = otherFamilyMembers();
+
+    if (sampleFather === undefined && sampleMother === undefined && sampleOtherFamilyMembers.length === 0) {
+      return undefined;
+    }
+
+    const tokens: string[] = [];
+    if (sampleMother !== undefined) {
+      tokens.push(`mother (${getTitleAffectedStatusLabel(sampleMother)})`);
+    }
+    if (sampleFather !== undefined) {
+      tokens.push(`father (${getTitleAffectedStatusLabel(sampleFather)})`);
+    }
+
+    for (const familyMember of sampleOtherFamilyMembers) {
+      tokens.push(
+        `${getSampleLabel(familyMember)} (${getTitleSampleSexLabel(familyMember)} ${getTitleAffectedStatusLabel(familyMember)})`,
+      );
+    }
+
+    let str = tokens.pop() as string;
+    if (tokens.length > 0) str = `${tokens.join(", ")} and ${str}`;
+    return `Includes genotypes for ${str}`;
+  };
+
   return (
-    <div class="columns is-variable is-1">
-      <div class="column is-1-fullhd is-2">
+    <div class="variants columns is-variable is-1">
+      <div class="scrolling-div column is-1-fullhd is-2">
         <SearchBox value={searchQuery()} onInput={onSearchChange} />
         <Filters
           fields={filterInfoFields()}
@@ -323,7 +386,15 @@ export const SampleVariants: Component<{
           onClear={onFilterClear}
         />
       </div>
-      <div class="column">
+      <div class="scrolling-div column">
+        <div class="columns is-gapless">
+          <div class="column">
+            <p class="title is-3">{title()}</p>
+            <Show when={subtitle()} keyed>
+              {(subtitle) => <p class="subtitle is-5">{subtitle}</p>}
+            </Show>
+          </div>
+        </div>
         <div class="columns is-gapless">
           <div class="column is-offset-1-fullhd is-3-fullhd is-4">
             <Show when={records()} fallback={<Loader />} keyed>

package/src/views/Samples.tsx

@@ -75,42 +75,44 @@ export const Samples: Component = () => {
   return (
     <>
       <Breadcrumb items={[{ text: "Samples" }]} />
-      <Show when={samples()} fallback={<Loader />} keyed>
-        {(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 is-centered">
+        <div class="column is-three-quarters-widescreen">
+          <p class="title is-2">Samples</p>
+          <p class="subtitle is-4">Explore samples and sample variants</p>
+          <Show when={samples()} fallback={<Loader />} keyed>
+            {(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 class="columns">
+                  <div class="column is-2-widescreen is-3">
+                    <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">
+                    {!phenotypes.loading && <SampleTable samples={samples.items} phenotypes={phenotypes().items} />}
                   </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>
-          </>
-        )}
-      </Show>
+              </>
+            )}
+          </Show>
+        </div>
+      </div>
     </>
   );
 };