JN 7 → Code Folding starts at the first line regardless the type

[MichalRIcar]

Hi,

Jupyter Notebook 7:

I would like to propose to be able to fold any cell by the first line of text regardless its type.

Reasoning of it is that in many scenarios we have a cell with certain description and funcionality in some type of representation, flow.

Once user of a Notebook reads instructions, it is not necessary to keep the whole cell unfolded, actually it is very beneficial to allow to fold the whole cell keeping only the first row (likely a Title of a cell).

E.g. cell worthy to read and then fold it to see only a title "The Generator X"
Cell:

# The Generator X
# This function produces...
A = FunctionX()

# Callable Output
#...

Best,
Michal

[RRosio]

Thank you @MichalRIcar for submitting this issue! As we use CodeMirror for code folding, this might be either a change to configuration or an improvement to CodeMirror.

[krassowski]

The way I read it, this basically requests what was already implemented in jupyterlab/jupyterlab#14141

@MichalRIcar is this correct?

[MichalRIcar]

Hi,

I will use an example from JN 6 with this feature on via codefolding extension:

Before Folding

After Folding

[MichalRIcar]

As we can see, the "old" codefolding allowed to fold any cell by its first line regardless of its type..very useful feature in notebook presentation.

[krassowski]

Sorry but I still do not see how it differs from what was implemented in jupyterlab/jupyterlab#14141.

[MichalRIcar]

@krassowski, thank you for pointing this out. You are absolutely correct that these two options are almost identical. However, I can only access the cell collapsing feature through the 'View' menu by selecting 'Collapse Selected Code' or 'Collapse All Code.' Perhaps I'm just missing some optional feature in Jupyter Notebook 7 because I don't see any dynamic option inside a cell to fold a whole code cell - similarly as we see in the example above?

Or idea behind this feature in JN7 is to not provide code folding in a code cell and rather forcing a user to use View option given by dev reasons? Originally (intuitively), I though it will be among these..

[krassowski]

You can click on the blue bar next to the cell:

This is somewhat documented in JupyterLab user guide but not in notebook itself. I think we should move the Notebook content User Guide to this repo (recreating videos using playwright) and then just embed it in JupyterLab docs.

[MichalRIcar]

Right! That was the first thing I tried and it doesn't work even though I have code folding allowed everywhere in Settings..

[MichalRIcar]

Is this dynamic bar folding connected with some other setup in the JN Settings?

[krassowski]

Can you provide a recording and check if there are any errors in the JS console?

[MichalRIcar]

Absolutely, I've just checked that in JL it works indeed..but JN no luck. I've also checked that JN is not given by a browser - both Chrome and Edge behave same - i.e. no bar code folding behavior.

[MichalRIcar]

JS concole has these errors and tons of warnings

[MichalRIcar]

Warnings

[MichalRIcar]

2023-09-07.14-08-14.mp4

[jtpio]

The collapsing issue might be similar to the one reported in #7020

[tmatsuzawa]

This active code folding is broken on my machine. I just installed the latest jupyter notebook.

[krassowski]

I tested this in Notebook 7.2.0 which was recently released and it works well

@MichalRIcar and @tmatsuzawa can you confirm that it works with Notebook 7.2?

Edit: I also see no errors in the console (there are some warnings though, but nothing warranting an action)

[MichalRIcar]

Hello @krassowski, thank you for following up on this important feature!

Good news is that now I can fold the very first cell, however, any other cell is still static - the blue left bar doesn't allow folding, doesn't change color when I move mouse on it like the first cell.

I have tried it using Chrome and Edge and the behavior is identical.
In Edge (only) the first cell once folded shrinks to approx. half length aligned to the right leaving half space as background as picture shows

[krassowski]

I can fold the very first cell, however, any other cell is still static

This is very helpful, I can reproduce this. This is a CSS problem - another element obstructs the collapser so that it cannot be clicked.

notebook/packages/notebook-extension/style/base.css

Lines 154 to 165 in 433f180

	body[data-notebook='notebooks']
	.jp-Notebook
	.jp-Notebook-cell:not(:first-child)::after,
	body[data-notebook='notebooks']
	.jp-Notebook
	.jp-Notebook-cell:not(:first-child)::before {
	content: ' ';
	height: 100%;
	position: absolute;
	top: 0;
	width: 11px;
	}

It looks like it was originally added in #6433, but I do not understand why because it does not seem to do anything other than preventing clicking on the cell collapsed. @trungleduc do you remember if this was intentional? If not, these lines can be removed to fix the issue.

[krassowski]

If this was intentional then maybe it should be configurable.

[trungleduc]

Sorry for my late reply, I missed the notification.

It looks like it was originally added in #6433, but I do not understand why because it does not seem to do anything other than preventing clicking on the cell collapsed. @trungleduc do you remember if this was intentional? If not, these lines can be removed to fix the issue.

IIRC at this time, it was quite hard to have the same shadow visual as the old notebook due to the structure of the cell widgets. So I need to add pseudo-elements to apply the shadow effect.