Livebookプラグイン開発①：コード実行時、好きな出力にアレンジする

piacere です、ご覧いただいてありがとございます

@RyoWakabayashi さんの下記コラムで紹介されているLivebookプラグイン「kino_benchee」のソースコードを見て、Livebookプラグインを開発するのがカンタンだということが分かったので、試しに作ってみました

Livebookプラグインを作る

PJを作成します

mix new kino_httpoison
cd kino_httpoison

Kinoを使えるようにします

mix.exs

 defmodule KinoHttpoison.MixProject do
…
  defp deps do
    [
      {:kino, "~> 0.12"}
…

HTTPoison.Response がLivebookコードブロック上で返却されたときに走る Kino.Render を作ります

Livebookプラグインが無効なときは、下記のような表示です

これを、headers や body を「content」タブ、それ以外の情報を「attribute」タブに表示するコードは、下記の通りです

lib/render.ex

defimpl Kino.Render, for: HTTPoison.Response do
  def to_livebook(httpoison) do
    header = httpoison.headers
      |> Enum.map(fn {k, v} -> %{key: k, value: v} end)
      |> Kino.DataTable.new(name: "header")

    content = Kino.Layout.grid([header, httpoison.body |> Jason.decode!])

    request = httpoison.request
      |> Map.from_struct
      |> Enum.map(fn {k, v} -> %{key: k, value: v} end)
      |> Kino.DataTable.new(name: "request")

    attribute = Kino.Layout.grid([httpoison.request_url, request, httpoison.status_code])

    Kino.Layout.tabs(content: content, attribute: attribute)
    |> Kino.Render.to_livebook
  end
end

ここで、Kino.Layout.tabs はLivebook上でタブを出力し、Kino.Layout.grid は複数の表示エリアを区切り、Kino.DataTable.new はテーブル出力を行う処理です

これらで構成されたパーツ群を Kino.Render.to_livebook で返すと、Livebookコードブロック上で HTTPoison.Response が返却されたときに表示されるようになります

なお、VegaLiteによるチャートやEvision／Image（vix）の画像、MapLibreの地図など、Livebook上で表示できる形式であれば、何でも乗せることができるので、「kino_benchee」のような美しいグラフ化も簡単に実現できます

Livebookで作成したLivebookプラグインを使う

下記のように、ローカルに置いているLivebookプラグインをロードできます（Livebook起動フォルダからの相対パスを指定してください）

なお、mix hex.publish でのOSS化や、Githubからのロード等も、Livebookプラグインを各々にアップすれば可能です

Reconnect and setup

Mix.install([
  {:httpoison, "~> 2.0"},
  {:jason, "~> 1.4"},
  {:kino_httpoison, path: "../kino_enumurable"},
])

HTTPoison.Response を返すコードブロックを実行します

HTTPoison.get!("https://api.github.com/repos/wojtekmach/req")

すると、「content」タブには、headers や body が下図のように整形されて表示されます

それ以外の情報は「attribute」タブにやはり整形されて表示されます

こんな簡単なコードでLivebookプラグインが実現できます、すばらしい