Обновление макета вкладок Python Bokeh tabs_location

Question

Я создаю панель инструментов bokeh, пытаясь включить вкладки в макет.Мне нужно переместить расположение вкладок справа (предпочтительно справа внизу) от Panel, но я вижу эту ошибку:

AttributeError: неожиданный атрибут 'tabs_location' в Tabs

Класс Tabs имеет этот атрибут в соответствии с исходным кодом:

    tabs_location = Enum(Location, default="above", help="""
The location of the buttons that activate tabs.
""")

Ошибка происходит из-за вызова Tabs () в приведенном ниже MWE.Если это не учитывать, код работает, но расположение фигуры и виджета нарушается из-за размещения одной фигуры.

Базовый макет, который я ищу, можно увидеть, заменив:

row3a = row(tabs,wb1)

на:

row3a = row(t1,wb1)

MWE:

from bokeh.plotting import figure, show
from bokeh.layouts import row, column, widgetbox
from bokeh.models.widgets import Button, Select, TextInput, Panel, Tabs
from bokeh.models.widgets import Paragraph

t1 = figure(plot_width=500, plot_height=420, title=None)
t1.toolbar_location='right'
t1.toolbar.logo=None
tab1 = Panel(child=t1,title="TPF")

t2 = figure(plot_width=500, plot_height=420, title=None)
t2.toolbar_location='right'
t2.toolbar.logo=None
tab2 = Panel(child=t2,title="Prob")

tabs = Tabs(tabs=[ tab1, tab2 ],tabs_location='right')

select3a1 = Select(title="Var:", value="No", options=["No","Yes"])

category_options = {'No':[""],'Yes':["V1","V2"]}
select3a2 = Select(title="Category:", value="", options=category_options[select3a1.value])

tar_info = Paragraph(text = f'Tar: ')
mem_info = Paragraph(text = f'gm: ')

wb1 = widgetbox(tar_info,mem_info,select3a1,select3a2)

row3a = row(tabs,wb1)

menu_db_id = [("db1", "id1"), ("db2", "id2")]

drop_db_id = Select(title="Database",options=["db2","db1"],width=100)
id_inp = TextInput(title="ID",width=200)
s_butt = Button(label = 'Search',width=50,height=50)

s_sel = Paragraph(text=f'Selected: ',width=100)

row3b = row(widgetbox(drop_db_id,width=120),widgetbox(id_inp,width=250),widgetbox(s_butt,width=100),widgetbox(s_sel))

f3 = figure(plot_width=800, plot_height=200, title=None)
f3.toolbar.logo=None

col_targ = column(row3b,row3a,f3)

f4 = figure(plot_width=700, plot_height=700, title=None)
f4.toolbar_location='left'
f4.toolbar.logo=None

row3 = row(f4,col_targ)

show(row3)

Answer 1

Для Bokeh v1.1.0 этот код будет работать:

from bokeh.plotting import save, figure
from bokeh.models import Paragraph, Panel, Tabs, Column
from bokeh.util.browser import view

template = """
{% block postamble %}
<style>
.bk-root .bk-tabs-header .bk-tab {
    background-color: cyan;
    width: 100px;
    color: red;
    font-style: italic;

    position: relative;
    left: 400px; 
}

.bk-root .bk-tabs-header .bk-tab.bk-active{
    background-color: yellow;
    color: blue;
    font-style: normal;
    font-weight: bold;

    position: relative;
    left: 400px;
}

.bk-root .bk-tabs-header .bk-tab:hover{
    background-color: yellow

    position: relative;
    left: 400px;
}

</style>
{% endblock %}
"""

p = Paragraph(text = "Another tab", width = 600)

plot = figure()
plot.line(x = [1, 2], y = [3, 4])
tabs = [Panel(title = 'Tab1', child = plot)]
tabs.append(Panel(title = 'Tab2', child = p))

save(Column(Tabs(tabs = tabs, width = 600, tabs_location = 'below')), template = template)
view("tabs_styles_demo.html")

Результат:

Answer 2

Bokeh Tabs не поддерживает местоположение.Это можно увидеть на странице документации , развернув JSON Prototype.Тем не менее, вы можете расположить свои вкладки в любом месте на экране, переписав стандартные вкладки Bokeh «классы CSS» или добавив атрибут css_classes к своим компонентам, как в этом примере:

Важно:работает для Bokeh v1.0.4, но больше не работает для v1.1.0

css_classes_demo.py

<code>from bokeh.plotting import save, show, figure
from bokeh.layouts import column
from bokeh.models import Div, Paragraph, Panel, Tabs
from bokeh.util.browser import view

template = """
{% block postamble %}
<style>
.custom {
    border-radius: 0.5em;
    padding: 1em; }
.custom-1 {
    border: 3px solid #2397D8; }
.custom-2 {
    border: 3px solid #14999A;
    background-color: whitesmoke;}
.bk-root .bk-bs-nav-tabs {
    background-color: cyan;
    width: -webkit-calc(100%);
    width:    -moz-calc(100%);
    width:         calc(100%);
    overflow: hidden; 
    position: absolute;
    left: 460px;
    top: 640px;
    width: 126px; }
</style>
{% endblock %} """

p = Paragraph(text = "The tabs below were configured with additional css_classes", width = 600)

div2 = Div(text = """
<p> This Bokeh Div adds the style classes:<p>
<pre>
.custom {
    border-radius: 0.5em;
    padding: 1em; }
.custom-2 {
    border: 3px solid #14999A;
    background-color: whitesmoke; }

"" ") div2.css_classes = [" custom "," custom-2 "] plot = figure () plot.line (x = [1, 2], y = [3, 4]) tabs = [Панель (title = 'Tab1', child = plot)] tabs.append (Панель (title = 'Tab2', child = div2)) save (столбец (p (Tab, Tabs (tabs = tabs, css_classes = ['tabs_class'], width = 600)), template = template) представление ("css_classes_demo.html")

Результат: