chore: Add test for bug #1022 color by category (#1024)

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-151cb084
+        tag: sha-4b2072d4
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/__tests__/e2e/e2e.test.ts

@@ -71,6 +71,8 @@ import {
 } from "../util/helpers";
 import { SCALE_MAX_HIRES } from "../../src/util/constants";
 import { PANEL_EMBEDDING_MINIMIZE_TOGGLE_TEST_ID } from "../../src/components/PanelEmbedding/constants";
+import { CONTINUOUS_SECTION_TEST_ID } from "../../src/components/continuous/constants";
+import { CATEGORICAL_SECTION_TEST_ID } from "../../src/components/categorical/constants";
 
 const { describe, skip } = test;
 
@@ -264,6 +266,38 @@ for (const testDataset of testDatasets) {
             }
           });
 
+          /**
+           * https://github.com/chanzuckerberg/single-cell-explorer/issues/1022
+           */
+          test("bug fix color by category #1022", async ({
+            page,
+          }, testInfo) => {
+            skipIfSidePanel(graphTestId, MAIN_PANEL);
+
+            await goToPage(page, url);
+
+            // Expand category
+            for (const label of Object.keys(
+              data.categorical
+            ) as (keyof typeof data.categorical)[]) {
+              await page.getByTestId(`${label}:category-expand`).click();
+            }
+
+            await page
+              .getByTestId(CONTINUOUS_SECTION_TEST_ID)
+              .getByTestId(/colorby-/)
+              .first()
+              .click();
+
+            await page
+              .getByTestId(CATEGORICAL_SECTION_TEST_ID)
+              .getByTestId(/colorby-/)
+              .first()
+              .click();
+
+            await snapshotTestGraph(page, testInfo);
+          });
+
           test("selects cells via lasso", async ({ page }, testInfo) => {
             // TODO: fix bug for side panel where subset1 doesn't reset after layout switch
             skipIfSidePanel(graphTestId, MAIN_PANEL);

client/src/components/categorical/category/index.tsx

@@ -2,7 +2,7 @@ import { SKELETON } from "@blueprintjs/core/lib/esnext/common/classes";
 import React, { useRef, useEffect } from "react";
 import { connect, shallowEqual } from "react-redux";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
-import { AnchorButton, Classes, Position, Tooltip } from "@blueprintjs/core";
+import { Button, Classes, Position, Tooltip } from "@blueprintjs/core";
 import Async, { AsyncProps } from "react-async";
 import memoize from "memoize-one";
 
@@ -311,6 +311,11 @@ class Category extends React.PureComponent<CategoryProps> {
           <Async.Fulfilled persist>
             {(asyncProps: CategoryAsyncProps) => {
               const {
+                /**
+                 * (thuang): `colorAccessor` needs to be accessed from `asyncProps` instead
+                 * of `this.props.colors` to prevent the bug below
+                 * https://github.com/chanzuckerberg/single-cell-explorer/issues/1022
+                 */
                 colorAccessor,
                 colorTable,
                 colorData,
@@ -485,7 +490,7 @@ const CategoryHeader = React.memo(
               hide: { enabled: false },
             }}
           >
-            <AnchorButton
+            <Button
               data-testid={`colorby-${metadataField}`}
               onClick={onColorChangeClick}
               active={isColorAccessor}

client/src/components/categorical/constants.ts

@@ -0,0 +1 @@
+export const CATEGORICAL_SECTION_TEST_ID = "categorical-section";

client/src/components/categorical/index.tsx

@@ -14,6 +14,7 @@ import Collapse from "../../util/collapse";
 import { ControlsHelpers } from "../../util/stateManager";
 import { track } from "../../analytics";
 import { EVENTS } from "../../analytics/events";
+import { CATEGORICAL_SECTION_TEST_ID } from "./constants";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
 type State = any;
@@ -152,6 +153,7 @@ class Categories extends React.Component<{}, State> {
     );
     return (
       <div
+        data-testid={CATEGORICAL_SECTION_TEST_ID}
         style={{
           padding: globals.leftSidebarSectionPadding,
           paddingBottom: 0,

client/src/components/continuous/constants.ts

@@ -0,0 +1 @@
+export const CONTINUOUS_SECTION_TEST_ID = "continuous-section";

client/src/components/continuous/continuous.tsx

@@ -7,6 +7,7 @@ import Collapse from "../../util/collapse";
 import { RootState } from "../../reducers";
 import AnnoMatrix from "../../annoMatrix/annoMatrix";
 import { AnnotationColumnSchema } from "../../common/types/schema";
+import { CONTINUOUS_SECTION_TEST_ID } from "./constants";
 
 interface StateProps {
   schema?: AnnoMatrix["schema"];
@@ -32,7 +33,7 @@ class Continuous extends React.PureComponent<StateProps> {
       .filter((col: AnnotationColumnSchema) => !col.writable) // skip user annotations - they will be treated as categorical
       .map((col: AnnotationColumnSchema) => col.name);
     return allContinuousNames.length ? (
-      <div>
+      <div data-testid={CONTINUOUS_SECTION_TEST_ID}>
         <Collapse>
           <span style={{ paddingLeft: 10 }}>Continuous</span>
           {allContinuousNames.map((key, index) => (