Disable ColorBy button for truncated categories (#1191)

* Disable ColorBy button for truncated categories

Fixes https://github.com/chanzuckerberg/cellxgene/issues/1156

For categories that have more than 100 labels we truncate the labels in
the UI, but still allowed users to ColorBy these categories. Coloring by
these categories can cause browsers to get bogged down.

This commit disables ColorBy for truncated categories.

* Minor documentation spelling and typo fixes

* Respond to feedback from @liaprins-czi

* Respond to feedback from @colinmegill and @bkmartinjr

client/src/components/categorical/category.js

@@ -156,6 +156,8 @@ class Category extends React.Component {
       return this.renderIsStillLoading();
     }
 
+    const isTruncated = _.get(categoricalSelection, [metadataField, "isTruncated"], false);
+
     return (
       <CategoryFlipperLayout
         metadataField={metadataField}
@@ -227,16 +229,23 @@ class Category extends React.Component {
           />
 
           <Tooltip
-            content="Use as color scale"
+            content={
+              isTruncated
+                ? `Coloring by ${metadataField} is disabled, as it exceeds the limit of ${globals.maxCategoricalOptionsToDisplay} labels`
+                : "Use as color scale"
+            }
             position="bottom"
+            usePortal={false}
             hoverOpenDelay={globals.tooltipHoverOpenDelay}
           >
             <Button
               data-testclass="colorby"
               data-testid={`colorby-${metadataField}`}
-              onClick={this.handleColorChange}
-              active={colorAccessor === metadataField}
-              intent={colorAccessor === metadataField ? "primary" : "none"}
+              onClick={() => {
+                if (!isTruncated) this.handleColorChange();
+              }}
+              active={colorAccessor === metadataField || isTruncated}
+              intent={colorAccessor === metadataField && !isTruncated ? "primary" : "none"}
               icon="tint"
             />
           </Tooltip>

client/src/globals.js

@@ -2,7 +2,7 @@ import { Colors } from "@blueprintjs/core";
 import { dispatchNetworkErrorMessageToUser } from "./util/actionHelpers";
 
 /* if a categorical metadata field has more options than this, truncate */
-export const maxCategoricalOptionsToDisplay = 100;
+export const maxCategoricalOptionsToDisplay = 200;
 
 /* default "unassigned" value for user-created categorical metadata */
 export const unassignedCategoryLabel = "unassigned";

client/src/reducers/cascade.js

@@ -1,6 +1,6 @@
 export default function cascadeReducers(arg) {
   /*
-  Combined a set of cascading reducers into a single reducer.  Cascading
+  Combine a set of cascading reducers into a single reducer.  Cascading
   reducers are reducers which may rely on state computed by another reducer.
   Therefore, they:
   - must be composed in a particular order (currently, this is a simple
@@ -13,7 +13,7 @@ export default function cascadeReducers(arg) {
   - an array of tuples, [ [key1, reducer1], [key2, reducer2], ... ]
   Ie,  cascadeReducers([ ["a", reduceA], ["b", reduceB] ])
 
-  Each reducer will be called with the sigature:
+  Each reducer will be called with the signature:
       (prevState, action, sharedNextState, sharedPrevState) => newState
 
   cascadeReducers will build a composite newState object, much

client/src/util/stateManager/controlsHelpers.js

@@ -45,7 +45,7 @@ Remember that option values can be ANY js type, except undefined/null.
   }
 */
 function topNCategories(colSchema, summary, N) {
-  /* return top N by occurance in the data, preserving original category order */
+  /* return top N by occurrences in the data, preserving original category order */
   const { categories } = colSchema;
   const counts = categories.map(cat => summary.categoryCounts.get(cat) ?? 0);