ECharts can not be displayed in VSCode (and GitHub)

[maxandersen]

trying to get echarts working with dflib: https://github.com/jupyter-java/jupyter-java-examples/blob/main/notebooks/java-dflib-echarts.ipynb

import org.dflib.echarts.*;

DataFrame df = DataFrame.foldByRow("name", "salary").of(
                "J. Cosin", 120000,
                "J. Walewski", 80000,
                "J. O'Hara", 95000)
        .sort($col("salary").desc());

var chart = ECharts
        .chart()
        .xAxis("name")
        .series(SeriesOpts.ofBar(), "salary")
        .plot(df);

        chart;

See that it does generates a html/text output cell with:

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js'></script>
<div id='dfl_ech_98' style='width: 600px;height:400px;'></div>
<script type='text/javascript'>
    var chart_dfl_ech_98 = echarts.init(
        document.getElementById('dfl_ech_98'),
        null,
   );
    var option_dfl_ech_98 = {
        dataset: {
            source: [
                ['L0','J. Cosin','J. O\'Hara','J. Walewski'],
                ['salary',120000,95000,80000]
            ]
        },
        xAxis: [
        {
            type: 'category'
        },
        ],
        yAxis: [
        {
            type: 'value'
        },
        ],
        series: [
            {
                name: 'salary',
                encode: {
                    x: 0,
                    y: 1,
                },
                seriesLayoutBy: 'row',
                type: 'bar'
            },
        ]
    };
    option_dfl_ech_98 && chart_dfl_ech_98.setOption(option_dfl_ech_98);</script>

but i cant get that to render in vscode jupyter notebook nor in github notebook preview.

[andrus]

Every now and then it renders in VSCode, but that's entirely unpredictable and most often it doesn't work.

[andrus]

From a simple fix this turned into something much bigger. So...:

1. jupyter lab in the browser. Charts work. Very rarely may require to re-execute a cell. We have a fix to make it more robust, but can't even reproduce the original issue as it is not that common.
2. GitHub doesn't allow even the simplest local JS from a notebook output to be executed.
3. VSCode can exec JS and can load external JS files. But the rendering doesn't work most of the time (it does sometimes).

The reason Kotlin Kandy works in cases 2 & 3 is that the rendering seems to be done server-side and there are embeded SVGs in the .ipynb. Our rendering is 100% client-side, so we need JS to work. So GitHub will continue to show an empty cell (actually a properly sized div, just without a chart 🙂 ) until we can switch to server-side rendering somehow. I am not giving up on VSCode just yet, but need to figure out how to debug JS execution within the notebook (e.g. how do I check the console logs)

[andrus]

Ok, getting somewhere with VSCode. There's a "Jupyter Notebook Renderers" extension from Microsoft. If I disable it and restart VSCode, the charts start rendering. I suspect it loads some conflicting JS libraries. It will need further investigation, but at least we know where to look

[maxandersen]

can confirm that disabling that notebook renderer extension makes it work for me.

that is unfortunate as it provides lots of other nice renderers.

[maxandersen]

whats weird though is that notebook renderer isn't supposed to affect text/html...

[maxandersen]

using developer tools I took a snapshot to spot the diff with and without the rendering.

With jupyter notebook rendering there are two iframes - one nested in another.

<iframe title="Notebook webview content" id="active-frame" frameborder="0" sandbox="allow-same-origin allow-pointer-lock allow-scripts allow-downloads allow-forms" allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write;" src="./fake.html?id=e072ef26-2ba7-4d84-b3ad-fb750abe502c" style="display: block; margin: 0px; overflow: hidden; position: absolute; width: 100%; height: 100%; visibility: visible;"><iframe title="Notebook webview content" id="active-frame" frameborder="0" sandbox="allow-same-origin allow-pointer-lock allow-scripts allow-downloads allow-forms" allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write;" src="./fake.html?id=e072ef26-2ba7-4d84-b3ad-fb750abe502c" style="display: block; margin: 0px; overflow: hidden; position: absolute; width: 100%; height: 100%; visibility: visible;"></iframe></iframe>

without its just one iframe and all is good.

<iframe title="Notebook webview content" id="active-frame" frameborder="0" sandbox="allow-same-origin allow-pointer-lock allow-scripts allow-downloads allow-forms" allow="cross-origin-isolated; autoplay; clipboard-read; clipboard-write;" src="./fake.html?id=e3ba66ab-defd-4f6f-b7f8-2685594c9154" style="display: block; margin: 0px; overflow: hidden; position: absolute; width: 100%; height: 100%; visibility: visible;"></iframe>

[andrus]

Aha. I am not much of a VSCode user, so I was unsure how to even debug the HTML/JS involved. Thanks for the hint about developer tools. We'll see if we can do anything about it from our end.

[Vladiimir]

I've made investigation of echarts rendering issue in vscode. I would like to share my conclusions.
When we download js with html tag <script src=".../echarts.js"> echarts object is stored in the window global object.
But when Jupyter Notebook Renderers plugin is enabled it affects window object and delete window.echarts property. It causes the error.
If use requireJS for loading echarts.js it loads script to local context and and after that i can set it to window.echarts property and this manipulation allows to walk around conflict with renderers plugin

`

    // Config for RequireJS
    require.config({
           paths: {
                'echarts': 'https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min'
           }
    })    

    // Using require.js for loading echarts
    require(['echarts'], function(echarts) {
            window.echarts = echarts;
            ........init echarts and setOption............
   });

`

For now I'm trying to find some solution that doesn't need additional js library as requireJS is.

[Vladiimir]

This script works with Notebook Renderers Plugin and without it. JS script is in text/html field.

require-and-tag.txt