Design Proposal: Explore Control Panel Improvements

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.

[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]

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