diff --git a/client/__tests__/e2e/e2e.test.js b/client/__tests__/e2e/e2e.test.js index 76e1b4d0..baab5461 100644 --- a/client/__tests__/e2e/e2e.test.js +++ b/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", diff --git a/client/src/components/menubar/index.js b/client/src/components/menubar/index.js index f86eb7df..aff8ada6 100644 --- a/client/src/components/menubar/index.js +++ b/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} /> diff --git a/client/src/reducers/centroidLabels.js b/client/src/reducers/centroidLabels.js index bfc35b4f..25d1d2d1 100644 --- a/client/src/reducers/centroidLabels.js +++ b/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":