Vscode-jupyter: DS: Outline feature in jupyter notebook mode

[jediyoda36]

Feature: Notebook Editor, Interactive Window, Python Editor cells

Description

Microsoft Data Science for VS Code Engineering Team: @rchiodo, @IanMatthewHuff, @DavidKutu, @DonJayamanne, @greazer

Please support outline feature in jupyter notebook mode.
Just like Table of Contents extension in Jupyter Notebook. Table of Contents extension webpage

[rchiodo]

Thanks for the suggestion.

I think if we implemented a side view tab like suggested here:
https://github.com/microsoft/vscode-python/issues/8659

we could support outline and metadata at the same time.

[umdstu]

Such strange timing, I was just looking for this functionality as well. Great to see there is interest elsewhere!

[jediyoda36]

Such strange timing, I was just looking for this functionality as well. Great to see there is interest elsewhere!

and collapse the output cell... hoping they can develop this feature too....

[DonJayamanne]

Proposed solution

• Create our own UI Panel (like we did for tests before VSC added a generic view)
• Add a class that generates the TOC (a tree data structure)
  
  
  
  • This is merely a provider class, that has a method getOutline or similar
  
  
  • This has an event that gets fired when ever a new nb is selected
  
  
• Add a class that generates the tree view (separate class that builds the tree view)
  
  
  
  • This will use the provider to get the outline and build the tree view accordingly.
  
  
  • The treeview class will see that data has changed based on the event
  
  
  • Tree view fires its own event (this tells VSC to re-paint itself)
  
  
• When creating a node, we can provide the command and arguments
  
  
  
  • The command for the node is InteractiveWindowMessages.ScrollToCell with the cell id or what ever it is that this command needs
  
  
  • When the node is selected, VSC will automatically raise the event, the expectation is the nb will scroll to the required cell in the active nb (we'll need to pass the nb URI as an argument)
  
  
• We'll need to create command handler for InteractiveWindowMessages.ScrollToCell
  
  
  
  • Look at the first argument that will be a URI, find the corresponding active nb
  
  
  • Dispatch the InteractiveWindowMessages.ScrollToCell command with the args to that.
  
  
  • NB will then pass that to the UI layer (this is how interactive window works today, but native editor doesn't support scrolling to cells)
  
  
• Next add support fort the scrolling to cells in native editor
  
  
  
  • JS code to scroll react element into view
  
  
  • Add support for IncomingMessageActions.SCROLLTOCELL in Native Editor
  
  

With the code in ds/custom_editor this is easier, as the INotebookModel is exposed (gives access to cells from outside notebook to other parts of the extension) @rchiodo did the work in ds/custom_editor.
I propose bringing in that that change into master (easier for other similar changes).