-
-
Notifications
You must be signed in to change notification settings - Fork 498
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
When trying to use tabulator.info javascript in Notebook I get Javascript error adding output! #1529
Comments
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 |
Try to strip off the .js extension from the |
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. |
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 |
This workaround also works in a code cell %%html
<script>
requirejs.config(
{paths: { 'tabulator': ['https://unpkg.com/[email protected]/dist/js/tabulator.min']},}
);
if(!window.Tabulator) {
require(['tabulator'],function(tabulator) {window.Tabulator=tabulator;});
}
</script> It so nice :-) |
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. |
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 I think there is something in my knowledge/ understanding I'm missing. My hypothesis is that I'm missing an understanding of So I started experimenting with this and thought: Lets focus on the 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 PlotlyCodeimport 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); PerspectiveViewerI have copied the relevant code from the Plotly Bokeh model After having studied the code of
Changed Codeimport 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") |
Looking at the
I can fix that via
This can be fixed by changing to and the simple example works. |
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/[email protected]/dist/umd/perspective.js",
"https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer.js",
"https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer-datagrid.js",
"https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer-hypergrid.js",
"https://unpkg.com/@finos/[email protected]/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/[email protected]/dist/umd/perspective",
# 'perspective-jupyter': "https://unpkg.com/@finos/[email protected]",
"perspective-viewer": "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer",
"perspective-viewer-datagrid": "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer-datagrid",
"perspective-viewer-hypergrid": "https://unpkg.com/@finos/[email protected]/dist/umd/perspective-viewer-hypergrid",
"perspective-viewer-d3fc": "https://unpkg.com/@finos/[email protected]/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/[email protected]/dist/umd/all-themes.css"] Please note that the But now things work in notebook. When #1539 is merged and released the issue is solved for Perspective. |
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
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.
The text was updated successfully, but these errors were encountered: