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(dashboard): Fix BigNumber causing dashboard to crash when overflowing #19688

Merged
merged 3 commits into from Apr 13, 2022

Conversation

kgabryje
Copy link
Member

SUMMARY

The big number chart (and the whole browser) is crashing when it tries to calculate maximum font size that fits in the chart container. We do this in a loop, which breaks when width and height of big number text is less or equal the width and height of chart container. The loop goes 1) are big number dimensions smaller than chart container? 2) if not, decrease font size by 1, recalculate dimensions, try again. The problem is that under some circumstances the container height passed to chart through props is... negative. That means we'll never satisfy the condition to break the loop and we'll keep decreasing the font size infinitely.
Why is the calculated chart height negative? We calculate it with a formula containerHeight - headerHeight. The problem is that our css allows the header to overflow the container, so headerHeight > containerHeight.
This PR fixes the css so that it doesn't allow title to overflow. I limited the title to maximum 2 lines. If it's truncated, we display a tooltip with a full title on hover.
Moreover, I set the chart to have minimum height of 20px as a failsafe to ensure we never pass a negative value again.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2022-04-13.at.12.56.33.mov

After:

Screen.Recording.2022-04-13.at.12.59.24.mov

TESTING INSTRUCTIONS

dashboard_export_20220413T130001.zip

  1. Import the test dashboard (link above) - it's been prepared to always trigger the bug when you resize the window
  2. Make sure that resizing the browser window doesn't break anything
  3. The max number of lines of chart titles should be 2. If the title is longer, we display a tooltip with a full name.

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

Copy link
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

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

Great work! 🚀 Let's get some more eyes on this just to be safe, but this is a really important fix, therefore tagging it for 1.5 👍

@kgabryje
Copy link
Member Author

kgabryje commented Apr 13, 2022

Note for testers - I'm not going to create an ephemeral test env, as importing the linked test dashboard fails. Please use your local setups

Copy link
Member

@michael-s-molina michael-s-molina left a comment

Choose a reason for hiding this comment

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

LGTM. Thanks for the fix @kgabryje!

@kgabryje kgabryje merged commit ee85466 into apache:master Apr 13, 2022
sadpandajoe pushed a commit to preset-io/superset that referenced this pull request Apr 13, 2022
…wing (apache#19688)

* fix(dashboard): fix(plugin-chart-echarts): Fix BigNumber causing dashboard to crash when overflowing

* Add tooltips for truncated titles

* Fix type

(cherry picked from commit ee85466)
sadpandajoe pushed a commit to preset-io/superset that referenced this pull request Apr 13, 2022
…wing (apache#19688)

* fix(dashboard): fix(plugin-chart-echarts): Fix BigNumber causing dashboard to crash when overflowing

* Add tooltips for truncated titles

* Fix type

(cherry picked from commit ee85466)
@sadpandajoe
Copy link
Contributor

🏷️ preset:2022.13

villebro pushed a commit that referenced this pull request Apr 15, 2022
…wing (#19688)

* fix(dashboard): fix(plugin-chart-echarts): Fix BigNumber causing dashboard to crash when overflowing

* Add tooltips for truncated titles

* Fix type

(cherry picked from commit ee85466)
philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
…wing (apache#19688)

* fix(dashboard): fix(plugin-chart-echarts): Fix BigNumber causing dashboard to crash when overflowing

* Add tooltips for truncated titles

* Fix type
@mistercrunch mistercrunch added 🍒 1.5.0 🍒 1.5.1 🍒 1.5.2 🍒 1.5.3 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels lts-v1 preset:2022.13 size/M 🍒 1.5.0 🍒 1.5.1 🍒 1.5.2 🍒 1.5.3 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants