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 15:28:12 +08:00 · 2020-07-14 13:53:33 -07:00
parent f69d141336
commit 1269e188be
95 changed files with 18051 additions and 5382 deletions
@@ -4,6 +4,11 @@ import { connect } from "react-redux";
 import * as d3 from "d3";
 import { interpolateCool } from "d3-scale-chromatic";

+import {
+  createColorTable,
+  createColorQuery,
+} from "../../util/stateManager/colorHelpers";
+
 // create continuous color legend
 // http://bl.ocks.org/syntagmatic/e8ccca52559796be775553b467593a9f
 const continuous = (selectorId, colorscale, colorAccessor) => {
@@ -101,38 +106,71 @@ const continuous = (selectorId, colorscale, colorAccessor) => {
 };

@connect((state) => ({
-  colorAccessor: state.colors.colorAccessor,
-  colorScale: state.colors.scale,
+  annoMatrix: state.annoMatrix,
+  colors: state.colors,
 }))
 class ContinuousLegend extends React.Component {
+  constructor(props) {
+    super(props);
+    this.ref = null;
+    this.state = {
+      colorAccessor: null,
+      colorScale: null,
+    };
+  }
+
+  componentDidMount() {
+    this.updateState(null);
+  }
+
  componentDidUpdate(prevProps) {
-    const { colorAccessor, colorScale } = this.props;
-    const range = colorScale?.range;
-    const [domainMin, domainMax] = colorScale?.domain?.() ?? [0, 0];
+    this.updateState(prevProps);
+  }
+
+  async updateState(prevProps) {
+    const { annoMatrix, colors } = this.props;
+    if (!colors || !annoMatrix) return;
+
+    if (colors !== prevProps?.colors || annoMatrix !== prevProps?.annoMatrix) {
+      const { schema } = annoMatrix;
+      const { colorMode, colorAccessor, userColors } = colors;
+      const colorQuery = createColorQuery(colorMode, colorAccessor, schema);
+      const colorDf = colorQuery ? await annoMatrix.fetch(...colorQuery) : null;
+      const colorTable = createColorTable(
+        colorMode,
+        colorAccessor,
+        colorDf,
+        schema,
+        userColors
+      );
+
+      const colorScale = colorTable.scale;
+      const range = colorScale?.range;
+      const [domainMin, domainMax] = colorScale?.domain?.() ?? [0, 0];

-    if (
-      prevProps.colorAccessor !== colorAccessor ||
-      prevProps.colorScale !== colorScale
-    ) {
      /* always remove it, if it's not continuous we don't put it back. */
      d3.select("#continuous_legend").selectAll("*").remove();
-    }

-    if (colorAccessor && colorScale && range && domainMin < domainMax) {
-      /* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
-      if (range()[0][0] !== "#") {
-        continuous(
-          "#continuous_legend",
-          d3.scaleSequential(interpolateCool).domain(colorScale.domain()),
-          colorAccessor
-        );
+      if (colorAccessor && colorScale && range && domainMin < domainMax) {
+        /* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
+        if (range()[0][0] !== "#") {
+          continuous(
+            "#continuous_legend",
+            d3.scaleSequential(interpolateCool).domain(colorScale.domain()),
+            colorAccessor
+          );
+        }
      }
+
+      this.setState({
+        colorAccessor,
+        colorScale: colorTable.scale,
+      });
    }
  }

  render() {
-    const { colorAccessor, colorScale } = this.props;
-
+    const { colorAccessor, colorScale } = this.state;
    if (
      colorScale?.domain &&
      colorScale.domain()[1] === colorScale.domain()[0]