Async on long running operations (#543)

* compute differential button

* add user gene loading state to reducer

* create input group, consume usergeneloading

* add loading state

client/src/components/geneExpression/expressionButtons.js

@@ -68,6 +68,7 @@ class Expression extends React.Component {
               style={{ marginTop: 10 }}
               disabled={!haveBothCellSets}
               intent="primary"
+              loading={differential.loading}
               fill
               type="button"
               onClick={this.computeDiffExp.bind(this)}

client/src/components/geneExpression/index.js

@@ -7,7 +7,7 @@ import * as d3 from "d3";
 import fuzzysort from "fuzzysort";
 
 import { connect } from "react-redux";
-import { MenuItem } from "@blueprintjs/core";
+import { MenuItem, Button } from "@blueprintjs/core";
 import { Suggest } from "@blueprintjs/select";
 import HistogramBrush from "../brushableHistogram";
 import * as globals from "../../globals";
@@ -59,6 +59,7 @@ const filterGenes = (query, genes) => {
     metadata,
     initializeRanges,
     userDefinedGenes: state.controls.userDefinedGenes,
+    userDefinedGenesLoading: state.controls.userDefinedGenesLoading,
     world: state.controls.world,
     colorAccessor: state.controls.colorAccessor,
     allGeneNames: state.controls.allGeneNames,
@@ -87,7 +88,12 @@ class GeneExpression extends React.Component {
   }
 
   render() {
-    const { world, userDefinedGenes, differential } = this.props;
+    const {
+      world,
+      userDefinedGenes,
+      userDefinedGenesLoading,
+      differential
+    } = this.props;
 
     return (
       <div>
@@ -109,9 +115,11 @@ class GeneExpression extends React.Component {
             className="bp3-control-group"
           >
             <Suggest
+              disabled={true}
               closeOnSelect
               openOnKeyDown
               resetOnSelect
+              itemDisabled={userDefinedGenesLoading ? () => true : () => false}
               noResults={<MenuItem disabled text="No matching genes." />}
               onItemSelect={g => {
                 /* this happens on 'enter' */
@@ -129,6 +137,12 @@ class GeneExpression extends React.Component {
               }
               popoverProps={{ minimal: true }}
             />
+            <Button
+              className="bp3-button bp3-intent-primary"
+              loading={userDefinedGenesLoading}
+            >
+              Add
+            </Button>
           </div>
           {world && userDefinedGenes.length > 0
             ? _.map(userDefinedGenes, (geneName, index) => {

client/src/reducers/controls.js

@@ -117,6 +117,7 @@ const Controls = (
     crossfilter: null,
     dimensionMap: null,
     userDefinedGenes: [],
+    userDefinedGenesLoading: false,
     diffexpGenes: [],
 
     colorAccessor: null,
@@ -323,6 +324,18 @@ const Controls = (
         }
       };
     }
+    case "request user defined gene started": {
+      return {
+        ...state,
+        userDefinedGenesLoading: true
+      };
+    }
+    case "request user defined gene error": {
+      return {
+        ...state,
+        userDefinedGenesLoading: false
+      };
+    }
     case "request user defined gene success": {
       const { world, crossfilter, dimensionMap, userDefinedGenes } = state;
       const worldVarDataCache = world.varDataCache;
@@ -340,7 +353,8 @@ const Controls = (
       return {
         ...state,
         dimensionMap,
-        userDefinedGenes: _userDefinedGenes
+        userDefinedGenes: _userDefinedGenes,
+        userDefinedGenesLoading: false
       };
     }
     case "request differential expression success": {