@molgenis/vip-report-template 2.7.2 → 3.0.0-beta2

package/src/views/SampleVariants.tsx

@@ -0,0 +1,248 @@
+import { Component, createMemo, createResource, Show } from "solid-js";
+import { useRouteData } from "solid-app-router";
+import { Item, Params, PhenotypicFeature, Sample, SortPath } from "@molgenis/vip-report-api/src/Api";
+import { Loader } from "../components/Loader";
+import { SearchBox } from "../components/SearchBox";
+import { Sort, SortEvent } from "../components/Sort";
+import { Pager } from "../components/record/Pager";
+import { RecordDownload } from "../components/record/RecordDownload";
+import { createQuery, infoSelector, infoSortPath, sampleSelector } from "../utils/query";
+import { VariantsSampleTable } from "../components/VariantsSampleTable";
+import { fetchPedigreeSamples, fetchPhenotypicFeatures, fetchRecords, fetchRecordsMeta } from "../utils/ApiUtils";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { 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 { getSampleLabel } from "../utils/sample";
+import { FilterChangeEvent, FilterClearEvent } from "../components/filter/Filter";
+import { arrayEquals } from "../utils/utils";
+
+export const SampleVariantsView: Component = () => {
+  const { sample } = useRouteData<SampleRouteData>();
+
+  const [pedigreeSamples] = createResource(sample, fetchPedigreeSamples);
+  const [samplePhenotypes] = createResource(sample, fetchPhenotypicFeatures);
+  const [recordsMeta] = createResource(fetchRecordsMeta);
+
+  return (
+    <Show when={sample()} fallback={<Loader />}>
+      <Breadcrumb
+        items={[
+          { href: "/samples", text: "Samples" },
+          { href: `/samples/${sample()!.id}`, text: getSampleLabel(sample()!) },
+          { text: "Variants" },
+        ]}
+      />
+      <Show when={pedigreeSamples() && samplePhenotypes() && recordsMeta()} fallback={<Loader />}>
+        <SampleVariants
+          sample={sample()!}
+          samplePhenotypes={samplePhenotypes()!}
+          pedigreeSamples={pedigreeSamples()!.items}
+          recordsMeta={recordsMeta()!}
+        />
+      </Show>
+    </Show>
+  );
+};
+
+export const SampleVariants: Component<{
+  sample: Item<Sample>;
+  samplePhenotypes: PhenotypicFeature[];
+  pedigreeSamples: Item<Sample>[];
+  recordsMeta: Metadata;
+}> = (props) => {
+  const [state, actions] = useStore();
+
+  function getStateVariants() {
+    return state.samples ? state.samples[props.sample.id]?.variants : undefined;
+  }
+
+  // state initialization - start
+  if (getStateVariants()?.page === undefined) {
+    actions.setSampleVariantsPage(props.sample, 0);
+  }
+  if (getStateVariants()?.pageSize === undefined) {
+    actions.setSampleVariantsPageSize(props.sample, 20);
+  }
+
+  if (getStateVariants()?.filterQueries === undefined) {
+    const hpoField = props.recordsMeta.info?.CSQ?.nested?.items?.find((field) => field.id === "HPO");
+    if (hpoField) {
+      actions.setSampleVariantsFilterQuery(props.sample, {
+        selector: infoSelector(hpoField),
+        operator: "any_has_any",
+        args: props.samplePhenotypes.map((phenotype) => phenotype.type.id),
+      });
+    }
+
+    const vimField = props.recordsMeta.format?.VIM;
+    if (vimField) {
+      actions.setSampleVariantsFilterQuery(props.sample, {
+        selector: sampleSelector(props.sample, vimField),
+        operator: "==",
+        args: 1,
+      });
+    }
+    const dpField = props.recordsMeta.format?.DP;
+    if (dpField) {
+      actions.setSampleVariantsFilterQuery(props.sample, {
+        selector: sampleSelector(props.sample, dpField),
+        operator: ">=",
+        args: 20,
+      });
+    }
+  }
+
+  if (getStateVariants()?.sort === undefined) {
+    const capiceScField = props.recordsMeta.info?.CSQ?.nested?.items?.find((field) => field.id === "CAPICE_SC");
+    if (capiceScField) {
+      actions.setSampleVariantsSort(props.sample, {
+        property: infoSortPath(capiceScField),
+        compare: DIRECTION_DESCENDING,
+      });
+    }
+  }
+  // state initialization - end
+
+  const infoFields = createMemo(() => {
+    const csqNestedFields = props.recordsMeta.info.CSQ?.nested?.items;
+    const includedFields = [
+      "Consequence",
+      "SYMBOL",
+      "InheritanceModesGene",
+      "IncompletePenetrance",
+      "HPO",
+      "HGVSc",
+      "HGVSp",
+      "CAPICE_SC",
+      "VIPC",
+      "UMCG_CL",
+      "VKGL_CL",
+      "CLIN_SIG",
+      "gnomAD_AF",
+      "gnomAD_HN",
+      "PUBMED",
+    ];
+    return csqNestedFields
+      ? (includedFields
+          .map((fieldId) => csqNestedFields.find((field) => field.id === fieldId))
+          .filter((field) => field !== undefined) as FieldMetadata[])
+      : [];
+  });
+
+  const formatFields = createMemo(() => {
+    const formatFieldMap = props.recordsMeta.format;
+    const includedFields = ["VIM", "VID", "DP"];
+    return formatFieldMap
+      ? includedFields.map((fieldId) => formatFieldMap[fieldId]).filter((field) => field !== undefined)
+      : [];
+  });
+
+  const page = () => getStateVariants()?.page;
+  const pageSize = () => getStateVariants()?.pageSize;
+  const searchQuery = () => getStateVariants()?.searchQuery;
+  const filterQueries = () => getStateVariants()?.filterQueries;
+  const sort = () => getStateVariants()?.sort;
+
+  const onPageChange = (page: number) => actions.setSampleVariantsPage(props.sample, page);
+  const onSearchChange = (search: string) => actions.setSampleVariantsSearchQuery(props.sample, search);
+  const onFilterChange = (event: FilterChangeEvent) => actions.setSampleVariantsFilterQuery(props.sample, event.query);
+  const onFilterClear = (event: FilterClearEvent) =>
+    actions.clearSampleVariantsFilterQuery(props.sample, event.selector);
+  const onSortChange = (event: SortEvent) => actions.setSampleVariantsSort(props.sample, event.order);
+  const onSortClear = () => actions.setSampleVariantsSort(props.sample, null);
+
+  const params = (): Params => {
+    return {
+      query: createQuery(searchQuery(), filterQueries(), props.recordsMeta) || undefined,
+      sort: sort() || undefined,
+      page: page() || undefined,
+      size: pageSize() || undefined,
+    };
+  };
+
+  const [records] = createResource(params, fetchRecords);
+
+  const sortOptions = () =>
+    infoFields().flatMap((field) => [
+      {
+        order: { field, direction: DIRECTION_ASCENDING },
+        selected:
+          arrayEquals(infoSortPath(field), sort()?.property as SortPath) && sort()?.compare === DIRECTION_ASCENDING
+            ? true
+            : undefined,
+      },
+      {
+        order: { field, direction: DIRECTION_DESCENDING },
+        selected:
+          arrayEquals(infoSortPath(field), sort()?.property as SortPath) && sort()?.compare === DIRECTION_DESCENDING
+            ? true
+            : undefined,
+      },
+    ]);
+
+  return (
+    <div class="columns">
+      <div class="column is-1-fullhd is-2">
+        <SearchBox value={searchQuery()} onInput={onSearchChange} />
+        <Filters
+          fields={infoFields()}
+          samplesFields={[{ sample: props.sample, fields: formatFields() }]}
+          queries={filterQueries()}
+          onChange={onFilterChange}
+          onClear={onFilterClear}
+        />
+      </div>
+      <div class="column">
+        <div class="columns">
+          <div class="column is-offset-1-fullhd is-3-fullhd is-4">
+            {infoFields().length > 0 && <Sort options={sortOptions()} onChange={onSortChange} onClear={onSortClear} />}
+          </div>
+          <div class="column is-4">
+            <Show when={records()} fallback={<Loader />}>
+              {(records) => <Pager page={records.page} onPageChange={onPageChange} />}
+            </Show>
+          </div>
+          <div class="column">
+            <div class="columns">
+              <div class="column is-10">
+                <Show when={records()} fallback={<Loader />}>
+                  {(records) => (
+                    <span class="is-pulled-right" style={{ margin: "auto" }}>
+                      {records.page.totalElements} records
+                    </span>
+                  )}
+                </Show>
+              </div>
+              <div class="column">
+                <div class="is-pulled-right">
+                  <RecordDownload
+                    recordsMetadata={props.recordsMeta}
+                    query={params().query}
+                    samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="columns">
+          <Show when={records()} fallback={<Loader />}>
+            {(records) => (
+              <VariantsSampleTable
+                item={props.sample}
+                pedigreeSamples={props.pedigreeSamples}
+                records={records.items}
+                recordsMetadata={props.recordsMeta}
+                nestedFields={infoFields()}
+              />
+            )}
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/views/Samples.tsx

@@ -0,0 +1,57 @@
+import { Component, createResource, createSignal } from "solid-js";
+import { SampleTable } from "../components/SampleTable";
+import { Pager } from "../components/record/Pager";
+import { SearchBox } from "../components/SearchBox";
+import { Checkbox, CheckboxEvent } from "../components/Checkbox";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { EMPTY_PARAMS, EMPTY_PHENOTYPES, EMPTY_SAMPLES_PAGE, fetchPhenotypes, fetchSamples } from "../utils/ApiUtils";
+
+export const Samples: Component = () => {
+  const [params, setParams] = createSignal(EMPTY_PARAMS);
+  const [samples] = createResource(params, fetchSamples, { initialValue: EMPTY_SAMPLES_PAGE });
+  const [phenotypes] = createResource(EMPTY_PARAMS, fetchPhenotypes, { initialValue: EMPTY_PHENOTYPES });
+
+  const onPageChange = (page: number) => setParams({ page });
+  const onSearchChange = (search: string) =>
+    setParams({
+      page: 0,
+      query: search !== "" ? { selector: ["person", "individualId"], operator: "==", args: search } : undefined,
+    });
+  const onProbandFilterChange = (event: CheckboxEvent) => {
+    setParams({
+      page: 0,
+      query: event.checked ? { selector: ["proband"], operator: "==", args: event.checked } : undefined,
+    });
+  };
+
+  return (
+    <>
+      <Breadcrumb items={[{ text: "Samples" }]} />
+      <div class="columns">
+        <div class="column is-4 is-offset-3">
+          {!samples.loading && <Pager page={samples().page} onPageChange={onPageChange} />}
+        </div>
+        <div class="column is-2 is-offset-1">
+          {!samples.loading && <span class="is-pulled-right">{samples().page.totalElements} records</span>}
+        </div>
+      </div>
+
+      <div class="columns">
+        <div class="column is-1-fullhd is-2">
+          <SearchBox onInput={onSearchChange} />
+          <p class="has-text-weight-semibold">Proband</p>
+          <div class="field">
+            <div class="control">
+              <Checkbox value={"proband"} label="" onChange={onProbandFilterChange} />
+            </div>
+          </div>
+        </div>
+        <div class="column">
+          {!samples.loading && !phenotypes.loading && (
+            <SampleTable samples={samples().items} phenotypes={phenotypes().items} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

package/src/views/Variant.tsx

@@ -0,0 +1,63 @@
+import { Component, createResource, For, Show } from "solid-js";
+import { useRouteData } from "solid-app-router";
+import { GenomeBrowser } from "../components/GenomeBrowser";
+import { Loader } from "../components/Loader";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { VariantTable } from "../components/VariantTable";
+import { VariantInfoTable } from "../components/VariantInfoTable";
+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";
+
+export const Variant: Component = () => {
+  const { variant } = useRouteData<VariantRouteData>();
+
+  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 infoValues={variant().data.n} infoFields={recordsMetadata().info} />
+            </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>
+      </Show>
+    </>
+  );
+};

package/src/views/VariantConsequence.tsx

@@ -0,0 +1,69 @@
+import { Component, createResource, Show } from "solid-js";
+import { useRouteData } from "solid-app-router";
+import { Loader } from "../components/Loader";
+import { DecisionTree } from "@molgenis/vip-report-api/src/Api";
+import { VariantTable } from "../components/VariantTable";
+import { VariantInfoTable } from "../components/VariantInfoTable";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { getSpecificConsequence } from "../utils/viewUtils";
+import { ConsequenceTable } from "../components/ConsequenceTable";
+import { DecisionTreePath } from "../components/tree/DecisionTreePath";
+import { getDecisionTreePath } from "../utils/decisionTreeUtils";
+import {
+  EMPTY_DECISION_TREE,
+  EMPTY_RECORDS_METADATA,
+  fetchDecisionTree,
+  fetchRecordsMeta,
+  getRecordLabel,
+} 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";
+
+export const VariantConsequence: Component = () => {
+  const { variant, consequenceId } = useRouteData<VariantConsequenceRouteData>();
+
+  const [recordsMetadata] = createResource(fetchRecordsMeta, { initialValue: EMPTY_RECORDS_METADATA });
+  const [decisionTree] = createResource(fetchDecisionTree, { initialValue: EMPTY_DECISION_TREE });
+
+  const csqFields = (): FieldMetadata[] => recordsMetadata().info.CSQ?.nested?.items || [];
+  const csqValues = (): ValueArray => getSpecificConsequence(variant().data.n.CSQ as ValueArray, consequenceId);
+  return (
+    <Show when={!variant.loading} fallback={<Loader />}>
+      <Breadcrumb
+        items={[
+          { href: "/variants", text: "Variants" },
+          { href: `/variants/${variant().id}`, text: getRecordLabel(variant()) },
+          { text: `Consequence #${consequenceId}` },
+        ]}
+      />
+      <div class="columns">
+        <div class="column is-6">
+          <h1 class="title is-5">Consequence</h1>
+          <ConsequenceTable csqMetadata={csqFields()} csqValues={csqValues()} record={variant().data} />
+        </div>
+        <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)}>
+          {(decisionTree) => (
+            <div class="column">
+              <h1 class="title is-5">Classification tree path</h1>
+              <DecisionTreePath
+                decisionTree={decisionTree}
+                path={getDecisionTreePath(recordsMetadata(), variant(), consequenceId)}
+              />
+            </div>
+          )}
+        </Show>
+      </div>
+      <div class="columns">
+        <div class="column is-6">
+          <h1 class="title is-5">Record</h1>
+          <VariantTable variant={variant().data} />
+        </div>
+        <div class="column">
+          <h1 class="title is-5">Info</h1>
+          <VariantInfoTable infoValues={variant().data.n} infoFields={recordsMetadata().info} />
+        </div>
+      </div>
+    </Show>
+  );
+};

package/src/views/Variants.tsx

@@ -0,0 +1,123 @@
+import { Component, createResource, Show } from "solid-js";
+import { VariantsTable } from "../components/VariantsTable";
+import { Pager } from "../components/record/Pager";
+import { SearchBox } from "../components/SearchBox";
+import { InfoFilters } from "../components/filter/InfoFilters";
+import { Sort, SortEvent } from "../components/Sort";
+import { RecordDownload } from "../components/record/RecordDownload";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { fetchRecords, fetchRecordsMeta } from "../utils/ApiUtils";
+import { flattenFieldMetadata } from "../utils/field";
+import { DIRECTION_ASCENDING, DIRECTION_DESCENDING } from "../utils/sortUtils";
+import { Params, SortPath } from "@molgenis/vip-report-api/src/Api";
+import { FilterChangeEvent, FilterClearEvent } from "../components/filter/Filter";
+import { useStore } from "../store";
+import { createQuery, infoSortPath } from "../utils/query";
+import { Loader } from "../components/Loader";
+import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
+import { arrayEquals } from "../utils/utils";
+
+export const VariantsView: Component = () => {
+  const [recordsMeta] = createResource(fetchRecordsMeta);
+
+  return (
+    <>
+      <Breadcrumb items={[{ text: "Variants" }]} />
+      <Show when={recordsMeta()} fallback={<Loader />}>
+        <Variants recordsMeta={recordsMeta()!} />
+      </Show>
+    </>
+  );
+};
+
+export const Variants: Component<{
+  recordsMeta: Metadata;
+}> = (props) => {
+  const [state, actions] = useStore();
+
+  const page = () => state.variants?.page;
+  const pageSize = () => state.variants?.pageSize;
+  const searchQuery = () => state.variants?.searchQuery;
+  const filterQueries = () => state.variants?.filterQueries;
+  const sort = () => state.variants?.sort;
+
+  const onPageChange = (page: number) => actions.setVariantsPage(page);
+  const onSearchChange = (search: string) => actions.setVariantsSearchQuery(search);
+  const onFilterChange = (event: FilterChangeEvent) => actions.setVariantsFilterQuery(event.query);
+  const onFilterClear = (event: FilterClearEvent) => actions.clearVariantsFilterQuery(event.selector);
+  const onSortChange = (event: SortEvent) => actions.setVariantsSort(event.order);
+  const onSortClear = () => actions.setVariantsSort(null);
+
+  const params = (): Params => {
+    return {
+      query: createQuery(searchQuery(), filterQueries(), props.recordsMeta) || undefined,
+      sort: sort() || undefined,
+      page: page() || undefined,
+      size: pageSize() || undefined,
+    };
+  };
+
+  const [records] = createResource(params, fetchRecords);
+
+  const sortOptions = () => {
+    return flattenFieldMetadata(props.recordsMeta.info).flatMap((field) => [
+      {
+        order: { field, direction: DIRECTION_ASCENDING },
+        selected:
+          arrayEquals(infoSortPath(field), sort()?.property as SortPath) && sort()?.compare === DIRECTION_ASCENDING
+            ? true
+            : undefined,
+      },
+      {
+        order: { field, direction: DIRECTION_DESCENDING },
+        selected:
+          arrayEquals(infoSortPath(field), sort()?.property as SortPath) && sort()?.compare === DIRECTION_DESCENDING
+            ? true
+            : undefined,
+      },
+    ]);
+  };
+
+  return (
+    <Show when={records()} fallback={<Loader />}>
+      <div class="columns">
+        <div class="column is-1-fullhd is-2">
+          <SearchBox onInput={onSearchChange} />
+          <InfoFilters
+            fields={flattenFieldMetadata(props.recordsMeta.info)}
+            queries={filterQueries()}
+            onChange={onFilterChange}
+            onClear={onFilterClear}
+          />
+        </div>
+        <div class="column">
+          <div class="columns">
+            <div class="column is-offset-1-fullhd is-3-fullhd is-4">
+              <Sort options={sortOptions()} onChange={onSortChange} onClear={onSortClear} />
+            </div>
+            <div class="column is-4">
+              <Pager page={records()!.page} onPageChange={onPageChange} />
+            </div>
+            <div class="column">
+              <div class="columns">
+                <div class="column is-10">
+                  <span class="is-pulled-right" style={{ margin: "auto" }}>
+                    {records()!.page.totalElements} records
+                  </span>
+                </div>
+                <div class="column">
+                  <div class="is-pulled-right">
+                    <RecordDownload recordsMetadata={props.recordsMeta} query={params().query} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="columns">
+            <VariantsTable records={records()!.items} recordsMetadata={props.recordsMeta} />
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+};

package/src/views/data/SampleData.tsx

@@ -0,0 +1,11 @@
+import { createResource, Resource } from "solid-js";
+import { RouteDataFuncArgs } from "solid-app-router/dist/types";
+import { EMPTY_SAMPLE_ITEM, fetchSampleById } from "../../utils/ApiUtils";
+import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+
+export type SampleRouteData = { sample: Resource<Item<Sample>> };
+
+export default function SampleData({ params }: RouteDataFuncArgs): SampleRouteData {
+  const [sample] = createResource(() => params.sampleId, fetchSampleById, { initialValue: EMPTY_SAMPLE_ITEM });
+  return { sample };
+}

package/src/views/data/SampleVariantConsequenceData.tsx

@@ -0,0 +1,12 @@
+import { RouteDataFuncArgs } from "solid-app-router/dist/types";
+import { SampleVariantRouteData } from "./SampleVariantData";
+
+export type SampleVariantConsequenceRouteData = { consequenceId: number } & SampleVariantRouteData;
+
+export default function SampleVariantConsequenceData({
+  params,
+  data,
+}: RouteDataFuncArgs): SampleVariantConsequenceRouteData {
+  const consequenceId: number = parseInt(params.consequenceId);
+  return { ...(data as SampleVariantRouteData), consequenceId };
+}

package/src/views/data/SampleVariantData.tsx

@@ -0,0 +1,13 @@
+import { createResource, Resource } from "solid-js";
+import { RouteDataFuncArgs } from "solid-app-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 {
+  const [variant] = createResource(() => params.variantId, fetchRecordById);
+  return { ...(data as SampleRouteData), variant };
+}

package/src/views/data/VariantConsequenceData.tsx

@@ -0,0 +1,9 @@
+import { RouteDataFuncArgs } from "solid-app-router/dist/types";
+import { VariantRouteData } from "./VariantData";
+
+export type VariantConsequenceRouteData = { consequenceId: number } & VariantRouteData;
+
+export default function VariantConsequenceData({ params, data }: RouteDataFuncArgs): VariantConsequenceRouteData {
+  const consequenceId: number = parseInt(params.consequenceId);
+  return { ...(data as VariantRouteData), consequenceId };
+}

package/src/views/data/VariantData.tsx

@@ -0,0 +1,12 @@
+import { createResource, Resource } from "solid-js";
+import { RouteDataFuncArgs } from "solid-app-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 {
+  const [variant] = createResource(() => params.variantId, fetchRecordById, { initialValue: EMPTY_RECORD_ITEM });
+  return { variant };
+}