Redux refactor (#1571)

* refactor categorical controls state * lint * fix race condition in tests * fix typo * add missing update on subset * remove obsolete code * update jest and puppeteer major version; update all minors * update when label changes * remove lint from tests; increase timeouts in e2e tests * initial refactoring to new async annomatrix * refine error handling * fix bad merge * add continuous legend * lint * fix memoization in color table creators * partial implementation of user defined annotations * add new annotations action creator file * first pass at user annotations * additional user annotation bug fixes * user annotation auto-save * unit test cleanup * lint * refactor into multiple files * cleanup * add column GC * fix several bugs in user annotations * remove debug code * no anonymous functions * undo redo cleanup * file cleanup * scatterplot * performance * cleanup * remove old code * render in parallel with load * fix race condition * simply graph rendering * render throttle DRY * fix category label order * fix typo in e2e test setup * re-fix the e2e test setup * be more tolerant of races * anno matrix unit tests * temp disable reembedding * pilot port continuous histo to react-async * name change * lint * fix repaint bug * typo fix * update snap to match new ids * world/universe name cleanup * move annoMatrix to src dir * use private underscore naming convention * fix corner case in all selected * name cleanup * add layout control * init edge case * lint * port scatterplot * fix label indexing bug and improve tests * port category to react-async * fix user annotation labelling while subset * select all of prev layout on layout switch * fix race with crossfilter update * prettier lint * fix misleading comment * fix url composition in loader * first pass at crossfilter tests * lint * lint * fix typo * improved error handling for network errors * fix memoization bug * add memo * refactor for performnce * add missing single-value handling in select exact parser * small bugs discovered by tests * lint * additional crossfilter unit tests * remove extraneous comment * add support for automatic category determination * lint * fix render bug in category * take advantage of schema categories guarantee * lint * do not clear history when resetting * enhanced annomatrix gc * lint * finish renaming to follow conventions; fix clone race bug * lint * add priority based loading to improve initial data load UX * crossfilter cache perf * perf tuning * remove timers * documentation * PR review changes * PR review changes * more PR review edits * improve clarity of comment * more PR review fixes * port centroidLabels to use react-async * remove dead code * pr review updates * oops, remove logging
2026-09-30 13:28:11 +08:00 · 2020-07-14 13:53:33 -07:00
parent f69d141336
commit 1269e188be
95 changed files with 18051 additions and 5382 deletions
@@ -1,18 +1,25 @@
 // jshint esversion: 6
 import React from "react";
 import * as d3 from "d3";
-import { connect } from "react-redux";
+import { connect, shallowEqual } from "react-redux";
 import { mat3, vec2 } from "gl-matrix";
 import _regl from "regl";
 import memoize from "memoize-one";
+import Async from "react-async";

 import setupSVGandBrushElements from "./setupSVGandBrush";
 import _camera from "../../util/camera";
 import _drawPoints from "./drawPointsRegl";
-import { isTypedArray } from "../../util/typeHelpers";
+import {
+  createColorTable,
+  createColorQuery,
+} from "../../util/stateManager/colorHelpers";
+import * as globals from "../../globals";

 import GraphOverlayLayer from "./overlays/graphOverlayLayer";
 import CentroidLabels from "./overlays/centroidLabels";
+import actions from "../../actions";
+import renderThrottle from "../../util/renderThrottle";

 /*
 Simple 2D transforms control all point painting.  There are three:
@@ -53,38 +60,49 @@ function createModelTF() {
  return m;
 }

-function renderThrottle(callback) {
-  /*
-  This wraps a call to requestAnimationFrame(), enforcing a single
-  render callback at any given time (ie, you can call this any number
-  of times, and it will coallesce multiple inter-frame calls into a
-  single render).
-  */
-  let rafCurrentlyInProgress = null;
-  return function f() {
-    if (rafCurrentlyInProgress) return;
-    const context = this;
-    rafCurrentlyInProgress = window.requestAnimationFrame(() => {
-      callback.apply(context);
-      rafCurrentlyInProgress = null;
-    });
-  };
-}
+const flagSelected = 1;
+const flagNaN = 2;
+const flagHighlight = 4;

@connect((state) => ({
-  universe: state.universe,
-  world: state.world,
-  crossfilter: state.crossfilter,
-  colorRGB: state.colors.rgb,
+  annoMatrix: state.annoMatrix,
+  crossfilter: state.obsCrossfilter,
  selectionTool: state.graphSelection.tool,
  currentSelection: state.graphSelection.selection,
  layoutChoice: state.layoutChoice,
-  centroidLabels: state.centroidLabels,
  graphInteractionMode: state.controls.graphInteractionMode,
-  colorAccessor: state.colors.colorAccessor,
+  colors: state.colors,
  pointDilation: state.pointDilation,
 }))
 class Graph extends React.Component {
+  static createReglState(canvas) {
+    /*
+    Must be created for each canvas
+    */
+    // setup canvas, webgl draw function and camera
+    const camera = _camera(canvas);
+    const regl = _regl(canvas);
+    const drawPoints = _drawPoints(regl);
+
+    // preallocate webgl buffers
+    const pointBuffer = regl.buffer();
+    const colorBuffer = regl.buffer();
+    const flagBuffer = regl.buffer();
+
+    return {
+      camera,
+      regl,
+      drawPoints,
+      pointBuffer,
+      colorBuffer,
+      flagBuffer,
+    };
+  }
+
+  static watchAsync(props, prevProps) {
+    return !shallowEqual(props.watchProps, prevProps.watchProps);
+  }
+
  computePointPositions = memoize((X, Y, modelTF) => {
    /*
    compute the model coordinate for each point
@@ -111,18 +129,18 @@ class Graph extends React.Component {
  });

  computeSelectedFlags = memoize(
-    (crossfilter, flagSelected, flagUnselected) => {
+    (crossfilter, _flagSelected, _flagUnselected) => {
      const x = crossfilter.fillByIsSelected(
        new Float32Array(crossfilter.size()),
-        flagSelected,
-        flagUnselected
+        _flagSelected,
+        _flagUnselected
      );
      return x;
    }
  );

  computePointFlags = memoize(
-    (world, crossfilter, colorAccessor, pointDilation) => {
+    (crossfilter, colorByData, pointDilationData, pointDilationLabel) => {
      /*
      We communicate with the shader using three flags:
      - isNaN -- the value is a NaN. Only makes sense when we have a colorAccessor
@@ -136,32 +154,17 @@ class Graph extends React.Component {
      continuous metadata, as they rely on different tests, and some of the flags
      (eg, isNaN) are meaningless in the face of categorical metadata.
      */
-
-      const flagSelected = 1;
-      const flagNaN = 2;
-      const flagHighlight = 4;
-
      const flags = this.computeSelectedFlags(
        crossfilter,
        flagSelected,
        0
      ).slice();

-      const { metadataField, categoryField } = pointDilation;
-      const highlightData = metadataField
-        ? world.obsAnnotations.col(metadataField)?.asArray()
-        : null;
-      const colorByColumn = colorAccessor
-        ? world.obsAnnotations.col(colorAccessor)?.asArray() ||
-          world.varData.col(colorAccessor)?.asArray()
-        : null;
-      const colorByData =
-        colorByColumn && isTypedArray(colorByColumn) ? colorByColumn : null;
-
-      if (colorByData || highlightData) {
+      if (colorByData || pointDilationData) {
        for (let i = 0, len = flags.length; i < len; i += 1) {
-          if (highlightData) {
-            flags[i] += highlightData[i] === categoryField ? flagHighlight : 0;
+          if (pointDilationData) {
+            flags[i] +=
+              pointDilationData[i] === pointDilationLabel ? flagHighlight : 0;
          }
          if (colorByData) {
            flags[i] += Number.isFinite(colorByData[i]) ? 0 : flagNaN;
@@ -175,167 +178,85 @@ class Graph extends React.Component {
  constructor(props) {
    super(props);
    const viewport = this.getViewportDimensions();
-    this.count = 0;
-    this.renderCache = {
-      X: null,
-      Y: null,
-      positions: null,
-      colors: null,
-      sizes: null,
-      flags: null,
-    };
+    this.reglCanvas = null;
+    this.cachedAsyncProps = null;
+    const modelTF = createModelTF();
    this.state = {
      toolSVG: null,
      tool: null,
      container: null,
-      cameraRender: 0,
      viewport,
+
+      // projection
+      camera: null,
+      modelTF,
+      modelInvTF: mat3.invert([], modelTF),
+      projectionTF: null,
+
+      // regl state
+      regl: null,
+      drawPoints: null,
+      pointBuffer: null,
+      colorBuffer: null,
+      flagBuffer: null,
+
+      // component rendering derived state - these must stay synchronized
+      // with the reducer state they were generated from.
+      layoutState: {
+        layoutDf: null,
+        layoutChoice: null,
+      },
+      colorState: {
+        colors: null,
+        colorDf: null,
+        colorTable: null,
+      },
+      pointDilationState: {
+        pointDilation: null,
+        pointDilationDf: null,
+      },
    };
  }

  componentDidMount() {
    window.addEventListener("resize", this.handleResize);

-    // setup canvas, webgl draw function and camera
-    const camera = _camera(this.reglCanvas);
-    const regl = _regl(this.reglCanvas);
-    const drawPoints = _drawPoints(regl);
-
-    // preallocate webgl buffers
-    const pointBuffer = regl.buffer();
-    const colorBuffer = regl.buffer();
-    const flagBuffer = regl.buffer();
-
    // create all default rendering transformations
-    const modelTF = createModelTF();
-    const projectionTF = createProjectionTF(
-      this.reglCanvas.width,
-      this.reglCanvas.height
-    );
-
-    // initial draw to canvas
-    this.renderPoints(
-      regl,
-      drawPoints,
-      colorBuffer,
-      pointBuffer,
-      flagBuffer,
-      camera,
-      projectionTF
-    );
+    const { viewport } = this.state;
+    const projectionTF = createProjectionTF(viewport.width, viewport.height);

    this.setState({
-      regl,
-      drawPoints,
-      pointBuffer,
-      colorBuffer,
-      flagBuffer,
-      camera,
-      modelTF,
-      modelInvTF: mat3.invert([], modelTF),
      projectionTF,
    });
  }

  componentDidUpdate(prevProps, prevState) {
-    const { renderCache } = this;
    const {
-      world,
-      crossfilter,
-      colorRGB,
      selectionTool,
      currentSelection,
-      layoutChoice,
      graphInteractionMode,
-      pointDilation,
-      colorAccessor,
    } = this.props;
-    const { regl, toolSVG, camera, modelTF, viewport } = this.state;
+    const { toolSVG, viewport } = this.state;
    let { projectionTF } = this.state;
    const hasResized =
-      prevState.viewport.height !== this.reglCanvas.height ||
-      prevState.viewport.width !== this.reglCanvas.width;
+      prevState.viewport.height !== viewport.height ||
+      prevState.viewport.width !== viewport.width;
    let stateChanges = {};
-    let needsRepaint = hasResized;
-
-    if (regl && world && crossfilter) {
-      /* update the regl and point rendering state */
-      const { obsLayout, nObs } = world;
-      const { drawPoints, pointBuffer, colorBuffer, flagBuffer } = this.state;
-
-      if (hasResized) {
-        projectionTF = createProjectionTF(
-          this.reglCanvas.width,
-          this.reglCanvas.height
-        );
-        stateChanges = {
-          ...stateChanges,
-          projectionTF,
-        };
-      }
-
-      /* coordinates for each point */
-      const X = obsLayout.col(layoutChoice.currentDimNames[0]).asArray();
-      const Y = obsLayout.col(layoutChoice.currentDimNames[1]).asArray();
-      const newPositions = this.computePointPositions(X, Y, modelTF);
-      if (renderCache.positions !== newPositions) {
-        /* update our cache & GL if the buffer changes */
-        renderCache.positions = newPositions;
-        pointBuffer({ data: newPositions, dimension: 2 });
-        needsRepaint = true;
-      }
-
-      /* colors for each point */
-      const newColors = this.computePointColors(colorRGB);
-      if (renderCache.colors !== newColors) {
-        /* update our cache & GL if the buffer changes */
-        renderCache.colors = newColors;
-        colorBuffer({ data: newColors, dimension: 3 });
-        needsRepaint = true;
-      }
-
-      /* flags for each point */
-      const newFlags = this.computePointFlags(
-        world,
-        crossfilter,
-        colorAccessor,
-        pointDilation
-      );
-      if (renderCache.flags !== newFlags) {
-        renderCache.flags = newFlags;
-        needsRepaint = true;
-        flagBuffer({ data: newFlags, dimension: 1 });
-      }
-
-      this.count = nObs;
-
-      if (needsRepaint) {
-        this.renderPoints(
-          regl,
-          drawPoints,
-          colorBuffer,
-          pointBuffer,
-          flagBuffer,
-          camera,
-          projectionTF
-        );
-      }
-    }

    if (hasResized) {
-      // If the window size has changed we want to recreate all SVGs
+      projectionTF = createProjectionTF(viewport.width, viewport.height);
      stateChanges = {
        ...stateChanges,
-        ...this.createToolSVG(),
+        projectionTF,
      };
-    } else if (
-      (viewport.height && viewport.width && !toolSVG) ||
-      selectionTool !== prevProps.selectionTool
+    }
+
+    if (
+      (viewport.height && viewport.width && !toolSVG) || // first time init
+      hasResized || //  window size has changed we want to recreate all SVGs
+      selectionTool !== prevProps.selectionTool || // change of selection tool
+      prevProps.graphInteractionMode !== graphInteractionMode // lasso/zoom mode is switched
    ) {
-      // first time or change of selection tool
-      stateChanges = { ...stateChanges, ...this.createToolSVG() };
-    } else if (prevProps.graphInteractionMode !== graphInteractionMode) {
-      // If lasso/zoom is switched
      stateChanges = {
        ...stateChanges,
        ...this.createToolSVG(),
@@ -367,6 +288,13 @@ class Graph extends React.Component {
    window.removeEventListener("resize", this.handleResize);
  }

+  setReglCanvas = (canvas) => {
+    this.reglCanvas = canvas;
+    this.setState({
+      ...Graph.createReglState(canvas),
+    });
+  };
+
  handleResize = () => {
    const { state } = this.state;
    const viewport = this.getViewportDimensions();
@@ -400,11 +328,13 @@ class Graph extends React.Component {
    Called from componentDidUpdate. Create the tool SVG, and return any
    state changes that should be passed to setState().
    */
-    const { viewport, selectionTool, graphInteractionMode } = this.props;
+    const { selectionTool, graphInteractionMode } = this.props;
+    const { viewport } = this.state;

    /* clear out whatever was on the div, even if nothing, but usually the brushes etc */
-
-    d3.select("#lasso-layer").selectAll(".lasso-group").remove();
+    const lasso = d3.select("#lasso-layer");
+    if (lasso.empty()) return {}; // still initializing
+    lasso.selectAll(".lasso-group").remove();

    // Don't render or recreate toolSVG if currently in zoom mode
    if (graphInteractionMode !== "select") {
@@ -440,6 +370,88 @@ class Graph extends React.Component {
    return { toolSVG: newToolSVG, tool, container };
  };

+  fetchAsyncProps = async (props) => {
+    const {
+      annoMatrix,
+      colors: colorsProp,
+      layoutChoice,
+      crossfilter,
+      pointDilation,
+      viewport,
+    } = props.watchProps;
+    const { modelTF } = this.state;
+
+    const [layoutDf, colorDf, pointDilationDf] = await this.fetchData(
+      annoMatrix,
+      layoutChoice,
+      colorsProp,
+      pointDilation
+    );
+    const { currentDimNames } = layoutChoice;
+    const X = layoutDf.col(currentDimNames[0]).asArray();
+    const Y = layoutDf.col(currentDimNames[1]).asArray();
+    const positions = this.computePointPositions(X, Y, modelTF);
+
+    const colorTable = this.updateColorTable(colorsProp, colorDf);
+    const colors = this.computePointColors(colorTable.rgb);
+
+    const { colorAccessor } = colorsProp;
+    const colorByData = colorDf?.col(colorAccessor)?.asArray();
+    const {
+      metadataField: pointDilationCategory,
+      categoryField: pointDilationLabel,
+    } = pointDilation;
+    const pointDilationData = pointDilationDf
+      ?.col(pointDilationCategory)
+      ?.asArray();
+    const flags = this.computePointFlags(
+      crossfilter,
+      colorByData,
+      pointDilationData,
+      pointDilationLabel
+    );
+
+    const { width, height } = viewport;
+    return {
+      positions,
+      colors,
+      flags,
+      width,
+      height,
+    };
+  };
+
+  async fetchData(annoMatrix, layoutChoice, colors, pointDilation) {
+    /*
+    fetch all data needed.  Includes:
+      - the color by dataframe
+      - the layout dataframe
+      - the point dilation dataframe
+    */
+    const { metadataField: pointDilationAccessor } = pointDilation;
+
+    const promises = [];
+    // layout
+    promises.push(annoMatrix.fetch("emb", layoutChoice.current));
+
+    // color
+    const query = this.createColorByQuery(colors);
+    if (query) {
+      promises.push(annoMatrix.fetch(...query));
+    } else {
+      promises.push(Promise.resolve(null));
+    }
+
+    // point highlighting
+    if (pointDilationAccessor) {
+      promises.push(annoMatrix.fetch("obs", pointDilationAccessor));
+    } else {
+      promises.push(Promise.resolve(null));
+    }
+
+    return Promise.all(promises);
+  }
+
  brushToolUpdate(tool, container) {
    /*
    this is called from componentDidUpdate(), so be very careful using
@@ -571,17 +583,22 @@ class Graph extends React.Component {
    // ignore programatically generated events
    if (d3.event.sourceEvent === null || !d3.event.selection) return;

-    const { dispatch } = this.props;
+    const { dispatch, layoutChoice } = this.props;
    const s = d3.event.selection;
-    const brushCoords = {
-      northwest: this.mapScreenToPoint([s[0][0], s[0][1]]),
-      southeast: this.mapScreenToPoint([s[1][0], s[1][1]]),
-    };
-
-    dispatch({
-      type: "graph brush change",
-      brushCoords,
-    });
+    const northwest = this.mapScreenToPoint(s[0]);
+    const southeast = this.mapScreenToPoint(s[1]);
+    const [minX, maxY] = northwest;
+    const [maxX, minY] = southeast;
+    dispatch(
+      actions.graphBrushChangeAction(layoutChoice.current, {
+        minX,
+        minY,
+        maxX,
+        maxY,
+        northwest,
+        southeast,
+      })
+    );
  }

  handleBrushStartAction() {
@@ -589,7 +606,7 @@ class Graph extends React.Component {
    if (!d3.event.sourceEvent) return;

    const { dispatch } = this.props;
-    dispatch({ type: "graph brush start" });
+    dispatch(actions.graphBrushStartAction());
  }

  handleBrushEndAction() {
@@ -600,65 +617,67 @@ class Graph extends React.Component {
    coordinates will be included if selection made, null
    if selection cleared.
    */
-    const { dispatch } = this.props;
+    const { dispatch, layoutChoice } = this.props;
    const s = d3.event.selection;
    if (s) {
-      const brushCoords = {
-        northwest: this.mapScreenToPoint(s[0]),
-        southeast: this.mapScreenToPoint(s[1]),
-      };
-      dispatch({
-        type: "graph brush end",
-        brushCoords,
-      });
+      const northwest = this.mapScreenToPoint(s[0]);
+      const southeast = this.mapScreenToPoint(s[1]);
+      const [minX, maxY] = northwest;
+      const [maxX, minY] = southeast;
+      dispatch(
+        actions.graphBrushEndAction(layoutChoice.current, {
+          minX,
+          minY,
+          maxX,
+          maxY,
+          northwest,
+          southeast,
+        })
+      );
    } else {
-      dispatch({
-        type: "graph brush deselect",
-      });
+      dispatch(actions.graphBrushDeselectAction(layoutChoice.current));
    }
  }

  handleBrushDeselectAction() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: "graph brush deselect",
-    });
+    const { dispatch, layoutChoice } = this.props;
+    dispatch(actions.graphBrushDeselectAction(layoutChoice.current));
  }

  handleLassoStart() {
-    const { dispatch } = this.props;
-    dispatch({
-      type: "graph lasso start",
-    });
+    const { dispatch, layoutChoice } = this.props;
+    dispatch(actions.graphLassoStartAction(layoutChoice.current));
  }

  // when a lasso is completed, filter to the points within the lasso polygon
  handleLassoEnd(polygon) {
    const minimumPolygonArea = 10;
-    const { dispatch } = this.props;
+    const { dispatch, layoutChoice } = this.props;

    if (
      polygon.length < 3 ||
      Math.abs(d3.polygonArea(polygon)) < minimumPolygonArea
    ) {
      // if less than three points, or super small area, treat as a clear selection.
-      dispatch({ type: "graph lasso deselect" });
+      dispatch(actions.graphLassoDeselectAction(layoutChoice.current));
    } else {
-      dispatch({
-        type: "graph lasso end",
-        polygon: polygon.map((xy) => this.mapScreenToPoint(xy)), // transform the polygon
-      });
+      dispatch(
+        actions.graphLassoEndAction(
+          layoutChoice.current,
+          polygon.map((xy) => this.mapScreenToPoint(xy))
+        )
+      );
    }
  }

  handleLassoCancel() {
-    const { dispatch } = this.props;
-    dispatch({ type: "graph lasso cancel" });
+    const { dispatch, layoutChoice } = this.props;
+    dispatch(actions.graphLassoCancelAction(layoutChoice.current));
  }

  handleLassoDeselectAction() {
-    const { dispatch } = this.props;
-    dispatch({ type: "graph lasso deselect" });
+    const { dispatch, layoutChoice } = this.props;
+    dispatch(actions.graphLassoDeselectAction(layoutChoice.current));
  }

  handleDeselectAction() {
@@ -675,38 +694,6 @@ class Graph extends React.Component {
    });
  }

-  renderPoints(
-    regl,
-    drawPoints,
-    colorBuffer,
-    pointBuffer,
-    flagBuffer,
-    camera,
-    projectionTF
-  ) {
-    const { universe } = this.props;
-    if (!this.reglCanvas || !universe) return;
-    const cameraTF = camera.view();
-    const projView = mat3.multiply(mat3.create(), projectionTF, cameraTF);
-    const { width, height } = this.reglCanvas;
-    regl.poll();
-    regl.clear({
-      depth: 1,
-      color: [1, 1, 1, 1],
-    });
-    drawPoints({
-      distance: camera.distance(),
-      color: colorBuffer,
-      position: pointBuffer,
-      flag: flagBuffer,
-      count: this.count,
-      projView,
-      nPoints: universe.nObs,
-      minViewportDimension: Math.min(width, height),
-    });
-    regl._gl.flush();
-  }
-
  renderCanvas = renderThrottle(() => {
    const {
      regl,
@@ -728,9 +715,92 @@ class Graph extends React.Component {
    );
  });

+  updateReglAndRender(asyncProps) {
+    const { positions, colors, flags } = asyncProps;
+    this.cachedAsyncProps = asyncProps;
+    const { pointBuffer, colorBuffer, flagBuffer } = this.state;
+    pointBuffer({ data: positions, dimension: 2 });
+    colorBuffer({ data: colors, dimension: 3 });
+    flagBuffer({ data: flags, dimension: 1 });
+    this.renderCanvas();
+  }
+
+  updateColorTable(colors, colorDf) {
+    const { annoMatrix } = this.props;
+    const { schema } = annoMatrix;
+
+    /* update color table state */
+    if (!colors || !colorDf) {
+      return createColorTable(
+        null, // default mode
+        null,
+        null,
+        schema,
+        null
+      );
+    }
+
+    const { colorAccessor, userColors, colorMode } = colors;
+    return createColorTable(
+      colorMode,
+      colorAccessor,
+      colorDf,
+      schema,
+      userColors
+    );
+  }
+
+  createColorByQuery(colors) {
+    const { annoMatrix } = this.props;
+    const { schema } = annoMatrix;
+    const { colorMode, colorAccessor } = colors;
+    return createColorQuery(colorMode, colorAccessor, schema);
+  }
+
+  renderPoints(
+    regl,
+    drawPoints,
+    colorBuffer,
+    pointBuffer,
+    flagBuffer,
+    camera,
+    projectionTF
+  ) {
+    const { annoMatrix } = this.props;
+    if (!this.reglCanvas || !annoMatrix) return;
+
+    const { schema } = annoMatrix;
+    const cameraTF = camera.view();
+    const projView = mat3.multiply(mat3.create(), projectionTF, cameraTF);
+    const { width, height } = this.reglCanvas;
+    regl.poll();
+    regl.clear({
+      depth: 1,
+      color: [1, 1, 1, 1],
+    });
+    drawPoints({
+      distance: camera.distance(),
+      color: colorBuffer,
+      position: pointBuffer,
+      flag: flagBuffer,
+      count: annoMatrix.nObs,
+      projView,
+      nPoints: schema.dataframe.nObs,
+      minViewportDimension: Math.min(width, height),
+    });
+    regl._gl.flush();
+  }
+
  render() {
-    const { graphInteractionMode } = this.props;
-    const { modelTF, projectionTF, camera, viewport } = this.state;
+    const {
+      graphInteractionMode,
+      annoMatrix,
+      colors,
+      layoutChoice,
+      pointDilation,
+      crossfilter,
+    } = this.props;
+    const { modelTF, projectionTF, camera, viewport, regl } = this.state;
    const cameraTF = camera?.view()?.slice();

    return (
@@ -781,18 +851,65 @@ class Graph extends React.Component {
          }}
          className="graph-canvas"
          data-testid="layout-graph"
-          ref={(canvas) => {
-            this.reglCanvas = canvas;
-          }}
+          ref={this.setReglCanvas}
          onMouseDown={this.handleCanvasEvent}
          onMouseUp={this.handleCanvasEvent}
          onMouseMove={this.handleCanvasEvent}
          onDoubleClick={this.handleCanvasEvent}
          onWheel={this.handleCanvasEvent}
        />
+
+        <Async
+          watchFn={Graph.watchAsync}
+          promiseFn={this.fetchAsyncProps}
+          watchProps={{
+            annoMatrix,
+            colors,
+            layoutChoice,
+            pointDilation,
+            crossfilter,
+            viewport,
+          }}
+        >
+          <Async.Pending initial>Embedding loading...</Async.Pending>
+          <Async.Rejected>
+            {(error) => (
+              <ErrorLoading
+                displayName={layoutChoice.current}
+                error={error}
+                width={viewport.width}
+                height={viewport.height}
+              />
+            )}
+          </Async.Rejected>
+          <Async.Fulfilled>
+            {(asyncProps) => {
+              if (regl && !shallowEqual(asyncProps, this.cachedAsyncProps)) {
+                this.updateReglAndRender(asyncProps);
+              }
+              return null;
+            }}
+          </Async.Fulfilled>
+        </Async>
      </div>
    );
  }
 }

+const ErrorLoading = ({ displayName, error, width, height }) => {
+  console.log(error); // log to console as this is an unepected error
+  return (
+    <div
+      style={{
+        position: "fixed",
+        fontWeight: 500,
+        top: height / 2,
+        left: globals.leftSidebarWidth + width / 2 - 50,
+      }}
+    >
+      <span>{`Failure loading ${displayName}`}</span>
+    </div>
+  );
+};
+
 export default Graph;
@@ -1,113 +1,217 @@
 import React, { PureComponent } from "react";
-import { connect } from "react-redux";
+import { connect, shallowEqual } from "react-redux";
+import Async from "react-async";

 import { categoryLabelDisplayStringLongLength } from "../../../globals";
+import calcCentroid from "../../../util/centroid";
+import { createColorQuery } from "../../../util/stateManager/colorHelpers";

 export default
@connect((state) => ({
-  colorAccessor: state.colors.colorAccessor,
+  annoMatrix: state.annoMatrix,
+  colors: state.colors,
+  layoutChoice: state.layoutChoice,
  dilatedValue: state.pointDilation.categoryField,
-  labels: state.centroidLabels.labels,
  categoricalSelection: state.categoricalSelection,
+  showLabels: state.centroidLabels?.showLabels,
 }))
 class CentroidLabels extends PureComponent {
-  // Check to see if centroids have either just been displayed or removed from the overlay
+  static watchAsync(props, prevProps) {
+    return !shallowEqual(props.watchProps, prevProps.watchProps);
+  }

-  componentDidUpdate(prevProps) {
-    const { labels, overlayToggled } = this.props;
-    const prevSize = prevProps.labels.size;
-    const { size } = labels;
+  fetchAsyncProps = async (props) => {
+    const {
+      annoMatrix,
+      colors,
+      layoutChoice,
+      categoricalSelection,
+      showLabels,
+    } = props.watchProps;
+    const { schema } = annoMatrix;
+    const { colorAccessor } = colors;

-    const displayChangeOff = prevSize > 0 && size === undefined;
-    const displayChangeOn = prevSize === undefined && size > 0;
-
-    if (displayChangeOn || displayChangeOff) {
-      // Notify overlay layer of display change
-      overlayToggled("centroidLabels", displayChangeOn);
+    const [layoutDf, colorDf] = await this.fetchData();
+    let labels;
+    if (colorDf) {
+      labels = calcCentroid(
+        schema,
+        colorAccessor,
+        colorDf,
+        layoutChoice,
+        layoutDf
+      );
+    } else {
+      labels = new Map();
    }
+
+    const { overlaySetShowing } = this.props;
+    overlaySetShowing("centroidLabels", showLabels && labels.size > 0);
+
+    return {
+      labels,
+      colorAccessor,
+      category: categoricalSelection[colorAccessor],
+    };
+  };
+
+  handleMouseEnter = (e, colorAccessor, label) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: "category value mouse hover start",
+      metadataField: colorAccessor,
+      categoryField: label,
+    });
+  };
+
+  handleMouseOut = (e, colorAccessor, label) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: "category value mouse hover end",
+      metadataField: colorAccessor,
+      categoryField: label,
+    });
+  };
+
+  colorByQuery() {
+    const { annoMatrix, colors } = this.props;
+    const { schema } = annoMatrix;
+    const { colorMode, colorAccessor } = colors;
+    return createColorQuery(colorMode, colorAccessor, schema);
+  }
+
+  async fetchData() {
+    const { annoMatrix, layoutChoice } = this.props;
+    // fetch all data we need: layout, category
+    const promises = [];
+    // layout
+    promises.push(annoMatrix.fetch("emb", layoutChoice.current));
+    // category to label - we ONLY label on obs, never on X, etc.
+    const query = this.colorByQuery();
+    if (query && query[0] === "obs") {
+      promises.push(annoMatrix.fetch(...query));
+    } else {
+      promises.push(Promise.resolve(null));
+    }
+
+    return Promise.all(promises);
  }

  render() {
    const {
-      labels,
      inverseTransform,
      dilatedValue,
-      dispatch,
-      colorAccessor,
      categoricalSelection,
+      showLabels,
+      colors,
+      annoMatrix,
+      layoutChoice,
    } = this.props;

-    if (!colorAccessor || labels.size === undefined || labels.size === 0)
-      return null;
+    return (
+      <Async
+        watchFn={CentroidLabels.watchAsync}
+        promiseFn={this.fetchAsyncProps}
+        watchProps={{
+          annoMatrix,
+          colors,
+          layoutChoice,
+          categoricalSelection,
+          dilatedValue,
+          showLabels,
+        }}
+      >
+        <Async.Fulfilled>
+          {(asyncProps) => {
+            if (!showLabels) return null;

-    const category = categoricalSelection[colorAccessor];
+            const labelSVGS = [];
+            const deselectOpacity = 0.375;
+            const { category, colorAccessor, labels } = asyncProps;

-    const labelSVGS = [];
-    let fontSize = "15px";
-    let fontWeight = null;
-    const deselectOpacity = 0.375;
-    labels.forEach((coords, label) => {
-      fontSize = "15px";
-      fontWeight = null;
-      if (label === dilatedValue) {
-        fontSize = "18px";
-        fontWeight = "800";
-      }
+            labels.forEach((coords, label) => {
+              const selected = category.get(label) ?? true;

-      const selected = category.get(label) ?? true;
+              // Mirror LSB middle truncation
+              let displayLabel = label;
+              if (displayLabel.length > categoryLabelDisplayStringLongLength) {
+                displayLabel = `${label.slice(
+                  0,
+                  categoryLabelDisplayStringLongLength / 2
+                )}…${label.slice(-categoryLabelDisplayStringLongLength / 2)}`;
+              }

-      // Mirror LSB middle truncation
-      let displayLabel = label;
-      if (displayLabel.length > categoryLabelDisplayStringLongLength) {
-        displayLabel = `${label.slice(
-          0,
-          categoryLabelDisplayStringLongLength / 2
-        )}…${label.slice(-categoryLabelDisplayStringLongLength / 2)}`;
-      }
+              labelSVGS.push(
+                // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events -- the mouse actions for centroid labels do not have a screen reader alternative
+                <Label
+                  key={label} // eslint-disable-line react/no-array-index-key --- label is not an index, eslint is confused
+                  label={label}
+                  dilatedValue={dilatedValue}
+                  coords={coords}
+                  inverseTransform={inverseTransform}
+                  opactity={selected ? 1 : deselectOpacity}
+                  colorAccessor={colorAccessor}
+                  displayLabel={displayLabel}
+                  onMouseEnter={this.handleMouseEnter}
+                  onMouseOut={this.handleMouseOut}
+                />
+              );
+            });

-      labelSVGS.push(
-        <g
-          // eslint-disable-next-line react/no-array-index-key --- label is unique and consistent
-          key={label}
-          className="centroid-label"
-          transform={`translate(${coords[0]}, ${coords[1]})`}
-          data-testclass="centroid-label"
-          data-testid={`${label}-centroid-label`}
-        >
-          {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events --- the mouse actions for centroid labels do not have a screen reader alternative*/}
-          <text
-            transform={inverseTransform}
-            textAnchor="middle"
-            data-label={label}
-            style={{
-              fontSize,
-              fontWeight,
-              fill: "black",
-              userSelect: "none",
-              opacity: selected ? 1 : deselectOpacity,
-            }}
-            onMouseEnter={(e) =>
-              dispatch({
-                type: "category value mouse hover start",
-                metadataField: colorAccessor,
-                categoryField: e.target.getAttribute("data-label"),
-              })
-            }
-            onMouseOut={(e) =>
-              dispatch({
-                type: "category value mouse hover end",
-                metadataField: colorAccessor,
-                categoryField: e.target.getAttribute("data-label"),
-              })
-            }
-            pointerEvents="visiblePainted"
-          >
-            {displayLabel}
-          </text>
-        </g>
-      );
-    });
-
-    return <>{labelSVGS}</>;
+            return <>{labelSVGS}</>;
+          }}
+        </Async.Fulfilled>
+      </Async>
+    );
  }
 }
+
+const Label = ({
+  label,
+  dilatedValue,
+  coords,
+  inverseTransform,
+  opacity,
+  colorAccessor,
+  displayLabel,
+  onMouseEnter,
+  onMouseOut,
+}) => {
+  /*
+  Render a label at a given coordinate.
+  */
+  let fontSize = "15px";
+  let fontWeight = null;
+  if (label === dilatedValue) {
+    fontSize = "18px";
+    fontWeight = "800";
+  }
+
+  return (
+    <g
+      key={label}
+      className="centroid-label"
+      transform={`translate(${coords[0]}, ${coords[1]})`}
+      data-testclass="centroid-label"
+      data-testid={`${label}-centroid-label`}
+    >
+      {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events --- the mouse actions for centroid labels do not have a screen reader alternative*/}
+      <text
+        transform={inverseTransform}
+        textAnchor="middle"
+        style={{
+          fontSize,
+          fontWeight,
+          fill: "black",
+          userSelect: "none",
+          opacity: { opacity },
+        }}
+        onMouseEnter={(e) => onMouseEnter(e, colorAccessor, label)}
+        onMouseOut={(e) => onMouseOut(e, colorAccessor, label)}
+        pointerEvents="visiblePainted"
+      >
+        {displayLabel}
+      </text>
+    </g>
+  );
+};
@@ -33,7 +33,7 @@ export default class GraphOverlayLayer extends PureComponent {
  };

  // This is passed to all children, should be called when an overlay's display state is toggled along with the overlay name and its new display state in boolean form
-  overlayToggled = (overlay, displaying) => {
+  overlaySetShowing = (overlay, displaying) => {
    this.setState((state) => {
      return { ...state, display: { ...state.display, [overlay]: displaying } };
    });
@@ -67,7 +67,7 @@ export default class GraphOverlayLayer extends PureComponent {
    const newChildren = React.Children.map(children, (child) =>
      cloneElement(child, {
        inverseTransform,
-        overlayToggled: this.overlayToggled,
+        overlaySetShowing: this.overlaySetShowing,
      })
    );

@@ -17,6 +17,7 @@ export default (
  viewport
 ) => {
  const svg = d3.select("#graph-wrapper").select("#lasso-layer");
+  if (svg.empty()) return {};

  if (selectionToolType === "brush") {
    const brush = d3