Add support for defining custom JavaScript widgets #64
Conversation
| The returned data is passed to the JavaScript `init` function | ||
| of the connecting client. | ||
| """ | ||
| @callback handle_connect(ctx :: Context.t()) :: {:ok, data :: term(), ctx :: Context.t()} |
There was a problem hiding this comment.
I'm thinking we should probably make origin available in handle_connect and handle_event to have a way of distinguishing clients. It could be an argument or a map with metadata (in case we want to add more info in the future). Thoughts?
There was a problem hiding this comment.
Map with metadata sounds good to me.
There was a problem hiding this comment.
Another option is to have this information in the context, so you don't need to pass extra arguments on handle_connect and handle_event.
There was a problem hiding this comment.
Interesting idea, my only concern would be that conceptually ctx is information about the server state, which is shared across all clients. But then it's already called context so it can be anything 🙈
There was a problem hiding this comment.
Any way is fine by me. Just adding options. IMO it is fine for ctx to have the information about what triggered the callback. :D
There was a problem hiding this comment.
Ah, one thing is that for callbacks other than handle_connect and handle_event it would be nil, but that's probably fine. In the end it's only useful in specific cases, so I like not needing to match-ignore it most of the time :)
There was a problem hiding this comment.
Added ctx.origin in 147be93.
|
This is amazing!!! The example notebook is fantastic!!!!! |
|
This is amazing! Great work! |
Sounds good! |
This introduces JavaScript powered widgets, which allow users to build arbitrary output visualizations and interactions.
It is an extremely exciting change, because it adds a powerful extension point to Livebook. To give more context, so far Livebook defined very specific output types that it supported, so for Vega-Lite we would have a dedicated output type and would include the necessary JavaScript in Livebook. With this new feature we can effectively remove all Vega-Lite specific bits from Livebook, because it is easily implemented within the new abstraction. Similarly, users can build integrations with arbitrary JavaScript packages without Livebook knowing anything about those.
Kino provides abstractions for defining those JavaScript widgets, both static (with static data) and live (with server process). Live widgets support bidirectional communication between the JavaScript part and the Elixir part.
To learn about the API and examples read
Kino.JS, thenKino.JS.Live, then the linked notebook.js_widgets.mp4
Notebook available here.
Closes #44.
Also see livebook-dev/livebook#818.