Vega Editor のセットアップ

やりたいこと

OpenSearch でデータを可視化する前に、どういうデータの持ち方が適しているのかトライアンドエラーできるような環境が欲しかった。
Vega Editorを使うとローカルのjsonデータやcsvをリアルタイムに読み込んでサクッと表示できそうだったので試していく。

環境

• M1 Macbook Air 2020 Ventura 13.4
• Node.js 18.9.0
• yarn 1.22.19
• npm 8.19.1

ブラウザでローカルのVega Editorを表示する

https://github.com/vega/editor からプロジェクトを clone する。（Commit: 9751149）
README.md の通りに以下のコマンドを実行し、ローカルサーバへアクセスした。

yarn
yarn start

アクセスしたところ、自分の環境ではブラウザ起動時に public/data 以下に必要なファイルがないといったようなエラーが出てサーバが起動しなかった。

yarn vendor がうまく動作しなかったようだったので、改めて以下の手順でコマンドを実行し、ローカルサーバへアクセスしたところVega Editorが表示できた。

yarn
yarn vendor 
yarn build
yarn start

これ以降は yarn start でローカルの Vega Editor へ http://localhost:5173/editor でアクセスできるようになった。

動作チェック

Vega の公式サイトの Example で公開されているサンプルを貼り付け、正常にデータが可視化できていることを確認した。
例として labeled-scatter-plotの Example を貼り付けた結果は以下。

サンプルデータデータセットの取得

表示チェック用にサンプルデータセットを取得する。
ローカルでの編集用データは public/local 配下に置くことにした。

以下のコマンドで public/local/flare.json にサンプルデータセットが作成される。

mkdir ./public/local
curl -X GET https://vega.github.io/vega/data/flare.json > ./public/local/flare.json

ノート
データの中身は Vega Editor の public/data/flare.json と多分同じなので、サンプルデータセットはプロジェクトに含まれる public/data 配下のデータをコピペすれば十分そう。

ローカルのjsonファイルをVega Editor上に表示する

public/local 以下のファイルをローカルサーバ上の Vega Editor で表示できているか確認する。 Tree Layout Example から Vega JSON Specification をコピペして貼り付け、表示できるかを確認する。（このExampleを使う理由は、データソースが flare.json だから。）

結果は以下の通り。

最後に、最終目的である「ローカルのデータセットをVega Editor上で表示できるかどうか」をチェックする。

先ほどの Vega JSON Specification の url プロパティの public以下のパスを以下のように書き換えることでローカルのデータを読み込めるようになる。

-      "url": "data/flare.json",
+     "url": "local/flare.json",

結果は以下。

ローカルのJSONデータを可視化できる検証環境を作成できた。

（未解決）Hot Reload を設定する

Vega Editor は使えるようになったが、ローカルの json を更新したときに Hot Reload が有効でないので、サンプルデータの更新の都度ブラウザをリロードするのが地味に不便。

フロントはViteを使っているようなので、とりあえず run script に以下を追記してみる。（多分 vite と vite serve が同じ気がするが、ダメ元で）

  "scripts": {
    "start": "vite serve",
+   "dev": "vite",
    "build": "yarn clean && yarn vendor && yarn build:only",
    "build:only": "vite build",
    "clean": "rimraf dist public/spec public/data",
    "postbuild": "rsync --ignore-existing -r public/* dist",
    "generate-example-images": "scripts/generate-example-images.sh",
    "vendor": "scripts/vendor.sh",
    "prepare": "yarn vendor",
    "prettierbase": "prettier '{src,public}/**/*.{css,html}'",
    "format": "eslint . --fix && yarn prettierbase --write",
    "lint": "eslint . && yarn prettierbase --check",
    "predeploy": "yarn build",
    "deploy": "gh-pages -d dist",
    "postinstall": "husky install && npx patch-package"
  }

開発サーバを起動してみる。

yarn dev

この状態で public/local/flare.json を更新したがブラウザは再レンダリングされなかった。この方法ではHot Reloadは設定できない。

別の方法を試してみる。
public/local/flare.json が変更を監視する対象に含まれていないのではないかと思われるので、変更監視対象に含める方法を探す。

Vite によると https://ja.vitejs.dev/config/server-options.html#server-watch の手順で watch 対象を変更できるのか試してみる。vite.config.js を変更する。

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';

const commitHash = require('child_process').execSync('git rev-parse --short HEAD').toString();

export default defineConfig({
  base: 'editor',
  define: {
    __COMMIT_HASH__: JSON.stringify(commitHash),
  },
  plugins: [react()],
+  server: {
+    watch: {
+      ignored: ['!**/public/local/**'],
+    },
+  },
});

この状態で yarn dev して、flare.json を書き換えてみたが変更は検知されずダメだった。結局解決せず。

まとめ

• Vega Editor を使うとローカルにある JSON ファイルを可視化することができる
• JSON ファイルを読み込むには Vega の "url" にローカルのファイルパスを設定する

今後の課題

• Hot Reload が設定できなかったのでそのうち設定したい
• Vite の機能を使わずに nodemon とかを試してみるのでも良さそう