moved filter panel back into MutationMapper component (fix cBioPortal…

…/cbioportal#5255) Signed-off-by: Onur Sumer <[email protected]>
onursumer · Nov 15, 2018 · b784de1 · b784de1
1 parent 42f56fe
commit b784de1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 31 deletions.
diff --git a/src/pages/resultsView/mutation/Mutations.tsx b/src/pages/resultsView/mutation/Mutations.tsx
@@ -52,12 +52,7 @@ export default class Mutations extends React.Component<IMutationsPageProps, {}>
                         isUnaffected={!this.props.store.queryContainsMutationOql}
                         onToggle={this.onToggleOql}
                     />
-                    {this.props.store.mutationMapperStores.isComplete && ! this.props.store.mutationMapperStores.result[this.mutationsGeneTab].dataStore.showingAllData &&
-                        this.bannerAlert()
-                    }
                 </div>
-
-
 
                 {(this.props.store.mutationMapperStores.isComplete) && (
                     <MSKTabs
@@ -112,26 +107,6 @@ export default class Mutations extends React.Component<IMutationsPageProps, {}>
 
         return tabs;
     }
-
-    protected bannerAlert(): JSX.Element|null
-    {
-        let dataStore = this.props.store.mutationMapperStores.result[this.mutationsGeneTab].dataStore;
-
-        return (
-            <div className={classnames("alert" , "alert-success")}>
-                <span style={{verticalAlign:"middle"}}>
-                    {`${dataStore.sortedFilteredData.length}/${dataStore.allData.length} `}
-                    {"mutations are shown based on your filtering."}
-                    <button className="btn btn-default btn-xs" 
-                            style={{cursor:"pointer", marginLeft:6}} 
-                            onClick={()=>{dataStore.resetFilterAndSelection();}}
-                    >
-                        Show all mutations
-                    </button>
-                </span>
-            </div>
-        );
-    }
 
     protected handleTabChange(id: string) {
         // update the hash if routing exits

diff --git a/src/shared/components/mutationMapper/MutationMapper.tsx b/src/shared/components/mutationMapper/MutationMapper.tsx
@@ -4,6 +4,7 @@ import _ from 'lodash';
 import autobind from "autobind-decorator";
 import {observer, Observer} from "mobx-react";
 import {computed, action, observable} from "mobx";
+import classnames from "classnames";
 // tslint:disable-next-line:no-import-side-effect
 import 'react-select/dist/react-select.css';
 import './styles.scss';
@@ -21,7 +22,6 @@ import ProteinImpactTypePanel from "shared/components/mutationTypePanel/ProteinI
 import ProteinChainPanel from "shared/components/proteinChainPanel/ProteinChainPanel";
 
 import MutationMapperStore from "./MutationMapperStore";
-import { DropdownButton, MenuItem } from 'react-bootstrap';
 import { EnsemblTranscript } from 'shared/api/generated/GenomeNexusAPI';
 import Mutations from 'pages/resultsView/mutation/Mutations';
 import {IServerConfig} from "../../../config/IAppConfig";
@@ -347,12 +347,19 @@ export default class MutationMapper<P extends IMutationMapperProps> extends Reac
 
     protected filterResetPanel(): JSX.Element|null
     {
+        const dataStore = this.props.store.dataStore;
+
         return (
-            <div style={{marginTop:"5px", marginBottom:"5px"}}>
-                <span style={{color:"red", fontSize:"14px", fontFamily:"verdana,arial,sans-serif"}}>
-                    <span>Current view shows filtered results. Click </span>
-                    <a style={{cursor:"pointer"}} onClick={this.handlers.resetDataStore}>here</a>
-                    <span> to reset all filters.</span>
+            <div className={classnames("alert" , "alert-success")}>
+                <span style={{verticalAlign:"middle"}}>
+                    {`${dataStore.sortedFilteredData.length}/${dataStore.allData.length} mutations are shown based on your filtering.`}
+                    <button
+                        className="btn btn-default btn-xs"
+                        style={{cursor:"pointer", marginLeft:6}}
+                        onClick={() => dataStore.resetFilterAndSelection()}
+                    >
+                        Show all mutations
+                    </button>
                 </span>
             </div>
         );
@@ -396,6 +403,9 @@ export default class MutationMapper<P extends IMutationMapperProps> extends Reac
                 {
                     (!this.isLoading) && (
                     <div>
+                        {!this.props.store.dataStore.showingAllData &&
+                            this.filterResetPanel()
+                        }
                         <div style={{ display:'flex' }}>
                             <div className="borderedChart" style={{ marginRight:10 }}>
                                 {this.mutationPlot()}