Design Proposal: Explore Control Panel Improvements

[mihir174]

Figma Screenshot @ 12/3/2020 11:26am

Hey all, here is the Figma page that contains the latest mockups & design assets for the Explore Control Panel:
https://www.figma.com/file/JWaGztdhZS0kS5ruG7x9tB/Control-Panel?node-id=195%3A36068

These designs are a step towards arriving at the functionality and designs accepted in SIP-34. The other key motivations are to move closer to industry standards & best practices, and to make the experience more intuitive for new & non-technical users.

These are some of the design considerations and things we thought about:

Overall Layout & Functionality -

The Cartel Explore design has the following features -
A. View columns & metrics next to the control panel
B. Drag & drop columns & metrics into the control panel
C. Toggle between similar chart types
D. View the data under the chart

Here's what we are able to currently implement as a step towards these -
A. View columns & metrics next to the control panel

D. View the data under the chart

Some FAQ & info about how this design state works -

(A,B) What does the columns & metrics panel do if users can’t drag and drop?
Currently, the columns and metrics panel are read-only, and functions as a ‘browser’. It is in an awkward in-between phase in terms of functionality, but for the time being there is added value in:

• Understanding the contents of large datasets
• Finding columns & metrics more easily


(A) Why can’t we collapse this read-only panel? 

Making any part of this side panel collapsible is outside of the technical scope for this effort. I did think about whether a collapsable panel was critical for this iteration of the design, and here are my thoughts:

• The panel is the main editable surface - seeing just the chart and data doesn’t have much value in the Explore view, in which users primarily manipulate data visualizations
• The current layout is also not ideal for a collapsible panel in its collapsed state. The Cartel design contains additional layout elements that have not been implemented (eg. C - chart type toggle selector) that make the layout conducive for both the collapsed and expanded states.
• The panel in Superset currently does not collapse

(A) The Columns and Metrics Panel is split into 2 collapsable sections (Columns, Metrics) - this doesn't follow the Cartel design exactly, which had them all in 1 list. There is an added search to make finding a column or a metric simpler for very large datasets. 
There is only a small amount of additional horizontal real estate taken up by the control panel.

Control Panel -

The sections in the Line Chart example are based on a larger effort to make the sections for each chart type consistent. The thinking is that users should expect to find the same kind of input/control under the same section of the control panel for each chart type. Some of the changes as per the SIP-34 designs-

• The datasource and chart type selectors are now a permanent sections and are not grouped with the rest of the controls
• Time column is removed - not all datasources have temporal columns and even if they do, the user may not use it as x. Instead, the time inputs are moved to the Query section, that has the sub-sections Columns, Filters, Grouping and Other - that can be consistent across other temporal chart types.

This is how I think about some of the key UI components for inputs:

• There are 2 types of items that can be taken as inputs into fields on the control panel:
  • Simple items: these do not need any configuration before adding. Ex. Column, Line Style
  • Complex items: these need configuration before adding. Ex. Metric, Filter (you have to select an aggregator or you can use custom SQL), Time Range (There are many settings and options to play with).
• There are also input fields that can take 1 item and input fields that can take multiple items
• So in total there are 4 types of inputs:


1. Single Simple Item

2. Multiple Simple Items

3. Single Complex Item

4. Multiple Complex Items

• Figma frame that shows each: https://www.figma.com/file/JWaGztdhZS0kS5ruG7x9tB/Control-Panel?node-id=195%3A36838
• For complex inputs, the add flow is most clear (especially for new or inexperienced users) when the entire input is configured before adding. This is why the config pop-over is moved to the start of the flow.

[junlincc]

Thank you so much @mihir174 for sharing Superset upcoming designs in Explore, and the rationale behind those changes with the community! This is a huge step forward in informing and further collaborating with the broader Superset community in Design transparently.

Community folks, if you have not met Mihir, he is our designer at Preset, with a focus on Explore and Dashboard. Our latest Dashboard Filter Indicator, Superset Home Screen, and upcoming Native Dashboard Filter, New Explore view are some of his latest design projects. We have been receiving valuable feedback regarding these projects and we are committed to iterating on all our Design mentioned above continually.

For this particular project, we will not be calling for a vote, as it is consistent with the proposed design in SIP-34, which has been voted in previously.
We will be rolling out D. View the data under the chart mentioned in this proposal next week, and starting the implementation A. View columns & metrics next to the control panel
, as well as new control panel soon.

Please leave your comments here or in the Figma file directly; it's open for comments for everyone.

Thanks so much in advance for all your input!

[mihir174]

Nice to meet you all and I'm looking forward to working and iterating together! :)

[etr2460]

This looks great directionally! I'll probably have more time to go through all the designs in more depth later.

One point that I did disagree with was the answer to: "Why can’t we collapse this read-only panel?"

I'm a bit concerned that the existence of 2 side panels will meaningfully affect the amount of space for the chart more than a single panel does today. Without exact sizes, it's tough to tell. I don't see a reason why we couldn't add a "Collapse sidebar" option to the 3 dot menu (or a left chevron icon somewhere) to allow collapsing of the datasource panel if a user so chooses.

I think this is especially important now that we've also added the "Data" section to explore: it looks like the chart only takes up about 20% of the full screen space now! Let me know your thoughts.

[mihir174]

@etr2460 Thanks for the quick feedback! I totally agree that the chart should have enough space.

At these screen dimensions, the current panel has a width of 494px, and the proposed one is 576px (82px difference is about the length of the current run button for ref).

We still haven't finalized the area split between the chart and the data, so there is an opportunity to increase the chart size there - what do you think is a good min. size for the chart or ratio between chart and data table areas?

Here's the main layout issue around a collapsable panel illustrated:

SIP-34 Design-

Expanded

Collapsed - the panel just slides to the left

This design (if we were to have the section collapse)-

Expanded

Collapsed - the panel has to move under the datasource selector, which is a really awkward motion

[graceguo-supercat]

I also have concern about new datasource section.

• read only:
  Recently there are a lot discussion about dataset editor: user want to see the definition of metrics and columns, and want to test their change safe and easy. If you can pull out some information that was nested in the tabs of Dataset Editor into this flat straightforward view, that will be very helpful.
  Also, why not allow user edit metric/column from here? user can do change => run => preview, then decide if they want to save the change the definition of a metric or calculated column. It will be much more convenient than current flow (edit in the Dataset Editor Modal), many clicks to find the metric/column, and change is not reversible.

• performance risk:
  Maybe just in airbnb, we have some dataset has huge number of metrics and dimensions. It already caused performance issue when we open it in Dataset Editor: page will freeze and crash. So now we don't show option for the users to edit this huge dataset. With this new design, we don't have option to hide(?), it might introduce performance issue when user load small chart from a huge dataset.

[pkdotson]

Thanks @mihir174 for the designs! This look good as far as implementation. @graceguo-supercat I believe the team discussed at cutting off the dataset columns and metrics at 50 and implementing a search feature later on.

[mistercrunch]

Looks neat! Some notes:

• about sections, I feel like we need to replicate the constructs in the dataset editor: dataset columns, metrics and calculated columns. For metrics and calculated dimensions, we have some components that expose info-bubbles + tooltips to show the SQL expression and the long description if/when available. We probably want to leverage those or do something similar here

• about responsiveness: I think currently the left panel becomes full-width as the width gets smaller, and the chart is shown underneat that section. Wondering what we'll do now on smaller width.

• +1 on @graceguo-supercat idea of enabling adding/editing dataset objets (metrics, calculated columns, ...) from here eventually (not required for MVP).

[ktmud]

Re: collapsed sidebar, I think we can keep a narrow sidebar for Datasource, like what Tableau does:

[etr2460]

Yes, what @ktmud is suggesting is what i had in mind!

As for the split between the chart and the data, i'm a bit less concerned about that, as charts should generally be in a landscape ratio. Honestly, adding data makes that easier, but it's probably important to keep the chart the focus of explore view too. I'd say we should prefer keep the chart as wide as possible, and then make the default height something pleasing to look at. Super scientific i know :P

[rusackas]

We're already flirting with the idea of a narrow/collapsed sidebar for Dashboard Native Filters. I think there are several directions/approaches we can take to that design, but I don't think that should prevent the bulk of the design (and the engineering thereof) from proceeding as laid out here. I think this is a huge overall improvement.

[mihir174]

@etr2460 @ktmud

Hey all, thanks for the feedback on the collapsable sidebars and the references!
I had a mental block earlier that the datasource selector always has to be visible - but realized that it shouldn't have to.

I tried a few different versions of collapsible side panels, but here's a clickable prototype of the version I thought was most compelling:
https://www.figma.com/proto/todPvrS5oBo1NckmHrLVtp/Collapsable-Control-Panel-Prototypes?node-id=1%3A14066&scaling=min-zoom

In this prototype, both the datasource panel and the viz control panel are collapsable. We could choose either or both.

Here's a screen recording GIF:

Here's the Figma file with all the explorations and other prototypes (each page is a different version):
https://www.figma.com/file/todPvrS5oBo1NckmHrLVtp/Collapsable-Control-Panel---Prototypes?node-id=1%3A7853

[ktmud]

This looks good, @mihir174 ! Thanks for the quick iterations.

I think the control panel doesn't have to collapse. We could just add resizing to both. If I have to make one suggestion though, is there a way to make the collapse icon lighter? It won't be a very often useful feature so better not grab too much attention.

[junlincc]

I think the control panel doesn't have to collapse. We could just add resizing to both.

@ktmud we are adding collapse to the data panel for 1.0. you mentioned that you planed to work on the resizing if you have a timeline in mind, we are happy to let you execute it. if not, we may go with both collapsible for now, you or anyone can pick it up from there later. let us know you plan~ cc: @pkdotson

is there a way to make the collapse icon lighter?

@mihir174 light blue does stand out. can we use a different color?

let's lock the scope soon, as development has started already.

[junlincc]

@kgabryje 🙏

[mistercrunch]

Seems like "TIME GRAIN" belongs under the "Grouping" section not the "Filter" section