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] Fixes dragSelect regression. (#29577) (#29589)

Browse source 
Some SCSS still used ml-explorer-swimlane (note the selector without the dot) for rules which referenced the angularjs tag <ml-explorer-swimlane /> which wrapped the swimlane. This element no longer exists in the DOM after the migration to React. Because the selector didn't match anymore, cells in the swimlanes would get a gray border when drag-selecting even if the feature to select a range of cells was turned off.

This fixes it by updating the SCSS to match the corresponding elements again. The referenced classes have been renamed to camelCase + ml-prefix and moved out of the deeply nested code. But no further SCSS refactoring is done in this PR, this is just about fixing this regression. Some legacy CSS from the ml-explorer-swimlane rule has been removed too.
This commit is contained in:
Walter Rafelsberger 2019-02-07 09:37:55 +01:00 • committed by GitHub
parent 7beb98dd56
commit 06d9def36c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

75
x-pack/plugins/ml/public/explorer/_explorer.scss
View file

@ -137,49 +137,6 @@
padding: 0;
margin-bottom: $euiSizeS;
ml-explorer-swimlane {
width: 100%;
height: 250px;
& > .title {
background-color: $euiColorMediumShade;
color: $euiColorEmptyShade;
font-weight: $euiFontWeightBold;
margin-top: 0px;
border-radius: $euiSizeXS/ 2;
margin-bottom: $euiSizeXS;
}
}
ml-explorer-swimlane.ml-dragselect-dragging {
.sl-cell-inner,
.sl-cell-inner-dragselect {
opacity: 0.2;
}
}
ml-explorer-swimlane.ml-hide-range-selection {
div.ml-swimlanes {
div.lane {
div.cells-container {
.sl-cell.ds-selected {
.sl-cell-inner,
.sl-cell-inner-dragselect {
border-width: 0px;
opacity: 1;
}
.sl-cell-inner.sl-cell-inner-selected {
border-width: $euiSizeXS / 2;
}
.sl-cell-inner.sl-cell-inner-masked {
opacity: 0.2;
}
}
}
}
}
}
div.ml-swimlanes {
margin: 0px 0px 0px 10px;
@ -350,5 +307,35 @@
fill: $euiColorDarkShade;
}
}
}
/* using !important in the following rule because other related legacy rules have more specifity. */
.mlDragselectDragging {
.sl-cell-inner,
.sl-cell-inner-dragselect {
opacity: 0.2 !important;
}
}
/* using !important in the following rule because other related legacy rules have more specifity. */
.mlHideRangeSelection {
div.ml-swimlanes {
div.lane {
div.cells-container {
.sl-cell.ds-selected {
.sl-cell-inner,
.sl-cell-inner-dragselect {
border-width: 0px !important;
opacity: 1 !important;
}
.sl-cell-inner.sl-cell-inner-selected {
border-width: $euiSizeXS / 2 !important;
}
.sl-cell-inner.sl-cell-inner-masked {
opacity: 0.2 !important;
}
}
}
}
}
}

21
x-pack/plugins/ml/public/explorer/explorer_swimlane.js
View file

@ -28,6 +28,11 @@ import { mlExplorerDashboardService } from './explorer_dashboard_service';
import { DRAG_SELECT_ACTION } from './explorer_constants';
import { injectI18n } from '@kbn/i18n/react';
const SCSS = {
mlDragselectDragging: 'mlDragselectDragging',
mlHideRangeSelection: 'mlHideRangeSelection'
};
export const ExplorerSwimlane = injectI18n(class ExplorerSwimlane extends React.Component {
static propTypes = {
chartWidth: PropTypes.number.isRequired,
@ -53,13 +58,6 @@ export const ExplorerSwimlane = injectI18n(class ExplorerSwimlane extends React.
}
componentDidMount() {
const element = d3.select(this.rootNode.parentNode);
// Consider the setting to support to select a range of cells
if (!mlExplorerDashboardService.allowCellRangeSelection) {
element.classed('ml-hide-range-selection', true);
}
// save the bound dragSelectListener to this property so it can be accessed again
// in componentWillUnmount(), otherwise mlExplorerDashboardService.dragSelect.unwatch
// is not able to check properly if it's still the same listener
@ -111,7 +109,7 @@ export const ExplorerSwimlane = injectI18n(class ExplorerSwimlane extends React.
this.cellMouseoverActive = true;
} else if (action === DRAG_SELECT_ACTION.ELEMENT_SELECT) {
element.classed('ml-dragselect-dragging', true);
element.classed(SCSS.mlDragselectDragging, true);
return;
} else if (action === DRAG_SELECT_ACTION.DRAG_START) {
this.cellMouseoverActive = false;
@ -119,7 +117,7 @@ export const ExplorerSwimlane = injectI18n(class ExplorerSwimlane extends React.
}
this.previousSelectedData = null;
element.classed('ml-dragselect-dragging', false);
element.classed(SCSS.mlDragselectDragging, false);
elements.map(e => d3.select(e).classed('ds-selected', false));
}
@ -217,6 +215,11 @@ export const ExplorerSwimlane = injectI18n(class ExplorerSwimlane extends React.
renderSwimlane() {
const element = d3.select(this.rootNode.parentNode);
// Consider the setting to support to select a range of cells
if (!mlExplorerDashboardService.allowCellRangeSelection) {
element.classed(SCSS.mlHideRangeSelection, true);
}
const cellMouseoverActive = this.cellMouseoverActive;
const {