python - 我可以控制由 Bokeh 创建的内联 css(或完全删除它)吗？

Question

我正在 PyViz 面板中创建一个仪表板，据我所知，它在后台使用 Bokeh 。它易于使用，我很快就得到了 90% 的解决方案，但最终的布局(对我来说)更容易只使用普通的旧 CSS(网格布局或其他东西)。我可以将 html id 和类附加到 Python 中的每个小部件/绘图/列/行等，但我还没有找到一种方法来阻止 bokeh 在它产生的每个 div 上包含一长串内联 css。我希望布局具有响应性，没有硬编码的宽度/高度或诸如此类的东西。

我已经在带有 template/index.html 的目录中提供来自 main.ipynb 的面板代码，因此涉及模板的解决方案完全没问题。如果我不需要，我不想在添加到模板的许多不同根中创建整个仪表板，如果我可以删除生成的内联 css 属性，则从行和列生成的 html 非常适合我的目的.

我可以编写一个 Python 函数来遍历面板/ Bokeh 小部件树并修改小部件(如果需要的话)。我当然也可以在 Javascript 中遍历 DOM 并在创建 div 时从它们中删除样式属性，但这似乎不如将一些 !important css 组合在一起优雅。

旁白:有谁知道如何阻止 bokeh 从 Javascript 更改 html title 属性，或者如何从面板设置标题？

仪表板示例:

这是一个没有任何自定义样式的简约仪表板。它在每个 div 上生成硬编码的宽度和高度(从 Firefox devtools 元素检查器中可以看出)。仪表板左对齐并且没有有效地使用屏幕空间(左侧有很多空白，直方图的水平宽度与上面的行不同)。调整页面大小时，布局也没有响应。

import numpy
import pandas
import param
import panel
import holoviews
from IPython.display import display


panel.extension()
holoviews.extension('bokeh')

# Create syntetic dataset
N= 1000
age = numpy.random.gamma(10, 1.5, N)
defects = numpy.clip(numpy.random.chisquare(5, N) * age - 10, 0, 1e100).astype(int)
df = pandas.DataFrame({'age': age, 'defects': defects})
display(df.head(3))

# default sizing_mode
SM = 'stretch_width'


class DashboardDefinition(param.Parameterized):
    age = param.Range((0, 20), (0, None), softbounds=(0, 30))
    histogram = param.ObjectSelector('defects', ['defects', 'age'])

    def filter_data(self, table):
        return table.select(age=self.age)

    @param.depends('age')
    def make_scatter(self):
        scatter = holoviews.Points(df, ['age', 'defects'])
        selected = self.filter_data(scatter)
        return panel.panel(selected, sizing_mode=SM)

    @param.depends('age', 'histogram')
    def make_histogram(self):
        table = holoviews.Table(df, self.histogram)
        table = self.filter_data(table)
        frequencies, edges = numpy.histogram(table[self.histogram], 15)
        hist = holoviews.Histogram((frequencies, edges))
        return panel.panel(hist, sizing_mode=SM)

    def layout(self):
        return panel.Column(panel.Row(self.param,
                                      self.make_scatter,
                                      sizing_mode=SM),
                            self.make_histogram,
                            sizing_mode=SM)


dashboard = DashboardDefinition(name='Dashboard parameters')
dash_panel = dashboard.layout() 

# Define the dashboard
template = """
{% extends base %}

{% block title %}Hello world{% endblock %}

{% block contents %}
<h1>My dashboard</h1>
<p>This is my currently unstyled dashboard</p>
<br>
{{ embed(roots.dash1) }}
{% endblock %}
"""
tmpl = panel.Template(template)
tmpl.add_panel('dash1', dash_panel)
tmpl.servable()

# Uncomment to preview dashboard in jupyter notebook
#dash_panel

Answer 1

我通过在 holoviews 中设置 responsive=True 解决了我的具体问题(感谢 https://gitter.im/pyviz/pyviz 中的 xavArtley 帮助我完成了这一部分)。从 bokeh 文档看来，此选项已被删除，但它存在于 holoviews 中，使用它可以使内联 css 与我想要的相匹配。

您必须在 javascript 运行之前对元素设置样式，否则尺寸会出错，但是您可以通过将自定义 css 放在模板序言中来做很多事情(后序不会起作用，至少不会在 Firefox 中)。

一个工作示例

此处仪表板周围的容器决定了仪表板组件的大小，而不是内联 css(由 Javascript 设置以匹配周围的 div 元素):

import numpy
import pandas
import param
import panel
import holoviews


panel.extension()
holoviews.extension('bokeh')

# Create syntetic dataset
N= 1000
age = numpy.random.gamma(10, 1.5, N)
defects = numpy.clip(numpy.random.chisquare(5, N) * age - 10, 0, 1e100).astype(int)
df = pandas.DataFrame({'age': age, 'defects': defects})


class DashboardDefinition(param.Parameterized):
    age = param.Range((0, 20), (0, None), softbounds=(0, 30))
    histogram = param.ObjectSelector('defects', ['defects', 'age'])

    def filter_data(self, table):
        return table.select(age=self.age)

    @param.depends('age')
    def make_scatter(self):
        scatter = holoviews.Points(df, ['age', 'defects'])
        selected = self.filter_data(scatter)
        hv_obj = selected.options(responsive=True, aspect=3)
        return panel.panel(hv_obj)

    @param.depends('age', 'histogram')
    def make_histogram(self):
        table = holoviews.Table(df, self.histogram)
        table = self.filter_data(table)
        frequencies, edges = numpy.histogram(table[self.histogram], 25)
        hist = holoviews.Histogram((frequencies, edges))
        hv_obj = hist.options(responsive=True, aspect=4)
        return panel.panel(hv_obj)

    def layout(self):
        return panel.Column(panel.Row(self.param,
                                      self.make_scatter,
                                      sizing_mode='stretch_width'),
                            self.make_histogram,
                            sizing_mode='stretch_width')


dashboard = DashboardDefinition(name='Dashboard parameters')
dash_panel = dashboard.layout() 

# Define the dashboard
template = """
{% extends base %}

{% block preamble %}
<style>
div#dashboard {
    width: 80%;
    margin: 0 auto;
}
</style>
{% endblock preamble %}

{% block contents %}
<div id="dashboard">
  <h1>My dashboard</h1>
  {{ embed(roots.dash1) }}
</div>
{% endblock contents %}
"""
tmpl = panel.Template(template)
tmpl.add_panel('dash1', dash_panel)
tmpl.servable(title="My page title")

# Uncomment to preview dashboard in jupyter notebook
#dash_panel