@yanqirenshi/d3.sql

SQLのリネージ(列の値がどこから来たか)を、パン/ズーム可能なSVG図として 描画するReactコンポーネント。レイアウトは d3-dag(sugiyama)、パン/ズームは d3.zoom を使う。

foodata プロジェクトの hub/src/contents/SqlGraph.js(sql-sitter というRust製SQLパーサーがextract_graph()で抽出するリネージグラフを 表示するために作られたもの)を、モノレポの規約(データクラス/描画クラスの 2系統・d3 メタパッケージ・MUI 非依存)に合わせて取り込んだもの。

クラス構成

• SqlModel(データクラス) — 入力の正規化(列の自動導出・最終Resultの 判定)・自動レイアウト(d3-dag)・線の幾何計算。DOM/React 非依存で、 テストはこの層に対して行う。
• D3Sql(描画クラス / React ラッパ) — SqlModel の結果を SVG に写す。 パン/ズーム(d3.zoom)・ラベルboxの実測幅差し替え・ラベルクリックの ポップアップを持つ。

入力データの形

{
  entities: [
    {
      id: 't1',              // エンティティ内で一意なID(他の要素からの参照キー)
      kind: 'table',         // 'table' | 'result'
      title: 'my_table',     // 箱の見出し
      alias: null,           // FROM句の `AS alias`(箱の上に表示)
      whereText: null,       // WHERE/HAVINGの条件テキスト(箱の下に表示)
      columns: ['col_a', 'col_b'],  // 箱に表示する列(省略時はedgeから自動導出)
      orderByColumns: [],    // ORDER BYのキーに対応する列名(並び順)
      distinct: false,       // trueなら箱の右辺にdistinct帯を付ける
    },
  ],
  lineageEdges: [
    { from: { entity: 't1', column: 'col_a' }, to: { entity: 'result1', column: 'out_a' }, label: null },
  ],
  joinEdges: [
    { a: { entity: 't1', column: 'id' }, b: { entity: 't2', column: 'id' }, joinType: 'INNER' },
  ],
}

データモデルの詳細は src/js/SqlModel.js 冒頭のコメントを参照。

使い方

import D3Sql from '@yanqirenshi/d3.sql';

<div style={{ width: '100%', height: 600 }}>
  <D3Sql data={graph}/>
</div>

開発

npm run transpile -w @yanqirenshi/d3.sql   # Babel で dist/ へ(dist はコミット対象)
npm test          -w @yanqirenshi/d3.sql   # jest(データクラスのテスト)