How do (can) I use a custom.js file under Jupyter notebook?

Question

In the IPython notebook (v3.1, for example), I could add a ~/.ipython/profile_default/static/custom/custom.js file to execute some custom JavaScript. For examp

Answer 1

The app_initialized.NotebookApp event is still fired if you look the notebook static/notebook/js/main.js code.

but you have to listen at this event using the define() function from requireJS:

define([
  'base/js/namespace',
  'base/js/events'
], function(IPython, events) {
   events.on('app_initialized.NotebookApp', function() {
     // Your Code
   });
});

Here your callback will be executed.

If you put in your custom.js :

 require(['base/js/namespace', 'base/js/events'], function(IPython, events) {
     events.on('notebook_loaded.Notebook', function() {
        console.log('require & notebook_loaded.Notebook');
    });
     events.on('app_initialized.NotebookApp', function() {
        console.log('require & app_initialized.NotebookApp');
     });
 });

 define(['base/js/namespace', 'base/js/events'], function(IPython, events) {
     events.on('notebook_loaded.Notebook', function() {
        console.log('define & notebook_loaded.Notebook');
    });
     events.on('app_initialized.NotebookApp', function() {
         console.log('define & app_initialized.NotebookApp');
     });
 });

The result in the console will be :

define() & app_initialized.NotebookApp
define() & notebook_loaded.Notebook
require() & notebook_loaded.Notebook

I guess that with the require() you register to an event that had already happen...

require() is waiting for all dependencies and submodules to be intialized... which might be too late for the app_initialized.NotebookApp event.

Answer 2

Using custom.js still works for me, but it seems to move around a fair bit.

Currently (version 4.2.3) as well as in the documentation for the upcoming 5.0 release, it's at ~/.jupyter/custom/custom.js. See the documentation at http://jupyter-notebook.readthedocs.io/en/latest/examples/Notebook/JavaScript%20Notebook%20Extensions.html#custom.js

You can show the path to and content of custom.js by executing this snippet in a notebook:

from jupyter_core.paths import jupyter_config_dir
jupyter_dir = jupyter_config_dir()
import os.path
custom_js_path = os.path.join(jupyter_dir, 'custom', 'custom.js')
print("searching for custom.js in ", custom_js_path)
#  my custom js
if os.path.isfile(custom_js_path):
    with open(custom_js_path) as f:
        print(f.read())
else:
    print("You don't have a custom.js file")

Answer 3

This question has arisen on the Github issue tracker - Issues with jupyter 4.0 - and links to a recent update that appears to simplify the loading of extensions: code update:

"By editing notebook.json manually. By default it is located at ~/.jupyter/nbconfig/notebook.json:"

{
    "load_extensions": {
      "notify": true,
      "theme_toggle": true
  }
}

Adding things like "code_folding/main": true also seem to work.

So my understanding is that this would replace the use of custom.js for loading the extensions?

Answer 4

How do I get things working again? Do I just not need to wait for app_initialized any more?

I don't have deep insight into the recommended way to do this, but with Jupyter/IPython 4.0, waiting on "notebook_loaded.Notebook" instead of "app_initialized.NotebookApp" works. i.e. use this line:

    events.on("notebook_loaded.Notebook", function () {