@molgenis/vip-report-template 6.2.0 → 7.0.1

package/src/components/filter/FilterIntegerGq.tsx

@@ -1,47 +0,0 @@
-import { Component } from "solid-js";
-import { FilterProps } from "./Filter";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { selector, selectorKey } from "../../utils/query";
-import { Item, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
-
-export const FilterIntegerGq: Component<FilterProps> = (props) => {
-  const onFilterChange = (event: CheckboxEvent) => {
-    const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
-    if (event.checked)
-      props.onChange({
-        key: selectorKey(fieldSelector),
-        query: {
-          operator: "or",
-          args: [
-            {
-              selector: fieldSelector,
-              operator: ">=",
-              args: 20,
-            },
-            {
-              selector: fieldSelector,
-              operator: "==",
-              args: null,
-            },
-            {
-              selector: fieldSelector,
-              operator: "==",
-              args: undefined,
-            },
-          ],
-        },
-      });
-    else props.onClear({ key: selectorKey(fieldSelector) });
-  };
-
-  return (
-    <div class="control">
-      <Checkbox
-        desc="Genotype quality >= 20"
-        label="GT quality >= 20"
-        checked={props.query && props.query.args !== undefined}
-        onChange={onFilterChange}
-      />
-    </div>
-  );
-};

package/src/components/filter/FilterVI.tsx

@@ -1,68 +0,0 @@
-import { Component, For } from "solid-js";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { FilterProps } from "./Filter";
-import { selector, selectorKey } from "../../utils/query";
-import { Item, Sample, Selector } from "@molgenis/vip-report-api/src/Api";
-
-export type CheckboxGroup = {
-  [key: string]: boolean;
-};
-
-export type CategoryDescriptions = {
-  [key: string]: string;
-};
-
-const labels: CategoryDescriptions = {
-  AR_C: "Autosomal Recessive: Compound Hetrozygote",
-  AD_IP: "Autosomal Dominant: Incomplete Penentrance",
-  AR: "Autosomal Recessive",
-  AD: "Autosomal Dominant",
-  XLD: "X-Linked Dominant",
-  XLR: "X-Linked Recessive",
-};
-
-export const FilterVI: Component<FilterProps> = (props) => {
-  const group: CheckboxGroup = {};
-  if (props.query !== undefined) {
-    (props.query?.args as string[]).forEach((key) => {
-      group[key] = true;
-    });
-  }
-
-  // enable null category for any_has_any case if someone asks for it (requires query to be composed)
-  const fieldSelector: Selector = ["s", (props.sample as Item<Sample>).data.index, ...selector(props.field)];
-  const onChange = (event: CheckboxEvent) => {
-    group[event.value] = event.checked;
-    const values = Object.keys(group).filter((key) => group[key]);
-    if (values.length > 0) {
-      props.onChange({
-        key: selectorKey(fieldSelector),
-        query: {
-          selector: fieldSelector,
-          operator: "has_any",
-          args: values,
-        },
-      });
-    } else {
-      props.onClear({ key: selectorKey(fieldSelector) });
-    }
-  };
-
-  return (
-    <>
-      <For each={props.field.categories}>
-        {(category) => (
-          <div class="control">
-            <Checkbox
-              value={category}
-              label={category}
-              desc={labels[category] !== undefined ? labels[category] : category}
-              checked={props.query && (props.query.args as (string | null)[]).includes(category)}
-              onChange={onChange}
-            />
-          </div>
-        )}
-      </For>
-    </>
-  );
-};

package/src/components/filter/FilterVariantType.tsx

@@ -1,146 +0,0 @@
-import { Component } from "solid-js";
-import { Checkbox, CheckboxEvent } from "../Checkbox";
-import { FilterProps } from "./Filter";
-import { selector, selectorKey } from "../../utils/query";
-import { ComposedQuery, Query, QueryClause } from "@molgenis/vip-report-api/src/Api";
-
-export type CheckboxGroup = {
-  [key: string]: boolean;
-};
-
-export type CategoryLabels = {
-  [key: string]: string;
-};
-
-export const FilterVariantType: Component<
-  FilterProps & {
-    labels?: CategoryLabels;
-  }
-> = (props) => {
-  const group: CheckboxGroup = {};
-  let snvChecked = false;
-  let strChecked = false;
-  let svChecked = false;
-  const svSelector = selector(props.field);
-  const strQuery: QueryClause = {
-    selector: svSelector,
-    operator: "==",
-    args: "STR",
-  };
-
-  const svQuery: ComposedQuery = {
-    operator: "and",
-    args: [
-      {
-        selector: svSelector,
-        operator: "!=",
-        args: "STR",
-      },
-      {
-        selector: svSelector,
-        operator: "!=",
-        args: null,
-      },
-      {
-        selector: svSelector,
-        operator: "!=",
-        args: undefined,
-      },
-    ],
-  };
-
-  const snvQuery: ComposedQuery = {
-    operator: "or",
-    args: [
-      {
-        selector: svSelector,
-        operator: "==",
-        args: null,
-      },
-      {
-        selector: svSelector,
-        operator: "==",
-        args: undefined,
-      },
-    ],
-  };
-
-  if (props.query !== undefined && props.query.args.length > 0) {
-    (props.query.args as Query[]).forEach((childQuery) => {
-      if (childQuery.operator == "or") {
-        group["SNV"] = true;
-        snvChecked = true;
-      }
-      if (childQuery.operator == "and") {
-        group["SV"] = true;
-        svChecked = true;
-      }
-      if (childQuery.operator == "==") {
-        group["STR"] = true;
-        strChecked = true;
-      }
-    });
-  }
-  const onChange = (event: CheckboxEvent) => {
-    const queries: Query[] = [];
-    group[event.value] = event.checked;
-    const values = Object.keys(group).filter((key) => group[key]);
-    if (values.length > 0) {
-      if (values.includes("SNV")) {
-        queries.push(snvQuery);
-        snvChecked = true;
-      } else {
-        snvChecked = false;
-      }
-      if (values.includes("STR")) {
-        queries.push(strQuery);
-        strChecked = true;
-      } else {
-        strChecked = false;
-      }
-      if (values.includes("SV")) {
-        queries.push(svQuery);
-        svChecked = true;
-      } else {
-        svChecked = false;
-      }
-      props.onChange({
-        key: selectorKey(svSelector),
-        query: {
-          operator: "or",
-          args: queries,
-        },
-      });
-    } else {
-      props.onClear({ key: selectorKey(svSelector) });
-    }
-  };
-
-  return (
-    <>
-      <p class="has-text-weight-semibold">
-        <abbr title={"Only show variants of a certain type (called by a specific variant caller)."}>
-          {"Variant type"}
-        </abbr>
-      </p>
-
-      <div class="field">
-        <div class="control">
-          <Checkbox
-            value="SNV"
-            label="SNV/Indel"
-            desc="Single nucleotide variants and short InDels."
-            checked={snvChecked}
-            onChange={onChange}
-          />
-        </div>
-        <div class="control">
-          <Checkbox value="SV" label="SV" desc="Structural variants." checked={svChecked} onChange={onChange} />
-        </div>
-        <div class="control">
-          <Checkbox value="STR" label="STR" desc="Short Tandem Repeats." checked={strChecked} onChange={onChange} />
-        </div>
-      </div>
-    </>
-  );
-};

package/src/components/filter/Filters.tsx

@@ -1,29 +0,0 @@
-import { Component } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Item, Query, Sample } from "@molgenis/vip-report-api/src/Api";
-import { InfoFilters } from "./InfoFilters";
-import { SamplesFilters } from "./SamplesFilters";
-import { FilterQueries } from "../../store";
-
-export type FilterChangeEvent = { key: string; query: Query };
-export type FilterClearEvent = { key: string };
-
-export const Filters: Component<{
-  fields: FieldMetadata[];
-  samplesFields: { sample: Item<Sample>; fields: FieldMetadata[] }[];
-  queries?: FilterQueries;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
-  return (
-    <>
-      <InfoFilters fields={props.fields} queries={props.queries} onChange={props.onChange} onClear={props.onClear} />
-      <SamplesFilters
-        samplesFields={props.samplesFields}
-        queries={props.queries}
-        onChange={props.onChange}
-        onClear={props.onClear}
-      />
-    </>
-  );
-};

package/src/components/filter/InfoFilter.tsx

@@ -1,39 +0,0 @@
-import { Component } from "solid-js";
-import { Filter, FilterProps } from "./Filter";
-import { FilterChangeEvent, FilterClearEvent } from "./Filters";
-import { ComposedQuery, Query, QueryClause, SelectorPart } from "@molgenis/vip-report-api/src/Api";
-import { selectorKey } from "../../utils/query";
-
-export const InfoFilter: Component<FilterProps> = (props) => {
-  const onChange = (event: FilterChangeEvent) => {
-    props.onChange({
-      key: selectorKey(["n", event.key]),
-      query: updateQuery(event.query),
-    });
-  };
-
-  function updateQuery(query: Query): QueryClause | ComposedQuery {
-    let updatedQuery: QueryClause | ComposedQuery;
-    if ((query as QueryClause).selector !== undefined) {
-      updatedQuery = {
-        ...(query as QueryClause),
-        selector: ["n", ...((query as QueryClause).selector as SelectorPart[])],
-      };
-    } else {
-      const queries: (QueryClause | ComposedQuery)[] = [];
-      (query as ComposedQuery).args.forEach((subQuery) => queries.push(updateQuery(subQuery)));
-      updatedQuery = {
-        operator: (query as ComposedQuery).operator,
-        args: queries,
-      };
-    }
-    return updatedQuery;
-  }
-
-  const onClear = (event: FilterClearEvent) => {
-    props.onClear({
-      key: selectorKey(["n", event.key]),
-    });
-  };
-  return <Filter field={props.field} query={props.query} onChange={onChange} onClear={onClear} />;
-};

package/src/components/filter/InfoFilters.tsx

@@ -1,35 +0,0 @@
-import { Component, For } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { InfoFilter } from "./InfoFilter";
-import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
-import { FilterQueries } from "../../store";
-import { infoFieldKey } from "../../utils/query";
-import { FilterChangeEvent, FilterClearEvent } from "./Filters";
-
-export const InfoFilters: Component<{
-  fields: FieldMetadata[];
-  queries?: FilterQueries;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-  defaultValues?: { [key: string]: Value };
-}> = (props) => {
-  const filterableFields = () =>
-    props.fields.filter(
-      (field) => field.type === "CATEGORICAL" || field.id === "IncompletePenetrance" || field.id === "SVTYPE",
-    );
-
-  return (
-    <>
-      <For each={filterableFields()}>
-        {(field) => (
-          <InfoFilter
-            field={field}
-            query={props.queries ? props.queries[infoFieldKey(field)] : undefined}
-            onChange={props.onChange}
-            onClear={props.onClear}
-          />
-        )}
-      </For>
-    </>
-  );
-};

package/src/components/filter/SampleFilters.tsx

@@ -1,93 +0,0 @@
-import { Component, For, Show } from "solid-js";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
-import { Filter } from "./Filter";
-import { FilterQueries } from "../../store";
-import { sampleCustomKey, sampleFieldKey } from "../../utils/query";
-import { FilterChangeEvent, FilterClearEvent } from "./Filters";
-import { FilterInheritance } from "./FilterInheritance";
-import { FilterVI } from "./FilterVI";
-
-export const SampleFilters: Component<{
-  sample: Item<Sample>;
-  fields: FieldMetadata[];
-  queries?: FilterQueries;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
-  if (props.sample == undefined) {
-    throw Error("Cannot create Sample filters without a sample.");
-  }
-
-  const qualityFields = props.fields.filter((field) => field.id !== "VIM" && field.id !== "VID" && field.id !== "VI");
-  let vimField: FieldMetadata | undefined;
-  let vidField: FieldMetadata | undefined;
-  let viField: FieldMetadata | undefined;
-  props.fields.forEach((field) => {
-    if (field.id === "VIM") {
-      vimField = field;
-    } else if (field.id === "VID") {
-      vidField = field;
-    } else if (field.id === "VI") {
-      viField = field;
-    }
-  });
-
-  const inheritanceFilterKey: string = sampleCustomKey(props.sample, "VIP_Inheritance");
-  return (
-    <>
-      <Show when={vimField !== undefined && vidField !== undefined}>
-        <abbr class="has-text-weight-semibold" title="Inheritance Match">
-          {props.sample.data.person.individualId} Inh. Match
-        </abbr>
-        <div class="field">
-          {" "}
-          <FilterInheritance
-            vimField={vimField as FieldMetadata}
-            vidField={vidField as FieldMetadata}
-            query={props.queries ? props.queries[inheritanceFilterKey] : undefined}
-            onChange={props.onChange}
-            onClear={props.onClear}
-            sample={props.sample}
-            key={inheritanceFilterKey}
-          />
-        </div>
-      </Show>
-      <Show when={viField !== undefined}>
-        <abbr
-          class="has-text-weight-semibold"
-          title="Inheritance Modes that are suitable for the pedigree genotypes and affected statuses"
-        >
-          {props.sample.data.person.individualId} Inh. Modes
-        </abbr>
-        <div class="field">
-          {" "}
-          <FilterVI
-            field={viField as FieldMetadata}
-            query={props.queries ? props.queries[sampleFieldKey(props.sample, viField as FieldMetadata)] : undefined}
-            onChange={props.onChange}
-            onClear={props.onClear}
-            sample={props.sample}
-          />
-        </div>
-      </Show>
-      <p class="has-text-weight-semibold">{props.sample.data.person.individualId}: Quality</p>
-      <div class="field">
-        <For each={qualityFields}>
-          {(field) => (
-            <>
-              {" "}
-              <Filter
-                field={field}
-                query={props.queries ? props.queries[sampleFieldKey(props.sample, field)] : undefined}
-                onChange={props.onChange}
-                onClear={props.onClear}
-                sample={props.sample}
-              />
-            </>
-          )}
-        </For>
-      </div>
-    </>
-  );
-};

package/src/components/filter/SamplesFilters.tsx

@@ -1,33 +0,0 @@
-import { Component, For } from "solid-js";
-import { SampleFilters } from "./SampleFilters";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
-import { FilterQueries } from "../../store";
-import { FilterChangeEvent, FilterClearEvent } from "./Filters";
-
-export type SampleFields = { sample: Item<Sample>; fields: FieldMetadata[] };
-
-export const SamplesFilters: Component<{
-  samplesFields: SampleFields[];
-  queries?: FilterQueries;
-  onChange: (event: FilterChangeEvent) => void;
-  onClear: (event: FilterClearEvent) => void;
-}> = (props) => {
-  return (
-    <>
-      <For each={props.samplesFields}>
-        {(sampleField) => (
-          <>
-            <SampleFilters
-              sample={sampleField.sample}
-              fields={sampleField.fields}
-              queries={props.queries}
-              onChange={props.onChange}
-              onClear={props.onClear}
-            />
-          </>
-        )}
-      </For>
-    </>
-  );
-};

package/src/components/record/Allele.tsx

@@ -1,38 +0,0 @@
-import { Component, createMemo, Match, Switch } from "solid-js";
-import { AlleleBreakend } from "./AlleleBreakend";
-import { AlleleMissing } from "./AlleleMissing";
-import { AlleleSymbolic } from "./AlleleSymbolic";
-import { AlleleNucs } from "./AlleleNucs";
-
-type AlleleType = "breakend" | "missing" | "symbolic" | "nucs";
-
-export const Allele: Component<{ value: string | null; isAbbreviate: boolean }> = (props) => {
-  const type = createMemo((): AlleleType => {
-    const value = props.value;
-    let type: AlleleType;
-
-    if (value === null) type = "missing";
-    else if (value.startsWith("<") && value.endsWith(">")) type = "symbolic";
-    else if (value.indexOf("[") !== -1 || value.indexOf("]") !== -1 || value.indexOf(".") !== -1) type = "breakend";
-    else type = "nucs";
-
-    return type;
-  });
-
-  return (
-    <Switch>
-      <Match when={type() === "breakend"}>
-        <AlleleBreakend value={props.value as string} />
-      </Match>
-      <Match when={type() === "missing"}>
-        <AlleleMissing />
-      </Match>
-      <Match when={type() === "symbolic"}>
-        <AlleleSymbolic value={props.value as string} />
-      </Match>
-      <Match when={type() === "nucs"}>
-        <AlleleNucs values={(props.value as string).split("")} isAbbreviate={props.isAbbreviate} />
-      </Match>
-    </Switch>
-  );
-};

package/src/components/record/AlleleBreakend.tsx

@@ -1,5 +0,0 @@
-import { Component } from "solid-js";
-
-export const AlleleBreakend: Component<{ value: string }> = (props) => {
-  return <span class="base-n">{props.value}</span>;
-};

package/src/components/record/AlleleMissing.tsx

@@ -1,5 +0,0 @@
-import { Component } from "solid-js";
-
-export const AlleleMissing: Component = () => {
-  return <span class="base-n">?</span>;
-};

package/src/components/record/AlleleNucs.tsx

@@ -1,49 +0,0 @@
-import { Component, For } from "solid-js";
-
-const Nucs: Component<{ bases: string[] }> = (props) => {
-  return (
-    <For each={props.bases}>
-      {(base) => (
-        <span
-          classList={{
-            base: true,
-            "base-a": base === "A",
-            "base-c": base === "C",
-            "base-g": base === "G",
-            "base-n": base === "N",
-            "base-t": base === "T",
-          }}
-        >
-          {base}
-        </span>
-      )}
-    </For>
-  );
-};
-
-export const AlleleNucs: Component<{ values: string[]; isAbbreviate: boolean }> = (props) => {
-  const abbreviate = (): boolean => props.values.length > 4 && props.isAbbreviate;
-
-  const nucs = (): string[] => {
-    let nucs = props.values;
-    if (abbreviate()) {
-      const lastNuc = nucs[nucs.length - 1];
-      nucs = nucs.slice(0, 2);
-      nucs.push("\u2026"); // ellipsis
-      nucs.push(lastNuc);
-    }
-    return nucs;
-  };
-
-  return (
-    <>
-      {abbreviate() ? (
-        <abbr title={props.values.join("")}>
-          <Nucs bases={nucs()} />
-        </abbr>
-      ) : (
-        <Nucs bases={nucs()} />
-      )}
-    </>
-  );
-};

package/src/components/record/AlleleSymbolic.tsx

@@ -1,5 +0,0 @@
-import { Component } from "solid-js";
-
-export const AlleleSymbolic: Component<{ value: string }> = (props) => {
-  return <span class="base-n">{props.value}</span>;
-};

package/src/components/record/Alt.tsx

@@ -1,17 +0,0 @@
-import { Component, For } from "solid-js";
-import { Allele } from "./Allele";
-
-export const Alt: Component<{ value: (string | null)[]; isAbbreviate: boolean }> = (props) => {
-  return (
-    <>
-      <For each={props.value}>
-        {(alt, i) => (
-          <>
-            {i() !== 0 && <span>, </span>}
-            <Allele value={alt} isAbbreviate={props.isAbbreviate} />
-          </>
-        )}
-      </For>
-    </>
-  );
-};

package/src/components/record/Chrom.tsx

@@ -1,5 +0,0 @@
-import { Component } from "solid-js";
-
-export const Chrom: Component<{ value: string }> = (props) => {
-  return <span>{props.value}</span>;
-};

package/src/components/record/Format.tsx

@@ -1,40 +0,0 @@
-import { Component, Match, Switch } from "solid-js";
-import { Genotype, RecordSampleType } from "@molgenis/vip-report-vcf/src/SampleDataParser";
-import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
-import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Field } from "./field/Field";
-import { GenotypeField } from "./format/GenotypeField";
-import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
-import { Item } from "@molgenis/vip-report-api/src/Api";
-
-export const Format: Component<{
-  format: RecordSampleType;
-  formatMetadata: FieldMetadata;
-  record: Item<Record>;
-  isAbbreviate: boolean;
-  allelicBalance: number | undefined | null;
-  readDepth: number | undefined | null;
-}> = (props) => {
-  return (
-    <Switch
-      fallback={
-        <Field
-          info={{ value: props.format as Value | Value[], record: props.record }}
-          infoMeta={props.formatMetadata}
-          context={{}}
-        />
-      }
-    >
-      <Match when={props.formatMetadata.id === "GT"}>
-        <GenotypeField
-          genotype={props.format as Genotype}
-          refAllele={props.record.data.r}
-          altAlleles={props.record.data.a}
-          isAbbreviate={props.isAbbreviate}
-          allelicBalance={props.allelicBalance}
-          readDepth={props.readDepth}
-        />
-      </Match>
-    </Switch>
-  );
-};