@molgenis/vip-report-template 6.2.0 → 7.0.1

package/src/components/VariantsContainerHeader.tsx

@@ -0,0 +1,70 @@
+import { Component, Show } from "solid-js";
+import { getSampleAffectedStatusLabel, getSampleLabel, getSampleSexLabel } from "../utils/sample";
+import { SampleContainer } from "../utils/api.ts";
+import { Item, Sample } from "@molgenis/vip-report-api";
+
+export const VariantsContainerHeader: Component<{
+  sample: SampleContainer | null;
+}> = (props) => {
+  function getTitleSampleSexLabel(sample: Item<Sample>): string {
+    const label = getSampleSexLabel(sample);
+    return label !== "?" ? label : "sex:?";
+  }
+
+  function getTitleAffectedStatusLabel(sample: Item<Sample>): string {
+    const label = getSampleAffectedStatusLabel(sample);
+    return label !== "?" ? label : "affected status:?";
+  }
+
+  const title = (): string => {
+    let title: string;
+    if (props.sample) {
+      const sample = props.sample.item;
+      title = `Reported variants for ${getSampleLabel(sample)} (${getTitleSampleSexLabel(sample)} ${getTitleAffectedStatusLabel(sample)})`;
+    } else {
+      title = "Reported variants";
+    }
+    return title;
+  };
+
+  const subtitle = (): string | null => {
+    let subtitle: string | null;
+    if (props.sample) {
+      const sampleFather = props.sample.paternalSample;
+      const sampleMother = props.sample.maternalSample;
+      const sampleOtherFamilyMembers = props.sample.otherPedigreeSamples;
+
+      if (!(sampleFather === undefined && sampleMother === undefined && sampleOtherFamilyMembers.length === 0)) {
+        const tokens: string[] = [];
+        if (sampleMother !== null) {
+          tokens.push(`mother (${getTitleAffectedStatusLabel(sampleMother)})`);
+        }
+        if (sampleFather !== null) {
+          tokens.push(`father (${getTitleAffectedStatusLabel(sampleFather)})`);
+        }
+
+        for (const familyMember of sampleOtherFamilyMembers) {
+          tokens.push(
+            `${getSampleLabel(familyMember)} (${getTitleSampleSexLabel(familyMember)} ${getTitleAffectedStatusLabel(familyMember)})`,
+          );
+        }
+
+        let str = tokens.pop() as string;
+        if (tokens.length > 0) str = `${tokens.join(", ")} and ${str}`;
+        subtitle = `Includes genotypes for ${str}`;
+      } else {
+        subtitle = null;
+      }
+    } else {
+      subtitle = "Includes all reported variants without genotypes";
+    }
+    return subtitle;
+  };
+
+  return (
+    <>
+      <p class="title is-3">{title()}</p>
+      <Show when={subtitle()}>{(subtitle) => <p class="subtitle is-5">{subtitle()}</p>}</Show>
+    </>
+  );
+};

package/src/components/field/Field.tsx

@@ -0,0 +1,80 @@
+import { Component, Match, Switch } from "solid-js";
+import {
+  CellValue,
+  CellValueAlt,
+  CellValueChrom,
+  CellValueFilter,
+  CellValueFormat,
+  CellValueGenotype,
+  CellValueId,
+  CellValueInfo,
+  CellValuePos,
+  CellValueQual,
+  CellValueRef,
+  ConfigCellCustom,
+  ConfigCellGenotype,
+  ConfigCellInfo,
+  ConfigCellItem,
+} from "../../types/configCells";
+import { ErrorNotification } from "../ErrorNotification";
+import { FieldComposed } from "./composed/FieldComposed";
+import { CellValueCustom } from "../../types/configCellComposed";
+import { FieldGenotype } from "./genotype/FieldGenotype";
+import { FieldInfo } from "./info/FieldInfo";
+import { FieldChrom } from "./FieldChrom";
+import { FieldPos } from "./FieldPos";
+import { FieldId } from "./FieldId";
+import { FieldRef } from "./FieldRef";
+import { FieldAlt } from "./FieldAlt";
+import { FieldQual } from "./FieldQual";
+import { FieldFilter } from "./FieldFilter";
+import { FieldFormat } from "./FieldFormat";
+
+export const Field: Component<{
+  config: ConfigCellItem;
+  value: CellValue;
+}> = (props) => {
+  const type = () => props.config.type;
+
+  return (
+    <Switch fallback={<ErrorNotification error={`unexpected field type ${type()}`} />}>
+      <Match when={type() === "chrom"}>
+        <FieldChrom value={props.value as CellValueChrom} />
+      </Match>
+      <Match when={type() === "pos"}>
+        <FieldPos value={props.value as CellValuePos} />
+      </Match>
+      <Match when={type() === "id"}>
+        <FieldId value={props.value as CellValueId} />
+      </Match>
+      <Match when={type() === "ref"}>
+        <FieldRef value={props.value as CellValueRef} />
+      </Match>
+      <Match when={type() === "alt"}>
+        <FieldAlt value={props.value as CellValueAlt} />
+      </Match>
+      <Match when={type() === "qual"}>
+        <FieldQual value={props.value as CellValueQual} />
+      </Match>
+      <Match when={type() === "filter"}>
+        <FieldFilter value={props.value as CellValueFilter} />
+      </Match>
+      <Match when={type() === "info"}>
+        <FieldInfo metadata={(props.config as ConfigCellInfo).field} value={props.value as CellValueInfo} />
+      </Match>
+      <Match when={type() === "format"}>
+        <FieldFormat value={props.value as CellValueFormat} />
+      </Match>
+      <Match when={type() === "genotype"}>
+        <FieldGenotype metadata={(props.config as ConfigCellGenotype).field} value={props.value as CellValueGenotype} />
+        <></>
+      </Match>
+      <Match when={type() === "composed"}>
+        <FieldComposed
+          config={props.config as ConfigCellCustom<CellValueCustom>}
+          value={props.value as CellValueCustom}
+        />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/field/FieldAlt.tsx

@@ -0,0 +1,19 @@
+import { Component, For } from "solid-js";
+import { Allele } from "../Allele";
+import { CellValueAlt } from "../../types/configCells";
+
+export const FieldAlt: Component<{ value: CellValueAlt; isAbbreviate?: boolean }> = (props) => {
+  const abbreviate = () => (props.isAbbreviate !== undefined ? props.isAbbreviate : true);
+  return (
+    <>
+      <For each={props.value}>
+        {(alt, i) => (
+          <>
+            {i() !== 0 && <span>, </span>}
+            <Allele value={alt} isAbbreviate={abbreviate()} />
+          </>
+        )}
+      </For>
+    </>
+  );
+};

package/src/components/field/FieldChrom.tsx

@@ -0,0 +1,6 @@
+import { Component } from "solid-js";
+import { CellValueChrom } from "../../types/configCells";
+
+export const FieldChrom: Component<{ value: CellValueChrom }> = (props) => {
+  return <span>{props.value}</span>;
+};

package/src/components/{record/Id.tsx → field/FieldFilter.tsx}

@@ -1,6 +1,7 @@
 import { Component, For } from "solid-js";
+import { CellValueFilter } from "../../types/configCells";
 
-export const Id: Component<{ value: string[] | null }> = (props) => {
+export const FieldFilter: Component<{ value: CellValueFilter }> = (props) => {
   return (
     <>
       <For each={props.value}>{(id) => <span>{id}</span>}</For>

package/src/components/field/FieldFormat.tsx

@@ -0,0 +1,10 @@
+import { Component, For } from "solid-js";
+import { CellValueFormat } from "../../types/configCells";
+
+export const FieldFormat: Component<{ value: CellValueFormat }> = (props) => {
+  return (
+    <>
+      <For each={props.value}>{(formatKey) => <span>{formatKey}</span>}</For>
+    </>
+  );
+};

package/src/components/{record/Filter.tsx → field/FieldId.tsx}

@@ -1,6 +1,6 @@
 import { Component, For } from "solid-js";
 
-export const Filter: Component<{ value: string[] | null }> = (props) => {
+export const FieldId: Component<{ value: string[] | null }> = (props) => {
   return (
     <>
       <For each={props.value}>{(id) => <span>{id}</span>}</For>

package/src/components/field/FieldPos.tsx

@@ -0,0 +1,6 @@
+import { Component } from "solid-js";
+import { CellValuePos } from "../../types/configCells";
+
+export const FieldPos: Component<{ value: CellValuePos }> = (props) => {
+  return <span>{props.value}</span>;
+};

package/src/components/field/FieldQual.tsx

@@ -0,0 +1,6 @@
+import { Component } from "solid-js";
+import { CellValueQual } from "../../types/configCells";
+
+export const FieldQual: Component<{ value: CellValueQual }> = (props) => {
+  return <>{props.value && <span>{props.value}</span>}</>;
+};

package/src/components/field/FieldRef.tsx

@@ -0,0 +1,8 @@
+import { Component } from "solid-js";
+import { Allele } from "../Allele";
+import { CellValueRef } from "../../types/configCells";
+
+export const FieldRef: Component<{ value: CellValueRef; isAbbreviate?: boolean }> = (props) => {
+  const abbreviate = () => (props.isAbbreviate !== undefined ? props.isAbbreviate : true);
+  return <Allele value={props.value} isAbbreviate={abbreviate()} />;
+};

package/src/components/field/composed/FieldClinVar.tsx

@@ -0,0 +1,72 @@
+import { Component, Show } from "solid-js";
+import { Anchor } from "../../Anchor";
+import { Abbr } from "../../Abbr";
+import { CellValueClinVar } from "../../../types/configCellComposed";
+
+export const FieldClinVar: Component<{
+  value: CellValueClinVar;
+}> = (props) => {
+  const label = () =>
+    props.value.clnSigs
+      .filter((category) => category !== null)
+      .map((category) => category.label)
+      .join(", ");
+
+  const href = () => {
+    const ids = props.value.clnIds;
+    return ids && ids.length === 1 ? `https://www.ncbi.nlm.nih.gov/clinvar/variation/${ids[0]}/` : undefined;
+  };
+
+  const description = () => {
+    const status = props.value.clnRevStats || [];
+    if (status.length === 0) return;
+
+    const statusValues = status.filter((category) => category !== null).map((category) => category.value);
+    const descriptionText = status
+      .filter((category) => category !== null)
+      .map((category) => category.label)
+      .join(", ");
+
+    let description;
+    if (status.length === 1 && statusValues.includes("practice_guideline")) {
+      description = "\u2605\u2605\u2605\u2605";
+    } else if (status.length === 1 && statusValues.includes("reviewed_by_expert_panel")) {
+      description = "\u2605\u2605\u2605\u2606";
+    } else if (
+      status.length === 3 &&
+      statusValues.includes("criteria_provided") &&
+      statusValues.includes("_multiple_submitters") &&
+      statusValues.includes("_no_conflicts")
+    ) {
+      description = "\u2605\u2605\u2606\u2606";
+    } else if (
+      status.length === 2 &&
+      statusValues.includes("criteria_provided") &&
+      statusValues.includes("_conflicting_interpretations")
+    ) {
+      description = "\u2605\u2606\u2606\u2606";
+    } else if (
+      status.length === 2 &&
+      statusValues.includes("criteria_provided") &&
+      statusValues.includes("_single_submitter")
+    ) {
+      description = "\u2605\u2606\u2606\u2606";
+    } else {
+      description = "\u2606\u2606\u2606\u2606";
+    }
+    description += " (" + descriptionText + ")";
+    return description;
+  };
+
+  return (
+    <Show when={label()}>
+      {(label) => (
+        <Anchor href={href()}>
+          <Show when={description()} fallback={<span>{label()}</span>}>
+            {(description) => <Abbr title={description()} value={label()} />}
+          </Show>
+        </Anchor>
+      )}
+    </Show>
+  );
+};

package/src/components/field/composed/FieldComposed.tsx

@@ -0,0 +1,68 @@
+import { Component, Match, Switch } from "solid-js";
+import { FieldLocus } from "./FieldLocus";
+import { FieldVipC } from "./FieldVipC";
+import { FieldGenotype } from "./FieldGenotype";
+import { FieldGene } from "./FieldGene";
+import { ErrorNotification } from "../../ErrorNotification";
+import { FieldClinVar } from "./FieldClinVar";
+import { FieldGnomAd } from "./FieldGnomAd";
+import { FieldHpo } from "./FieldHpo";
+import { ConfigCellCustom } from "../../../types/configCells";
+import {
+  CellValueClinVar,
+  CellValueCustom,
+  CellValueGene,
+  CellValueGenotype,
+  CellValueGnomAd,
+  CellValueHpo,
+  CellValueInheritanceModes,
+  CellValueLocus,
+  CellValueVipC,
+  CellValueVipCS,
+  CellValueVkgl,
+} from "../../../types/configCellComposed";
+import { FieldVkgl } from "./FieldVkgl";
+import { FieldInheritanceModes } from "./FieldInheritanceModes";
+import { FieldVipCS } from "./FieldVipCS.tsx";
+
+export const FieldComposed: Component<{
+  config: ConfigCellCustom<CellValueCustom>;
+  value: CellValueCustom;
+}> = (props) => {
+  const id = () => props.config.id;
+
+  return (
+    <Switch fallback={<ErrorNotification error={`unknown composed cell identifier ${id()}`} />}>
+      <Match when={id() === "clinVar"}>
+        <FieldClinVar value={props.value as CellValueClinVar} />
+      </Match>
+      <Match when={id() === "gene"}>
+        <FieldGene value={props.value as CellValueGene} />
+      </Match>
+      <Match when={id() === "genotype" || id() === "genotype_maternal" || id() === "genotype_paternal"}>
+        <FieldGenotype value={props.value as CellValueGenotype} />
+      </Match>
+      <Match when={id() === "gnomAdAf"}>
+        <FieldGnomAd value={props.value as CellValueGnomAd} />
+      </Match>
+      <Match when={id() === "hpo"}>
+        <FieldHpo value={props.value as CellValueHpo} />
+      </Match>
+      <Match when={id() === "inheritancePattern"}>
+        <FieldInheritanceModes value={props.value as CellValueInheritanceModes} />
+      </Match>
+      <Match when={id() === "locus"}>
+        <FieldLocus value={props.value as CellValueLocus} />
+      </Match>
+      <Match when={id() === "vipC"}>
+        <FieldVipC value={props.value as CellValueVipC} />
+      </Match>
+      <Match when={id() === "vipCS"}>
+        <FieldVipCS value={props.value as CellValueVipCS} />
+      </Match>
+      <Match when={id() === "vkgl"}>
+        <FieldVkgl value={props.value as CellValueVkgl} />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/field/composed/FieldGene.tsx

@@ -0,0 +1,39 @@
+import { Component, Show } from "solid-js";
+import { Anchor } from "../../Anchor";
+import { Abbr } from "../../Abbr";
+import { CellValueGene } from "../../../types/configCellComposed";
+
+export const FieldGene: Component<{
+  value: CellValueGene;
+}> = (props) => {
+  const href = (): string | null => {
+    const symbol = props.value.symbol;
+    if (symbol === null) return null;
+
+    const geneIdentifier = props.value.geneIdentifier;
+    const queryString =
+      props.value.symbolSource === "EntrezGene" && geneIdentifier
+        ? `query=ncbi_gene_id:${geneIdentifier}`
+        : `query=${encodeURIComponent(symbol)}&filter=document_type:%22gene%22`;
+    return `https://www.genenames.org/tools/search/#!/?${queryString}`;
+  };
+
+  return (
+    <Show when={props.value.symbol} keyed>
+      {(symbol) => (
+        <>
+          <Anchor href={href()}>
+            <span>{symbol}</span>
+          </Anchor>
+          {props.value.incompletePenetrance && props.value.incompletePenetrance.value === "1" && (
+            <span class="ml-1">
+              <Show when={props.value.incompletePenetrance.description} fallback={"IP"}>
+                {(description) => <Abbr title={description()} value="IP" />}
+              </Show>
+            </span>
+          )}
+        </>
+      )}
+    </Show>
+  );
+};

package/src/components/field/composed/FieldGenotype.tsx

@@ -0,0 +1,35 @@
+import { Component, Match, Switch } from "solid-js";
+import { VariantTypeId } from "../../../utils/variantType.ts";
+import { CellValueGenotype } from "../../../types/configCellComposed";
+import { FieldGenotypeSnvSv } from "./FieldGenotypeSnvSv";
+import { FieldGenotypeStr } from "./FieldGenotypeStr";
+import { ErrorNotification } from "../../ErrorNotification";
+
+export const FieldGenotype: Component<{
+  value: CellValueGenotype;
+}> = (props) => {
+  const variantTypeId = (): VariantTypeId => {
+    const value = props.value.svType;
+
+    let variantType: VariantTypeId;
+    if (value === null) {
+      variantType = "snv";
+    } else if (value === "STR") {
+      variantType = "str";
+    } else {
+      variantType = "sv";
+    }
+    return variantType;
+  };
+
+  return (
+    <Switch fallback={<ErrorNotification error={`unexpected variant type ${variantTypeId()}`} />}>
+      <Match when={variantTypeId() === "all" || variantTypeId() === "snv" || variantTypeId() === "sv"}>
+        <FieldGenotypeSnvSv value={props.value} />
+      </Match>
+      <Match when={variantTypeId() === "str"}>
+        <FieldGenotypeStr value={props.value} />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/{record/format/GenotypeField.tsx → field/composed/FieldGenotypeSnvSv.tsx}

@@ -1,6 +1,7 @@
 import { Component, For, Show } from "solid-js";
-import { Genotype } from "@molgenis/vip-report-vcf/src/SampleDataParser";
-import { Allele } from "../Allele";
+import { Genotype } from "@molgenis/vip-report-vcf";
+import { Allele } from "../../Allele";
+import { CellValueGenotype } from "../../../types/configCellComposed";
 
 function isAllelicImbalance(genotype: Genotype, allelicBalance: number | undefined | null) {
   if (genotype.t === "het" && allelicBalance !== undefined && allelicBalance !== null) {
@@ -19,32 +20,35 @@ function getTitle(allelicImbalance: boolean) {
   return allelicImbalance ? `Allelic imbalance` : ``;
 }
 
-export const GenotypeField: Component<{
-  genotype: Genotype;
-  refAllele: string;
-  altAlleles: (string | null)[];
-  isAbbreviate: boolean;
-  allelicBalance: number | undefined | null;
-  readDepth: number | undefined | null;
+export const FieldGenotypeSnvSv: Component<{
+  value: CellValueGenotype;
 }> = (props) => {
-  const allelicImbalance: boolean = isAllelicImbalance(props.genotype, props.allelicBalance);
+  const refAllele = () => props.value.refAllele;
+  const altAlleles = () => props.value.altAlleles;
+  const genotype = () => props.value.genotype;
+  const allelicImbalance = () => isAllelicImbalance(genotype(), props.value.viab);
+
   return (
     <>
-      <For each={props.genotype.a}>
+      <For each={genotype().a}>
         {(alleleIndex, i) => (
           <>
-            {i() !== 0 && <span class="phase">{props.genotype.p ? "|" : "/"}</span>}
+            {i() !== 0 && <span class="phase">{genotype().p ? "|" : "/"}</span>}
             <Allele
               value={
-                alleleIndex !== null ? (alleleIndex === 0 ? props.refAllele : props.altAlleles[alleleIndex - 1]) : null
+                alleleIndex !== null
+                  ? alleleIndex === 0
+                    ? refAllele()
+                    : (altAlleles()[alleleIndex - 1] as string | null)
+                  : null
               }
-              isAbbreviate={props.isAbbreviate}
+              isAbbreviate={true}
             />
           </>
         )}
       </For>
-      <Show when={allelicImbalance}>
-        <abbr title={getTitle(allelicImbalance)} class="ml-1 is-clickable">
+      <Show when={allelicImbalance()}>
+        <abbr title={getTitle(allelicImbalance())} class="ml-1 is-clickable">
           <i class="fas fa-circle-exclamation has-text-danger" />
         </abbr>
       </Show>

package/src/components/field/composed/FieldGenotypeStr.tsx

@@ -0,0 +1,31 @@
+import { Component, Show } from "solid-js";
+import { Allele } from "../../Allele";
+import { CellValueGenotype } from "../../../types/configCellComposed";
+
+export const FieldGenotypeStr: Component<{
+  value: CellValueGenotype;
+}> = (props) => {
+  const showGenotype = () =>
+    props.value.displayRepeatUnit !== undefined &&
+    props.value.repeatUnitValue !== undefined &&
+    props.value.repeatCount !== undefined &&
+    props.value.repeatUnitMatch !== undefined;
+
+  return (
+    <Show when={showGenotype()}>
+      <abbr title={`display repeat unit familiar to clinician: ${props.value.displayRepeatUnit!}`}>
+        <Allele value={props.value.repeatUnitValue!} isAbbreviate={false} />
+        <sub>n</sub>
+      </abbr>
+      <span class="ml-1">{`(n=${props.value.repeatCount!})`}</span>
+      <Show when={!props.value.repeatUnitMatch!}>
+        <abbr
+          title={"the called repeat unit does not match the repeat unit in the loci bed file"}
+          class="ml-1 is-clickable"
+        >
+          <i class="fas fa-circle-exclamation has-text-danger" />
+        </abbr>
+      </Show>
+    </Show>
+  );
+};

package/src/components/field/composed/FieldGnomAd.tsx

@@ -0,0 +1,58 @@
+import { Component, Show } from "solid-js";
+import { FieldFloat } from "../typed/FieldFloat";
+import { Anchor } from "../../Anchor";
+import { CellValueGnomAd } from "../../../types/configCellComposed";
+
+export const FieldGnomAd: Component<{
+  value: CellValueGnomAd;
+}> = (props) => {
+  const alleleNum = () => props.value.alleleNum;
+  const gnomAdAf = () => props.value.gnomAdAf;
+  const gnomAdCov = () => props.value.gnomAdCov;
+  const gnomAdQc = () => props.value.gnomAdQcs || [];
+
+  const href = (): string | undefined => {
+    let href;
+    if (gnomAdAf() !== null && alleleNum() !== undefined) {
+      const alt = props.value.a[alleleNum()! - 1];
+      if (alt) {
+        const variantId = [props.value.c, props.value.p, props.value.r, alt].join("-");
+        const dataset = "gnomad_r4";
+        href = `https://gnomad.broadinstitute.org/variant/${encodeURIComponent(variantId)}?dataset=${dataset}`;
+      }
+    }
+    return href;
+  };
+
+  const lowCoverage = () => {
+    const cov = gnomAdCov();
+    return cov !== undefined && cov !== null && cov < 0.5;
+  };
+
+  return (
+    <Show when={gnomAdAf() !== null}>
+      <Show when={href()} fallback={<FieldFloat value={gnomAdAf()} />} keyed>
+        {(href) => (
+          <>
+            <Anchor href={href}>
+              <FieldFloat value={gnomAdAf()} />
+            </Anchor>
+            <Show when={gnomAdQc().length > 0}>
+              <abbr title={"Failed quality control filters: " + gnomAdQc().join(", ")} class="ml-1 is-clickable">
+                <i class="fas fa-circle-exclamation has-text-warning" />
+              </abbr>
+            </Show>
+            <Show when={lowCoverage()}>
+              <abbr
+                title="This variant is covered in fewer than 50% of individuals in gnomAD. This may indicate a low-quality site."
+                class="ml-1 is-clickable"
+              >
+                <i class="fas fa-circle-exclamation has-text-warning" />
+              </abbr>
+            </Show>
+          </>
+        )}
+      </Show>
+    </Show>
+  );
+};

package/src/components/field/composed/FieldHpo.tsx

@@ -0,0 +1,50 @@
+import { Component, For, Match, Show, Switch } from "solid-js";
+import { Anchor } from "../../Anchor";
+import { FieldString } from "../typed/FieldString";
+import { CellValueHpo } from "../../../types/configCellComposed";
+
+type HpoTerm = {
+  id: string;
+  href: string;
+};
+
+export const FieldHpo: Component<{
+  value: CellValueHpo;
+}> = (props) => {
+  const hpoTerms = (): HpoTerm[] =>
+    props.value.hpos.map((category) => ({
+      id: category!.value!,
+      href: `https://hpo.jax.org/app/browse/term/${encodeURI(category!.value!)}`,
+    }));
+
+  const gadoPd = () => props.value.gadoPd || null;
+
+  return (
+    <>
+      <For each={hpoTerms()}>
+        {(hpoTerm, i) => (
+          <>
+            {i() !== 0 && <span>, </span>}
+            <Anchor href={hpoTerm.href}>
+              <FieldString value={hpoTerm.id} />
+            </Anchor>
+          </>
+        )}
+      </For>
+      <Show when={gadoPd()}>
+        {(gadoPd) => (
+          <abbr title={gadoPd().description} class="ml-1 is-clickable">
+            <Switch>
+              <Match when={gadoPd().value === "LC"}>
+                <i class="fas fa-question-circle has-text-info" />
+              </Match>
+              <Match when={gadoPd().value === "HC"}>
+                <i class="fas fa-info-circle has-text-info" />
+              </Match>
+            </Switch>
+          </abbr>
+        )}
+      </Show>
+    </>
+  );
+};