Skip to content
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

style: Wrap chart titles again #11602

Merged
merged 2 commits into from
Nov 6, 2020

Conversation

rusackas
Copy link
Member

@rusackas rusackas commented Nov 6, 2020

SUMMARY

This PR re-enables line-wrapping. Truncation might be re-enabled as a feature flag or something for those who prefer it, in a subsequent PR.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:
image

After:
image

TEST PLAN

ADDITIONAL INFORMATION

  • Has associated issue:
  • Changes UI
  • Requires DB Migration.
  • Confirm DB Migration upgrade and downgrade tested.
  • Introduces new feature or API
  • Removes existing feature or API

@codecov-io
Copy link

codecov-io commented Nov 6, 2020

Codecov Report

Merging #11602 into master will decrease coverage by 5.12%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #11602      +/-   ##
==========================================
- Coverage   66.57%   61.45%   -5.13%     
==========================================
  Files         876      420     -456     
  Lines       42179    26193   -15986     
  Branches     3954        0    -3954     
==========================================
- Hits        28082    16096   -11986     
+ Misses      13994    10097    -3897     
+ Partials      103        0     -103     
Flag Coverage Δ
cypress ?
javascript ?
python 61.45% <ø> (-0.71%) ⬇️

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

Impacted Files Coverage Δ
superset/db_engines/hive.py 0.00% <0.00%> (-85.72%) ⬇️
superset/db_engine_specs/hive.py 53.90% <0.00%> (-30.08%) ⬇️
superset/db_engine_specs/presto.py 69.76% <0.00%> (-12.53%) ⬇️
superset/db_engine_specs/mysql.py 79.59% <0.00%> (-12.25%) ⬇️
superset/examples/world_bank.py 97.10% <0.00%> (-2.90%) ⬇️
superset/examples/birth_names.py 96.51% <0.00%> (-2.33%) ⬇️
superset/views/database/mixins.py 80.70% <0.00%> (-1.76%) ⬇️
superset/models/core.py 87.60% <0.00%> (-1.66%) ⬇️
superset/views/core.py 73.77% <0.00%> (-0.49%) ⬇️
superset/connectors/sqla/models.py 90.36% <0.00%> (-0.27%) ⬇️
... and 456 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 1490f30...fb38c43. Read the comment docs.

@ktmud
Copy link
Member

ktmud commented Nov 6, 2020

Could be a dashboard/slice level config, too!

@junlincc
Copy link
Member

junlincc commented Nov 6, 2020

LGTM, but again, from a product stand point, i don't think wrapping long chart title in dashboard is the best visual solution nor the best user behavior we want to encourage.if that makes sense to the users, we are alright to bring the long title back.

@ktmud
Copy link
Member

ktmud commented Nov 6, 2020

Another idea is to use dynamic font size based on text length. We already do that for some visualizations and there is a utility function in superset-ui readily available to use.

Personally I feel it makes more sense to wrap the title instead of truncating it because users put in long titles for a reason---if they really feel it looks bad, they would choose a shorter title already.

@rusackas rusackas changed the title Wrap chart titles again style: Wrap chart titles again Nov 6, 2020
@junlincc
Copy link
Member

junlincc commented Nov 6, 2020

Another idea is to use dynamic font size based on text length. We already do that for some visualizations and there is a utility function in superset-ui readily available to use.

Personally I feel it makes more sense to wrap the title instead of truncating it because users put in long titles for a reason---if they really feel it looks bad, they would choose a shorter title already.

Our original design/implementation is to have tooltip showed while user hover truncated title. so that user can view a cleaner dashboard without seeing overloaded information yet being able to access information as they need. My understanding is user have to put in long time is because

  1. to include details for specific chart
  2. there are no other easy places to store or display these detailed information
    We certainly shouldn't ask user to cut the necessary details associate with a chart, but we can certainly come up w better solution for the second point.
    Design input and user testing are needed for this topic. though this is a small change in the entire product, we try not to make product decision base on individual preference or a single use case.

@graceguo-supercat
Copy link

I think offer the ability to show full title is very important. Chart title is part of data accuracy. If user prefer single line title to descriptive title, they already have other choices.

Here is a real example (before vs after we release new filter status)
Screen_Shot_2020-11-03_at_4_35_06_PM

@suddjian
Copy link
Member

suddjian commented Nov 6, 2020

I think offer the ability to show full title is very important.

The full title is shown on hover right now via a title attribute.

@graceguo-supercat
Copy link

graceguo-supercat commented Nov 6, 2020

I think offer the ability to show full title is very important.

The full title is shown on hover right now via a title attribute.

Force user to hover chart one by one?
If the design is always asking user to do extra instead of naturally display it...probably not a good enough.

@rusackas
Copy link
Member Author

rusackas commented Nov 6, 2020

@graceguo-supercat this PR gives you exactly what you're asking for... is there a reason not to approve it?

@graceguo-supercat
Copy link

graceguo-supercat commented Nov 6, 2020

@graceguo-supercat this PR gives you exactly what you're asking for... is there a reason not to approve it?

haha No. Sorry i just forgot :)

Thanks for make it happen!!

Copy link

@graceguo-supercat graceguo-supercat left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@suddjian
Copy link
Member

suddjian commented Nov 6, 2020

Junlin's outline of the finer points of this design challenge is very insightful. We should look at better ways to address the true underlying user needs driving this discussion. But for now I think removing title truncation makes sense.

@suddjian
Copy link
Member

suddjian commented Nov 6, 2020

Fixes #11581

@rusackas
Copy link
Member Author

rusackas commented Nov 6, 2020

Obviously this is one contentious line of CSS! Some of us like shorter chart headers... some of us don't. I can see a few ways to tackle things like it in the future:

  1. More feature flags... though many of us are not fans of adding a bunch of feature flags for tiny CSS changes, the option exists
  2. Adding a custom style sheet somewhere - think of it as a config file, where you can just override some things like this. This could get fragile quickly, so it would be a "use at your own risk" thing.
  3. Adding a user preferences area... though not all that different from feature flags, at least the user gets the choice.
  4. Bringing this sort of thing back to the community as DISCUSS and VOTE threads. We have a governance model for a good reason :)

The important thing (to me anyway) is that Superset is going to have a lot of changes... we need to get better at:
• Considering design proposals before approving, so we don't have to backtrack later
• Surfacing feedback from users in a constructive way, as early as possible
Iterating on features when we can, to prevent big reverts over small details.
• Staying friends through all of this! ❤️ All of your hard work and input is valued here. Thanks, everyone.

... but again, much ado about just one line... merging!

@rusackas rusackas merged commit 32e52e9 into apache:master Nov 6, 2020
@rusackas rusackas deleted the wrap-chart-titles-again branch November 6, 2020 19:10
@graceguo-supercat
Copy link

Before implementation, a design document which is clear, accurate, highlight all the changes, public accessible to open source community, will help us.

@mistercrunch
Copy link
Member

Before implementation, a design document which is clear, accurate, highlight all the changes, public accessible to open source community, will help us.

It's quite a luxury and ideal to have that when we can, and we're committed to get better at this. But realistically won't always be possible depending on the work at hand. Personally what I think is important is the ability to quickly get to a state that a majority is happy with, and sometimes it'll require some back and forth. It's hard to know ahead of time which areas might be contentious too.

graceguo-supercat pushed a commit to airbnb/superset-fork that referenced this pull request Nov 10, 2020
* style: letting chart titles wrap again

* deleting comment

(cherry picked from commit 32e52e9)
auxten pushed a commit to auxten/incubator-superset that referenced this pull request Nov 20, 2020
* style: letting chart titles wrap again

* deleting comment
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.0.0 labels Mar 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/XS 🚢 1.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants