Пользовательский шаблон для HTMLTemplateFormatter с CSS-стилем для Bokeh DataTable - PullRequest
Новая
       9

Пользовательский шаблон для HTMLTemplateFormatter с CSS-стилем для Bokeh DataTable

1 голос
/ 22 июня 2019

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

Я прошел предыдущий вопрос, который мог бы отлично справиться с работой, но я не могу получить правильный результат. Вот предыдущий вопрос: Как добавить HoverTool в таблицу данных (Bokeh, Python)

Решение, которое я исследую, - это решение Ferrard с хорошим стилем CSS.

К сожалению, я почти ничего не знаю о CSS и HTML.

Вот код, который я пытаюсь воспроизвести.

main.py 

main.py:

from os.path import dirname, join
import pandas as pd
from bokeh.io import curdoc, show
from bokeh.models import ColumnDataSource, Div
from bokeh.models.widgets import DataTable, TableColumn, HTMLTemplateFormatter
from bokeh.layouts import layout

template = """<div class="tooltip-parent"><div class="tooltipped"><%= value %></div><div class="tooltip-text"><%= value %></div></div>"""

df = pd.DataFrame([
    ['this is a longer text that needs a tooltip, because otherwise we do not see the whole text', 'this is a short text'],
    ['this is another loooooooooooooooong text that needs a tooltip', 'not much here'],
], columns=['a', 'b'])

columns = [TableColumn(field=c, title=c, width=20, formatter=HTMLTemplateFormatter(template=template)) for c in ['a', 'b']]

table = DataTable(source=ColumnDataSource(df), columns=columns)

l = layout([[table]])

curdoc().add_root(l)

show(l)

desc.html 

<style>
.tooltip-parent {
    width: 100%;
}

.tooltipped {
    overflow: hidden;
    width: 100%;
}

.tooltip-text {
    visibility: hidden;
    width: 250px;
    background-color: rgba(0, 0, 0, 1);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;
    position: relative;
    z-index: 1;
    top: 100%;
    left: 0%;
    white-space: initial;
    text-align: left;
}

.tooltipped:hover + .tooltip-text {
    visibility: visible;
}

div.bk-slick-cell {
    overflow: visible !important;
    z-index: auto !important;
}
</style>

<h1>Tooltip demo</h1>

Это глупо, но я действительно не знаю, куда мне поместить файл desc.html в мой рабочий каталог, чтобы сервер bokeh мог его вызвать ... Я читаю документацию по bokeh и обращаю внимание на формат Directory для bokeh, но не удалось использовать ни static, ни templates dir для достижения правильного результата.

Вот конечный результат, который я пытаюсь получить https://i.stack.imgur.com/SB815.png (недостаточно репутации для ссылки на изображение)

Все, что у меня есть на моей стороне, это DataTable без заголовка "Tooltip demo" и без какой-либо работающей подсказки.

Это мой первый вопрос по стеку, надеюсь, все хорошо :) 1033 *

1 Ответ

1 голос
/ 22 июня 2019

В приложении стиля каталога вы можете создать шаблон templates/index.html, имеющий следующую структуру: 

{% extends base %}

{% block title %}My Bokeh App{% endblock %}

{% block preamble %}
<style>
    /* your styles here */
</style>
{% endblock %}

Приложение будет автоматически отображаться, используя эту index.html, в которую включена ваша таблица стилей.В общем, было бы хорошо, если бы были более простые способы добавления дополнительных спецификаций таблиц стилей в приложения Bokeh.Я бы посоветовал вам открыть вопрос GitHub , чтобы начать обсуждение.

...