Pretty origin strings in Kino?

[djacobs7]

I am trying to use Kino to build a form. I am copying some example code, that looks basically like this, which I copiedd from the docs here: https://hexdocs.pm/kino/Kino.Control.html

button = Kino.Control.button("Hello")
input = Kino.Input.checkbox("Check")

[hello: button, check: input]
|> Kino.Control.tagged_stream()
|> Kino.listen(fn event ->
  IO.inspect(event)
end)
#=> {:hello, %{origin: "client1", type: :click}}
#=> {:check, %{origin: "client1", type: :change, value: true}}

However, when I do it, I dont have a nice origin string, instead it prints sometghing like this:
#=> {:hello, %{origin: "cliecezguwehho5xv4st5uwjcjbjmmrm66ivnt1", type: :click}}

How do I get a pretty origin string?

[jonatanklosko]

The origin string is opaque, it can be any identifier. "client1" in the example was just to make the example payload more brief.

[djacobs7]

Thanks. I guess my core problem is I dont know how to respond to an event that comes in from a form. Is there a cleaner way to do this than what I have below?

inputs = [
  target_section: Kino.Input.select("section", Enum.map( [:a, :b], &{&1, &1} )),
  example_section: Kino.Input.textarea("example")
]
form = Kino.Control.form(inputs, submit: "Generate" )

Kino.Control.stream(form) |> Kino.listen(fn event ->
  IO.inspect(event)

  case event[:origin] do
    

    "cezguwehho5xv4st5uwjcjbjmmrm66iv" -> IO.inspect("FORM SUBMITTED")
    _ -> "SOMETHING ELSE"
  end
end)


form

[jonatanklosko]

The origin represents the web client that submitted the form, so if you refresh the page and submit the form it is going to be different. Are you looking for a way to only render a message to the user submitting the form and not anyone else?

[djacobs7]

At the moment I am trying to build a single user app. There are a few fields the user has to fill out; and when they are done they can click submit and I send their data to a database, through a function I have already written. I am new to kino/elixir, and am just looking for the most idiomatic way to do this.

…

On Wed, Aug 9, 2023 at 12:59 PM Jonatan Kłosko ***@***.***> wrote: The origin represents the web client that submitted the form, so if you refresh the page and submit the form it is going to be different. Are you looking for a way to only render a message to the user submitting the form and not anyone else? — Reply to this email directly, view it on GitHub <#2154 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAIMKI6HBDWHVVAPO6O473XUPTZPANCNFSM6AAAAAA3KPH3C4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[jonatanklosko]

If you want to give the user feedback you can render a frame and update it's content once the form is submitted:

inputs = [
  target_section: Kino.Input.select("section", Enum.map([:a, :b], &{&1, &1})),
  example_section: Kino.Input.textarea("example")
]

form = Kino.Control.form(inputs, submit: "Generate")
frame = Kino.Frame.new()

Kino.Control.stream(form)
|> Kino.listen(fn event ->
  Kino.Frame.render(frame, Kino.Text.new("Submitted!"), to: event.origin)
end)

Kino.Layout.grid([form, frame])

Note that to: event.origin means that the frame is updated only for the user that submitted the form. If you want the result to persist on refresh you can skip that option :)

[djacobs7]

Aha, this is what I was looking for. Thank you so much.

…

On Wed, Aug 9, 2023 at 2:19 PM Jonatan Kłosko ***@***.***> wrote: If you want to give the user feedback you can render a frame and update it's content once the form is submitted: inputs = [ target_section: Kino.Input.select("section", Enum.map([:a, :b], &{&1, &1})), example_section: Kino.Input.textarea("example")] form = Kino.Control.form(inputs, submit: "Generate")frame = Kino.Frame.new() Kino.Control.stream(form)|> Kino.listen(fn event -> Kino.Frame.render(frame, Kino.Text.new("Submitted!"), to: event.origin)end) Kino.Layout.grid([form, frame]) Note that to: event.origin means that the frame is updated only for the user that submitted the form. If you want the result to persist on refresh you can skip that option :) — Reply to this email directly, view it on GitHub <#2154 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAIMKNYNZJ2TEZ7X6PQTW3XUP5GFANCNFSM6AAAAAA3KPH3C4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[djacobs7]

I have a related question now ( my apologies if this is documented somewhere and I just haven't figured out where to find it ).

I have a form like this:

inputs = [
  email: Kino.Input.textarea("email")
]

form = Kino.Control.form(inputs, submit: "lookup user" )
frame = Kino.Frame.new()

Kino.Control.stream(form)
|> Kino.listen(fn event ->

  user =EmailHandler.User |>
    Ash.Query.filter([email: event.data.email]) |>
    Scribble.EmailHandler.read!(authorize?: false)
  
  Kino.Frame.render(frame, Kino.Text.new(user), to: event.origin)

end)

Kino.Layout.grid([form, frame])

That's all good, but now I want to render another form that relies on this 'user'. For example, the user have many 'notes' (imagine a TODO app), and I would like to have a separate form that renders the notes and allows you to mark them as Completed.

I am looking for an idiomatic way to access the 'user' after it has been loaded, in another block of code; like in the next section in livebook

[josevalim]

There are two options:

1. You would need to store the user in a separate process, such as an agent

2. If you are not building a multi-user app, then you don't need to use Kino.Control, and instead render the inputs directly as cell outputs. You can then deploy it as a multi-session app. Example here: https://news.livebook.dev/whats-new-in-livebook-0.10---introducing-multi-session-livebook-apps-3Dbpss

[djacobs7]

Thanks! That's exactly what I was looking for

[josevalim]

for clarify, @djacobs7, do you mean bullet item 1 or 2? :)

[djacobs7]

Was helpful to learn about both of them. For this particular use case I am going to try Kino.Input and see how far I get with it