search

livebook-dev / kino

Client-driven interactive widgets for Livebook
Apache License 2.0
361 stars 60 forks source link

Support toggling smart cell editor visibility #467

Closed jonatanklosko closed 2 weeks ago

jonatanklosko commented 3 weeks ago

https://github.com/user-attachments/assets/a2661ee7-1797-4e6b-94f0-6111aac07e0c

Source ```elixir defmodule SmartCellWithEditorToggle do use Kino.JS use Kino.JS.Live use Kino.SmartCell, name: "Smart cell with editor toggle" @impl true def init(attrs, ctx) do source = attrs["source"] || "" ctx = assign(ctx, source: source, visible: false) {:ok, ctx, editor: [source: source, visible: false]} end @impl true def handle_connect(ctx) do {:ok, %{}, ctx} end @impl true def handle_event("toggle_editor", %{}, ctx) do visible = not ctx.assigns.visible {:noreply, ctx |> assign(visible: visible) |> reconfigure_smart_cell(editor: [visible: visible])} end @impl true def handle_editor_change(source, ctx) do {:ok, assign(ctx, source: source)} end @impl true def to_attrs(ctx) do %{"source" => ctx.assigns.source} end @impl true def to_source(attrs) do attrs["source"] end asset "main.js" do """ export function init(ctx, payload) { root.innerHTML = ` `; ctx.root.querySelector(`#toggle`).addEventListener("click", (event) => { ctx.pushEvent("toggle_editor", {}); }); } """ end end Kino.SmartCell.register(SmartCellWithEditorToggle) ```
mruoss commented 2 weeks ago

love this! Thanks so much!

mruoss commented 2 weeks ago

Just had a quick try. This doesn't really work for me. Looking at the PR: shouldn't there be some frontend code that actually shows/hides the editor? But I will try harder tonight.

jonatanklosko commented 2 weeks ago

@mruoss when the user selects FLAME Kubernetes backend, the smart cell server will receive the change and then you call reconfigure_smart_cell to show the editor (and set the initial source). Does that make sense or am I missing something?

mruoss commented 2 weeks ago

It does make sense and I'd say it is what I'm donig. I'm setting visible to false initially. But the editor is visible nontheless. Then, toggling the backend (Fly/K8s) reconfigures the smart cell setting visible accordingly. But the editor is never hidden.

jonatanklosko commented 2 weeks ago

@mruoss did you pull Livebook main? :D

mruoss commented 2 weeks ago

oh... I see! 😝

mruoss commented 2 weeks ago

works like a charm. My bad, sorry.

jonatanklosko commented 2 weeks ago

Perfect, and no worries!