Skip to content

[ML] Fix tooltip positioning.#49160

Merged
walterra merged 5 commits intoelastic:masterfrom
walterra:ml-fix-tooltip-position-2
Oct 24, 2019
Merged

[ML] Fix tooltip positioning.#49160
walterra merged 5 commits intoelastic:masterfrom
walterra:ml-fix-tooltip-position-2

Conversation

@walterra
Copy link
Copy Markdown
Contributor

@walterra walterra commented Oct 24, 2019

Summary

Fixes #48868.

  • Moves all DOM manipulation to a ref callback for the ChartTooltip react component. The service mlChartTooltipService no longer touches the DOM, it just passed around data and triggers the chartTooltip$ observable which the ChartTooltip is subscribed to. The code infers positioning now from the tooltips parent element and we no longer rely on hard-coded Kibana classnames. Besides that the code to determine the position remains the same (with some offset tweaking).
  • The mocha tests for mlChartTooltipService have been migrated to jest.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

For maintainers

@walterra walterra added bug Fixes for quality problems that affect the customer experience regression :ml Feature:Anomaly Detection ML anomaly detection v8.0.0 v7.5.0 v7.6.0 labels Oct 24, 2019
@walterra walterra requested a review from a team as a code owner October 24, 2019 10:43
@walterra walterra self-assigned this Oct 24, 2019
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/ml-ui (:ml)

@walterra walterra added the release_note:skip Skip the PR/issue when compiling release notes label Oct 24, 2019
@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

const chartTooltipState = useObservable(chartTooltip$);
const ref = useRef<RefValue>(null);

return (node: RefValue) => {
Copy link
Copy Markdown
Member

@jgowdyelastic jgowdyelastic Oct 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could return a named function called something like setChartTooltipElement?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a wrapper for useRef() which just returns one object also, so I'd like to keep it the same (https://reactjs.org/docs/hooks-reference.html#useref)

Copy link
Copy Markdown
Member

@jgowdyelastic jgowdyelastic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Copy link
Copy Markdown
Contributor

@peteharverson peteharverson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested latest updates, including on IE11, and LGTM!

@walterra walterra requested a review from darnautov October 24, 2019 15:26
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@walterra walterra merged commit 88f0eba into elastic:master Oct 24, 2019
@walterra walterra deleted the ml-fix-tooltip-position-2 branch October 24, 2019 16:14
walterra added a commit to walterra/kibana that referenced this pull request Oct 24, 2019
- Moves all DOM manipulation to a ref callback for the ChartTooltip react component. The service mlChartTooltipService no longer touches the DOM, it just passed around data and triggers the chartTooltip$ observable which the ChartTooltip is subscribed to. The code infers positioning now from the tooltips parent element and we no longer rely on hard-coded Kibana classnames. Besides that the code to determine the position remains the same (with some offset tweaking).
- The mocha tests for mlChartTooltipService have been migrated to jest.
walterra added a commit to walterra/kibana that referenced this pull request Oct 24, 2019
- Moves all DOM manipulation to a ref callback for the ChartTooltip react component. The service mlChartTooltipService no longer touches the DOM, it just passed around data and triggers the chartTooltip$ observable which the ChartTooltip is subscribed to. The code infers positioning now from the tooltips parent element and we no longer rely on hard-coded Kibana classnames. Besides that the code to determine the position remains the same (with some offset tweaking).
- The mocha tests for mlChartTooltipService have been migrated to jest.
walterra added a commit that referenced this pull request Oct 25, 2019
- Moves all DOM manipulation to a ref callback for the ChartTooltip react component. The service mlChartTooltipService no longer touches the DOM, it just passed around data and triggers the chartTooltip$ observable which the ChartTooltip is subscribed to. The code infers positioning now from the tooltips parent element and we no longer rely on hard-coded Kibana classnames. Besides that the code to determine the position remains the same (with some offset tweaking).
- The mocha tests for mlChartTooltipService have been migrated to jest.
walterra added a commit that referenced this pull request Oct 25, 2019
- Moves all DOM manipulation to a ref callback for the ChartTooltip react component. The service mlChartTooltipService no longer touches the DOM, it just passed around data and triggers the chartTooltip$ observable which the ChartTooltip is subscribed to. The code infers positioning now from the tooltips parent element and we no longer rely on hard-coded Kibana classnames. Besides that the code to determine the position remains the same (with some offset tweaking).
- The mocha tests for mlChartTooltipService have been migrated to jest.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Fixes for quality problems that affect the customer experience Feature:Anomaly Detection ML anomaly detection :ml regression release_note:skip Skip the PR/issue when compiling release notes v7.5.0 v7.6.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ML] Single metric viewer - tooltip cut off when hovering list entry

4 participants