[Welcome] confusing Saved Queries card

[ktmud]

Screenshot

Description

I don't think I understand the elements of this card.

1. What is Table 1?
2. Timestamp seems missing for "Last run"
3. The position of "···” seems off.
4. The header is too heavy, kind of making the most important info--the query name (or label)---not visible enough, especially with cutoff. Maybe we should rid of "table" and "datasource name", and find ways to focus on these two user-inputed fields instead.
   

Design input

[describe any input/collaboration you'd like from designers, and
tag accordingly. For design review, add the
label design:review. If this includes a design proposal,
include the label design:suggest]

[junlincc]

on it, thanks for reporting. @pkdotson what im seeing from my end.. well i didn't test saved queries obviously.. 😞

[mihir174]

thanks for the quick feedback @ktmud ! this is what the cards are intended to look like^

1. the number under "tables" is the number of tables
2. good catch, the timestamp is supposed to appear right next to "last run"
3. that position is off probably due to the missing favorites button
4. the query name is meant to be heavier like in the above mockup. the name also it appears below the other info to be consistent with other cards like the dashboard and chart cards. for the label - i wasn't sure how important the labels were, so this is super helpful to know. i'll work to make that more prominent in the next round of designs :)

[junlincc]

1. then there is a bug.. in my case should be 7 instead of 1....

[ktmud]

"Label" is the query name, it's just we call it "label" in the save query form.

Another idea is to display a snippet of the query itself instead of the description. E.g.

Also note that currently Superset doesn't support favoriting saved queries yet, which is probably why @pkdotson didn't add the favorite button in the first place. Whether we want to add support for favoriting them is another question, but before we do, we should probably disable the "Favorites" tab for now.

[mistercrunch]

@ktmud +1 on SQL maybe even with aggressively small characters ~8px

[mistercrunch]

Crazy idea: thumbnail + fisheye!

[junlincc]

@ktmud getting rid of the table number since it's too confusing, adding snippet.

[mihir174]

@ktmud that makes sense, and i like the idea of show code snippets in the cards, especially since it's difficult to fit them into list views. i built on the screenshot you provided and modified the layout to be more consistent with the dashboard and chart cards -

[mihir174]

Here's what it could look like on the home page -

[ktmud]

@mihir174 thanks for the updates! This looks good. Any reason to give the query snippet a gray background? Currently it kind of blends too well with the page background. Would also be curious to see how the card looks like when the title is very long.

I like the new icons for charts in the Recents section! Much more distinguishable than the current icons.

Looking at this page more, I'd like to make a couple of more suggestions for your consideration: @junlincc @mistercrunch

1. Should we move the Charts section above Saved Queries, or even Dashboards?
2. For Superset instances that do not have thumbnails enabled, maybe we could change the thumbnail cards to use the same style as the Recents cards.
3. The Recents cards uses "Last Edited: {absolute timestamp}" but the thumbnail cards says "Last modified {relative time}":
   1. Should we have some consistency here?
   2. Should the recently viewed cards use "Last viewed"?
4. In the Recents section, even with the icons, it's still a little hard to tell whether a card represents a dashboard or a chart. I wonder if we can change the whole section to be only about "Recently viewed", and use the tabs to filter by entity types.

[junlincc]

Would also be curious to see how the card looks like when the title is very long.

good one! 😆 @mihir174 please take that into consideration

1. I personally like the idea of moving chart section above saved queries, but it really depends on the users. there are companies that rely heavily on SQL lab and not so much charting. ideally, we should allow user to decide the order.
2. @nytai I believe Tai is working on the solution. but I agree we should provide that option on the welcome page. especially enabling thumbnail is such a pain...
3. I'm not sure "Last Edited" and "Last modified" are by design..... but please at least keep cases consistent!!
4. the icons look pretty clear to me but we can certainly provide a different mockup to compare and run user test on post 1.0

[mihir174]

@ktmud long titles are gonna be treated like the dashboard and chart cards - they will be truncated and the user will be able to see the whole title on hover

here's a mockup:

and here's an example of dashboard cards with long titles:

[junlincc]

i understand that showing title is important to your users. if we don't truncate long title, then the card will look really overloaded and no longer serve its purpose as an information overview. @ktmud

[ktmud]

What do you mean it doesn't serve its purpose? I think they look kind of OK:

[junlincc]

@ktmud long titles are gonna be treated like the dashboard and chart cards - they will be truncated and the user will be able to see the whole title on hover

@mihir174 @pkdotson I don't think see title on hover is implemented on any cards, please make sure .........😞

[ktmud]

I don't have a strong opinion on whether the title should be truncated here as it's less a data accuracy issue here than on dashboards and the titles are less likely to be very long or have similar prefixes anyway.

[ktmud]

I think it's OK to just show an HTML title attribute. Tooltip might be a little too heavy in this case, especially if most titles don't truncate.

[rusackas]

The real perk of the tooltip in my view is that it displays a bit faster than the html title. That makes it a little more discoverable to those with cursors, even if perhaps it's less accessible from an a11y standpoint. So... I guess it's kind of a tossup :)

[nytai]

can we close this since ☝️ merged?

[junlincc]

we will get rid of the Favorite tab in a separate PR in the hardening phase. closing this issue for now.

[nytai]

@rusackas since the truncation is being handled by css, I can't think of a way to only show a tooltip if there is truncation. I think adding a tooltip of every single title will make the whole page kind of jumpy.

[nytai]

ok, looks like all titles have tooltips now 😕

[rusackas]

Correct.... my dream of an :is-overflowed selector still eludes me.

[junlincc]

🥺 let's move on for now lol~

[rusackas]

Oooh, this looks promising... for another PR.

[nytai]

oh that's great, we can definitely use that in some of the listviews