mihir174 opened a new issue #11916: URL: https://github.com/apache/incubator-superset/issues/11916
Hey all, here are 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](https://github.com/apache/incubator-superset/issues/8976). 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](https://projects.invisionapp.com/share/BNVBOEJRWQ2#/screens/398392104) 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](https://www.figma.com/file/JWaGztdhZS0kS5ruG7x9tB/Control-Panel?node-id=195%3A36132) 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. ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
