Investigate rendering Vega, Plotly etc outputs when loading an existing notebook

[DonJayamanne]

Related issues

• Support vega #10812
• Plotly output generated with 'notebook' renderer not shown after re-opening notebook #6404
• Unable to render Altair plot using boxplot on repeat with mimetype #8016
• Unable to save vega plots #11291
• Vega plots rendered in VS Code are not aware of the themes #11292
• Vega, Plotly & Altair renderers generate image outputs and add that to ipynb #11293
• Some actions in vega viewer do not work #11294

See here for some preliminary analysis #10812 (comment)

[DonJayamanne]

Issues

• JavaScript evaluated by the Notebook renderer is evaluated in the global scope vscode#157076
• We need to pre-load widget scripts even when rendering JS output (because js ends up requiring widgets via require)
• Vega ends up requiring this context to point to the output renderer that has an array of outputs
  • Thus we too need to place this in the context of the js call
  • Need custom JS renderer
• element variable not defined when rendering IPyWidgets #6054

Findings:

• Support vega #10812

  • Update built in js renderer to support:

    Details

    * `element` var * Custom `this` context * Still need to ensure requirejs is loaded

  • Preferred: Custom mime type added by us that doesn't get saved to ipynb

    Details

    • This has a custom renderer that results being a custom js renderer
    • Still need to ensure requirejs is loaded
    • We can dynamically define the nbextensions/jupyter-vega/index
    • We can do this only if not already available, this way when Widgets scripts load, we'll fall back to the installed vega scripts, else we use thats in the renderer.
    • This way, if users open a notebook we render vega, and if they somehow open a notebook with a live kernel (or copy cell and output) then the vega code will be loaded from nbextensions (if available).
    • Note: Its most likely that renderer will ALWAYS load vega faster and end up defining the module entry for nbextensions/jupyter-vega/index. We might want to go with the fall back approach
• Plotly output generated with 'notebook' renderer not shown after re-opening notebook #6404
  • Problem with vscodes built-in amd module.
  • Embedding require.js into the generated HTML works.
  • Executing the cell works
  • In both cases we do not use vscodes built in amd module
• Unable to render Altair plot using boxplot on repeat with mimetype #8016
  • Seems to be a problem with the renderer extension, works in JLab,
  • Dump nteract
  • TODO: Still to figure out whats wrong here
• Unable to save vega plots #11291
  • Dump nteract
• Vega plots rendered in VS Code are not aware of the themes #11292
  • Dump nteract
• Vega, Plotly & Altair renderers generate image outputs and add that to ipynb #11293
  • Updating the output again could cause the rendered vega plot to review to png. we might not want this.
  • Discuss with team.
• Some actions in vega viewer do not work #11294
  • Dump nteract

Suggestions

• Load vega from user scripts folder and fall back to renderers
  • Why?
  • If users have a new/custom version of vega installed, then we use that instead of what we ship.
  • We've run into this for plotly, where users have latest version of plotly but we ship an older version of plotly.
  • Similarly this could apply to users who have custom (older) versions and want to use that instead of the latest version.

[DonJayamanne]

Summary of discussion for issue 'Support Vega'

• Todo for @mjbvz
  • Update js renderer to evaluate the js code in a private scope
  • Add API to transform the JS code, e.g. transform_function(originalJsCode): Promise<....>
• Jupyter extension could try (todo for @DonJayamanne )
  • Creating a custom renderer that extends the js renderer by providing the transformed js code
  • This could then also communicate back with the extension host,
  • This way the render will wait for widget scripts to load completely before rendering the js

Summary of discussion for issue 'Plotly output generated... not shown after re-opening notebook

• Problem seems to be with the built-in amd module.
• Using require.js to overwrite vscodes amd module seems to fix this.

[DonJayamanne]

Closing this issue as we've resolved #6404
And other remaining issues can be handled separately.
Nothing to verify here, please review #6404