Bind select input to a function

Community Help
1

Hi,
I am trying to reproduce a small application with JQuery bindings in an Observable notebook context. Not as easy as expected.

How to bind a select to a function ?
Bind to a function that is inside the cell where the SVG graph is built ?

I try to bind a select ‘Author’ to the same action I have from the SVG graph.

See: Author relationships / Patrick Brockmann | Observable

2

The application I try to reproduce in an Obserable context is available from:
https://webportals.ipsl.fr/ScientificApps/dev/forge_patrick/biblio_graph/

Notice the bindings between the select widget and the graph.
This is what I have some difficulties to reproduce.
Bindings in both way. From select Input to the svg graph and from it to set a select Input.

Any suggestion or reading of a notebook with such a behaviour would be welcomed.

3

I would create a set function on the graph, that accepts a name (string), and sets the value. And then a cell which calls this function with the selectedAuthor2’s name.

graph.set(selectedAuthor2.Name)

to create the set function, I would replace yield svg.node(); with:

  const set = (name) => click(null, json.nodes.find(d => d.name === name));
  yield Object.assign(svg.node(), {set});

and update the click function like so to avoid an infinite loop:

  function click(event, d) {
+  if (mutable selectedAuthor !==d) {
    mutable selectedAuthor = d;
    connectedNodes(d);
+  }
  }

A slightly better approach is described in Synchronized Inputs / Observable | Observable — but it would require more changes to your code, to make the graph work like an Input (without using mutable).

1 Like
4

Yes very impressive.
Some parts of the code are still obscur for me but you showed how to do it.
Many thanks @Fil

Small detail, I loose the focus once select a name.
Is there a way to keep it ?

5

I’m not sure where you lose the focus, but the root cause is certainly that the code is creating new charts, replacing them in the DOM?

It would work much better if you did not use the mutable, but instead added functions to update the charts in-place; but it’s a bit more work.

6

You loose the focus on the select once you have changed it.
Ok I will try to update the graph indeed.
Thank you very much.