Save and restore sidebar subpanels sizes and expansion states

[DenisaCG]

This PR makes possible the full saving and restoration of the sidebars, including the subpanels sizes and expansion states.

References

It listens to the new signal introduced in this PR jupyterlab/lumino#614 in lumino, namely expansionToggled, such that the saving of the sidebar's layout is triggered when one of the subpanels is collapsed or expanded.

It also listens to the signal handleMoved, which makes it possible for the layout of the sidebar to also be saved when the vertical size of any of the subpanels is changed. The horizontal size of the entire sidebar is already being saved, as a consequence of the layout saving of the main dock panel.

Code changes

To allow for the full saving and restoration of the sidebar layout, the ISideArea interface has been extended, such that it includes two new properties sizes and expansionStates which will store the vertical sizes, and respectively the expansion state of each subpanel.

The listeners for the signals mentioned above are also initialized when a widget is added to the sidebar, in the case of an AccordionPanel or SidePanel.

When a saving of the sidebar's layout is triggered, the dehydrate method now extracts the vertical sizes, as well as the expansion states, while the rehydrate method will restore them.

User-facing changes

The users will now be able to see the sidebars' layout being automatically saved with any changes that might have been made, regarding sizes of subpanels or their expansion states, and respectively restored in the case of refreshing or reopening JupyterLab.

Backwards-incompatible changes

[jupyterlab-probot]

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

[welcome]

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please make sure you followed the pull request template, as this will help us review your contribution more quickly.

You can meet the other Jovyans by joining our Discourse forum. There is also a intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[fcollonval]

Thanks @DenisaCG

The code is good. We are only missing one point: the sizes and expansionStates must be stored per children of the sidebar stack panel.

[fcollonval]

Here is the trouble, a sidebar can have multiple panels (called widgets in this object). So sizes and expansionStates should exist per panel (child of the stack panel).

The panel are identify by a id for example

"left":{
  "collapsed":false,
  "visible":true,
  "current":"filebrowser",
  "widgets":["filebrowser","running-sessions","@jupyterlab/toc:plugin","extensionmanager.main-view"]
},
"right":{
  "collapsed":true,
  "visible":true,
  "widgets":["jp-property-inspector","debugger-sidebar"]
}

So I would use a object like

left/rightArea: {
  collapsed: boolean,
  currentWidget: string | null
  widgets: string[] | null,
  widgetStates: {
    [id: string]: {
     sizes: number[] | null,
     expansionStates: boolean[] | null
    }
  }
}

Does it make sense?

[DenisaCG]

Oh okay. I assumed that each panel would require its own sidebar instance so we would have multiple left and right ones, but this makes more sense. Thanks @fcollonval! I will make the changes.

[fcollonval]

I don't think this is doing what you want. You should loop on this._stackedPanel.widgets not this I guess. And then test if panel.content is an instance of SplitPanel (you don't need to test for AccordionPanel as it inherits from SplitPanel).

Tip: you can directly use the local widgets variables.

[DenisaCG]

Thanks for the review @fcollonval! I restructured the code such that the sizes and expansion states of the subpanels of each sidebar instance is included in widgetStates, each also being identified by their widget id. Unfortunately, it seems to be missing something as the layout is not saved and restored properly (this was fixed with the later commits).

[fcollonval]

Thanks a lot @DenisaCG this is working as expected. The integration tests should pass after #14945 is merged.

[fcollonval]

Thanks @DenisaCG

[welcome]

Congrats on your first merged pull request in this project! 🎉

Thank you for contributing, we are very proud of you! ❤️