Добавление таблицы стилей в приложение Bokeh - PullRequest
Новая
       10

Добавление таблицы стилей в приложение Bokeh

0 голосов
/ 12 июня 2018

Я сделал большую сложную приборную панель Bokeh.Я не определил никаких шаблонов HTML для панели инструментов.Я просто обслужил его, используя приведенный ниже код.

Моя проблема в том, что панель управления выглядела очень хорошо при использовании функции bokeh.plotting.output_notebook для встраивания ее в блокнот Jupyter.Теперь, когда вы пытаетесь создать и обслуживать панель мониторинга за пределами Jupyter, она выглядит намного ужаснее, потому что там нет некоторых таблиц стилей, которые отображают красивые таблицы.У меня вопрос, как мне добавить внешние таблицы стилей в мое веб-приложение bokeh.

Код панели инструментов: 

def emb_bokehdash(self, doc, dash_width=1500, dash_height=800):
    # Get base data:
    df_orig = self._get_base_data_for_vis(unlabeled_name)
    unique_labels = list(df_orig.label.unique())

    ...

    # Sentence Selection Controls:
    index_text = AutocompleteInput(
        title="select sentence index", value=str(candidate_state),
        completions=list(df_orig.index.map(lambda idx: str(idx))),
        width=control_width
    )
    index_next = Button(label="next", button_type="primary", width=button_width)
    index_back = Button(label="back", button_type="primary", width=button_width)
    selection_checkboxes = CheckboxGroup(labels=['unseen', 'random'], active=[])

    index_input = row(
        widgetbox(index_text, width=control_width+200),
        widgetbox(index_next, index_back, width=button_width+40),
        selection_checkboxes,
        width=info_width
    )

    ... More code defining DOM and wrangling data

    layout_ = row(inputs_and_info, plot, height=dash_height)

    # initial load of the data
    update_selectioninfo_and_plot()
    update_selected_info()

    # Register title and dashboard with the document:
    doc.title = "Smart Feedback Labeler"
    doc.add_root(layout_)

Код сервера панели инструментов: 

from bokeh.server.server import Server
from os import getpid

def emb_bokehdash_serve(self, **server_kwargs):
    # Route App:
    apps = {'/': Application(FunctionHandler(self.bokeh_dashboard))}

    # Extract Port (default = 5000):
    if "port" not in server_kwargs:
        server_kwargs["port"] = 5000

    # Find a suitable port to use:
    while True:
        try:
            server = Server(apps, **server_kwargs)
        except OSError:
            self.logger.info(
                f"Port {server_kwargs['port']} already in use, serving to port {server_kwargs['port']+1}"
            )
            server_kwargs["port"] += 1
        else:
            break

    # We have to defer opening in browser until we start up the server
    def show_callback():
        for route in apps.keys():
            server.show(route)
    server.io_loop.add_callback(show_callback)

    # Set server address (default is localhost):
    address_string = 'localhost'
    if server.address is not None and server.address != '':
        address_string = server.address

    for route in sorted(apps.keys()):
        url = "http://%s:%d%s%s" % (address_string, server.port, server.prefix, route)
        self.logger.info("Bokeh app running at: %s" % url)

    self.logger.info("Starting Bokeh server with process id: %d" % getpid())

    if not run_from_ipython():
        server.run_until_shutdown()  # Doesn't shutdown properly when run from Jupyter Notebook.
    else:
        server.start()

Обратите внимание, я не могу запустить эту панель статически.

1 Ответ

0 голосов
/ 12 июня 2018

Я не испытывал твоей проблемы, когда пропустил часть Jupyter и с самого начала создал отдельную панель управления.Однако я использовал таблицы стилей для настройки внешнего вида панели инструментов и ее элементов следующим образом:

  • Внутри каталога панели инструментов у меня есть templates/index.html с: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ TITLE }}</title>
    {{ bokeh_css }}
    {{ bokeh_js }}
    <style>
      {% include 'styles.css' %}
    </style>
  </head>
  <body>
    <div>
    {{ plot_div|indent(8) }}
    {{ plot_script|indent(8) }}
  </body>
</html>
  • Внутри templates/styles.css у меня есть настройки CSS.
  • Чтобы применить определенные настройки к виджету, код панели мониторинга должен включать: <widget object>.css_classes = ["<class from templates/styles.css>"].Это может быть список строк в таком назначении.

Имеет ли это смысл?Надеюсь, это поможет.

...