使用 Hubql 和 React Flow 實現彈性的資料模型視覺化

Tobias Meixner
Hubql 共同創辦人
Flexible data model visualization with Hubql and React Flow screenshot

您可以簡短描述一下 Hubql 嗎?

Hubql 是一個協作平台,用於共同建構和視覺化資料綱要。

您為什麼決定使用 React Flow?

我們正在尋找一個 React 函式庫,可以幫助我們將資料模型轉換為視覺化,而無需花費太多時間來建構抽象和互動元素。為了節省開發時間,我們選擇了一個穩定、成熟且功能豐富的函式庫,我們可以透過自訂渲染選項來擴展它。

您目前如何使用這個函式庫?

我們使用 React Flow 將資料模型(例如 JSON 或 Prisma)轉換為圖表或圖形。我們將 AST (抽象語法樹) 資料傳遞給 React Flow,以根據資料關係產生節點和邊緣。然後,這些節點和邊緣會以自訂節點在類似表格的 UI 中渲染,以便更容易理解。

React Flow 中有什麼特別有用的地方嗎?

主要是控制節點拖曳和點擊行為的事件,對於擴展功能非常有用。此外,自訂節點的渲染為使用者介面提供了非常高的靈活性,可以實現豐富的使用者體驗和品牌形象。

您在這個過程中遇到任何問題嗎?

實際上,我們沒有遇到任何問題,除了我們自己方面的效能問題,這些問題可以透過優化我們的 React 程式碼來解決。React Flow 本身非常穩定,並且開箱即用地提供出色的效能。

您的 React Flow 訂閱的哪些功能目前為您提供了幫助?

有一個 Pro 範例符合我們的使用案例。這節省了我們在自動佈局和群組功能上的實作時間,這對我們來說至關重要。能夠直接獲得 React Flow 團隊的支援並直接回饋給維護者也很好。

透過 React Flow Pro 取得 Pro 範例、優先錯誤回報、來自維護者的 1 對 1 支援等