Widget table scroll-x visible #4101

ranbena · 2019-08-28T16:17:42Z

Feature

Description

In wide table visualizations, the horizontal scrollbar doesn't appear unless scrolled to bottom and is therefore inconvenient for those using a mouse pointer.

This PR introduces two changes:

Horizontal scrollbar is always accessible.
Pagination as well. (it's possible to keep it at the bottom, but that would cause a double scrollbar)

About the implementation

There are two reason I'm not a fan of this implementation.

It relies on height: 100% which means all of the elements between .table-visualization-container and .ant-spin-container must all inherit this property or else the chain is broken.
It relies on ant elements .ant-spin-container and .ant-table which might change over time and the feature would break.

So I made tests with Percy shots in which any breakage in the two conditions above would either push the pagination out of sight (cause height won't be 100%) or h-scrollbar won't appear 😉

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

ranbena · 2019-08-29T18:14:59Z

@arikfr give this another try.
https://deploy-preview-4101--redash-preview.netlify.com/dashboard/test-scroll-x?p_count=30&p_w287_count=5

AutoHeight should be ok now.
Widgets now display pagination mini version.

arikfr · 2019-09-01T07:01:27Z

Seems to work correctly now, but the size of the widget is a bit too wide now:

ranbena · 2019-09-01T07:16:43Z

Seems to work correctly now, but the size of the widget is a bit too wide now:

I can't believe the scroll is not inset! Happens in Chrome as well?

arikfr · 2019-09-01T07:18:37Z

@ranbena Chrome is fine.. Only Firefox :-(

kravets-levko · 2019-09-02T09:16:32Z

@arikfr Seems it's a bug in react-grid-layout (or maybe it's related to how we use it, don't know) - it happens sometimes in different browsers (Chrome, FF, IE) and grid gets fixed when you resize browser window (try to open devtools or whatever). IMHO it should be fixed, but definitely not in this PR.

arikfr · 2019-09-02T09:21:09Z

@kravets-levko the reason it feels part of this PR is because before this PR I never experienced it. So even if it's not directly a bug in this PR, it does trigger it.

Did you experience it before?

kravets-levko · 2019-09-02T09:30:01Z

Did you experience it before?

Yes, from the first day we use react-grid-layout. But it didn't happen very often to me, even on the same dashboard this bug does not reproduce stably. Therefore I cannot guess what caused this bug.

ranbena · 2019-09-02T10:47:40Z

@arikfr does it consistently reproduce for you?
If so:

Does it get fixed on window resize?
What is the inline style width of .react-grid-item when it's ok and when it's not?

arikfr · 2019-09-02T11:59:40Z

🤔 it was reproducing when I commented, but now it no longer reproduces... I guess we can merge this then?

ranbena · 2019-09-02T12:35:16Z

Then I'll prepare this for review

ranbena · 2019-09-02T13:11:42Z

client/app/assets/less/redash/query.less

-    margin-top: 10px;
-  }
-}
-


There's no such classname

ranbena · 2019-09-02T13:11:58Z

client/app/visualizations/VisualizationRenderer.jsx

+        data={filteredData}
+        visualizationName={visualization.name}
+        context={props.context}
+      />


Removed unused <div>

ranbena · 2019-09-02T18:18:46Z

client/app/visualizations/table/renderer.less

+    height: 100%;
+
+    & div {
+      height: inherit;


A must so .ant-spin-container gets the actual height: 100%.

* Migrate Parameters component to React (#4006) * Start Parameters Migration * Add dirtyCount * Use workaround with setState * Apply Changes * Add EditSettingsDialog * Add Cmd/Ctrl + Enter behavior * Remove isApplying * Delete Angular version of parameters * Update tests * Remove angular stuff * Update jest * Drag placeholder * Update events * Use old button styling and move css * Reviewing code * Add parameter rearrange test * Add Parameter Settings title change test * Update Parameter Settings button styling * Move parameter url logic back to Parameters * Disable url update when query is new * Styling changes (#4019) * Ran's title width styling * Update drag test * Improve sizing for Number inputs Co-Authored-By: Ran Byron <ranbena@gmail.com> * Fix issue with dragged parameter wrapping Co-Authored-By: Ran Byron <ranbena@gmail.com> * Don't reevaluate dirtyParamCount * Allow multiple values :) * Fix parameter alignments * Fix Select width on search * Update client/app/components/Parameters.less Co-Authored-By: Ran Byron <ranbena@gmail.com> * Humanize param.name * Make sure angular updates Execute disabled status * Add more flake8 tests and fail build if any test fails (#4055) * Add more flake8 tests and fail build if any test fails Run all flake8 E9xx + F63x + F7xx + F82x tests. * long = long in Python 2 * Fix: MySQL connections without SSL are failing (#4090) * Move connection logic into a single method & make sure not to pass ssl value if not used. * Remove wildcard import and format file. * Removed redash-newstyle.less (#4017) * Make sure we always pass a list to _get_column_lists (#4095) (some data sources might return None as the columns list) * [Data Sources] Add: Azure Data Explorer (Kusto) query runner (#4091) * [Data Sources] Add: Azure Data Explorer (Kusto) query runner * CodeClimate fixes * Remove TODO * Fixed configuration properties names for Azure Kusto * Azure Kusto: get_schema in one query * azure-kusto-data update to 0.0.32 * Add Kusto to the default query runners list * [Qubole] - Adding support to process Quantum query types. (#4066) * [Qubole] - Adding support to process Quantum query types. Quantum is a serverless interactive service that offers direct SQL access to user's data lake. Changes are made to accept `quantum` query type from user which makes `Cluster Label` as optional. * -Making quantum as defult query. -Dictionary safe access to connection parmeters * keeping pep8 standards * Maintainig pep8 std * Use latest version of qds-sdk * Use qds-sdk v1.13.0 * Use qds-sdk v1.12.0 * Use qds-sdk v1.13.0 * Updating SDK with verified version * hive as default query type * qds-sdk : Locking most recent release version * qds-sdk : Locking recent release version * falling back to original version of qds-sdk * Dashboard: when updating parameters, run only relevant queries (#3804) * refresh only affected queries in dashboard when parameters are changed * rename pendingParameters to updatedParameters * select which widgets to update according to their mapping as a dashboard-level parameter * use lodash's include * Migrate with SQL statements. (#4105) * Update badge in README.md to link to CircleCI (#4104) * Update README.md * Update README.md * Update README.md Co-Authored-By: Ran Byron <ranbena@gmail.com> * Update README.md * Fix widget bottom element alignment (#4110) * Fix: allow users with view only acces to use the queries in Query Results (#4112) * Fix: allow users with view only acces to access the queries * Add tests * Update error message * Update error message. Take 2 * Fix Dropdown parameter options appearing behind Dialog (#4109) * Add ability to use Ant's Table loading property when using ItemsTable (#4117) * Display data source icon in query editor (#4119) * Move annotation logic into Query Runner (#4113) * Code formatting * Move annotation logic into query runner, so it can be overriden in the query runner. * Add mixin to __all__ * Switch to flag instead of mixin * Feature (Redshift): option to set query group for adhoc/scheduled queries (#4114) * Add scheduled status to query job metadata. * Add: option to set query group for adhoc/scheduled Redshift queries * Scheduled might not be set for already enqueued queries. * Fix number param value normlization (#4116) * Use ng-src for data source icons (#4123) * hive_ds: show a user friendly error message when possible (#4121) * Update botocore, to get pass pip warning (#4122) * Widget table scroll-x visible (#4101) * Table viz horizontal scroll made visible * Added tests * Fixed snapshot pre-condition * Perhaps this would trigger percy * Upgrade Sentry-SDK and enable additional integratoins (#4127) * Update sentry-sdk version * Add additional Sentry integrations * Migrate Counter visualization to React (#4106) * Migrate Counter to React: Renderer * Migrate Counter to React: Editor * Cleanup * Review and fix rows indexing algorithm * Counter not properly scaled in editor * Fix wrong label for/input id pair * Tests * Tests * Fix vendor prefixes * Remove unnecessary useEffect dependencies * Update tests * Fix Percy snapshot names * Sync botocor eversions across requirements files. (#4128) * Decrease size of widget pagination (#4120) * Added tests * Perhaps this would trigger percy * Decrease size of widget pagination * Removed unused attr * Updated tests * Allow the user to decide how to handle null values in charts (#4071) * #2629 Refactor Chart visualization, add option for handling NULL values (keep/convert to 0.0) * Handle null values in line/area stacking code; some cleanup * Handle edge case: line/area stacking when last value of one of series is missing * Mjnor update to line/area stacking code * Fix line/area normalize to percents feature * Unit tests * Refine tests; add tests for prepareLayout function * Tests for prepareData (heatmap) function * Tests for prepareData (pie) function * Tests for prepareData (bar, line, area) function * Tests for prepareData (scatter, bubble) function * Tests for prepareData (box) function * Remove unused file * Alerts: Add more condition comparison options (#4134) * #4132 Add more condition comparison options * Add arguments to fallback lambda * Remove duplicate messages method (#4131) * Migrate Chart visualization to React Part 1: Renderer (#4130) * Migrate Chart visualization: Renderer * Refine PlotlyChart component; move stylesheets to visualization's folder * Migrate Custom JS Chart to React * Cleanup * Add jsconfig settings with '@' webpack alias (#4135) * Counter Editor: move components to own files (#4138) * Allow users to share aggregated usage information with us (#4108) * Initial commit of BeaconConsent component * Add comment about being able to change setting * Use <Text> correctly * Final version of consent screen * Show beacon consent message on homepage only if it wasn't enabled already. * Add consent setting to organization settings screen. * Add support for custom message in OrgSetting.save. * Implmenet consent saving. * If consent given, send extra data * Add HelpTrigger * Make CodeClimate happy * Wrap everything with DynamicComponent * CHANGELOG for V8-beta. (#4057) * CHANGELOG for V8-beta. * Update CHANGELOG.md * Update CHANGELOG.md * Update CHANGELOG.md * Bug fix: Query view doesn't sync parameters when selecting and deleting (#4146) * Query Snippets: Use onClick instead of link for 'Click here' option (#4144) * Snippets: Don't change url when not needed * Revert "Snippets: Don't change url when not needed" This reverts commit 2f346f3. * Query Snippets: use onClick instead of link * Color picker component (#4136) * Widget filters overlapped by visualization (#4137) * Fix: widget filters overlapped by visualization * Fix tests * Fix tests * CHANGELOG for v8.0.0-beta.2 (#4145) * Stop building tarballs. * Update version reference. * CHANGELOG for 8.0.0-beta.2

* Table viz horizontal scroll made visible * Added tests * Fixed snapshot pre-condition * Perhaps this would trigger percy

arikfr requested a review from kravets-levko September 1, 2019 07:02

kravets-levko approved these changes Sep 2, 2019

View reviewed changes

weekly-digest bot mentioned this pull request Sep 2, 2019

Weekly Digest (26 August, 2019 - 2 September, 2019) #4118

Closed

ranbena force-pushed the scroll-x branch from 9204f88 to b56a702 Compare September 2, 2019 13:10

ranbena commented Sep 2, 2019

View reviewed changes

ranbena force-pushed the scroll-x branch from b56a702 to 9458299 Compare September 2, 2019 13:13

ranbena added 2 commits September 2, 2019 18:00

Table viz horizontal scroll made visible

0d43aee

Added tests

574ddd9

ranbena force-pushed the scroll-x branch from 9458299 to 574ddd9 Compare September 2, 2019 15:01

ranbena added 2 commits September 2, 2019 18:31

Fixed snapshot pre-condition

78bd09f

Perhaps this would trigger percy

fcb0cc1

ranbena mentioned this pull request Sep 2, 2019

Decrease size of widget pagination #4120

Merged

1 task

ranbena commented Sep 2, 2019

View reviewed changes

ranbena marked this pull request as ready for review September 2, 2019 18:18

arikfr merged commit 2c1e846 into master Sep 9, 2019

weekly-digest bot mentioned this pull request Sep 16, 2019

Weekly Digest (9 September, 2019 - 16 September, 2019) #4148

Closed

This was referenced Oct 1, 2019

Table visualization horizontal scrollbar should not be always visible #3061

Merged

new query - make horizontal scrollbar always visible in results #3290

Closed

arikfr deleted the scroll-x branch October 15, 2019 19:55

arikfr pushed a commit that referenced this pull request Oct 27, 2019

Widget table scroll-x visible (#4101)

959822c

* Table viz horizontal scroll made visible * Added tests * Fixed snapshot pre-condition * Perhaps this would trigger percy

harveyrendell pushed a commit to pushpay/redash that referenced this pull request Nov 14, 2019

Widget table scroll-x visible (getredash#4101)

7eaeb31

* Table viz horizontal scroll made visible * Added tests * Fixed snapshot pre-condition * Perhaps this would trigger percy

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Widget table scroll-x visible #4101

Widget table scroll-x visible #4101

ranbena commented Aug 28, 2019 •

edited

Loading

ranbena commented Aug 29, 2019

arikfr commented Sep 1, 2019

ranbena commented Sep 1, 2019

arikfr commented Sep 1, 2019

kravets-levko commented Sep 2, 2019

arikfr commented Sep 2, 2019

kravets-levko commented Sep 2, 2019

ranbena commented Sep 2, 2019

arikfr commented Sep 2, 2019

ranbena commented Sep 2, 2019

ranbena Sep 2, 2019

ranbena Sep 2, 2019

ranbena Sep 2, 2019

Widget table scroll-x visible #4101

Widget table scroll-x visible #4101

Conversation

ranbena commented Aug 28, 2019 • edited Loading

Description

About the implementation

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

ranbena commented Aug 29, 2019

arikfr commented Sep 1, 2019

ranbena commented Sep 1, 2019

arikfr commented Sep 1, 2019

kravets-levko commented Sep 2, 2019

arikfr commented Sep 2, 2019

kravets-levko commented Sep 2, 2019

ranbena commented Sep 2, 2019

arikfr commented Sep 2, 2019

ranbena commented Sep 2, 2019

ranbena Sep 2, 2019

Choose a reason for hiding this comment

ranbena Sep 2, 2019

Choose a reason for hiding this comment

ranbena Sep 2, 2019

Choose a reason for hiding this comment

ranbena commented Aug 28, 2019 •

edited

Loading