resetting expander on data and selection filters change (fix cBioPort…

…al#54)
onursumer · Jul 25, 2019 · ae671d2 · ae671d2
1 parent bf495a1
commit ae671d2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mutation-mapper",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Generic Mutation Mapper",
   "author": "cBioPortal",
   "license": "GNU Affero General Public License v3.0",

diff --git a/src/DataTable.tsx b/src/DataTable.tsx
@@ -5,13 +5,14 @@ import {
 } from "cbioportal-frontend-commons";
 import classnames from "classnames";
 import _ from "lodash";
-import {action, computed, observable} from "mobx";
+import {action, computed, IReactionPublic, observable, reaction} from "mobx";
 import {observer} from "mobx-react";
 import * as React from 'react';
 import ReactTable, {Column, RowInfo, TableProps} from "react-table";
 
 import {ColumnSelectorProps, ColumnVisibilityDef} from "./component/ColumnSelector";
 import DataTableToolbar from "./component/toolbar/DataTableToolbar";
+import {DataFilter} from "./model/DataFilter";
 import {DataStore} from "./model/DataStore";
 import {RemoteData} from "./model/RemoteData";
 import {getRemoteDataGroupStatus} from "./util/RemoteDataUtils";
@@ -88,7 +89,7 @@ export default class DataTable<T> extends React.Component<DataTableProps<T>, {}>
 
         if (this.props.dataStore) {
             data = this.props.dataStore.sortedFilteredSelectedData.length > 0 ?
-                this.props.dataStore.sortedFilteredSelectedData : this.props.dataStore.sortedFilteredData
+                this.props.dataStore.sortedFilteredSelectedData : this.props.dataStore.sortedFilteredData;
         }
 
         return data;
@@ -193,6 +194,7 @@ export default class DataTable<T> extends React.Component<DataTableProps<T>, {}>
                         expanded={this.expanded}
                         onExpandedChange={this.onExpandedChange}
                         onPageChange={this.resetExpander}
+                        onPageSizeChange={this.resetExpander}
                         onSortedChange={this.resetExpander}
                         {...this.props.reactTableProps}
                     />
@@ -201,6 +203,24 @@ export default class DataTable<T> extends React.Component<DataTableProps<T>, {}>
         );
     }
 
+    componentWillReceiveProps(nextProps: Readonly<DataTableProps<T>>)
+    {
+        if (nextProps.dataStore) {
+            // this is to reset expander component every time the data or selection filters update
+            // it would be cleaner if we could do this with a ReactTable callback (something like onDataChange),
+            // but no such callback exists
+            reaction(
+                () => [nextProps.dataStore!.selectionFilters, nextProps.dataStore!.dataFilters],
+                (filters: DataFilter[][], disposer: IReactionPublic) => {
+                    if (filters.length > 0) {
+                        this.resetExpander();
+                    }
+                    disposer.dispose();
+                }
+            );
+        }
+    }
+
     @autobind
     protected getTrProps(state: any, row?: RowInfo)
     {

diff --git a/src/store/DefaultMutationMapperDataStore.ts b/src/store/DefaultMutationMapperDataStore.ts
@@ -61,17 +61,23 @@ export class DefaultMutationMapperDataStore implements DataStore
 
     @action
     public clearHighlightFilters() {
-        this.highlightFilters = [];
+        if (this.highlightFilters.length > 0) {
+            this.highlightFilters = [];
+        }
     }
 
     @action
     public clearSelectionFilters() {
-        this.selectionFilters = [];
+        if (this.selectionFilters.length > 0) {
+            this.selectionFilters = [];
+        }
     }
 
     @action
     public clearDataFilters() {
-        this.dataFilters = [];
+        if (this.dataFilters.length > 0) {
+            this.dataFilters = [];
+        }
     }
 
     @action