From a77f5b6a77b15f74ffd9423d90ddd5fe27a0f243 Mon Sep 17 00:00:00 2001
From: Luke Sikina <lucas@ds.dfci.harvard.edu>
Date: Thu, 5 Dec 2019 14:57:46 -0500
Subject: [PATCH] Oncoprint Toolbar Improvements - added a count bubble for
 Clinical Tracks and Heatmaps

---
 .../resultsView/oncoprint/AddClinicalTracks.tsx      |  5 ++++-
 .../resultsView/oncoprint/OncoprintDropdownCount.tsx | 12 ++++++++++++
 src/pages/resultsView/styles.scss                    |  7 +++++++
 .../components/oncoprint/controls/CustomDropdown.tsx |  4 ++--
 .../oncoprint/controls/OncoprintControls.tsx         |  8 ++++++++
 5 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/resultsView/oncoprint/OncoprintDropdownCount.tsx

diff --git a/src/pages/resultsView/oncoprint/AddClinicalTracks.tsx b/src/pages/resultsView/oncoprint/AddClinicalTracks.tsx
index 16cd758a93d..85c31e774b8 100644
--- 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}/>
+                    <span className="caret"/>&nbsp;
                 </button>
             </DefaultTooltip>
         );
diff --git a/src/pages/resultsView/oncoprint/OncoprintDropdownCount.tsx b/src/pages/resultsView/oncoprint/OncoprintDropdownCount.tsx
new file mode 100644
index 00000000000..5333cedb015
--- /dev/null
+++ 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 <span/>
+        }
+        return <span className="oncoprintDropdownCount">{this.props.count}</span>
+    }
+}
\ No newline at end of file
diff --git a/src/pages/resultsView/styles.scss b/src/pages/resultsView/styles.scss
index a4041df7c7f..aafa2690b65 100644
--- 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
index 137e549c338..39dadf9027b 100644
--- 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
index 0c4a3716639..3a9f831c878 100644
--- 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;
@@ -706,6 +707,13 @@ export default class OncoprintControls extends React.Component<
                 title="Heatmap"
                 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>