Merge pull request #1700 from dippindots/Mutationstab_Moving_Filters_…

…Message Mutationstab: change to banner alert
cBioPortal · Nov 12, 2018 · 2f5c1ef · 2f5c1ef
2 parents 07525e8 + 7ff5f47
commit 2f5c1ef
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/src/pages/resultsView/mutation/Mutations.tsx b/src/pages/resultsView/mutation/Mutations.tsx
@@ -3,6 +3,8 @@ import {observer} from "mobx-react";
 import {MSKTabs, MSKTab} from "shared/components/MSKTabs/MSKTabs";
 import {ResultsViewPageStore} from "../ResultsViewPageStore";
 import ResultsViewMutationMapper from "./ResultsViewMutationMapper";
+import ResultsViewMutationMapperStore from "./ResultsViewMutationMapperStore";
+import classnames from "classnames";
 import {observable, computed} from "mobx";
 import AppConfig from 'appConfig';
 import "./mutations.scss";
@@ -50,7 +52,12 @@ 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
@@ -104,6 +111,26 @@ 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
@@ -408,12 +408,8 @@ export default class MutationMapper<P extends IMutationMapperProps> extends Reac
                             </div>
                         </div>
                         <hr style={{ marginTop:20 }} />
-
-                            {!this.props.store.dataStore.showingAllData &&
-                                this.filterResetPanel()
-                            }
-                            {this.mutationTable()}
-                        </div>
+                        {this.mutationTable()}
+                    </div>
                     )
                 }
             </div>