From 831551a4d732393c2c2cc87e4635aaef687acf7e Mon Sep 17 00:00:00 2001
From: Hongxin <jackson.zhang.828@gmail.com>
Date: Thu, 16 Jun 2022 14:10:43 -0500
Subject: [PATCH] Create OncoKB LevelIcon and OncogenicIcon to reuse

---
 .../src/component/oncokb/OncoKB.tsx           |  7 +++--
 .../src/component/oncokb/OncoKbCardBody.tsx   | 25 ++++++++++-----
 .../src/component/oncokb/OncoKbHelper.tsx     | 29 +++--------------
 .../component/oncokb/OncoKbSummaryTable.tsx   | 10 +++---
 .../oncokb/{ => icon}/AnnotationIcon.tsx      |  4 +--
 .../{ => icon}/CompactAnnotationIcon.tsx      |  5 ++-
 .../src/component/oncokb/icon/LevelIcon.tsx   | 31 +++++++++++++++++++
 .../component/oncokb/icon/OncogenicIcon.tsx   | 21 +++++++++++++
 8 files changed, 90 insertions(+), 42 deletions(-)
 rename packages/react-mutation-mapper/src/component/oncokb/{ => icon}/AnnotationIcon.tsx (95%)
 rename packages/react-mutation-mapper/src/component/oncokb/{ => icon}/CompactAnnotationIcon.tsx (98%)
 create mode 100644 packages/react-mutation-mapper/src/component/oncokb/icon/LevelIcon.tsx
 create mode 100644 packages/react-mutation-mapper/src/component/oncokb/icon/OncogenicIcon.tsx

diff --git a/packages/react-mutation-mapper/src/component/oncokb/OncoKB.tsx b/packages/react-mutation-mapper/src/component/oncokb/OncoKB.tsx
index 5a355ab5a2e..0d5193ce93a 100644
--- a/packages/react-mutation-mapper/src/component/oncokb/OncoKB.tsx
+++ b/packages/react-mutation-mapper/src/component/oncokb/OncoKB.tsx
@@ -13,8 +13,11 @@ import {
     calcSensitivityLevelScore,
 } from '../../util/OncoKbUtils';
 import { errorIcon, loaderIcon } from '../StatusHelpers';
-import { AnnotationIcon, AnnotationIconWithTooltip } from './AnnotationIcon';
-import { CompactAnnotationIcon } from './CompactAnnotationIcon';
+import {
+    AnnotationIcon,
+    AnnotationIconWithTooltip,
+} from './icon/AnnotationIcon';
+import { CompactAnnotationIcon } from './icon/CompactAnnotationIcon';
 import OncoKbTooltip from './OncoKbTooltip';
 import OncoKbFeedback from './OncoKbFeedback';
 
diff --git a/packages/react-mutation-mapper/src/component/oncokb/OncoKbCardBody.tsx b/packages/react-mutation-mapper/src/component/oncokb/OncoKbCardBody.tsx
index 0e7056a7bbf..c02f89acb6d 100644
--- a/packages/react-mutation-mapper/src/component/oncokb/OncoKbCardBody.tsx
+++ b/packages/react-mutation-mapper/src/component/oncokb/OncoKbCardBody.tsx
@@ -9,6 +9,7 @@ import { ICache } from '../../model/SimpleCache';
 import {
     annotationIconClassNames,
     calcHighestIndicatorLevel,
+    normalizeLevel,
 } from '../../util/OncoKbUtils';
 import OncoKbCardLevelsOfEvidenceDropdown from './OncoKbCardLevelsOfEvidenceDropdown';
 import OncoKBSuggestAnnotationLinkout from './OncoKBSuggestAnnotationLinkout';
@@ -19,6 +20,8 @@ import { ImplicationContent } from './oncokbCard/ImplicationContent';
 
 import tabsStyles from './tabs.module.scss';
 import mainStyles from './main.module.scss';
+import OncogenicIcon from './icon/OncogenicIcon';
+import LevelIcon from './icon/LevelIcon';
 
 const OncoKbMedicalDisclaimer = (
     <p className={mainStyles.disclaimer}>
@@ -76,13 +79,21 @@ const TabTitle: React.FunctionComponent<{
 }> = props => {
     const title = DATA_TYPE_TO_TITLE[props.type];
     const icon = props.displayHighestLevelInTabTitle ? (
-        <i
-            className={annotationIconClassNames(
-                props.type,
-                calcHighestIndicatorLevel(props.type, props.indicator),
-                props.indicator
-            )}
-        />
+        props.type === OncoKbCardDataType.BIOLOGICAL ? (
+            <OncogenicIcon
+                oncogenicity={props.indicator?.oncogenic || ''}
+                showDescription={true}
+            />
+        ) : (
+            <LevelIcon
+                level={
+                    normalizeLevel(
+                        calcHighestIndicatorLevel(props.type, props.indicator)
+                    ) || ''
+                }
+                showDescription={true}
+            />
+        )
     ) : null;
 
     return icon ? (
diff --git a/packages/react-mutation-mapper/src/component/oncokb/OncoKbHelper.tsx b/packages/react-mutation-mapper/src/component/oncokb/OncoKbHelper.tsx
index 0cd8a52e101..03ba7bce921 100644
--- a/packages/react-mutation-mapper/src/component/oncokb/OncoKbHelper.tsx
+++ b/packages/react-mutation-mapper/src/component/oncokb/OncoKbHelper.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
     normalizeLevel,
-    levelIconClassNames,
     mergeAlterations,
     getPositionalVariant,
 } from '../../util/OncoKbUtils';
@@ -13,6 +12,7 @@ import {
     LEVELS,
     OncoKbCardDataType,
 } from 'cbioportal-utils';
+import LevelIcon from './icon/LevelIcon';
 
 export default class OncoKbHelper {
     public static get TX_LEVELS(): string[] {
@@ -133,14 +133,6 @@ export default class OncoKbHelper {
         };
     }
 
-    public static levelTooltipContent = (level: string) => {
-        return (
-            <div style={{ maxWidth: '200px' }}>
-                {OncoKbHelper.LEVEL_DESC[level]}
-            </div>
-        );
-    };
-
     public static getDefaultColumnDefinition(
         columnKey: 'level' | 'alterations'
     ) {
@@ -160,21 +152,10 @@ export default class OncoKbHelper {
                         const normalizedLevel =
                             normalizeLevel(props.value) || '';
                         return (
-                            <DefaultTooltip
-                                overlay={this.levelTooltipContent(
-                                    normalizedLevel
-                                )}
-                                placement="left"
-                                trigger={['hover', 'focus']}
-                                destroyTooltipOnHide={true}
-                            >
-                                <i
-                                    className={levelIconClassNames(
-                                        normalizedLevel
-                                    )}
-                                    style={{ margin: 'auto' }}
-                                />
-                            </DefaultTooltip>
+                            <LevelIcon
+                                level={normalizedLevel}
+                                showDescription
+                            />
                         );
                     },
                 };
diff --git a/packages/react-mutation-mapper/src/component/oncokb/OncoKbSummaryTable.tsx b/packages/react-mutation-mapper/src/component/oncokb/OncoKbSummaryTable.tsx
index 55d97ea4af7..105ffe09f83 100644
--- a/packages/react-mutation-mapper/src/component/oncokb/OncoKbSummaryTable.tsx
+++ b/packages/react-mutation-mapper/src/component/oncokb/OncoKbSummaryTable.tsx
@@ -11,7 +11,7 @@ import {
     defaultSortMethod,
     defaultStringArraySortMethod,
 } from 'cbioportal-utils';
-import { levelIconClassNames } from '../../util/OncoKbUtils';
+import LevelIcon from './icon/LevelIcon';
 
 export type OncoKbSummaryTableProps = {
     usingPublicOncoKbInstance: boolean;
@@ -109,11 +109,9 @@ export default class OncoKbSummaryTable extends React.Component<
                                     textOverflow: 'ellipsis',
                                 }}
                             >
-                                <i
-                                    className={levelIconClassNames(level.level)}
-                                    style={{
-                                        verticalAlign: 'text-bottom',
-                                    }}
+                                <LevelIcon
+                                    level={level.level}
+                                    showDescription
                                 />
                                 <span
                                     style={{
diff --git a/packages/react-mutation-mapper/src/component/oncokb/AnnotationIcon.tsx b/packages/react-mutation-mapper/src/component/oncokb/icon/AnnotationIcon.tsx
similarity index 95%
rename from packages/react-mutation-mapper/src/component/oncokb/AnnotationIcon.tsx
rename to packages/react-mutation-mapper/src/component/oncokb/icon/AnnotationIcon.tsx
index 15112087da8..1c7bf6c8b69 100644
--- a/packages/react-mutation-mapper/src/component/oncokb/AnnotationIcon.tsx
+++ b/packages/react-mutation-mapper/src/component/oncokb/icon/AnnotationIcon.tsx
@@ -6,9 +6,9 @@ import { IndicatorQueryResp } from 'oncokb-ts-api-client';
 import {
     annotationIconClassNames,
     calcHighestIndicatorLevel,
-} from '../../util/OncoKbUtils';
+} from '../../../util/OncoKbUtils';
 
-import annotationStyles from '../column/annotation.module.scss';
+import annotationStyles from '../../column/annotation.module.scss';
 
 function hideArrow(tooltipEl: any) {
     const arrowEl = tooltipEl.querySelector('.rc-tooltip-arrow');
diff --git a/packages/react-mutation-mapper/src/component/oncokb/CompactAnnotationIcon.tsx b/packages/react-mutation-mapper/src/component/oncokb/icon/CompactAnnotationIcon.tsx
similarity index 98%
rename from packages/react-mutation-mapper/src/component/oncokb/CompactAnnotationIcon.tsx
rename to packages/react-mutation-mapper/src/component/oncokb/icon/CompactAnnotationIcon.tsx
index 3de660076c0..56a2bf03439 100644
--- a/packages/react-mutation-mapper/src/component/oncokb/CompactAnnotationIcon.tsx
+++ b/packages/react-mutation-mapper/src/component/oncokb/icon/CompactAnnotationIcon.tsx
@@ -2,7 +2,10 @@ import React from 'react';
 import { OncoKbCardDataType } from 'cbioportal-utils';
 import { IndicatorQueryResp } from 'oncokb-ts-api-client';
 
-import { normalizeLevel, normalizeOncogenicity } from '../../util/OncoKbUtils';
+import {
+    normalizeLevel,
+    normalizeOncogenicity,
+} from '../../../util/OncoKbUtils';
 
 const BIOLOGICAL_COLOR_MAP: { [level: string]: string } = {
     oncogenic: '#0968C3',
diff --git a/packages/react-mutation-mapper/src/component/oncokb/icon/LevelIcon.tsx b/packages/react-mutation-mapper/src/component/oncokb/icon/LevelIcon.tsx
new file mode 100644
index 00000000000..ce150b71e57
--- /dev/null
+++ b/packages/react-mutation-mapper/src/component/oncokb/icon/LevelIcon.tsx
@@ -0,0 +1,31 @@
+import { DefaultTooltip } from 'cbioportal-frontend-commons';
+import * as React from 'react';
+import { levelIconClassNames } from '../../../util/OncoKbUtils';
+import OncoKbHelper from '../OncoKbHelper';
+
+const levelTooltipContent = (level: string) => {
+    return (
+        <div style={{ maxWidth: '200px' }}>
+            {OncoKbHelper.LEVEL_DESC[level]}
+        </div>
+    );
+};
+
+const LevelIcon: React.FunctionComponent<{
+    level: string;
+    showDescription?: boolean;
+}> = props => {
+    return (
+        <DefaultTooltip
+            overlay={levelTooltipContent(props.level)}
+            placement="left"
+            disabled={!props.showDescription}
+            trigger={['hover', 'focus']}
+            destroyTooltipOnHide={true}
+        >
+            <i className={levelIconClassNames(props.level)} />
+        </DefaultTooltip>
+    );
+};
+
+export default LevelIcon;
diff --git a/packages/react-mutation-mapper/src/component/oncokb/icon/OncogenicIcon.tsx b/packages/react-mutation-mapper/src/component/oncokb/icon/OncogenicIcon.tsx
new file mode 100644
index 00000000000..af6f664286e
--- /dev/null
+++ b/packages/react-mutation-mapper/src/component/oncokb/icon/OncogenicIcon.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DefaultTooltip } from 'cbioportal-frontend-commons';
+import { oncogenicityIconClassNames } from '../../../util/OncoKbUtils';
+
+const OncogenicIcon: React.FunctionComponent<{
+    oncogenicity: string;
+    showDescription?: boolean;
+}> = props => {
+    return (
+        <DefaultTooltip
+            overlay={<span>{props.oncogenicity}</span>}
+            placement="left"
+            trigger={['hover', 'focus']}
+            destroyTooltipOnHide={true}
+        >
+            <i className={oncogenicityIconClassNames(props.oncogenicity)} />
+        </DefaultTooltip>
+    );
+};
+
+export default OncogenicIcon;