Merge pull request #395 from zhx828/bug-fix

Add mutation effect references

Author: zhx828

src/main/webapp/app/components/CitationTooltip.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import { observer } from 'mobx-react';
 import { remoteData } from 'cbioportal-frontend-commons';
 import request from 'superagent';
@@ -7,10 +7,11 @@ import { ArticleAbstract } from 'app/shared/api/generated/OncoKbAPI';
 import _ from 'lodash';
 import PmidItem from 'app/components/PmidItem';
 import ArticleAbstractItem from 'app/components/ArticleAbstractItem';
+import { TOOLTIP_MAX_HEIGHT } from 'app/config/constants';
 
 @observer
 export class CitationTooltip extends React.Component<
-  { pmids: string[]; abstracts: ArticleAbstract[] },
+  { pmids: string[]; abstracts: ArticleAbstract[]; style?: CSSProperties },
   {}
 > {
   readonly citationContent = remoteData<any>({
@@ -48,12 +49,17 @@ export class CitationTooltip extends React.Component<
   }
 
   render() {
+    const style = {
+      maxHeight: TOOLTIP_MAX_HEIGHT,
+      overflowY: 'scroll',
+      ...this.props.style
+    } as CSSProperties;
     return (
-      <>
+      <div>
         {this.citationContent.isPending ? (
           <LoadingIndicator isLoading={true} size={'small'} />
         ) : (
-          <div>
+          <div style={style}>
             {this.getPmidItems()}
             {this.props.abstracts.map(abstract => (
               <ArticleAbstractItem
@@ -64,7 +70,7 @@ export class CitationTooltip extends React.Component<
             ))}
           </div>
         )}
-      </>
+      </div>
     );
   }
 }

src/main/webapp/app/config/constants.tsx

@@ -162,6 +162,9 @@ export const IMG_MAX_WIDTH = 700;
 export const COMPONENT_PADDING = ['pl-2', 'pr-2', 'mb-2'];
 export const H5_FONT_SIZE = '1.25rem';
 
+// Defaults for tooltip size
+export const TOOLTIP_MAX_HEIGHT = 300;
+
 // Defaults for the models
 export const DEFAULT_ONCOKB_INFO: OncoKBInfo = {
   dataVersion: {

src/main/webapp/app/pages/alterationPage/AlterationPage.tsx

@@ -34,6 +34,7 @@ import classnames from 'classnames';
 import SmallPageContainer from 'app/components/SmallPageContainer';
 import InfoIcon from 'app/shared/icons/InfoIcon';
 import DocumentTitle from 'react-document-title';
+import { MutationEffectResp } from 'app/shared/api/generated/OncoKbPrivateAPI';
 
 enum SummaryKey {
   GENE_SUMMARY = 'geneSummary',
@@ -53,7 +54,7 @@ const SUMMARY_TITLE = {
 
 const AlterationInfo: React.FunctionComponent<{
   oncogenicity: string;
-  mutationEffect: string;
+  mutationEffect: MutationEffectResp;
   isVus: boolean;
   highestSensitiveLevel: string | undefined;
   highestResistanceLevel: string | undefined;
@@ -72,7 +73,21 @@ const AlterationInfo: React.FunctionComponent<{
     );
   }
   if (props.mutationEffect) {
-    content.push(<span key="mutationEffect">{props.mutationEffect}</span>);
+    content.push(
+      <span>
+        <span key="mutationEffect">{props.mutationEffect.knownEffect}</span>
+        <DefaultTooltip
+          overlay={() => (
+            <CitationTooltip
+              pmids={props.mutationEffect.citations.pmids}
+              abstracts={props.mutationEffect.citations.abstracts}
+            />
+          )}
+        >
+          <i className="fa fa-book mx-1" style={{ fontSize: '0.8em' }}></i>
+        </DefaultTooltip>
+      </span>
+    );
   }
   if (props.highestSensitiveLevel || props.highestResistanceLevel) {
     content.push(
@@ -226,6 +241,7 @@ export default class GenePage extends React.Component<
             props.original.citations.pmids.length;
           return (
             <DefaultTooltip
+              placement={'left'}
               overlay={() => (
                 <CitationTooltip
                   pmids={props.original.citations.pmids}
@@ -280,9 +296,7 @@ export default class GenePage extends React.Component<
           </h2>
           <AlterationInfo
             oncogenicity={this.store.annotationResult.result.oncogenic}
-            mutationEffect={
-              this.store.annotationResult.result.mutationEffect.knownEffect
-            }
+            mutationEffect={this.store.annotationResult.result.mutationEffect}
             isVus={this.store.annotationResult.result.vus}
             highestSensitiveLevel={
               this.store.annotationResult.result.highestSensitiveLevel

src/main/webapp/app/pages/genePage/GenePage.tsx

@@ -329,6 +329,7 @@ export default class GenePage extends React.Component<
             props.original.mutationEffectPmids.length;
           return (
             <DefaultTooltip
+              placement={'left'}
               overlay={() => (
                 <CitationTooltip
                   pmids={props.original.mutationEffectPmids}