BlackBoxModel seems to be missing in the Javascript file, also the documentation of it's usage could be updated

[kryptokommunist]

Hi there,

I am currently working on porting FreeCAD to Jupyter Notebook (repository). I chose pythreejs as the tool to render the 3D models. Since I will rely on an additional Javascript library to load the model from VRML 2.0 format I want to use an pythreejs extension. The documentation has an example for using BlackboxModel to achieve that.

I managed to get the example code incorporated into an basic Jupyter Widget with only minor modifications (extension javascript, python code on the server side, python code in notebook) that shouldn't change how the code executes.

The issue I encounter is that in the Jupyter Notebook when running the example Python code the Javascript web console tells me that the BlackboxModel object can't be loaded. The relevant error message reads:

[Error] Couldn't process kernel message – "Class BlackboxModel not found in module first-widget"
	(anonymous function) (main.min.js:24000)
	tryCatch (promise.min.js:1:5364)
	invokeCallback (promise.min.js:1:5622)
	publish (promise.min.js:1:5225)
	publishRejection (promise.min.js:1:4255)
	flush (promise.min.js:1:12398)

I tested this with Safari and Firefox. Also I made sure that my widget extension runs fine otherwise. So I checked if I can find where this BlackBoxModel is saved and it looks to me like the model is nowhere to be found in jupyter-threejs:

kryptokommunist@kryptokommunist:~$ cd /home/kryptokommunist/.local/share/jupyter/nbextensions/jupyter-threejs/
kryptokommunist@kryptokommunist:~/.local/share/jupyter/nbextensions/jupyter-threejs$ ls
extension.js  index.js  index.js.map  three.js
kryptokommunist@kryptokommunist:~/.local/share/jupyter/nbextensions/jupyter-threejs$ grep -rnw . -e 'BlackBoxModel'
kryptokommunist@kryptokommunist:~/.local/share/jupyter/nbextensions/jupyter-threejs$ grep -rnw . -e 'BlackBox'
kryptokommunist@kryptokommunist:~/.local/share/jupyter/nbextensions/jupyter-threejs$ grep -rnw . -e 'OrbitControlsModel'
./index.js.map:1:{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///(shortened, but it returns the entire minified Javascript)

Suggestion:

• improve the example for extending pythreejs to be a small widget under examples/extending_pythreejs/ that actually runs
  • this would make sure the example actually works without hidden configuration (I for example had some issues with dealing with the spread operator being used in the example code, which was incompatible with the pywidget skeleton code I am using)
• ensure that the BlackBoxModel is actually included in the build Javascript file.
  • or correct me if I missed something and the model is in a file somewhere else

My pythreejs version:

kryptokommunist@kryptokommunist:~$ pip3 show pythreejs
Name: pythreejs
Version: 2.2.0
Summary: Interactive 3d graphics for the Jupyter notebook, using Three.js from Jupyter interactive widgets.
Home-page: https://github.com/jupyter-widgets/pythreejs
Author: PyThreejs Development Team
Author-email: [email protected]
License: BSD
Location: /home/kryptokommunist/.local/lib/python3.7/site-packages
Requires: ipywidgets, ipydatawidgets, numpy
Required-by:
``

[vidartf]

So the issue has multiple points, so let me do them separately:

• The Python side needs to be told about the name of the model classes that you define in the JS. You do this by overriding the _model_name trait, e.g. like this:

  _model_name = Unicode('Your model class name here').tag(sync=True)
  

• Writing documentation for something you've written yourself is often hard, as it is easy to forget what needs to be explained or not. So thank you for giving feedback on that. Once you've been able to successfully extend the blackbox widget, you would be in a unique position to improve upon the documentation, since you will have all of this fresh in your mind. So I really hope you can help improve the documentation!

[kryptokommunist]

I'm happy to contribute a working example to the documentation once I know more :)

Regarding your point about telling the Python side the _model_name, this is done just like that, since I copied the part from the documentation example. But I forgot to link it in my issue text, sorry for that, here it is: python code in widget module. Additionally I referenced the module the class is part of:

class CubicLattice(pythreejs.Blackbox):
    _model_name: Unicode('CubicLatticeModel').tag(sync=True)
    _model_module = Unicode('first-widget').tag(sync=True)

Now I thought maybe that is the issue and the _model_module is set in pythreejs.Blackbox and I have overridden it. And indeed removing the code line _model_module = Unicode('first-widget').tag(sync=True) results in no more errors. Only issue now is that in the Jupyter notebook the familiar pythreejs black square 3D view is displayed, only without any visible content at all. The console now shows this:

[Debug] child changed: 50e9afd1d3a740da9868482cf48b822f (index.js, line 8)
[Debug] child changed: 50e9afd1d3a740da9868482cf48b822f (index.js, line 1, x2)
[Debug] child changed: 5cf447fbf200470fa598b98c9096a428 (index.js, line 8)
[Debug] child changed: 50e9afd1d3a740da9868482cf48b822f (index.js, line 8)
[Debug] child changed: 50e9afd1d3a740da9868482cf48b822f (index.js, line 1, x2)
[Debug] child changed: 5cf447fbf200470fa598b98c9096a428 (index.js, line 8)
[Debug] child changed: 50e9afd1d3a740da9868482cf48b822f (index.js, line 8)
[Debug] TV(787540): renderScene (index.js, line 8)
[Debug] TV(814449): renderScene (index.js, line 8, x111)
> Selected Element
> <div class="jupyter-widget jupyter-threejs" style>…</div>

My suspicion is that removing the line _model_module = Unicode('first-widget').tag(sync=True) leads to the Javascript side not being able to find the Javascript module where CubicLatticeModel is defined?

[luzpaz]

bumping to keep the momentum of this going.