Hello, Jupyter Discourse Forum. I’ve been working on a Jupyter Notebook for the last month and put together a very nice toolkit for my DevOps team out of it. I want to be able to containerize this tool, or at least host it on our own intranet, so that the rest of the team can use it without having to go through a long install/configuration sequence on their own machines. Voilà seems to be the best tool for doing that, as my tool uses the Python kernel extensively and this seems to be a way to host it on a remote machine while still retaining the ability to use the kernel.
My tool involves a couple of custom widgets. They’re very simple and there to communicate information better through the UI - they’re an image object and a label object that can slowly fade out over the course of several seconds to indicate that an operation (such as saving) was either recently completed or done so long ago that the information is likely no longer relevant. (I don’t want the user to see a ‘Data saved!’ message from 15 minutes ago, for example.) I managed to put these custom widgets together just fine - but like all custom widgets, they needed additional Javascript code to display on the Notebook.
Putting the relevant javascript in a cell with the ‘%%javascript’ magic tag causes the custom widgets to work perfectly - however, I do not want to rely on this as a long-term solution for two reasons. One reason is that I want the javascript to be able to be easily rewritten, stored to a repository, and viewed on tools outside the notebook itself - I don’t want to commit a new version of the notebook every time I need to change the Javascript, and I certainly don’t want to go digging through the .ipynb file when I want to read the code itself.
The other problem is that Voilà does not seem to support the ‘magic %%Javascript’ tag, at least at the moment. Putting the javascript code inside a cell before the cell containing the application and then running the entire notebook through Voilà does not seem to execute the Javascript code, only injecting it into the HTML - errors pop up throughout the Javascript console, and all of my custom widgets fail to render.
Is there some accepted way to create a Javascript file, one that would be kept in a /static folder or something like that to match up with images and HTML files, and then configure some Python code so that the Javascript file is imported and executed at the very least before my application’s widgets are created? I’ve looked at the custom.js option inside the root Jupyter settings, and would like something more local to the project if at all possible. I’ve also tried to move the files I created into an existing /static folder inside Voila and import them in the template with the following lines of code:
<script type=“text/javascript” src="{{resources.base_url}}voila/static/image_extra_features.js"></script>
<script type=“text/javascript” src="{{resources.base_url}}voila/static/label_extra_features.js"></script>
But this seems to just include, but never actually execute, the relevant code.
I’m sure I must be missing something. (I thought I found something promising when I chased the ’ _view_module_version’ section of the Python model of the custom widget down, as the version of the custom widget isn’t specified anywhere in the Javascript file, but that seemed to be a dead end- where is the module version supposed to be listed? Is it only in the Python file?)
Does anyone have any idea as to what it could be?