From de0312906135997739762f5aeac2cb8bcf136743 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Fri, 27 Aug 2021 12:15:47 -0700
Subject: [PATCH] Spinner on color by geneset when closed (#2412)

* take 2

* take 2.1

* bruce test

* remove component did mount

* working
---
 .../geneExpression/menus/genesetMenus.js      | 39 ++++++++++++++++---
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/client/src/components/geneExpression/menus/genesetMenus.js b/client/src/components/geneExpression/menus/genesetMenus.js
index f9c128c4..eb30db33 100644
--- a/client/src/components/geneExpression/menus/genesetMenus.js
+++ b/client/src/components/geneExpression/menus/genesetMenus.js
@@ -13,20 +13,47 @@ import {
   PopoverInteractionKind,
 } from "@blueprintjs/core";
 
+import { createColorQuery } from "../../../util/stateManager/colorHelpers";
+
 import * as globals from "../../../globals";
 import actions from "../../../actions";
 import AddGeneToGenesetDialogue from "./addGeneToGenesetDialogue";
 
 @connect((state) => ({
-    genesetsUI: state.genesetsUI,
-    colorAccessor: state.colors.colorAccessor,
-  }))
+  annoMatrix: state.annoMatrix,
+  schema: state.annoMatrix?.schema,
+  genesetsUI: state.genesetsUI,
+  colorAccessor: state.colors.colorAccessor,
+  genesets: state.genesets.genesets,
+}))
 class GenesetMenus extends React.PureComponent {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      dataIsFetching: false,
+    };
   }
 
+  fetchOurData = () => {
+    /* 
+    fetch our data. serves two purposes:  a) preload upon initial render, 
+    and b) set busy/loading indicator on any controls that require the data
+    to be present, such as the color-by component.
+    */
+    const { geneset, schema, annoMatrix, genesets } = this.props;
+    this.setState({ dataIsFetching: true });
+    annoMatrix
+      .fetch(
+        ...createColorQuery(
+          "color by geneset mean expression",
+          geneset,
+          schema,
+          genesets
+        )
+      )
+      .then(() => this.setState({ dataIsFetching: false }));
+  };
+
   activateAddGeneToGenesetMode = () => {
     const { dispatch, geneset } = this.props;
     dispatch({
@@ -46,7 +73,7 @@ class GenesetMenus extends React.PureComponent {
 
   handleColorByEntireGeneset = () => {
     const { dispatch, geneset } = this.props;
-
+    this.fetchOurData(); // just in case data was flushed from cache
     dispatch({
       type: "color by geneset mean expression",
       geneset,
@@ -60,6 +87,7 @@ class GenesetMenus extends React.PureComponent {
 
   render() {
     const { geneset, genesetsEditable, createText, colorAccessor } = this.props;
+    const { dataIsFetching } = this.state;
 
     const isColorBy = geneset === colorAccessor;
 
@@ -123,6 +151,7 @@ class GenesetMenus extends React.PureComponent {
             >
               <AnchorButton
                 active={isColorBy}
+                loading={dataIsFetching}
                 intent={isColorBy ? "primary" : "none"}
                 style={{ marginLeft: 0 }}
                 onClick={this.handleColorByEntireGeneset}