Functionality to interactively move figures?

I am curious if there is any functionality or tools in Bokeh to interactively move figure position? For example, in this web application:
https://www.snowpacktracker.com/btac/stormtracker/tetons

Many users have wanted to see the panels in different order. Are there any tools I am not aware of for users to move the position of figures? In this case, I am using gridplot such as:

  for f in figs:
    children.append(f)

  grid = gridplot(
    children = children,
    ncols=1,
    sizing_mode='stretch_width',
    merge_tools=False,
  )

  curdoc().add_root(grid)

I am thinking of something similar to functionality of the up/down arrows here:
https://nwac.us/data-portal/graph/21/

There’s nothing directly built-in but you could add CustomAction to toolbars (with custom icons, e.g. up or down arrows) and then the JS callback for the action could re-order the children in the grid plot accordingly.

A more modern UI would be to embed the individual Bokeh plots into some draggable containers in a custom template, instead of using a gridplot.

@Patrick_Wright

You might consider Holoviz panel. See https://panel.holoviz.org/.

The panel server is the bokeh server. My typical use case as a someone who is biased towards bokeh – because that is where I cut my teeth – is to do most everything in native bokeh but judiciously introduce panel when I want a few additional widgets or control of layout items that they make straightforward.

The end result being that I can do all of my development in bokeh and add panel elements that just work nicely with bokeh. And the method to serve them is basically the same. I suspect you could introduce the features you want from panel without much change to a majority of your code.

Here’s a very simple example using panel’s GridStack layout, which does permit dragging around plots to change their order using just a mouse, i.e. no up/down arrow manipulations. This is along the lines of @Bryan comment about more modern UIs.

Just save the code below as a file, .e.g. gstack.py and serve like you would a bokeh file. (Directory structure apps would have similar syntax as the bokeh server counterpart.)

panel serve gstack.py

And in your browser

http://localhost:5006/gstack

Hopefully this helps.

Good luck.

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
"""
import numpy as np

from panel.layout.gridstack import GridStack
from bokeh.plotting import figure

gstack = GridStack(width=800, height=600)

t = np.arange(0.0, 1.0, 0.01)

P = [figure(title='Signal {:}'.format(i)) for i in range(3)]

for i,p in enumerate(P):
    p.scatter(x=t, y=np.random.randn(len(t)))
    gstack[i,0] = p
    
gstack.servable()

@_jm this is a great suggestion. I will give it a try and let you know what I come up with. Thanks!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.