From 7ff5f472d45b13ad52d66438cdbe7447806dad93 Mon Sep 17 00:00:00 2001
From: gaofei zhao <zgfilx@163.com>
Date: Fri, 9 Nov 2018 16:12:10 -0500
Subject: [PATCH] Mutationstab: change to banner alert

---
 src/pages/resultsView/mutation/Mutations.tsx  | 27 +++++++++++++++++++
 .../mutationMapper/MutationMapper.tsx         |  8 ++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/pages/resultsView/mutation/Mutations.tsx b/src/pages/resultsView/mutation/Mutations.tsx
index d622b026554..36f5d7f9c5c 100644
--- 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
index a15ed8958e0..ca9787e8efe 100644
--- 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>