github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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.
This commit is contained in:
Walter Rafelsberger 2020-02-14 15:01:36 +01:00 • committed by GitHub
parent a43ce0aa65
commit d9becbb052
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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) {