improve Tabulator style for Fast Templates

[MarcSkovMadsen]

Fixes #2424

During the implementation of this I realized

• It's difficult to customize the style of one theme from fast_root.css without affecting all Tabulator themes.
• When you change the Tabulator theme dynamically in the app, a new css link element is appended to the bottom of the head section which makes it difficult to override styles from pn.config.raw_css, template.config.raw_css, fast_root.css etc.
• When changing the Tabulator theme dynamically the Tabulator widget did not resize nicely on the "first change to a new theme".

As a consequence I only made one very minor change to fast_root.css. Furthermore I updated the tabulator.ts code to update the link element instead of replacing it. It works in my tests. But I am thinking that maybe there was a reason for not doing this in the first place? I also added a small timeout before resizing (to wait for css to load) which worked out nicely in my tests.

Further improvements to Tabulator for Fast Templates should probably be done by contributing a Fast theme to Tabulator it self.

import panel as pn
import pandas as pd

pn.extension(sizing_mode="stretch_width")
ACCENT_COLOR = "#FDAC53"
data = pd.DataFrame(
    {
        "x": [
            1,
        ]
        * 10,
        "y": [
            2,
        ]
        * 10,
    }
)
tabulator = pn.widgets.Tabulator(data, theme="site")

template=pn.template.FastListTemplate(
    title="Fast Tabulator",
    main=[tabulator],
    sidebar=[tabulator.param.theme],
    header_background=ACCENT_COLOR,
    header_accent_base_color="white",
    accent_base_color=ACCENT_COLOR,
)
template.servable()

[MarcSkovMadsen]

This is the affect of the change across Tabulator themes

fast-tabulator.mp4

[philippjfr]

Will need to look at this closely, getting the dynamic CSS loading working in all cases was quite difficult, so I'd be surprised if this wasn't causing some regression.

[MarcSkovMadsen]

FYI @philippjfr . I will give this a second iteration including creating a seperate Fast css stylesheet. Can see it's needed. I will try to give it as a PR to Tabulator and ask if Fast design folks are interested in reviewing.

But probably we will have to host it our selves for Panel 0.12.

[MarcSkovMadsen]

I now have a nice stylesheet. See https://discourse.holoviz.org/t/tabulator-style-for-fast-templates/2478

[MarcSkovMadsen]

Having a stylesheet changes the situation a bit. Eventually I would like it to be as easy as possible to use Tabulator with the Fast Templates. And actually not only Tabulator but the most used panes and widgets including matplotlib, plotly etc. I see the following options.

1. Add Fast theme to Tabulator widget based on

   • i. self hosted css stylesheet
   • ii. Tabulator hosted css stylesheet

2. Just document the link to the self hosted css stylesheet.

3. Could be hosted at

   • i. Panel github
   • ii. awesome-panel-assets (currently)
   • iii. panel-fast github (not created yet)

Eventually I would like the Fast templates to select the right themes and/ or includes the right css stylesheet automatically in order to make it as easy as possible to use.

What do you recommend @philippjfr ?

[codecov]

Codecov Report

Merging #2425 (765349e) into master (56f72d5) will decrease coverage by 0.00%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #2425      +/-   ##
==========================================
- Coverage   83.29%   83.28%   -0.01%     
==========================================
  Files         184      184              
  Lines       23136    23147      +11     
==========================================
+ Hits        19270    19278       +8     
- Misses       3866     3869       +3     

Impacted Files	Coverage Δ
panel/widgets/tables.py	83.23% <ø> (ø)
panel/models/tabulator.py	94.11% <100.00%> (+0.46%)	⬆️
panel/template/base.py	79.10% <100.00%> (ø)
panel/template/fast/base.py	94.73% <100.00%> (+0.19%)	⬆️
panel/io/reload.py	64.36% <0.00%> (-2.30%)	⬇️
panel/tests/pane/test_plotly.py	98.10% <0.00%> (-0.64%)	⬇️
panel/param.py	87.52% <0.00%> (+0.08%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 56f72d5...765349e. Read the comment docs.

[philippjfr]

Bundled the theme into Panel for now, which means as soon as Panel 0.12 is published it'll be available from the CDN.

[MarcSkovMadsen]

Thanks. I noticed the modifier option. Would it be possible to add a modification based on the theme?

That would make it possible to set the Plotly pane theme automatically etc. Removing a lot of friction.

[philippjfr]

Thanks. I noticed the modifier option. Would it be possible to add a modification based on the theme?

In theory yes, I think we should just put modifiers on the theme as well, but probably not for 0.12.