If min / max are the same, hide histo + legend, show value (#1554)

* hide legend, histo single value

* display block

* extra check for domain

* Update client/src/components/continuousLegend/index.js

Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>

* readability on variables, use clipped ranges

Co-authored-by: Severiano Badajoz <sbadajoz@chanzuckerberg.com>

client/src/components/brushableHistogram/index.js

@@ -465,6 +465,7 @@ class HistogramBrush extends React.PureComponent {
       isScatterplotXXaccessor,
       isScatterplotYYaccessor,
       zebra,
+      ranges,
     } = this.props;
     const fieldForId = field.replace(/\s/g, "_");
     const {
@@ -476,6 +477,8 @@ class HistogramBrush extends React.PureComponent {
     const unclippedRangeMaxColor =
       world.clipQuantiles.max === 1 ? "#bbb" : globals.blue;
 
+    const isSingleValue = ranges?.min === ranges?.max;
+
     return (
       <div
         id={`histogram_${fieldForId}`}
@@ -554,6 +557,7 @@ class HistogramBrush extends React.PureComponent {
           </Tooltip>
         </div>
         <svg
+          style={{ display: isSingleValue ? "none" : "block" }}
           width={this.width}
           height={this.height}
           id={`histogram_${fieldForId}_svg`}
@@ -564,10 +568,15 @@ class HistogramBrush extends React.PureComponent {
         <div
           style={{
             display: "flex",
-            justifyContent: "space-between",
+            justifyContent: isSingleValue ? "center" : "space-between",
           }}
         >
-          <span style={{ color: unclippedRangeMinColor }}>
+          <span
+            style={{
+              color: unclippedRangeMinColor,
+              display: isSingleValue ? "none" : "block",
+            }}
+          >
             min {unclippedRangeMin.toPrecision(4)}
           </span>
           <span
@@ -576,7 +585,15 @@ class HistogramBrush extends React.PureComponent {
           >
             {field}
           </span>
-          <span style={{ color: unclippedRangeMaxColor }}>
+          <div style={{ display: isSingleValue ? "block" : "none" }}>
+            : {unclippedRangeMin}
+          </div>
+          <span
+            style={{
+              color: unclippedRangeMaxColor,
+              display: isSingleValue ? "none" : "block",
+            }}
+          >
             max {unclippedRangeMax.toPrecision(4)}
           </span>
         </div>

client/src/components/continuousLegend/index.js

@@ -107,6 +107,9 @@ const continuous = (selectorId, colorscale, colorAccessor) => {
 class ContinuousLegend extends React.Component {
   componentDidUpdate(prevProps) {
     const { colorAccessor, colorScale } = this.props;
+    const range = colorScale?.range;
+    const [domainMin, domainMax] = colorScale?.domain?.() ?? [0, 0];
+
     if (
       prevProps.colorAccessor !== colorAccessor ||
       prevProps.colorScale !== colorScale
@@ -115,9 +118,9 @@ class ContinuousLegend extends React.Component {
       d3.select("#continuous_legend").selectAll("*").remove();
     }
 
-    if (colorAccessor && colorScale && colorScale.range) {
+    if (colorAccessor && colorScale && range && domainMin < domainMax) {
       /* fragile! continuous range is 0 to 1, not [#fa4b2c, ...], make this a flag? */
-      if (colorScale.range()[0][0] !== "#") {
+      if (range()[0][0] !== "#") {
         continuous(
           "#continuous_legend",
           d3.scaleSequential(interpolateCool).domain(colorScale.domain()),
@@ -128,7 +131,15 @@ class ContinuousLegend extends React.Component {
   }
 
   render() {
-    const { colorAccessor } = this.props;
+    const { colorAccessor, colorScale } = this.props;
+
+    if (
+      colorScale?.domain &&
+      colorScale.domain()[1] === colorScale.domain()[0]
+    ) {
+      /* it's a single value, not a distribution, min max are the same */
+      return null;
+    }
     return (
       <div
         id="continuous_legend"