New "Add Widget" UX


#1

One screen with all the 3 configurations feels quite cramped and confusing.
Need room for actual visualization.
Need room for explanations / reference to help docs.
Steps!:

PLAYGROUND HERE (netlify preview #3443)

Notice: Selecting a query with params adds a step.


#2

Can see my draft PR here https://github.com/getredash/redash/pull/3443

I’d like to get feedback and ideas before continuing.


#3

Regarding the visualization step - the selectbox is a sub-par UX.
I’m thinking sidebar with vertical radio buttons and viz content to the right.


#4

Updated viz step look - sidebar with radio buttons, “add” button at the bottom.

Also, swapped “params” and “viz” steps cause it makes more sense.


#5

I’m thinking of removing the “Review Parameters” as a stand-alone step, and instead having an “edit params” button appear in the query selection step when relevant. @arikfr wdyt?


#6

I wanted to get rid of the selectbox for a long time… I was thinking of cards UI, but seems like you found a better solution :+1:

I think the preview placeholder you have there should show the widget itself and not just the visualization. Then when we add extra options like “hide description”/“hide title”/“change title”, it can all be previewed here. Wdyt?

I assume that 90% of the time people will go with default (use dashboard parameter), so I see why it makes sense. Just need to make sure it’s not too hidden and clear.


#7

I think that picking a query, should auto advance to the next screen.


#8

Not if we want to allow param editing in this step though.


#9

:thinking: maybe move it to the pick visualization step, and rename the step?

Basically this step becomes pick visualization + edit widget options.


#10

Makes perfect sense. I’ll work on it.