Test rich diff editor for notebook

[rebornix]

Refs: #112486

• anyOS @jrieken
• anyOS @Tyriar

Complexity: 5

Create Issue

---

We added support for rendering outputs for notebook in the diff editor this iteration. To test this feature, you would need a bit of time setting things up but once that's done, you should be able to use it just like the normal text diff editor.

Setup

• Install Jupyter extension from master
  • go to https://github.com/microsoft/vscode-jupyter/actions/runs/510651036#artifacts and download ms-toolsai-jupyter-insiders.vsix
• Install the extension from vsix
• If you don't want to mess up with python or jupyter
  • you can create a .ipynb file with following content plotly.txt
  • open it in VS Code, which should be opened in notebook editor
• Or, if you already have Python installed, Jupyter can use it as a kernel, with which you don't need future customization
  • run command "create new blank jupyter notebook"
  • create a code cell with language Python, type in !pip install plotly=4.5.2, run the cell
  • create another code cell with following content, run the cell

    import sys
    import plotly.graph_objects as go
    fig = go.Figure(
      data=[go.Bar(y=[2, 1, 3])], layout_title_text="A Figure Displayed with fig.show()"
    )   
    fig.show()

  • you should be able to see a graph

Testing

Once you can open a jupyter notebook with rich outputs in VS Code, you can then use git command to change its state in order to see it in SCM viewlet, or you can duplicate the file and then compare them directly through file explorer

A diff editor with document generated by above python code will look like below

Please test that:

• Rich outputs can be rendered in the diff editor
• If an output has multiple mimetypes, you can switch between mimetypes (for this you would need plotly.txt)
• You toggle the visibility of outputs
• You can choose to see the outputs' raw data
• Scrolling in the notebook diff editor with rich output rendered is reasonablly performant (no siganificant performance drop)

[jrieken]

This is equally cool as buggy