Fix centroid label + continuous color-by interactions (#1484)

* add case to removing labels

* add disabled state to centroid button

* fix centroid test button clicking order

* don't accidentally un-toggle first color

client/__tests__/e2e/e2e.test.js

@@ -326,13 +326,16 @@ describe("ui elements don't error", () => {
 
 describe("centroid labels", () => {
   test("labels are created", async () => {
-    await utils.clickOn("centroid-label-toggle");
     const labels = Object.keys(data.categorical);
+
+    await utils.clickOn(`colorby-${labels[0]}`);
+    await utils.clickOn("centroid-label-toggle");
     /* eslint-disable no-await-in-loop */
     // Toggle colorby for each category and check to see if labels are generated
     for (let i = 0, { length } = labels; i < length; i += 1) {
       const label = labels[i];
-      await utils.clickOn(`colorby-${label}`);
+      // first label is already enabled
+      if (i !== 0) await utils.clickOn(`colorby-${label}`);
       const generatedLabels = await utils.getAllByClass("centroid-label");
       // Number of labels generated should be equal to size of the object
       expect(generatedLabels).toHaveLength(
@@ -346,8 +349,8 @@ describe("centroid labels", () => {
 describe("graph overlay", () => {
   test("transform centroids correctly", async () => {
     const category = Object.keys(data.categorical)[0];
-    await utils.clickOn("centroid-label-toggle");
     await utils.clickOn(`colorby-${category}`);
+    await utils.clickOn("centroid-label-toggle");
     await utils.clickOn("mode-pan-zoom");
     const panCoords = await cxgActions.calcDragCoordinates(
       "layout-graph",

client/src/components/menubar/index.js

@@ -37,6 +37,7 @@ import DiffexpButtons from "./diffexpButtons";
   showCentroidLabels: state.centroidLabels.showLabels,
   tosURL: state.config?.parameters?.["about_legal_tos"],
   privacyURL: state.config?.parameters?.["about_legal_privacy"],
+  categoricalSelection: state.categoricalSelection,
 }))
 class MenuBar extends React.Component {
   static isValidDigitKeyEvent(e) {
@@ -203,9 +204,13 @@ class MenuBar extends React.Component {
       showCentroidLabels,
       privacyURL,
       tosURL,
+      categoricalSelection,
+      colorAccessor,
     } = this.props;
     const { pendingClipPercentiles } = this.state;
 
+    const isColoredByCategorical = !!categoricalSelection?.[colorAccessor];
+
     // constants used to create selection tool button
     const [selectionTooltip, selectionButtonIcon] =
       selectionTool === "brush"
@@ -267,6 +272,7 @@ class MenuBar extends React.Component {
             onClick={this.handleCentroidChange}
             active={showCentroidLabels}
             intent={showCentroidLabels ? "primary" : "none"}
+            disabled={!isColoredByCategorical}
           />
         </Tooltip>
         <ButtonGroup className={styles.menubarButton}>

client/src/reducers/centroidLabels.js

@@ -63,6 +63,7 @@ const centroidLabels = (state = initialState, action, sharedNextState) => {
       };
 
     case "color by continuous metadata":
+    case "color by expression":
       return { ...state, labels: [] };
 
     case "reset centroid labels":