@molgenis/vip-report-template 6.1.1 → 7.0.0

package/src/components/VariantsTable.tsx

@@ -1,124 +0,0 @@
-import { Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
-import { Component, createMemo, For } from "solid-js";
-import { Ref } from "./record/Ref";
-import { Chrom } from "./record/Chrom";
-import { Pos } from "./record/Pos";
-import { Id } from "./record/Id";
-import { Alt } from "./record/Alt";
-import { Qual } from "./record/Qual";
-import { Filter } from "./record/Filter";
-import { Info } from "./record/Info";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { HtsFileMetadata, Item } from "@molgenis/vip-report-api/src/Api";
-import { FieldHeader } from "./FieldHeader";
-import { InfoCollapsablePane } from "./InfoCollapsablePane";
-
-const computeRowspan = (recordsMetadata: Metadata) =>
-  Object.values(recordsMetadata.info).find((field) => field.nested) !== undefined ? 2 : 1;
-// '+1' for the column with the collapse button
-const computeColspan = (field: FieldMetadata) => (field.nested ? field.nested.items.length + 1 : undefined);
-
-export const VariantsTable: Component<{
-  records: Item<Record>[];
-  recordsMetadata: Metadata;
-  htsFileMeta: HtsFileMetadata;
-}> = (props) => {
-  const infoFields = () => Object.values(props.recordsMetadata.info);
-  const infoFieldsNested = () => infoFields().filter((infoField) => infoField.nested);
-
-  const rowspan = createMemo(() => computeRowspan(props.recordsMetadata));
-
-  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 rowspan={rowspan()}>CHROM</th>
-              <th rowspan={rowspan()}>POS</th>
-              <th rowspan={rowspan()}>ID</th>
-              <th rowspan={rowspan()}>REF</th>
-              <th rowspan={rowspan()}>ALT</th>
-              <th rowspan={rowspan()}>QUAL</th>
-              <th rowspan={rowspan()}>FILTER</th>
-              <For each={infoFields()}>
-                {(infoField) => (
-                  <FieldHeader
-                    field={infoField}
-                    rowspan={infoField.nested ? undefined : rowspan()}
-                    colspan={computeColspan(infoField)}
-                  />
-                )}
-              </For>
-            </tr>
-            {rowspan() && rowspan() > 1 && (
-              <tr>
-                <For each={infoFieldsNested()}>
-                  {(infoField) => (
-                    <>
-                      {infoField.number.count !== 1 && <th />}
-                      <For each={infoField.nested?.items}>
-                        {(nestedInfoField) => <FieldHeader field={nestedInfoField} />}
-                      </For>
-                    </>
-                  )}
-                </For>
-              </tr>
-            )}
-          </thead>
-          <tbody>
-            <For each={props.records}>
-              {(record) => (
-                <tr>
-                  <td>
-                    <Chrom value={record.data.c} />
-                  </td>
-                  <td>
-                    <a href={`/variants/${record.id}`}>
-                      <Pos value={record.data.p} />
-                    </a>
-                  </td>
-                  <td>
-                    <Id value={record.data.i} />
-                  </td>
-                  <td>
-                    <Ref value={record.data.r} isAbbreviate={true} />
-                  </td>
-                  <td>
-                    <Alt value={record.data.a} isAbbreviate={true} />
-                  </td>
-                  <td>
-                    <Qual value={record.data.q} />
-                  </td>
-                  <td>
-                    <Filter value={record.data.f} />
-                  </td>
-                  <For each={infoFields()}>
-                    {(infoField) =>
-                      infoField.nested ? (
-                        <InfoCollapsablePane
-                          fields={infoField.nested.items}
-                          record={record}
-                          htsFileMeta={props.htsFileMeta}
-                        />
-                      ) : (
-                        <td>
-                          <Info
-                            info={{ value: record.data.n[infoField.id], record: record }}
-                            infoMeta={infoField}
-                            context={props.htsFileMeta}
-                          />
-                        </td>
-                      )
-                    }
-                  </For>
-                </tr>
-              )}
-            </For>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-};

package/src/components/filter/FilterAllelicBalance.tsx

@@ -1,81 +0,0 @@
-import { Component } from "solid-js";
-import { ComposedQuery, Item, Query, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { FilterChangeEvent, FilterClearEvent } from "./Filters";
-import { selector, selectorKey } from "../../utils/query";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-
-export function getAllelicBalanceQuery(sampleIndex: number): ComposedQuery {
-  const hetQuery: ComposedQuery = {
-    operator: "and",
-    args: [
-      { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "het" },
-      {
-        operator: "and",
-        args: [
-          { selector: ["s", sampleIndex, "VIAB"], operator: ">=", args: 0.2 },
-          { selector: ["s", sampleIndex, "VIAB"], operator: "<=", args: 0.8 },
-        ],
-      },
-    ],
-  };
-  const homQuery: ComposedQuery = {
-    operator: "and",
-    args: [
-      {
-        operator: "or",
-        args: [
-          { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "hom_a" },
-          { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "hom_r" },
-        ],
-      },
-      {
-        operator: "or",
-        args: [
-          { selector: ["s", sampleIndex, "VIAB"], operator: "<", args: 0.02 },
-          { selector: ["s", sampleIndex, "VIAB"], operator: ">", args: 0.98 },
-        ],
-      },
-    ],
-  };
-  const otherGtQuery: ComposedQuery = {
-    operator: "or",
-    args: [
-      { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "miss" },
-      { selector: ["s", sampleIndex, "GT", "t"], operator: "==", args: "part" },
-      { selector: ["s", sampleIndex, "VIAB"], operator: "==", args: null },
-      { selector: ["s", sampleIndex, "VIAB"], operator: "==", args: undefined },
-    ],
-  };
-  const combinedQuery: ComposedQuery = { operator: "or", args: [hetQuery, homQuery, otherGtQuery] };
-
-  return combinedQuery;
-}
-
-export const FilterAllelicBalance: Component<{
-  field: FieldMetadata;
-  sample?: Item<Sample>;
-  query?: Query;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
-  const onFilterChange = (event: CheckboxEvent) => {
-    const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
-    if (event.checked) {
-      props.onChange({
-        query: getAllelicBalanceQuery((props.sample?.data as Sample).index),
-        key: selectorKey(fieldSelector),
-      });
-    } else props.onClear({ key: selectorKey(fieldSelector) });
-  };
-  return (
-    <div class="control">
-      <Checkbox
-        desc="Filter variants with allelic imbalance; For hetrozygote calls: AB < 0.2 or AB > 0.8 and for homozygote calls: AB > 0.02 are considered allelic imbalance"
-        label="No allelic imbalance"
-        checked={props.query && props.query.args !== undefined}
-        onChange={onFilterChange}
-      />
-    </div>
-  );
-};

package/src/components/filter/FilterCategorical.tsx

@@ -1,81 +0,0 @@
-import { Component, For } from "solid-js";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { FilterProps } from "./Filter";
-import { selector, selectorKey } from "../../utils/query";
-
-export type CheckboxGroup = {
-  [key: string]: boolean;
-};
-
-export type CategoryLabels = {
-  [key: string]: string;
-};
-
-export const FilterCategorical: Component<
-  FilterProps & {
-    labels?: CategoryLabels;
-  }
-> = (props) => {
-  const group: CheckboxGroup = {};
-  const label = () => (props.field.label !== undefined ? props.field.label : props.field.id);
-  if (props.query !== undefined) {
-    (props.query?.args as string[]).forEach((key) => {
-      group[key] = true;
-    });
-  }
-
-  const nullValue = "__null";
-
-  // enable null category for any_has_any case if someone asks for it (requires query to be composed)
-  const includeNullCategory = () => !props.field.required && props.field.number.count === 1;
-
-  const onChange = (event: CheckboxEvent) => {
-    group[event.value !== undefined ? event.value : nullValue] = event.checked;
-    const values = Object.keys(group)
-      .filter((key) => group[key])
-      .map((key) => (key !== nullValue ? key : null));
-    if (values.length > 0) {
-      props.onChange({
-        key: selectorKey(selector(props.field)),
-        query: {
-          selector: selector(props.field),
-          operator: props.field.number.count === 1 ? "has_any" : "any_has_any",
-          args: values,
-        },
-      });
-    } else {
-      props.onClear({ key: selectorKey(selector(props.field)) });
-    }
-  };
-
-  return (
-    <>
-      <p class="has-text-weight-semibold">
-        {props.field.description ? <abbr title={props.field.description}>{label()}</abbr> : <span>{label()}</span>}
-      </p>
-
-      <div class="field">
-        <For each={props.field.categories}>
-          {(category) => (
-            <div class="control">
-              <Checkbox
-                value={category}
-                label={props.labels ? props.labels[category] : category}
-                checked={props.query && (props.query.args as (string | null)[]).includes(category)}
-                onChange={onChange}
-              />
-            </div>
-          )}
-        </For>
-        {includeNullCategory() && (
-          <Checkbox
-            value={nullValue}
-            label="No value"
-            checked={props.query && (props.query.args as (string | null)[]).includes(null)}
-            onChange={onChange}
-          />
-        )}
-      </div>
-    </>
-  );
-};

package/src/components/filter/FilterClinVar.tsx

@@ -1,21 +0,0 @@
-import { Component } from "solid-js";
-import { FilterProps } from "./Filter";
-import { FilterCategorical } from "./FilterCategorical";
-
-export const FilterClinVar: Component<FilterProps> = (props) => {
-  return (
-    <FilterCategorical
-      field={props.field}
-      labels={{
-        Benign: "B",
-        Likely_benign: "LB",
-        Uncertain_significance: "VUS",
-        Likely_pathogenic: "LP",
-        Pathogenic: "P",
-        Conflicting_interpretations_of_pathogenicity: "Conflict",
-      }}
-      onChange={props.onChange}
-      onClear={props.onClear}
-    />
-  );
-};

package/src/components/filter/FilterGene.tsx

@@ -1,34 +0,0 @@
-import { Component } from "solid-js";
-import { FilterProps } from "./Filter";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { selector, selectorKey } from "../../utils/query";
-
-export const FilterGene: Component<FilterProps> = (props) => {
-  const onFilterChange = (event: CheckboxEvent) => {
-    const fieldSelector = selector(props.field);
-    if (event.checked) {
-      props.onChange({
-        key: selectorKey(fieldSelector),
-        query: {
-          selector: fieldSelector,
-          operator: "any_has_any",
-          args: ["1"],
-        },
-      });
-    } else props.onClear({ key: selectorKey(fieldSelector) });
-  };
-
-  return (
-    <>
-      <p class="has-text-weight-semibold">{<span>Various</span>}</p>
-      <div class="field">
-        <Checkbox
-          desc="Gene is associated with incomplete penetrance"
-          label="Inc. Penetrance"
-          checked={props.query && props.query.args !== undefined}
-          onChange={onFilterChange}
-        />
-      </div>
-    </>
-  );
-};

package/src/components/filter/FilterHpo.tsx

@@ -1,161 +0,0 @@
-import { Component, For, Show } from "solid-js";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { FilterProps } from "./Filter";
-import { infoSelector, selector, selectorKey } from "../../utils/query";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Query, QueryClause } from "@molgenis/vip-report-api/src/Api";
-
-export type CheckboxGroup = {
-  [key: string]: boolean;
-};
-
-export type CategoryLabels = {
-  [key: string]: string;
-};
-
-export const FilterHpo: Component<
-  FilterProps & {
-    labels?: CategoryLabels;
-  }
-> = (props) => {
-  const group: CheckboxGroup = {};
-  const hpoSelector = selector(props.field);
-  const csqMeta = props.field.parent;
-  const label = () => (props.field.label !== undefined ? props.field.label : props.field.id);
-  let gadoHcChecked = false;
-  let gadoLcChecked = false;
-  let hpoValues: (string | null)[] = [];
-
-  let gadoMeta: FieldMetadata | null = null;
-  csqMeta?.nested?.items.forEach((meta) => {
-    if (meta.id === "GADO_PD") {
-      gadoMeta = meta;
-    }
-  });
-
-  if (props.query !== undefined) {
-    (props.query.args as Query[]).forEach((childQuery) => {
-      if (selectorKey((childQuery as QueryClause).selector) === selectorKey(infoSelector(props.field))) {
-        (childQuery.args as string[]).forEach((key) => {
-          group[key] = true;
-          hpoValues.push(key);
-        });
-      } else if (
-        gadoMeta &&
-        selectorKey((childQuery as QueryClause).selector) === selectorKey(infoSelector(gadoMeta))
-      ) {
-        if ((childQuery.args as string[]).indexOf("LC") !== -1) {
-          group["gado_lc"] = true;
-          gadoLcChecked = true;
-        }
-        if ((childQuery.args as string[]).indexOf("HC") !== -1) {
-          group["gado_hc"] = true;
-          gadoHcChecked = true;
-        }
-      }
-    });
-  }
-
-  const nullValue = "__null";
-
-  let gadoLcQuery: Query;
-  let gadoHcQuery: Query;
-  if (gadoMeta !== null) {
-    gadoLcQuery = {
-      selector: selector(gadoMeta),
-      operator: "has_any",
-      args: ["LC"],
-    };
-
-    gadoHcQuery = {
-      selector: selector(gadoMeta),
-      operator: "has_any",
-      args: ["HC"],
-    };
-  }
-  const onChange = (event: CheckboxEvent) => {
-    const queries: Query[] = [];
-    group[event.value !== undefined ? event.value : nullValue] = event.checked;
-    const values = Object.keys(group)
-      .filter((key) => group[key])
-      .map((key) => (key !== nullValue ? key : null));
-    if (values.length > 0) {
-      if (gadoMeta !== null) {
-        if (values.includes("gado_lc")) {
-          queries.push(gadoLcQuery);
-          gadoLcChecked = true;
-        } else {
-          gadoHcChecked = false;
-        }
-        if (values.includes("gado_hc")) {
-          queries.push(gadoHcQuery);
-          gadoHcChecked = true;
-        } else {
-          gadoHcChecked = false;
-        }
-      }
-      hpoValues = values.filter((key) => key !== "gado_lc" && key !== "gado_hc");
-      if (hpoValues.length > 0) {
-        const hpoQuery: Query = {
-          selector: hpoSelector,
-          operator: "any_has_any",
-          args: hpoValues,
-        };
-        queries.push(hpoQuery);
-      } else if (gadoMeta !== null) {
-        props.onClear({ key: selectorKey(hpoSelector) });
-      }
-
-      props.onChange({
-        key: selectorKey(hpoSelector),
-        query: {
-          operator: "or",
-          args: queries,
-        },
-      });
-    } else {
-      props.onClear({ key: selectorKey(hpoSelector) });
-    }
-  };
-  return (
-    <>
-      <p class="has-text-weight-semibold">
-        {props.field.description ? <abbr title={props.field.description}>{label()}</abbr> : <span>{label()}</span>}
-      </p>
-      <div class="field">
-        <For each={props.field.categories}>
-          {(category) => (
-            <div class="control">
-              <Checkbox
-                value={category}
-                label={props.labels ? props.labels[category] : category}
-                checked={hpoValues && hpoValues.includes(category)}
-                onChange={onChange}
-              />
-            </div>
-          )}
-        </For>
-        <Show when={gadoMeta !== null}>
-          <div class="control">
-            <Checkbox
-              value="gado_hc"
-              label="GADO high"
-              desc="Gene predicted to have a relation with phenotypes of the proband (phenotypes of other samples are ignored!) with high confidence (Z-Score above 5)."
-              checked={gadoHcChecked}
-              onChange={onChange}
-            />
-          </div>
-          <div class="control">
-            <Checkbox
-              value="gado_lc"
-              label="GADO low"
-              desc="Gene predicted to have a relation with phenotypes of the proband (phenotypes of other samples are ignored!) with low confidence (Z-Score above 3 but below 5)."
-              checked={gadoLcChecked}
-              onChange={onChange}
-            />
-          </div>
-        </Show>
-      </div>
-    </>
-  );
-};

package/src/components/filter/FilterInheritance.tsx

@@ -1,162 +0,0 @@
-import { Component } from "solid-js";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { selector, selectorKey } from "../../utils/query";
-import { Item, Query, QueryClause, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { FilterChangeEvent, FilterClearEvent } from "./Filters";
-
-export type FilterInheritanceProps = {
-  vimField: FieldMetadata;
-  vidField: FieldMetadata;
-  query?: Query;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-  sample: Item<Sample>;
-  key: string;
-};
-export const FilterInheritance: Component<FilterInheritanceProps> = (props) => {
-  const VIM_TRUE = "VIM_true";
-  const VIM_MISSING = "VIM_missing";
-  const VID = "VID_true";
-  const VID_MISSING = "VID_missing";
-
-  let isVimMissingChecked = false;
-  let isVimTrueChecked = false;
-  let isVidTrueChecked = false;
-  let isVidMissingChecked = false;
-
-  const vimFieldSelector: Selector = ["s", props.sample.data.index, ...selector(props.vimField)];
-  const vidFieldSelector: Selector = ["s", props.sample.data.index, ...selector(props.vidField)];
-
-  if (props.query !== undefined) {
-    (props.query?.args as QueryClause[]).forEach((query) => {
-      const selectorKeyValue = selectorKey(query.selector);
-      if (selectorKeyValue === selectorKey(vimFieldSelector) && query.args === 1) {
-        isVimTrueChecked = true;
-      } else if (
-        selectorKeyValue === selectorKey(vimFieldSelector) &&
-        (query.args === null || query.args === undefined)
-      ) {
-        isVimMissingChecked = true;
-      } else if (selectorKeyValue === selectorKey(vidFieldSelector) && query.args === 1) {
-        isVidTrueChecked = true;
-      } else if (
-        selectorKeyValue === selectorKey(vidFieldSelector) &&
-        (query.args === null || query.args === undefined)
-      ) {
-        isVidMissingChecked = true;
-      }
-    });
-  }
-  const onFilterChange = (event: CheckboxEvent) => {
-    const queries: QueryClause[] = [];
-    if ((event.value === VIM_TRUE && event.checked) || (isVimTrueChecked && event.value !== VIM_TRUE)) {
-      queries.push({
-        selector: vimFieldSelector,
-        operator: "==",
-        args: 1,
-      });
-      isVimTrueChecked = true;
-    } else if (isVimTrueChecked && event.value === VIM_TRUE && !event.checked) {
-      isVimTrueChecked = false;
-    }
-
-    if ((event.value === VIM_MISSING && event.checked) || (isVimMissingChecked && event.value !== VIM_MISSING)) {
-      queries.push(
-        {
-          selector: vimFieldSelector,
-          operator: "==",
-          args: null,
-        },
-        {
-          selector: vimFieldSelector,
-          operator: "==",
-          args: undefined,
-        },
-      );
-      isVimMissingChecked = true;
-    } else if (isVimMissingChecked && event.value === VIM_MISSING && !event.checked) {
-      isVimMissingChecked = false;
-    }
-    if ((event.value === VID && event.checked) || (isVidTrueChecked && event.value !== VID)) {
-      queries.push({
-        selector: vidFieldSelector,
-        operator: "==",
-        args: 1,
-      });
-      isVidTrueChecked = true;
-    } else if ((event.value === VID_MISSING && event.checked) || (isVidMissingChecked && event.value !== VID_MISSING)) {
-      queries.push(
-        {
-          selector: vidFieldSelector,
-          operator: "==",
-          args: null,
-        },
-        {
-          selector: vidFieldSelector,
-          operator: "==",
-          args: undefined,
-        },
-      );
-      isVimMissingChecked = true;
-    } else if (isVidTrueChecked && event.value === VID && !event.checked) {
-      isVidTrueChecked = false;
-    }
-    if (queries.length > 0) {
-      props.onChange({
-        key: props.key,
-        query: {
-          operator: "or",
-          args: queries,
-        },
-      });
-    } else {
-      props.onClear({ key: props.key });
-    }
-  };
-
-  return (
-    <>
-      <div class="control">
-        <Checkbox
-          value={VIM_TRUE}
-          label="Match"
-          desc="Genotypes, affected statuses and known gene inheritance patterns match (can include de novo variants)."
-          checked={isVimTrueChecked}
-          onChange={onFilterChange}
-        />
-      </div>
-      <div class="control">
-        <Checkbox
-          value={VIM_MISSING}
-          label="Match: Potential"
-          desc="Genotypes, affected statuses match but gene inheritance pattern is unknown (can include de novo variants)."
-          checked={isVimMissingChecked}
-          onChange={onFilterChange}
-        />
-      </div>
-      <div class="control">
-        <Checkbox
-          value={VID}
-          label="De novo"
-          desc="On autosomes:
-- Available parents do not have the variant, or genotype is missing.
-On the X chromosome:
-- Female proband: same as autosomes.
-- Male proband: Mother does not have the variant, or mother genotype missing."
-          checked={isVidTrueChecked}
-          onChange={onFilterChange}
-        />
-      </div>
-      <div class="control">
-        <Checkbox
-          value={VID_MISSING}
-          label="De novo: Potential"
-          desc="Variant could be denovo but some genotype data of the sample or parents is missing."
-          checked={isVidTrueChecked}
-          onChange={onFilterChange}
-        />
-      </div>
-    </>
-  );
-};