Widget Groups in JS // reactivity in JavaScript files // Generators Push vs Pull // How to interact with Observable Runtime?

[skurfuerst]

Hey everybody,

first off, thanks SO MUCH for creating Observable. I'm right now building a dashboarding solution as Grafana alternative to visualize metrics from ClickHouse; and Observable Framework + Observable Plot are a GREAT combination ❤️ ❤️

One thing I am struggling with is that I want to create re-usable "widgets" (in JavaScript) which then can be used with a single function call.

For example, I built a combined Search + Table + Details widget as follows in Markdown using three JS blocks:

expand to see the full widget

// JS Cell 1: fetch data + display search input
const shopLogs = await clickhouse.query(...)
const shopLogsFiltered = view(Inputs.search(shopLogs, {placeholder: "Search shopLogs"}));

// JS Cell 2: display table
const shopLogsSelected = view(Inputs.table(shopLogsFiltered, {width: '100%', rows: 20, required: false}))

// JS Cell 3: show details
display(component.recordDetails(shopLogsSelected))

This works because to quote @mbostock:

Reactivity is only available as top-level variables in pages. It does not apply within modules, though you can define a generator function in a module, and then use it to declare a reactive top-level variable on a page.

For every time I need some reactive element which partially re-renders I created a new block.

my goal: embed the above code with a single line into the Markdown file, and not lose reactivity

... and have a generic pattern which works for all kinds of widget groups, with the following properties:

• different reactive outputs are exposable (as different generators)
• different reactive inputs are possible
• different widgets are pre-wired together, and all work reactively and asynchronously (similar to how they are reactive when using multiple JS blocks in Observable)

I feel the solution must be possible somehow, I just have quite some difficulties in putting the pieces together. here are the approaches I tried to research / experiment with:

1. I tried to write some code which pulls a generator and everytime this changes, re-renders a certain other element.

   I failed, because "Do not reuse generators (StackOverflow answer)" -> so while it worked to have a simple reactivity chain like
   "a -> b -> c", it did NOT work if one output was connected to multiple inputs. In the latter case,
   the generator was not "broadcasting" anymore.

   Long story short - it feels like hacking around the Observable runtime myself, and creating a buggy
   version of Observable Runtime myself.

2. Use https://github.com/observablehq/inspector for rendering ?

   I believe not, because this comes after reactivity as far as I understand to display the current value.

3. Instanciate Observable Runtime on my own, and then ?somehow interact? with the Page's Observable runtime? i.e. (both consuming values from it and sending to it)

4. Use a lower level building block from Observable Runtime?

   Is there some part of Observable Runtime which I can use to turn a Generator into a broadcasted event, and vice versa? (so that way I can multiplex to different generators?) - could be an option for 1). I feel that the "push" nature of events and reactivity and the "pull" nature of generators somehow clash with each other. How is this solved in observable? :)

Sorry, my head is a bit messy right now - as you might see with my solution ideas.

I would appreciate any pointers ❤️

Thanks so much,
Sebastian

PS: I have read previous discussions #1850 and #1711 - and https://observablehq.com/@john-guerra/reactive-widgets (which is a great resource, but does not yet help me in composing multiple widgets together) - but I feel I am still missing a link for understanding :)