fix(explore): make horizontal scroll appears in data panel #13566

stephenLYZ · 2021-03-11T06:48:37Z

SUMMARY

Because the height of the tabpanel is higher than the height of the outer parent, the horizontal scroll bar is squeezed below.
Here need to minus some height to show horizontal scroll bar. Also the pagination's padding-bottom should be set to zero which causes a row is appearing bellow the component.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

After

TEST PLAN

ADDITIONAL INFORMATION

Has associated issue: Fixes Horizontal scroll not working in explore data panel #12891
Changes UI
Requires DB Migration.
Confirm DB Migration upgrade and downgrade tested.
Introduces new feature or API
Removes existing feature or API

Merge master change

Merge master

junlincc · 2021-03-11T21:53:01Z

Many thanks for the PR! 🙏

@villebro @rusackas
Hey Ville and Evan, Stephen is a developer that me and Yongjie "interviewed" last week, he picked out a task from bash! and opened this PR as requested. please review. :)

cc @ktmud as you recently touched this area as well.

junlincc · 2021-03-19T04:04:58Z

/testenv up

junlincc · 2021-03-19T04:05:57Z

@kgabryje ^ you wanna take a look and let us know your thoughts? thanks!

zhaoyongjie · 2021-03-19T04:15:01Z

@stephenLYZ could you fix the lint in this PR?

github-actions · 2021-03-19T04:36:24Z

@junlincc Container image not yet published for this PR. Please try again when build is complete.

github-actions · 2021-03-19T04:36:24Z

@junlincc Ephemeral environment creation failed. Please check the Actions logs for details.

stephenLYZ · 2021-03-19T06:46:32Z

@zhaoyongjie done

kgabryje · 2021-03-19T08:57:21Z

superset-frontend/src/explore/components/DataTablesPane.tsx

@@ -271,7 +271,7 @@ export const DataTablesPane = ({
              height: 100%;

              .ant-collapse-content {
-                height: 100%;
+                height: calc(100% - 33px);


Can we use theme.gridUnit * 8 instead of 33px?

ye！It's better than hardcode

done, please review @kgabryje, thanks!

kgabryje · 2021-03-19T09:00:41Z

1 nit, other than that LGTM.
@junlincc What do you think about displaying horizontal scrollbar permanently so that user knows that there are more columns? It should work on Chrome and Safari (not Firefox though).

stephenLYZ · 2021-03-19T11:53:27Z

1 nit, other than that LGTM.
@junlincc What do you think about displaying horizontal scrollbar permanently so that user knows that there are more columns? It should work on Chrome and Safari (not Firefox though).

How about show all columns like chart table which is responsive?

codecov · 2021-03-21T15:25:49Z

Codecov Report

Merging #13566 (e39d79d) into master (5fca19d) will decrease coverage by 4.42%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #13566      +/-   ##
==========================================
- Coverage   77.53%   73.11%   -4.43%     
==========================================
  Files         904      615     -289     
  Lines       45986    21876   -24110     
  Branches     5552     5812     +260     
==========================================
- Hits        35657    15995   -19662     
+ Misses      10195     5738    -4457     
- Partials      134      143       +9

Flag	Coverage Δ
cypress	`56.44% <100.00%> (-0.77%)`	⬇️
hive	`?`
javascript	`63.13% <50.00%> (-0.25%)`	⬇️
mysql	`?`
postgres	`?`
presto	`?`
python	`?`
sqlite	`?`

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

Impacted Files	Coverage Δ
...et-frontend/src/components/TableView/TableView.tsx	`96.42% <ø> (ø)`
...frontend/src/explore/components/DataTablesPane.tsx	`62.96% <100.00%> (+0.93%)`	⬆️
...s/nativeFilters/FilterBar/CascadeFilterControl.tsx	`64.28% <0.00%> (-21.43%)`	⬇️
...hboard/components/nativeFilters/FilterBar/state.ts	`85.71% <0.00%> (-14.29%)`	⬇️
...ponents/nativeFilters/FilterBar/CascadePopover.tsx	`83.09% <0.00%> (-14.09%)`	⬇️
...tend/src/filters/components/Select/controlPanel.ts	`20.00% <0.00%> (-13.34%)`	⬇️
...odal/FiltersConfigForm/FilterScope/FilterScope.tsx	`86.20% <0.00%> (-9.95%)`	⬇️
...src/dashboard/components/FiltersBadge/selectors.ts	`80.58% <0.00%> (-9.90%)`	⬇️
...ents/nativeFilters/FilterBar/FilterSets/Footer.tsx	`47.61% <0.00%> (-8.64%)`	⬇️
superset-frontend/src/common/components/Select.tsx	`91.66% <0.00%> (-8.34%)`	⬇️
... and 407 more

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 5fca19d...e39d79d. Read the comment docs.

villebro

LGTM!

junlin-qa

Responsiveness is probably better in this case. lets merge! 🎉 thank you stephen!!

) * fix(explore): make horizontal scroll appear * fix(explore): 34px -> 33px * fix(lint): dataTablesPane lint * fix(lint): prettier dataTablesPane * fix(explore): use gridUnit rather than hardcode Co-authored-by: liuyaozong <[email protected]>

stephenLYZ and others added 4 commits March 10, 2021 10:53

Merge pull request #1 from apache/master

549afdb

Merge master change

Merge pull request #2 from apache/master

365095b

Merge master

fix(explore): make horizontal scroll appear

801922b

fix(explore): 34px -> 33px

a589e99

pull-request-size bot added the size/XS label Mar 11, 2021

junlincc requested a review from villebro March 11, 2021 21:43

junlincc added new:contributor The author is a new contributor explore Namespace | Anything related to Explore labels Mar 11, 2021

junlincc requested a review from rusackas March 11, 2021 21:54

zhaoyongjie closed this Mar 19, 2021

zhaoyongjie reopened this Mar 19, 2021

apache deleted a comment from github-actions bot Mar 19, 2021

liuyaozong added 2 commits March 19, 2021 13:48

fix(lint): dataTablesPane lint

cfd1522

fix(lint): prettier dataTablesPane

c252abb

pull-request-size bot added size/S and removed size/XS labels Mar 19, 2021

kgabryje reviewed Mar 19, 2021

View reviewed changes

fix(explore): use gridUnit rather than hardcode

e39d79d

pull-request-size bot added size/M and removed size/S labels Mar 21, 2021

villebro approved these changes Mar 24, 2021

View reviewed changes

junlin-qa approved these changes Mar 24, 2021

View reviewed changes

villebro merged commit f18d14a into apache:master Mar 24, 2021

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.2.0 labels Mar 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(explore): make horizontal scroll appears in data panel #13566

fix(explore): make horizontal scroll appears in data panel #13566

stephenLYZ commented Mar 11, 2021

junlincc commented Mar 11, 2021 •

edited

Loading

junlincc commented Mar 19, 2021

junlincc commented Mar 19, 2021

zhaoyongjie commented Mar 19, 2021

github-actions bot commented Mar 19, 2021

github-actions bot commented Mar 19, 2021

stephenLYZ commented Mar 19, 2021

kgabryje Mar 19, 2021

stephenLYZ Mar 19, 2021

stephenLYZ Mar 24, 2021 •

edited

Loading

kgabryje Mar 24, 2021

kgabryje commented Mar 19, 2021

stephenLYZ commented Mar 19, 2021

codecov bot commented Mar 21, 2021

villebro left a comment

junlin-qa left a comment

fix(explore): make horizontal scroll appears in data panel #13566

fix(explore): make horizontal scroll appears in data panel #13566

Conversation

stephenLYZ commented Mar 11, 2021

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

After

TEST PLAN

ADDITIONAL INFORMATION

junlincc commented Mar 11, 2021 • edited Loading

junlincc commented Mar 19, 2021

junlincc commented Mar 19, 2021

zhaoyongjie commented Mar 19, 2021

github-actions bot commented Mar 19, 2021

github-actions bot commented Mar 19, 2021

stephenLYZ commented Mar 19, 2021

kgabryje Mar 19, 2021

Choose a reason for hiding this comment

stephenLYZ Mar 19, 2021

Choose a reason for hiding this comment

stephenLYZ Mar 24, 2021 • edited Loading

Choose a reason for hiding this comment

kgabryje Mar 24, 2021

Choose a reason for hiding this comment

kgabryje commented Mar 19, 2021

stephenLYZ commented Mar 19, 2021

codecov bot commented Mar 21, 2021

Codecov Report

villebro left a comment

Choose a reason for hiding this comment

junlin-qa left a comment

Choose a reason for hiding this comment

junlincc commented Mar 11, 2021 •

edited

Loading

stephenLYZ Mar 24, 2021 •

edited

Loading