deck.gl in anywidget

[cornhundred]

Hi, I would like to try to use deck.gl in anywidget. Would you have any advice on how to go about doing this?

[cornhundred]

Would it be possible to modify this confetti example

import anywidget

class ConfettiWidget(anywidget.AnyWidget):
    _esm = """
    import confetti from "https://esm.sh/[email protected]";

    export function render({ model, el }) {
      let btn = document.createElement("button");
      btn.classList.add("confetti-button");
      btn.innerHTML = "click me!";
      btn.addEventListener("click", () => {
        confetti();
      });
      el.appendChild(btn);
    }
    """
    _css="""
    .confetti-button { background-color: #ea580c; }
    .confetti-button:hover { background-color: #9a3412; }
    """

ConfettiWidget()

to use this url https://esm.sh/[email protected]

I'm experimenting using this Colab notebook

[manzt]

I usually refrain from debugging JavaScript issues unrelated to anywidget itself. However, being a fan of deck.gl, I let my curiosity get the best of me.

Your problem seems to be importing deck.gl as a valid ESM via esm.sh. For whatever reason, deck.gl isn't packaged correctly to work with esm.sh out of the box. However, there are ways to parameterize esm.sh to control what is sent to the browser. I recommend familiarizing yourself with their docs if you plan to use this CDN.

I was able to resolve this issue by adding ?bundle to have esm.sh pre-bundle all dependencies into a single JS file on the server (rather than relying in native imports).

import anywidget
import traitlets

class DeckWidget(anywidget.AnyWidget):
    _esm = """
    import { Deck, ScatterplotLayer } from 'https://esm.sh/[email protected]?bundle';
    export function render({ model, el }) {
        let root = document.createElement("div");
        root.style.height = "300px";
        let deck = new Deck({
          parent: root,
          controller: true,
          initialViewState: { longitude: -122.45, latitude: 37.8, zoom: 15 },
          layers: [
            new ScatterplotLayer({
              data: [{ position: [-122.45, 37.8], color: [255, 0, 0], radius: 100}],
              getFillColor: d => d.color,
              getRadius: d => d.radius
            })
          ],
        });
        el.appendChild(root);
        return () => deck.finalize();
    }
    """

Screen.Recording.2023-07-19.at.5.22.18.PM.mov

I'd like to keep these GitHub issues dedicated to surfacing bugs with anywidget, rather than for debugging custom JavaScript or dependencies. I've provided a detailed answer in this case with the hope that it can serve as a reference for others.

[cornhundred]

cool thanks!

[cornhundred]

@manzt , I'm also having trouble importing d3.js but I can bring that up on the d3 repo and link it here for reference.

d3/d3#3740

[manzt]

what version of d3? i have a section in the docs that imports d3 from esm.sh

[manzt]

https://anywidget.dev/blog/introducing-anywidget/#ecmascript-modules-to-the-rescue

[cornhundred]

Thanks @manzt, that worked!

import anywidget

class D3Widget(anywidget.AnyWidget):
    _esm = """

    import * as d3 from "https://esm.sh/d3@7";

    export function render({ model, el }) {

    console.log('something')
    console.log(d3)

    }
    """
    _css="""
    """

D3Widget()