From 1547a864c2f5c1bbf30c0b310e4fff47d95115a9 Mon Sep 17 00:00:00 2001
From: Matt Weiden <538456+mweiden@users.noreply.github.com>
Date: Wed, 4 Mar 2020 09:19:12 -0800
Subject: [PATCH] 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   | 17 +++++++++++++----
 client/src/globals.js                           |  2 +-
 client/src/reducers/cascade.js                  |  4 ++--
 client/src/util/stateManager/controlsHelpers.js |  2 +-
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/src/components/categorical/category.js b/client/src/components/categorical/category.js
index db812007..4fda6da9 100644
--- a/client/src/components/categorical/category.js
+++ b/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>
diff --git a/client/src/globals.js b/client/src/globals.js
index 81d43c4c..7948288c 100644
--- a/client/src/globals.js
+++ b/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";
diff --git a/client/src/reducers/cascade.js b/client/src/reducers/cascade.js
index 3ae980ec..3c023f67 100644
--- a/client/src/reducers/cascade.js
+++ b/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
diff --git a/client/src/util/stateManager/controlsHelpers.js b/client/src/util/stateManager/controlsHelpers.js
index a8d1cd56..ed51a652 100644
--- a/client/src/util/stateManager/controlsHelpers.js
+++ b/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);