artem

artem

React to clicks in Kino DataTable (or anything similar for LiveBook)

Hi All

I am trying to play with LiveBook as a research playground to analyze data and create first ugly prototypes of the internal or not so internal tool (isn’t it what such notebooks are good for?).

Concept
We are operating in the hiring space and idea is pretty much like:

  1. Select a job ad from currently open ones (or based on some other criteria)
  2. Select some applicant
  3. Fetch extra information that we happen to know about the applicant (e.g. history from the past jobs)
  4. Ask AI to analyze the results and provide automated opinion on this or that characteristic

Selecting in DataTable - how to do it
So as you see there are a couple of steps which are about presenting long list of records (with some details) and choosing something there. Number of records is like dozens to thousands so for a research prototype I don’t really care about any kind of caching.

I though that Kino.DataTable should be a good choice for it as it has built-in pagination and search (though search just highlights items instead of filtering or I don’t know how to hide unmatching stuff easily).

But… I failed to figure how to register any sort of “clicked” or “selected” events in datatable. There seem to be ways to do it for a Button, so I thought i could use datatable’s formatter to inject button somewhere, but it also seems not possible.

How to select from a long list of records in LiveBook [easily]?
What would you in such a case? Or what do you use already?

I figured a way to use select control, but it really is not made for looking at many record details and looks wrong when you want to make a conscious choice of many records.

Is my only option to create a clone of DataTable or is there a known hack or a different control to make a choice between many elements easy?

Marked As Solved

jonatanklosko

jonatanklosko

Creator of Livebook

There is currently no API do to that with data table. In general, you could implement a custom table output and have an Elixir API to get the currently selected row, but the thing is that the changes won’t be tracked. If the user selects a different row, the cell that read the current value won’t be marked as stale (as is the case for Kino.Input.read/1). The change tracking only works with built-in inputs. This wouldn’t be a problem if, instead of reading the current value, the API was to receive an update (like Kino.Control components), but this would imply the “reactive app” style, where you kinda need to write everything in a single cell to handle events and update frames. Perhaps in the future we could add an abstraction for creating custom inputs with proper change tracking, but that’s not one the roadmap currently.

So if you want to rely on input reading, you need to either use a select, or perhaps render the table with ids, and have a text field below where the user enters the id(s) (definitely not the best UX, but allows you to use the table).

Also Liked

jonatanklosko

jonatanklosko

Creator of Livebook

@artem the extension-points that kino providers are higher level, mainly:

  • customize how certain data structures are visualized via the Kino.Render protocol
  • implement custom widgets to arbitrarily visualize outputs via Kino.JS/Kino.JS.Live
  • create custom Smart cells to generate code from UI (such as Chart cell for generating charts)

Specific components can be extended via options where appropriate. For example Kino.DataTable accepts :formatter option to customize how certain columns are formatted, though it only allows returning a string. If by rich render you mean a formatter that returns another Kino, then yeah, it doesn’t compose on that level in this case. The table specifically is implemented in JS on top of Glide Data Grid, which uses canvas, so there’s likely no way for us to have straightforward API allowing the user to arbitrarily customize how a cell is rendered from Elixir.

Where Next?

Popular in Questions Top

sergio
In Ruby, I can go: User.find_by(email: "foobar@email.com").update(email: "hello@email.com") How can I do something similar in Elixir? ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
New
quazar
How to set Jason to encode all fields in ecto schema, I don’t care about security and implementing only is taking long list of attributes...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
chewm
Hi guys, nice to meet you to the whole forum, I’m new here, I’m trying to configure visual studio code for elixir, right now the intellis...
New

Other popular topics Top

Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3268 119930 1237
New
William
I would like to know that is there any online source for learning Phoenix Framework for building E-Commerce Store? Any advantage on build...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 45766 226
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
AstonJ
by Lance Halvorsen Elixir and Phoenix are generating tremendous excitement as an unbeatable platform for building modern web application...
460 27162 124
New
Nvim
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New

We're in Beta

About us Mission Statement