@molgenis/vip-report-template 6.1.1 → 7.0.0

package/src/__tests__/viewUtils.test.ts

@@ -1,125 +0,0 @@
-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/components/ConsequenceTable.tsx

@@ -1,45 +0,0 @@
-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";
-import { Item } from "@molgenis/vip-report-api/src/Api";
-
-export const ConsequenceTable: Component<{
-  csqMetadata: FieldMetadata[];
-  csqValues: ValueArray;
-  record: Item<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={{ value: props.csqValues[index()], valueParent: props.csqValues, record: props.record }}
-                        infoMeta={field}
-                        context={{}}
-                      />
-                    </td>
-                  </tr>
-                </Show>
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};

package/src/components/Error.tsx

@@ -1,9 +0,0 @@
-import { Component } from "solid-js";
-
-export const Error: Component<{
-  error: unknown;
-}> = (props) => {
-  const error = () => props.error;
-  console.error(error());
-  return <div class="notification is-danger is-light">An unexpected error occurred</div>;
-};

package/src/components/FieldHeader.tsx

@@ -1,26 +0,0 @@
-import { Component, createMemo, Show } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { abbreviateHeader } from "../utils/field";
-
-export const FieldHeader: Component<{
-  field: FieldMetadata;
-  vertical?: boolean;
-  rowspan?: number;
-  colspan?: number;
-}> = (props) => {
-  const label = createMemo(() => abbreviateHeader(props.field.label || props.field.id));
-  return (
-    <th
-      style={props.vertical ? { "writing-mode": "vertical-rl" } : undefined}
-      rowspan={props.rowspan}
-      colspan={props.colspan}
-    >
-      <Show
-        when={props.field.description && props.field.description !== label()}
-        fallback={<abbr title={props.field.label || props.field.id}>{label()}</abbr>}
-      >
-        <abbr title={props.field.description}>{label()}</abbr>
-      </Show>
-    </th>
-  );
-};

package/src/components/InfoCollapsablePane.tsx

@@ -1,90 +0,0 @@
-import { Component, createMemo, createSignal, For, Signal } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
-import { HtsFileMetadata, Item } from "@molgenis/vip-report-api/src/Api";
-import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
-import { Info } from "./record/Info";
-import { FieldValue } from "./record/field/Field";
-import { isCsqInfo } from "../utils/csqUtils";
-import { useLocation } from "@solidjs/router";
-
-export const InfoCollapsablePane: Component<{
-  fields: FieldMetadata[];
-  record: Item<Record>;
-  htsFileMeta: HtsFileMetadata;
-  isPossibleCompound?: boolean;
-}> = (props) => {
-  const [collapsed, setCollapsed]: Signal<boolean> = createSignal(false);
-
-  function toggleCollapse() {
-    setCollapsed(!collapsed());
-  }
-
-  const values = createMemo((): FieldValue[][] =>
-    props.fields.map((field) => {
-      if (field.parent) {
-        const values = (props.record.data.n[field.parent.id] || []) as ValueArray;
-        return values.map((nestedValues) => {
-          const value =
-            field.parent && field.parent.nested
-              ? (nestedValues as ValueArray)[
-                  field.parent.nested.items.findIndex((nestedField) => nestedField.id === field.id)
-                ]
-              : null;
-          return {
-            record: props.record,
-            value: value,
-            valueParent: nestedValues,
-          };
-        });
-      }
-      throw new Error(`Nested field '${field.id}' needs to have a parent field.`);
-    }),
-  );
-  return (
-    <>
-      <td>
-        {values().length > 0 && values()[0].length > 1 && (
-          <span class="icon is-left is-clickable" onClick={toggleCollapse}>
-            {collapsed() ? <i class="fas fa-angle-up" /> : <i class="fas fa-angle-down" />}
-          </span>
-        )}
-      </td>
-      <For each={props.fields}>
-        {(field, i) => (
-          <td>
-            <For each={values()[i()]}>
-              {(value, j) => (
-                <>
-                  {j() != 0 && collapsed() && <br />}
-                  {(j() == 0 || collapsed()) &&
-                    (isCsqInfo(field, "VIPC") ? (
-                      <a href={`${useLocation().pathname}/${props.record.id}/consequences/${j()}`}>
-                        <Info
-                          info={value}
-                          infoMeta={field}
-                          context={{
-                            genomeAssembly: props.htsFileMeta.genomeAssembly,
-                            isPossibleCompound: props.isPossibleCompound,
-                          }}
-                        />
-                      </a>
-                    ) : (
-                      <Info
-                        info={value}
-                        infoMeta={field}
-                        context={{
-                          genomeAssembly: props.htsFileMeta.genomeAssembly,
-                          isPossibleCompound: props.isPossibleCompound,
-                        }}
-                      />
-                    ))}
-                </>
-              )}
-            </For>
-          </td>
-        )}
-      </For>
-    </>
-  );
-};

package/src/components/VariantInfoNestedTable.tsx

@@ -1,127 +0,0 @@
-import { Component, For } from "solid-js";
-import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
-import { Info } from "./record/Info";
-import { FieldMetadata, InfoMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { FieldHeader } from "./FieldHeader";
-import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
-import { Item } from "@molgenis/vip-report-api/src/Api";
-import { isCsqInfo } from "../utils/csqUtils";
-import { useLocation } from "@solidjs/router";
-
-function isNonEmptyNestedInfoItem(nestedInfoField: FieldMetadata, index: number, value: Value[] | Value[][]): boolean {
-  const infoField = nestedInfoField.nested?.items[index];
-
-  if (infoField === undefined) {
-    throw new Error(`Missing nested metadata for '${nestedInfoField.id}' index [${index}]`);
-  }
-
-  let empty;
-  if (nestedInfoField.number.count === 0 || nestedInfoField.number.count === 1) {
-    if (value === null) {
-      empty = true;
-    }
-  } else {
-    empty = true;
-    for (const subValue of value as Value[][]) {
-      if (infoField.number.count === 0 || infoField.number.count === 1) {
-        if (subValue[index] !== null) {
-          empty = false;
-          break;
-        }
-      } else {
-        if ((subValue as Value[][])[index].length > 0) {
-          empty = false;
-          break;
-        }
-      }
-    }
-  }
-  return !empty;
-}
-
-export const VariantInfoNestedTable: Component<{
-  infoValue: Value[] | Value[][];
-  infoField: InfoMetadata;
-  record: Item<Record>;
-  sample: { id: number; label: string } | null;
-}> = (props) => {
-  return (
-    <div style={{ display: "grid" }}>
-      {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
-      <div class="table-container">
-        <table class="table is-narrow">
-          <thead>
-            <For each={props.infoField.nested !== undefined ? props.infoField.nested.items : []}>
-              {(infoFieldItem, i) => (
-                <>
-                  {isNonEmptyNestedInfoItem(props.infoField, i(), props.infoValue) && (
-                    <FieldHeader field={infoFieldItem} vertical={true} />
-                  )}
-                </>
-              )}
-            </For>
-          </thead>
-          <tbody>
-            {props.infoField.number.count === 1 ? (
-              <tr>
-                <For each={props.infoValue}>
-                  {(value) => (
-                    <>
-                      {isNonEmptyNestedInfoItem(props.infoField, -1, props.infoValue) && (
-                        <td>
-                          <Info info={{ value: value, record: props.record }} infoMeta={props.infoField} context={{}} />
-                        </td>
-                      )}
-                    </>
-                  )}
-                </For>
-              </tr>
-            ) : (
-              <For each={props.infoValue}>
-                {(value, j) => (
-                  <>
-                    <tr>
-                      <For each={props.infoField.nested !== undefined ? props.infoField.nested.items : []}>
-                        {(infoFieldItem, i) => (
-                          <>
-                            {isNonEmptyNestedInfoItem(props.infoField, i(), props.infoValue) && (
-                              <td>
-                                {isCsqInfo(infoFieldItem, "Consequence") ? (
-                                  <a href={`${useLocation().pathname}/consequences/${j()}`}>
-                                    <Info
-                                      info={{
-                                        value: Array.isArray(value) ? value[i()] : null,
-                                        valueParent: value,
-                                        record: props.record,
-                                      }}
-                                      infoMeta={infoFieldItem}
-                                      context={{}}
-                                    />
-                                  </a>
-                                ) : (
-                                  <Info
-                                    info={{
-                                      value: Array.isArray(value) ? value[i()] : null,
-                                      valueParent: value,
-                                      record: props.record,
-                                    }}
-                                    infoMeta={infoFieldItem}
-                                    context={{}}
-                                  />
-                                )}
-                              </td>
-                            )}
-                          </>
-                        )}
-                      </For>
-                    </tr>
-                  </>
-                )}
-              </For>
-            )}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};

package/src/components/VariantSampleTable.tsx

@@ -1,58 +0,0 @@
-import { Component, createMemo, For } from "solid-js";
-import { Record, RecordSample } from "@molgenis/vip-report-vcf/src/Vcf";
-import { FieldMetadataContainer } from "@molgenis/vip-report-vcf/src/VcfParser";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Format } from "./record/Format";
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
-import { FieldHeader } from "./FieldHeader";
-
-export const VariantSampleTable: Component<{
-  formatFields: FieldMetadataContainer;
-  samples: Sample[];
-  sampleValues: RecordSample[];
-  record: Item<Record>;
-}> = (props) => {
-  const sampleFields = createMemo((): FieldMetadata[] =>
-    Object.keys(props.sampleValues[0]).map((fieldId) => props.formatFields[fieldId]),
-  );
-  return (
-    <div style={{ display: "grid" }}>
-      {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
-      <div class="table-container">
-        <table class="table is-narrow">
-          <thead>
-            <tr>
-              <th />
-              <For each={sampleFields()}>{(formatField) => <FieldHeader field={formatField} />}</For>
-            </tr>
-          </thead>
-          <tbody>
-            <For each={props.sampleValues}>
-              {(sampleValue, i) => (
-                <tr>
-                  <th>{props.samples[i()].person.individualId}</th>
-                  <For each={sampleFields()}>
-                    {(formatField) => (
-                      <td>
-                        <Format
-                          format={sampleValue[formatField.id]}
-                          formatMetadata={formatField}
-                          record={props.record}
-                          isAbbreviate={false}
-                          allelicBalance={
-                            props.record.data.s[props.samples[i()].index]["VIAB"] as number | undefined | null
-                          }
-                          readDepth={props.record.data.s[props.samples[i()].index]["DP"] as number | undefined | null}
-                        />
-                      </td>
-                    )}
-                  </For>
-                </tr>
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};

package/src/components/VariantsSampleTable.tsx

@@ -1,183 +0,0 @@
-import { Genotype, Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
-import { Ref } from "./record/Ref";
-import { Chrom } from "./record/Chrom";
-import { Pos } from "./record/Pos";
-import { HtsFileMetadata, Item, Sample } from "@molgenis/vip-report-api/src/Api";
-import { GenotypeField } from "./record/format/GenotypeField";
-import { InfoCollapsablePane } from "./InfoCollapsablePane";
-import { Component, createMemo, createSignal, For, onMount, Show } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { FieldHeader } from "./FieldHeader";
-import { Abbr } from "./Abbr";
-import { abbreviateHeader } from "../utils/field";
-import {
-  getSampleAffectedStatusLabel,
-  getSampleFamilyMembersWithoutParents,
-  getSampleFather,
-  getSampleLabel,
-  getSampleMother,
-  getSampleSexLabel,
-} from "../utils/sample";
-
-export const VariantsSampleTable: Component<{
-  item: Item<Sample>;
-  pedigreeSamples: Item<Sample>[];
-  records: Item<Record>[];
-  recordsMetadata: Metadata;
-  nestedFields: FieldMetadata[];
-  htsFileMeta: HtsFileMetadata;
-}> = (props) => {
-  const samples = createMemo(() => [props.item.data, ...props.pedigreeSamples.map((item) => item.data)]);
-
-  const [proband, setProband] = createSignal<Sample | undefined>();
-  const [father, setFather] = createSignal<Sample | undefined>();
-  const [mother, setMother] = createSignal<Sample | undefined>();
-  const [otherFamilyMembers, setOtherFamilyMembers] = createSignal<Sample[]>([]);
-
-  onMount(() => {
-    setProband(props.item.data);
-    setMother(getSampleMother(proband() as Sample, samples()));
-    setFather(getSampleFather(proband() as Sample, samples()));
-    setOtherFamilyMembers(getSampleFamilyMembersWithoutParents(proband() as Sample, samples()));
-  });
-
-  function getSampleHeaderDescription(sample: Sample): string {
-    return `${getSampleLabel(sample)}: ${getSampleSexLabel(sample)}, ${getSampleAffectedStatusLabel(sample)}`;
-  }
-
-  return (
-    <div style={{ display: "grid" }}>
-      {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
-      <div class="table-container">
-        <table class="table is-narrow">
-          <thead>
-            <tr>
-              <th>Position</th>
-              <th>Reference</th>
-              <Show when={proband()} keyed>
-                {(proband) => (
-                  <th>
-                    <Abbr title={getSampleHeaderDescription(proband)} value="Proband" />
-                  </th>
-                )}
-              </Show>
-              <Show when={mother()} keyed>
-                {(mother) => (
-                  <th>
-                    <Abbr title={getSampleHeaderDescription(mother)} value="Mother" />
-                  </th>
-                )}
-              </Show>
-              <Show when={father()} keyed>
-                {(father) => (
-                  <th>
-                    <Abbr title={getSampleHeaderDescription(father)} value="Father" />
-                  </th>
-                )}
-              </Show>
-              <For each={otherFamilyMembers()}>
-                {(sample: Sample) => (
-                  <th>
-                    <Abbr title={getSampleHeaderDescription(sample)} value={abbreviateHeader(getSampleLabel(sample))} />
-                  </th>
-                )}
-              </For>
-              {/* column containing collapse/expand icon */}
-              <th />
-              <For each={props.nestedFields}>{(field) => <FieldHeader field={field} />}</For>
-            </tr>
-          </thead>
-          <tbody>
-            <For each={props.records}>
-              {(record) => (
-                <tr>
-                  <td>
-                    <a href={`/samples/${props.item.id}/variants/${record.id}`}>
-                      <Chrom value={record.data.c} />
-                      <span>:</span>
-                      <Pos value={record.data.p} />
-                    </a>
-                  </td>
-                  <td>
-                    <Ref value={record.data.r} isAbbreviate={true} />
-                  </td>
-                  <Show when={proband()} keyed>
-                    {(proband) => (
-                      <td>
-                        <GenotypeField
-                          genotype={record.data.s[proband.index]["GT"] as Genotype}
-                          refAllele={record.data.r}
-                          altAlleles={record.data.a}
-                          isAbbreviate={true}
-                          allelicBalance={record.data.s[proband.index]["VIAB"] as number | undefined | null}
-                          readDepth={record.data.s[proband.index]["DP"] as number | undefined}
-                        />
-                      </td>
-                    )}
-                  </Show>
-                  <Show when={mother()} keyed>
-                    {(mother) => (
-                      <td>
-                        <GenotypeField
-                          genotype={record.data.s[mother.index]["GT"] as Genotype}
-                          refAllele={record.data.r}
-                          altAlleles={record.data.a}
-                          isAbbreviate={true}
-                          allelicBalance={record.data.s[mother.index]["VIAB"] as number | undefined | null}
-                          readDepth={record.data.s[mother.index]["DP"] as number | undefined}
-                        />
-                      </td>
-                    )}
-                  </Show>
-                  <Show when={father()} keyed>
-                    {(father) => (
-                      <td>
-                        <GenotypeField
-                          genotype={record.data.s[father.index]["GT"] as Genotype}
-                          refAllele={record.data.r}
-                          altAlleles={record.data.a}
-                          isAbbreviate={true}
-                          allelicBalance={record.data.s[father.index]["VIAB"] as number | undefined | null}
-                          readDepth={record.data.s[father.index]["DP"] as number | undefined}
-                        />
-                      </td>
-                    )}
-                  </Show>
-                  <For each={otherFamilyMembers()}>
-                    {(sample: Sample) => (
-                      <>
-                        <td>
-                          <GenotypeField
-                            genotype={record.data.s[sample.index]["GT"] as Genotype}
-                            refAllele={record.data.r}
-                            altAlleles={record.data.a}
-                            isAbbreviate={true}
-                            allelicBalance={record.data.s[sample.index]["VIAB"] as number | undefined | null}
-                            readDepth={record.data.s[sample.index]["DP"] as number | undefined}
-                          />
-                        </td>
-                      </>
-                    )}
-                  </For>
-                  <Show when={proband()} keyed>
-                    {(proband) => (
-                      <InfoCollapsablePane
-                        fields={props.nestedFields}
-                        record={record}
-                        htsFileMeta={props.htsFileMeta}
-                        isPossibleCompound={
-                          record.data.s[proband.index]["VIC"] !== null &&
-                          record.data.s[proband.index]["VIC"] !== undefined
-                        }
-                      />
-                    )}
-                  </Show>
-                </tr>
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};