Using with Hydrogen?

[amellnik]

Is there any known way to use this with Hydrogen? Plots appears as zero-size divs at the moment although the plotly.js code is successfully injected into the div:

    window.PLOTLYENV=window.PLOTLYENV || {};
    window.PLOTLYENV.BASE_URL="https://plot.ly";
    require(['plotly'], function(Plotly) {
        Plotly.newPlot('c8a0a161-fc86-4455-95c8-3e7755ec5533', [{"type":"scatter","y":[0,2,3,5],"x":[1,2,3,4],"fill":"tozeroy"},{"type":"scatter","y":[3,5,1,7],"x":[1,2,3,4],"fill":"tonexty"}],  {"margin":{"r":50,"l":50,"b":50,"t":60}}, {showLink: false});

    });

One error does appear in Atom's js console (details here):

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-JcP1jIzEcYyg9SEbIMaZiK06NuPMRfPxz5nmE1EGXEM='), or a nonce ('nonce-...') is required to enable inline execution.
(anonymous function) @ result-view.coffee:138
kernel.coffee:217 shell message: Message {idents: Array[0], header: Object, parent_header: Object, metadata: Object, content: Object…}

I'll start looking into this, but opening this issue in case someone else has already figured this out.

Also: Discovering this package has been the highlight of my week. Thanks!

[sglyon]

Glad you like the package!

There are some issues with loading up external javascript into atom. I think @MikeInnes might know the most about this, so I'll ping him here and hope he can offer some more expertise.

I think once we solve this problem we will have this in both Hydrogen and Juno, which will be great.

[MikeInnes]

Yeah I can probably save you some time here. One easy way to get around this is to walk the result HTML and evaluate the content of script tags via require('vm').runInThisContext(...). However, this isn't enough to get Plotly/Vega working because each of those libraries also calls some variant of eval, which is blocked. Theoretically one can get around that with this but I never had any luck.

My best (untested) idea right now is to load Plotlyjs via a <script src="..." /> tag and then use the above hack to actually render the plots.

[fasiha]

Is it possible to just visualize the plots in a Blink/Electron window outside of Atom, the way PlotlyJS does with command-line Julia?

I like using Hydrogen for interacting with code, but I don’t mind doing my data visualization independent of Atom, e.g., in a pop-out window. The in-Atom non-interactive PNG files that PyPlot produces aren’t really worth much for me.

[sglyon]

This worked for me.

using PlotlyJS

p = plot(scatter(y=randn(10)))
display(ElectronPlot(p))

I think the tricky part is that PlotlyJS.jl tries to detect if jupyter is being used and if so it will default to trying to display plots in the notebook. In this case hydrogen does use the Jupyter kernel (Julia), but not from within a notebook. We need a way in IJulia.jl to determine if Jupyter is being run from in a notebook or elsewhere and then we can default to electron windows if we aren't in the notebook.