@molgenis/vip-report-template 6.0.1 → 6.0.2

package/package.json

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

package/src/App.tsx

@@ -45,19 +45,29 @@ const App: Component = () => {
       <nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
           <Link class="navbar-item has-text-weight-semibold" href="/">
-            VCF Report
+            Variant Interpretation Pipeline
           </Link>
         </div>
         <div class="navbar-menu">
-          <div class="navbar-start">
-            <Link class="navbar-item" href="/samples">
-              Samples
+          <div class="navbar-item has-dropdown is-hoverable">
+            <Link class="navbar-link" href="/">
+              Report
             </Link>
-            <Link class="navbar-item" href="/variants">
-              Variants
-            </Link>
-            {api.isDatasetSupport() && <DatasetDropdown />}
+            <div class="navbar-dropdown">
+              <Link class="navbar-item" href="/samples">
+                Samples
+              </Link>
+              <hr class="navbar-divider" />
+              <Link class="navbar-item" href="/variants">
+                Variants
+              </Link>
+            </div>
           </div>
+          {api.isDatasetSupport() && (
+            <div class="navbar-start">
+              <DatasetDropdown />
+            </div>
+          )}
           <div class="navbar-end">
             <Link class="navbar-item" href="/help">
               Help

package/src/__tests__/sample.test.ts

@@ -0,0 +1,184 @@
+import { describe, expect, test } from "vitest";
+import {
+  getSampleAffectedStatusLabel,
+  getSampleFamilyMembersWithoutParents,
+  getSampleFather,
+  getSampleLabel,
+  getSampleMother,
+  getSampleSexLabel,
+} from "../utils/sample";
+import { Sample } from "@molgenis/vip-report-api/src/Api";
+
+describe("sample utilities", () => {
+  const sample = {
+    person: {
+      familyId: "fam0",
+      individualId: "0",
+      maternalId: "1",
+      paternalId: "2",
+    },
+  } as Sample;
+  const motherSample = {
+    person: {
+      familyId: "fam0",
+      individualId: "1",
+    },
+  } as Sample;
+  const fatherSample = {
+    person: {
+      familyId: "fam0",
+      individualId: "2",
+    },
+  } as Sample;
+  const siblingSample = {
+    person: {
+      familyId: "fam0",
+      individualId: "3",
+      maternalId: "1",
+      paternalId: "2",
+    },
+  } as Sample;
+  const otherMotherSample = {
+    person: {
+      familyId: "fam1",
+      individualId: "1",
+    },
+  } as Sample;
+  const otherFatherSample = {
+    person: {
+      familyId: "fam1",
+      individualId: "2",
+    },
+  } as Sample;
+  const otherSiblingSample = {
+    person: {
+      familyId: "fam1",
+      individualId: "3",
+      maternalId: "1",
+      paternalId: "2",
+    },
+  } as Sample;
+
+  test("getSampleLabel", () => {
+    const individualId = "sample_label";
+    const sample = {
+      person: {
+        individualId: individualId,
+      },
+    } as Sample;
+    expect(getSampleLabel(sample)).toBe(individualId);
+  });
+
+  test("getSampleSexLabel:FEMALE", () => {
+    const sample = {
+      person: {
+        sex: "FEMALE",
+      },
+    } as Sample;
+    expect(getSampleSexLabel(sample)).toBe("female");
+  });
+
+  test("getSampleSexLabel:MALE", () => {
+    const sample = {
+      person: {
+        sex: "MALE",
+      },
+    } as Sample;
+    expect(getSampleSexLabel(sample)).toBe("male");
+  });
+
+  test("getSampleSexLabel:OTHER_SEX", () => {
+    const sample = {
+      person: {
+        sex: "OTHER_SEX",
+      },
+    } as Sample;
+    expect(getSampleSexLabel(sample)).toBe("?");
+  });
+
+  test("getSampleSexLabel:UNKNOWN_SEX", () => {
+    const sample = {
+      person: {
+        sex: "UNKNOWN_SEX",
+      },
+    } as Sample;
+    expect(getSampleSexLabel(sample)).toBe("?");
+  });
+
+  test("getSampleAffectedStatusLabel:AFFECTED", () => {
+    const sample = {
+      person: {
+        affectedStatus: "AFFECTED",
+      },
+    } as Sample;
+    expect(getSampleAffectedStatusLabel(sample)).toBe("affected");
+  });
+
+  test("getSampleAffectedStatusLabel:UNAFFECTED", () => {
+    const sample = {
+      person: {
+        affectedStatus: "UNAFFECTED",
+      },
+    } as Sample;
+    expect(getSampleAffectedStatusLabel(sample)).toBe("unaffected");
+  });
+
+  test("getSampleAffectedStatusLabel:MISSING", () => {
+    const sample = {
+      person: {
+        affectedStatus: "MISSING",
+      },
+    } as Sample;
+    expect(getSampleAffectedStatusLabel(sample)).toBe("?");
+  });
+
+  test("getSampleMother", () => {
+    expect(
+      getSampleMother(sample, [
+        sample,
+        otherSiblingSample,
+        otherFatherSample,
+        otherMotherSample,
+        siblingSample,
+        fatherSample,
+        motherSample,
+      ]),
+    ).toStrictEqual(motherSample);
+  });
+
+  test("getSampleMother:undefined", () => {
+    expect(getSampleMother(sample, [sample, otherSiblingSample, otherFatherSample, otherMotherSample])).toBeUndefined();
+  });
+
+  test("getSampleFather", () => {
+    expect(
+      getSampleFather(sample, [
+        sample,
+        otherSiblingSample,
+        otherMotherSample,
+        otherFatherSample,
+        siblingSample,
+        motherSample,
+        fatherSample,
+      ]),
+    ).toStrictEqual(fatherSample);
+  });
+
+  test("getSampleFather:undefined", () => {
+    expect(getSampleFather(sample, [sample, otherSiblingSample, otherMotherSample, otherFatherSample])).toBeUndefined();
+  });
+
+  test("getSampleFamilyMembersWithoutParents", () => {
+    expect(
+      getSampleFamilyMembersWithoutParents(sample, [
+        sample,
+        otherSiblingSample,
+        otherMotherSample,
+        otherFatherSample,
+        siblingSample,
+        motherSample,
+        fatherSample,
+      ]),
+    ).toStrictEqual([siblingSample]);
+  });
+});

package/src/components/Breadcrumb.tsx

@@ -9,13 +9,14 @@ export const Breadcrumb: Component<{
   return (
     <div class="columns is-gapless">
       <div class="column">
-        <nav class="breadcrumb">
+        <nav class="breadcrumb has-succeeds-separator">
           <ul>
             <li classList={{ "is-active": props.items.length === 0 }}>
               <Link href="/">
-                <span class="icon">
+                <span class="icon is-small mr-2">
                   <i class="fas fa-home" />
                 </span>
+                <span>Report</span>
               </Link>
             </li>
             <For each={props.items}>

package/src/components/SampleTable.tsx

@@ -1,40 +1,15 @@
-import { Link } from "@solidjs/router";
+import { Link, useNavigate } from "@solidjs/router";
 import { Component, createMemo, For, Show } from "solid-js";
 import { Item, Phenotype, PhenotypicFeature, Sample } from "@molgenis/vip-report-api/src/Api";
 import { HpoTerm } from "./HpoTerm";
 import { Anchor } from "./Anchor";
-
-function getAffectedStatusLabel(affectedStatus: string) {
-  let label;
-  switch (affectedStatus) {
-    case "AFFECTED":
-      label = "Affected";
-      break;
-    case "UNAFFECTED":
-      label = "Unaffected";
-      break;
-    default:
-      label = "?";
-      break;
-  }
-  return label;
-}
-
-function getSexLabel(sex: string) {
-  let label;
-  switch (sex) {
-    case "MALE":
-      label = "Male";
-      break;
-    case "FEMALE":
-      label = "Female";
-      break;
-    default:
-      label = "?";
-      break;
-  }
-  return label;
-}
+import {
+  getSampleAffectedStatusLabel,
+  getSampleFather,
+  getSampleLabel,
+  getSampleMother,
+  getSampleSexLabel,
+} from "../utils/sample";
 
 function mapPhenotypes(phenotypes: Item<Phenotype>[]) {
   const phenoMap: { [key: string]: PhenotypicFeature[] } = {};
@@ -48,11 +23,23 @@ export const SampleTable: Component<{
   samples: Item<Sample>[];
   phenotypes: Item<Phenotype>[];
 }> = (props) => {
+  const navigate = useNavigate();
+  const samples = createMemo(() => props.samples.map((item) => item.data));
   const phenoMap = createMemo(() => mapPhenotypes(props.phenotypes));
 
-  function getPhenotypes(sampleId: string) {
-    return phenoMap()[sampleId] !== undefined ? phenoMap()[sampleId] : [];
-  }
+  const samplePhenotypes = (sample: Sample): PhenotypicFeature[] => {
+    return phenoMap()[sample.person.individualId] ?? [];
+  };
+
+  const sampleFatherLabel = (sample: Sample): string => {
+    const sampleFather = getSampleFather(sample, samples());
+    return sampleFather ? getSampleLabel(sampleFather) : "";
+  };
+
+  const sampleMotherLabel = (sample: Sample): string => {
+    const sampleMother = getSampleMother(sample, samples());
+    return sampleMother ? getSampleLabel(sampleMother) : "";
+  };
 
   return (
     <div style={{ display: "grid" }}>
@@ -70,6 +57,7 @@ export const SampleTable: Component<{
               <th>Affected</th>
               <th>Phenotypes</th>
               <th>VIBE</th>
+              <th />
             </tr>
           </thead>
           <tbody>
@@ -78,15 +66,15 @@ export const SampleTable: Component<{
                 <tr>
                   <td>{sample.data.person.familyId}</td>
                   <td>
-                    <Link href={`/samples/${sample.id}`}>{sample.data.person.individualId}</Link>
+                    <Link href={`/samples/${sample.id}`}>{getSampleLabel(sample.data)}</Link>
                   </td>
-                  <td>{sample.data.person.paternalId}</td>
-                  <td>{sample.data.person.maternalId}</td>
+                  <td>{sampleFatherLabel(sample.data)}</td>
+                  <td>{sampleMotherLabel(sample.data)}</td>
                   <td>{sample.data.proband === true ? "True" : "False"}</td>
-                  <td>{getSexLabel(sample.data.person.sex)}</td>
-                  <td>{getAffectedStatusLabel(sample.data.person.affectedStatus)}</td>
+                  <td>{getSampleSexLabel(sample.data)}</td>
+                  <td>{getSampleAffectedStatusLabel(sample.data)}</td>
                   <td>
-                    <For each={getPhenotypes(sample.data.person.individualId)}>
+                    <For each={samplePhenotypes(sample.data)}>
                       {(phenotypicFeature: PhenotypicFeature, i) => (
                         <>
                           {i() > 0 ? ", " : ""}
@@ -96,11 +84,9 @@ export const SampleTable: Component<{
                     </For>
                   </td>
                   <td>
-                    <Show when={getPhenotypes(sample.data.person.individualId).length > 0}>
+                    <Show when={samplePhenotypes(sample.data).length > 0}>
                       <Anchor
-                        href={`https://vibe.molgeniscloud.org/?phenotypes=${getPhenotypes(
-                          sample.data.person.individualId,
-                        )
+                        href={`https://vibe.molgeniscloud.org/?phenotypes=${samplePhenotypes(sample.data)
                           .map((feature) => feature.type.id)
                           .join(",")}`}
                       >
@@ -108,6 +94,11 @@ export const SampleTable: Component<{
                       </Anchor>
                     </Show>
                   </td>
+                  <td>
+                    <button class="button is-primary py-1" onClick={() => navigate(`/samples/${sample.id}/variants`)}>
+                      Explore Variants
+                    </button>
+                  </td>
                 </tr>
               )}
             </For>

package/src/components/VariantsSampleTable.tsx

@@ -11,6 +11,14 @@ import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { FieldHeader } from "./FieldHeader";
 import { Abbr } from "./Abbr";
 import { abbreviateHeader } from "../utils/field";
+import {
+  getSampleAffectedStatusLabel,
+  getSampleFamilyMembersWithoutParents,
+  getSampleFather,
+  getSampleLabel,
+  getSampleMother,
+  getSampleSexLabel,
+} from "../utils/sample";
 
 export const VariantsSampleTable: Component<{
   item: Item<Sample>;
@@ -28,26 +36,16 @@ export const VariantsSampleTable: Component<{
   const [otherFamilyMembers, setOtherFamilyMembers] = createSignal<Sample[]>([]);
 
   onMount(() => {
-    const familyMembers: Sample[] = [];
     setProband(props.item.data);
-    samples().forEach((sample) => {
-      if (
-        (proband() as Sample).person.maternalId !== "0" &&
-        sample.person.individualId === (proband() as Sample).person.maternalId
-      ) {
-        setMother(sample);
-      } else if (
-        (proband() as Sample).person.paternalId !== "0" &&
-        sample.person.individualId === (proband() as Sample).person.paternalId
-      ) {
-        setFather(sample);
-      } else if (sample.person.individualId !== (proband() as Sample).person.individualId) {
-        familyMembers.push(sample);
-      }
-    });
-    setOtherFamilyMembers(familyMembers);
+    setMother(getSampleMother(proband() as Sample, samples()));
+    setFather(getSampleFather(proband() as Sample, samples()));
+    setOtherFamilyMembers(getSampleFamilyMembersWithoutParents(proband() as Sample, samples()));
   });
 
+  function getSampleHeaderDescription(sample: Sample): string {
+    return `${getSampleLabel(sample)}: ${getSampleSexLabel(sample)}, ${getSampleAffectedStatusLabel(sample)}`;
+  }
+
   return (
     <div style={{ display: "grid" }}>
       {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
@@ -60,48 +58,28 @@ export const VariantsSampleTable: Component<{
               <Show when={proband()} keyed>
                 {(proband) => (
                   <th>
-                    <Abbr
-                      title={`${
-                        proband.person.individualId
-                      }: ${proband.person.sex.toLowerCase()}, ${proband.person.affectedStatus.toLowerCase()}`}
-                      value="Proband"
-                    />
+                    <Abbr title={getSampleHeaderDescription(proband)} value="Proband" />
                   </th>
                 )}
               </Show>
               <Show when={mother()} keyed>
                 {(mother) => (
                   <th>
-                    <Abbr
-                      title={`${
-                        mother.person.individualId
-                      }: ${mother.person.sex.toLowerCase()}, ${mother.person.affectedStatus.toLowerCase()}`}
-                      value="Mother"
-                    />
+                    <Abbr title={getSampleHeaderDescription(mother)} value="Mother" />
                   </th>
                 )}
               </Show>
               <Show when={father()} keyed>
                 {(father) => (
                   <th>
-                    <Abbr
-                      title={`${
-                        father.person.individualId
-                      }: ${father.person.sex.toLowerCase()}, ${father.person.affectedStatus.toLowerCase()}`}
-                      value="Father"
-                    />
+                    <Abbr title={getSampleHeaderDescription(father)} value="Father" />
                   </th>
                 )}
               </Show>
               <For each={otherFamilyMembers()}>
                 {(sample: Sample) => (
                   <th>
-                    <Abbr
-                      title={`${
-                        sample.person.individualId
-                      }: ${sample.person.sex.toLowerCase()}, ${sample.person.affectedStatus.toLowerCase()}`}
-                      value={abbreviateHeader(sample.person.individualId)}
-                    />
+                    <Abbr title={getSampleHeaderDescription(sample)} value={abbreviateHeader(getSampleLabel(sample))} />
                   </th>
                 )}
               </For>

package/src/store/index.tsx

@@ -67,16 +67,17 @@ export const Provider: ParentComponent = (props) => {
       setState({ variants: { ...(state.variants || {}), page } });
     },
     setVariantsPageSize(pageSize: number) {
-      setState({ variants: { ...(state.variants || {}), pageSize } });
+      setState({ variants: { ...(state.variants || {}), pageSize, page: undefined } });
     },
     setVariantsSearchQuery(searchQuery: string) {
-      setState({ variants: { ...(state.variants || {}), searchQuery } });
+      setState({ variants: { ...(state.variants || {}), searchQuery, page: undefined } });
     },
     setVariantsFilterQuery(query: Query, key: string) {
       setState({
         variants: {
           ...(state.variants || {}),
           filterQueries: { ...(state.variants?.filterQueries || {}), [key]: query },
+          page: undefined,
         },
       });
     },
@@ -85,6 +86,7 @@ export const Provider: ParentComponent = (props) => {
         variants: {
           ...(state.variants || {}),
           filterQueries: { ...(state.variants?.filterQueries || {}), [key]: undefined },
+          page: undefined,
         },
       });
     },
@@ -162,10 +164,10 @@ export const Provider: ParentComponent = (props) => {
       setState({ samples: { ...(state.samples || {}), page } });
     },
     setSampleSearchQuery(searchQuery: string) {
-      setState({ samples: { ...(state.samples || {}), searchQuery } });
+      setState({ samples: { ...(state.samples || {}), searchQuery, page: undefined } });
     },
     setSampleProbandFilterValue(probandFilterValue: boolean) {
-      setState({ samples: { ...(state.samples || {}), probandFilterValue } });
+      setState({ samples: { ...(state.samples || {}), probandFilterValue, page: undefined } });
     },
   };
   const store: AppStore = [state, actions];

package/src/utils/sample.ts

@@ -1,5 +1,65 @@
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { Sample } from "@molgenis/vip-report-api/src/Api";
 
-export function getSampleLabel(sample: Item<Sample>) {
-  return sample.data.person.individualId;
+export function getSampleLabel(sample: Sample) {
+  return sample.person.individualId;
+}
+
+export function getSampleSexLabel(sample: Sample): string {
+  switch (sample.person.sex) {
+    case "FEMALE":
+      return "female";
+    case "MALE":
+      return "male";
+    default:
+      return "?";
+  }
+}
+
+export function getSampleAffectedStatusLabel(sample: Sample): string {
+  switch (sample.person.affectedStatus) {
+    case "AFFECTED":
+      return "affected";
+    case "UNAFFECTED":
+      return "unaffected";
+    default:
+      return "?";
+  }
+}
+
+function isFamily(sample: Sample, samples: Sample): boolean {
+  return sample.person.familyId === samples.person.familyId;
+}
+
+function isSampleMother(sample: Sample, samples: Sample): boolean {
+  return isFamily(sample, samples) && samples.person.individualId === sample.person.maternalId;
+}
+
+export function getSampleMother(sample: Sample, samples: Sample[]): Sample | undefined {
+  if (sample.person.maternalId !== "0") {
+    for (const otherSample of samples) {
+      if (isSampleMother(sample, otherSample)) return otherSample;
+    }
+  }
+}
+
+function isSampleFather(sample: Sample, samples: Sample): boolean {
+  return isFamily(sample, samples) && samples.person.individualId === sample.person.paternalId;
+}
+
+export function getSampleFather(sample: Sample, samples: Sample[]): Sample | undefined {
+  if (sample.person.paternalId !== "0") {
+    for (const otherSample of samples) {
+      if (isSampleFather(sample, otherSample)) return otherSample;
+    }
+  }
+}
+
+export function getSampleFamilyMembersWithoutParents(sample: Sample, samples: Sample[]): Sample[] {
+  const familyMembersWithoutParents: Sample[] = [];
+  for (const otherSample of samples) {
+    if (isFamily(sample, otherSample) && !isSampleFather(sample, otherSample) && !isSampleMother(sample, otherSample)) {
+      if (sample.person.individualId !== otherSample.person.individualId) familyMembersWithoutParents.push(otherSample);
+    }
+  }
+  return familyMembersWithoutParents;
 }

package/src/views/Help.tsx

@@ -1,13 +1,138 @@
-import { Component } from "solid-js";
+import { Component, createResource, createSignal, For, Show } from "solid-js";
 import { Anchor } from "../components/Anchor";
+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 { Loader } from "../components/Loader";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { VcfHeaderRow } from "../components/VcfHeaderRow";
+import { getHeaderValue } from "../utils/viewUtils";
+import { Item, Phenotype, PhenotypicFeature } from "@molgenis/vip-report-api/src/Api";
+import { HpoTerm } from "../components/HpoTerm";
 export const Help: 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 });
   return (
     <>
-      <span>The documentation for the Variant Interpretation Pipeline is located </span>
-      <Anchor href={`https://molgenis.github.io/vip/`}>
-        <span>here</span>
-      </Anchor>
-      <span>.</span>
+      <Breadcrumb items={[{ text: "Help" }]} />
+      <div class="columns">
+        <div class="column">
+          <p class="title is-3">Documentation</p>
+          <span>The documentation for the Variant Interpretation Pipeline is located </span>
+          <Anchor href={`https://molgenis.github.io/vip/`}>
+            <span>here</span>
+          </Anchor>
+          <span>.</span>
+        </div>
+      </div>
+
+      <Show
+        when={
+          !samples.loading &&
+          !records.loading &&
+          !recordsMetadata.loading &&
+          !phenotypes.loading &&
+          !htsFileMetadata.loading &&
+          !appMetadata.loading
+        }
+        fallback={<Loader />}
+      >
+        <p class="title is-3">About</p>
+        <div class="columns">
+          <div class="column">
+            <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>
+            <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>
+          </div>
+        </div>
+      </Show>
     </>
   );
 };

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/SampleVariant.tsx

@@ -28,7 +28,7 @@ export const SampleVariantView: Component = () => {
       <Breadcrumb
         items={[
           { href: "/samples", text: "Samples" },
-          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
+          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!.data) },
           { href: `/samples/${sample()!.id}/variants`, text: "Variants" },
           { text: getRecordLabel(variant()!) },
         ]}

package/src/views/SampleVariantConsequence.tsx

@@ -35,7 +35,7 @@ export const SampleVariantConsequenceView: Component = () => {
       <Breadcrumb
         items={[
           { href: "/samples", text: "Samples" },
-          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
+          { 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}` },

package/src/views/SampleVariants.tsx

@@ -1,4 +1,4 @@
-import { Component, createMemo, createResource, Show } from "solid-js";
+import { Component, createMemo, createResource, createSignal, onMount, Show } from "solid-js";
 import { useRouteData } from "@solidjs/router";
 import {
   HtsFileMetadata,
@@ -38,7 +38,14 @@ 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";
@@ -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,6 +332,48 @@ 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">
@@ -324,6 +387,14 @@ export const SampleVariants: Component<{
         />
       </div>
       <div class="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>
     </>
   );
 };

package/src/views/Variants.tsx

@@ -93,6 +93,12 @@ export const Variants: Component<{
         />
       </div>
       <div class="column">
+        <div class="columns is-gapless">
+          <div class="column">
+            <p class="title is-3">Reported variants</p>
+            <p class="subtitle is-5">Includes all reported variants without genotypes</p>
+          </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>