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

nikolagigic · 2021-01-19T11:00:44Z

SUMMARY

Save Resizable component defaultSize value to localStorage.
closes #12428

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

codecov-io · 2021-01-19T11:34:37Z

Codecov Report

Merging #12593 (4b8177b) into master (80deb4e) will decrease coverage by 0.12%.
The diff coverage is 41.66%.

@@            Coverage Diff             @@
##           master   #12593      +/-   ##
==========================================
- Coverage   66.77%   66.64%   -0.13%     
==========================================
  Files        1021     1021              
  Lines       49967    49979      +12     
  Branches     4890     5022     +132     
==========================================
- Hits        33364    33311      -53     
- Misses      16478    16543      +65     
  Partials      125      125

Flag	Coverage Δ
cypress	`50.90% <41.66%> (+0.46%)`	⬆️
javascript	`60.87% <0.00%> (-0.04%)`	⬇️
python	`63.70% <ø> (-0.29%)`	⬇️

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

Impacted Files	Coverage Δ
...nd/src/explore/components/ExploreViewContainer.jsx	`77.24% <41.66%> (-2.76%)`	⬇️
superset/sql_validators/postgres.py	`50.00% <0.00%> (-50.00%)`	⬇️
superset/databases/commands/create.py	`83.67% <0.00%> (-8.17%)`	⬇️
superset/databases/commands/update.py	`85.71% <0.00%> (-8.17%)`	⬇️
superset/db_engine_specs/sqlite.py	`90.62% <0.00%> (-6.25%)`	⬇️
superset/databases/commands/test_connection.py	`84.78% <0.00%> (-4.35%)`	⬇️
superset/utils/celery.py	`96.42% <0.00%> (-3.58%)`	⬇️
superset/models/core.py	`85.86% <0.00%> (-2.99%)`	⬇️
superset/views/core.py	`72.82% <0.00%> (-2.48%)`	⬇️
superset/db_engine_specs/mysql.py	`89.79% <0.00%> (-2.05%)`	⬇️
... and 19 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 80deb4e...4b8177b. Read the comment docs.

adam-stasiak · 2021-01-19T13:59:07Z

Does this PR affect only Dataset side edition?
I observed that it is saved only this one and very useful would be having width stored also for the middle part of view.

nikolagigic · 2021-01-19T14:03:29Z

@adam-stasiak I believe this specific ticket was to address only these resizable components: #12411 (comment)

adam-stasiak · 2021-01-19T14:06:30Z

I see. @junlincc Do you think we should create Issue for having the middle part of view also kept in memory?

@nikolagigic One thing is weird that the value in local storage can be lower than 0. You can reproduce this by draging tab far left (to the right side also but then we have very high number). Maybe it should me limited to real values?

junlincc · 2021-01-19T14:13:58Z

I see. @junlincc Do you think we should create Issue for having the middle part of view also kept in memory?

absolutely, that's the plan. Let's create a separate issue. @pkdotson is working on something related @adam-stasiak
Thank you both for testing and the PR!

nikolagigic · 2021-01-19T14:20:36Z

@adam-stasiak I will address this. thanks for noting it

adam-stasiak · 2021-01-19T14:32:49Z

I created issue for this: #12599

junlincc · 2021-01-19T16:41:29Z

@nikolagigic @adam-stasiak can we take a look at the failing tests? would like to include this PR in v1.0.1

nikolagigic · 2021-01-19T16:43:53Z

@junlincc changes have nothing to do with this failing test. Reopened the PR

geido · 2021-01-19T17:20:23Z

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

+ function onResize(evt) {
+ const { x } = evt;
+ if (x > 0) {
+ localStorage.setItem('explore_sidebar_widths', x);


You might want to check that localStorage is available or catch eventual errors. It might be disabled and will throw an exception in that case.

geido · 2021-01-19T17:20:56Z

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

 if (props.standalone) {
 return renderChartContainer();
 }

+ const exploreSidebarWidth =
+ localStorage.getItem('explore_sidebar_widths') || 320;


Same as my other comment

ktmud · 2021-01-19T17:48:21Z

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

@@ -404,7 +414,8 @@ function ExploreViewContainer(props) {
 />
 )}
 <Resizable
- defaultSize={{ width: 300 }}
+ onResize={onResize}
+ defaultSize={{ width: exploreSidebarWidth }}


I think the dataset pane and the controls pane should have separate widths. You might want to create a pair of small getter/setter functions to handle saving and reading both widths in one key safely.

enum StorageKey { sidebarWidth = "explore_sidebar_widths" } function getSidebarWidths() { try { return localStorage.getItem(StorageKey.siderbarWidth).split(":"); } catch {} return [300, 320] } function setSidebarWidths(widths: number[]) { try { localStorage.setItem(StorageKey.siderbarWidth, widths.join(":")); } catch {} }

I noticed SQL Lab is using localstorage without a try/catch safety net. This PR makes me wonder if we should make an abstracted helper method, kind of like the "logging" method from @superset-ui/core. These methods, maybe setStoredValue and getStoredValue, could try local storage, then try setting a cookie, and take an optional callback for the catch block. I don't think we need to get that crazy with this PR, but wonder if folks think it's an idea worth ticketing separately.

I always do that in my other projects. Here's an example file with typing for storage keys & values:

import { User } from 'graphql/job.graphql'; /** * Local storage manager */ export function safeJsonParse(jsonString: string | null) { if (jsonString === null) return null; try { return JSON.parse(jsonString); } catch { return null; } } export type StorageKey = 'persistedStates' | 'hasWelcomed'; export type StorageValues = { persistedStates: Record<string, any> | null; hasWelcomed: boolean; }; export const defaultStorageValues = { userIdMap: null, persistedStates: null, hasWelcomed: false, }; export function entries() { Object.values(Storage).forEach(key => { return [key, getItem(key)]; }); } export function getItem<K extends StorageKey>(key: K): StorageValues[K] | null { return safeJsonParse(localStorage.getItem(key)) ?? defaultStorageValues[key]; } export function setItem(key: StorageKey, value: string | number | object) { return localStorage.setItem(key, JSON.stringify(value)); }

rusackas · 2021-01-20T07:17:46Z

As to @ktmud's point, I agree the two panes should be sizeable independently, and have their values stored independently. You could save them together as he proposes here, or with two getter/setters. Whatever seems cleaner.

The bigger issue to me with the current state of the PR is what's seen in the description GIF. If you make the data source panel wide, the controls panel does not scale (this is fine). However, when you refresh, the controls panel is big, too.

Resizing the controls panel (at the line to the right of it) yeilds unpredictable results as well. It seems like whether the controls panel is small, medium or large, if you widen the controls panel, and then refresh, both columns become full width.

column-resize-issue.mp4

ktmud · 2021-01-20T08:15:26Z

Also note folding the dataset pane should be persistent as well. You can probably save a width: -previousWidth when users click on the fold icon.

nikolagigic · 2021-01-21T12:57:34Z

@ktmud @rusackas can you have a look again pleae? This should do

junlincc · 2021-01-23T03:14:17Z

@ktmud @zhaoyongjie guys, can you take a look at the changes? if they look ok, can we merge? thank you both~

ktmud

LGTM.

Thought of persisting the folding state, too, but then realized there is not easy access to change/edit dataset once it's folded.

ktmud · 2021-01-23T04:21:16Z

@nikolagigic can you solve the merge conflicts?

junlincc · 2021-01-25T03:15:49Z

@ktmud hey we resolved the conflicts, mind taking another look? Thanks!

ktmud

LGTM

Save resizable width to localStorage

2bba6c0

superset-github-bot bot added the Flexiana label Jan 19, 2021

pull-request-size bot added the size/S label Jan 19, 2021

nikolagigic changed the title ~~Save Resizable width to localStorage~~ chore(explore): Save Resizable width to localStorage Jan 19, 2021

nikolagigic closed this Jan 19, 2021

nikolagigic reopened this Jan 19, 2021

adam-stasiak mentioned this pull request Jan 19, 2021

[explore] Store all tabs width in Explore view #12599

Closed

Adress comments

6eefc0f

nikolagigic closed this Jan 19, 2021

nikolagigic reopened this Jan 19, 2021

geido requested changes Jan 19, 2021

View reviewed changes

ktmud reviewed Jan 19, 2021

View reviewed changes

junlincc added the viz:explore:ux label Jan 20, 2021

junlincc added the v1.0.1 label Jan 20, 2021

ktmud mentioned this pull request Jan 21, 2021

fix: explore page style fix, remove unnecessary scroll bars #12649

Merged

6 tasks

adress comments

e4bb369

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

ktmud approved these changes Jan 23, 2021

View reviewed changes

Merge branch 'master' into issue-12428

4b8177b

ktmud approved these changes Jan 25, 2021

View reviewed changes

ktmud merged commit bcbd8f9 into apache:master Jan 25, 2021

villebro pushed a commit that referenced this pull request Jan 25, 2021

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

522f466

geido added explore:design Related to the Explore UI/UX and removed viz:explore:ux labels Feb 9, 2022

mistercrunch added 🍒 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

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

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

nikolagigic commented Jan 19, 2021 •

edited by junlincc

Loading

codecov-io commented Jan 19, 2021 •

edited

Loading

adam-stasiak commented Jan 19, 2021

nikolagigic commented Jan 19, 2021

adam-stasiak commented Jan 19, 2021 •

edited

Loading

junlincc commented Jan 19, 2021

nikolagigic commented Jan 19, 2021 •

edited

Loading

adam-stasiak commented Jan 19, 2021

junlincc commented Jan 19, 2021

nikolagigic commented Jan 19, 2021

geido Jan 19, 2021

geido Jan 19, 2021

ktmud Jan 19, 2021

rusackas Jan 20, 2021 •

edited

Loading

ktmud Jan 20, 2021 •

edited

Loading

rusackas commented Jan 20, 2021

ktmud commented Jan 20, 2021

nikolagigic commented Jan 21, 2021

junlincc commented Jan 23, 2021

ktmud left a comment

ktmud commented Jan 23, 2021

junlincc commented Jan 25, 2021

ktmud left a comment

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

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

Conversation

nikolagigic commented Jan 19, 2021 • edited by junlincc Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

codecov-io commented Jan 19, 2021 • edited Loading

Codecov Report

adam-stasiak commented Jan 19, 2021

nikolagigic commented Jan 19, 2021

adam-stasiak commented Jan 19, 2021 • edited Loading

junlincc commented Jan 19, 2021

nikolagigic commented Jan 19, 2021 • edited Loading

adam-stasiak commented Jan 19, 2021

junlincc commented Jan 19, 2021

nikolagigic commented Jan 19, 2021

geido Jan 19, 2021

Choose a reason for hiding this comment

geido Jan 19, 2021

Choose a reason for hiding this comment

ktmud Jan 19, 2021

Choose a reason for hiding this comment

rusackas Jan 20, 2021 • edited Loading

Choose a reason for hiding this comment

ktmud Jan 20, 2021 • edited Loading

Choose a reason for hiding this comment

rusackas commented Jan 20, 2021

ktmud commented Jan 20, 2021

nikolagigic commented Jan 21, 2021

junlincc commented Jan 23, 2021

ktmud left a comment

Choose a reason for hiding this comment

ktmud commented Jan 23, 2021

junlincc commented Jan 25, 2021

ktmud left a comment

Choose a reason for hiding this comment

nikolagigic commented Jan 19, 2021 •

edited by junlincc

Loading

codecov-io commented Jan 19, 2021 •

edited

Loading

adam-stasiak commented Jan 19, 2021 •

edited

Loading

nikolagigic commented Jan 19, 2021 •

edited

Loading

rusackas Jan 20, 2021 •

edited

Loading

ktmud Jan 20, 2021 •

edited

Loading