@molgenis/vip-report-template 2.7.3 → 3.0.0

package/src/__tests__/query.test.ts

@@ -0,0 +1,156 @@
+import { describe, expect, test } from "vitest";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
+import { FilterQueries } from "../store";
+import {
+  createQuery,
+  infoFieldKey,
+  infoSelector,
+  infoSortPath,
+  sampleFieldKey,
+  sampleSelector,
+  selectorKey,
+} from "../utils/query";
+import { Person, QueryClause } from "@molgenis/vip-report-api/src/Api";
+
+describe("query utilities", () => {
+  let fieldMetaCsq: FieldMetadata = {
+    id: "CSQ",
+    number: { type: "NUMBER" },
+    type: "STRING",
+  };
+
+  const fieldMeta1: FieldMetadata = {
+    id: "field1",
+    number: { type: "NUMBER" },
+    type: "CATEGORICAL",
+    parent: fieldMetaCsq,
+  };
+
+  const fieldMeta2: FieldMetadata = {
+    id: "field2",
+    number: { type: "NUMBER" },
+    type: "CATEGORICAL",
+    parent: fieldMetaCsq,
+  };
+
+  fieldMetaCsq = {
+    id: "CSQ",
+    number: { type: "NUMBER" },
+    type: "STRING",
+    nested: { items: [fieldMeta1, fieldMeta2], separator: "|" },
+  };
+
+  const person: Person = {
+    familyId: "FAM001",
+    individualId: "Patient",
+    sex: "FEMALE",
+    affectedStatus: "AFFECTED",
+    maternalId: "Mother",
+    paternalId: "Father",
+  };
+
+  const meta: Metadata = { info: { CSQ: fieldMetaCsq } } as unknown as Metadata;
+
+  test("create query", () => {
+    const searchText = "my search text";
+    const filterQueries: FilterQueries = {
+      "CSQ/field1": { selector: ["n", "CSQ", "*", 0], operator: "==", args: [0] },
+      "CSQ/field2": { selector: ["n", "CSQ", "*", 1], operator: "==", args: [1, 2] },
+    };
+    expect(createQuery(searchText, filterQueries, meta)).toStrictEqual({
+      operator: "and",
+      args: [
+        {
+          operator: "or",
+          args: [
+            { selector: ["n", "CSQ", "*", "0"], operator: "any_~=_any", args: ["my search text"] },
+            { selector: ["n", "CSQ", "*", "1"], operator: "any_~=_any", args: ["my search text"] },
+          ],
+        },
+        {
+          operator: "and",
+          args: [
+            { selector: ["n", "CSQ", "*", 0], operator: "==", args: [0] },
+            { selector: ["n", "CSQ", "*", 1], operator: "==", args: [1, 2] },
+          ],
+        },
+      ],
+    });
+  });
+
+  test("create query: undefined search and undefined filters", () => {
+    expect(createQuery(undefined, undefined, meta)).toBe(null);
+  });
+
+  test("create query: undefined search and empty filters", () => {
+    expect(createQuery(undefined, {}, meta)).toBe(null);
+  });
+
+  test("create query: undefined search and empty filters with keys", () => {
+    expect(createQuery(undefined, { filterId: undefined }, meta)).toBe(null);
+  });
+
+  test("create query - search query only", () => {
+    const searchText = "searchString";
+    expect(createQuery(searchText, undefined, meta)).toStrictEqual({
+      args: [
+        {
+          args: ["searchString"],
+          operator: "any_~=_any",
+          selector: ["n", "CSQ", "*", "0"],
+        },
+        {
+          args: ["searchString"],
+          operator: "any_~=_any",
+          selector: ["n", "CSQ", "*", "1"],
+        },
+      ],
+      operator: "or",
+    });
+  });
+
+  test("create query - filter queries only", () => {
+    const filterQueries = {};
+    expect(createQuery(undefined, filterQueries, meta)).toBe(null);
+  });
+
+  test("create query - one filter query", () => {
+    const queryClause: QueryClause = { selector: ["n", "CSQ", "*", 0], operator: "==", args: [0] };
+    const filterQueries: FilterQueries = {
+      "CSQ/field1": queryClause,
+    };
+    expect(createQuery(undefined, filterQueries, meta)).toBe(queryClause);
+  });
+
+  test("infoSelector", () => {
+    expect(infoSelector(fieldMeta1)).toStrictEqual(["n", "CSQ", "field1"]);
+  });
+
+  test("sampleSelector", () => {
+    expect(sampleSelector({ id: 1, data: { person: person, index: 0, proband: false } }, fieldMeta1)).toStrictEqual([
+      "s",
+      0,
+      "CSQ",
+      "field1",
+    ]);
+  });
+
+  test("selectorKey", () => {
+    expect(selectorKey([1, "test", 2, "3"])).toStrictEqual("1/test/2/3");
+  });
+
+  test("infoFieldKey", () => {
+    expect(infoFieldKey(fieldMeta1)).toStrictEqual("n/CSQ/field1");
+  });
+
+  test("sampleFieldKey", () => {
+    expect(sampleFieldKey({ id: 1, data: { person: person, index: 0, proband: false } }, fieldMeta1)).toStrictEqual(
+      "s/0/CSQ/field1"
+    );
+  });
+
+  test("infoSortPath", () => {
+    expect(infoSortPath(fieldMetaCsq)).toStrictEqual(["n", "CSQ"]);
+  });
+});

package/src/__tests__/sortUtils.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, test } from "vitest";
+import { createRecordSort, DIRECTION_ASCENDING } from "../utils/sortUtils";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
+
+describe("sort utilities", () => {
+  const nString0Meta: FieldMetadata = {
+    id: "n_string0",
+    number: {
+      type: "NUMBER",
+      count: 1,
+    },
+    type: "STRING",
+  };
+
+  const nString1Meta: FieldMetadata = {
+    id: "n_string1",
+    number: {
+      type: "NUMBER",
+      count: 1,
+    },
+    type: "STRING",
+  };
+
+  const nString2Meta: FieldMetadata = {
+    id: "n_string2",
+    number: {
+      type: "NUMBER",
+      count: 1,
+    },
+    type: "STRING",
+  };
+
+  const nObject0Meta: FieldMetadata = {
+    id: "n_object0",
+    number: {
+      type: "OTHER",
+    },
+    type: "STRING",
+    nested: {
+      items: [],
+      separator: ",",
+    },
+  };
+
+  nString1Meta.parent = nObject0Meta;
+  nString2Meta.parent = nObject0Meta;
+  nObject0Meta.nested?.items.push(nString1Meta, nString2Meta);
+
+  const metadata: Metadata = {
+    lines: [],
+    info: { n_string0: nString0Meta, n_object0: nObject0Meta },
+    format: {},
+    samples: [],
+  };
+
+  test("create record sort order from params sort order", () => {
+    expect(
+      createRecordSort(metadata, {
+        property: ["n", "n_string0"],
+        compare: "asc",
+      })
+    ).toStrictEqual({ orders: [{ field: nString0Meta, direction: DIRECTION_ASCENDING }] });
+  });
+
+  test("create record sort order from params sort order with nested path", () => {
+    expect(
+      createRecordSort(metadata, {
+        property: ["n", "n_object0", 1],
+        compare: "asc",
+      })
+    ).toStrictEqual({ orders: [{ field: nString2Meta, direction: DIRECTION_ASCENDING }] });
+  });
+
+  test("create record sort order from params sort order with invalid path with unknown item", () => {
+    expect(() =>
+      createRecordSort(metadata, {
+        property: ["n", "n_unknown"],
+        compare: "asc",
+      })
+    ).toThrowError();
+  });
+});

package/src/__tests__/utils.test.ts

@@ -0,0 +1,24 @@
+import { describe, test } from "vitest";
+import { arrayEquals } from "../utils/utils";
+
+describe("utilities", () => {
+  test("array equals", () => {
+    arrayEquals<string>(["a", "b", "c"], ["a", "b", "c"]);
+  });
+
+  test("array equals: empty array", () => {
+    arrayEquals<string>([], []);
+  });
+
+  test("array not equals: order", () => {
+    arrayEquals<string>(["a", "b", "c"], ["c", "b", "a"]);
+  });
+
+  test("array not equals: length left", () => {
+    arrayEquals<string>(["a", "b", "c"], ["a", "b"]);
+  });
+
+  test("array not equals: length right", () => {
+    arrayEquals<string>(["a", "b"], ["a", "b", "c"]);
+  });
+});

package/src/__tests__/viewUtils.test.ts

@@ -0,0 +1,125 @@
+import { expect, test } from "vitest";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { getConsequenceLabel, getRecordSamples, getSpecificConsequence } from "../utils/viewUtils";
+import { Value, ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Sample } from "@molgenis/vip-report-api/src/Api";
+
+const fieldMetaCsq: FieldMetadata = {
+  description: "Consequence",
+  id: "Consequence",
+  number: { type: "PER_ALT" },
+  type: "STRING",
+};
+const fieldMeta1: FieldMetadata = { description: "fake 1", id: "field1", number: { type: "NUMBER" }, type: "STRING" };
+const fieldMeta2: FieldMetadata = { description: "fake 2", id: "field2", number: { type: "NUMBER" }, type: "STRING" };
+
+const value1a: Value = "testValue1a";
+const value2a: Value = "testValue2a";
+const value3a: Value = "testValue3a";
+const value1b: Value = "testValue1b";
+const value2b: Value = "testValue2b";
+const value3b: Value = "testValue3b";
+const valueArraya: ValueArray = [value1a, value2a, value3a];
+const valueArrayb: ValueArray = [value1b, value2b, value3b];
+
+test("Get specific consequence", () => {
+  expect(getSpecificConsequence([valueArraya, valueArrayb], 1)).toBe(valueArrayb);
+});
+
+test("Get specific consequence - out of bounds", () => {
+  expect(getSpecificConsequence([valueArraya, valueArrayb], 9)).toStrictEqual([] as ValueArray);
+});
+
+test("Get specific consequence - -1", () => {
+  expect(() => getSpecificConsequence([valueArraya, valueArrayb], -1)).toThrowError(
+    "Consequences index must be 0 or higher."
+  );
+});
+
+test("Get Consequence Label", () => {
+  expect(getConsequenceLabel([valueArraya, valueArrayb], 1, [fieldMeta1, fieldMetaCsq, fieldMeta2])).toBe(
+    "testValue2b"
+  );
+});
+
+test("Get Record samples", () => {
+  const patient: Sample = {
+    index: 0,
+    person: {
+      familyId: "FAM001",
+      individualId: "Patient",
+      sex: "FEMALE",
+      affectedStatus: "AFFECTED",
+      maternalId: "Mother",
+      paternalId: "Father",
+    },
+    proband: true,
+  };
+  const father: Sample = {
+    index: 1,
+    person: {
+      familyId: "FAM001",
+      individualId: "Father",
+      sex: "MALE",
+      affectedStatus: "UNAFFECTED",
+      maternalId: "",
+      paternalId: "",
+    },
+    proband: false,
+  };
+  const mother: Sample = {
+    index: 2,
+    person: {
+      familyId: "FAM001",
+      individualId: "Mother",
+      sex: "FEMALE",
+      affectedStatus: "UNAFFECTED",
+      maternalId: "",
+      paternalId: "",
+    },
+    proband: false,
+  };
+  const samples = [patient, mother, father];
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const record: Record = { a: [], c: "", f: [], i: [], n: undefined, p: 0, q: undefined, r: "", s: samples };
+
+  const result = getRecordSamples(record, patient, samples);
+  expect(result).toContainEqual({
+    index: 0,
+    person: {
+      affectedStatus: "AFFECTED",
+      familyId: "FAM001",
+      individualId: "Patient",
+      maternalId: "Mother",
+      paternalId: "Father",
+      sex: "FEMALE",
+    },
+    proband: true,
+  });
+  expect(result).toContainEqual({
+    index: 2,
+    person: {
+      affectedStatus: "UNAFFECTED",
+      familyId: "FAM001",
+      individualId: "Mother",
+      maternalId: "",
+      paternalId: "",
+      sex: "FEMALE",
+    },
+    proband: false,
+  });
+  expect(result).toContainEqual({
+    index: 1,
+    person: {
+      affectedStatus: "UNAFFECTED",
+      familyId: "FAM001",
+      individualId: "Father",
+      maternalId: "",
+      paternalId: "",
+      sex: "MALE",
+    },
+    proband: false,
+  });
+});

package/src/assets/sass/main.scss

@@ -0,0 +1,113 @@
+@charset "utf-8";
+$gap: 8px;
+
+$notification-padding: 0.75rem 0.75rem 0.75rem 0.75rem;
+$notification-padding-ltr: 0.75rem 0.75rem 0.75rem 0.75rem;
+$notification-padding-rtl: 0.75rem 0.75rem 0.75rem 0.75rem;
+
+@import "bulma/sass/utilities/initial-variables";
+@import "bulma/sass/utilities/functions";
+@import "bulma/sass/utilities/derived-variables";
+@import "bulma/sass/utilities/mixins";
+@import "bulma/sass/utilities/controls";
+@import "bulma/sass/utilities/extends";
+
+@import "bulma/sass/base/minireset";
+@import "bulma/sass/base/generic";
+@import "bulma/sass/base/animations";
+
+@import "bulma/sass/elements/button";
+@import "bulma/sass/elements/container";
+@import "bulma/sass/elements/icon";
+@import "bulma/sass/elements/notification";
+@import "bulma/sass/elements/table";
+@import "bulma/sass/elements/title";
+
+@import "bulma/sass/form/shared";
+@import "bulma/sass/form/input-textarea";
+@import "bulma/sass/form/checkbox-radio";
+@import "bulma/sass/form/select";
+@import "bulma/sass/form/tools";
+
+@import "bulma/sass/grid/columns";
+
+@import "bulma/sass/components/breadcrumb";
+@import "bulma/sass/components/card";
+@import "bulma/sass/components/navbar";
+@import "bulma/sass/components/pagination";
+
+@import "bulma/sass/helpers/color";
+@import "bulma/sass/helpers/flexbox";
+@import "bulma/sass/helpers/float";
+@import "bulma/sass/helpers/other";
+@import "bulma/sass/helpers/overflow";
+@import "bulma/sass/helpers/position";
+@import "bulma/sass/helpers/spacing";
+@import "bulma/sass/helpers/typography";
+@import "bulma/sass/helpers/visibility";
+
+html {
+  font-size: 13px;
+}
+
+textarea {
+  font-family: monospace;
+}
+
+.base {
+  width: 0.9rem;
+  display: inline-block;
+  text-align: center;
+}
+
+.base-a {
+  background-color: #90ee90;
+}
+
+.base-c {
+  background-color: #b0c4de;
+}
+
+.base-g {
+  background-color: #ffec8b;
+}
+
+.base-t {
+  background-color: #eea2ad;
+}
+
+.base-m,
+.base-n {
+  background-color: #e3e3e3;
+}
+
+.phase {
+  width: 0.45rem;
+  display: inline-block;
+  text-align: center;
+}
+
+td {
+  white-space: nowrap;
+}
+
+.pagination-ellipsis {
+  min-width: $pagination-min-width;
+}
+
+.container {
+  margin-top: 8px;
+}
+
+.breadcrumb .icon:first-child {
+  margin-right: 0;
+}
+
+.columns.is-gapless:not(:last-child) {
+  margin-bottom: 0.6rem;
+}
+
+table.is-borderless td,
+.table.is-borderless th {
+  border: 0;
+}

package/src/components/Abbr.tsx

@@ -0,0 +1,20 @@
+import { Component } from "solid-js";
+
+const onClick = (event: Event) => {
+  const text: string = event.target !== null ? (event.target as HTMLElement).title : "";
+  void navigator.clipboard.writeText(text);
+};
+
+export const Abbr: Component<{
+  title: string;
+  value: string | number;
+  classList?: {
+    [k: string]: boolean | undefined;
+  };
+}> = (props) => {
+  return (
+    <abbr title={props.title} onClick={onClick} classList={props.classList ? props.classList : {}}>
+      {props.value}
+    </abbr>
+  );
+};

package/src/components/Anchor.tsx

@@ -0,0 +1,12 @@
+import { Component, JSXElement } from "solid-js";
+
+export const Anchor: Component<{
+  href: string;
+  value: string | number | JSXElement;
+}> = (props) => {
+  return (
+    <a href={props.href} target="_blank" rel="noopener noreferrer nofollow">
+      {props.value}
+    </a>
+  );
+};

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,33 @@
+import { Link } from "solid-app-router";
+import { Component, For } from "solid-js";
+
+export type BreadCrumbItem = { href?: string; text: string };
+
+export const Breadcrumb: Component<{
+  items: BreadCrumbItem[];
+}> = (props) => {
+  return (
+    <div class="columns is-gapless">
+      <div class="column">
+        <nav class="breadcrumb">
+          <ul>
+            <li classList={{ "is-active": props.items.length === 0 }}>
+              <Link href="/">
+                <span class="icon">
+                  <i class="fas fa-home" />
+                </span>
+              </Link>
+            </li>
+            <For each={props.items}>
+              {(link, i) => (
+                <li classList={{ "is-active": i() === props.items.length - 1 }}>
+                  <Link href={link.href || "#"}>{link.text}</Link>
+                </li>
+              )}
+            </For>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  );
+};

package/src/components/Checkbox.tsx

@@ -0,0 +1,32 @@
+import { Component, Show } from "solid-js";
+import { Abbr } from "./Abbr";
+
+export type CheckboxEvent = {
+  value: string;
+  checked: boolean;
+};
+
+export const Checkbox: Component<{
+  value?: string;
+  label: string;
+  desc?: string;
+  checked?: boolean;
+  onChange: (event: CheckboxEvent) => void;
+}> = (props) => {
+  const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    props.onChange({
+      value: target.value,
+      checked: target.checked,
+    });
+  };
+
+  return (
+    <label class="checkbox">
+      <input class="mr-1" type="checkbox" value={props.value} checked={props.checked} onChange={onChange} />
+      <Show when={props.desc !== undefined} fallback={<span>{props.label}</span>}>
+        <Abbr title={props.desc as string} value={props.label} />
+      </Show>
+    </label>
+  );
+};

package/src/components/ConsequenceTable.tsx

@@ -0,0 +1,38 @@
+import { Component, For, Show } from "solid-js";
+import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Info } from "./record/Info";
+import { FieldHeader } from "./FieldHeader";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+
+export const ConsequenceTable: Component<{ csqMetadata: FieldMetadata[]; csqValues: ValueArray; record: Record }> = (
+  props
+) => {
+  function getValues(index: number): ValueArray {
+    return props.csqValues[index] !== null ? (props.csqValues[index] as ValueArray) : [];
+  }
+
+  return (
+    <div style={{ display: "grid" }}>
+      {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
+      <div class="table-container">
+        <table class="table is-borderless is-narrow">
+          <tbody>
+            <For each={props.csqMetadata}>
+              {(field: FieldMetadata, index) => (
+                <Show when={!(getValues(index()).length === 0)}>
+                  <tr>
+                    <FieldHeader field={field} />
+                    <td>
+                      <Info info={props.csqValues[index()]} infoMetadata={field} variant={props.record} />
+                    </td>
+                  </tr>
+                </Show>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

package/src/components/DatasetDropdown.tsx

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