@molgenis/vip-report-template 6.0.2 → 6.2.0

package/src/mocks/MockApiClient.ts

@@ -18,6 +18,7 @@ import {
   cram as cramGRCh37,
   crai as craiGRCh37,
   decisionTree as decisionTreeGRCh37,
+  sampleTree as sampleTreeGRCh37,
   fastaGz as fastaGzGRCh37,
   genesGz as genesGzGRCh37,
   samplesFamily as samplesFamilyGRCh37,
@@ -73,6 +74,10 @@ export class MockApiClient implements Api {
     return this.apiClient.getDecisionTree();
   }
 
+  getSampleTree(): Promise<DecisionTree | null> {
+    return this.apiClient.getSampleTree();
+  }
+
   getHtsFileMetadata(): Promise<HtsFileMetadata> {
     return this.apiClient.getHtsFileMetadata();
   }
@@ -144,6 +149,7 @@ export class MockApiClient implements Api {
         },
       },
       decisionTree: decisionTreeGRCh37,
+      sampleTree: sampleTreeGRCh37,
       vcfMeta: vcfMetaGRCh37,
     };
 

package/src/store/index.tsx

@@ -1,4 +1,3 @@
-import { hashIntegration, Router } from "@solidjs/router";
 import { Context, createContext, ParentComponent, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { Item, Query, Sample, SortOrder } from "@molgenis/vip-report-api/src/Api";
@@ -172,11 +171,7 @@ export const Provider: ParentComponent = (props) => {
   };
   const store: AppStore = [state, actions];
 
-  return (
-    <Router source={hashIntegration()}>
-      <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>
-    </Router>
-  );
+  return <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>;
 };
 
 export function useStore() {

package/src/utils/ApiUtils.ts

@@ -161,6 +161,10 @@ export async function fetchDecisionTree() {
   return await api.getDecisionTree();
 }
 
+export async function fetchSampleTree() {
+  return await api.getSampleTree();
+}
+
 export async function fetchSampleById(id: string) {
   return await api.getSampleById(Number(id));
 }

package/src/utils/decisionTreeUtils.ts

@@ -12,3 +12,20 @@ export function getDecisionTreePath(recordsMetadata: Metadata, variant: Item<Rec
     recordsMetadata.info.CSQ.nested.items.findIndex((csq) => csq.id === "VIPP")
   ] as DecisionTreePath;
 }
+
+export function getSampleTreePath(
+  recordsMetadata: Metadata,
+  sampleIndex: number,
+  variant: Item<Record>,
+  csqId: number,
+): DecisionTreePath {
+  const vipp_s = variant.data.s[sampleIndex].VIPP_S as ValueArray;
+  let sampleTreePath: DecisionTreePath = [];
+  if (vipp_s !== undefined) {
+    const sampleTreePathString = vipp_s[csqId] as string | null;
+    if (sampleTreePathString !== null) {
+      sampleTreePath = sampleTreePathString.split("&") as DecisionTreePath;
+    }
+  }
+  return sampleTreePath;
+}

package/src/views/Sample.tsx

@@ -1,26 +1,30 @@
 import { Component, For, Show } from "solid-js";
-import { Link, useRouteData } from "@solidjs/router";
+import { createAsync, RouteSectionProps, A } from "@solidjs/router";
 import { Loader } from "../components/Loader";
 import { Breadcrumb } from "../components/Breadcrumb";
-import { SampleRouteData } from "./data/SampleData";
+import { getSample } from "./data/data";
 
-export const Sample: Component = () => {
-  const { sample } = useRouteData<SampleRouteData>();
+export const Sample: Component<RouteSectionProps> = (props) => {
+  const sample = createAsync(() => getSample(Number(props.params.sampleId)));
 
   return (
-    <Show when={!sample.loading} fallback={<Loader />}>
-      <Breadcrumb items={[{ href: "/samples", text: "Samples" }, { text: sample().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>
-        </div>
-        <div class="column is-1">
-          <For each={Object.values(sample().data.person)}>{(value) => <p>{value}</p>}</For>
-        </div>
-      </div>
-      <br />
-      <Link href={`/samples/${sample().id}/variants`}>Variants</Link>
+    <Show when={sample()} fallback={<Loader />}>
+      {(sample) => (
+        <>
+          <Breadcrumb items={[{ href: "/samples", text: "Samples" }, { text: sample().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>
+            </div>
+            <div class="column is-1">
+              <For each={Object.values(sample().data.person)}>{(value) => <p>{value}</p>}</For>
+            </div>
+          </div>
+          <br />
+          <A href={`/samples/${sample().id}/variants`}>Variants</A>
+        </>
+      )}
     </Show>
   );
 };

package/src/views/SampleVariant.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 { Loader } from "../components/Loader";
 import { GenomeBrowser } from "../components/GenomeBrowser";
 import { fetchPedigreeSamples, fetchRecordsMeta, getRecordLabel } from "../utils/ApiUtils";
@@ -11,36 +11,51 @@ import { getNestedInfoFieldsWithValues } from "../utils/field";
 import { VariantSampleTable } from "../components/VariantSampleTable";
 import { Breadcrumb } from "../components/Breadcrumb";
 import { getRecordSamples } from "../utils/viewUtils";
-import { SampleVariantRouteData } from "./data/SampleVariantData";
 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";
 
-export const SampleVariantView: Component = () => {
-  const { sample, variant } = useRouteData<SampleVariantRouteData>();
+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);
 
   return (
-    <Show when={sample() && variant()} fallback={<Loader />}>
-      <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() && recordsMeta()} fallback={<Loader />}>
-        <SampleVariant
-          sample={sample()!}
-          pedigreeSamples={pedigreeSamples()!.items}
-          recordsMeta={recordsMeta()!}
-          record={variant()!}
-        />
-      </Show>
+    <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" },
+                  { text: getRecordLabel(variant()) },
+                ]}
+              />
+              <Show when={pedigreeSamples()} fallback={<Loader />}>
+                {(pedigreeSamples) => (
+                  <Show when={recordsMeta()} fallback={<Loader />}>
+                    {(recordsMeta) => (
+                      <SampleVariant
+                        sample={sample()}
+                        pedigreeSamples={pedigreeSamples().items}
+                        recordsMeta={recordsMeta()}
+                        record={variant()}
+                      />
+                    )}
+                  </Show>
+                )}
+              </Show>
+            </>
+          )}
+        </Show>
+      )}
     </Show>
   );
 };

package/src/views/SampleVariantConsequence.tsx

@@ -1,9 +1,9 @@
 import { Component, createResource, Show } from "solid-js";
-import { useRouteData } from "@solidjs/router";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
 import { Loader } from "../components/Loader";
 import {
+  fetchSampleTree,
   fetchDecisionTree,
-  fetchHtsFileMetadata,
   fetchPedigreeSamples,
   fetchRecordsMeta,
   getRecordLabel,
@@ -15,42 +15,61 @@ 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 { SampleVariantConsequenceRouteData } from "./data/SampleVariantConsequenceData";
+import { getDecisionTreePath, getSampleTreePath } 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";
 
-export const SampleVariantConsequenceView: Component = () => {
-  const { sample, variant, consequenceId } = useRouteData<SampleVariantConsequenceRouteData>();
-
+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 });
-  const [htsFileMeta] = createResource(fetchHtsFileMetadata);
+  const [sampleTree] = createResource(fetchSampleTree, { initialValue: null });
 
   return (
-    <Show when={sample() && variant()} fallback={<Loader />}>
-      <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() && recordsMeta() && htsFileMeta()} fallback={<Loader />}>
-        <SampleVariantConsequence
-          sample={sample()!}
-          pedigreeSamples={pedigreeSamples()!.items}
-          recordsMeta={recordsMeta()!}
-          variant={variant()!}
-          consequenceId={consequenceId}
-          decisionTree={decisionTree()}
-        />
-      </Show>
+    <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()}
+                        sampleTree={sampleTree()}
+                      />
+                    )}
+                  </Show>
+                )}
+              </Show>
+            </>
+          )}
+        </Show>
+      )}
     </Show>
   );
 };
@@ -62,52 +81,74 @@ export const SampleVariantConsequence: Component<{
   variant: Item<Record>;
   consequenceId: number;
   decisionTree: DecisionTree | null;
+  sampleTree: DecisionTree | null;
 }> = (props) => {
   const hasDecisionTreePathMeta = () =>
     (props.recordsMeta.info.CSQ?.nested?.items || []).findIndex((csq) => csq.id === "VIPP") !== -1;
+  const hasSampleTreePathMeta = () => props.recordsMeta.format.VIPP_S != null;
 
   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 class="column is-4">
+          <div>
+            <h1 class="title is-5">Info</h1>
+            <VariantInfoTable infoFields={props.recordsMeta.info} record={props.variant} />
+          </div>
+          <div class="mt-3">
+            <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>
-        )}
-      </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 class="mt-3">
+            <h1 class="title is-5">Record</h1>
+            <VariantTable variant={props.variant.data} />
+          </div>
         </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),
+        <div class="column is-8">
+          <div>
+            <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 class="columns mt-3">
+            {props.decisionTree !== null && hasDecisionTreePathMeta() && (
+              <div class="column is-6">
+                <h1 class="title is-5">Variant classification tree path</h1>
+                <DecisionTreePath
+                  decisionTree={props.decisionTree}
+                  path={getDecisionTreePath(props.recordsMeta, props.variant, props.consequenceId)}
+                />
+              </div>
             )}
-            record={props.variant}
-          />
+            {props.sampleTree !== null && hasSampleTreePathMeta() && (
+              <div class="column is-6">
+                <h1 class="title is-5">Sample classification tree path</h1>
+                <DecisionTreePath
+                  decisionTree={props.sampleTree}
+                  path={getSampleTreePath(
+                    props.recordsMeta,
+                    props.sample.data.index,
+                    props.variant,
+                    props.consequenceId,
+                  )}
+                />
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </>

package/src/views/SampleVariants.tsx

@@ -1,5 +1,4 @@
 import { Component, createMemo, createResource, createSignal, onMount, Show } from "solid-js";
-import { useRouteData } from "@solidjs/router";
 import {
   HtsFileMetadata,
   Item,
@@ -35,7 +34,6 @@ import { Breadcrumb } from "../components/Breadcrumb";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { FilterChangeEvent, FilterClearEvent, Filters } from "../components/filter/Filters";
 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 {
@@ -49,9 +47,11 @@ import {
 import { arrayEquals } from "../utils/utils";
 import { getAllelicBalanceQuery } from "../components/filter/FilterAllelicBalance";
 import { RecordsPerPage, RecordsPerPageEvent } from "../components/RecordsPerPage";
+import { createAsync, RouteSectionProps } from "@solidjs/router";
+import { getSample } from "./data/data";
 
-export const SampleVariantsView: Component = () => {
-  const { sample } = useRouteData<SampleRouteData>();
+export const SampleVariantsView: Component<RouteSectionProps> = (props) => {
+  const sample = createAsync(() => getSample(Number(props.params.sampleId)));
 
   const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
   const [samplePhenotypes] = createResource(sample, fetchPhenotypicFeatures);
@@ -375,8 +375,8 @@ export const SampleVariants: Component<{
   };
 
   return (
-    <div class="columns is-variable is-1">
-      <div class="column is-1-fullhd is-2">
+    <div class="variants columns is-variable is-1">
+      <div class="scrolling-div column is-1-fullhd is-2">
         <SearchBox value={searchQuery()} onInput={onSearchChange} />
         <Filters
           fields={filterInfoFields()}
@@ -386,7 +386,7 @@ export const SampleVariants: 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">{title()}</p>

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>
                 )}