-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ML] Deprecates the use of jQuery for rendering Anomaly Explorer Swimlanes #23000
Conversation
Pinging @elastic/ml-ui |
💔 Build Failed |
retest |
$('.sl-cell-inner,.sl-cell-inner-dragselect', '.ml-explorer-swimlane').addClass('sl-cell-inner-masked'); | ||
$('.sl-cell-inner.sl-cell-inner-selected,.sl-cell-inner-dragselect.sl-cell-inner-selected', | ||
'.ml-explorer-swimlane').removeClass('sl-cell-inner-selected'); | ||
// This select both overall and viewby swimlane |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit - should be This selects ...
$('.sl-cell-inner-dragselect.sl-cell-inner-selected', '.ml-explorer-swimlane').removeClass('sl-cell-inner-selected'); | ||
$('.ds-selected', '.ml-explorer-swimlane').removeClass('ds-selected'); | ||
|
||
// This select both overall and viewby swimlane |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit - should be selects
return (e) => { | ||
cellMouseover(e, safeLaneTxt, bucketScore, i, time); | ||
}; | ||
const safeLaneTxt = lane.replace(/(['\\])/g, '\\$1'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have you tested this with any datasets which contain partitioning field names and values with 'special' characters in, such as quotes, spaces, backslashes. Just worth double checking that all the functionality works as expected.
💚 Build Succeeded |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Latest changes LGTM
💚 Build Succeeded |
…lanes (elastic#23000) - This refactor gets rid of jQuery as a requirement for the Anomaly Explorer Swimlanes. All the DOM manipulation previously done by jQuery is now done by d3. - The primary aim here is to replace jQuery with d3. To avoid refactoring regressions, this PR sticks as much as possible to the original structure. Overall, this could be done in a more "d3"-way, but it's a good start. - The resulting DOM is a bit different: The structure is exactly the same, just how we use certain data-attributes changed. - Instead of using jQuery's data-feature for storing click event data, that data is now directly stored on DOM nodes. Again, this could be done in a more "d3"-way but would require quite some further refactoring.
…lanes (#23000) (#23193) - This refactor gets rid of jQuery as a requirement for the Anomaly Explorer Swimlanes. All the DOM manipulation previously done by jQuery is now done by d3. - The primary aim here is to replace jQuery with d3. To avoid refactoring regressions, this PR sticks as much as possible to the original structure. Overall, this could be done in a more "d3"-way, but it's a good start. - The resulting DOM is a bit different: The structure is exactly the same, just how we use certain data-attributes changed. - Instead of using jQuery's data-feature for storing click event data, that data is now directly stored on DOM nodes. Again, this could be done in a more "d3"-way but would require quite some further refactoring.
This refactor gets rid of jQuery as a requirement for the Anomaly Explorer Swimlanes. All the DOM manipulation previously done by jQuery is now done by d3.
Notes:
Possible Todos for a follow-up:
clearSelection()
orselectCell()
shouldn't really manipulate the DOM. They should just manipulate state and trigger a re-render. The rendering function then should take care of considering that state change and render accordingly.Part of #22642.