HubqlとReact Flowによる柔軟なデータモデルの可視化

Tobias Meixner
Hubql共同創設者
Flexible data model visualization with Hubql and React Flow screenshot

Hubqlについて簡単に説明していただけますか?

Hubqlは、データスキーマを共同で構築および可視化するためのコラボレーションプラットフォームです。

React Flowを使用することにした理由は何ですか?

私たちは、抽象化やインタラクティブ要素を構築するのに時間をかけずに、データモデルを視覚化に転換するのに役立つReactライブラリを探していました。開発時間を節約するために、カスタムレンダリングオプションで拡張できる、安定した、成熟した、機能豊富なライブラリを選択しました。

現在、どのようにライブラリを使用していますか?

JSONやPrismaなどのデータモデルをReact Flowを使用して図やグラフに変換します。AST(抽象構文木)データをReact Flowに渡して、データ関係に基づいてノードとエッジを生成します。これらは、より簡単に理解できるように、テーブルのようなUIでカスタムノードを使用してレンダリングされます。

React Flowで特に役立った機能はありますか?

主に、ノードのドラッグとクリックの動作を制御するイベントは、機能を拡張するのに非常に役立ちます。また、カスタムノードのレンダリングは、豊富なユーザーエクスペリエンスとブランディングのために、ユーザーインターフェースに非常に高い柔軟性を与えます。

途中で何か問題がありましたか?

Reactコードを最適化することで解決できる、私たち側の性能問題以外、実際には問題に直面していません。React Flow自体は非常に安定しており、すぐに優れたパフォーマンスを発揮します。

React Flowのサブスクリプション機能はこれまでどのように役立ちましたか?

私たちのユースケースに合ったProの例がありました。これにより、私たちにとって重要な自動レイアウトとグループ化機能の実装時間が短縮されました。React Flowチームから直接サポートを受け、メンテナーに直接貢献できるのも素晴らしいです。

(画像とテキストの説明は、日本語で適切に翻訳する必要があります。画像自体を翻訳することはできませんが、alt属性とテキストの内容を翻訳します。以下に例を示します。)

React Flow Proでは、Pro事例、優先バグレポート、メンテナーからの1対1サポートなどを利用できます。