[Show] Enabling sidebar/toc output in HTML

[cqcn1991]

Hi all,
This is the progress I made so far,

You can see the file here
https://cdn.rawgit.com/cqcn1991/Wind-Speed-Analysis/master/output_HTML/hongqiao_intl.html

Addtionally, this also enables drop-and-run for this extension. Declare this in cell, and it will work (if you have the files).

[jcb91]

I just get

Not Found

at that url...

[cqcn1991]

@jcb91 seems like I've accidently deleted the .html, that's funny.
you can see it here
https://cdn.rawgit.com/cqcn1991/Wind-Speed-Analysis/master/output_HTML/hongqiao_intl.html

The repo (My notebook) is https://github.com/cqcn1991/Wind-Speed-Analysis/tree/master/output_HTML

[jcb91]

In https://github.com/cqcn1991/Wind-Speed-Analysis/tree/master/lib the my_toc folder is grayed out, which seems to indicate a missing submodule (see http://stackoverflow.com/questions/19584255/what-does-a-grey-icon-in-remote-github-mean). It'd probably be much easier for anyone to see what you're trying to do if you were to show the extension itself, rather than some project you have which attempts to use it...

[cqcn1991]

@jcb91 Thanks alot! I use git in that folder, and I didn't understand why it not show in my repo until you point out that git submodule. I'll fix this later.

[jcb91]

Ah, ok, that also makes sense: using git in a subdir of the parent repository will look the same as if the child repo were a submodule, but then the parent's .gitmodules file has been removed, although in this case, it never existed in the first place. Simplest solution is probably to publish the my_toc as a separate repo on github

[cqcn1991]

@jcb91 https://github.com/cqcn1991/Wind-Speed-Analysis/tree/master/lib/my_toc
it should be working right now. Take a bit of time to learn how to use git subtree.

[jcb91]

ok, yeah, I can see the directory contents now. I'm not really sure which bits I ought to be looking at though, to be honest. I'm guessing that lib/my_toc/2.0.js is the bulk of it?

Looking at lib/lib_loader.py#L39-L46 and the javascript in 2.0.js, it seems that you're injecting your files into the notebook through a python function executed by a kernel. This is not how notebook extensions work, nor is it recommended. Additionally, it makes it a lot more difficult for anyone else trying to reproduce your work. Notebook extensions are loaded by the notebook's own javascript machinery using requirejs. See other extensions in the current repo for examples, perhaps the simplest example of how to get an something to load would be in nbextensions/config/config_menu/main.js, where the load_ipython_extension function serves essentially the purpose that the $( document ).ready(function(){...}) call does in your 2.0.js.

If you could see your way to using a fork of this repo, you could submit a PR, and it would be easier to see what had changed, and you might be able to use git commits for your versioning instead of naming your files after versions 😝

[jcb91]

actually, it seems that the bulk of the new functionality over the existing toc2 is provided by
lib/my_toc/2.0.js#L68-L71 and lib/my_toc/2.0.js#L94-L95?

[cqcn1991]

@jcb91 Yes, I also think injecting the js and css is really bad practice. But that's the only way I figured could output the toc when output notebook into HTML.

And yes, for the sidebar layout, I hack it using the row col from Twitter Bootstrap. It is also a really bad way to do it.

I might not be clear at first. I'm not suggesting making a PR. It's just bad code. However, I want to show you the possibilites: A sidebar is easy to use, and output in HTML also looks good.

[jcb91]

that's the only way I figured could output the toc when output notebook into HTML

Ah, I see, apologies, I misunderstood slightly. Yes, I see what you mean, this isn't so simple to get into html output. The easiest way to approach this might be to use a toc cell (i.e. a markdown cell created and updated by the nbextension javascript) combined with a preprocessor which can insert appropriate css to alter the display and get it looking like a sidebar. Of course, this might require some hacking to get the toc cell to display as a regular cell as well, but I'm sure it could be done 😝

I hack it using the row col from Twitter Bootstrap

It'd be nice to have it draggable like with help_panel, but I think the bootstrap approoach is perfectly acceptable for now!

I like the idea, anyway 😄

[cqcn1991]

@jcb91 Just remembered that I deleted the number label in JS. Instead, I used a pure css implementation, you can see it here: http://stackoverflow.com/questions/2729927/number-nested-ordered-lists-in-html, the second answer.

Effect could be seen at https://nbviewer.jupyter.org/github/cqcn1991/Wind-Speed-Analysis/blob/master/Sidepyter_demo.ipynb#

This may help to simply the original code a little bit.

[jcb91]

closing this now that #593 is merged