UI UX Discussion

0.6 Release

Toolbar

The toolbar should be configurable so the user can control placement (top, bottom, left, right) and layout (vertical or horizontal).

Current Tools

For the default toolbar for the 0.6 release (top placement, horizontal layout) is shown below. In this example the Resize tool is active.

Icons Needed

• Hover Tool

Tooltips

Tooltips will appear, as shown below, on hover.

Help Tab

A Help option was added to display information on how to use the default tools (Pan and Wheel Zoom) and a link to Learn More. A corresponding landing page should be created with more information on configuring the tools.

Future Work

Migrated from https://github.com/ContinuumIO/bokeh/issues/67

Key Goals

• Create standard look-and-feel for Bokeh plots. I see the tool palette and status bar as being part of the definitive and distinguishing "chrome" for Bokeh plots.
• Make tool palette look good on a variety of themes (dark and light background)
• Have a place to display readouts from inspection tools
• Have a place to provide usage hints to users (e.g. "Drag: pan Wheel: zoom R-Drag: box-select") that can dynamically change when user pressed modifier keys
  • Note: this is somewhat addressed by the "Help Tab"

Low-level details

• Move resize to a corner widget/scrubber

  • UI update for 0.5 removed the "XBox" overlay in favor of a small, suggestive arrow in the lower-right corner

• Handle constrained pan & zoom, both limited in terms of dimension as well as bounded in terms of data range (e.g. max zoom in/out)

  • Design this to work well in both "concealed" mode that only pops up when the user mouses into a plot region, as well as in "show" mode that is always on

• Keep touch events in mind, and think about how to present a possibly different set of interaction hints for touch-enabled browsers.

• Add a lasso, polyline, and range mode to the selection tool

• When designing the chrome, think about how to eventually add links to origin notebooks and sources, etc.