How to propagate value from React to Observable without application freezing

Community Help
1

I have the following notebook that I am trying to embed into a React application:

I would like to provide a way to set the value of viewOrder from a React component (e.g. slider or text input). In the notebook, the value of viewOrder is defined via an Inputs widget:

viewof viewOrder = Inputs.range([1, Math.min(baseOrder, 7)], {
  step: 1,
  value: 6,
  label: "Hilbert curve order"
})

I am using the “Observable Example: React + Dataflow” sample code as the basis for what I am trying to do:

With the following useEffect function, the sample React application loads fine:

  ...
  // Propagate state from React to Observable.
  useEffect(() => {
    if (module !== undefined) {
      console.log(`width ${width} | height ${height} | chromosome ${chromosome} | viewOrder ${viewOrder}`);
      module.redefine("viewportWidth", width);
      module.redefine("viewportHeight", height);
      module.redefine("chromosome", chromosome);
      // module.redefine("viewOrder", viewOrder);
    }
  }, [width, height, chromosome, viewOrder, module]);
  ...

However, once I uncomment:

module.redefine("viewOrder", viewOrder);

the application freezes, CPU goes to 100%, and I have to close the tab and stop the yarn session.

What is special about viewOrder that prevents me from setting it via React, and what can I do to resolve this?

On the React end, this is the code used to view and set viewOrder:

<div className="sandboxControl">Hilbert curve order: <input type="number" value={viewOrder} onChange={e => setViewOrder(e.target.value)} /></div>

It is just a number from 1 to 7 (for the default chromosome)

2

viewOrder is a generator cell / variable that is coupled with the variable viewof viewOrder which references the DOM element. It updates when the element dispatches an input event.

I’m not familiar with React, but I’d expect the process to look something like this:

const input = await module.value('viewof viewOrder');
input.value = newValue;
input.dispatch(new Event('input'));