Skip to content
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

fix: decuple brush cursor from chart rendering #331

Merged
merged 6 commits into from
Aug 21, 2019

Conversation

markov00
Copy link
Member

@markov00 markov00 commented Aug 20, 2019

Summary

This PR remove the unnecessary style recalculation caused by chancing the cursor style on the document body from the chart_state. This was noticeable on this PR elastic/kibana#36517 (review) where the style reflow calculation tooks up to 75ms.

This PR decouple the chart container from the chart renderer, allowing to set correctly the cursor changing the class withour re-rendering the chart component, as the actual implementation.

The cursor style now depends also on the status of the highlighted geometries. If one geometry is highlighted but no onElementClick or onElementOver listener is available, the cursor will be default if the brush is disabled, or crosshair if the brush is Enabled.
The pointer is shown only if we have one between onElementClick or onElementOver enabled and we are over a geometry

no brush no click/over
Aug-21-2019 14-44-00

only brush
Aug-21-2019 14-44-17

brush and click
Aug-21-2019 14-44-30

Checklist

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

  • [ ] Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
  • This was checked for cross-browser compatibility, including a check against IE11
  • [ ] Proper documentation or storybook story was added for features that require explanation or tutorials
  • [ ] Unit tests were updated or added to match the most common scenarios
  • Each commit follows the convention

@markov00 markov00 added the chore label Aug 20, 2019
@markov00 markov00 requested a review from nickofthyme August 20, 2019 18:04
This commit remove the unnecessary style recalculation caused by chancing the cursor style on the
document body from the chart_state. This commit also decouple the chart container from the chart
renderer, removing multiple rendering caused by the mouse leaving the brush area
@markov00 markov00 force-pushed the fix-performance-issues branch from 21d6583 to 83ae1f8 Compare August 20, 2019 18:05
Copy link
Collaborator

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

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

Tested locally and looks good.

However, are we removing the pointer on hover? Looks like that is not showing anymore.

Screen Recording 2019-08-20 at 01 40 PM

.playground/playgroud.tsx Outdated Show resolved Hide resolved
src/chart_types/xy_chart/store/chart_state.ts Show resolved Hide resolved
@markov00
Copy link
Member Author

@nickofthyme I've updated the PR description fixing the pointer on geometries

@markov00 markov00 requested a review from nickofthyme August 21, 2019 12:45
@codecov-io
Copy link

codecov-io commented Aug 21, 2019

Codecov Report

❗ No coverage uploaded for pull request base (master@a9ff5e1). Click here to learn what that means.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff            @@
##             master     #331   +/-   ##
=========================================
  Coverage          ?   98.51%           
=========================================
  Files             ?       38           
  Lines             ?     2689           
  Branches          ?      621           
=========================================
  Hits              ?     2649           
  Misses            ?       37           
  Partials          ?        3
Impacted Files Coverage Δ
src/chart_types/xy_chart/store/chart_state.ts 97.09% <100%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a9ff5e1...1b30f40. Read the comment docs.

Copy link
Collaborator

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

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

LGTM

@markov00 markov00 merged commit 789f85a into elastic:master Aug 21, 2019
markov00 pushed a commit that referenced this pull request Aug 21, 2019
# [10.0.0](v9.2.1...v10.0.0) (2019-08-21)

### Bug Fixes

* **tooltip:** ie11 flex sizing ([#334](#334)) ([abaa472](abaa472)), closes [#332](#332)
* decuple brush cursor from chart rendering ([#331](#331)) ([789f85a](789f85a)), closes [elastic/kibana#36517](elastic/kibana#36517)
* remove clippings from chart geometries ([#320](#320)) ([ed6d0e5](ed6d0e5)), closes [#20](#20)

### Features

* auto legend resize ([#316](#316)) ([659d27e](659d27e)), closes [#268](#268)
* customize number of axis ticks ([#319](#319)) ([2b838d7](2b838d7))
* **theme:** base theme prop ([#333](#333)) ([a9ff5e1](a9ff5e1)), closes [#292](#292)

### BREAKING CHANGES

* **theme:** remove `baseThemeType` prop on `Settings` component and `BaseThemeTypes` type.
* `theme.legend.spacingBuffer` added to `Theme` type. Controls the width buffer between the legend label and value.
@markov00
Copy link
Member Author

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Aug 21, 2019
@markov00 markov00 deleted the fix-performance-issues branch November 25, 2020 11:45
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
# [10.0.0](elastic/elastic-charts@v9.2.1...v10.0.0) (2019-08-21)

### Bug Fixes

* **tooltip:** ie11 flex sizing ([opensearch-project#334](elastic/elastic-charts#334)) ([2683333](elastic/elastic-charts@2683333)), closes [opensearch-project#332](elastic/elastic-charts#332)
* decuple brush cursor from chart rendering ([opensearch-project#331](elastic/elastic-charts#331)) ([b5b8dde](elastic/elastic-charts@b5b8dde)), closes [elastic/kibana#36517](elastic/kibana#36517)
* remove clippings from chart geometries ([opensearch-project#320](elastic/elastic-charts#320)) ([497efa4](elastic/elastic-charts@497efa4)), closes [opensearch-project#20](elastic/elastic-charts#20)

### Features

* auto legend resize ([opensearch-project#316](elastic/elastic-charts#316)) ([be4a53d](elastic/elastic-charts@be4a53d)), closes [opensearch-project#268](elastic/elastic-charts#268)
* customize number of axis ticks ([opensearch-project#319](elastic/elastic-charts#319)) ([a7a4ecd](elastic/elastic-charts@a7a4ecd))
* **theme:** base theme prop ([opensearch-project#333](elastic/elastic-charts#333)) ([0b38770](elastic/elastic-charts@0b38770)), closes [opensearch-project#292](elastic/elastic-charts#292)

### BREAKING CHANGES

* **theme:** remove `baseThemeType` prop on `Settings` component and `BaseThemeTypes` type.
* `theme.legend.spacingBuffer` added to `Theme` type. Controls the width buffer between the legend label and value.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore released Issue released publicly
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants