npm - @molgenis/vip-report-template - Versions diffs - 6.0.1 → 6.1.1 - Mend

@molgenis/vip-report-template 6.0.1 → 6.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/.husky/pre-commit +0 -3
package/.travis.yml +5 -2
package/index.html +1 -1
package/package.json +23 -23
package/src/App.tsx +27 -68
package/src/__tests__/sample.test.ts +184 -0
package/src/assets/sass/main.scss +12 -47
package/src/components/Breadcrumb.tsx +6 -6
package/src/components/InfoCollapsablePane.tsx +4 -4
package/src/components/SampleTable.tsx +37 -46
package/src/components/VariantInfoNestedTable.tsx +3 -3
package/src/components/VariantsSampleTable.tsx +21 -44
package/src/components/VariantsTable.tsx +2 -3
package/src/components/filter/Filter.tsx +0 -4
package/src/components/record/format/GenotypeField.tsx +4 -15
package/src/index.tsx +43 -1
package/src/store/index.tsx +7 -10
package/src/utils/sample.ts +63 -3
package/src/views/Help.tsx +131 -6
package/src/views/Home.tsx +24 -112
package/src/views/Sample.tsx +21 -17
package/src/views/SampleVariant.tsx +36 -21
package/src/views/SampleVariantConsequence.tsx +44 -33
package/src/views/SampleVariants.tsx +81 -10
package/src/views/Samples.tsx +35 -33
package/src/views/Variant.tsx +48 -42
package/src/views/VariantConsequence.tsx +9 -8
package/src/views/Variants.tsx +8 -2
package/src/views/data/data.tsx +7 -0
package/src/components/filter/FilterIntegerDp.tsx +0 -47
package/src/views/data/SampleData.tsx +0 -13
package/src/views/data/SampleVariantConsequenceData.tsx +0 -13
package/src/views/data/SampleVariantData.tsx +0 -14
package/src/views/data/VariantConsequenceData.tsx +0 -10
package/src/views/data/VariantData.tsx +0 -13

package/.husky/pre-commit CHANGED Viewed

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 npx lint-staged

package/.travis.yml CHANGED Viewed

@@ -27,11 +27,14 @@ deploy:
       secure: TxQUU8xNTVTqhQ6pYTR+ic7Crv6rPZ7UbRo8HJJOGlFA30Vb/O36kh3Vgwx3fM5oinC1I38pzmHjJ4WVz2qiUZcgNzDHMorQhErbfSWLO8G7XTsVkMkyozPPtgdCCT2Z7FfdTKmY5an+V4ZJlreM83+vlJmUzMoGahZElESBk94QkTnPAqk46whXAf/zToEw7OJsxd2N3uPyPB8+rgg5VMApRBsCegt3KyetiMBIYWX+kJLxXEGK7OnJmxz1SGrYHR87YEDog7awBIhrXNcBWc4Lj55oWEqp3JQlpLnVDhEUCSO8cmQkyIMTYZ3eIKoyrDk9vfAYYbDsRvagFXKTZGvv0ZQv8s7a1lWAadTyvgbmo3cvX/KHfam5pGf2DFEXWIHZgvoIzq8GY6V4sjOEWRG2sAn+jKiNT5jPgG8sG0faP2JVr55WoN4jRthk5ABckyS8PByWrwcLILTeBPuX7DpiKtzUzzRw/qHAGo59+bFyZiKIc5I+S59fnttJ6Vz4jpjsavOzNsgIGUsTs3y1kosNLYoJVcI3RjpgHQuOfzawKb2l22B5wbJ1/1llhrSqYCtEjAhUuruB3bhy+/WiN4ulKp29Ct7/IEN3ctBXdMBm2xCPlsPSTBeXzwJNeWykTnpFx9qykjtSj3CwS8ZDnY3M+/dLhywrI46EGa03YRw=
     on:
       tags: true
-    edge: true
+    edge:
+      branch: v2.0.3-beta.4 # workaround for https://travis-ci.community/t/builds-suddenly-fail-with-error-installing-dpl/14270/3
   - provider: releases
     token:
       secure: rQ19Q5xN6T+dJp4nDT+B4QREJNCc9HpOdipE7jcAP/PVD49kd3AI4joZD9nBn53a091rl7VHviqzyRvHyvBI00VWGhQOmbUqd45c5h4Vn0qUZno2Wl2M7iuUyllvovQHS0C34nLDSBkKhJv0ESit/xiyyVy8JxwO1mgFcLgsY0cKiupwbhepUw5V2S458pNLW9e4RxT7RIaQWUagYp+PJYRKAYn5AAxih65mv2+wSGQPzcOKJDRSTlDtLaCrfZCNJm/7f3iSAOm1CCA1HLxNO2ACFL4bhnghWPS7O6VyTv1POexgwbH0OQxHmO/pdm3geLrTWX7PaHaZNUB1CHoNXC5FE/J9sUSrjClfGL9qFo5WEkBAgH3a5lLwUoCWZecUJPnyeIEFieg5OSjnXFrTECWo5Ut4g5RtzOWQtTLEwOXQgDBtE3NLkH/DRayO9vliEs9/6CnZ8AndH17cj/GmB//2DTjOMr3yCQVuI5ZeANBAUoXAg/C6kQDTdP8oyLay7UBJnX1aEWWLf3Gwo0UBFE83YIuzqVzIvU8HYgFiPgjxFwKBmebS4qu1n9ils2X0nWaY9KZY4lIjzkxsgsZ2pqt1Z6a5AQsEqXv06Tjy6tB7/I9TG7vl4eTBBJBPsRKMNnTfkE6Zr3oHC+ihWIMolAqyaTriOh23Gs/xzEuK+T8=
     file: dist/vip-report-template.html
     on:
       tags: true
-    edge: true # opt in to dpl v2
+    edge:
+      branch: v2.0.3-beta.4 # workaround for https://travis-ci.community/t/builds-suddenly-fail-with-error-installing-dpl/14270/3

package/index.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "6.0.1",
+  "version": "6.1.1",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",
@@ -9,39 +9,39 @@
     "dev": "vite",
     "format": "prettier --write src/**/*.{tsx,ts}",
     "lint": "eslint src/**/*.{tsx,ts}",
-    "prepare": "husky install",
+    "prepare": "husky",
     "test": "vitest run",
     "test:watch": "vitest"
   },
   "license": "LGPL-3.0",
   "devDependencies": {
-    "@molgenis/vite-plugin-inline": "^1.0.21",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
-    "@vitest/coverage-v8": "^1.2.1",
-    "bulma": "^0.9.4",
-    "eslint": "^8.56.0",
+    "@molgenis/vite-plugin-inline": "^1.0.24",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "bulma": "^1.0.1",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-solid": "^0.13.1",
-    "husky": "^9.0.5",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.2.4",
-    "sass": "^1.70.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vite-plugin-solid": "^2.9.1",
-    "vitest": "^1.2.1"
+    "eslint-plugin-solid": "^0.14.0",
+    "husky": "^9.0.11",
+    "jsdom": "^24.1.0",
+    "prettier": "^3.3.1",
+    "sass": "^1.77.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.12",
+    "vite-plugin-solid": "^2.10.2",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@molgenis/vip-report-api": "^5.0.2",
-    "@molgenis/vip-report-vcf": "^2.0.0",
-    "@solidjs/router": "^0.9.1",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@molgenis/vip-report-api": "^5.0.4",
+    "@molgenis/vip-report-vcf": "^2.0.2",
+    "@solidjs/router": "^0.13.5",
     "base64-js": "^1.5.1",
     "igv": "^2.15.11",
-    "solid-js": "^1.8.12"
+    "solid-js": "^1.8.17"
   },
   "lint-staged": {
     "src/**/*.{tsx,ts}": [

package/src/App.tsx CHANGED Viewed

@@ -1,25 +1,9 @@
-import { Component, ErrorBoundary, onMount } from "solid-js";
-import { Link, Route, Routes, useLocation, useNavigate } from "@solidjs/router";
-import { VariantsView } from "./views/Variants";
-import { Variant } from "./views/Variant";
-import VariantData from "./views/data/VariantData";
-import { Samples } from "./views/Samples";
-import SampleData from "./views/data/SampleData";
-import { Sample } from "./views/Sample";
-import { VariantConsequence } from "./views/VariantConsequence";
-import { SampleVariantConsequenceView } from "./views/SampleVariantConsequence";
-import { SampleVariantsView } from "./views/SampleVariants";
-import { Error } from "./components/Error";
-import SampleVariantData from "./views/data/SampleVariantData";
-import { SampleVariantView } from "./views/SampleVariant";
-import { Home } from "./views/Home";
+import { onMount, ParentComponent } from "solid-js";
+import { useLocation, useNavigate } from "@solidjs/router";
 import api from "./Api";
 import { DatasetDropdown } from "./components/DatasetDropdown";
-import SampleVariantConsequenceData from "./views/data/SampleVariantConsequenceData";
-import VariantConsequenceData from "./views/data/VariantConsequenceData";
-import { Help } from "./views/Help";
-const App: Component = () => {
+const App: ParentComponent = (props) => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -44,63 +28,38 @@ 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
-          </Link>
+          <a class="navbar-item has-text-weight-semibold" href="/">
+            Variant Interpretation Pipeline
+          </a>
         </div>
         <div class="navbar-menu">
-          <div class="navbar-start">
-            <Link class="navbar-item" href="/samples">
-              Samples
-            </Link>
-            <Link class="navbar-item" href="/variants">
-              Variants
-            </Link>
-            {api.isDatasetSupport() && <DatasetDropdown />}
+          <div class="navbar-item has-dropdown is-hoverable">
+            <a class="navbar-link" href="/">
+              Report
+            </a>
+            <div class="navbar-dropdown">
+              <a class="navbar-item" href="/samples">
+                Samples
+              </a>
+              <hr class="navbar-divider" />
+              <a class="navbar-item" href="/variants">
+                Variants
+              </a>
+            </div>
           </div>
+          {api.isDatasetSupport() && (
+            <div class="navbar-start">
+              <DatasetDropdown />
+            </div>
+          )}
           <div class="navbar-end">
-            <Link class="navbar-item" href="/help">
+            <a class="navbar-item" href="/help">
               Help
-            </Link>
+            </a>
           </div>
         </div>
       </nav>
-      <div class="container is-fluid">
-        <ErrorBoundary fallback={(err) => <Error error={err as unknown} />}>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/samples">
-              <Route path="/" element={<Samples />} />
-              <Route path="/:sampleId" data={SampleData}>
-                <Route path="/" element={<Sample />} />
-                <Route path="/variants">
-                  <Route path="/" element={<SampleVariantsView />} />
-                  <Route path="/:variantId" data={SampleVariantData}>
-                    <Route path="/" element={<SampleVariantView />} />
-                    <Route path="/consequences">
-                      <Route
-                        path="/:consequenceId"
-                        element={<SampleVariantConsequenceView />}
-                        data={SampleVariantConsequenceData}
-                      />
-                    </Route>
-                  </Route>
-                </Route>
-              </Route>
-            </Route>
-            <Route path="/variants">
-              <Route path="/" element={<VariantsView />} />
-              <Route path="/:variantId" data={VariantData}>
-                <Route path="/" element={<Variant />} />
-                <Route path="/consequences">
-                  <Route path="/:consequenceId" element={<VariantConsequence />} data={VariantConsequenceData} />
-                </Route>
-              </Route>
-            </Route>
-            <Route path="/help" element={<Help />} />
-          </Routes>
-        </ErrorBoundary>
-      </div>
+      <div class="container is-fluid">{props.children}</div>
     </>
   );
 };

package/src/__tests__/sample.test.ts ADDED Viewed

@@ -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/assets/sass/main.scss CHANGED Viewed

@@ -1,50 +1,9 @@
 @charset "utf-8";
-$gap: 8px;
-$notification-padding: 0.75rem 0.75rem 0.75rem 0.75rem;
-$notification-padding-ltr: 0.75rem 0.75rem 0.75rem 0.75rem;
-$notification-padding-rtl: 0.75rem 0.75rem 0.75rem 0.75rem;
-@import "bulma/sass/utilities/initial-variables";
-@import "bulma/sass/utilities/functions";
-@import "bulma/sass/utilities/derived-variables";
-@import "bulma/sass/utilities/mixins";
-@import "bulma/sass/utilities/controls";
-@import "bulma/sass/utilities/extends";
-@import "bulma/sass/base/minireset";
-@import "bulma/sass/base/generic";
-@import "bulma/sass/base/animations";
-@import "bulma/sass/elements/button";
-@import "bulma/sass/elements/container";
-@import "bulma/sass/elements/icon";
-@import "bulma/sass/elements/notification";
-@import "bulma/sass/elements/table";
-@import "bulma/sass/elements/title";
-@import "bulma/sass/form/shared";
-@import "bulma/sass/form/input-textarea";
-@import "bulma/sass/form/checkbox-radio";
-@import "bulma/sass/form/select";
-@import "bulma/sass/form/tools";
-@import "bulma/sass/grid/columns";
-@import "bulma/sass/components/breadcrumb";
-@import "bulma/sass/components/card";
-@import "bulma/sass/components/navbar";
-@import "bulma/sass/components/pagination";
-@import "bulma/sass/helpers/color";
-@import "bulma/sass/helpers/flexbox";
-@import "bulma/sass/helpers/float";
-@import "bulma/sass/helpers/other";
-@import "bulma/sass/helpers/overflow";
-@import "bulma/sass/helpers/position";
-@import "bulma/sass/helpers/spacing";
-@import "bulma/sass/helpers/typography";
-@import "bulma/sass/helpers/visibility";
+@use "bulma/sass" with(
+  $gap: 8px,
+  $notification-padding: 0.75rem 0.75rem,
+);
 html {
   font-size: 13px;
@@ -92,7 +51,7 @@ td {
 }
 .pagination-ellipsis {
-  min-width: $pagination-min-width;
+  min-width: 2.5em;
 }
 .container {
@@ -120,4 +79,10 @@ table.is-borderless td,
 .inline-control-text {
   line-height: 32.5px
+}
+.scrolling-div {
+  margin-top: 8px;
+  overflow-y: auto;
+  max-height: calc(100vh - 78px) !important;
 }

package/src/components/Breadcrumb.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-import { Link } from "@solidjs/router";
 import { Component, For } from "solid-js";
 export type BreadCrumbItem = { href?: string; text: string };
@@ -9,19 +8,20 @@ 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">
+              <a href="/">
+                <span class="icon is-small mr-2">
                   <i class="fas fa-home" />
                 </span>
-              </Link>
+                <span>Report</span>
+              </a>
             </li>
             <For each={props.items}>
               {(link, i) => (
                 <li classList={{ "is-active": i() === props.items.length - 1 }}>
-                  <Link href={link.href || "#"}>{link.text}</Link>
+                  <a href={link.href || "#"}>{link.text}</a>
                 </li>
               )}
             </For>

package/src/components/InfoCollapsablePane.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
 import { Info } from "./record/Info";
 import { FieldValue } from "./record/field/Field";
 import { isCsqInfo } from "../utils/csqUtils";
-import { Link, useLocation } from "@solidjs/router";
+import { useLocation } from "@solidjs/router";
 export const InfoCollapsablePane: Component<{
   fields: FieldMetadata[];
@@ -58,8 +58,8 @@ export const InfoCollapsablePane: Component<{
                 <>
                   {j() != 0 && collapsed() && <br />}
                   {(j() == 0 || collapsed()) &&
-                    (isCsqInfo(field, "Consequence") ? (
-                      <Link href={`${useLocation().pathname}/${props.record.id}/consequences/${j()}`}>
+                    (isCsqInfo(field, "VIPC") ? (
+                      <a href={`${useLocation().pathname}/${props.record.id}/consequences/${j()}`}>
                         <Info
                           info={value}
                           infoMeta={field}
@@ -68,7 +68,7 @@ export const InfoCollapsablePane: Component<{
                             isPossibleCompound: props.isPossibleCompound,
                           }}
                         />
-                      </Link>
+                      </a>
                     ) : (
                       <Info
                         info={value}

package/src/components/SampleTable.tsx CHANGED Viewed

@@ -1,40 +1,15 @@
-import { Link } from "@solidjs/router";
+import { 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>
+                    <a href={`/samples/${sample.id}`}>{getSampleLabel(sample.data)}</a>
                   </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>