RequireJS issue for .NET interactive extension

Description

Whilst implementing an extension which registers two different HTML formatters for two different .NET object types, there seems to be an issue that affects the display of just one of these.

The two formatters are Plotly (which works) and HighCharts (which fails to display). The difference between the two may be to do with the fact that HighCharts is an AMD module whereas Plotly is a standard JS source file.

The code that is being generated in the output cell for Plotly is the following:

    <div id="c9ccbb5a-cd84-4910-bf93-a12e384da6ea" style="width: 900px; height: 500px;"></div>

    <script type="text/javascript">
        var renderPlotly = function () {
            var iplotRequire = require.config({ context: 'iplot', paths: { plotly: 'https://cdn.plot.ly/plotly-1.49.2.min' } }) || require;
            iplotRequire(['plotly'], function (Plotly) {
                var data = [{ "y": [1.2, 3.1, 0.4], "mode": "markers", "type": "scatter" }];
                var layout = { "width": 900.0, "height": 500.0 };
                Plotly.newPlot('c9ccbb5a-cd84-4910-bf93-a12e384da6ea', data, layout);
            });
        };
        // ensure `require` is available globally
        if ((typeof (require) !== typeof (Function)) || (typeof (require.config) !== typeof (Function))) {
            let require_script = document.createElement('script');
            require_script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js');
            require_script.setAttribute('type', 'text/javascript');

            require_script.onload = function () {
                renderPlotly();
            };

            document.getElementsByTagName('head')[0].appendChild(require_script);
        }
        else {
            renderPlotly();
        }
    </script>

This works just fine in the notebook. The equivalent for HighCharts is:

    <div id="f0836d2a-0ba4-43f1-8c21-658032d33ae8" style="width: 900px; height: 500px;"></div>

    <script type="text/javascript">
        var renderHighCharts = function () {
            var iplotRequire = require.config({ context: 'iplot', packages: [{ name: 'highcharts', main: 'highcharts' }], paths: { highcharts: 'https://code.highcharts.com' } }) || require;
            iplotRequire(['highcharts'], function (Highcharts) {
                Highcharts.chart('f0836d2a-0ba4-43f1-8c21-658032d33ae8', { "chart": { "height": 500.0, "width": 900.0 }, "series": [{ "type": "scatter", "index": 0.0, "data": [1.2, 3.1, 0.4], "legendIndex": 0.0, "stack": 0.0, "xAxis": 0.0, "yAxis": 0.0, "zIndex": 0.0 }], "title": { "text": "" } });
            });
        };
        // ensure `require` is available globally
        if ((typeof (require) !== typeof (Function)) || (typeof (require.config) !== typeof (Function))) {
            let require_script = document.createElement('script');
            require_script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js');
            require_script.setAttribute('type', 'text/javascript');

            require_script.onload = function () {
                renderHighCharts();
            };

            document.getElementsByTagName('head')[0].appendChild(require_script);
        }
        else {
            renderHighCharts();
        }
    </script>

Although very similar to the Plotly extract, this HighCharts extract doesn’t work in the notebook. The difference in the RequireJS config (i.e. the use of the packages field) is due to the AMD module API support from HighCharts.

If you wrap these in html cladding you can check that both do indeed work correctly when running as raw HTML/JS in the browser, so the difference appears to be coming from the notebook context.

Environment

.NET Interactive Version: 1.0.216102+74efcc062935e1051b22671db4250bd855402d96

• OS
  • [x ] Windows 10
  • macOS
  • Linux (Please specify distro)
  • iOS
  • Android
• Browser
  • [ x] Chrome
  • Edge
  • Firefox
  • Safari
• Frontend
  • Jupyter Notebook
  • Jupyter Lab
  • nteract
  • [ x] Visual Studio Code
  • Visual Studio Code Insiders
  • Other (please specify)

Any help greatly appreciated!

[colombod]

@malisimo How about building a nice extension for .NET Interactive?

[colombod]

This is brilliant, would be cool to do some tutorial to show the power of your extension!

Dr Diego Colombo PhD

On 11 Apr 2021, at 22:33, matt @.***> wrote:

Thanks you so much @colombod - indeed it works! Yes I’ve created a new extension for rendering HighCharts and Plotly visualisations in .Net Interactive, called IPlot.

#r “nuget: IPlot, 0.0.1” #r “nuget: IPlot.Interactive, 0.0.1”

open IPlot.HighCharts

[1.2;3.1;0.4] |> Chart.Line Hope it is of use! =)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.