Merge pull request #203 from molgenis/feat/gene-low-penetrance

Gene rendering: better hyperlink, low-penetrance indicator
molgenis · Jul 1, 2022 · 6cc8dd8 · 6cc8dd8
2 parents 6c64b2f + 6f0da32
commit 6cc8dd8
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 13 deletions.
diff --git a/src/components/record/info/ClinVar.tsx b/src/components/record/info/ClinVar.tsx
@@ -1,8 +1,8 @@
 import { Component, Show } from "solid-js";
 import { FieldProps } from "../field/Field";
-import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
 import { Anchor } from "../../Anchor";
 import { Abbr } from "../../Abbr";
+import { getCsqInfo, getCsqInfoIndex } from "../../../utils/csqUtils";
 
 export const ClinVar: Component<FieldProps> = (props) => {
   const label = () => {
@@ -32,14 +32,14 @@ export const ClinVar: Component<FieldProps> = (props) => {
   };
 
   const href = () => {
-    const clinVarIdsField = props.infoMeta.parent?.nested?.items.findIndex((item) => item.id === "clinVar");
-    const clinVarIds = clinVarIdsField ? ((props.info.valueParent as Value[])[clinVarIdsField] as number[]) : [];
+    const clinVarIdsField = getCsqInfoIndex(props.infoMeta, "clinVar");
+    const clinVarIds = clinVarIdsField ? (getCsqInfo(props.info, clinVarIdsField) as number[]) : [];
     return clinVarIds.length === 1 ? `https://www.ncbi.nlm.nih.gov/clinvar/variation/${clinVarIds[0]}/` : undefined;
   };
 
   const description = () => {
-    const statusField = props.infoMeta.parent?.nested?.items.findIndex((item) => item.id === "clinVar_CLNREVSTAT");
-    const status = statusField ? ((props.info.valueParent as Value[])[statusField] as string[]) : [];
+    const statusField = getCsqInfoIndex(props.infoMeta, "clinVar_CLNREVSTAT");
+    const status = statusField ? (getCsqInfo(props.info, statusField) as string[]) : [];
     if (status.length === 0) return;
 
     let description;

diff --git a/src/components/record/info/Gene.tsx b/src/components/record/info/Gene.tsx
@@ -1,17 +1,55 @@
-import { Component, Show } from "solid-js";
+import { Component, createMemo, Show } from "solid-js";
 import { Anchor } from "../../Anchor";
 import { FieldProps } from "../field/Field";
-import { ValueString } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { ValueFlag, ValueString } from "@molgenis/vip-report-vcf/src/ValueParser";
+import { getCsqInfo, getCsqInfoIndex } from "../../../utils/csqUtils";
+import { Abbr } from "../../Abbr";
 
 export const Gene: Component<FieldProps> = (props) => {
-  const symbol = () => props.info.value as ValueString;
-  // TODO use gene source and gene id to build hyperlinks, e.g. https://www.genenames.org/data/gene-symbol-report/#!/hgnc_id/HGNC:24086
+  const symbol = (): ValueString => props.info.value as ValueString;
+
+  const symbolSource = createMemo((): ValueString | undefined => {
+    if (symbol() === null) return undefined;
+
+    const symbolSourceFieldIndex = getCsqInfoIndex(props.infoMeta, "SYMBOL_SOURCE");
+    return symbolSourceFieldIndex !== -1 ? (getCsqInfo(props.info, symbolSourceFieldIndex) as ValueString) : undefined;
+  });
+
+  const geneId = createMemo((): ValueString | undefined => {
+    if (symbol() === null) return undefined;
+
+    const geneFieldIndex = getCsqInfoIndex(props.infoMeta, "Gene");
+    return geneFieldIndex !== -1 ? (getCsqInfo(props.info, geneFieldIndex) as ValueString) : undefined;
+  });
+
+  const href = (): string | undefined => {
+    if (symbol() === null) return undefined;
+
+    const queryString =
+      symbolSource() === "EntrezGene" && geneId()
+        ? `query=ncbi_gene_id:${geneId()!}`
+        : `query=${encodeURIComponent(symbol()!)}&filter=document_type:%22gene%22`;
+    return `https://www.genenames.org/tools/search/#!/?${queryString}`;
+  };
+
+  const incompletePenetrance = (): ValueFlag | undefined => {
+    const ipFieldIndex = getCsqInfoIndex(props.infoMeta, "IncompletePenetrance");
+    return ipFieldIndex !== -1 ? (getCsqInfo(props.info, ipFieldIndex) as ValueFlag) : undefined;
+  };
+
   return (
     <Show when={symbol()}>
       {(symbol) => (
-        <Anchor href={`https://www.genenames.org/tools/search/#!/?query=${symbol}&filter=document_type:%22gene%22`}>
-          <span>{symbol}</span>
-        </Anchor>
+        <>
+          <Anchor href={href()}>
+            <span>{symbol}</span>
+          </Anchor>
+          {incompletePenetrance() && (
+            <sup class="ml-1">
+              <Abbr title="gene is known for incomplete penetrance" value="IP" />
+            </sup>
+          )}
+        </>
       )}
     </Show>
   );

diff --git a/src/utils/csqUtils.ts b/src/utils/csqUtils.ts
@@ -1,4 +1,6 @@
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { FieldValue } from "../components/record/field/Field";
+import { Value } from "@molgenis/vip-report-vcf/src/ValueParser";
 
 function is(infoMeta: FieldMetadata, id: string) {
   return infoMeta.id === id;
@@ -15,3 +17,11 @@ export function isCsqInfo(infoMeta: FieldMetadata, id: string) {
 export function isAnyCsqInfo(infoMeta: FieldMetadata, ids: string[]) {
   return isCsq(infoMeta) && ids.some((id) => is(infoMeta, id));
 }
+
+export function getCsqInfoIndex(infoMeta: FieldMetadata, id: string): number {
+  return infoMeta.parent?.nested?.items.findIndex((item) => item.id === id) || -1;
+}
+
+export function getCsqInfo(info: FieldValue, infoIndex: number): Value {
+  return (info.valueParent as Value[])[infoIndex];
+}
diff --git a/src/views/SampleVariants.tsx b/src/views/SampleVariants.tsx
@@ -122,7 +122,6 @@ export const SampleVariants: Component<{
       "Consequence",
       "SYMBOL",
       "InheritanceModesGene",
-      "IncompletePenetrance",
       "HPO",
       "HGVSc",
       "HGVSp",