@molgenis/vip-report-template 6.0.1 → 6.1.1

package/src/views/Variant.tsx

@@ -1,5 +1,5 @@
 import { Component, createResource, For, Show } from "solid-js";
-import { useRouteData } from "@solidjs/router";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { GenomeBrowser } from "../components/GenomeBrowser";
 import { Loader } from "../components/Loader";
 import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
@@ -9,54 +9,60 @@ import { VariantInfoNestedTable } from "../components/VariantInfoNestedTable";
 import { getNestedInfoFieldsWithValues } from "../utils/field";
 import { Breadcrumb } from "../components/Breadcrumb";
 import { EMPTY_RECORDS_METADATA, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
-import { VariantRouteData } from "./data/VariantData";
+import { getVariant } from "./data/data";
+import { Item } from "@molgenis/vip-report-api/src/Api";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
 
-export const Variant: Component = () => {
-  const { variant } = useRouteData<VariantRouteData>();
+export const Variant: Component<RouteSectionProps<Promise<Item<Record>>>> = (props) => {
+  const variant = createAsync(() => getVariant(Number(props.params.variantId)));
 
   const [recordsMetadata] = createResource(fetchRecordsMeta, { initialValue: EMPTY_RECORDS_METADATA });
 
   return (
     <>
-      <Show when={!variant.loading} fallback={<Loader />}>
-        <Breadcrumb items={[{ href: "/variants", text: "Variants" }, { text: getRecordLabel(variant()) }]} />
-        <GenomeBrowser contig={variant().data.c} position={variant().data.p} samples={[]} />
-        <div class="columns">
-          <div class="column is-3">
-            <h1 class="title is-5">Record</h1>
-            <VariantTable variant={variant().data} />
-          </div>
-          <Show
-            when={
-              Object.values(recordsMetadata().info).filter(
-                (info) => !info.nested && variant().data.n[info.id] !== undefined,
-              ).length > 0
-            }
-          >
-            <div class="column is-3">
-              <h1 class="title is-5">Info</h1>
-              <VariantInfoTable infoFields={recordsMetadata().info} record={variant()} />
+      <Show when={variant()} fallback={<Loader />}>
+        {(variant) => (
+          <>
+            <Breadcrumb items={[{ href: "/variants", text: "Variants" }, { text: getRecordLabel(variant()) }]} />
+            <GenomeBrowser contig={variant().data.c} position={variant().data.p} samples={[]} />
+            <div class="columns">
+              <div class="column is-3">
+                <h1 class="title is-5">Record</h1>
+                <VariantTable variant={variant().data} />
+              </div>
+              <Show
+                when={
+                  Object.values(recordsMetadata().info).filter(
+                    (info) => !info.nested && variant().data.n[info.id] !== undefined,
+                  ).length > 0
+                }
+              >
+                <div class="column is-3">
+                  <h1 class="title is-5">Info</h1>
+                  <VariantInfoTable infoFields={recordsMetadata().info} record={variant()} />
+                </div>
+              </Show>
             </div>
-          </Show>
-        </div>
-        <div class="columns">
-          <div class="column" style={{ "max-width": "100%" }}>
-            <For each={getNestedInfoFieldsWithValues(recordsMetadata().info, variant().data.n)}>
-              {(infoField) => (
-                <>
-                  <h1 class="title is-5">{infoField.id}</h1>
-                  <p class="mb-4">{infoField.description}</p>
-                  <VariantInfoNestedTable
-                    infoValue={variant().data.n[infoField.id] as unknown as Value[][]}
-                    infoField={infoField}
-                    record={variant()}
-                    sample={null}
-                  />
-                </>
-              )}
-            </For>
-          </div>
-        </div>
+            <div class="columns">
+              <div class="column" style={{ "max-width": "100%" }}>
+                <For each={getNestedInfoFieldsWithValues(recordsMetadata().info, variant().data.n)}>
+                  {(infoField) => (
+                    <>
+                      <h1 class="title is-5">{infoField.id}</h1>
+                      <p class="mb-4">{infoField.description}</p>
+                      <VariantInfoNestedTable
+                        infoValue={variant().data.n[infoField.id] as unknown as Value[][]}
+                        infoField={infoField}
+                        record={variant()}
+                        sample={null}
+                      />
+                    </>
+                  )}
+                </For>
+              </div>
+            </div>
+          </>
+        )}
       </Show>
     </>
   );

package/src/views/VariantConsequence.tsx

@@ -1,5 +1,5 @@
 import { Component, createResource, Show } from "solid-js";
-import { useRouteData } from "@solidjs/router";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
 import { DecisionTree } from "@molgenis/vip-report-api/src/Api";
 import { VariantTable } from "../components/VariantTable";
@@ -18,10 +18,11 @@ import {
 } from "../utils/ApiUtils";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
-import { VariantConsequenceRouteData } from "./data/VariantConsequenceData";
+import { getVariant } from "./data/data";
 
-export const VariantConsequence: Component = () => {
-  const { variant, consequenceId } = useRouteData<VariantConsequenceRouteData>();
+export const VariantConsequence: Component<RouteSectionProps> = (props) => {
+  const variant = createAsync(() => getVariant(Number(props.params.variantId)));
+  const consequenceId = () => Number(props.params.consequenceId);
 
   const [recordsMetadata] = createResource(fetchRecordsMeta, { initialValue: EMPTY_RECORDS_METADATA });
   const [decisionTree] = createResource(fetchDecisionTree, { initialValue: EMPTY_DECISION_TREE });
@@ -30,14 +31,14 @@ export const VariantConsequence: Component = () => {
 
   const hasDecisionTreePathMeta = () => csqFields().findIndex((csq) => csq.id === "VIPP") !== -1;
   return (
-    <Show when={!variant.loading && variant()} fallback={<Loader />} keyed>
+    <Show when={variant()} fallback={<Loader />} keyed>
       {(variant) => (
         <>
           <Breadcrumb
             items={[
               { href: "/variants", text: "Variants" },
               { href: `/variants/${variant.id}`, text: getRecordLabel(variant) },
-              { text: `Consequence #${consequenceId}` },
+              { text: `Consequence #${consequenceId()}` },
             ]}
           />
           <div class="columns">
@@ -45,7 +46,7 @@ export const VariantConsequence: Component = () => {
               <h1 class="title is-5">Consequence</h1>
               <ConsequenceTable
                 csqMetadata={csqFields()}
-                csqValues={getSpecificConsequence(variant.data.n.CSQ as ValueArray, consequenceId)}
+                csqValues={getSpecificConsequence(variant.data.n.CSQ as ValueArray, consequenceId())}
                 record={variant}
               />
             </div>
@@ -56,7 +57,7 @@ export const VariantConsequence: Component = () => {
                     <h1 class="title is-5">Classification tree path</h1>
                     <DecisionTreePath
                       decisionTree={decisionTree}
-                      path={getDecisionTreePath(recordsMetadata(), variant, consequenceId)}
+                      path={getDecisionTreePath(recordsMetadata(), variant, consequenceId())}
                     />
                   </div>
                 )}

package/src/views/Variants.tsx

@@ -83,7 +83,7 @@ export const Variants: Component<{
 
   return (
     <div class="columns is-variable is-1">
-      <div class="column is-1-fullhd is-2">
+      <div class="scrolling-div column is-1-fullhd is-2">
         <SearchBox onInput={onSearchChange} />
         <InfoFilters
           fields={flattenFieldMetadata(props.recordsMeta.info)}
@@ -92,7 +92,13 @@ export const Variants: Component<{
           onClear={onFilterClear}
         />
       </div>
-      <div class="column">
+      <div class="scrolling-div column">
+        <div class="columns is-gapless">
+          <div class="column">
+            <p class="title is-3">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>

package/src/views/data/data.tsx

@@ -0,0 +1,7 @@
+import { cache } from "@solidjs/router";
+import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import api from "../../Api";
+
+export const getSample = cache(async (id: number): Promise<Item<Sample>> => api.getSampleById(id), "sample");
+export const getVariant = cache(async (id: number): Promise<Item<Record>> => api.getRecordById(id), "variant");

package/src/components/filter/FilterIntegerDp.tsx

@@ -1,47 +0,0 @@
-import { Component } from "solid-js";
-import { FilterProps } from "./Filter";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { selector, selectorKey } from "../../utils/query";
-import { Item, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
-
-export const FilterIntegerDp: Component<FilterProps> = (props) => {
-  const onFilterChange = (event: CheckboxEvent) => {
-    const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
-    if (event.checked)
-      props.onChange({
-        key: selectorKey(fieldSelector),
-        query: {
-          operator: "or",
-          args: [
-            {
-              selector: fieldSelector,
-              operator: ">=",
-              args: 20,
-            },
-            {
-              selector: fieldSelector,
-              operator: "==",
-              args: null,
-            },
-            {
-              selector: fieldSelector,
-              operator: "==",
-              args: undefined,
-            },
-          ],
-        },
-      });
-    else props.onClear({ key: selectorKey(fieldSelector) });
-  };
-
-  return (
-    <div class="control">
-      <Checkbox
-        desc="Sequencing depth >= 20"
-        label="Depth >= 20"
-        checked={props.query && props.query.args !== undefined}
-        onChange={onFilterChange}
-      />
-    </div>
-  );
-};

package/src/views/data/SampleData.tsx

@@ -1,13 +0,0 @@
-import { createResource, Resource } from "solid-js";
-import { RouteDataFuncArgs } from "@solidjs/router/dist/types";
-import { EMPTY_SAMPLE_ITEM, fetchSampleById } from "../../utils/ApiUtils";
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
-
-export type SampleParams = { sampleId: string };
-export type SampleRouteData = { sample: Resource<Item<Sample>> };
-
-export default function SampleData({ params }: RouteDataFuncArgs): SampleRouteData {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
-  const [sample] = createResource(() => params.sampleId, fetchSampleById, { initialValue: EMPTY_SAMPLE_ITEM });
-  return { sample };
-}

package/src/views/data/SampleVariantConsequenceData.tsx

@@ -1,13 +0,0 @@
-import { RouteDataFuncArgs } from "@solidjs/router/dist/types";
-import { SampleVariantRouteData } from "./SampleVariantData";
-
-export type SampleVariantConsequenceRouteData = { consequenceId: number } & SampleVariantRouteData;
-
-export default function SampleVariantConsequenceData({
-  params,
-  data,
-}: RouteDataFuncArgs): SampleVariantConsequenceRouteData {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument
-  const consequenceId: number = parseInt(params.consequenceId);
-  return { ...(data as SampleVariantRouteData), consequenceId };
-}

package/src/views/data/SampleVariantData.tsx

@@ -1,14 +0,0 @@
-import { createResource, Resource } from "solid-js";
-import { RouteDataFuncArgs } from "@solidjs/router/dist/types";
-import { fetchRecordById } from "../../utils/ApiUtils";
-import { SampleRouteData } from "./SampleData";
-import { Item } from "@molgenis/vip-report-api/src/Api";
-import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
-
-export type SampleVariantRouteData = SampleRouteData & { variant: Resource<Item<Record> | undefined> };
-
-export default function SampleVariantData({ params, data }: RouteDataFuncArgs): SampleVariantRouteData {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
-  const [variant] = createResource(() => params.variantId, fetchRecordById);
-  return { ...(data as SampleRouteData), variant };
-}

package/src/views/data/VariantConsequenceData.tsx

@@ -1,10 +0,0 @@
-import { RouteDataFuncArgs } from "@solidjs/router/dist/types";
-import { VariantRouteData } from "./VariantData";
-
-export type VariantConsequenceRouteData = { consequenceId: number } & VariantRouteData;
-
-export default function VariantConsequenceData({ params, data }: RouteDataFuncArgs): VariantConsequenceRouteData {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument
-  const consequenceId: number = parseInt(params.consequenceId);
-  return { ...(data as VariantRouteData), consequenceId };
-}

package/src/views/data/VariantData.tsx

@@ -1,13 +0,0 @@
-import { createResource, Resource } from "solid-js";
-import { RouteDataFuncArgs } from "@solidjs/router/dist/types";
-import { EMPTY_RECORD_ITEM, fetchRecordById } from "../../utils/ApiUtils";
-import { Item } from "@molgenis/vip-report-api/src/Api";
-import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
-
-export type VariantRouteData = { variant: Resource<Item<Record>> };
-
-export default function VariantData({ params }: RouteDataFuncArgs): VariantRouteData {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
-  const [variant] = createResource(() => params.variantId, fetchRecordById, { initialValue: EMPTY_RECORD_ITEM });
-  return { variant };
-}