Exploring alternate UI/UX

[ellisonbg]

The existing Voyager UI is designed to be a full page app. In JupyterLab, that doesn't make as much sense. This purpose of this issue is to explore different ways of breaking Voyage apart into separate pieces and arranging them into different places in the JupyterLab UI. For now I am just taking screenshots and hacking together new views in Sketch.

[ellisonbg]

Here is a version that:

• Removes the header (Bookmark, Undo, Redo can be moved to a menu)
• Removes the Data component (we will pass it data)
• Only shows the specified view.

Pros:

• More minimal than the full thing, takes up less space in the dock panel.
• More focused UI.

Cons:

• Still not a great aspect ratio for the dock panel - you still can't fit a notebook, file browser and Voyager easily all together.

[ellisonbg]

Here is another version that separates the Fields/Encoding from the actual visualization view:

Pros:

• Full flexibility of JupyterLab to layout the different components.
• Side panel used effectively
• Can easily size visualization panel separately from the Fields/Encodings.

Cons:

• The Fields/Encoding UI is probably wider than most side panel content. We can put a minimal size on the content to make sure the side panel is wide enough though.
• More disjoint.

[dhirschfeld]

I don't have much to add but just wanted to say that, done well, I think this could be a killer feature and I'm excited to see where it goes!

[dhirschfeld]

A nice UX might be if there was a JupyterLab Voyager widget which displayed the chart in the JLab output but when selected linked to a Voyager side panel which would allow the user to change the Fields/Encoding to explore different visualisations of the data.

[ellisonbg]

Thanks for encouraging words. We do want to explore helpful ways of integrating the notebook output and voyager UI.

On Sun, Sep 24, 2017 at 8:42 PM, Dave Hirschfeld [email protected] wrote:

A nice UX might be if there was a JupyterLab Voyager widget which displayed the chart in the JLab output but when selected linked to a Voyager side panel which would allow the user to change the Fields/Encoding to explore different visualisations of the data.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/altair-viz/jupyterlab_voyager/issues/7#issuecomment-331770053, or mute the thread https://github.com/notifications/unsubscribe-auth/AABr0Kcm5M8z3rrRWFtnCiDJlR0Zt4b-ks5slyE-gaJpZM4PhwuF .

-- Brian E. Granger Associate Professor of Physics and Data Science Cal Poly State University, San Luis Obispo @ellisonbg on Twitter and GitHub [email protected] and [email protected]

[saulshanabrook]

I was looking around the JupyterLab UI for other existing patterns that might be similar to this and found the "Inspector" that can be opened from the Notebook:

The Voyager Fields/Encoding UI maybe could be thought of as an inspector for Vega Lite schemas. So instead of a side panel, it would just be a different window (also made with Sketch from @ellisonbg's screenshots):

To parallel something like the existing Inspect window, you could right click on any existing Vega Lite preview and select "Modify" or something and it would bring up this Voyager GUI.

If you had a file in the sidebar, maybe it would then open two panels, one for the Vega Lite visualization (like an unsaved buffer) and then the field editor as well.

[saulshanabrook]

@ellisonbg Did you remove the suggested visualizations in order to reduce visual clutter?

[saulshanabrook]

Instead of having the fields/encodings on left, we could also have them above in a toolbar. This one make the UI more similar to the Datagrid UI to change the delimiter for the file. Imagine that the toolbar at the top has all of the encoding options:

Pros:

• Less horizontal space used
• Simpler UI components (dropdowns instead of drag and drop)
• Similar to existing Datagrid UI

Cons:

• Lose listing of all fields
• Harder to group encodings
• Header row would likely have to wrap

[kanitw]

One potential big usability problem with the disjointed window version is that if users open multiple sets of Voyager instances and drag tabs around, it will be no longer clear which data/encoding panes maps to which plots.

[dhirschfeld]

I think if the encoding pane/window simply reflected the data for the currently selected Voyager plot/widget and displayed a message "No Voyager widget selected." if none currently had focus it would be reasonably clear for the user