Hydrogen: Support VegaLite4 (needs to circumvent CSP)

[rpalloni]

Prerequisites

I've searched a lot and checked and asked many times, see:
https://github.com/altair-viz/altair/issues/765
https://github.com/nteract/hydrogen/issues/1771

Description

I'm in hydrogen 2.14 / atom 1.44 / Ubuntu 18.04 / python 3.7 / altair 4 and I cannot plot images with this code:

import altair as alt
from vega_datasets import data
cars = data.cars()

fig = alt.Chart(cars).mark_point().encode(
x='Horsepower',
y='Miles_per_Gallon',
color='Origin',
).interactive()

fig

-- fig.to_dict() data are in!

I only get an empty square with no image.
In Jupyter it is working properly.

What should I do? Which versions combo does work?
Thanks

[aviatesk]

Try apm dev Hydrogen and restart Atom, and report back to us whether it works.

[rpalloni]

Apparently nothing changed and I still have Hydrogen 2.14.0 in packages. Should I uninstall this version?

[aviatesk]

yes uninstall it and then install Hydrogen on master branch.

[rpalloni]

Uninstalled Hydrogen 2.14.0
apm dev Hydrogen
atom -d
Still same result with empty plot

[aviatesk]

okay, I _think_ I have a fix but can't push it right now because I'm on vacation.
Will ping you again when I get connection 😊

[aviatesk]

@rpalloni can you try with the current master and report back to me ?

[rpalloni]

May I ask you to tell me the exact commands to remove the previous dev master. I'm not fully convinced I'm doing it right..I still see the friday version.

[aviatesk]

If you're with default Atom configuration:

> apm uninstall -d Hydrogen
> cd ~/github
> rm -rf Hydrogen
> apm dev Hydrogen
> atom -d

or you can manually clone this repository and install from it:

> git clone https://github.com/nteract/hydrogen/
> cd Hydrogen
> apm install
> apm link --dev

[rpalloni]

I still get the empty plot and this is the error in the dev tools

Refused to execute inline hydrogen/node_modules/@nteract/outputs/lib/components/media/html.js:46
script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'".

[aviatesk]

ah, CSP error again ... I guess there's a way to circumvent this, but I don't have a time to find this right now.
If anybody interested in this, I would really appreciate if you search another issues/PRs that tried to handle a CSP error (some were resolved and the others still remain) and report back to us or even fix it.

[torresweb]

Hello, I have the same problem. I've just updated Hydrogen but I can't plot a altair chart.
is there a way to circumvent this?

[qchenevier]

Workaround

@torresweb I've found a workaround in 2 steps:

1. Downgrade to Hydrogen v2.10.3. Type this in your shell:

$ apm remove hydrogen
$ apm install [email protected]

1. Use vegalite2 as altair backend. Use this in your python script:

import altair.vegalite.v2 as alt

---

How to fix (maybe)

For anyone willing to fix this, here is some info I've found:

• relevant thread & posts on atom's forum showing a loophole to CSP of atom
• example of commit using the atom loophole
• npm package of the atom loophole. It seems to be an official loophole made by atom's team itself.

[jballesterosc]

I also tried to solve this by downgrading but didn't help at all. Is there a new solution?

[qchenevier]

I also tried to solve this by downgrading but didn't help at all. Is there a new solution?

@jballesterosc I no longer use altairrendering in atom/hydrogen anymore. Too painful to maintain a downgraded version of hydrogen & altair to get it working.

I got used to save altaircharts in html & open it in a browser (e.g: side by side with atom).

The downside is that you lose the interactivity of the jupyter REPL: when you change your code, you need to refresh manually the page in your browser (bleh 😒). To fix that, you can launch a tiny HTML server which will watch for file changes and reload the page automatically. For that, I use the reload npm package, which you can use in your CLI simply with:

reload -b -s YOUR_ALTAIR_OUTPUT_FILE.html

And the upsides are that you have a bigger display output area than with a jupyter cell & you work directly on a deliverable that you can share by email.

Not a technical solution, but a good workaround for me (maybe even better in terms of productivity, in the end).

[jballesterosc]

@jballesterosc I no longer use altairrendering in atom/hydrogen anymore. Too painful to maintain a downgraded version of hydrogen & altair to get it working.

@qchenevier I also gave up for good. I just decided to transition my notebooks to VSCode.

Thank you for your insight!