Feature request: folding notebook sections

[ea42gh]

I use jupyter to create lecture notes, and find the ability to folding sections of the notebook based on section titles extremely useful.

Could such a capability be added to Pluto?

[fonsp]

What do you mean by folding?

[VPetukhov]

I think that's the idea like Collapse headings jupyter extensions.

[fonsp]

Also interesting is hiding sections until an exercise is completed. (@dpsanders)

[ea42gh]

yes, I meant "Collapsible headings"

[Masacroso]

I think that's the idea like Collapse headings jupyter extensions.

Also interesting is hiding sections until an exercise is completed. (@dpsanders)

I would like something like that, this will make easy to write code encapsulated in collapsible blocks (say, modules of code). A further enhancement of this idea will be that, as order doesn't matter in Pluto, that we can reorder position of blocks of cells of code in the notebook, I mean to move 'freely' cells/blocks in the notebook. That is, why stick to the 'old style' of having the code as it would be a text when our minds doesn't work linearly if not instead disorderly (as a net)?

[fonsp]

@Masacroso maybe notebooks within notebooks is interesting?

[Masacroso]

@Masacroso maybe notebooks within notebooks is interesting?

Certainly it seems interesting... it seems that you can fall inside an infinite nested sequence of notebooks!!! Yes, it seems that you can use something like this to separate the code in collapsible blocks.

[ea42gh]

Just to emphasize, the mechanism should be simple to use! potentially A LOT of folds in a lecture:

1. main section

1.1 basic idea

Example

step_1 etc

for a video lecture, I start with everything hidden, then open a (subsection) then reveal just a few lines at a time....

(Then record the lecture and edit the video.....)

[pkroenert]

A small file right next to each section would be great!

A collapses/expanded section would look something like:

Section 1 :arrow_right: and Section 1 :arrow_down:

Any suggestions on how to implement these collapsable feature?

[fonsp]

This is quite tough, because headings are contained within cells, not the other way around, so we need to hide partial cells, and some of the inputs depending on the header structure of the output.

[DhruvaSambrani]

Sections don't make sense in the repl/script environment at all, hence shouldn't the sections be created by noop commands? What I mean is that the sectioning shouldn't be julia code, because then you are adding code to handle how the notebook looks. So the UI should have a "Add Section/Close Section" button, which adds some noop code (such as a comment) to create the Section. My motivation is the same as that of demarcating cells as comments, instead of as extra julia code. Naming Sections is also possible. We can also add an activation command, like !# Heading !## Subheading And so on, but that may be adding way too much extra parsing for us to do

[fonsp]

Sections don't make sense in the repl/script environment at all

This sounds like searching for problems instead of solutions

[DhruvaSambrani]

😅 Yeah true. Idk, I just feel that UI elements/structuring should not affect code, especially if we aim to keep Pluto notebooks as simple .jl files which can be run in a scripting environment

[fonsp]

I disagree, remember that md"# I am also a UI element (inside code)", TextField(default="and so am i"). Let's continue this discussion in another thread if you want to

[DhruvaSambrani]

Yeah, I agree with you.

But is the sectioning using code even possible? Unless, like you said we run through the outputs and re-render?

Can I suggest a bit more whacky idea? Can we have Cells within Cells? From a code point of view all cells could be top level, but only from a render point of view, they can be nested. Then the hiding and stuff has already been implemented.

Also, if we allow multilevel cells to have different levels, then we can strengthen the concept of one section being "complete" in itself. This would basically be blurring the line between a notebook and a cell, and I think it's very similar to the notebook in notebook idea?

[fonsp]

Can you clarify the difference from notebooks within notebooks?

[DhruvaSambrani]

I'm not sure I understand nb in nb that well, but I guess the main difference would be that (atleast in the example you gave), you don't HAVE to call the inner notebook/cell.

If all the cells are flattened and simply brought to the upper level, then they'll run as if they're all just cells one below the other.

In the un-flattened case, I guess it would be very similar to the nb in nb. One, you can edit an inner cell without running all the code in the outer cell. May work better for reactivity. Two, you don't have to call a function to run it, it, it runs sequentially. I guess the inner cells can see everything in cells above them.

[GiggleLiu]

This would be a cool feature. Recently, I also wanted this feature because I want to structure the contents better. e.g. some sections are for experts only, while for most people, they are too detailed.

Currently I can use the summary and detail to hide a small chunk of static contents

If this is helpful to you, this is the code

    let
        content = md"""The above macro generates two functions, one is `f` and another is `~f` (or `Inv(f)`). The `x += y * constant` is translated to function `(x, y, constant) = PlusEq(*)(x, y, constant)`, where the function `PlusEq(*)` is clearly bijective.
    blablabla...
    """
        HTML("<details><summary><strong>For experts</strong></summary>$(html(content))</details>")
    end

The drawback is it does not support hidding interactive code blocks. I would be nice to make Pluto supports hidding a section natively.

[fonsp]

Here's something I put together:

https://github.com/fonsp/disorganised-mess/blob/master/hide_everything_below.jl

It doesn't hide notebook sections, it hides everything below the cell where it is displayed. You can combine it with @bind to toggle showing/hiding, and you can use it multiple times in one notebook.

Place it inside an if block to hide the rest of the notebook conditionally:

if !correct(answer_to_last_exercise)
    hide_everything_below
end

---

[DhruvaSambrani]

This can be extended to maybe have Section(heading=md"# Hello!", visible=true) which returns hide_everything_below if it is not visible, and heading if visible.

[DhruvaSambrani]

With a similar approach of using the css selector, you can also stop the hiding, by replacing display:none to display:block. The only issue with this is that you cannot have nested Sections

1: hidebelow
2: something
3: something
4: hidebelow
5: something
6: unhidebelow
7: something
8: unhidebelow

In such a scenario, Cell 7 is visible in spite of being inside another "hidden" block.

[DhruvaSambrani]

@fonsp I've implemented a PlutoUI object which makes a Section and hides all the cells below it depending on the state of an associated checkbox. I am however unable to @bind it to a variable, in the sense that it doesn't update the variable bound to it. Please see the Draft PR on PlutoUI for exact issues

[Moelf]

https://user-images.githubusercontent.com/5306213/195092910-fda385c2-f0da-48f5-90a0-034a5d87e07e.mp4

Just so we are on the same page about what we want. because @fonsp may not have used jupyterlab much.

I think this feature is more powerful on Pluto because sometimes you'd fold a section in jupyterlab and forgot to update it accordingly; in Pluto we can expand that section if any of the cells inside it is updated due to cell dependency. Otherwise we also actively know we don't have to worry about them.

[BioTurboNick]

Recently thought this would be a useful feature - I would like to have an analysis notebook that contains some optional sections that don't apply to every dataset. It would be ideal if the section didn't take up any vertical space in the notebook if it isn't needed, keyed on some condition.

[Moelf]

any movement on this?

[RohanGautam]

+1 ! 🔥

[3f6a]

Would love this feature +1 ❤️‍🔥