Tabulator does not work when ipywidgets extension is enabled

[bakkiaraj]

ALL software version info

ipywidgets_bokeh version: 1.6.0 ipywidgets version: 8.1.7 panel version: 1.7.5

Python 3.12 OS : Linux , Rocky 8.9

Description of expected behavior and the observed behavior

I try to use both ipywidgets and Tabulator but this combination is not working.

Complete, minimal, self-contained example code that reproduces the issue

import datetime as dt
import numpy as np
import pandas as pd
import panel as pn
from loguru import logger
import ipywidgets_bokeh
import ipywidgets as ipw
import panel_material_ui as pmui




def create_app():
        # Print versions
        logger.info(f"ipywidgets_bokeh version: {ipywidgets_bokeh.__version__}")
        logger.info(f"ipywidgets version: {ipw.__version__}")
        logger.info(f"panel version: {pn.__version__}")

        df = pd.DataFrame({
            'int': [1, 2, 3],
            'float': [3.14, 6.28, 9.42],
            'str': ['A', 'B', 'C'],
            'bool': [True, False, True],
            'date': [dt.date(2019, 1, 1), dt.date(2020, 1, 1), dt.date(2020, 1, 10)],
            'datetime': [dt.datetime(2019, 1, 1, 10), dt.datetime(2020, 1, 1, 12), dt.datetime(2020, 1, 10, 13)]
        }, index=[1, 2, 3])

        df_widget = pn.widgets.Tabulator(df, buttons={'Print': "<i class='fa fa-print'></i>"})
        
        app_laypout_templ = pmui.Page(
            title="Network Visualizer",
            
            main=[pn.Column(df_widget, height=800)],
        )
        return app_laypout_templ


# Main 

# Initialize Panel extensions
pn.extension('tabulator')
pn.extension('ipywidgets') # ipywidgets-bokeh
pn.widgets.Tabulator.theme = 'materialize'

create_app().servable()

Stack traceback and/or browser JavaScript console output

Screenshots or screencasts of the bug in action

[philippjfr]

Thanks, seems like a clash between require.js and Tabulator.js internal require.

[grapesmoker]

I came here to report this but I think the problem might extend beyond Tabulator. It seems that using pn.extension('ipywidgets') breaks the extension mechanism, causing all kinds of things to not load. For example, when I tried to use the Material template, I got a similar error about mdc not being defined, and I have seen other extensions also missing although now I can't quite replicate it.

[pankajp]

Can you tell which previous version doesn't have this problem?

[maximejay]

Hello, I got the same error since the release of Panel 1.6.2. My Panel app was working fine before this release.

I use now Panel 1.8.3 and bokeh 3.8.1.

This error occurs when serving the app with the command:

panel serve mypythonscript.py

But this error does not occur if the app/widget is served inside the python script using "my_widget.show() "directly.

Here a simple python script to trigger the problem.

• This code work with bokeh-3.6.3 and panel-1.6.1
• This code does not work with bokeh-3.7.3 and panel-1.6.2
• This code does not work with bokeh-3.6.3 and panel-1.6.2

Thus the problem should be related to the upgrade from panel-1.6.1 to panel-1.6.2, and exclude bokeh.

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

pn.extension("ipywidgets", "tabulator")

df = pd.DataFrame(
    {
        "int": [1, 2, 3],
        "float": [3.14, 6.28, 9.42],
        "str": ["A", "B", "C"],
        "bool": [True, False, True], 
        "date": [dt.date(2019, 1, 1), dt.date(2020, 1, 1), dt.date(2020, 1, 10)],
        "datetime": [
            dt.datetime(2019, 1, 1, 10),
            dt.datetime(2020, 1, 1, 12),
            dt.datetime(2020, 1, 10, 13),
        ],
    },
    index=[1, 2, 3],
)

df_widget = pn.widgets.Tabulator(df, buttons={"Print": "<i class='fa fa-print'></i>"})
df_widget.servable()
# df_widget.show()  # work but "panel serve mypythonscript.py" does not work

Here a screenshot of the error when loading my app:

Thanks you !

[holovizbot]

This issue has been mentioned on HoloViz Discourse. There might be relevant details there:

https://discourse.holoviz.org/t/loading-ipywidgets-extension-seems-to-break-tabulator-widget/9026/1

[maximejay]

No, unfortunately there is no more information, juste asking for a workaround...

Have you enough details to investigate this issue ? Should I provide more information and more test ? What can I do for helping to fix this problem ?

[maximejay]

I try to localize the problem: The code above work with panel-1.6.2.a4 but does not work with panel-1.6.2.b1

here the list of commit between both tag:

b6ae1ed2 (tag: v1.6.2b1) Bump panel.js version to 1.6.2-b.1 2738571b Add CHANGELOG for 1.6.2 4e182535 Refactor ChatFeed post hook (#7722) 2477d387 Bump plotly.js version to 3.0.1 (#7731) a78e1f32 Style correct column when frozen Tabulator column is an index (#7792) fdc4abe9 Ensure multiple sequential notifications render (#7790) 0ba63319 Allow serializing joint dict/Parameterized types on DataModel (#7789) 0c9cde00 enh: Also pretty print 1 dim HoloViews widget (#7775) 3cf11b83 Allow defining root node for ReactComponent (#7787) 8896b264 Refactor NotificationAreaBase to allow easier subclassing (#7785) a258611b Use Ace version with no require.js dependency (#7781) 2e93453a add more TextEditor UI tests (#7783) 06d08f16 Upgrade Quill to version 2.0.2 and fix toolbar editing and nested lists (#7739) 179f39b0 Clear state cookie if token expired and can't be refreshed (#7780) a00bc4ae Optimize ipywidget reference transform (#7778) afa745cd perf: Avoid redundant list operations in ListLike (#7764) ba187976 Ensure resource mode is set in notebooks (#7776) d6983601 Ensure hooks are applied to root components with Fast design (#7777)

[maximejay]

The commit that break Tabular extension with Ipywidgets is: a258611b Use Ace version with no require.js dependency (https://github.com/holoviz/panel/pull/7781)

[maximejay]

In panel/io/ressource.py, in function js_files:

js_files is a list of files and contain 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js'. Before commit https://github.com/holoviz/panel/commit/a258611bded22f5b69056ae17e14f7b50d08eedc, it was mentioned, line 815: "# Load requirejs last to avoid interfering with other libraries"

All the code bellow this line was removed because of Axe editor does not depend anymore on this version of require.js. But Ipywidgets still depend on this libraire. Thus this librairie need to be dowloaded if Ipywidgets extension is loaded.

I suggest to re-introduce the code below:

# Load requirejs last to avoid interfering with other libraries
require_index = [i for i, jsf in enumerate(js_files) if 'require' in jsf]
if require_index:
    requirejs = js_files.pop(require_index[0])
    js_files.append(requirejs)

In that case, require.js is loaded at the end and does not interfere with other libs (like Tabulator) and Ipywidgets does not complain anymore.

I suggest this change in the pull request #8308.