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>