Package: jupyter-require
Jupyter nbextension for JavaScript execution and managing linked libraries and CSS stylesheets in Jupyter notebooks.AboutThejupyter-requirelibrary is intended to be used inJupyternotebooks.Jupyter-require allows to execute and manage customJavaScriptandCSSfiles and even create and load your own styles and scripts directly fromJupyternotebook.Jupyter-require provides a unique opportunity to customize Jupyter notebooks and enables users to handcraft their own JavaScript-augmented workflows while keeping in mind synchronicity demands and security implications of such approaches.What is this for?Let’s demonstrate the usage on an example. Note that the usage is limited only by your imagination, this is just a demonstration of a single use case.If you are into data visualization like me, you’ve most likely already heard ofd3.js JavaScript ecosystem.
It’s an incredibly powerful tool which can be used to create advanced interactive visualizations.However, it is not very comfortable to use in Jupyter notebooks let alone integrate with Python.See the article aboutCustom D3.js Visualization in a Jupyter Notebook.That’s wherejupyter-requireand relatedjupyter-d3come into play.
jupyter-require allows you to source custom scripts (liked3) and styles and use them within the notebook with ease.Check out alsojupyter-d3which takes thed3workflow in Jupyter notebooks to another level.InstallationTo install jupyter-require Python package:pipinstalljupyter-require[Optional] This step should be optional, but if you find out that the extension did not load properly (or at all),
try to execute the following commands first.jupyternbextensioninstall--user--pyjupyter_requireYou can do all that from the python interpreter as well.
To install the nbextension itself and enable it, we have supplied a helper functions in thejupyter-nbutilsutilsmodule.fromjupyter_nbutilsimportutils# install jupyter-require extensionutils.install_nbextension('jupyter_require',overwrite=True)# note there is an underscore, it's Python module name# load and enable the extensionutils.load_nbextension('jupyter-require',enable=True)All of that above can be done from command line, so if you’re used to installing nbextensions the regular way, feel free to do so. In fact, you arerecommendedto, this approach is just for lazy people like myself.NOTE: You may need to reload the page (just hit F5) after these steps for the jupyter-require nbextension to initialize properly.Example usageInJupyternotebooks:# Applicable for version <=0.3.0%load_extjupyter_requireNOTE:Sincetheversion0.3.1thisextensionisautoloadedandthisstepisnolongerrequiredLoading librariesLoading required libraries is now as simple as:%requirejsd3https://d3js.org/d3.v5.min%requirejsd3-hierarchyhttps://d3js.org/d3-hierarchy.v1.minNOTE:Notethatthepathdoes**NOT**containthe`.js`fileextension.Thisis`requireJS`_standard.The%requirejsisjupyter magic commandand the rest are the parameters. The command takes a lib name and path.Creating custom style elementsIf you’re not a fan of magic commands, you can make use of equivalent API calls.fromjupyter_requireimportrequirefromjupyter_requireimportload_cssrequire.config({'d3':'https://d3js.org/d3.v5.min''d3-hierarchy':'https://d3js.org/d3-hierarchy.v1.min'})load_css(...)# stylesheet goes hereExecuting custom scriptNow we can actually make use of the bidirectional communication between Python and JSLet’s say we have the followingd3script:NOTE: I assume that we work in Jupyter notebook environment and hence we have the context cell at our disposal./**
 * @module
 * @description  Print coloured circles into the cell output
 * @file  d3-simple-example.js
 */// Inspired by: https://www.d3-graph-gallery.com/intro_d3js.html// create SVG element in the output area// the ``element`` is a contextual binding to the output of the current cellletsvg=d3.select(element.get(0)).append('svg');// create groupletg=svg.append('g');g.append("circle").attr("cx",2).attr("cy",2).attr("r",40).style("fill","blue");g.append("circle").attr("cx",140).attr("cy",70).attr("r",40).style("fill","red");g.append("circle").attr("cx",300).attr("cy",100).attr("r",40).style("fill","green");Now in order to execute the script in a cell, we will have to tell it to use thed3. Theexecute_with_requirementsis made exactly for that purpose.frompathlibimportPathfromjupyter_requireimportexecute_with_requirementsscript=Path('d3-simple-example.js').read_text()execute_with_requirements(script,required=['d3'])And you should see those three pretty circles :point_up: .⚠️ It is possible that the current markdown renderer does not render the raw</svg>element above, all the more reason to try it yourself! :smirk:There is certainly more to it, but I am gonna leave it to your adventurous desires.SynchronicityJavaScript execution is by default asynchronous. All the more in Jupyter notebooks.
Executing custom JavaScript script will happen asynchronously and the rest of the notebook won’t wait for the execution to complete.This is very often not the desired behaviour, since we might to work with the results of the execution in the next cell.Jupyter-require solves this issue by converting every executed script intoPromiseand awaiting it while pausing the execution of Python kernel.Execution & Security –safe scriptsandfinalizationIn Jupyter notebooks, it might be sometimes unfortunate how the JavaScript is stored (and treated) in general in the notebook environment.jupyter-requireintroduces the notion ofsafe scriptsandfinalization. Let’s look at the latter first.FinalizationWhen a user executes a script via native Jupyter API, that is typically something likedisplay(Javascript("""...""")), what happens behind the scenes is actually quite complicated. The one important thing to now, however, is that thewholescript is embedded into the cell output and the resulting*.ipynbfile.
Then,every timea cell is copied or re-created (i.e., on notebook reload), the script isexecuted. Since this execution is not sandboxed. In fact, it is executed inwindow contextusingevalfunction.See: The section‘Do not ever use eval!’from the officialMDN web docs).This can potentially be a security threat!
Also, if you don’t want to share the script that produced the output, but you want the output to be present, this does not happen either.We try to combat that issue step by step, our approach is not optimal either, but it does yield some improvements and we believe that over time, it will get even better. When executing scriptwithjupyter-requireexecute_with_requirementsfunction, it is not the script which is embedded, it is theFunction objectitself which the cells carry with. This allows the script to be re-executed when we copy/paste a cell or stored in a clipboard when cutting the cell.Also, we do not evaluate the script in window context using theevalfunction, as Jupyter by default does. Instead, at the current development state, wewrap itin its ownFunction scopeand set itsthisandelementcontext manually.Aight, still not a word aboutfinalization, right? What finalization means in this context, isdiscardingthe JavaScript code which produced the output, cleaning the metadata andsaving the outputdisplayed in the cell output area into a static state.
Going back to thed3example, finalizing the cells would make the plot that we produced persistent and JSON serializable. The output would then be visible in tools likenbviewerorGitHubipynbpreview.⚠️ SVG poses another security issue, however, hence GitHub might not display them to prevent that, see for examplethisconversation. We will try to act on this issue in the future.We are thinking about the ways we could sandbox the execution and the output even more, but bare in mind that this project is very young, so let’s put one foot in front of the other.To finalize your outputs, use theSave and Finalizeaction button which should be present on the right of the regularSave and Checkpointbutton. The finalization also happens automatically when youproperlyclose the notebook. We cannot handle SIGTERMs at the moment, so be aware that in that case the scripts will be discarded and the output lost.Safe scripts⚠️ The notion of safe scripts is something which has been added pretty recently and is under heavy observation.By the wordsafewe don’t refer to an execution which reduces security threats, no, nothing like that. It isYOUwho guarantee that the scriptissafe and can be treated as such.
The mechanism which we treatsafe scriptsby is very similar to the one described above, with one important change: safe scripts are similar to the default Jupyter notebook behaviour in a sense that they are alsoexecuted on the notebook reloadand are alsostored in the resulting `*.ipynb` notebook file.Hence you can enjoy the benefits of a sandbox(ish) synchronous execution while still having the scripts stored in the output. The onelimitationis that they do not allow to specify requirements as theexecute_with_requirementsfunction does by itsrequiredparameter. This is because those scripts can be executedbeforeextensions are actually loaded and we can not guarantee (at least we don’t know how right now) that the functionality of jupyter-require will be present at that time.To treat your script assafe script, execute it withsafe_executefunction.Footnotesresourcelinkjupyter-requirehttps://github.com/CermakM/jupyter-requirejupyter-d3https://github.com/CermakM/jupyter-d3CSShttps://www.w3schools.com/css/D3https://d3js.orgGitHubhttps://github.com/JavaScripthttps://www.w3schools.com/js/default.aspJupyterhttps://jupyter.org/nbviewerhttps://nbviewer.jupyter.org/MDN web docshttps://developer.mozilla.org/en-US/requireJShttps://requirejs.org/Author: Marek Cermak <macermak@redhat.com>