bokeh:添加/删除面板同时保持当前面板

Question

我正在尝试编写一个Bokeh应用程序，它可以动态地添加和删除选项卡面板，以响应服务器中发生的事件。它可以工作，但是在活动面板左侧添加或删除面板会导致活动面板发生更改，因为它对活动面板使用固定索引，而不是跟踪哪个面板对象处于活动状态。在

我可以通过首先检索活动面板，然后设置Tabs对象上的active属性将其强制返回当前活动面板，但这有两个问题：

1. 它会闪烁：浏览器切换选项卡，然后再次切换回来。我试过使用hold+unhold-没有改进。在
2. 服务器体系结构文档注意到，从服务器和客户端更改属性的处理不好，因此不建议这样做。我想这会表现为一种竞争状态，用户选择其他选项卡，但是服务器会强制它返回到它所在的选项卡上，而且服务器会错误地知道客户端使用的是哪个选项卡。在

有更好的方法吗？在

一些最小的代码（与bokeh server一起使用）来演示基本问题（不包括我第二段中的解决方法）：

from bokeh.models.widgets import Tabs, Panel, Paragraph, Button
from bokeh.layouts import column
from bokeh.io import curdoc

def callback():
    if len(tabs.tabs) == 1:
        tabs.tabs.insert(0, panels[0])
    else:
        del tabs.tabs[0]

panels = [
    Panel(child=Paragraph(text='Panel 1'), title='Panel 1'),
    Panel(child=Paragraph(text='Panel 2'), title='Panel 2')
]
tabs = Tabs(tabs=list(panels))

button = Button(label='Toggle')
button.on_click(callback)
curdoc().add_root(column(button, tabs))

Answer 1

工作示例，使用异步处理程序修复闪烁并提高分辨率。在

做了一系列改变：

1. 包含包含serve()入口点的应用程序。在
2. 解决订单丢失的问题
3. 插入后恢复选项卡选择
4. 按钮在executor上运行；UI更新现在是异步的

代码如下：

import functools

from bokeh.layouts import column
from bokeh.models.widgets import Tabs, Panel, Paragraph, Button
from bokeh.server.server import Server
from tornado.gen import coroutine
import tornado.concurrent
import tornado.ioloop


class BokehExample(object):

    def __init__(self):
        # Needed for run_on_executor
        self.executor = tornado.concurrent.futures.ThreadPoolExecutor(max_workers=4)
        self.io_loop = tornado.ioloop.IOLoop.current()

        # UI Elements
        self.button = None
        self.panels = None
        self.tabs = None

        # Document
        self.doc = None

    @tornado.concurrent.run_on_executor
    def _execute_async(self, function, *args, **kwargs):
        """
        Run function on executor
        """
        return function(self, *args, **kwargs)

    def _update_async(self, element, attr_name, attr_value):
        """
        Decouple the GUI update from the calling thread.
        """
        def set_ui_attr():
            setattr(element, attr_name, attr_value)
        self.doc.add_next_tick_callback(functools.partial(set_ui_attr))

    def async_button_handler(function):
        @functools.wraps(function)
        @coroutine
        def wrapper(self, *args, **kwargs):
            rval = yield BokehExample._execute_async(self, function, *args, **kwargs)
            return rval

        return wrapper


    @async_button_handler
    def callback(self):
        active_panel_id = self.tabs.tabs[self.tabs.active].id
        nr_tabs = len(self.tabs.tabs)

        # Insert logic
        if nr_tabs == 1:
            # async version of: self.tabs.tabs = self.panels
            self._update_async(self.tabs, 'tabs', self.panels)

            new_index_of_active_tab = next(i for i, t in enumerate(self.panels) if t.id == active_panel_id)
            self._update_async(self.tabs, 'active', new_index_of_active_tab)

        # Delete logic
        else:
            self._update_async(self.tabs, 'tabs', [p for p in self.panels if p.id == active_panel_id])

    def render(self, doc):
        # Note that the IDs are ascending. This property is used to restore ordering on delete/insert cycles.
        # You can also use other logic for that, for example a dictionary of titles and their relative positions.
        self.panels = [
            Panel(id="1001", child=Paragraph(text='Panel 1'), title='Panel 1'),
            Panel(id="1002", child=Paragraph(text='Panel 2'), title='Panel 2'),
            Panel(id="1003", child=Paragraph(text='Panel 3'), title='Panel 3')
        ]

        self.tabs = Tabs(tabs=self.panels)

        self.button = Button(label='Toggle')
        self.button.on_click(self.callback)

        self.doc = doc
        self.doc.add_root(column(self.button, self.tabs))


    def serve(self):
        server = Server({'/': self.render}, num_procs=1)
        server.start()
        server.io_loop.add_callback(server.show, "/")
        server.io_loop.start()


if __name__ == '__main__':
    BokehExample().serve()