Add support for "floating" UI elements #13538

mattpap · 2023-11-17T19:04:41Z

This This PR adds various new and improves existings "floating" UI elements, like dialogs, panels (e.g. floating toolbars), drop panes, ~~drawers (side bars)~~, ~~alerts~~, tooltips, context menus, etc. and refines methods for attaching them can to other UI elements and renderers (e.g. annotations, frames).

An example of multiple dialogs, which support moving and resize (with constraints), z-order management, various controls (like minimization/maximization, collapsing, pinning) and contents which can be HTML, UI elements or layouts:

codecov · 2023-12-07T01:31:56Z

Codecov Report

Attention: 13 lines in your changes are missing coverage. Please review.

Comparison is base (b46bf47) 92.59% compared to head (279092e) 92.58%.

Additional details and impacted files

@@              Coverage Diff               @@
##           branch-3.4   #13538      +/-   ##
==============================================
- Coverage       92.59%   92.58%   -0.02%     
==============================================
  Files             323      325       +2     
  Lines           20590    20723     +133     
==============================================
+ Hits            19065    19186     +121     
- Misses           1525     1537      +12

mattpap · 2024-01-30T01:04:58Z

Attribution is now implemented as a panel positioned with respect to the frame (using a symbolic coordinate) and allows multiple non-overlapping entries:

mattpap · 2024-01-30T02:03:20Z

examples/basic/ui/inline_data_entry.py shows how to dynamically position a panel in data space:

Screencast.from.30.01.2024.02.58.20.webm

mattpap · 2024-01-30T10:38:08Z

examples/basic/ui/selection_custom_toolbar.py shows how to attach a panel with a layout to a renderer (selection overlay):

Screencast.from.30.01.2024.11.35.33.webm

mattpap · 2024-01-30T10:49:06Z

@philippjfr, @droumis, @hoxbro, this is tentatively ready for initial feedback. At this time I would suggest looking into examples/basic/ui/*.py, which show use cases requested in issue #13291 and more; some of which I demonstrated in screencasts above.

philippjfr · 2024-01-30T11:11:19Z

examples/basic/ui/dialog.py

+    ),
+)
+show_plot.js_on_click(OpenDialog(dialog=dialog))
+close_dialog.js_on_click(


Why is it not symmetric with OpenDialog?

If we we are good with this kind of API, then I will fill in the missing parts. Though it's also good to show how to do things manually, if an API is missing.

There seems to be no CloseDialog equivalent, correct?

Running this example with Bokeh serve (and updating the code with show -> curdoc().add_root, I can't get the close button to work and get the log:

Uncaught (in promise) Error: cannot find a view for Dialog(p1046) get_one http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:221 default blob:http://localhost:5006/4e8e6ce5-4530-4159-ae07-e228cfae3dcf:1 execute http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:480 execute http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:216 _process_event http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:217 trigger http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:166 trigger_event http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:217 click http://localhost:5006/static/js/bokeh-widgets.min.js?v=8945a2a59d802de388cad0ff943167d1f705d69f095c16e44e908e94b6dd70ceba9b48c6ab0601f0d6b1c593988520f8ab2ce507540022d08cc8888dccb244d8:57 render http://localhost:5006/static/js/bokeh-widgets.min.js?v=8945a2a59d802de388cad0ff943167d1f705d69f095c16e44e908e94b6dd70ceba9b48c6ab0601f0d6b1c593988520f8ab2ce507540022d08cc8888dccb244d8:47 render http://localhost:5006/static/js/bokeh-widgets.min.js?v=8945a2a59d802de388cad0ff943167d1f705d69f095c16e44e908e94b6dd70ceba9b48c6ab0601f0d6b1c593988520f8ab2ce507540022d08cc8888dccb244d8:47 render http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:573 render_to http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:573 render http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:486 _toggle http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:486 connect_signals http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:486 n http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:221 emit http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:181 emit http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:181 _setv http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:180 setv http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:180 open http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:486 execute http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:485 execute http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:216 _process_event http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:217 trigger http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:166 trigger_event http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:217 click http://localhost:5006/static/js/bokeh-widgets.min.js?v=8945a2a59d802de388cad0ff943167d1f705d69f095c16e44e908e94b6dd70ceba9b48c6ab0601f0d6b1c593988520f8ab2ce507540022d08cc8888dccb244d8:57 render http://localhost:5006/static/js/bokeh-widgets.min.js?v=8945a2a59d802de388cad0ff943167d1f705d69f095c16e44e908e94b6dd70ceba9b48c6ab0601f0d6b1c593988520f8ab2ce507540022d08cc8888dccb244d8:47 render http://localhost:5006/static/js/bokeh-widgets.min.js?v=8945a2a59d802de388cad0ff943167d1f705d69f095c16e44e908e94b6dd70ceba9b48c6ab0601f0d6b1c593988520f8ab2ce507540022d08cc8888dccb244d8:47 render_to http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:573 s http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:220 s http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:220 add_document_standalone http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:220 add_document_from_session http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:232 k http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:164 embed_items http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:164 embed_document http://localhost:5006/dialog:38 fn http://localhost:5006/dialog:41 fn http://localhost:5006/dialog:57 safely http://localhost:5006/static/js/bokeh.min.js?v=09b616ff6e78e0bc7aa27d971d6bd254ee707011ace76821753ce252849fa5443f279823051efd10b5ca74b0a9a148a1306310dbde3a3dcae097acca168ae1bf:240 fn http://localhost:5006/dialog:33 EventListener.handleEvent* http://localhost:5006/dialog:61 <anonymous> http://localhost:5006/dialog:62 bokeh.min.js:221:4067

Error: cannot find a view for Dialog(p1046)

This actually doesn't work at all. This is because OpenDialog (callbacks in general) doesn't have a view, so it doesn't participate in the mechanism that allows to resolve views via the global view manager. Given the intent behind OpenDialog and this example is to have a non-root, detached/global dialog, then I need to add a mechanism to register such "free" views.

philippjfr · 2024-01-30T11:13:59Z

examples/basic/ui/selection_custom_toolbar.py

+clear = Button(label="Clear", **common)
+
+toolbar = Panel(
+    position=box_select.overlay.nodes.bottom_left,


Where can I read about the nodes object? Does this resolve on render or does nodes.bottom_left represent some actual concrete value?

I need to write documentation for nodes. It resolves during geometry/positioning computations, so still technically on render/paint. I'm in the process of separating those two phases, but it won't be done here. Computed values are only available in bokehjs. It may be possible to expose those values in a similar way to how computed layouts are exposed, e.g. in plots.

I think syncing it is probably overkill, was just trying to understand how it works.

I considered adding support for reporting computed values. For performance reasons, that would be done via a subscription based mechanism similar to how JS event callbacks work.

hoxbro · 2024-01-30T12:45:33Z

Some comments about the dialog box icons (they are subjective 🙃 ). Names left-to-right: pin, collapse, minimize, maximize, close.

Pin

Maybe update the text from "Pin" to "Pin to top". I was a bit confused that I could still move and resize it even though I had pinned it.
I don't know how feasible it is, but it could only show up when there is a need for it when you have two dialog boxes or more.
The icons show the action that will happen when you click on it, not the current state. This works fine for the collapse, minimize, maximize, and close icons, which gives you feedback immediately, but the pin icon makes it hard to know if you are pinned or not without hovering over it. Maybe make the toolbar a different color, like darker grey?

Minimize

Looks very much like the download button on a figure. Maybe just have it as a single line at the bottom?
When minimized, maybe only show the restore (opposite of minimized) and close icons. Or even just the close icon and make it expand when clicking on everything else.

hoxbro · 2024-01-30T12:54:49Z

examples/basic/ui/custom_attribution.py

+    position=Node(target="frame", symbol="bottom_left"),
+    anchor="bottom_left",
+    css_variables={
+        "--max-width": Node(target="frame", symbol="width"),


Maybe I'm missing something, but does this have an effect on the output? If I comment out this and max-width in the stylesheet, I see no change.

You can see this working here (attribution must not overflow the frame; frame is a pseudo renderer, so it doesn't have intrinsic support for managing overflow like CSS based UIs do):

Screencast.from.31.01.2024.13.34.12.webm

mattpap · 2024-02-05T14:12:55Z

I finalized support for context menus, which completes the features I indented for this PR.

Screencast.from.05.02.2024.15.09.53.webm

mattpap · 2024-02-05T14:15:24Z

I will finish docstrings and some rudimentary testing later today, so that we can start testing this downstream. I will continue polishing things up and adding more tests in future PRs.

mattpap · 2024-02-05T16:46:07Z

examples/basic/ui/annotation_menu.py with some custom styling in the sub-menu:

* Add more icons * Add hover tool's tooltip to plot's event layer * Make Dialog movable and resizable * Set dialog's title in examiner tool * Add OpenDialog and ToggleVisibility callbacks * Update defaults' baseline * Robustify application of CSS styles * Correctly configure pointer capture * Move box shadow to the inner element * Use a style sheet for Dialog positioning * Implement stacking order for dialogs * Implement dependency between dialog's states * Robustify initialization and destruction * Collapse/Restore dialog when scrolling on title * Add Panel UI element * Generalize symbolic Node API * Add support for z-index pinning to Dialog * Allow CSS variables in CSS preprocessor * Don't duplicate testing effort in test_enums.py * Improve Literal type support in Enum * Allow adding additional UI elements * Allow Tooltip to handle UI elements * Add support for canvas positioning of UIs * Add support for context menus to UIs/renderers * Add support for data positioning * Temporarily add CartesianFrame.resolve_symbol() * Include PlotView's canvas in elements * Finalize various types of node resolution * Make implicit node resolution work * Rename Panel -> SidePanel * Formalize support for plot attributions * Fix issues with resolution of coordinates/nodes * Add examples/basic/ui/dialog.py * Add examples/basic/ui/custom_attribution.py * Update tests/unit/bokeh/models/test_annotations.py * Reposition Panel when its positioning node changes * Add examples/basic/ui/inline_data_entry.py * Add examples/basic/ui/selection_custom_toolbar.py * Fix code quality issues * Move ViewManager to its own module * Allow to manage non-root parent-less views * Make Dialog's close action configurable * Fix base class of bokeh.models.dom.HTML * Add CloseDialog callback along OpenDialog * Allow AbstractButton.label to have HTML contents * Improve examples/basic/ui/dialog.py * Add support for a dialog minimization area * Add more icons and update the baseline * Increase size allowance for bokeh.min.js * Use Coordinate instead of Node in Tooltip * Replace .bring-to-front() with a CSS variable * Robustify LayoutDOMView.update_children() * Properly rebuild toolbar when location changes * Don't reference HTML if DOMNode is used * Don't require root-layout in render_to() * Use appropriate dialog close action * Finalize support for context menus * Add examples/basic/ui/annotation_menu.py * Make ui.icons.Icon a UIElement * Move ui.{panes->panels}.Panel * Simplify definition of CompositeRenderer.elements * Add CompositeRenderer.renderers property * Update docstrings of bokeh.models.ui.* * Improve menu naming convention and add docstrings * Implement integration/examples/color_scatter.ts * Update test_annotations.py * Add rudimentary integration tests for UI elements * Use consistently pointer events instead of mouse events * Allow to programmatically display context menus * Rename DictLike -> Dict type * Update docstrings and properties' help * Don't use deprecated class properties * Update cross integration tests' baselines

github-actions · 2024-10-25T17:12:36Z

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

mattpap added the status: WIP label Nov 17, 2023

mattpap added this to the 3.4 milestone Nov 17, 2023

mattpap force-pushed the mattpap/13291_ui branch from 84cfb55 to 07cf3e2 Compare December 7, 2023 01:22

mattpap force-pushed the mattpap/13291_ui branch 2 times, most recently from 4f3efa6 to 9333150 Compare December 8, 2023 11:04

mattpap force-pushed the mattpap/13291_ui branch from 9333150 to 0ae7dba Compare December 19, 2023 11:30

mattpap mentioned this pull request Dec 24, 2023

feature request: place HoverTool box at a fixed location #6078

Open

droumis assigned mattpap Jan 5, 2024

droumis mentioned this pull request Jan 8, 2024

Zoom tools automatically vertically scaled on subcoordinate_y overlays holoviz/holoviews#6051

Merged

mattpap force-pushed the mattpap/13291_ui branch 2 times, most recently from f43d82d to aa78cde Compare January 18, 2024 01:13

This was referenced Jan 22, 2024

[FEATURE] HTMLLabel to support stylesheets and css_classes #13652

Closed

Make RangeTool respect Range.{min,max}_interval #13561

Merged

mattpap force-pushed the mattpap/13291_ui branch from ad87379 to 70adfa7 Compare January 28, 2024 01:40

philippjfr reviewed Jan 30, 2024

View reviewed changes

hoxbro reviewed Jan 30, 2024

View reviewed changes

mattpap force-pushed the mattpap/13291_ui branch from 6e51e56 to 8963bdd Compare February 5, 2024 16:47

mattpap added status: ready and removed status: WIP labels Feb 6, 2024

mattpap force-pushed the mattpap/13291_ui branch from 3563283 to 155b7c1 Compare February 7, 2024 22:50

mattpap added 18 commits February 15, 2024 12:56

Don't require root-layout in render_to()

4e0d511

Use appropriate dialog close action

7cb0780

Finalize support for context menus

a79fc17

Add examples/basic/ui/annotation_menu.py

5b0e40b

Make ui.icons.Icon a UIElement

0cbdc22

Move ui.{panes->panels}.Panel

1552492

Simplify definition of CompositeRenderer.elements

81c7120

Add CompositeRenderer.renderers property

d4f3d78

Update docstrings of bokeh.models.ui.*

9f429fd

Improve menu naming convention and add docstrings

9bb727d

Implement integration/examples/color_scatter.ts

f3857ed

Update test_annotations.py

a70cdf0

Add rudimentary integration tests for UI elements

8a48e57

Use consistently pointer events instead of mouse events

e750bb7

Allow to programmatically display context menus

d764121

Rename DictLike -> Dict type

6120209

Update docstrings and properties' help

b731bbf

Don't use deprecated class properties

9ef5062

mattpap force-pushed the mattpap/13291_ui branch from 9e21bf9 to 9ef5062 Compare February 15, 2024 11:56

Update cross integration tests' baselines

279092e

mattpap merged commit fb83377 into branch-3.4 Feb 15, 2024

mattpap deleted the mattpap/13291_ui branch February 15, 2024 12:40

mattpap added reso: completed status: accepted and removed status: ready reso: completed labels Feb 15, 2024

ahuang11 mentioned this pull request Apr 24, 2024

MenuButton with custom Panel objects holoviz/panel#6791

Open

github-actions bot locked as resolved and limited conversation to collaborators Oct 25, 2024

Uh oh!

Add support for "floating" UI elements #13538

Add support for "floating" UI elements #13538

Uh oh!

Conversation

mattpap commented Nov 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Dec 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mattpap commented Jan 30, 2024

Uh oh!

mattpap commented Jan 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mattpap commented Jan 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mattpap commented Jan 30, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hoxbro commented Jan 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pin

Minimize

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mattpap commented Feb 5, 2024

Uh oh!

mattpap commented Feb 5, 2024

Uh oh!

mattpap commented Feb 5, 2024

Uh oh!

github-actions bot commented Oct 25, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

mattpap commented Nov 17, 2023 •

edited

Loading

codecov bot commented Dec 7, 2023 •

edited

Loading

mattpap commented Jan 30, 2024 •

edited

Loading

mattpap commented Jan 30, 2024 •

edited

Loading

hoxbro commented Jan 30, 2024 •

edited

Loading