check if bin creation returned null before rendering charts (#1576)

* check if bin creation returned null before rendering charts

* refactor chart rendering into functions (#1577)

* little fixes from PR

* reintroduce fix to check for null values

* change getAllByClass to return element

* slice instead

* new stackedbar test

* feedback-1573-test (#1579)

* feedback-1573-test

* enable whole test set

* revert tests

Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>

client/src/components/categorical/value/index.js

@@ -22,11 +22,14 @@ import { labelPrompt, isLabelErroneous } from "../labelUtil";
 import MiniHistogram from "../../miniHistogram";
 import MiniStackedBar from "../../miniStackedBar";
 
+const VALUE_HEIGHT = 11;
+const CHART_WIDTH = 100;
+
 /* this is defined outside of the class so we can use it in connect() */
 function _currentLabelAsString(ownProps) {
   const { categorySummary, categoryIndex } = ownProps;
   // when called as a function, the String() constructor performs type conversion,
-  // and returns a primtive string.
+  // and returns a primitive string.
   return String(categorySummary.categoryValues[categoryIndex]);
 }
 
@@ -76,6 +79,13 @@ class CategoryValue extends React.Component {
     }
   }
 
+  // If coloring by and this isn't the colorAccessor and it isn't being edited
+  get shouldRenderStackedBarOrHistogram() {
+    const { colorAccessor, isColorBy, annotations } = this.props;
+
+    return colorAccessor && !isColorBy && !annotations.isEditingLabelName;
+  }
+
   getLabel() {
     const { categoryIndex, categorySummary } = this.props;
     const label = categorySummary.categoryValues[categoryIndex];
@@ -408,6 +418,99 @@ class CategoryValue extends React.Component {
     return false;
   }
 
+  renderMiniStackedBar = (categoryValue) => {
+    const {
+      categoricalSelection,
+      colorAccessor,
+      colorScale,
+      metadataField,
+      world,
+    } = this.props;
+
+    const isColorBy = metadataField === colorAccessor;
+
+    if (
+      !this.shouldRenderStackedBarOrHistogram ||
+      !categoricalSelection[colorAccessor] ||
+      isColorBy
+    ) {
+      return null;
+    }
+
+    const { domainValues, scale, domain, occupancy } =
+      this.createStackedGraphBins(
+        world,
+        metadataField,
+        colorAccessor,
+        categoryValue,
+        CHART_WIDTH
+      ) ?? {};
+
+    if (!domainValues || !scale || !domain || !occupancy) {
+      return null;
+    }
+
+    return (
+      <MiniStackedBar
+        /* eslint-disable react/jsx-props-no-spreading -- Disable unneeded on next release of eslint-config-airbnb */
+        {...{
+          colorScale,
+          domainValues,
+          scale,
+          domain,
+          occupancy,
+        }}
+        /* eslint-enable react/jsx-props-no-spreading -- enable */
+        height={VALUE_HEIGHT}
+        width={CHART_WIDTH}
+      />
+    );
+  };
+
+  renderMiniHistogram = (categoryValue) => {
+    const {
+      categoricalSelection,
+      colorAccessor,
+      colorScale,
+      world,
+      metadataField,
+    } = this.props;
+
+    if (
+      !this.shouldRenderStackedBarOrHistogram ||
+      categoricalSelection[colorAccessor]
+    ) {
+      return null;
+    }
+
+    const { xScale, yScale, bins } =
+      this.createHistogramBins(
+        world,
+        metadataField,
+        colorAccessor,
+        categoryValue,
+        CHART_WIDTH,
+        VALUE_HEIGHT
+      ) ?? {};
+
+    return (
+      <MiniHistogram
+        /* eslint-disable react/jsx-props-no-spreading -- Disable unneeded on next release of eslint-config-airbnb */
+        {...{
+          colorScale,
+          xScale,
+          yScale,
+          bins,
+        }}
+        /* eslint-enable react/jsx-props-no-spreading -- enable */
+        obsOrVarContinuousFieldDisplayName={colorAccessor}
+        domainLabel={categoryValue}
+        height={VALUE_HEIGHT}
+        width={CHART_WIDTH}
+      />
+    );
+  };
+
   render() {
     const {
       categoricalSelection,
@@ -424,7 +527,6 @@ class CategoryValue extends React.Component {
       // our lint doesn't like jsx spread, we are version pinned to prevent api change on their part
       flippedProps,
       isDilated,
-      world,
       categorySummary,
     } = this.props;
     const ontologyEnabled = ontology?.enabled ?? false;
@@ -455,12 +557,12 @@ class CategoryValue extends React.Component {
 
     const valueToggleLabel = `value-toggle-checkbox-${displayString}`;
 
-    const VALUE_HEIGHT = 11;
     const LEFT_MARGIN = 60;
     const CHECKBOX = 26;
     const CELL_NUMBER = 50;
     const ANNO_MENU = 26;
     const LABEL_MARGIN = 16;
+    const CHART_MARGIN = 24;
 
     const otherElementsWidth =
       LEFT_MARGIN +
@@ -469,9 +571,6 @@ class CategoryValue extends React.Component {
       LABEL_MARGIN +
       (isUserAnno ? ANNO_MENU : 0);
 
-    const CHART_WIDTH = 100;
-    const CHART_MARGIN = 24;
-
     const labelWidth =
       colorAccessor && !isColorBy
         ? globals.leftSidebarWidth -
@@ -596,46 +695,8 @@ class CategoryValue extends React.Component {
             ) : null}
           </div>
           <span style={{ flexShrink: 0 }}>
-            {colorAccessor && !isColorBy && !annotations.isEditingLabelName ? (
+            {this.renderMiniStackedBar(value)}
-              categoricalSelection[colorAccessor] ? (
+            {this.renderMiniHistogram(value)}
-                <MiniStackedBar
-                  /* eslint-disable react/jsx-props-no-spreading -- Disable unneeded on next release of eslint-config-airbnb */
-                  {...{
-                    colorScale,
-                    ...this.createStackedGraphBins(
-                      world,
-                      metadataField,
-                      colorAccessor,
-                      value,
-                      CHART_WIDTH
-                    ),
-                  }}
-                  /* eslint-enable react/jsx-props-no-spreading -- enable */
-                  height={VALUE_HEIGHT}
-                  width={CHART_WIDTH}
-                />
-              ) : (
-                <MiniHistogram
-                  /* eslint-disable react/jsx-props-no-spreading -- Disable unneeded on next release of eslint-config-airbnb */
-                  {...{
-                    colorScale,
-                    ...this.createHistogramBins(
-                      world,
-                      metadataField,
-                      colorAccessor,
-                      value,
-                      CHART_WIDTH,
-                      VALUE_HEIGHT
-                    ),
-                  }}
-                  /* eslint-enable react/jsx-props-no-spreading -- enable */
-                  obsOrVarContinuousFieldDisplayName={colorAccessor}
-                  domainLabel={value}
-                  height={VALUE_HEIGHT}
-                  width={CHART_WIDTH}
-                />
-              )
-            ) : null}
           </span>
         </div>
         <div>