Notebook: Does notebook have the function of navigation in a sidebar ?

[Coldmooon]

I usually use notebook to give reports on my experiments. My report is sometimes very long but well structured. The problem is that I have to use mouse wheel to switch between chapters, which is very time consuming.

Is there any way to make a navigation in a sidebar in which each chapter is corresponding to a Heading in a Markdown cell ? So I can skip to a chapter quickly.

[jhamrick]

@minrk has a table of contents extension that might be what you are looking for:

https://github.com/minrk/ipython_extensions#table-of-contents

[Coldmooon]

Thank you very much, @jhamrick. This extension doesn't seem to work in jupyter. I installed the extension by the following steps:
1) download the extension from https://github.com/minrk/ipython_extensions#table-of-contents
2) copy nbextensions and extensions to ~/.ipython/
3) CD to ~/.ipython/nbextensions/ and run

$ sudo curl -L https://rawgithub.com/minrk/ipython_extensions/master/nbextensions/toc.js > toc.js
$ sudo curl -L https://rawgithub.com/minrk/ipython_extensions/master/nbextensions/toc.css > toc.css 

4) copy the code below to custom.js

$([IPython.events]).on("app_initialized.NotebookApp", function () {
    IPython.load_extensions("toc");
});

5) run jupyter migrate in the command line and the information given is:

[JupyterMigrate] Copying /home/coldmoon/.ipython/profile_default/security/notebook_secret -> /usr/local/share/jupyter/notebook_secret
[JupyterMigrate] Copying /home/coldmoon/.ipython/nbextensions -> /usr/local/share/jupyter/nbextensions
[JupyterMigrate] Copying /home/coldmoon/.ipython/profile_default/security/nbsignatures.db -> /usr/local/share/jupyter/nbsignatures.db
[JupyterMigrate] Copying /home/coldmoon/.ipython/profile_default/security/notebook_cookie_secret -> /usr/local/share/jupyter/notebook_cookie_secret
[JupyterMigrate] Copying /home/coldmoon/.ipython/profile_default/static/custom/custom.js -> /home/coldmoon/.jupyter/custom/custom.js

6) mannually copy the folder extensions to /usr/local/share/jupyter/

Then, I start a new terminal , run jupyter notebook and open a xxx.ipynb file. The notebook pape doesn't change.

I guess it is because

Jupyter no longer uses special heading cells

while the extension works with heading cells not with Markdown cells

[dsblank]

I haven't used @minrk 's table of contents, but we also have one that works with all versions of Jupyter:

http://calicoproject.org/ICalico#Calico_Notebook_Extensions

Here is a video:
https://www.youtube.com/watch?v=YbM8rrj-Bms

[jcb91]

There's also a working version (including a dockable sidebar) at ipython-contrib/IPython-notebook-extensions

[jkokorian]

I am using a table of contents that I found somewhere. It works very nicely, also with markdown.
In on cell you put:

## Table of contents
<div id="toc"></div>

In the next cell you put:

%%javascript
$.getScript('https://kmahelona.github.io/ipython_notebook_goodies/ipython_notebook_toc.js')

Although it works, it would be much nicer if there could be a stationary sidebar (that maybe will contain other things in the future), which has the table of contents. This would make it similar to the typical layout of a coding IDE.

[shoval]

Thanks @jkokorian for the useful snippet!
Instead of running two cells, you can run the following code in a single cell, and that will give you a stationary TOC on the side of the page:

%%javascript
$('<div id="toc"></div>').css({position: 'fixed', top: '120px', left: 0}).appendTo(document.body);
$.getScript('https://kmahelona.github.io/ipython_notebook_goodies/ipython_notebook_toc.js');

[Coldmooon]

@shoval Thank you~ Your code is very useful.

[jkokorian]

@shoval Great!

[vizmotion]

Not sure if anyone is still interested in this topic but I developed an open source stationary side bar. See https://github.com/vizmotion/jupyter-navigation. Feel free to use as you want.

[Coldmooon]

@vizmotion Thanks. very nice work. I've stared it.

[vizmotion]

Glad you found it useful. If you don't mind let me know how you use it and if there are improvements I can make.

[shoval]

If anyone is interested, I finally re-wrote the code for this sidebar navigation in a way that it is always present in Jupyter Notebook. This is a huge improvement over the snippet I wrote here a couple of years ago - the sidebar is resizable, items get added immediately when created and it fits better inside of the window. Please see: https://github.com/shoval/jupyter-navbar . I would appreciate your comments, bug reports, requests, etc.

[rpanai]

@shoval Your navbar it's really nice. Do you know if it's possible to have it via conda and/or pip?

[Coldmooon]

@shoval really good work. I like it ~~

[shoval]

@rpanai, the navbar is written in JavaScript, so it is a bit different than installing a Python package. I think it should be possible to install via conda, but I haven't found the time to do so yet.

[Xiangyu-C]

@shoval Thanks for the wonderful plugin. I have one problem. I usually have this line in my custom.css to make the notebook wider in the browser.
.container { width:90% !important; }
After I add your custom.css code at the top, now not only the width setting is thrown off but your nav bar also doesn't show up. These two settings would work fine without the other one present. Any ideas how they can be functioning at the same time?

[Ullas25]

With conda:

conda install -c conda-forge jupyter_contrib_nbextensions

With pip:

pip install jupyter_contrib_nbextensions

Enable

jupyter nbextension enable toc2/main

[shoval]

@Xiangyu-C , sorry for the very late response.

I tried adding the rule: .container { width:90% !important; } in the dev toolbar - it worked and didn't cause navbar to disappear. I tried several widths and zooms and it seems to be fine on my end. The worst thing that happened was the addition of a horizontal scrollbar (probably due to more than 100% total widths). I'm using Firefox, so perhaps this is a difference between browsers?