Possible issues with styling when updating tabulator

Hello! I have just discovered the amazing capabilities of tabulator together with pandas styling. Though, I am encountering a lot of quirky behaviour when periodically updating data and wanted to double check here on what’s the correct approach to the problem.

Following this tutorial Tabulator — Panel 0.12.4rc3 documentation
I create a simple tabulator that will be periodically updated.

import datetime as dt
import numpy as np
import pandas as pd
import panel as pn

df = pd.DataFrame(np.random.randn(10, 5), columns=list('ABCDE'))
styled = pn.widgets.Tabulator(df, page_size=5)

def highlight_max(s):
    '''
    highlight the maximum in a Series yellow.
    '''
    is_max = s == s.max()
    return ['background-color: yellow' if v else '' for v in is_max]

styled.style.apply(highlight_max)
styled.servable()

pn.state.add_periodic_callback(update, period=1000)

The update function looks as follows for:
A) Using stream

def update():
    df = pd.DataFrame(np.random.randn(1, 5), columns=list('ABCDE'))
    styled.stream(df)

B) Using patch

def update():
    df = pd.DataFrame(np.random.randn(10, 5), columns=list('ABCDE'))
    styled.patch(df)

C) Using value substitution

def update():
    df = pd.DataFrame(np.random.randn(10, 5), columns=list('ABCDE'))
    styled.value = df

The problems I am encountering are:

  • When using A and C the styling gets updated according to the new data. In case of B the styling disappears after first update.
  • If we set the height to somehing small like 200 we can see the scrollbar. Its position gets resetted to the top on every update. In case of A the follow=true so the scrollbar keeps jumping up and down. Is there some configuration that would just leave the scrollbar in its place? And in the case of stream just follow without first jumping?
  • In every method the user selection for sorting columns gets resetted. (I mean here the arrows near the name of the column)
  • I am trying to use pandas background gradient to simulate a heatmap Table Visualization — pandas 1.3.3 documentation By injecting below code into example above
import seaborn as sns
cm = sns.light_palette("green", as_cmap=True)
styled.style.background_gradient(cmap=cm)
styled.servable()

This is really cool but just like the in the first example it updates only in cases of A and C. There is also one annoying thing. You can see the whole table is redrawn and it keeps flashing with white color in between. It’s a small thing but it would be very annoying for an end user. Is it possible to somehow remove that effect? For this purpose, in bokeh, I would use normally a figure made of rects to create a heatmap. It doesn’t have this problem and nicely switches between colors.

  • Another great thing that seems to be possible here is usage of data bars (section on pandas documentation below the one I linked above, cant post more than two links :sweat_smile:) This also has problem with flashing but additionally the bars seem to mess up the widths of the columns and the header gets misaligned from the body of the table. I am getting such effect with this code
styled.style.bar(subset=['A', 'B'], align='mid', color=['#d65f5f', '#5fba7d'])

Overall, thank you so much for the hard work and making this possible! I am happy to drop a PR with fixes myself if I get some reference PR to learn how to fix this stuff. Being able to just push dataframe style to the frontend and have everything running on bokeh server is simply amazing and I am really eager to make it work perfectly!

1 Like

Hi @Kadek

Could you check if the problems are there in the just released Panel v 0.12.4? I believe it fixes some of these problems.

See https://github.com/holoviz/panel/releases/tag/v0.12.4.

Then it would be helpful if you report the remaining issues individually with minimum reproducible code and some mp4/ gif video.

It should make it easy to guide a PR or find a fix.

Thanks