Attempting to use wasmConnector in React causes stack range exceeded

[sanghoonio]

The following component does not work.

import { useEffect, useRef } from 'react';
import * as vg from "@uwdata/vgplot";
import data from 'vega-datasets';

const VGPlotChart = () => {

  const chartRef = useRef(null);
  const chartRef2 = useRef(null);

  useEffect(() => {
    const createChart = async () => {

      const penguins = await data['penguins.json']();

      vg.coordinator().databaseConnector(vg.wasmConnector())
      vg.coordinator().exec([
        vg.loadJSON('penguins', penguins)
      ]);

      const $xs = vg.Selection.intersect();
      const $ys = vg.Selection.intersect();
      const $zs = vg.Selection.intersect();

      const $filter = vg.Selection.single();
      const $highlight = vg.Selection.intersect();


      $filter.addEventListener('value', (event) => {
        console.log('$filter value:', $filter);
      });

      $highlight.addEventListener('value', (event) => {
        console.log('$highlight value:', $highlight);
      });

      const plot = vg.plot(
        vg.dot(
          // penguins,
          vg.from('penguins', {filterBy: $filter}),
          {x: "Body Mass (g)", y: "Flipper Length (mm)", fill: "Species", r: 2, clip: true}
        ),
        vg.intervalXY({as: $filter}),
        // vg.panZoom({x: $xs, y: $ys}),
        vg.toggleX({as: $filter}),
        vg.toggleX({as: $highlight}),
        vg.highlight({by: $highlight}),
        vg.width(400),
        vg.height(300)
      )

      const plot2 = vg.plot(
        vg.dot(
          // penguins,
          vg.from('penguins', {filterBy: $filter}),
          {x: "Body Mass (g)", y: "Beak Length (mm)", fill: "Species", r: 2, clip: true}
        ),
        vg.intervalX({as: $filter}),
        // vg.panZoom({x: $xs}),
        vg.toggleX({as: $filter}),
        vg.toggleX({as: $highlight}),
        vg.highlight({by: $highlight}),
        vg.width(400),
        vg.height(300)
      )

      chartRef.current.replaceChildren(plot);
      chartRef2.current.replaceChildren(plot2);
    };

    createChart();
  }, []);

  return (
    <div >
      <div className='border rounded p-2 m-2' ref={chartRef}></div>
      <div className='border rounded p-2 m-2' ref={chartRef2}></div>
    </div>
  )
  
};

export default VGPlotChart;

Whenever I try using the wasmConnector to allow for filtering in browser without running a separate db instance, I get stack overflow issues. I'm not really sure how to fix this and the docs don't seem to go into setting coordinators up in React.

RangeError: Maximum call stack size exceeded
    at 08807eba:0xaa6be8
    at 08807eba:0xaa6c15
    at 08807eba:0xaa6beb
    at 08807eba:0xaa6c15
    at 08807eba:0xaa6beb
    at 08807eba:0xaa6c15
    at 08807eba:0xaa6beb
    at 08807eba:0xaa6c15
    at 08807eba:0xaa6beb
    at 08807eba:0xaa6c15

[jheer]

Looking at your code, my best guess is that there is an error in data loading. The loadJSON method is for loading JSON from a file, but here it looks like you are loading the JSON data in the browser first, then passing it to the method. I recommend that you try to instead pass the URL to the data, e.g., using const penguinsURL = data['penguins.json'].url;.

FYI, we have a basic React example (integrated into the Svelte example) in the Mosaic repo that is working fine for me locally: https://github.com/uwdata/mosaic/blob/main/packages/examples/svelte-example/src/react/Count.jsx

[sanghoonio]

Your suggestion worked, thank you. On an unrelated note, I found that having tooltips enabled makes it difficult to trigger a toggle selection (maybe 10% toggle success rate for a dot with a tooltip active). I don't think it's related to the tooltip positioning interfering with the dot, because the behavior remains even when setting the dot radius to something like 10 or translating aria-label="tip" farther from the point with CSS. While I can conditionally disable tooltips with a state variable to make toggle selections easier, from a user perspective it would be nice to see both a tooltip and be able to click on the point to select it. Are there any workarounds for this?

import { useEffect, useRef } from 'react';
import * as vg from "@uwdata/vgplot";
import data from 'vega-datasets';

const VGPlotChart = () => {

  const chartRef = useRef(null);
  const chartRef2 = useRef(null);

  const carsURL = data['cars.json'].url;

  useEffect(() => {
    const createChart = async () => {

      // const cars = await data['cars.json']();

      // vg.coordinator().databaseConnector(vg.wasmConnector())
      // vg.coordinator().exec([
      //   vg.loadJSON('cars', cars)
      // ]);
      
      const coordinator = vg.coordinator();
      coordinator.databaseConnector(vg.wasmConnector());
      
      await coordinator.exec([
        vg.loadJSON('cars', carsURL)
      ]);

      const $xs = vg.Selection.intersect();
      const $ys = vg.Selection.intersect();
      const $zs = vg.Selection.intersect();

      const $click = vg.Selection.single();
      const $range = vg.Selection.intersect();

      const plot = vg.plot(
        vg.dot(
          // cars,
          vg.from('cars', {filterBy: $click}),
          {x: "Miles_per_Gallon", y: "Horsepower", fill: "Origin", tip: true}
          // {x: "Miles_per_Gallon", y: "Horsepower", fill: "Origin"}
        ),
        vg.panZoom({x: $xs, y: $ys}),
        // vg.intervalXY({as: $range, brush: {fill: "none", stroke: "#888", }}),
        vg.toggle({as: $click, channels: ["x", "y"]}),
        vg.highlight({by: $range, fill: "#ccc", fillOpacity: 0.2}),
        vg.colorLegend({as: $range, columns: 1}),
        vg.width(400),
        vg.height(300)
      )

      const plot2 = vg.plot(
        vg.dot(
          // cars,
          vg.from('cars', {filterBy: $click}),
          {x: "Miles_per_Gallon", y: "Displacement", fill: "Origin", tip: true}
          // {x: "Miles_per_Gallon", y: "Displacement", fill: "Origin"}
        ),
        vg.panZoom({x: $xs}),
        // vg.intervalXY({as: $range, brush: {fill: "none", stroke: "#888", }}),
        vg.toggle({as: $click, channels: ["x", "y"]}),
        vg.highlight({by: $range, fill: "#ccc", fillOpacity: 0.2}),
        vg.colorLegend({as: $range, columns: 1}),
        vg.width(400),
        vg.height(300)
      )

      chartRef.current.replaceChildren(plot);
      chartRef2.current.replaceChildren(plot2);
    };

    createChart();
  }, []);

  return (
    <div >
      <div className='border rounded p-2 m-2' ref={chartRef}></div>
      <div className='border rounded p-2 m-2' ref={chartRef2}></div>
    </div>
  )
  
};

export default VGPlotChart;

[jheer]

Yes, this is a known problem due to how Observable Plot's pointer mechanism consumes input events.

• I filed an issue on Plot back in April 2024: Pointer interaction interferes with external event handlers observablehq/plot#2052
• There is a PR that should address it, but it hasn't been merged: let the pointer's pointerdown event propagate observablehq/plot#2267

Please feel free to chime in on these issues indicating your support for a fix.