fix: update colorTable code so linear scan only happens once (#328)

* update color code path

* pre-merge tidying

Co-authored-by: atarashansky <atarashansky@CZIMACOS3990.local>

client/src/components/graph/graph.tsx

@@ -146,17 +146,6 @@ class Graph extends React.Component<{}, GraphState> {
     return positions;
   });
 
-  computePointColors = memoize((rgb) => {
-    /*
-        compute webgl colors for each point
-        */
-    const colors = new Float32Array(3 * rgb.length);
-    for (let i = 0, len = rgb.length; i < len; i += 1) {
-      colors.set(rgb[i], 3 * i);
-    }
-    return colors;
-  });
-
   computeSelectedFlags = memoize(
     (crossfilter, _flagSelected, _flagUnselected) => {
       const x = crossfilter.fillByIsSelected(
@@ -599,7 +588,6 @@ class Graph extends React.Component<{}, GraphState> {
     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 colorByData = colorDf?.icol(0)?.asArray();
     const {
       metadataField: pointDilationCategory,
@@ -617,7 +605,7 @@ class Graph extends React.Component<{}, GraphState> {
     const { width, height } = viewport;
     return {
       positions,
-      colors,
+      colors: colorTable.rgb,
       flags,
       width,
       height,

client/src/components/scatterplot/scatterplot.tsx

@@ -126,17 +126,6 @@ class Scatterplot extends React.PureComponent<{}, State> {
     return positions;
   });
 
-  computePointColors = memoize((rgb) => {
-    /*
-    compute webgl colors for each point
-    */
-    const colors = new Float32Array(3 * rgb.length);
-    for (let i = 0, len = rgb.length; i < len; i += 1) {
-      colors.set(rgb[i], 3 * i);
-    }
-    return colors;
-  });
-
   computeSelectedFlags = memoize(
     (crossfilter, _flagSelected, _flagUnselected) => {
       const x = crossfilter.fillByIsSelected(
@@ -301,7 +290,6 @@ class Scatterplot extends React.PureComponent<{}, State> {
       yScale
     );
 
-    const colors = this.computePointColors(colorTable.rgb);
     const colorByData = colorDf?.icol(0)?.asArray();
     const {
       metadataField: pointDilationCategory,
@@ -319,7 +307,7 @@ class Scatterplot extends React.PureComponent<{}, State> {
 
     return {
       positions,
-      colors,
+      colors: colorTable.rgb,
       flags,
       width,
       height,

client/src/globals.ts

@@ -94,7 +94,6 @@ export const brightGreen = "#A2D729";
 export const darkGreen = "#448C4D";
 
 export const nonFiniteCellColor = lightGrey;
-export const defaultCellColor = "rgb(0,0,0,1)";
 export const logoColor = "black"; /* logo pink: "#E9429A" */
 
 /* typography constants */

client/src/util/stateManager/colorHelpers.ts

@@ -23,7 +23,7 @@ import {
 
 interface Colors {
   // cell label to color mapping
-  rgb: [number, number, number][];
+  rgb: Float32Array;
   // function, mapping label index to color scale
   scale: d3.ScaleSequential<string, never> | undefined;
 }
@@ -87,9 +87,8 @@ export function createColorQuery(
 }
 
 function _defaultColors(nObs: number): Colors {
-  const defaultCellColor = parseRGB(globals.defaultCellColor);
   return {
-    rgb: new Array(nObs).fill(defaultCellColor),
+    rgb: new Float32Array(3 * nObs).fill(0),
     scale: undefined,
   };
 }
@@ -244,15 +243,15 @@ const createColorsByCategoricalMetadata = memoize(
 );
 
 function createRgbArray(data: DataframeValueArray, colors?: CategoryColors) {
-  const rgb = new Array(data.length);
+  const rgb = new Float32Array(3 * data.length);
 
   if (!colors) {
     throw new Error("`colors` is undefined");
   }
 
   for (let i = 0, len = data.length; i < len; i += 1) {
     const label = data[i];
-    rgb[i] = colors[String(label)];
+    rgb.set(colors[String(label)], 3 * i);
   }
 
   return rgb;
@@ -276,14 +275,16 @@ function _createColorsByContinuousMetadata(
   }
 
   const nonFiniteColor = parseRGB(globals.nonFiniteCellColor);
-  const rgb = new Array(data.length);
+
+  const rgb = new Float32Array(3 * data.length);
   for (let i = 0, len = data.length; i < len; i += 1) {
     const val = data[i];
+
     if (Number.isFinite(val)) {
       const c = scale(val as number);
-      rgb[i] = colors[c];
+      rgb.set(colors[c], 3 * i);
     } else {
-      rgb[i] = nonFiniteColor;
+      rgb.set(nonFiniteColor, 3 * i);
     }
   }
   return { rgb, scale };