Best way to call function inside embedded notebook

Community Help
1

Hi! I’m new to using the Observable runtime and have run into a wall:
I have a notebook embedded into a vue app using this approach.

How can I run a function (cell) from inside Vue.js?
More specifically, I want to know if its possible to do something like this:

window.addEventListener("wheel", myNotebookFunc)

function myNotebookFunc(event){
// do something with event.deltaY
}

Tried following this example which redefines a notebook variable on window resize (I think): examples/index.html at main · observablehq/examples · GitHub

main.redefine("height", resizer(container, "height"));

// Rather making separate generators for width and height, here’s a generalized
// generator “factory” that watches the given dimension of the given element.
// (Note: depends on browser ResizeObserver support.)
function resizer(element, dimension) {
  return library.Generators.observe(notify => {
    let value = notify(element.getBoundingClientRect()[dimension]); // initial value
    const observer = new ResizeObserver(([entry]) => {
      const newValue = entry.contentRect[dimension];
      if (newValue !== value) {
        notify(value = newValue);
      }
    });
    observer.observe(element);
    return () => observer.disconnect();
  });

However, I can’t seem to adapt it to my use case.
Any ideas welcome :slight_smile:

2

I think what you’re looking for is:

const myNotebookFunc = await main.value("myNotebookFunc");

You can find the documentation for module.value() here: GitHub - observablehq/runtime: The Observable dataflow runtime.

3

Thanks @mootari!
So if my notebook has a cell that outouts a function like this:

function onWheel(event){
//do something with event.deltaY
}

I should be able to do something like this from Vue?

const onWheel = await this.main.value("onWheel");
window.addEventListener("wheel", onWheel);

Except this doesnt work.

I have another idea: I should be able to make the function depend on another cell and redefine the value of this cell, which would trigger the function call. This is something I should be able to do with module.redefine() right?
However, I cant seem to get to a working code to do that.

4

This works now. Problem was my notebook not importing correctly.

const onWheel = await main.value("onWheel");
window.addEventListener("wheel", onWheel);
1 Like