@molgenis/vip-report-template 6.1.1 → 7.0.0

package/src/App.tsx

@@ -1,61 +1,67 @@
 import { onMount, ParentComponent } from "solid-js";
-import { useLocation, useNavigate } from "@solidjs/router";
-import api from "./Api";
+import { A, Location, Navigator, useLocation, useNavigate } from "@solidjs/router";
 import { DatasetDropdown } from "./components/DatasetDropdown";
+import { fetchSampleProbandIds, isDatasetSupport } from "./utils/api.ts";
+import { href } from "./utils/utils.ts";
+import { getMetadata } from "./views/data/data.tsx";
+
+// export for development purposes
+export function init(navigate: Navigator, location?: Location) {
+  (async () => {
+    document.title = `VCF Report (${(await getMetadata()).htsFile.uri})`;
+    const sampleIds = await fetchSampleProbandIds();
+    if (location === undefined || location.pathname === "/") {
+      let components: (string | number)[];
+      if (sampleIds.length === 1) {
+        components = ["samples", sampleIds[0]!, "variants"];
+      } else if (sampleIds.length === 0) {
+        components = ["variants"];
+      } else {
+        components = ["samples"];
+      }
+      navigate(href(components));
+    }
+  })();
+}
 
 const App: ParentComponent = (props) => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  onMount(() => {
-    (async () => {
-      const htsFile = await api.getHtsFileMetadata();
-      document.title = `VCF Report (${htsFile.uri})`;
-      const samples = await api.getSamples({ query: { selector: ["proband"], operator: "==", args: true } });
-      if (location.pathname === "/") {
-        if (samples.page.totalElements === 1) {
-          navigate(`/samples/${samples.items[0].id}/variants`);
-        } else if (samples.total === 0) {
-          navigate(`/variants`);
-        } else {
-          navigate(`/samples`);
-        }
-      }
-    })().catch((err) => console.error(err));
-  });
+  onMount(() => init(navigate, location));
 
   return (
     <>
       <nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
         <div class="navbar-brand">
-          <a class="navbar-item has-text-weight-semibold" href="/">
+          <A class="navbar-item has-text-weight-semibold" href="/" end={true}>
             Variant Interpretation Pipeline
-          </a>
+          </A>
         </div>
         <div class="navbar-menu">
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link" href="/">
+            <A class="navbar-link" href={"/"} end={true}>
               Report
-            </a>
+            </A>
             <div class="navbar-dropdown">
-              <a class="navbar-item" href="/samples">
+              <A class="navbar-item" href={"/samples"} end={true}>
                 Samples
-              </a>
+              </A>
               <hr class="navbar-divider" />
-              <a class="navbar-item" href="/variants">
+              <A class="navbar-item" href={"/variants"} end={true}>
                 Variants
-              </a>
+              </A>
             </div>
           </div>
-          {api.isDatasetSupport() && (
+          {isDatasetSupport() && (
             <div class="navbar-start">
               <DatasetDropdown />
             </div>
           )}
           <div class="navbar-end">
-            <a class="navbar-item" href="/help">
+            <A class="navbar-item" href={"/help"} end={true}>
               Help
-            </a>
+            </A>
           </div>
         </div>
       </nav>

package/src/assets/sass/main.scss

@@ -81,8 +81,16 @@ table.is-borderless td,
   line-height: 32.5px
 }
 
-.scrolling-div {
-  margin-top: 8px;
-  overflow-y: auto;
-  max-height: calc(100vh - 78px) !important;
+.tooltip {
+  position: absolute;
+  z-index: 10;
+  margin: 0.5rem 0 0 0.5rem;
+  padding: 0.5rem;
+  cursor: default;
+}
+
+.control {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

package/src/components/Allele.tsx

@@ -0,0 +1,95 @@
+import { Component, createMemo, For, Match, Switch } from "solid-js";
+import { ErrorNotification } from "./ErrorNotification";
+
+type AlleleType = "breakend" | "missing" | "symbolic" | "nucs";
+
+export const Allele: Component<{ value: string | null; isAbbreviate: boolean }> = (props) => {
+  const type = createMemo((): AlleleType => {
+    const value = props.value;
+    let type: AlleleType;
+
+    if (value === null) type = "missing";
+    else if (value.startsWith("<") && value.endsWith(">")) type = "symbolic";
+    else if (value.indexOf("[") !== -1 || value.indexOf("]") !== -1 || value.indexOf(".") !== -1) type = "breakend";
+    else type = "nucs";
+
+    return type;
+  });
+
+  return (
+    <Switch fallback={<ErrorNotification error={`unexpected allele type '${type()}'`} />}>
+      <Match when={type() === "breakend"}>
+        <AlleleBreakend value={props.value as string} />
+      </Match>
+      <Match when={type() === "missing"}>
+        <AlleleMissing />
+      </Match>
+      <Match when={type() === "symbolic"}>
+        <AlleleSymbolic value={props.value as string} />
+      </Match>
+      <Match when={type() === "nucs"}>
+        <AlleleNucs values={(props.value as string).split("")} isAbbreviate={props.isAbbreviate} />
+      </Match>
+    </Switch>
+  );
+};
+
+const AlleleBreakend: Component<{ value: string }> = (props) => {
+  return <span class="base-n">{props.value}</span>;
+};
+
+const AlleleMissing: Component = () => {
+  return <span class="base-n">?</span>;
+};
+
+const AlleleSymbolic: Component<{ value: string }> = (props) => {
+  return <span class="base-n">{props.value}</span>;
+};
+
+const Nucs: Component<{ bases: string[] }> = (props) => {
+  return (
+    <For each={props.bases}>
+      {(base) => (
+        <span
+          classList={{
+            base: true,
+            "base-a": base === "A",
+            "base-c": base === "C",
+            "base-g": base === "G",
+            "base-n": base === "N",
+            "base-t": base === "T",
+          }}
+        >
+          {base}
+        </span>
+      )}
+    </For>
+  );
+};
+
+const AlleleNucs: Component<{ values: string[]; isAbbreviate: boolean }> = (props) => {
+  const abbreviate = (): boolean => props.values.length > 4 && props.isAbbreviate;
+
+  const nucs = (): string[] => {
+    let nucs = props.values;
+    if (abbreviate()) {
+      const lastNuc = nucs[nucs.length - 1] as string;
+      nucs = nucs.slice(0, 2);
+      nucs.push("\u2026"); // ellipsis
+      nucs.push(lastNuc);
+    }
+    return nucs;
+  };
+
+  return (
+    <>
+      {abbreviate() ? (
+        <abbr title={props.values.join("")}>
+          <Nucs bases={nucs()} />
+        </abbr>
+      ) : (
+        <Nucs bases={nucs()} />
+      )}
+    </>
+  );
+};

package/src/components/Anchor.tsx

@@ -1,7 +1,7 @@
 import { ParentComponent, Show } from "solid-js";
 
 export const Anchor: ParentComponent<{
-  href: string | null | undefined;
+  href?: string | null | undefined;
 }> = (props) => {
   return (
     <Show when={props.href} fallback={props.children} keyed>

package/src/components/Breadcrumb.tsx

@@ -1,9 +1,10 @@
 import { Component, For } from "solid-js";
+import { A } from "@solidjs/router";
 
-export type BreadCrumbItem = { href?: string; text: string };
+export type BreadcrumbItem = { href?: string; text: string };
 
 export const Breadcrumb: Component<{
-  items: BreadCrumbItem[];
+  items: BreadcrumbItem[];
 }> = (props) => {
   return (
     <div class="columns is-gapless">
@@ -11,17 +12,19 @@ export const Breadcrumb: Component<{
         <nav class="breadcrumb has-succeeds-separator">
           <ul>
             <li classList={{ "is-active": props.items.length === 0 }}>
-              <a href="/">
+              <A href="/" end={true}>
                 <span class="icon is-small mr-2">
                   <i class="fas fa-home" />
                 </span>
                 <span>Report</span>
-              </a>
+              </A>
             </li>
             <For each={props.items}>
               {(link, i) => (
                 <li classList={{ "is-active": i() === props.items.length - 1 }}>
-                  <a href={link.href || "#"}>{link.text}</a>
+                  <A href={link.href || "#"} end={true}>
+                    {link.text}
+                  </A>
                 </li>
               )}
             </For>

package/src/components/DatasetDropdown.tsx

@@ -1,43 +1,30 @@
 import { Component, createSignal, For } from "solid-js";
-import api from "../Api";
-import { useNavigate } from "@solidjs/router";
+import { query, useNavigate } from "@solidjs/router";
 import { useStore } from "../store";
+import { getDatasetIds, selectDataset } from "../utils/api.ts";
+import { init } from "../App.tsx";
 
 export const DatasetDropdown: Component = () => {
+  const navigate = useNavigate();
   const [, actions] = useStore();
 
-  const navigate = useNavigate();
   const [selectedDataset, setSelectedDataset] = createSignal("GRCh37 Family");
 
   function switchIt(datasetName: string) {
-    setSelectedDataset(datasetName);
-    api.selectDataset(datasetName);
     actions.reset();
-    (async () => {
-      navigate(`/`);
-      const samples = await api.getSamples({ query: { selector: ["proband"], operator: "==", args: true } });
-      if (samples.page.totalElements === 1) {
-        navigate(`/samples/${samples.items[0].id}/variants`);
-      } else if (samples.total === 0) {
-        navigate(`/variants`);
-      } else {
-        navigate(`/samples`);
-      }
-    })().catch((err: Error) => console.error(err.stack));
+    query.clear(); // flush cache
+    setSelectedDataset(datasetName);
+    selectDataset(datasetName);
+    init(navigate);
   }
 
   return (
     <div class="navbar-item has-dropdown is-hoverable">
       <a class="navbar-link">{selectedDataset()}</a>
       <div class="navbar-dropdown">
-        <For each={api.getDatasetIds()}>
+        <For each={getDatasetIds()}>
           {(dataset: string) => (
-            <a
-              class="navbar-item"
-              onClick={() => {
-                switchIt(dataset);
-              }}
-            >
+            <a class="navbar-item" onClick={() => switchIt(dataset)}>
               {dataset}
             </a>
           )}

package/src/components/ErrorNotification.tsx

@@ -0,0 +1,9 @@
+import { Component, createEffect } from "solid-js";
+
+// renamed from Error to avoid naming conflict with JavaScript error
+export const ErrorNotification: Component<{
+  error: unknown;
+}> = (props) => {
+  createEffect(() => console.error(props.error));
+  return <div class="notification is-danger is-light">An unexpected error occurred</div>;
+};

package/src/components/GenomeBrowser.tsx

@@ -1,11 +1,16 @@
 import { Component, onCleanup, onMount } from "solid-js";
 import igv, { Browser } from "igv";
-import api from "../Api";
 import { fromByteArray } from "base64-js";
-import { writeVcf } from "@molgenis/vip-report-vcf/src/VcfWriter";
-import { ComposedQuery, Sample } from "@molgenis/vip-report-api/src/Api";
+import { VcfRecord, writeVcf } from "@molgenis/vip-report-vcf";
+import { ComposedQuery, Cram, Item, Sample } from "@molgenis/vip-report-api";
+import { fetchCram, fetchFastaGz, fetchGenesGz, fetchRecords, MetadataContainer } from "../utils/api.ts";
 
-async function createVcf(contig: string, position: number, samples: Sample[]): Promise<Uint8Array> {
+async function fetchVcf(
+  metadata: MetadataContainer,
+  contig: string,
+  position: number,
+  samples: Item<Sample>[],
+): Promise<Uint8Array> {
   const query: ComposedQuery = {
     operator: "and",
     args: [
@@ -19,21 +24,28 @@ async function createVcf(contig: string, position: number, samples: Sample[]): P
       },
     ],
   };
-  const data = await Promise.all([api.getRecordsMeta(), api.getRecords({ query, size: Number.MAX_SAFE_INTEGER })]);
+  const records = await fetchRecords({ query, size: Number.MAX_SAFE_INTEGER });
   const vcf = writeVcf(
-    { metadata: data[0], data: data[1].items.map((item) => item.data) },
-    { samples: samples.map((sample) => sample.person.individualId) },
+    { metadata: metadata.records, data: records.items.map((item) => item.data) },
+    { samples: samples.map((sample) => sample.data.person.individualId) },
   );
   return toBytes(vcf);
 }
 
 const toBytes = (str: string): Uint8Array => Uint8Array.from(str.split("").map((letter) => letter.charCodeAt(0)));
 
-const createBrowserConfig = async (contig: string, position: number, samples: Sample[]): Promise<unknown> => {
+const createBrowserConfig = async (
+  metadata: MetadataContainer,
+  record: Item<VcfRecord>,
+  samples: Item<Sample>[],
+): Promise<unknown> => {
+  const contig = record.data.c;
+  const position = record.data.p;
+
   const data = await Promise.all([
-    api.getFastaGz(contig, position),
-    createVcf(contig, position, samples),
-    api.getGenesGz(),
+    fetchFastaGz(contig, position),
+    fetchVcf(metadata, contig, position, samples),
+    fetchGenesGz(),
   ]);
   const fastaGz = data[0];
   const vcf = data[1];
@@ -61,11 +73,9 @@ const createBrowserConfig = async (contig: string, position: number, samples: Sa
     url: "data:application/octet-stream;base64," + fromByteArray(vcf),
   });
 
-  const htsFileMetadata = await api.getHtsFileMetadata();
-
   return {
     reference: {
-      id: htsFileMetadata.genomeAssembly,
+      id: metadata.htsFile.genomeAssembly,
       name: "Reference",
       fastaURL: "data:application/gzip;base64," + fromByteArray(fastaGz),
       tracks: tracks,
@@ -77,15 +87,15 @@ const createBrowserConfig = async (contig: string, position: number, samples: Sa
   };
 };
 
-const updateBrowser = async (browser: Browser, samples: Sample[]): Promise<void> => {
-  const data = await Promise.all([...samples.map((sample) => api.getCram(sample.person.individualId))]);
+const updateBrowser = async (browser: Browser, samples: Item<Sample>[]): Promise<void> => {
+  const data = await Promise.all([...samples.map((sample) => fetchCram(sample.data.person.individualId))]);
   const crams = data.slice(0);
 
   for (let i = 0; i < samples.length; ++i) {
-    const cram = crams[i];
+    const cram = crams[i] as Cram | null;
 
     if (cram !== null) {
-      const sampleId = samples[i].person.individualId;
+      const sampleId = samples[i]!.data.person.individualId;
       await browser.loadTrack({
         type: "alignment",
         format: "cram",
@@ -99,22 +109,29 @@ const updateBrowser = async (browser: Browser, samples: Sample[]): Promise<void>
   }
 };
 
-export const GenomeBrowser: Component<{ contig: string; position: number; samples: Sample[] }> = (props) => {
+export const GenomeBrowser: Component<{
+  metadata: MetadataContainer;
+  record: Item<VcfRecord>;
+  samples: Item<Sample>[];
+}> = (props) => {
   let divRef: HTMLDivElement;
   let browser: Browser;
   onMount(() => {
     (async () => {
-      const config = await createBrowserConfig(props.contig, props.position, props.samples);
+      const config = await createBrowserConfig(props.metadata, props.record, props.samples);
       if (config !== null) {
         browser = await igv.createBrowser(divRef, config);
         await updateBrowser(browser, props.samples);
       }
-    })().catch((err) => console.error(err));
+    })();
   });
   onCleanup(() => {
-    if (browser) {
-      igv.removeBrowser(browser);
+    //cannot use "removeBrowser" here https://github.com/igvteam/igv.js/issues/1918
+    if (browser !== undefined) {
+      browser.root.remove();
+      browser.removeAllTracks();
     }
   });
+  // noinspection JSUnusedAssignment
   return <div ref={divRef!} />;
 };

package/src/components/HpoTerm.tsx

@@ -1,6 +1,6 @@
 import { Component } from "solid-js";
 import { Anchor } from "./Anchor";
-import { OntologyClass } from "@molgenis/vip-report-api/src/Api";
+import { OntologyClass } from "@molgenis/vip-report-api";
 
 export const HpoTerm: Component<{
   ontologyClass: OntologyClass;

package/src/components/{record/Pager.tsx → Pager.tsx}

@@ -1,5 +1,5 @@
 import { Component, createMemo, For } from "solid-js";
-import { Page } from "@molgenis/vip-report-api/src/Api";
+import { Page } from "@molgenis/vip-report-api";
 
 const createPages = (page: number, pages: number): (number | null)[] => {
   if (pages <= 5) {
@@ -13,35 +13,40 @@ const createPages = (page: number, pages: number): (number | null)[] => {
   }
 };
 
+export type PageChangeEvent = { page: number };
+export type PageChangeCallback = (event: PageChangeEvent) => void;
+
 export const Pager: Component<{
   page: Page;
-  onPageChange: (page: number) => void;
+  onPageChange: PageChangeCallback;
 }> = (props) => {
-  const currentPage = () => props.page.number;
   const nrPages = createMemo(() => Math.ceil(props.page.totalElements / props.page.size));
-  const pages = createMemo(() => createPages(currentPage(), nrPages()));
+  const pages = createMemo(() => createPages(props.page.number, nrPages()));
+  const page = createMemo(() => props.page);
 
   return (
     <>
-      {props.page.totalElements > props.page.size && (
+      {page().totalElements > page().size && (
         <nav class="pagination is-centered">
           <ul class="pagination-list">
             <li>
               <a
-                classList={{ "pagination-previous": true, "is-invisible": currentPage() === 0 }}
-                onClick={currentPage() > 0 ? () => props.onPageChange(currentPage() - 1) : undefined}
+                classList={{ "pagination-previous": true, "is-invisible": page().number === 0 }}
+                onClick={page().number > 0 ? () => props.onPageChange({ page: page().number - 1 }) : undefined}
               >
                 Previous
               </a>
             </li>
             <For each={pages()}>
-              {(page) =>
-                page !== null ? (
+              {(currentPage) =>
+                currentPage !== null ? (
                   <a
-                    classList={{ "pagination-link": true, "is-current": page === currentPage() }}
-                    onClick={page !== currentPage() ? () => props.onPageChange(page) : undefined}
+                    classList={{ "pagination-link": true, "is-current": currentPage === page().number }}
+                    onClick={() =>
+                      currentPage !== page().number ? props.onPageChange({ page: currentPage }) : undefined
+                    }
                   >
-                    {page + 1}
+                    {currentPage + 1}
                   </a>
                 ) : (
                   <span class="pagination-ellipsis">&hellip;</span>
@@ -50,8 +55,10 @@ export const Pager: Component<{
             </For>
             <li>
               <a
-                classList={{ "pagination-next": true, "is-invisible": currentPage() === nrPages() - 1 }}
-                onClick={currentPage() < nrPages() - 1 ? () => props.onPageChange(currentPage() + 1) : undefined}
+                classList={{ "pagination-next": true, "is-invisible": page().number === nrPages() - 1 }}
+                onClick={
+                  page().number < nrPages() - 1 ? () => props.onPageChange({ page: page().number + 1 }) : undefined
+                }
               >
                 Next
               </a>

package/src/components/RecordsPerPage.tsx

@@ -1,11 +1,13 @@
 import { Component, For } from "solid-js";
-export type RecordsPerPageEvent = { number: number };
+import { ConfigRecordsPerPage } from "../types/config";
+
+export type RecordsPerPageChangeEvent = { number: number };
+export type RecordsPerPageChangeCallback = (event: RecordsPerPageChangeEvent) => void;
 
 export const RecordsPerPage: Component<{
-  initialValue: number;
-  onChange: (event: RecordsPerPageEvent) => void;
+  config: ConfigRecordsPerPage;
+  onChange: (event: RecordsPerPageChangeEvent) => void;
 }> = (props) => {
-  const options = [10, 20, 50, 100];
   const onRecordsPerPageChange = (event: Event) => {
     props.onChange({ number: Number((event.target as HTMLInputElement).value) });
   };
@@ -15,10 +17,10 @@ export const RecordsPerPage: Component<{
       <span class="inline-control-text mr-2">Records per page</span>
       <div class="select">
         <select onChange={onRecordsPerPageChange}>
-          <For each={options}>
+          <For each={props.config}>
             {(option) => (
-              <option value={option} selected={option == props.initialValue}>
-                {option}
+              <option value={option.number} selected={option.selected}>
+                {option.number}
               </option>
             )}
           </For>