-
Notifications
You must be signed in to change notification settings - Fork 14.4k
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
[Lyft-GA] Enable color consistency in a dashboard #7135
Conversation
Moved actions, minor UI, allowed dashboard copy Fix linting errors Undo unintentional change Updated and added unit tests Fail quietly if package has not been updated Fail quietly on dashboard copy if package is old
26a8d9f
to
fdf496d
Compare
Codecov Report
@@ Coverage Diff @@
## lyftga #7135 +/- ##
==========================================
- Coverage 64.34% 64.23% -0.11%
==========================================
Files 423 425 +2
Lines 20597 20672 +75
Branches 2255 2270 +15
==========================================
+ Hits 13253 13279 +26
- Misses 7211 7260 +49
Partials 133 133
Continue to review full report at Codecov.
|
export function setColorSchemeAndUnsavedChanges(colorScheme) { | ||
return dispatch => { | ||
dispatch(setColorScheme(colorScheme)); | ||
dispatch(setUnsavedChanges(true)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
setUnsavedChanges (and hasUnsavedChanges
state) is shared with dashboard's layout change. If you change color scheme, change dashboard layout, then undo a all dashboard layout change, the hasUnsavedChanges flag will be reset.
you probably have to add some logic to make sure this flag carries changes from both.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added a bool flag to track unsaved color changes. I don't love the approach but since we want the layout stuff to be refactored to allow non-layout changes to be undo-able, this was the least amount of changes until that refactoring gets done.
onMouseEnter={this.onMouseEnter} | ||
onMouseLeave={this.onMouseLeave} | ||
> | ||
<ColorSchemeControl |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you add scheme name as tooltip when user mouse over color scheme choices?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let me get @dorq 's opinion. The color name schemes may not make sense to users based on what we call them today.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@khtruong and I discussed this offline, and we agreed that even though the color scheme names are not very user-friendly (e.g. 'lyftColors', 'bnbColors', 'd3Category10', d3Category20'), there are situations in which it would be valuable to see them. So adding them as a tooltip (as opposed to putting the scheme names directly into the dropdown options) is a good compromise.
@khtruong will add this to the PR (thanks, Kim!)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll try to make them as user-friendly as possible (i.e. lyftColors -> Lyft Colors, bnbColors -> Airbnb Colors, etc)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i don't really mean to use scheme name (like lyftcolors bnbcolors), any user friendly descriptive name will be good. so that when i want to apply same color scheme all over multiple dashboards, it will be easier for me to remember.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ColorScheme
datastructure has label
field, which falls back to id
by default.
I think the code in this PR should use the label
instead of the keys
which are id
.
Then we can update the color schemes in @superset-ui
to include human-friendly label
.
p.s. ColorScheme
also has description
field.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You are quick! I just updated the color schemes in @superset-ui to have actual labels.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
awesome!
Yeah. Unfortunately, the chart and dashboard coloring are completely separate. I chatted with design and PM on this. The issue is that charts can be part of multiple dashboards so which dashboard should carry over to the chart? So the color mapping is reset when you explore the chart. I think it appeared the color scheme carried over but I would guess that coincidentally the dashboard and chart both have the same color scheme. We haven't thought of a great to get a consistent experience. |
it's not coincident, because you added In my opinion, chart opened from dashboard should be consistent with its look/data inside the dashboard. |
@@ -49,7 +49,7 @@ | |||
"dependencies": { | |||
"@data-ui/sparkline": "^0.0.54", | |||
"@superset-ui/chart": "^0.9.6", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please check versions. master
has newer version for these @superset-ui/xxx
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a branch off of lyftga. I think lyftga is a little behind.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oh....haha my bad
Eek. You're right. I was thinking of when I changed the colors and then went to the chart and explored it from the chart list. I have updated it to use the chart form data so that when you explore it, it will use the color scheme associated with that chart. Yeah, I think there are differing opinions of what should happen. I personally am unsure and think we need to rethink about it from a broader perspective that covers all, or at least most, cases. It does feel more consistent to have what the dashboard set but we still have a problem if the chart is part of multiple dashboards that have different color schemes. Should the color scheme just be temporary? Should we indicate to the user that this is not the chart's saved color scheme? There hasn't been a general consensus yet. We can definitely discuss more for future PRs if you want to brainstorm a better experience. But for now, I will reset it to the chart's color scheme until there's been a clearer consensus of that experience should be. |
Think about this:
Chart |
Good point! Grace and I discussed offline. We are in agreement on how the ideal scenario should be. But I think that leads to the next point: we need color consistency in charts as well. I'd like to address these in separate PR's that build on top of each other where each PR gets us to a better experience (It's always nicer to review smaller PRs if we can help it. I know I appreciate that :) ). So I'd like to keep it how it is and open up a git issue that will address color consistency in charts that includes having consistency when you explore charts from the dashboard. How's that sound? |
good. We can take care dashboard => explore view label consistency in another PR. Thanks for the work!! |
Thanks for all the feedback!! You have been awesome. |
Issue has been created to track this work: #7163 |
* Enable color consistency in a dashboard Moved actions, minor UI, allowed dashboard copy Fix linting errors Undo unintentional change Updated and added unit tests Fail quietly if package has not been updated Fail quietly on dashboard copy if package is old * Update packages * Remove unnecessary code * Addressed Grace's comments * Small fix for item key * Reset chart's color during exploration * Do not reset chart form data when exploring chart
* Sparkline dates aren't formatting in Time Series Table (#6976) * Exclude venv for python linter to ignore * Fix NaN error * Fix the white background shown in SQL editor on drag (#7021) This PR sets the background-color css property on `.ace_scroller` instead of `.ace_content` to prevent the white background shown during resizing of the SQL editor before drag ends. * Show tooltip with time frame (#6979) * Fix time filter control (#6978) * Enhancement of query context and object. (#6962) * added more functionalities for query context and object. * fixed cache logic * added default value for groupby * updated comments and removed print (cherry picked from commit d5b9795) * [fix] /superset/slice/id url is too long (#6989) (cherry picked from commit 6a4d507) * [WIP] fix user specified JSON metadata not updating dashboard on refresh (#7027) (cherry picked from commit cc58f0e) * feat: add ability to change font size in big number (#7003) * Add ability to change font sizes in Big Number * rename big number to header * Add comment to clarify font size values * Allow LIMIT to be specified in parameters (#7052) * [fix] Cursor jumping when editing chart and dashboard titles (#7038) (cherry picked from commit fc1770f) * Changing time table viz to pass formatTime a date (#7020) (cherry picked from commit 7f3c145) * [db-engine-spec] Aligning Hive/Presto partition logic (#7007) (cherry picked from commit 05be866) * [fix] explore chart from dashboard missed slice title (#7046) (cherry picked from commit a6d48d4) * fix inaccurate data calculation with adata rolling and contribution (#7035) (cherry picked from commit 0782e83) * Adding warning message for sqllab save query (#7028) (cherry picked from commit ead3d48) * [datasource] Ensuring consistent behavior of datasource editing/saving. (#7037) * Update datasource.py * Update datasource.py (cherry picked from commit c771625) * [csv-upload] Fixing message encoding (#6971) (cherry picked from commit 48431ab) * [sql-parse] Fixing LIMIT exceptions (#6963) (cherry picked from commit 3e076cb) * Adding custom control overrides (#6956) * Adding extraOverrides to line chart * Updating extraOverrides to fit with more cases * Moving extraOverrides to index.js * Removing webpack-merge in package.json * Fixing metrics control clearing metric (cherry picked from commit e619405) * [sqlparse] Fixing table name extraction for ill-defined query (#7029) (cherry picked from commit 07c340c) * [missing values] Removing replacing missing values (#4905) (cherry picked from commit 61add60) * [SQL Lab] Improved query and results tabs rendering reliability (#7082) closes #7080 (cherry picked from commit 9b58e9f) * Fix filter_box migration PR #6523 (#7066) * Fix filter_box migration PR #6523 * Fix druid-related bug (cherry picked from commit b210742) * SQL editor layout makeover (#7102) This PR includes the following layout and css tweaks: - Using flex to layout the north and south sub panes of query pane so resizing works properly in both Chrome and Firefox - Removal of necessary wrapper divs and tweaking of css in sql lab so we can scroll to the bottom of both the table list and the results pane - Make sql lab's content not overflow vertically and layout the query result area to eliminate double scroll bars - css tweaks on the basic.html page so the loading animation appears in the center of the page across the board (cherry picked from commit 71f1bbd) * [forms] Fix handling of NULLs (cherry picked from commit e83a07d) * handle null column_name in sqla and druid models (cherry picked from commit 2ff721a) * Use metric name instead of metric in filter box (#7106) (cherry picked from commit 003364e) * Bump python lib croniter to an existing version (#7132) Package maintainers should really never delete packages, but it appears this happened with croniter and resulted in breaking our builds. This PR bumps to a more recent existing version of the library (cherry picked from commit 215ed39) * Revert PR #6933 (#7162) * [bugfix] SQL Lab 'Filter Results' doesn't stick (#7104) When using a "Search Results" criteria, the subset of rows that match the criteria get displayed. While this the filter is applied, if another query is run, the filter is still active, but not displayed in the input text box. After this change, the state of the input box sticks after subsequent queries. (cherry picked from commit d5e8d66) * Injectable statsd client (#7138) * Add ability to inject statsd client; some py test/reqs updates - Updated the metrics logger to allow construction with an existing statsd client, so that it can be configured by external systems or libs. - added requirements to requirements-dev.txt which are needed to run tests-eg coverage, nose - removed dependency on mock lib, it is in python stdlib now - updated tox.ini to remove the now-superfluous deps * add license to test file, and remove blank line at EOF (cherry picked from commit ba19a62) * [Lyft-GA] Enable color consistency in a dashboard (#7135) * Enable color consistency in a dashboard Moved actions, minor UI, allowed dashboard copy Fix linting errors Undo unintentional change Updated and added unit tests Fail quietly if package has not been updated Fail quietly on dashboard copy if package is old * Update packages * Remove unnecessary code * Addressed Grace's comments * Small fix for item key * Reset chart's color during exploration * Do not reset chart form data when exploring chart * Fix double scroll bars when content of sql result table overflows horizontally (#7168) The PR substracts the scrollbar height from the height of the container of the react virtualized table so we don't see double scrollbars. (cherry picked from commit 7ffcabd) * Change number format default * Use smart formatter instead * fix merge issues * Use SMART_NUMBER
* Enable color consistency in a dashboard Moved actions, minor UI, allowed dashboard copy Fix linting errors Undo unintentional change Updated and added unit tests Fail quietly if package has not been updated Fail quietly on dashboard copy if package is old * Update packages * Remove unnecessary code * Addressed Grace's comments * Small fix for item key * Reset chart's color during exploration * Do not reset chart form data when exploring chart
* Sparkline dates aren't formatting in Time Series Table (#6976) * Exclude venv for python linter to ignore * Fix NaN error * Fix the white background shown in SQL editor on drag (#7021) This PR sets the background-color css property on `.ace_scroller` instead of `.ace_content` to prevent the white background shown during resizing of the SQL editor before drag ends. * Show tooltip with time frame (#6979) * Fix time filter control (#6978) * Enhancement of query context and object. (#6962) * added more functionalities for query context and object. * fixed cache logic * added default value for groupby * updated comments and removed print (cherry picked from commit d5b9795) * [fix] /superset/slice/id url is too long (#6989) (cherry picked from commit 6a4d507) * [WIP] fix user specified JSON metadata not updating dashboard on refresh (#7027) (cherry picked from commit cc58f0e) * feat: add ability to change font size in big number (#7003) * Add ability to change font sizes in Big Number * rename big number to header * Add comment to clarify font size values * Allow LIMIT to be specified in parameters (#7052) * [fix] Cursor jumping when editing chart and dashboard titles (#7038) (cherry picked from commit fc1770f) * Changing time table viz to pass formatTime a date (#7020) (cherry picked from commit 7f3c145) * [db-engine-spec] Aligning Hive/Presto partition logic (#7007) (cherry picked from commit 05be866) * [fix] explore chart from dashboard missed slice title (#7046) (cherry picked from commit a6d48d4) * fix inaccurate data calculation with adata rolling and contribution (#7035) (cherry picked from commit 0782e83) * Adding warning message for sqllab save query (#7028) (cherry picked from commit ead3d48) * [datasource] Ensuring consistent behavior of datasource editing/saving. (#7037) * Update datasource.py * Update datasource.py (cherry picked from commit c771625) * [csv-upload] Fixing message encoding (#6971) (cherry picked from commit 48431ab) * [sql-parse] Fixing LIMIT exceptions (#6963) (cherry picked from commit 3e076cb) * Adding custom control overrides (#6956) * Adding extraOverrides to line chart * Updating extraOverrides to fit with more cases * Moving extraOverrides to index.js * Removing webpack-merge in package.json * Fixing metrics control clearing metric (cherry picked from commit e619405) * [sqlparse] Fixing table name extraction for ill-defined query (#7029) (cherry picked from commit 07c340c) * [missing values] Removing replacing missing values (#4905) (cherry picked from commit 61add60) * [SQL Lab] Improved query and results tabs rendering reliability (#7082) closes #7080 (cherry picked from commit 9b58e9f) * Fix filter_box migration PR #6523 (#7066) * Fix filter_box migration PR #6523 * Fix druid-related bug (cherry picked from commit b210742) * SQL editor layout makeover (#7102) This PR includes the following layout and css tweaks: - Using flex to layout the north and south sub panes of query pane so resizing works properly in both Chrome and Firefox - Removal of necessary wrapper divs and tweaking of css in sql lab so we can scroll to the bottom of both the table list and the results pane - Make sql lab's content not overflow vertically and layout the query result area to eliminate double scroll bars - css tweaks on the basic.html page so the loading animation appears in the center of the page across the board (cherry picked from commit 71f1bbd) * [forms] Fix handling of NULLs (cherry picked from commit e83a07d) * handle null column_name in sqla and druid models (cherry picked from commit 2ff721a) * Use metric name instead of metric in filter box (#7106) (cherry picked from commit 003364e) * Bump python lib croniter to an existing version (#7132) Package maintainers should really never delete packages, but it appears this happened with croniter and resulted in breaking our builds. This PR bumps to a more recent existing version of the library (cherry picked from commit 215ed39) * Revert PR #6933 (#7162) * [bugfix] SQL Lab 'Filter Results' doesn't stick (#7104) When using a "Search Results" criteria, the subset of rows that match the criteria get displayed. While this the filter is applied, if another query is run, the filter is still active, but not displayed in the input text box. After this change, the state of the input box sticks after subsequent queries. (cherry picked from commit d5e8d66) * Injectable statsd client (#7138) * Add ability to inject statsd client; some py test/reqs updates - Updated the metrics logger to allow construction with an existing statsd client, so that it can be configured by external systems or libs. - added requirements to requirements-dev.txt which are needed to run tests-eg coverage, nose - removed dependency on mock lib, it is in python stdlib now - updated tox.ini to remove the now-superfluous deps * add license to test file, and remove blank line at EOF (cherry picked from commit ba19a62) * [Lyft-GA] Enable color consistency in a dashboard (#7135) * Enable color consistency in a dashboard Moved actions, minor UI, allowed dashboard copy Fix linting errors Undo unintentional change Updated and added unit tests Fail quietly if package has not been updated Fail quietly on dashboard copy if package is old * Update packages * Remove unnecessary code * Addressed Grace's comments * Small fix for item key * Reset chart's color during exploration * Do not reset chart form data when exploring chart * Fix double scroll bars when content of sql result table overflows horizontally (#7168) The PR substracts the scrollbar height from the height of the container of the react virtualized table so we don't see double scrollbars. (cherry picked from commit 7ffcabd) * Change number format default * Use smart formatter instead * fix merge issues * Use SMART_NUMBER
Accidentally messed up rebasing and it seemed easier to just create a new branch.
Refer to this PR for all details: #7086