How to redefine a function with the runtime

Community Help
1

I got a notebook where when clicking on a specific element in the graph it is supposed to open a new tab with a calculated url. Works fine in the notebook. When embedding this notebook in a react app on a SAAS platform, I run into the issue that the SAAS platform does not allow this behaviour directly with the browser, but offers their own function.

I followed the example of overriding a cell value without the desired result.

The function in the nodebook looks something like this:

searchInGoogle = (word) => {
  let tab = window
    .open(
      `https://google.com/search/q?${word}`,
      word,
      "width=400,height=250"
    )
    .focus();
}

And the react code looks something like this:

import React, {useRef, useEffect} from "react";
import {Runtime, Inspector} from "@observablehq/runtime";
import notebook from "@user/wordmap";

function WordMap() {
  const mapRef = useRef();

  const alternativeFunction = (word) => {
    console.log("Catched the event of clicking on :"+word);
  }

  useEffect(() => {
    const runtime = new Runtime();
    const module = runtime.module(notebook, name => {
      if (name === "map") return new Inspector(mapRef.current);
    });
    module.redefine("searchInGoogle", alternativeFunction);
    return () => runtime.dispose();
  }, []);

  return (
    <>
      <div ref={mapRef} />
    </>
  );
}

export default FlowExplorer;

What am I missing?

1 Like
2

alternativeFunction is the cell’s value and must be wrapped in another function that defines the cell:

module.redefine("searchInGoogle", () => alternativeFunction);

I recommend to take a look at your notebook’s compiled module source to get a better sense of the expected structure. If your notebook is public you can also use this helper to browse its source and inputs.