When trying to use tabulator.info javascript in Notebook I get Javascript error adding output!

[MarcSkovMadsen]

My Pain

I have wrapped the tabulator.info grid into a new Panel widget. It works great on the server. Now I'm trying to get it working in the Notebook.

It does not work. The tabulator grid is not shown. My Hypothesis is that the tabulator javascript module does not load. It's defined like this

If I try to load it directly in the notebook via

import panel as pn
pn.config.js_files["tabulator"]="https://unpkg.com/tabulator-tables@4.7.2/dist/js/tabulator.min.js"
pn.extension()

I get a 'Javascript error adding output!' and `Error: Mismatched anonymous define() module: ..' error.

I would like 1) To know how to solve this 2) Have a better error message describing the cause and solution.

[philippjfr]

So I've had to develop some custom workaround for custom JS to load correctly in the classic notebook where requirejs is used to load modules. In addition to the `javascript`` variable I also define a requirejs based configuration on Panel model classes, e.g. take a look at the Plotly configuration:

    __javascript__ = [
        'https://code.jquery.com/jquery-3.4.1.min.js',
        'https://cdn.plot.ly/plotly-latest.min.js'
    ]

    __js_skip__ = {'Plotly': __javascript__[1:]}

    __js_require__ = {
        'paths': {
            'plotly': 'https://cdn.plot.ly/plotly-latest.min'
        },
        'exports': {'plotly': 'Plotly'}
    }

Here the __js_require__ configuration gets used in the classic notebook instead to avoid the errors you are seeing.

[MarcSkovMadsen]

I tried this one without luck

Will try to understand what it does and if I need to do something else.

[philippjfr]

Try to strip off the .js extension from the js_require definition, i.e. use JS_SRC[:-3].

[MarcSkovMadsen]

It did not change anything.

But I found something that works using requirejs directly in the console.

requirejs(["https://unpkg.com/tabulator-tables"]);
Tabulator=requirejs("https://unpkg.com/tabulator-tables");

I cannot get it working if I add it to the .ts code though.

I will itereate a bit on that and get back with the solution if I find one.

[MarcSkovMadsen]

I've tried this without luck

[MarcSkovMadsen]

I've tried this variant without luck

[MarcSkovMadsen]

As the requirejs work in notebook I will just stick to that for now.

There is also a little bit of information on the Tabulator package regarding loading the package and using require. See http://tabulator.info/docs/4.7/install

[MarcSkovMadsen]

This workaround also works in a code cell

%%html
<script>
requirejs.config(
    {paths: { 'tabulator': ['https://unpkg.com/tabulator-tables@4.7.2/dist/js/tabulator.min']},}
);
if(!window.Tabulator) {
    require(['tabulator'],function(tabulator) {window.Tabulator=tabulator;});
}
</script>

It so nice :-)

[MarcSkovMadsen]

FYI. @philippjfr

I will close this one for two reasons 1) I've find a workaround in the notebook 2) There is a PR on adding Tabulator to Panel. So it will be solved there.

[MarcSkovMadsen]

I've reopened because I have the same issue with the perspective viewer.

I can get the perspective-viewer working in a notebook if I add the required javascript files pn.config.js_files and then run pn.extension(). But I simply cannot get it working via the __javascript__, __js_skip__ and __js_require__ in a notebook.

I think there is something in my knowledge/ understanding I'm missing.

My hypothesis is that I'm missing an understanding of pn.extension. I realised that when in notebook I should probably use pn.extension("tabulator") or pn.extension("perspective") and not pn.extension() in order to get the javascript loaded.

So I started experimenting with this and thought: Lets focus on the perspective bokeh model and simplify things by trying to mimic the plotly example.

So I setup a simplified notebook to demonstrate that I still cannot get it working even if I mimic the plotly example.

The problem generally is that I don't get any error messages and I don't know how to debug a jupyter notebook. So it's all trial and error and guessing.

Lets start with something that works

Plotly

Code

import panel as pn
# from awesome_panel_extensions.widgets.perspective_viewer import PerspectiveViewer
# from awesome_panel_extensions.bokeh_extensions.perspective_viewer import PerspectiveViewer as _BkModel
#imports = {
#    "perspective": "awesome_panel_extensions.bokeh_extensions.perspective_viewer",
#}
#pn.extension._imports.update(imports)
#display(pn.extension._imports)
pn.extension("plotly")

%%html

<div id="myDiv" style="height:200px;width:100%"></div>

%%js

var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'lines',
  type: 'scatter'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers',
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

Plotly.newPlot('myDiv', data);

PerspectiveViewer

I have copied the relevant code from the Plotly Bokeh model

After having studied the code of pn.extension I thought I would be able to do

1. Clear the notebook by

   • Kernel - Restart and clear output
   • Cells - All - Clear output
   • Save and Checkout
   • Open in a new tab.

2. Change to the below

Changed Code

import panel as pn
# from awesome_panel_extensions.widgets.perspective_viewer import PerspectiveViewer
# from awesome_panel_extensions.bokeh_extensions.perspective_viewer import PerspectiveViewer as _BkModel
imports = {
    "perspective": "awesome_panel_extensions.bokeh_extensions.perspective_viewer",
}
pn.extension._imports.update(imports)
display(pn.extension._imports)
pn.extension("perspective")

[MarcSkovMadsen]

In the example above I've tried to add a print statement to the panel require_components function.

I can see that for plotly it's able to extract the js information

For perspective it's not.

[MarcSkovMadsen]

Looking at the require_component I think i have identified the problems

1. The bokeh model needs to be loaded/ imported in order to get into Model.model_class_reverse_map.items().

I can fix that via

2. The panel code only enables including models from the panel package ??? AAARGGGGHHHHH 😡 ..... ok its a 😄 then.

This can be fixed by changing to

and the simple example works.

[MarcSkovMadsen]

After a little bit more of experimentation with the PerspectiveViewer bokeh model I settled on this.

class PerspectiveViewer(HTMLBox):
    """A Bokeh Model that enables easy use of perspective-viewer widget
    """

    __javascript__ = [
        "https://unpkg.com/@finos/perspective@0.5.2/dist/umd/perspective.js",
        "https://unpkg.com/@finos/perspective-viewer@0.5.2/dist/umd/perspective-viewer.js",
        "https://unpkg.com/@finos/perspective-viewer-datagrid@0.5.2/dist/umd/perspective-viewer-datagrid.js",
        "https://unpkg.com/@finos/perspective-viewer-hypergrid@0.5.2/dist/umd/perspective-viewer-hypergrid.js",
        "https://unpkg.com/@finos/perspective-viewer-d3fc@0.5.2/dist/umd/perspective-viewer-d3fc.js",
    ]

    __js_skip__ = {
        "perspective": __javascript__[0:1],
        "perspective-viewer": __javascript__[1:2],
        "perspective-viewer-datagrid": __javascript__[2:3],
        "perspective-viewer-hypergrid": __javascript__[3:4],
        "perspective-viewer-d3fc": __javascript__[4:5],
        }

    __js_require__ = {
        'paths': {
            'perspective': "https://unpkg.com/@finos/perspective@0.5.2/dist/umd/perspective",
            # 'perspective-jupyter': "https://unpkg.com/@finos/perspective-jupyterlab@0.5.2",
            "perspective-viewer": "https://unpkg.com/@finos/perspective-viewer@0.5.2/dist/umd/perspective-viewer",
            "perspective-viewer-datagrid": "https://unpkg.com/@finos/perspective-viewer-datagrid@0.5.2/dist/umd/perspective-viewer-datagrid",
            "perspective-viewer-hypergrid": "https://unpkg.com/@finos/perspective-viewer-hypergrid@0.5.2/dist/umd/perspective-viewer-hypergrid",
            "perspective-viewer-d3fc": "https://unpkg.com/@finos/perspective-viewer-d3fc@0.5.2/dist/umd/perspective-viewer-d3fc",
        },
        'exports': {
            "perspective": "Perspective",
            "perspective-viewer": "PerspectiveViewer",
            "perspective-viewer-datagrid": "PerspectiveViewerDatagrid",
            "perspective-viewer-hypergrid": "PerspectiveViewerHypergrid",
            "perspective-viewer-d3fc": "PerspectiveViewerD3fc",
            }
    }

    __css__ = ["https://unpkg.com/@finos/perspective-viewer@0.5.2/dist/umd/all-themes.css"]

Please note that theexports is essential. If not exported the perspective modules do not register and thus do not work.

But now things work in notebook.

When #1539 is merged and released the issue is solved for Perspective.