Add ToC indentation support

[kgryte]

This PR resolves #114 by

• adding indentation to ToC entries

Notes

• This PR does not currently indent either code or Markdown entries for reasons of preserving full width rendering. If we indent code or Markdown, this could make the content illegible for small widths.

Screenshots

Collapsing enabled

Collapsing enabled + numbering enabled

Collapsing enabled + numbering enabled + code + Markdown

Collapsing disabled

Collapasing disabled + numbering enabled

Collapsing disabled + numbering enabled + code + Markdown

[ellisonbg]

Something to think about from a visual design perspective is the a trees with indentation in a narrow panel start to be difficult at a certain depth. I think the proposed design here is making a good set of tradeoffs overall (reducing font size and lower depths, intending with a small amount of horizontal space).

[kgryte]

@ellisonbg Thanks for taking a look. Instead of making this the default behavior, we could add an extension setting to allow users to toggle ToC indentation. Lack of ToC indentation has been a recurring request both on this repo, as well as internally. So offering the ability for users to opt-in to indentation seems like a reasonable compromise.

[ellisonbg]

I agree it is useful and don't know it needs to be a setting (not opposed to it though). I do think it is a good default behavior as well. I was more encourage us to keep thinking about the tradeoffs and how we might make subtle visual changes to improve the overall experience while using indentation. I don't have specific recommendations, more of a general, let's keep exploring this as people start to use it.

[kgryte]

@ellisonbg Sounds good! Thanks for your input!

[Stannislav]

Would it be possible to reduce the space between the lines in the TOC? I find the Jupyter TOC(2) extension is doing a good job on both horizontal and vertical spacing:

source

[marius311]

Just my 2c, but from a visual design perspective, I find the the diffrent font sizes of the different ToC levels extremely disorienting, especially coupled with same-sized collapse arrows. My guess is their original purpose was because we didn't have indentation, so something needed to indicate depth, but if we have indentation, maybe the font sizes can be made uniform, at least when code/markdown is off, when the disorientation is particularly bad? (just look how much better that TOC2 screenshot looks, at least to me)

Even if not, happy to see this PR, thank you!

[hottwaj]

Could you add in a little extra to cover indentation for toc of .py files?

See lines 17-22 here:
https://github.com/hottwaj/jupyterlab-toc/blob/toc-indentation/src/generators/python/render.tsx

I guess something similar may also be needed for markdown & latex...

Thanks for this PR :)

[marthacryan]

jupyterlab/jupyterlab#9275 addresses this in the core extension. Maybe we should close this PR?

[ericdatakelly]

@kgryte I think you agree to close this PR, correct?

[kgryte]

@ericdatakelly Depends on if people want/need this in a JLab version prior to ToC being merged into core. I don't necessarily see any harm in keeping the PR open indefinitely.