Redash v6 で追加されたオートコンプリートの無効化について挙動とコードを追ってみる

この記事は Redash Advent Calendar 19日目の記事です。勤務先でも師走ムードを感じ始めました。

adventar.org

お題

この問題と関係あるかどうかはわかりませんが、オートコンプリートと聞いて、先日リリースされた Redash v6 (正確には 6.0.0-beta から追加)で以下の機能が追加されたことを思い出しました。

If the live autocomplete in the code editor annoys you, you can disable it now

今日はこの機能について検証しつつ、ざっくりと実装を追ってみます。

検証環境は docker-compose で起動し、Docker イメージは redash/redash:6.0.0.b8537 を使用しました。

影響範囲

この機能はクエリ編集画面に影響があります。

以下はオートコンプリートを無効にする前の画面で、今までのバージョンと同じくオートコンプリートが有効になっています。

f:id:ariarijp:20181218134613p:plain

上記の画面で表示されている、雷のマークがオートコンプリートの有効・無効を切り替えるトグルになっていて、無効にすると静止画ではわかりにくいですが、以下の画面のようにオートコンプリートが効かなくなります。

f:id:ariarijp:20181218135022p:plain

オートコンプリートの設定はどこに保持されているか？

Chrome の開発者ツールなどで見るとすぐに分かりますが、LocalStorage に保持されています。

f:id:ariarijp:20181218135316p:plain

liveAutocompleteDisabled が false だとオートコンプリートが有効になるようです。

オートコンプリートを制御しているのはどのコードか？

client/app/components/QueryEditor.jsx で liveAutocompleteDisabled を操作しています。

redash/QueryEditor.jsx at v6.0.0 · getredash/redash · GitHub

Redash は現在 Angular から React への移行を進めていて、クエリエディタ周りも v6.0.0 時点では React のコンポーネントに書き換わっています。

このコンポーネントのなかでオートコンプリートのボタンがクリックされるたび、コンポーネントの State と一緒にブラウザの Local Storage を書き換えているようです。

toggleAutocomplete で呼ばれている localOptions.set は Redash 独自のもので、Web Storage API を薄くラップしたもののようでした。

redash/localOptions.js at v6.0.0 · getredash/redash · GitHub

まとめ

まとめと書きつつ、これといったまとめはありませんが、オートコンプリート周りの実装を読んだことで、また少し Redash についての理解が深まりました。

それも元ツイートのおかげなので、ありがたい限りです。

お知らせ

Redash についての疑問などを Twitter で拾えることもあるのですが、できればフォーラムへの投稿をしていただけるとありがたいです！日本語でOK！

discuss.redash.io