[ML] Fix brush visibility. (#57564) (#57678)

Fixes brush visibility. The brush will no longer be hidden if it covers the full available timespan. Removes all code that was earlier used to manage brush visibility.

Author: walterra

x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js

@@ -432,11 +432,8 @@ const TimeseriesChartIntl = injectI18n(
       }
       focusLoadTo = Math.min(focusLoadTo, contextXMax);
 
-      const brushVisibility = focusLoadFrom !== contextXMin || focusLoadTo !== contextXMax;
-      this.setBrushVisibility(brushVisibility);
-
       if (focusLoadFrom !== contextXMin || focusLoadTo !== contextXMax) {
-        this.setContextBrushExtent(new Date(focusLoadFrom), new Date(focusLoadTo), true);
+        this.setContextBrushExtent(new Date(focusLoadFrom), new Date(focusLoadTo));
         const newSelectedBounds = {
           min: moment(new Date(focusLoadFrom)),
           max: moment(focusLoadFrom),
@@ -450,6 +447,10 @@ const TimeseriesChartIntl = injectI18n(
         };
         if (!_.isEqual(newSelectedBounds, this.selectedBounds)) {
           this.selectedBounds = newSelectedBounds;
+          this.setContextBrushExtent(
+            new Date(contextXScaleDomain[0]),
+            new Date(contextXScaleDomain[1])
+          );
           if (this.contextChartInitialized === false) {
             this.contextChartInitialized = true;
             contextChartSelected({ from: contextXScaleDomain[0], to: contextXScaleDomain[1] });
@@ -1194,36 +1195,29 @@ const TimeseriesChartIntl = injectI18n(
           '<div class="brush-handle-inner brush-handle-inner-right"><i class="fa fa-caret-right"></i></div>'
         );
 
-      const showBrush = show => {
-        if (show === true) {
-          const brushExtent = brush.extent();
-          mask.reveal(brushExtent);
-          leftHandle.attr('x', contextXScale(brushExtent[0]) - 10);
-          rightHandle.attr('x', contextXScale(brushExtent[1]) + 0);
-
-          topBorder.attr('x', contextXScale(brushExtent[0]) + 1);
-          // Use Math.max(0, ...) to make sure we don't end up
-          // with a negative width which would cause an SVG error.
-          topBorder.attr(
-            'width',
-            Math.max(0, contextXScale(brushExtent[1]) - contextXScale(brushExtent[0]) - 2)
-          );
-        }
-
-        this.setBrushVisibility(show);
-      };
-
-      showBrush(!brush.empty());
-
       function brushing() {
+        const brushExtent = brush.extent();
+        mask.reveal(brushExtent);
+        leftHandle.attr('x', contextXScale(brushExtent[0]) - 10);
+        rightHandle.attr('x', contextXScale(brushExtent[1]) + 0);
+
+        topBorder.attr('x', contextXScale(brushExtent[0]) + 1);
+        // Use Math.max(0, ...) to make sure we don't end up
+        // with a negative width which would cause an SVG error.
+        const topBorderWidth = Math.max(
+          0,
+          contextXScale(brushExtent[1]) - contextXScale(brushExtent[0]) - 2
+        );
+        topBorder.attr('width', topBorderWidth);
+
         const isEmpty = brush.empty();
-        showBrush(!isEmpty);
+        d3.selectAll('.brush-handle').style('visibility', isEmpty ? 'hidden' : 'visible');
       }
+      brushing();
 
       const that = this;
       function brushed() {
         const isEmpty = brush.empty();
-
         const selectedBounds = isEmpty ? contextXScale.domain() : brush.extent();
         const selectionMin = selectedBounds[0].getTime();
         const selectionMax = selectedBounds[1].getTime();
@@ -1237,8 +1231,6 @@ const TimeseriesChartIntl = injectI18n(
           return;
         }
 
-        showBrush(!isEmpty);
-
         // Set the color of the swimlane cells according to whether they are inside the selection.
         contextGroup.selectAll('.swimlane-cell').style('fill', d => {
           const cellMs = d.date.getTime();
@@ -1254,26 +1246,6 @@ const TimeseriesChartIntl = injectI18n(
       }
     };
 
-    setBrushVisibility = show => {
-      const mask = this.mask;
-
-      if (mask !== undefined) {
-        const visibility = show ? 'visible' : 'hidden';
-        mask.style('visibility', visibility);
-
-        d3.selectAll('.brush').style('visibility', visibility);
-
-        const brushHandles = d3.selectAll('.brush-handle-inner');
-        brushHandles.style('visibility', visibility);
-
-        const topBorder = d3.selectAll('.top-border');
-        topBorder.style('visibility', visibility);
-
-        const border = d3.selectAll('.chart-border-highlight');
-        border.style('visibility', visibility);
-      }
-    };
-
     drawSwimlane = (swlGroup, swlWidth, swlHeight) => {
       const { contextAggregationInterval, swimlaneData } = this.props;
 
@@ -1384,21 +1356,18 @@ const TimeseriesChartIntl = injectI18n(
 
     // Sets the extent of the brush on the context chart to the
     // supplied from and to Date objects.
-    setContextBrushExtent = (from, to, fireEvent) => {
+    setContextBrushExtent = (from, to) => {
       const brush = this.brush;
       const brushExtent = brush.extent();
 
       const newExtent = [from, to];
-      if (
-        newExtent[0].getTime() === brushExtent[0].getTime() &&
-        newExtent[1].getTime() === brushExtent[1].getTime()
-      ) {
-        fireEvent = false;
-      }
-
       brush.extent(newExtent);
       brush(d3.select('.brush'));
-      if (fireEvent) {
+
+      if (
+        newExtent[0].getTime() !== brushExtent[0].getTime() ||
+        newExtent[1].getTime() !== brushExtent[1].getTime()
+      ) {
         brush.event(d3.select('.brush'));
       }
     };
@@ -1419,7 +1388,7 @@ const TimeseriesChartIntl = injectI18n(
         to = Math.min(minBoundsMs + millis, maxBoundsMs);
       }
 
-      this.setContextBrushExtent(new Date(from), new Date(to), true);
+      this.setContextBrushExtent(new Date(from), new Date(to));
     }
 
     showFocusChartTooltip(marker, circle) {