[ML] Fix brush visibility. (#57564)

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.
elastic · Feb 14, 2020 · c1cf489 · c1cf489
1 parent 979c1d2
commit c1cf489
Showing 1 changed file with 28 additions and 59 deletions.
diff --git a/.../ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/.../ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -424,11 +424,8 @@ class TimeseriesChartIntl extends Component {
     }
     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),
@@ -442,6 +439,10 @@ class TimeseriesChartIntl extends Component {
       };
       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] });
@@ -1178,36 +1179,29 @@ class TimeseriesChartIntl extends Component {
         '<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();
@@ -1221,8 +1215,6 @@ class TimeseriesChartIntl extends Component {
         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();
@@ -1238,26 +1230,6 @@ class TimeseriesChartIntl extends Component {
     }
   };
 
-  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;
 
@@ -1368,21 +1340,18 @@ class TimeseriesChartIntl extends Component {
 
   // 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'));
     }
   };
@@ -1403,7 +1372,7 @@ class TimeseriesChartIntl extends Component {
       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) {