feat: Resizable dataset and controls panels on Explore view #12411

kgabryje · 2021-01-11T17:08:08Z

SUMMARY

This PR enables resizing dataset and controls panels by dragging. Minimum width is 320px, maximum is 33% of screen width. The maximum value is set to ensure that the chart is still visible even when both panels are fully expanded - tested on 1440px screen width.
Closes apache-superset/superset-roadmap#115

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Nagranie.z.ekranu.2021-01-11.o.19.53.55.mov

TEST PLAN

ADDITIONAL INFORMATION

Has associated issue: [explore] resizable data and control panel apache-superset/superset-roadmap#115
Changes UI
Requires DB Migration.
Confirm DB Migration upgrade and downgrade tested.
Introduces new feature or API
Removes existing feature or API

CC: @junlincc @villebro @ktmud
@adam-stasiak Can you help with testing?

ktmud · 2021-01-11T19:02:01Z

THANK YOU! This is long overdue. I will test and take a look at the code soon.

codecov-io · 2021-01-11T19:48:41Z

Codecov Report

Merging #12411 (9a29ce1) into master (75f927b) will increase coverage by 4.05%.
The diff coverage is 94.11%.

@@            Coverage Diff             @@
##           master   #12411      +/-   ##
==========================================
+ Coverage   62.76%   66.82%   +4.05%     
==========================================
  Files        1015     1015              
  Lines       49526    49548      +22     
  Branches     5080     5079       -1     
==========================================
+ Hits        31084    33108    +2024     
+ Misses      18233    16310    -1923     
+ Partials      209      130      -79

Flag	Coverage Δ
cypress	`51.00% <94.11%> (?)`
javascript	`60.76% <11.76%> (+0.01%)`	⬆️
python	`64.07% <ø> (-0.01%)`	⬇️

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

Impacted Files	Coverage Δ
...nd/src/explore/components/ExploreViewContainer.jsx	`80.00% <ø> (+77.45%)`	⬆️
...ntend/src/explore/components/ExploreChartPanel.jsx	`80.95% <92.85%> (+66.43%)`	⬆️
...rontend/src/explore/components/DatasourcePanel.tsx	`90.69% <100.00%> (+4.98%)`	⬆️
...-frontend/src/datasource/ChangeDatasourceModal.tsx	`83.75% <0.00%> (-1.07%)`	⬇️
...ews/CRUD/annotationlayers/AnnotationLayerModal.tsx	`74.71% <0.00%> (-0.87%)`	⬇️
...ntend/src/views/CRUD/annotation/AnnotationList.tsx	`76.08% <0.00%> (-0.84%)`	⬇️
superset/db_engine_specs/presto.py	`81.38% <0.00%> (-0.65%)`	⬇️
...t-frontend/src/views/CRUD/welcome/SavedQueries.tsx	`60.41% <0.00%> (-0.64%)`	⬇️
...tend/src/views/CRUD/annotation/AnnotationModal.tsx	`66.14% <0.00%> (-0.53%)`	⬇️
...erset-frontend/src/SqlLab/components/ResultSet.tsx	`66.35% <0.00%> (-0.32%)`	⬇️
... and 197 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 75f927b...9a29ce1. Read the comment docs.

ktmud

LGTM with some suggestions on column widths.

ktmud · 2021-01-11T19:32:10Z

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -452,7 +455,13 @@ function ExploreViewContainer(props) {
          <Icon name="dataset-physical" width={16} />
        </div>
      ) : null}
-      <div className="col-sm-3 explore-column controls-column">
+      <Resizable
+        defaultSize={{ width: 320 }}


We should make this width persistent and save it in localStorage. Could be in another PR, though.

ktmud · 2021-01-11T19:34:28Z

superset-frontend/src/explore/components/ExploreViewContainer.jsx

+      <Resizable
+        defaultSize={{ width: 320 }}
+        minWidth={320}
+        maxWidth="33%"


What do you think of increasing maxWidth to somewhere around 40% to 50%? Sometimes it's useful to test how the chart looks like when in very small containers.

33% is already squeezing the viz. we tested different options. we probably don't want to increase the max width and compromise the chart area.

Increasing maxWidth wouldn't do much, as the chart section has a minWidth 512px set.

ktmud · 2021-01-11T20:00:51Z

superset-frontend/src/explore/components/ExploreViewContainer.jsx

-      <div
+      <Resizable
+        defaultSize={{ width: 320 }}
+        minWidth={320}


I think the minWidth/default width for the Dataset column can be smaller since it somehow looks wider visually comparing to the Controls column, probably because of the gray background or more empty space.

I think 300px for gray column looks ok. WDYT?

Looking good! Thanks for the update!

junlincc

Manually tested! no noticeable issues found. work perfectly as provided in the instruction.
Resizing will not trigger query or create performance issues

NOTE⚠️:

This is only Product and QA approval with NO code reviews
This approval indicates that all UI changes meet product requirements, no noticeable regression
This approval gives the green light to code review, thus saving the PMC's effort from reviewing the code repeatedly before the PR is ready
Please do NOT merge this PR without at least one code review approval from PMC member
Please do NOT merge PRs in(Explore and Dashboard) without Product and QA approval

adam-stasiak · 2021-01-11T21:23:52Z

Tested also - looks fine.
One question to @junlincc Should this icon change size while dragging?

Nagranie.z.ekranu.2021-01-11.o.22.22.55.mov

junlincc · 2021-01-11T21:28:22Z

Should this icon change size while dragging

really good find Adam!! dataset icon and ... icon both stretch a bit, but collapse icon doesnot. maybe because they are in different containers? we should address this in a separate PR to really reach a perfect state 😀 @adam-stasiak

ktmud · 2021-01-12T20:22:00Z

I think we can mark this with v1.0.0 as well. @junlincc @rusackas @villebro what do you think?

junlincc · 2021-01-12T20:24:08Z

I think we can mark this with v1.0.0 as well. @junlincc @rusackas @villebro what do you think?

that is the plan!
@villebro pls make sure this one gets in.

* Implement resizable panels on explore view * Optimize chart rendering while resizing * Make dataset column narrower Co-authored-by: Evan Rusackas <evan@preset.io>

…2411) * Implement resizable panels on explore view * Optimize chart rendering while resizing * Make dataset column narrower Co-authored-by: Evan Rusackas <evan@preset.io>

* release: bump to 1.0.0 and CHANGELOG * fix(explore): long metric name display (#12387) * fix(explore): long metric name display * add tooltip to control * chore: Show datasets when search input is empty (#12391) * chore: Fix typo “Rest” to “Reset” (#12392) * chore: upgrade eslint, babel, and prettier (#12393) * feat(explore): add tooltip to timepicker label (#12401) * chore: change Datasource to Dataset in Explore ui (#12402) * chore(explore):change dataset to datasource in ui * modal * Add space * Changing it back🤦🏾‍♀️ * Chargeback * fix: Refresh Interval Modal dropdown (#12406) * fix(native-filters): incorrect queriesData state (#12409) * refactor: from superset.utils.core break down date_parser (#12408) * Fixes control panel fields styling (#12236) (#12326) * feat: Resizable dataset and controls panels on Explore view (#12411) * Implement resizable panels on explore view * Optimize chart rendering while resizing * Make dataset column narrower Co-authored-by: Evan Rusackas <evan@preset.io> * fix(dashboard): artefacts shown while drag and dropping deck.gl charts (#12418) * [12181] Fix artifacts while drag and dropping deck.gl charts. * Run prettier * bump superset-ui packages for rolling window change (#12426) * chore: bump superset-ui deckgl plugin (#12466) * fix: do not show vertical scrollbar for charts in dashboard (#12478) * fix: do not show vertical scrollbar for charts in dashboard * Proper fix for #11419 Co-authored-by: Jesse Yang <jesse.yang@airbnb.com> * fix(dashboard): use datasource id from slice metadata (#12483) * fix(timepicker): make pyparsing thread safe (#12489) * fix: make pyparsing thread safe * remove parenthesis for decorator * fix (SQL Lab): disappearing results on tab switch (#12472) * fix (SQL Lab): disappearing results on tab switch * Remove state * Fix test * fix: import ZIP files that have been modified (#12425) * fix: import ZIP files that have been modified * Add unit test * update changelog with rc2 entries * fix: impose dataset ownership check on old API (#12491) * fix: impose dataset ownership check on old API * update UPDATING.md * partially protect the old MVC also * prevent metric and column add and update * ci: remove refs/tags from docker tags on a release (#12518) * ci: remove refs/tags from docker tags on a release * wider head * fix: lowercase all columns in examples (#12530) * fix(explore): time table control panel (#12532) * fix(explore): Add Time section back to FilterBox (#12537) * Fixing Pinot queries for time granularities: WEEKS/MONTHS/QUARTERS/YEARS (#12536) * fix: Select options overflowing Save chart modal on Explore view (#12522) * Fix select options overflowing modal * fix unit test Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com> * Fix list filters vertical alignment (#12497) * feat(db-engine): Add support for Apache Solr (#12403) * [db engine] Add support for Apache Solr * Fixing typo * chore: rename docker image in build_docker_image.sh, docker-compose.yml and helm values.yaml (#12337) * add rc3 changelog entries * fix: Popover closes on change of dropdowns values (#12410) * fix: Add MAX_SQL_ROW value to LIMIT_DROPDOWN (#12555) * fix(viz): missing groupby and broken adhoc metrics for boxplot (#12556) * fix: height on grid results (#12558) * fix: case expression should not have double quotes (#12562) * Fix 500 error when loading dashboards with slice having deleted dataset (#12535) * add rc4 changelog entries * Fixed typo on line 348 * Added files Co-authored-by: Daniel Gaspar <danielvazgaspar@gmail.com> Co-authored-by: Yongjie Zhao <yongjie.zhao@gmail.com> Co-authored-by: Geido <60598000+geido@users.noreply.github.com> Co-authored-by: Junlin Chen <junlin@preset.io> Co-authored-by: Jesse Yang <jesse.yang@airbnb.com> Co-authored-by: Agata Stawarz <47450693+agatapst@users.noreply.github.com> Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com> Co-authored-by: Evan Rusackas <evan@preset.io> Co-authored-by: Kasia Kucharczyk <2536609+kkucharc@users.noreply.github.com> Co-authored-by: Phillip Kelley-Dotson <pkelleydotson@yahoo.com> Co-authored-by: Grace Guo <grace.guo@airbnb.com> Co-authored-by: Beto Dealmeida <roberto@dealmeida.net> Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com> Co-authored-by: Xiang Fu <fx19880617@gmail.com> Co-authored-by: Ahmed Adel <github@aadel.io> Co-authored-by: Amit Miran <47772523+amitmiran137@users.noreply.github.com> Co-authored-by: Hugh A. Miles II <hughmil3s@gmail.com> Co-authored-by: Shuyao Bi <shuyaob@andrew.cmu.edu> Co-authored-by: Lyndsi Kay Williams <lyndsikaywilliams@Lyndsis-MacBook-Pro.local>

Implement resizable panels on explore view

fb0ea6c

superset-github-bot bot added the Polidea label Jan 11, 2021

pull-request-size bot added the size/M label Jan 11, 2021

junlincc added the explore Namespace | Anything related to Explore label Jan 11, 2021

junlincc requested review from ktmud, junlincc, graceguo-supercat and villebro January 11, 2021 17:42

Optimize chart rendering while resizing

ef86fff

kgabryje changed the title ~~feat: Resizable datatset and controls panels on Explore view~~ feat: Resizable dataset and controls panels on Explore view Jan 11, 2021

pull-request-size bot added size/L and removed size/M labels Jan 11, 2021

ktmud approved these changes Jan 11, 2021

View reviewed changes

junlincc approved these changes Jan 11, 2021

View reviewed changes

junlincc added the rush! Requires immediate attention label Jan 11, 2021

kgabryje closed this Jan 11, 2021

kgabryje reopened this Jan 11, 2021

junlincc mentioned this pull request Jan 12, 2021

[Explore]set width persistent in data and control panel #12428

Closed

junlincc added the hold:testing! On hold for testing label Jan 12, 2021

rusackas and others added 2 commits January 11, 2021 17:21

Merge branch 'master' into feat/resizable-panels

1ead551

Make dataset column narrower

9a29ce1

junlincc removed the hold:testing! On hold for testing label Jan 12, 2021

rusackas merged commit ed53b00 into apache:master Jan 12, 2021

junlincc removed the rush! Requires immediate attention label Jan 12, 2021

junlincc added the #bug:blocking! Blocking issues with high priority label Jan 12, 2021

ktmud added the v1.0 label Jan 12, 2021

junlincc removed the #bug:blocking! Blocking issues with high priority label Jan 12, 2021

duynguyenhoang mentioned this pull request Jan 15, 2021

Chart disappears in standalone slice #12557

Closed

3 tasks

nikolagigic mentioned this pull request Jan 19, 2021

chore(explore): Save Resizable width to localStorage #12593

Merged

6 tasks

mistercrunch added 🍒 1.0.0 🍒 1.0.1 🏷️ 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

feat: Resizable dataset and controls panels on Explore view #12411

feat: Resizable dataset and controls panels on Explore view #12411

kgabryje commented Jan 11, 2021 •

edited

Loading

ktmud commented Jan 11, 2021

codecov-io commented Jan 11, 2021 •

edited

Loading

ktmud left a comment

ktmud Jan 11, 2021

ktmud Jan 11, 2021 •

edited

Loading

junlincc Jan 11, 2021 •

edited

Loading

kgabryje Jan 12, 2021

ktmud Jan 11, 2021 •

edited

Loading

kgabryje Jan 12, 2021

ktmud Jan 12, 2021

junlincc left a comment •

edited

Loading

adam-stasiak commented Jan 11, 2021

junlincc commented Jan 11, 2021 •

edited

Loading

ktmud commented Jan 12, 2021 •

edited

Loading

junlincc commented Jan 12, 2021

feat: Resizable dataset and controls panels on Explore view #12411

feat: Resizable dataset and controls panels on Explore view #12411

Conversation

kgabryje commented Jan 11, 2021 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

ktmud commented Jan 11, 2021

codecov-io commented Jan 11, 2021 • edited Loading

Codecov Report

ktmud left a comment

Choose a reason for hiding this comment

ktmud Jan 11, 2021

Choose a reason for hiding this comment

ktmud Jan 11, 2021 • edited Loading

Choose a reason for hiding this comment

junlincc Jan 11, 2021 • edited Loading

Choose a reason for hiding this comment

kgabryje Jan 12, 2021

Choose a reason for hiding this comment

ktmud Jan 11, 2021 • edited Loading

Choose a reason for hiding this comment

kgabryje Jan 12, 2021

Choose a reason for hiding this comment

ktmud Jan 12, 2021

Choose a reason for hiding this comment

junlincc left a comment • edited Loading

Choose a reason for hiding this comment

adam-stasiak commented Jan 11, 2021

junlincc commented Jan 11, 2021 • edited Loading

ktmud commented Jan 12, 2021 • edited Loading

junlincc commented Jan 12, 2021

kgabryje commented Jan 11, 2021 •

edited

Loading

codecov-io commented Jan 11, 2021 •

edited

Loading

ktmud Jan 11, 2021 •

edited

Loading

junlincc Jan 11, 2021 •

edited

Loading

ktmud Jan 11, 2021 •

edited

Loading

junlincc left a comment •

edited

Loading

junlincc commented Jan 11, 2021 •

edited

Loading

ktmud commented Jan 12, 2021 •

edited

Loading