Zenn
Open4

Livebook 調査したこと

Elixir
phoenix
tatotato
  • 触ったときに調べた（ている）ものをつらつらと書いています。
  • Livebook version: 0.6.1
tatotato

スマートな表を表示させるには？

(1) %Postgrex.Result{} 構造体を返す

smart cell "SQL Query"の実行結果として表示される表は、Postgrex.query!()の結果で%Postgrex.Result() 構造体である。

%Postgrex.Result{columns: ["No"], rows: [[1], [2]]}

(2) Kino.DataTable.new() を実行する

内部的にはKinoを使っているのでそのまま使用する。マップの配列（Repo.all()結果等）を表にする場合などでは、そのまま引数で渡せば表示される。

Kino.DataTable.new([%{"No" => 1}, %{"No" => 2}])
tatotato

docker-compose で既存アプリケーションといっしょに使う

  • embededも試してみたが、ちょっと設定周りがいろいろ辛かった
  • mix standalone か attached は、はっきりどっち、という要素がいまのところ見つからない
    • attached の方がiexを起動していれば、recompile()がしやすいかな、くらいの印象をもっている
docker-compose.yml
  app:
    # <your application>

  livebook:
    image: livebook/livebook
    container_name: myapp_livebook
    ports:
      - "8080:8080"
      - "8081:8081"
    environment:
      # see
      # - https://github.com/livebook-dev/livebook/blob/main/README.md
      # - code at `Livebook.config_runtime()`
      #
      # Authentication
      - LIVEBOOK_PASSWORD=password2022
      # - LIVEBOOK_TOKEN_ENABLED=false
      #
      # Config
      - LIVEBOOK_HOME=/srv/src
      - LIVEBOOK_DATA_PATH=/srv/.livebook
      - LIVEBOOK_SHUTDOWN_ENABLED=false
      #
      # Mode
      # "mix"
      # - LIVEBOOK_DEFAULT_RUNTIME=mix:/srv
      # "attached" requires running process on your application container
      # like `iex --name myproject@app --cookie myproject -S mix`
      - LIVEBOOK_DEFAULT_RUNTIME=attached:myproject@app:myproject
    volumes:
      - ./:/srv/

"attached" でsmart cellsを使う場合は、関係パッケージを接続先アプリケーションに追加する必要がある

mix.exs
      {:kino, "~> 0.6.1"},
      {:vega_lite, "~> 0.1.4"},
      {:kino_vega_lite, "~> 0.1.1"},
      {:kino_db, "~> 0.1.1"},
tatotato

VegaLite のグラフをJSONから表示する

%VegaLite{} Structを返すと、結果に描画してくれる。通常は、VegaLite.new()で作っていくが、公式のサンプルから作って確認する場合は、JSONを変換して表示してみる。

# https://vega.github.io/vega-lite/examples/bar_grouped.html より
"""
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category":"A", "group": "x", "value":0.1},
      {"category":"A", "group": "y", "value":0.6},
      {"category":"A", "group": "z", "value":0.9},
      {"category":"B", "group": "x", "value":0.7},
      {"category":"B", "group": "y", "value":0.2},
      {"category":"B", "group": "z", "value":1.1},
      {"category":"C", "group": "x", "value":0.6},
      {"category":"C", "group": "y", "value":0.1},
      {"category":"C", "group": "z", "value":0.2}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category"},
    "y": {"field": "value", "type": "quantitative"},
    "xOffset": {"field": "group"},
    "color": {"field": "group"}
  }
}
"""
|> Jason.decode!()
|> then(& %VegaLite{spec: &1})
  • JSONをデコードして%VegaLite{spec: }にいれる