Add alphaMissense in functional impact column (#5042)

* Add alphaMissense in functional impact column * Refactor functional impact column * Update alpha missense desciption in tooltip
cBioPortal · Nov 18, 2024 · 17526f2 · 17526f2
1 parent f968f82
commit 17526f2
Show file tree

Hide file tree

Showing 9 changed files with 483 additions and 532 deletions.
diff --git a/src/shared/components/annotation/genomeNexus/AlphaMissense.tsx b/src/shared/components/annotation/genomeNexus/AlphaMissense.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { DefaultTooltip } from 'cbioportal-frontend-commons';
+import annotationStyles from './../styles/annotation.module.scss';
+import classNames from 'classnames';
+import tooltipStyles from './styles/alphaMissenseTooltip.module.scss';
+
+export interface IAlphaMissenseProps {
+    alphaMissensePrediction: string | undefined; // benign, pathogenic, ambiguous
+    alphaMissenseScore: number | undefined;
+}
+
+export function hideArrow(tooltipEl: any) {
+    const arrowEl = tooltipEl.querySelector('.rc-tooltip-arrow');
+    arrowEl.style.display = 'none';
+}
+
+export const AlphaMissenseUrl: string = 'https://alphamissense.hegelab.org/';
+
+export const AlphaMissense: React.FC<IAlphaMissenseProps> = ({
+    alphaMissensePrediction,
+    alphaMissenseScore,
+}) => {
+    const tooltipContent = () => {
+        const impact = alphaMissensePrediction ? (
+            <div>
+                <table className={tooltipStyles['alphaMissense-tooltip-table']}>
+                    <tr>
+                        <td>Source</td>
+                        <td>
+                            <a href={AlphaMissenseUrl}>AlphaMissense</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Impact</td>
+                        <td>
+                            <span
+                                className={
+                                    (tooltipStyles as any)[
+                                        `alphaMissense-${alphaMissensePrediction}`
+                                    ]
+                                }
+                            >
+                                {alphaMissensePrediction}
+                            </span>
+                        </td>
+                    </tr>
+                    {(alphaMissenseScore || alphaMissenseScore === 0) && (
+                        <tr>
+                            <td>Score</td>
+                            <td>
+                                <b>{alphaMissenseScore.toFixed(2)}</b>
+                            </td>
+                        </tr>
+                    )}
+                </table>
+            </div>
+        ) : null;
+
+        return <span>{impact}</span>;
+    };
+
+    let content: JSX.Element = (
+        <span className={`${annotationStyles['annotation-item-text']}`} />
+    );
+
+    if (alphaMissensePrediction && alphaMissensePrediction.length > 0) {
+        content = (
+            <span
+                className={classNames(
+                    annotationStyles['annotation-item-text'],
+                    (tooltipStyles as any)[
+                        `alphaMissense-${alphaMissensePrediction}`
+                    ]
+                )}
+            >
+                <i className="fa fa-circle" aria-hidden="true"></i>
+            </span>
+        );
+        const arrowContent = <div className="rc-tooltip-arrow-inner" />;
+        content = (
+            <DefaultTooltip
+                overlay={tooltipContent}
+                placement="right"
+                trigger={['hover', 'focus']}
+                arrowContent={arrowContent}
+                onPopupAlign={hideArrow}
+                destroyTooltipOnHide={false}
+            >
+                {content}
+            </DefaultTooltip>
+        );
+    }
+
+    return content;
+};
diff --git a/src/shared/components/annotation/genomeNexus/MutationAssessor.tsx b/src/shared/components/annotation/genomeNexus/MutationAssessor.tsx
@@ -28,16 +28,6 @@ export default class MutationAssessor extends React.Component<
         this.tooltipContent = this.tooltipContent.bind(this);
     }
 
-    public static download(
-        mutationAssessorData: MutationAssessorData | undefined
-    ): string {
-        if (mutationAssessorData) {
-            return `impact: ${mutationAssessorData.functionalImpactPrediction}, score: ${mutationAssessorData.functionalImpactScore}`;
-        } else {
-            return 'NA';
-        }
-    }
-
     public render() {
         let maContent: JSX.Element = (
             <span className={`${annotationStyles['annotation-item-text']}`} />

diff --git a/src/shared/components/annotation/genomeNexus/PolyPhen2.tsx b/src/shared/components/annotation/genomeNexus/PolyPhen2.tsx
@@ -22,17 +22,6 @@ export default class PolyPhen2 extends React.Component<IPolyPhen2Props, {}> {
         this.tooltipContent = this.tooltipContent.bind(this);
     }
 
-    public static download(
-        polyPhenScore: number | undefined,
-        polyPhenPrediction: string | undefined
-    ): string {
-        if (polyPhenScore || polyPhenPrediction) {
-            return `impact: ${polyPhenPrediction}, score: ${polyPhenScore}`;
-        } else {
-            return 'NA';
-        }
-    }
-
     public render() {
         let content: JSX.Element = (
             <span className={`${annotationStyles['annotation-item-text']}`} />

diff --git a/src/shared/components/annotation/genomeNexus/Sift.tsx b/src/shared/components/annotation/genomeNexus/Sift.tsx
@@ -22,17 +22,6 @@ export default class Sift extends React.Component<ISiftProps, {}> {
         this.tooltipContent = this.tooltipContent.bind(this);
     }
 
-    public static download(
-        siftScore: number | undefined,
-        siftPrediction: string | undefined
-    ): string {
-        if (siftScore || siftPrediction) {
-            return `impact: ${siftPrediction}, score: ${siftScore}`;
-        } else {
-            return 'NA';
-        }
-    }
-
     public render() {
         let siftContent: JSX.Element = (
             <span className={`${annotationStyles['annotation-item-text']}`} />

diff --git a/src/shared/components/annotation/genomeNexus/styles/alphaMissenseTooltip.module.scss b/src/shared/components/annotation/genomeNexus/styles/alphaMissenseTooltip.module.scss
@@ -0,0 +1,22 @@
+@import 'functionalImpact';
+
+.alphaMissense-pathogenic {
+    color: $high;
+    font-weight: bold;
+}
+.alphaMissense-ambiguous {
+    color: $low;
+    font-weight: bold;
+}
+.alphaMissense-benign {
+    color: $neutral;
+    font-weight: bold;
+}
+.alphaMissense-unknown {
+    display: none;
+}
+.alphaMissense-tooltip-table {
+    td:first-child {
+        padding-right: 5px;
+    }
+}
diff --git a/src/shared/components/annotation/genomeNexus/styles/alphaMissenseTooltip.module.scss.d.ts b/src/shared/components/annotation/genomeNexus/styles/alphaMissenseTooltip.module.scss.d.ts
@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "alphaMissense-ambiguous": string;
+  readonly "alphaMissense-benign": string;
+  readonly "alphaMissense-pathogenic": string;
+  readonly "alphaMissense-tooltip-table": string;
+  readonly "alphaMissense-unknown": string;
+};
+export = styles;
+
diff --git a/src/shared/components/mutationTable/MutationTable.tsx b/src/shared/components/mutationTable/MutationTable.tsx
@@ -899,13 +899,9 @@ export default class MutationTable<
         this._columns[MutationTableColumnType.FUNCTIONAL_IMPACT] = {
             name: MutationTableColumnType.FUNCTIONAL_IMPACT,
             render: (d: Mutation[]) => {
-                if (
-                    this.props.genomeNexusCache ||
-                    this.props.genomeNexusMutationAssessorCache
-                ) {
+                if (this.props.genomeNexusMutationAssessorCache) {
                     return FunctionalImpactColumnFormatter.renderFunction(
                         d,
-                        this.props.genomeNexusCache,
                         this.props.genomeNexusMutationAssessorCache,
                         this.props.selectedTranscriptId
                     );
@@ -916,7 +912,6 @@ export default class MutationTable<
             download: (d: Mutation[]) =>
                 FunctionalImpactColumnFormatter.download(
                     d,
-                    this.props.genomeNexusCache as GenomeNexusCache,
                     this.props
                         .genomeNexusMutationAssessorCache as GenomeNexusMutationAssessorCache,
                     this.props.selectedTranscriptId