@molgenis/vip-report-template 6.1.1 → 7.0.0

package/src/views/Help.tsx

@@ -1,34 +1,41 @@
-import { Component, createResource, createSignal, For, Show } from "solid-js";
+import { Component, 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";
+import { createAsync } from "@solidjs/router";
+import { getConfig, getMetadata } from "./data/data";
+import { getHeaderValue } from "../utils/vcf.ts";
+import { Table } from "../components/Table.tsx";
+import { ConfigJson } from "../types/config";
+import { Json } from "@molgenis/vip-report-api";
+
 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 });
+  const metadata = createAsync(() => getMetadata());
+  const config = createAsync(() => getConfig());
+
+  function createParamList(config: ConfigJson) {
+    const stack: { path: string[]; values: { [property: string]: Json } }[] = [{ path: [], values: config.vip.params }];
+
+    const paramList: [key: string, value: string][] = [];
+    while (stack.length !== 0) {
+      const params = stack.pop()!;
+      const values = params.values;
+      for (const key in values) {
+        const path = [...params.path, key];
+        const value = values[key]!;
+        // derived from https://stackoverflow.com/a/8511350
+        if (typeof value === "object" && !Array.isArray(value) && value !== null) {
+          stack.push({ path, values: value as { [property: string]: Json } });
+        } else {
+          paramList.push([path.join("."), String(value)]);
+        }
+      }
+    }
+
+    return paramList.sort((keyA, keyB) => keyA[0].localeCompare(keyB[0]));
+  }
+
   return (
     <>
       <Breadcrumb items={[{ text: "Help" }]} />
@@ -42,96 +49,84 @@ export const Help: Component = () => {
           <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>
+      <Show when={metadata()} fallback={<Loader />}>
+        {(metadata) => (
+          <>
+            <p class="title is-3">About</p>
+            <div class="columns">
+              <div class="column">
+                <Table>
+                  <thead>
+                    <tr>
+                      <th colSpan={2}>Software metadata</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th>Name:</th>
+                      <td>{metadata().app.name}</td>
+                    </tr>
+                    <tr>
+                      <th>Version:</th>
+                      <td>{metadata().app.version}</td>
+                    </tr>
+                    <tr>
+                      <th>Arguments:</th>
+                      <td>{metadata().app.args}</td>
+                    </tr>
+                    <VcfHeaderRow value={getHeaderValue(metadata().records, "VIP_Version")} title={"VIP Version"} />
+                    <VcfHeaderRow value={getHeaderValue(metadata().records, "VIP_Command")} title={"VIP Command"} />
+                  </tbody>
+                </Table>
+              </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 class="columns">
+              <div class="column">
+                <Table>
+                  <thead>
+                    <tr>
+                      <th colSpan={2}>Input metadata</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th>Filename:</th>
+                      <td>{metadata()?.htsFile.uri}</td>
+                    </tr>
+                    <tr>
+                      <th>Assembly:</th>
+                      <td>{metadata()?.htsFile.genomeAssembly}</td>
+                    </tr>
+                  </tbody>
+                </Table>
+              </div>
             </div>
-          </div>
-        </div>
+          </>
+        )}
+      </Show>
+      <Show when={config()} fallback={<Loader />}>
+        {(config) => (
+          <>
+            <p class="title is-3">Configuration</p>
+            <p class="subtitle is-5">Listing of all VIP parameters used in the process to create this report</p>
+            <div class="columns">
+              <div class="column">
+                <Table>
+                  <tbody>
+                    <For each={createParamList(config())}>
+                      {([key, value]) => (
+                        <tr>
+                          <th>{key}</th>
+                          <td>{value}</td>
+                        </tr>
+                      )}
+                    </For>
+                  </tbody>
+                </Table>
+              </div>
+            </div>
+          </>
+        )}
       </Show>
     </>
   );

package/src/views/Home.tsx

@@ -1,6 +1,7 @@
 import { Component } from "solid-js";
 import { Breadcrumb } from "../components/Breadcrumb";
 import { useNavigate } from "@solidjs/router";
+import { href } from "../utils/utils.ts";
 
 export const Home: Component = () => {
   const navigate = useNavigate();
@@ -17,10 +18,10 @@ export const Home: Component = () => {
           <div class="columns">
             <div class="column">
               <div class="buttons are-large">
-                <button class="button is-large" onClick={() => navigate("/variants")}>
+                <button class="button is-large" onClick={() => navigate(href(["variants"]))}>
                   Explore Variants without samples
                 </button>
-                <button class="button is-large is-primary" onClick={() => navigate("/samples")}>
+                <button class="button is-large is-primary" onClick={() => navigate(href(["samples"]))}>
                   Explore Variants for samples
                 </button>
               </div>

package/src/views/Sample.tsx

@@ -1,28 +1,33 @@
 import { Component, For, Show } from "solid-js";
-import { createAsync, RouteSectionProps } from "@solidjs/router";
+import { A, createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
 import { Breadcrumb } from "../components/Breadcrumb";
-import { getSample } from "./data/data";
+import { getSampleById } from "./data/data";
+import { href } from "../utils/utils.ts";
 
 export const Sample: Component<RouteSectionProps> = (props) => {
-  const sample = createAsync(() => getSample(Number(props.params.sampleId)));
+  const sample = createAsync(() => getSampleById(props.params.sampleId));
 
   return (
     <Show when={sample()} fallback={<Loader />}>
       {(sample) => (
         <>
-          <Breadcrumb items={[{ href: "/samples", text: "Samples" }, { text: sample().data.person.individualId }]} />
+          <Breadcrumb
+            items={[{ href: href(["samples"]), text: "Samples" }, { text: sample().item.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>
+              <For each={Object.keys(sample().item.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>
+              <For each={Object.values(sample().item.data.person)}>{(value) => <p>{value}</p>}</For>
             </div>
           </div>
           <br />
-          <a href={`/samples/${sample().id}/variants`}>Variants</a>
+          <A href={href(["samples", sample().item.id, "variants"])} end={true}>
+            Variants
+          </A>
         </>
       )}
     </Show>

package/src/views/SampleVariant.tsx

@@ -1,52 +1,35 @@
-import { Component, createResource, For, Show } from "solid-js";
+import { Component, Show } from "solid-js";
 import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
-import { GenomeBrowser } from "../components/GenomeBrowser";
-import { fetchPedigreeSamples, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
-import { VariantTable } from "../components/VariantTable";
-import { VariantInfoTable } from "../components/VariantInfoTable";
-import { VariantInfoNestedTable } from "../components/VariantInfoNestedTable";
-import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
-import { getNestedInfoFieldsWithValues } from "../utils/field";
-import { VariantSampleTable } from "../components/VariantSampleTable";
-import { Breadcrumb } from "../components/Breadcrumb";
-import { getRecordSamples } from "../utils/viewUtils";
-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";
+import { getConfig, getMetadata, getRecordById, getSampleById } from "./data/data";
+import { parseVariantType } from "../utils/variantType.ts";
+import { VariantContainer } from "../components/VariantContainer.tsx";
+import { VariantBreadcrumb } from "../components/VariantBreadcrumb.tsx";
 
-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);
+export const SampleVariant: Component<RouteSectionProps> = (props) => {
+  const variantType = () => parseVariantType(props.params.variantType);
+  const sample = createAsync(() => getSampleById(props.params.sampleId));
+  const record = createAsync(() => getRecordById(props.params.variantId));
+  const metadata = createAsync(() => getMetadata());
+  const config = createAsync(() => getConfig());
 
   return (
     <Show when={sample()} fallback={<Loader />}>
       {(sample) => (
-        <Show when={variant()} fallback={<Loader />}>
-          {(variant) => (
+        <Show when={record()} fallback={<Loader />}>
+          {(record) => (
             <>
-              <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
+              <VariantBreadcrumb variantType={variantType()} sample={sample()} record={record()} />
+              <Show when={metadata()} fallback={<Loader />}>
+                {(metadata) => (
+                  <Show when={config()} fallback={<Loader />}>
+                    {(config) => (
+                      <VariantContainer
+                        config={config()}
+                        metadata={metadata()}
+                        variantType={variantType()}
+                        record={record()}
                         sample={sample()}
-                        pedigreeSamples={pedigreeSamples().items}
-                        recordsMeta={recordsMeta()}
-                        record={variant()}
                       />
                     )}
                   </Show>
@@ -59,75 +42,3 @@ export const SampleVariantView: Component<RouteSectionProps> = (props) => {
     </Show>
   );
 };
-
-export const SampleVariant: Component<{
-  sample: Item<Sample>;
-  pedigreeSamples: Item<Sample>[];
-  recordsMeta: Metadata;
-  record: Item<Record>;
-}> = (props) => {
-  return (
-    <>
-      <div class="columns">
-        <div class="column">
-          <GenomeBrowser
-            contig={props.record.data.c}
-            position={props.record.data.p}
-            samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
-          />
-        </div>
-      </div>
-      <div class="columns">
-        <div class="column is-3">
-          <h1 class="title is-5">Record</h1>
-          <VariantTable variant={props.record.data} />
-        </div>
-        <Show
-          when={
-            Object.values(props.recordsMeta.info).filter(
-              (info) => !info.nested && props.record.data.n[info.id] !== undefined,
-            ).length > 0
-          }
-        >
-          <div class="column is-3">
-            <h1 class="title is-5">Info</h1>
-            <VariantInfoTable infoFields={props.recordsMeta.info} record={props.record} />
-          </div>
-        </Show>
-        <div class="column">
-          <h1 class="title is-5">Samples</h1>
-          <VariantSampleTable
-            formatFields={props.recordsMeta.format}
-            samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
-            sampleValues={getRecordSamples(
-              props.record.data,
-              props.sample.data,
-              props.pedigreeSamples.map((item) => item.data),
-            )}
-            record={props.record}
-          />
-        </div>
-      </div>
-      <div class="columns">
-        <div class="column" style={{ "max-width": "100%" }}>
-          <For each={getNestedInfoFieldsWithValues(props.recordsMeta.info, props.record.data.n)}>
-            {(infoField) => (
-              <>
-                <h1 class="title is-5">{infoField.id}</h1>
-                <p class="mb-4">
-                  <Abbr value={infoField.description as string} title={infoField.description as string} />
-                </p>
-                <VariantInfoNestedTable
-                  infoValue={props.record.data.n[infoField.id] as unknown as Value[][]}
-                  infoField={infoField}
-                  sample={{ id: props.sample.id, label: props.sample.data.person.individualId }}
-                  record={props.record}
-                />
-              </>
-            )}
-          </For>
-        </div>
-      </div>
-    </>
-  );
-};

package/src/views/SampleVariantConsequence.tsx

@@ -1,126 +1,66 @@
-import { Component, createResource, Show } from "solid-js";
+import { Component, Show } from "solid-js";
 import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
-import { fetchDecisionTree, fetchPedigreeSamples, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
-import { VariantTable } from "../components/VariantTable";
-import { VariantInfoTable } from "../components/VariantInfoTable";
-import { VariantSampleTable } from "../components/VariantSampleTable";
-import { Breadcrumb } from "../components/Breadcrumb";
-import { ConsequenceTable } from "../components/ConsequenceTable";
-import { getRecordSamples, getSpecificConsequence } from "../utils/viewUtils";
-import { DecisionTreePath } from "../components/tree/DecisionTreePath";
-import { getDecisionTreePath } from "../utils/decisionTreeUtils";
-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";
+import { getConfig, getDecisionTree, getMetadata, getRecordById, getSampleById, getSampleTree } from "./data/data";
+import { parseId } from "../utils/utils.ts";
+import { VariantConsequenceContainer } from "../components/VariantConsequenceContainer.tsx";
+import { parseVariantType } from "../utils/variantType.ts";
+import { VariantBreadcrumb } from "../components/VariantBreadcrumb.tsx";
 
-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 });
+export const SampleVariantConsequence: Component<RouteSectionProps> = (props) => {
+  const variantType = () => parseVariantType(props.params.variantType);
+  const consequenceId = () => parseId(props.params.consequenceId);
+  const metadata = createAsync(() => getMetadata());
+  const sample = createAsync(() => getSampleById(props.params.sampleId));
+  const record = createAsync(() => getRecordById(props.params.variantId));
+  const config = createAsync(() => getConfig());
+  const decisionTree = createAsync(() => getDecisionTree());
+  const sampleTree = createAsync(() => getSampleTree());
 
   return (
     <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 when={record()} fallback={<Loader />}>
+          {(record) => {
+            return (
+              <>
+                <VariantBreadcrumb
+                  variantType={variantType()}
+                  sample={sample()}
+                  record={record()}
+                  consequenceId={consequenceId()}
+                />
+                <Show when={metadata()} fallback={<Loader />}>
+                  {(metadata) => (
+                    <Show when={config()} fallback={<Loader />}>
+                      {(config) => (
+                        <Show when={decisionTree()} fallback={<Loader />}>
+                          {(decisionTree) => (
+                            <Show when={sampleTree()} fallback={<Loader />}>
+                              {(sampleTree) => (
+                                <VariantConsequenceContainer
+                                  config={config()}
+                                  metadata={metadata()}
+                                  variantType={variantType()}
+                                  consequenceId={consequenceId()}
+                                  record={record()}
+                                  sample={sample()}
+                                  decisionTree={decisionTree()}
+                                  sampleTree={sampleTree()}
+                                />
+                              )}
+                            </Show>
+                          )}
+                        </Show>
+                      )}
+                    </Show>
+                  )}
+                </Show>
+              </>
+            );
+          }}
         </Show>
       )}
     </Show>
   );
 };
-
-export const SampleVariantConsequence: Component<{
-  sample: Item<Sample>;
-  pedigreeSamples: Item<Sample>[];
-  recordsMeta: Metadata;
-  variant: Item<Record>;
-  consequenceId: number;
-  decisionTree: DecisionTree | null;
-}> = (props) => {
-  const hasDecisionTreePathMeta = () =>
-    (props.recordsMeta.info.CSQ?.nested?.items || []).findIndex((csq) => csq.id === "VIPP") !== -1;
-
-  return (
-    <>
-      <div class="columns">
-        <div class="column is-6">
-          <h1 class="title is-5">Consequence</h1>
-          <ConsequenceTable
-            csqMetadata={props.recordsMeta.info.CSQ.nested !== undefined ? props.recordsMeta.info.CSQ.nested.items : []}
-            csqValues={getSpecificConsequence(props.variant.data.n.CSQ as ValueArray, props.consequenceId)}
-            record={props.variant}
-          />
-        </div>
-        {props.decisionTree !== null && hasDecisionTreePathMeta() && (
-          <div class="column">
-            <h1 class="title is-5">Classification tree path</h1>
-            <DecisionTreePath
-              decisionTree={props.decisionTree}
-              path={getDecisionTreePath(props.recordsMeta, props.variant, props.consequenceId)}
-            />
-          </div>
-        )}
-      </div>
-      <div class="columns">
-        <div class="column is-3">
-          <h1 class="title is-5">Record</h1>
-          <VariantTable variant={props.variant.data} />
-        </div>
-        <div class="column is-3">
-          <h1 class="title is-5">Info</h1>
-          <VariantInfoTable infoFields={props.recordsMeta.info} record={props.variant} />
-        </div>
-        <div class="column">
-          <h1 class="title is-5">Samples</h1>
-          <VariantSampleTable
-            formatFields={props.recordsMeta.format}
-            samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
-            sampleValues={getRecordSamples(
-              props.variant.data,
-              props.sample.data,
-              props.pedigreeSamples.map((item) => item.data),
-            )}
-            record={props.variant}
-          />
-        </div>
-      </div>
-    </>
-  );
-};