Plotly and HTML Widgets not working in VSCode

[neomantra]

I was working to add go-echarts support for GoNB -- and was using VSCode to do so. Nothing was coming up and I was confused, but then I realized I should try out the Plotly integration first.

It ends up that the Plotly integration, along with the HTML widgets, do not work in VSCode (v1.87.2 on OSX). Simple HTML like the "I ❤️ GoNB!" work fine. The SVG, images, and text input widgets also work in VSCode, but noting that the Text Input ends up via a VSCode command palette-style.

These do work on my system using inside the Docker-based Jupyter notebook within a web browser.. ,except the Animated Widget appears but doesn't seem to do anything? So I'll continue trying out Echarts there and see how it goes.

This is what the output looks like, with an empty cell and then a cell that echos some code:

I can push on this more with some guidance. Thanks for this great tool!!

[janpfeifer]

So, I don't use VSCode -- but my plan for this weekend is to install and try it, since there has been a few bugs reported.

Now it seems nothing that depends on javascript is working on VSCode.

Would you mind checking whether the following works in VSCode ?

import "github.com/janpfeifer/gonb/gonbui"

%%
gonbui.ScriptJavascript("alert('hello world!');")

Does it trigger a pop-up window in VSCode ?

And if that works, does the following work as well ?

import "github.com/janpfeifer/gonb/gonbui"

%%
gonbui.DisplayHtml("<script>alert('hello world!');</script>\n")```

cheers, and thanks in advance!

[janpfeifer]

Btw, Apache ECharts and go-echarts look really cool also!!

Let me know if you need some help.

I'm expecting it to work +/- easy, just like Plotly did (being a Javascript library).

Btw, just today I committed to HEAD a change to make the Plotly plots exportable from the notebook to HTML -- but I haven't yet cut a new release. Maybe we can do a new release with go-echarts support when you get it in ?

[neomantra]

I ran your tests... the ScriptJavascript seemed to also show the text alert('hello world!'); in the cell output. The DisplayHTML did do something, showing a VSCode Notification in the lower right corner.

Picture:

[neomantra]

Apache ECharts is significantly a JSON-specified chart library, so it works great with Go's JSON marshalling -- go-echarts is largely Golang class bindings to compose these JSON objects and then inject them into an HTML document via templating. Combined with embed to easily integrate JavaScript code back into it, it can be pretty powerful.

I finally got a chance to try this out in the dockerized GoNB Jupyter Web page... the following fragment works properly! It is the go-echarts README sample with a simple modification with gonbui the bottom! I'll keep playing with it :)

import (
	"math/rand"
	"os"

	"github.com/go-echarts/go-echarts/v2/charts"
	"github.com/go-echarts/go-echarts/v2/opts"
	"github.com/janpfeifer/gonb/gonbui"
)

// generate random data for bar chart
func generateBarItems() []opts.BarData {
	items := make([]opts.BarData, 0)
	for i := 0; i < 7; i++ {
		items = append(items, opts.BarData{Value: rand.Intn(300)})
	}
	return items
}

%%
// create a new bar instance
bar := charts.NewBar()
// set some global options like Title/Legend/ToolTip or anything else
bar.SetGlobalOptions(charts.WithTitleOpts(opts.Title{
    Title:    "My first bar chart generated by go-echarts",
    Subtitle: "It's extremely easy to use, right?",
}))

// Put data into instance
bar.SetXAxis([]string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"}).
    AddSeries("Category A", generateBarItems()).
    AddSeries("Category B", generateBarItems())

// Where the **GoNB** magic happens
var buffer bytes.Buffer
bar.Render(&buffer)
gonbui.DisplayHTML(buffer.String())
defer gonbui.Sync()

[janpfeifer]

That looks really great!! And it's great that it works in vanilla JupyterLab notebook -- which reinforces my suspicion that VSCode is not friendly to Javascript in its notebook. I'll have to check later.

Question: does the HTML content generated by bar.Render(&buffer) contains Javascript, and in particular pulling of an external third-party library (with <script src="..."> or using RequireJS) ?

I ask this, because if it does, then it may be tricky to get it right for then having the plots properly exported to HTML -- not sure you care about that.

This week I'm slowly fixing (it's submitted in HEAD now, no release yet) issues with HTML exporting for the Plotly installation -- see plotly code here and some of the underlying Javascript magic in LoadScriptOrRequireJSModuleAndRun. There are also the "transient" version: notebooks can have "transient" HTML/Javascript content that doesn't get saved, usually used for things that are dynamically updated while the program is running -- e.g.: I use this to display dynamic Loss/Accuracy plots while doing ML training.

[neomantra]

Yes, it renders it from a template that includes this header.tpl. I was pulling on some of those gobunui functions when I was hopelessly trying to get it to work in VSCode. I expect some new template / shim will be created to maximize integration, but it shouldn't be too bad.

As I'm understanding the problem better, I see that VSCode has a specific Extension to enable rendering of Plotly and other content within the confines of its Jupyter extension. I'll peek at that more.

Edit To Add: here are its supported MIME types, with multiple plotly ones, so while HTML output is very useful, you might find that emitting whatever that expects is a better path for Plotly. I'll try to understand how that applies to ECharts.

[janpfeifer]

hi @neomantra ,

I added a doc on VSCode support for GoNB. But I confess I'm still figuring it out.

Somehow after I installed Polyglot extension, Javascript output started working -- not sure if it is because of Polyglot or some other reason. And with that Plotly simply worked as well:

Did you manage to use it ?

I never tried the Jupyter Notebook Renderes, I actually wonder what that is ... I mean, which protocol is needed to talk to it, that is different than the standard Juptyer.

I'll try to create a small wrapper for go-echarts later today or tomorrow.

[neomantra]

I installed the Polyglot Notebook extension, if I select ".NET Interactive" as the kernel, then each Code section has an option for one of the supported languages, but Golang is not there. Hopefully there's some traction on your issue!

I then tried that latest gonb as a kernel and I'm still not getting Plotly to work. I also tried with VSCode Insiders, and also messed with trust and other things. BTW, I'm on OSX.

Thanks for the docs -- putting corrected link for any newcomers:
https://github.com/janpfeifer/gonb/blob/main/docs/VSCode.md

I think the Jupyter Notebook Renderers are the components that the Jupyter extension itself uses. Although I made an IPython kernel a long time ago, I'm not familiar with the modern dataflow. From the Renderers GitHub page, it seems to look at the MIME type and render it appropriately? Did you muck with the MIME types of the Plotly output at all, maybe that's why it is working?

[neomantra]

Noting some of my recent education:

• vscode-jupyter wiki: IPyWidgets (a lot going on!)
• vscode-jupyter wiki: React WebViews: Variable Viewer, Plot Viewer, and Data Viewer
• vscode Extension Notebook API Renderer

[janpfeifer]

Thanks for the added info.

So, gonbui (the displaying package) does send the correct mime-type for Javascript and HTML.

Now vscode-notebook-renderers creates a few new mime-types, for instance for Plotly it creates text/vnd.plotly.v1+html, probably coupled with a specialized renderers. To support it I would need to create a specialized plotly.DisplayVscodeRenderer function (maybe I should?), but it won't work for go-echarts for instance :(

Ultimately, the renderer has to call Plotly's javascript library to display.

What I haven't understood yet is why VSCode blocks the mime-type text/javascript (gonbui.ScriptJavascript("alert('hello');") doesn't work). Instead, one can add javascript within an HML block (gonbui.DisplayHtml("<script>alert('hello');</script>") works) -- but sometimes not and I haven't figure out !?

The current (HEAD) wrapper of Plotly does embed the javascript in an HTML block (unwittingly made this change for other reasons), maybe that's why it's working in VSCode now. Btw, can you try adding an equivalent for you of the following cell:

!*go mod edit -replace github.com/janpfeifer/gonb=${HOME}/Projects/gonb

This will make sure it picks up the HEAD version of gonbui, that uses DisplayHtml as opposed to ScriptJavascript.

[janpfeifer]

So I created a new v0.10.0 release with the new Plotly that should work in VSCode. Let me know if it doesn't!

I'll try to add go-echarts support next, and make Widgets work in VSCode -- hopefully they will make into v0.10.1 release (maybe next weekend?).

[neomantra]

Happy to report that the Plotly tutorial example works for me using latest! (6c87a1e). As expected, the widgets tutorial and and examples/test are spinning. Great progress, thank you!!

[janpfeifer]

Btw, I did a quick initial stab at it, in github.com/janpfeifer/gonb-echarts.

It does require the HEAD version of gonbui because it fixes an important bug. Next weekend I'll release v0.10.1 with the fix.

[janpfeifer]

Ok, new version v0.10.1 of GoNB is pushed, and github.com/janpfeifer/gonb-echarts@v0.1.0 improves ECharts support quite a bit.

Checkout the examples, it's pretty cool!

I also tested in VSCode and the examples seem to be working (except one, but I think it's an issue upstream).

Pls, let me know if all is good on your side and I'll close the issue -- or fix if anything goes wrong.

[neomantra]

Very nice work on the Echarts integration! The examples are working for me. I love the GeoMap example, I'll try adding a gonb-echarts example to my go-openchargemap project, a Golang project using Python notebooks for tutorial. I'll continue exploring these GoNB-oriented workflows...

Per the initial issues, Plotly is now working in VSCode and you've well documented how everything is expected to behave. So I'll close the issue. Thanks for all this great work, it is impactful! 🙏 ❤️

[janpfeifer]

Cool, if you have a GoNB example with go-openchargemap and ECharts, pls share, I'd love to add it to the examples page.