Create OncoKB LevelIcon and OncogenicIcon to reuse

cBioPortal · Jul 6, 2022 · ae22c64 · ae22c64
1 parent 811d358
commit ae22c64
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/...r/src/component/oncokb/AnnotationIcon.tsx → .../component/oncokb/icon/AnnotationIcon.tsx b/...r/src/component/oncokb/AnnotationIcon.tsx → .../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/...omponent/oncokb/CompactAnnotationIcon.tsx → ...ent/oncokb/icon/CompactAnnotationIcon.tsx b/...omponent/oncokb/CompactAnnotationIcon.tsx → ...ent/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
@@ -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
@@ -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;