Oncoprint Toolbar Improvements

- added a count bubble for Clinical Tracks and Heatmaps
cBioPortal · Dec 6, 2019 · f54219e · f54219e
1 parent 848ee7c
commit f54219e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/src/pages/resultsView/oncoprint/AddClinicalTracks.tsx b/src/pages/resultsView/oncoprint/AddClinicalTracks.tsx
@@ -19,6 +19,7 @@ import * as _ from "lodash";
 import {MakeMobxView} from "../../../shared/components/MobxView";
 import LoadingIndicator from "../../../shared/components/loadingIndicator/LoadingIndicator";
 import {toggleIncluded} from "../../../shared/lib/ArrayUtils";
+import OncoprintDropdownCount from "./OncoprintDropdownCount";
 
 export interface IAddClinicalTrackProps {
     store:ResultsViewPageStore;
@@ -222,7 +223,9 @@ export default class AddClinicalTracks extends React.Component<IAddClinicalTrack
                         data-event={serializeEvent({ category:"resultsView", action:"addClinicalTrackMenuOpen", label:this.props.store.studyIds.result!.join(",")})}
                         data-test="add-clinical-track-button"
                 >
-                    Add Clinical Tracks <span className="caret"/>&nbsp;
+                    Add Clinical Tracks{" "}
+                    <OncoprintDropdownCount count={this.options.isComplete ? this.options.result!.clinical.length : undefined}/>
+                    &nbsp;<span className="caret"/>&nbsp;
                 </button>
             </DefaultTooltip>
         );

diff --git a/src/pages/resultsView/oncoprint/OncoprintDropdownCount.tsx b/src/pages/resultsView/oncoprint/OncoprintDropdownCount.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import {observer} from "mobx-react";
+
+@observer
+export default class OncoprintDropdownCount extends React.Component<{count: number | undefined}, {}> {
+    render() {
+        if (this.props.count === undefined) {
+            return null;
+        }
+        return <span className="oncoprintDropdownCount">{this.props.count}</span>;
+    }
+}
diff --git a/src/pages/resultsView/styles.scss b/src/pages/resultsView/styles.scss
@@ -57,6 +57,13 @@
     }
 }
 
+.oncoprintDropdownCount {
+    font-size: 11px;
+    background: #ddd;
+    border-radius: 40px;
+    padding: 2px 6px;
+}
+
 .oncoprintContainer {
     border: none !important;
     padding: 0 !important;

diff --git a/src/shared/components/oncoprint/controls/CustomDropdown.tsx b/src/shared/components/oncoprint/controls/CustomDropdown.tsx
@@ -15,7 +15,7 @@ class CustomButton extends React.Component<any,{}> { // cant type this more spec
         const {bsRole, title, ...props} = this.props;
         return (
             <Button className="btn btn-default" {...props}>
-                {title} <span className="caret"/>
+                {title} {this.props.titleElement} <span className="caret"/>
             </Button>
         );
     }
@@ -34,7 +34,7 @@ class CustomMenu extends React.Component<any,{}> {
 }
 
 @observer
-export default class CustomDropdown extends React.Component<ButtonProps, {}> {
+export default class CustomDropdown extends React.Component<ButtonProps & {titleElement?: JSX.Element}, {}> {
     @observable private open:boolean = false;
 
     private toggle:()=>void;

diff --git a/src/shared/components/oncoprint/controls/OncoprintControls.tsx b/src/shared/components/oncoprint/controls/OncoprintControls.tsx
@@ -29,6 +29,7 @@ import TextIconArea, {ITextIconAreaItemProps,} from 'shared/components/textIconA
 import {extractTreatmentSelections} from '../OncoprintUtils';
 import CheckedSelect from 'public-lib/components/checkedSelect/CheckedSelect';
 import DriverAnnotationControls, {IDriverAnnotationControlsHandlers} from "../../../../pages/resultsView/settings/DriverAnnotationControls";
+import OncoprintDropdownCount from 'pages/resultsView/oncoprint/OncoprintDropdownCount';
 
 export interface IOncoprintControlsHandlers {
     onSelectColumnType?: (type: 'sample' | 'patient') => void;
@@ -703,9 +704,16 @@ export default class OncoprintControls extends React.Component<
         return (
             <CustomDropdown
                 bsStyle="default"
-                title="Heatmap"
+                title="Add Heatmap Tracks"
                 id="heatmapDropdown"
                 className="heatmap"
+                titleElement={<OncoprintDropdownCount
+                    count={
+                        this.props.state.heatmapProfilesPromise.isComplete && this.props.state.heatmapProfilesPromise!.result ?
+                            this.props.state.heatmapProfilesPromise!.result!.length :
+                            undefined
+                    }
+                />}
             >
                 {menu}
             </CustomDropdown>