Performance Issues with Reactivity and deck.gl in Observable

[Lazywave]

Hi everyone,

I'm using deck.gl in Observable for an interactive map with two layers:

A geoJsonLayer for the base map.
An IconLayer on top, representing various locations (IXPs in my case).
I’ve enabled pickable: true on the IconLayer to interact with the icons. Specifically, I’m using the onClick property in the DeckGL definition to update a variable with the ID of the clicked icon. This variable is being passed into a plotting function like other Generators.input() variables.

To make this variable reactive, I wrapped the entire DeckGL definition in a Generators.observe. While this works, it introduces significant delays (screen updates occur about 500ms after clicking). The console also shows warnings like:

[Violation] 'requestAnimationFrame' handler took 1247ms  
[Violation] 'requestAnimationFrame' handler took 750ms  

Here’s a simplified version of my code for reference:

import deck from "npm:deck.gl";
// import { showIxpDetails } from "./components/my-scripts.js";
const {DeckGL, GeoJsonLayer, IconLayer } = deck;
const world_map = FileAttachment("./data/world-map.json").json()
const ixp_metadata = FileAttachment("./data/raw/metadata.json").json()
import { interpolateViridis } from "d3-scale-chromatic";
import { scaleSequentialSqrt } from "d3-scale";

Interactive Map

function showIxpDetails(data, ixp_id,{width} = {}) {
    const ixpData = data.filter(d => d.ixp_id === ixp_id);

    // Create an array of text entries from the data
    const textEntries = ixpData.map(d =>
      `ID: ${d.ixp_id}
    Name: ${d.name}
    Long Name: ${d.long_name}
    City: ${d.city}
    Country: ${d.country}
    Net Count: ${d.net_count}`
    );
    return Plot.plot({
      height: 200,
      width,
      marks: [
        Plot.frame({
            stroke: "black",
            strokeWidth: 2,
            dy: 250
        }),
        Plot.text(textEntries, {
          frameAnchor: "middle",
          textAnchor: "middle",
          fontSize: 25,
          dy: 250
        })
      ]
    });
}

// Layer definitions
const geoJsonLayer = new GeoJsonLayer({
    id: 'GeoJsonLayer',
    data: world_map,
    lineWidthMinPixels: 1.5,
    getFillColor: [160, 160, 180, 200],
    getLineColor: [255,255,255, 100],
    getLineWidth: 20,
});
const colorScale = scaleSequentialSqrt()
  .domain([0, 100])
  .range([0, 1]);
const ixpLayer = new IconLayer({
    id: 'ixpLayer',
    data: ixp_metadata,
    getColor: d => {
        const colorString = interpolateViridis(colorScale(d.net_count));
        const rgb = colorString.match(/[A-Za-z0-9]{2}/g).map(x => parseInt(x, 16));
        return rgb;
    },
    getIcon: d => 'marker',
    getPosition: d => [d.long, d.lat],
    getSize: 30,
    iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
    iconMapping: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.json',
    pickable: true
});

// Create an observable value for the selected IXP
const selected_ixp = Generators.observe(notify => {
  // Initialize with no selection
  notify(-1);
  
  const interactiveWorldMap = new DeckGL({
    container,
    initialViewState: {
      longitude: 0,
      latitude: 30,
      zoom: 1
    },
    controller: true,
    getTooltip: ({object}) => object && 
      `${object.name} (${object.long_name}) - ${object.net_count} Networks`,
    onClick: (info, event) => {
      if (info.object) {
        notify(info.object.ixp_id);
      }
    },
    getCursor: ({isHovering}) => isHovering ? 'pointer' : 'grab',
    layers: [geoJsonLayer, ixpLayer]
  });
  
  // Cleanup function
  return () => {
    interactiveWorldMap.finalize();
    container.innerHTML = "";
  };
});

<div class="grid grid-cols-3">
    <div class="card grid-colspan-2">
        <div style="padding: 1rem;">
          <h2>Worldwide IXPs</h2>
          <h3>Zoom and scroll, or hold down Shift to rotate.</h3>
        </div>
        <figure style="max-width: none; position: relative;">
          <div id="container" style="border-radius: 8px; overflow: hidden; height: 620px; margin: 0 0;">
          </div>
        </figure>
    </div>
    <div class="card grid-colspan-1">
    ${resize((width) => showIxpDetails(ixp_metadata, selected_ixp, {width}))}
    </div>
</div>

My Questions:

1. Is wrapping the entire DeckGL definition in Generators.observe the best way to handle reactivity here?
2. Are there alternative approaches to dynamically update the selectedIXP variable without re-rendering the entire map?
3. Any advice on addressing the performance issues or eliminating the requestAnimationFrame warnings?

I’d greatly appreciate any feedback or suggestions!

[Fil]

You can try to use setProps to update some elements dynamically. See https://observablehq.observablehq.cloud/pangea/party/deck.gl-map for an example.

[Lazywave]

Thanks for the suggestion! I don’t think setProps works in my case though. In the example, it’s used to update the layers or properties of the DeckGL instance. What I’m trying to do is update an external variable (selected_ixp) based on the onClick event of the map. Or am I misunderstanding something?

Here’s my specific scenario:

I have a variable, selected_ixp, which represents the currently selected Internet Exchange Point (IXP). This variable needs to update whenever the user clicks on an icon in the map (via the onClick event of the IconLayer).
The selected_ixp variable is an external state that needs to propagate changes outside of the DeckGL instance. It is not a property of the deck or its layers, so I don't think setProps applies here.
My current implementation with Generators.observe does work but I don't believe it's correct because of the slowdowns.
All I do is feed it into a function inside the HTML like this:
${resize((width) => showIxpDetails(ixp_metadata, selected_ixp, {width}))}

[Fil]

OK. As I understand it you're trying to use the deckgl instance as a input, and that's indeed not covered by my answer.

What you're describing makes me think that one of the upstream variables to this deckgl app gets updated indirectly when you interact with the app and update. The code you're sharing does not have obvious problems, but it depends on container, geoJsonLayer, ixpLayer… (and maybe more). Hard to tell without seeing the whole page.

[Lazywave]

Alright, I've edited my post to include the entire self-contained index.md file. I've noticed that the [Violation] 'requestAnimationFrame' handler took 750ms also appears in the console of the example you sent me, so maybe this is just something with deck-gl + Observable that isn't perfectly optimised. If there is anything you think it could be or if there is any more information you could use, please tell me! If not, I'll just keep my current implementation.

I just tested something that could potentially help:
If I log something inside the onClick event it resolves at the same time as the site updates. I.e. the delay (~0.5 seconds) happens between me physically clicking the mouse button and it "registering" it as a onClick event, not between running the onClick event and the page updating with the new variable information.

[Lazywave]

I have found the cause!
This seems to be the intended behaviour according to deck.gl devs as it has a delay "...so that the event doesn't fire when double clicking". Setting controller: {doubleClickZoom: false}, removes this delay.

Source: visgl/deck.gl#3783 (comment)