Visual Styling makes navigation too hard

[maegul]

First of all, thanks for the work!

A good TOC functionality is very important to Jupyter notebooks in my opinion (so much so, that I think it should be part of the core functionality ... a notebook is a webpage, and how long have webpages had links for quick and easy navigation ??? sorry for the sarcasm, point being, your work is very important!!!)

However, I'm finding the visual appearance of the actual TOC to just not be good enough. Two visual features are nearly necessary for me:

1. Indentation of headings according to their hierarchy. Without this, a TOC quickly becomes a slab of text that is very hard to make sense of
2. Highlighting the location of the current cell (and running cells). Without this, the TOC becomes less useful.

Note, these have been touched on already in #1, #18 and #67.

Lacking both of these together, really misses out on the utility of a TOC. And again, how many webpages would have similar functionality?

I'm writing this because I am at the point of reverting back to classic jupiter because both of these features are available in TOC2 and they are just that valuable in using any decently sized notebook that the features of jupiter lab are not really worth it.

I hope you have success with this plugin, and, selfishly, hope that you can implement these features without too much trouble.

[maegul]

Just a quick follow up, to backup my claim.

I've moved back to jupyter notebook (using TOC2), and am very happy. My workflow with jupyter is better despite no longer having the improvements in jupyter lab.

A good Table of Contents or Outline plugin/extension is vital (for me at least)!

Hope your work is going well, and thanks for your work!

[marius311]

I really agree the visual styling of jupyterlab-toc is garbled and makes it difficult to use, and that TOC2 did things much better and should ideally just be emulated.

In the meantime, the following simple hack gives indentation and gets rid of the funky font sizes, and has helped make things much more usable for me. 1) Download a user CSS plugin like Stylus for Chrome. 2) Add the following CSS to the Jupyterlab page:

.toc-cell-item {
    font-size: 16px;
}

.toc-level-size-1 {
    text-indent: 0em;
}
.toc-level-size-2 {
    text-indent: 1em;
}

.toc-level-size-3 {
    text-indent: 2em;
}

.toc-level-size-4 {
    text-indent: 3em;
}

.toc-collapse-button {
    visibility: hidden;
}

.toc-cell-item {
    padding-left: 0px;
}

This gives a TOC that looks like the following, just to take a random example from one of my notebooks:

If I get a bit of time I can try to make a PR for something like this.

[meldefon]

@marius311 Do you know of a way to control vertical spacing as well? I'd like to compress it a bit.

Thanks for the very useful tip!