Prebuilt custom extension does not get registered

Hello,

I have followed bokeh’s tutorial and the tutorial on awesomepanel to build my custom extensions. However I cannot seem to make it work, as the Models do not seem to get registered (getting an error in the console)

log
Error rendering Bokeh items: Error: Model 'customtest.custom_prebuilt.filetree.Tree' does not exist. This could be due to a widget or a custom model not being registered before first usage.
    at ModelResolver.get (bokeh.js?v=d2d2360d6c04541269a7c9067e0f8289569ebb683e7362500e9bc73b6f0a2b47ce98263bb325c1245800634ba2ec59ae5c4f7d4f5d0386edfe82375a46f989ce:1359)
    at Function._instantiate_object (bokeh.js?v=d2d2360d6c04541269a7c9067e0f8289569ebb683e7362500e9bc73b6f0a2b47ce98263bb325c1245800634ba2ec59ae5c4f7d4f5d0386edfe82375a46f989ce:872)
    at Function._instantiate_references_json (bokeh.js?v=d2d2360d6c04541269a7c9067e0f8289569ebb683e7362500e9bc73b6f0a2b47ce98263bb325c1245800634ba2ec59ae5c4f7d4f5d0386edfe82375a46f989ce:887)
    at Function.from_json (bokeh.js?v=d2d2360d6c04541269a7c9067e0f8289569ebb683e7362500e9bc73b6f0a2b47ce98263bb325c1245800634ba2ec59ae5c4f7d4f5d0386edfe82375a46f989ce:1130)
    at ClientConnection._repull_session_doc (bokeh.js?v=d2d2360d6c04541269a7c9067e0f8289569ebb683e7362500e9bc73b6f0a2b47ce98263bb325c1245800634ba2ec59ae5c4f7d4f5d0386edfe82375a46f989ce:43471)

I have created an example for the prebuilt and the normal (non-prebuilt) version here: GitHub - rynkk/crispy-garbanzo

All that’s left to do is bokeh build in /customtest.
Running normaltest will show the working custom widget.
Running customtest is supposed to show the prebuilt widget, instead only logs errors in the console.

I’m sure there’s something stupid that I am missing.
I hope someone can help me with this.

Thank you in advance

1 Like

In the typescript file you need to define the ‘module’. C.f. panel-chemistry/jsme_editor.ts at main · MarcSkovMadsen/panel-chemistry · GitHub

static module = “panel_chemistry.bokeh_extensions.jsme_editor”

A hard refresh of the browser might also be required.

1 Like

Thank you so much;
You (and awesomepanel) rock!

1 Like

I’m interested in the tree view. What is your use case. And why did you choose the specific one?

I am loading a nested dataset (hdf5-file) in the backend. Depending on what leaf of the dataset is selected (in the frontend) I am showing the corresponding data as an image. Basically, I am using it as a browser-side file-explorer.

I chose jsTree because it comes with a buck-load of optional features that I can embed easily, if needed and it is very customizable (icons, behaviour). Specifically, there is a plugin jstreegrid that allows to display nested key-value pairs nicely, very much like the QTreeWidget.

Also it’s very straight forward

jsTree "file-explorer"

JSTREEexplorer

Nested key-value pairs (QTreeWidget though)

QTreeWidget

1 Like