load annotations incrementally (#1107)

* load annotations individually

* fix type check to be more general

* update node CI version from 10 to 12

* node 11

* debug print node version

* travis node version to latest

* try nvm

* remove extraneous node_js statement

* remove node version debugging printf

* incrementally load all annotations and layout

* process annotations and layout as they are loaded

* fix tests

* sort categories incrementally

* incrementally build category view summary; add category loading spinner

* add spinner to continuous metadata

* configure undoable reducer

* incremental crossfilter creation

* improve busy layout

* more layout cleanup

* correctly reconcile categories in schema

* refine layout of lsb spinners

* more spinner layout work

* more spinner layout

* always load layout before obs annotations

client/src/components/continuous/continuous.js

@@ -5,6 +5,7 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import * as globals from "../../globals";
+import { Button } from "@blueprintjs/core";
 
 import HistogramBrush from "../brushableHistogram";
 
@@ -14,17 +15,7 @@ import HistogramBrush from "../brushableHistogram";
   colorScale: state.colors.scale,
   schema: state.world?.schema
 }))
-class Continuous extends React.Component {
-  constructor(props) {
-    super(props);
-    this.hasContinuous = false;
-    this.continuousChecked = false;
-
-    this.state = {};
-  }
-
-  componentDidUpdate() {}
-
+class Continuous extends React.PureComponent {
   handleColorAction = key => {
     return () => {
       const { dispatch, obsAnnotations } = this.props;
@@ -37,61 +28,82 @@ class Continuous extends React.Component {
     };
   };
 
+  renderIsStillLoading(zebra, key) {
+    return (
+      <div
+        key={key}
+        style={{
+          padding: globals.leftSidebarSectionPadding,
+          backgroundColor: zebra % 2 === 0 ? globals.lightestGrey : "white"
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            justifyItems: "center",
+            alignItems: "center"
+          }}
+        >
+          <div style={{ minWidth: 30 }}></div>
+          <div style={{ display: "flex", alignSelf: "center" }}>
+            <span style={{ fontStyle: "italic" }}>{key}</span>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "flex-end"
+            }}
+          >
+            <Button minimal loading intent="primary" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     const { obsAnnotations, schema } = this.props;
-    if (schema && !this.continuousChecked) {
-      this.hasContinuous = _.some(
-        schema.annotations.obs,
-        d => d.type === "int32" || d.type === "float32"
-      );
-      this.continuousChecked = true; /* only do this once */
-    }
+
+    const obsIndex = schema.annotations.obs.index;
+    const allContinuousNames = schema.annotations.obs.columns
+      .filter(col => col.type === "int32" || col.type === "float32")
+      .filter(col => col.name != obsIndex)
+      .map(col => col.name);
 
     /* initial value for iterator to simulate index, ranges is an object */
     let zebra = 0;
 
     return (
       <div>
-        {this.hasContinuous ? (
-          <p
-            style={{
-              ...globals.leftSidebarSectionHeading,
-              marginTop: 40,
-              paddingLeft: globals.leftSidebarSectionPadding
-            }}
-          >
-            Continuous metadata
-          </p>
-        ) : null}
-        {obsAnnotations
-          ? _.map(obsAnnotations.colIndex.keys(), key => {
-              const isColorField =
-                key.includes("color") || key.includes("Color");
-              if (key === schema.annotations.obs.index || isColorField)
-                return null;
-
-              const summary = obsAnnotations.col(key).summarize();
-              const nonFiniteExtent =
-                summary.min === undefined ||
-                summary.max === undefined ||
-                Number.isNaN(summary.min) ||
-                Number.isNaN(summary.max);
-              if (!summary.categorical && !nonFiniteExtent) {
-                zebra += 1;
-                return (
-                  <HistogramBrush
-                    key={key}
-                    field={key}
-                    isObs
-                    zebra={zebra % 2 === 0}
-                    ranges={summary}
-                    handleColorAction={this.handleColorAction(key)}
-                  />
-                );
-              }
-              return null;
-            })
-          : null}
+        {allContinuousNames.map(key => {
+          if (!obsAnnotations.hasCol(key)) {
+            // still loading!
+            zebra += 1;
+            return this.renderIsStillLoading(zebra, key);
+          } else {
+            // data loaded and available
+            const summary = obsAnnotations.col(key).summarize();
+            const nonFiniteExtent =
+              summary.min === undefined ||
+              summary.max === undefined ||
+              Number.isNaN(summary.min) ||
+              Number.isNaN(summary.max);
+            if (!summary.categorical && !nonFiniteExtent) {
+              zebra += 1;
+              return (
+                <HistogramBrush
+                  key={key}
+                  field={key}
+                  isObs
+                  zebra={zebra % 2 === 0}
+                  ranges={summary}
+                  handleColorAction={this.handleColorAction(key)}
+                />
+              );
+            }
+          }
+        })}
       </div>
     );
   }