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: Table Autosizing Has Unnecessary Horizontal Scroll Bars #19628

Conversation

diegomedina248
Copy link
Contributor

SUMMARY

On Table Charts, the auto-sizing in table charts forces a scroll bar in and expands the cells even when there is space available.
This implements a scroll bar and takes away additional space that isn't needed. For example - a table chart with 6 columns and enough empty space will still implement a scroll.

The issue why this is happening is that, when calculating the columns width, we're using the clientWidth, which rounds the number. So, the total width of the table could be 1000, but due to rounding, the sum of the columns could yield 1001 and thus causing the scrollbar to appear.

This PR switches the width calculation to getBoundingClientRect, which does gives the result without rounding (we're still defaulting to clientWidth, just in case).

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2022-04-08.at.17.20.36.mov

After:

new.mov

TESTING INSTRUCTIONS

  1. Create a chart table
  2. Add some columns to it
  3. Run the query

The chart, if no width is specified to any of it's column, should take the width of the panel and don't show the horizontal scrollbar

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

@codecov
Copy link

codecov bot commented Apr 8, 2022

Codecov Report

Merging #19628 (1dbc389) into master (1ad82af) will decrease coverage by 0.03%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master   #19628      +/-   ##
==========================================
- Coverage   66.53%   66.49%   -0.04%     
==========================================
  Files        1681     1681              
  Lines       64319    64371      +52     
  Branches     6564     6583      +19     
==========================================
+ Hits        42793    42803      +10     
- Misses      19853    19887      +34     
- Partials     1673     1681       +8     
Flag Coverage Δ
javascript 51.16% <0.00%> (-0.06%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...ugin-chart-table/src/DataTable/hooks/useSticky.tsx 4.21% <0.00%> (-0.05%) ⬇️
...s/CRUD/data/database/DatabaseModal/ModalHeader.tsx 66.66% <0.00%> (-3.71%) ⬇️
...c/views/CRUD/data/database/DatabaseModal/index.tsx 31.80% <0.00%> (-1.00%) ⬇️
superset-frontend/src/components/Button/index.tsx 100.00% <0.00%> (ø)
superset-frontend/src/views/CRUD/hooks.ts 46.40% <0.00%> (+0.04%) ⬆️
...tend/src/views/CRUD/data/database/DatabaseList.tsx 67.94% <0.00%> (+0.55%) ⬆️
...c/views/CRUD/data/database/DatabaseModal/styles.ts 76.69% <0.00%> (+0.69%) ⬆️

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 1ad82af...1dbc389. Read the comment docs.

@rusackas rusackas merged commit 9554135 into apache:master Apr 11, 2022
philipher29 pushed a commit to ValtechMobility/superset that referenced this pull request Jun 9, 2022
@mistercrunch mistercrunch added 🏷️ 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 Preset-Patch size/XS 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants