properly adjust oncokb content within annotation column (fix cBioPort…

…al/cbioportal#9141)
cBioPortal · Jan 12, 2022 · e2a538e · e2a538e
1 parent 41d0a5a
commit e2a538e
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 15 deletions.
diff --git a/packages/react-mutation-mapper/src/component/column/Annotation.tsx b/packages/react-mutation-mapper/src/component/column/Annotation.tsx
@@ -45,6 +45,7 @@ export type AnnotationProps = {
     oncoKbCancerGenes?: RemoteData<CancerGene[] | Error | undefined>;
     usingPublicOncoKbInstance: boolean;
     mergeOncoKbIcons?: boolean;
+    oncoKbContentPadding?: number;
     pubMedCache?: MobxCache;
     resolveEntrezGeneId?: (mutation: Mutation) => number;
     resolveTumorType?: (mutation: Mutation) => string;
@@ -61,6 +62,7 @@ export type GenericAnnotationProps = {
     enableMyCancerGenome: boolean;
     enableOncoKb: boolean;
     mergeOncoKbIcons?: boolean;
+    oncoKbContentPadding?: number;
     pubMedCache?: MobxCache;
     userEmailAddress?: string;
 };
@@ -303,6 +305,7 @@ export function GenericAnnotation(props: GenericAnnotationProps): JSX.Element {
         pubMedCache,
         userEmailAddress,
         mergeOncoKbIcons,
+        oncoKbContentPadding,
     } = props;
 
     return (
@@ -321,6 +324,7 @@ export function GenericAnnotation(props: GenericAnnotationProps): JSX.Element {
                     mergeAnnotationIcons={mergeOncoKbIcons}
                     pubMedCache={pubMedCache}
                     userEmailAddress={userEmailAddress}
+                    contentPadding={oncoKbContentPadding}
                 />
             )}
             {enableCivic && (

diff --git a/packages/react-mutation-mapper/src/component/oncokb/OncoKB.tsx b/packages/react-mutation-mapper/src/component/oncokb/OncoKB.tsx
@@ -33,6 +33,7 @@ export interface IOncoKbProps {
     hugoGeneSymbol: string;
     userEmailAddress?: string;
     disableFeedback?: boolean;
+    contentPadding?: number;
 }
 
 export function sortValue(
@@ -112,10 +113,11 @@ function findDefaultDataTypeForTooltip(
 
 @observer
 export default class OncoKB extends React.Component<IOncoKbProps, {}> {
-    constructor(props: any) {
+    constructor(props: IOncoKbProps) {
         super(props);
         makeObservable(this);
     }
+
     @observable showFeedback: boolean = false;
     @observable tooltipDataLoadComplete: boolean = false;
 
@@ -194,18 +196,11 @@ export default class OncoKB extends React.Component<IOncoKbProps, {}> {
                 </>
             );
         } else {
-            // TODO This doesn't always work, in some cases it adds unnecessary empty icons, we need a better solution.
-            // we still need to draw empty icons even if there is no indicator data.
-            // this is to keep the icon alignment consistent with the rest of the column
-            // return (
-            //     <>
-            //         {this.props.availableDataTypes?.map(() => (
-            //             <AnnotationIconWithTooltip icon={<i />} />
-            //         ))}
-            //     </>
-            // );
-
-            return null;
+            // workaround: use content padding value to draw an empty icon when there is no indicator data.
+            // this is to keep the icon alignment consistent with the rest of the column.
+            // ideally we should implement grouped columns to avoid these kind of workarounds
+            // (see https://github.com/cBioPortal/cbioportal/issues/8723)
+            return <i style={{ paddingRight: this.props.contentPadding }} />;
         }
     }
 

diff --git a/src/pages/patientView/copyNumberAlterations/CopyNumberTableWrapper.tsx b/src/pages/patientView/copyNumberAlterations/CopyNumberTableWrapper.tsx
@@ -32,6 +32,7 @@ import {
 } from 'cbioportal-utils';
 import { CancerGene } from 'oncokb-ts-api-client';
 import {
+    calculateOncoKbContentPadding,
     calculateOncoKbContentWidthOnNextFrame,
     calculateOncoKbContentWidthWithInterval,
     DEFAULT_ONCOKB_CONTENT_WIDTH,
@@ -251,6 +252,9 @@ export default class CopyNumberTableWrapper extends React.Component<
                         usingPublicOncoKbInstance: this.props
                             .usingPublicOncoKbInstance,
                         mergeOncoKbIcons: this.mergeOncoKbIcons,
+                        oncoKbContentPadding: calculateOncoKbContentPadding(
+                            this.oncokbWidth
+                        ),
                         enableOncoKb: this.props.enableOncoKb as boolean,
                         pubMedCache: this.props.pubMedCache,
                         civicGenes: this.props.cnaCivicGenes,

diff --git a/src/pages/patientView/structuralVariant/PatientViewStructuralVariantTable.tsx b/src/pages/patientView/structuralVariant/PatientViewStructuralVariantTable.tsx
@@ -20,6 +20,7 @@ import { ServerConfigHelpers } from 'config/config';
 import ChromosomeColumnFormatter from 'shared/components/mutationTable/column/ChromosomeColumnFormatter';
 import { remoteData } from 'cbioportal-frontend-commons';
 import {
+    calculateOncoKbContentPadding,
     calculateOncoKbContentWidthOnNextFrame,
     calculateOncoKbContentWidthWithInterval,
     DEFAULT_ONCOKB_CONTENT_WIDTH,
@@ -244,6 +245,9 @@ export default class PatientViewStructuralVariantTable extends React.Component<
                             usingPublicOncoKbInstance: this.props.store
                                 .usingPublicOncoKbInstance,
                             mergeOncoKbIcons: this.mergeOncoKbIcons,
+                            oncoKbContentPadding: calculateOncoKbContentPadding(
+                                this.oncokbWidth
+                            ),
                             enableOncoKb: getServerConfig()
                                 .show_oncokb as boolean,
                             pubMedCache: this.props.store.pubMedCache,

diff --git a/src/shared/components/mutationTable/MutationTable.tsx b/src/shared/components/mutationTable/MutationTable.tsx
@@ -147,6 +147,7 @@ export interface IMutationTableProps {
 import MobxPromise from 'mobxpromise';
 import { getServerConfig } from 'config/config';
 import {
+    calculateOncoKbContentPadding,
     calculateOncoKbContentWidthOnNextFrame,
     calculateOncoKbContentWidthWithInterval,
     DEFAULT_ONCOKB_CONTENT_WIDTH,
@@ -866,6 +867,9 @@ export default class MutationTable<
                         usingPublicOncoKbInstance: this.props
                             .usingPublicOncoKbInstance,
                         mergeOncoKbIcons: this.props.mergeOncoKbIcons,
+                        oncoKbContentPadding: calculateOncoKbContentPadding(
+                            this.oncokbWidth
+                        ),
                         pubMedCache: this.props.pubMedCache,
                         civicGenes: this.props.civicGenes,
                         civicVariants: this.props.civicVariants,

diff --git a/src/shared/components/mutationTable/column/annotation/AnnotationHeader.tsx b/src/shared/components/mutationTable/column/annotation/AnnotationHeader.tsx
@@ -10,6 +10,7 @@ import {
 } from 'react-mutation-mapper';
 import classnames from 'classnames';
 import { getServerConfig } from 'config/config';
+import { calculateOncoKbContentPadding } from 'shared/lib/AnnotationColumnUtils';
 
 // oncokb
 enum OncokbTabs {
@@ -392,8 +393,9 @@ const AnnotationHeader: React.FunctionComponent<{
                             width: 16,
                             marginLeft: 5,
                             marginBottom: 0,
-                            marginRight:
-                                props.width - 21 > 0 ? props.width - 21 : 0,
+                            marginRight: calculateOncoKbContentPadding(
+                                props.width
+                            ),
                         }}
                     />
                 </DefaultTooltip>

diff --git a/src/shared/lib/AnnotationColumnUtils.ts b/src/shared/lib/AnnotationColumnUtils.ts
@@ -49,6 +49,10 @@ export function calculateOncoKbContentWidthWithInterval(
     return interval;
 }
 
+export function calculateOncoKbContentPadding(oncoKbContentWidth?: number) {
+    return oncoKbContentWidth || 0 > 22 ? oncoKbContentWidth! - 22 : 0;
+}
+
 export function updateOncoKbIconStyle(style: { mergeIcons: boolean }) {
     getBrowserWindow().localStorage.setItem(
         'mergeOncoKbIcons',