@yanqirenshi/d3.sql 0.1.0

package/jest.config.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+    // テストファイルは tests ディレクトリに指定
+    testMatch: [
+        "**/tests/**/?(*.)+(spec|test).[tj]s?(x)"
+    ],
+    // monorepo では babel-jest がルートに hoist されるため名前解決に任せる
+    transform: {
+        "^.+\\.js$": 'babel-jest',
+    },
+    // d3 v7 / d3-dag v1 は ESM-only で CJS ランタイムの jest では読めないため、
+    // スタブにマップする(テスト対象のデータ層は d3-dag を使う自動レイアウト
+    // 以外 d3 の関数を呼ばない。d3-dag 部分はブラウザ検証で担保する)
+    moduleNameMapper: {
+        '^d3$': '<rootDir>/tests/d3-stub.js',
+        '^d3-dag$': '<rootDir>/tests/d3-dag-stub.js',
+    },
+    collectCoverageFrom: [
+        "**/src/**/*.js",
+        "!**/node_modules/**",
+    ],
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "@yanqirenshi/d3.sql",
+    "version": "0.1.0",
+    "description": "SQL lineage graph ({entities, lineageEdges, joinEdges}) rendered as an interactive, pannable/zoomable SVG diagram",
+    "type": "module",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js"
+        }
+    },
+    "scripts": {
+        "transpile": "babel src -d dist --copy-files",
+        "prepublishOnly": "npm run transpile",
+        "test": "jest"
+    },
+    "author": "yanqirenshi@gmail.com",
+    "license": "MIT",
+    "keywords": [
+        "d3",
+        "sql",
+        "lineage",
+        "graph",
+        "react",
+        "visualization"
+    ],
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "dependencies": {
+        "d3": "^7.9.0",
+        "d3-dag": "^1.2.2"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.12.10",
+        "@babel/core": "^7.12.10",
+        "@babel/preset-env": "^7.12.11",
+        "@babel/preset-react": "^7.12.10",
+        "jest": "^25.2.4",
+        "babel-jest": "^25.2.4"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/components/D3Sql.js

@@ -0,0 +1,356 @@
+// D3Sql — SQL リネージグラフの React ラッパ(描画側)。
+// データの正規化・レイアウト・線の幾何は SqlModel(データクラス)が持ち、
+// ここでは model の結果を SVG に写すことに徹する。
+// パン/ズームは d3.zoom に任せ(カーソル位置基準のズーム計算とイベント
+// 付与)、React はその結果(transform)を <g> の translate/scale として
+// 描画するだけ(DOM 操作自体は d3 に持たせない)。
+
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import * as d3 from 'd3';
+
+import SqlModel, {
+    HEADER_H,
+    ROW_H,
+    BRANCH_GAP,
+    DISTINCT_BAND_WIDTH,
+} from '../js/SqlModel.js';
+
+const ZOOM_MIN = 0.2;
+const ZOOM_MAX = 4;
+const INITIAL_PADDING = 40;
+
+// select句の線のラベルboxをクリックした時のポップアップ内容。内容は
+// 単純なテキストなので通常のReact/HTMLで表示する。
+function LineageLabelPopup ({ info, onClose }) {
+    if (!info) return null;
+    return (
+        <div onClick={onClose}
+             style={{
+                 position: 'fixed', inset: 0, zIndex: 1000,
+                 background: 'rgba(0,0,0,0.35)',
+                 display: 'flex', alignItems: 'center', justifyContent: 'center',
+             }}>
+          <div onClick={(e) => e.stopPropagation()}
+               style={{
+                   background: '#ffffff', borderRadius: 6, padding: '16px 20px',
+                   minWidth: 280, maxWidth: 420,
+                   boxShadow: '0 4px 24px rgba(0,0,0,0.3)',
+               }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
+              <h3 style={{ margin: 0, fontSize: 16 }}>{info.label}</h3>
+              <button onClick={onClose}
+                      style={{ border: 'none', background: 'none', fontSize: 18, cursor: 'pointer', lineHeight: 1 }}>
+                ×
+              </button>
+            </div>
+            <table style={{ marginTop: 12, width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+              <tbody>
+                <tr>
+                  <td style={{ padding: '4px 6px', color: '#999999' }}>変換元</td>
+                  <td style={{ padding: '4px 6px' }}>
+                    {info.fromDisplay || (info.fromTitle ? `${info.fromTitle}.${info.fromColumn}` : 'リテラル値/由来なし')}
+                  </td>
+                </tr>
+                <tr>
+                  <td style={{ padding: '4px 6px', color: '#999999' }}>変換先</td>
+                  <td style={{ padding: '4px 6px' }}>{info.toTitle}.{info.toColumn}</td>
+                </tr>
+              </tbody>
+            </table>
+            {info.sql && (
+                <pre style={{
+                    marginTop: 12, padding: '8px 10px', background: '#f5f5f5',
+                    borderRadius: 4, fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-all',
+                }}>
+                  {info.sql}
+                </pre>
+            )}
+          </div>
+        </div>
+    );
+}
+
+// 「Result N」(番号付き、中間サブクエリの出力)は通常の太さ、それ以外
+// (実テーブル名や番号無しの最終「Result」)は太字のままにする。
+const RESULT_N_TITLE_RE = /^Result \d+$/;
+
+// エンティティ1件の箱(ヘッダ・列行・DISTINCT帯・ORDER BY番号)を描く。
+function EntityBox ({ box }) {
+    const titleWeight = RESULT_N_TITLE_RE.test(box.title) ? 'normal' : 'bold';
+    return (
+        <g>
+          {box.alias && (
+              <text x={box.x} y={box.y - 8} fontSize={12} fill="#666666">
+                {box.alias}
+              </text>
+          )}
+          <rect x={box.x} y={box.y} width={box.w} height={box.h}
+                fill="#ffffff" stroke="#333333" strokeWidth={1}/>
+          <rect x={box.x} y={box.y} width={box.w} height={HEADER_H}
+                fill={box.headerColor || '#e8e8e8'} stroke="#333333" strokeWidth={1}/>
+          <text x={box.x + box.w / 2} y={box.y + HEADER_H / 2}
+                textAnchor="middle" dominantBaseline="central"
+                fontWeight={titleWeight} fontSize={14} fill={box.headerTextColor || '#000000'}>
+            {box.title}
+          </text>
+          {box.rows.map((row, i) => (
+              <g key={row.name}>
+                {i > 0 && (
+                    <line x1={box.x} x2={box.x + box.w}
+                          y1={box.y + HEADER_H + i * ROW_H} y2={box.y + HEADER_H + i * ROW_H}
+                          stroke="#cccccc" strokeWidth={1}/>
+                )}
+                <text x={box.x + 10} y={row.y}
+                      dominantBaseline="central" fontSize={13}>
+                  {row.name}
+                </text>
+              </g>
+          ))}
+          {box.distinct && (
+              <g>
+                {/* ヘッダ部分は列(行)の範囲外なので、帯の開始位置は最初の
+                    列の開始位置(ヘッダの下)に揃える。 */}
+                <rect x={box.x + box.w + BRANCH_GAP} y={box.y + HEADER_H}
+                      width={DISTINCT_BAND_WIDTH} height={box.h - HEADER_H}
+                      fill="#ffffff" stroke="#333333" strokeWidth={1}/>
+                <text x={box.x + box.w + BRANCH_GAP + DISTINCT_BAND_WIDTH / 2}
+                      y={box.y + HEADER_H + (box.h - HEADER_H) / 2}
+                      textAnchor="middle" dominantBaseline="central" fontSize={11} fill="#666666"
+                      transform={`rotate(-90 ${box.x + box.w + BRANCH_GAP + DISTINCT_BAND_WIDTH / 2} ${box.y + HEADER_H + (box.h - HEADER_H) / 2})`}>
+                  {box.bandLabel}
+                </text>
+              </g>
+          )}
+          {box.orderByColumns && box.rows.map((row) => {
+              const seq = box.orderByColumns.indexOf(row.name);
+              if (seq === -1) return null;
+              // ORDER BYのキー列は、その行内・箱の右端寄りに順序番号のbox
+              // を付ける。box自体の見た目(fontSize/高さ)はリネージ線の
+              // ラベルbox(LineageLabelBox)と揃える。
+              const width = 20;
+              const height = 16;
+              const rightMargin = 6;
+              const cx = box.x + box.w - rightMargin - width / 2;
+              return (
+                  <g key={`orderby:${row.name}`}>
+                    <rect x={cx - width / 2} y={row.y - height / 2} width={width} height={height}
+                          fill="#ffffff" stroke="#999999" strokeWidth={1}/>
+                    <text x={cx} y={row.y} textAnchor="middle" dominantBaseline="central"
+                          fontSize={11} fill="#333333">
+                      {seq + 1}
+                    </text>
+                  </g>
+              );
+          })}
+        </g>
+    );
+}
+
+// ラベルboxの幅は、描画してみないと正確な文字幅が分からない(全角/半角の
+// 混在や実際のフォントメトリクスに依存するため)。SVGの<text>は描画後に
+// `getComputedTextLength()`で実測できるので、初期描画は仮の幅で出し、
+// レイアウト確定後(ペイント前)に実測値へ差し替える。
+// `sources`({x,y}の配列)が渡された場合は、box右辺からそれぞれへ斜めの
+// 線を引く。複数列を1つの式(例: ||連結)で結合した場合は、1つのラベル
+// boxから複数本の斜め線が出る形になる。
+function LineageLabelBox ({ x, y, label, isGroupBy, sources, onClick }) {
+    const textRef = useRef(null);
+    const [width, setWidth] = useState(label.length * 10 + 8);
+
+    useLayoutEffect(() => {
+        if (textRef.current) {
+            setWidth(textRef.current.getComputedTextLength() + 8);
+        }
+    }, [label]);
+
+    return (
+        <>
+          {sources && sources.map((s, i) => (
+              <line key={i} x1={x + width} y1={y} x2={s.x} y2={s.y} stroke="#666666" strokeWidth={1.5}/>
+          ))}
+          <g onClick={onClick} style={{ cursor: onClick ? 'pointer' : 'default' }}>
+            <rect x={x} y={y - 8} width={width} height={16} fill="#ffffff"
+                  stroke={isGroupBy ? 'none' : '#999999'} strokeWidth={1}/>
+            <text ref={textRef} x={x + 4} y={y} textAnchor="start" dominantBaseline="central"
+                  fontSize={11} fill="#333333">
+              {label}
+            </text>
+          </g>
+        </>
+    );
+}
+
+// リネージ矢印: 常にsource(右)からResult側(左)へ向く。ラベルが無い
+// (単純な値渡し)場合はsourceからdestinationへの直線1本、sourceの左辺に
+// ポート(小さい丸)、destination側に矢印。ラベルがある場合(GROUP BYキー
+// 番号や集約/関数名)は、ラベルboxを境にResult側は水平な矢印、source側は
+// 斜めの線という2本の折れ線にする。
+// GROUP BYキー番号(例: G01)は枠線無し、集約/関数名などその他のラベルは
+// 枠線付きのboxにする。
+// リテラル値・列を取らない関数呼び出し(由来となる実テーブルが無い列)は
+// `from`が無いエッジとして表し、ラベルboxからResultへの水平な矢印だけを
+// 描く(ポートの丸・source側の線は無し)。
+const GROUP_BY_LABEL_RE = /^G\d+$/;
+
+function LineageEdge ({ x1, y1, x2, y2, sources, label, labelX, labelInfo, onLabelClick, showPort = true }) {
+    const lx = labelX !== undefined ? labelX : (x1 + x2) / 2;
+    const isGroupBy = label && GROUP_BY_LABEL_RE.test(label);
+
+    if (!label) {
+        return (
+            <g>
+              <line x1={x1} y1={y1} x2={x2} y2={y2}
+                    stroke="#666666" strokeWidth={1.5} markerEnd="url(#d3-sql-arrow)"/>
+              {showPort && <circle cx={x1} cy={y1} r={3} fill="#666666"/>}
+            </g>
+        );
+    }
+
+    // `sources`(複数列を1つの式で結合した場合の由来一覧)が無ければ、
+    // 単一source(x1,y1)を1件だけの配列として扱う。
+    const sourcePoints = sources || (showPort ? [{ x: x1, y: y1 }] : []);
+
+    return (
+        <g>
+          <line x1={lx} y1={y2} x2={x2} y2={y2}
+                stroke="#666666" strokeWidth={1.5} markerEnd="url(#d3-sql-arrow)"/>
+          {sourcePoints.map((p, i) => <circle key={i} cx={p.x} cy={p.y} r={3} fill="#666666"/>)}
+          <LineageLabelBox
+              x={lx} y={y2} label={label} isGroupBy={isGroupBy}
+              sources={sourcePoints}
+              onClick={() => onLabelClick && onLabelClick(labelInfo)}
+          />
+        </g>
+    );
+}
+
+// JOIN線・IN線用の破線パターン(JOINとINは間隔を変えて見分けられるように
+// する)。"線の長さ 隙間の長さ"の順。
+const JOIN_DASH = '8 5';
+const IN_DASH = '3 3';
+
+// JOIN条件の線: データの変換ではなく「一致させる列同士」なので、aの左辺から
+// 一度左に出てから下へ、bの左辺へ横に入るエルボー型の折れ線で描く。
+// 破線にすることでリネージ矢印(直線・実線)と区別する。
+// 矢印の向きはJOIN種別を表す: LEFT=b側のみ矢印、RIGHT=a側のみ矢印、
+// INNER=矢印無し。
+// `WHERE col IN (サブクエリ)`のような、FROM句のJOINではない「列の一致」も
+// 同じ形の線で描くが、JOINと見分けられるよう`label`(例:"IN")と、破線の間隔
+// (`kind:'in'`のときはJOINより細かい間隔)で区別する。
+// エルボーの4点を通る折れ線のd属性はd3のline generatorで作る。
+const elbowLine = d3.line();
+
+function JoinEdge ({ x1, y1, x2, y2, joinType, branchX, label, kind }) {
+    const d = elbowLine([[x1, y1], [branchX, y1], [branchX, y2], [x2, y2]]);
+    const dashArray = kind === 'in' ? IN_DASH : JOIN_DASH;
+    const markerStart = joinType === 'RIGHT' ? 'url(#d3-sql-arrow)' : undefined;
+    const markerEnd = joinType === 'LEFT' ? 'url(#d3-sql-arrow)' : undefined;
+    const my = (y1 + y2) / 2;
+    return (
+        <g>
+          <path d={d} fill="none" stroke="#999999" strokeWidth={1.5} strokeDasharray={dashArray}
+                markerStart={markerStart} markerEnd={markerEnd}/>
+          {label && (
+              <g>
+                <rect x={branchX - 12} y={my - 9} width={24} height={16} fill="#ffffff"/>
+                <text x={branchX} y={my} textAnchor="middle" dominantBaseline="central"
+                      fontSize={11} fill="#333333">
+                  {label}
+                </text>
+              </g>
+          )}
+        </g>
+    );
+}
+
+// マウスホイールでのズームとドラッグでの視点移動をd3.zoomに任せるフック。
+// `initialTransform`({x,y,k})が渡された場合、マウント時にd3.zoom自身の
+// 内部状態もそれで初期化する(d3の内部状態も合わせないと、最初の操作で
+// transformが(0,0,1)に巻き戻ってしまう)。
+function usePanZoom (initialTransform) {
+    const containerRef = useRef(null);
+    const [transform, setTransform] = useState(initialTransform || { x: 0, y: 0, k: 1 });
+    const [isDragging, setIsDragging] = useState(false);
+
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el) return;
+
+        const zoomBehavior = d3.zoom()
+            .scaleExtent([ZOOM_MIN, ZOOM_MAX])
+            .on('start', () => setIsDragging(true))
+            .on('zoom', (event) => setTransform({ x: event.transform.x, y: event.transform.y, k: event.transform.k }))
+            .on('end', () => setIsDragging(false));
+
+        const selection = d3.select(el);
+        selection.call(zoomBehavior);
+
+        if (initialTransform) {
+            zoomBehavior.transform(
+                selection,
+                d3.zoomIdentity.translate(initialTransform.x, initialTransform.y).scale(initialTransform.k),
+            );
+        }
+
+        return () => selection.on('.zoom', null);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- 初期transformは
+        // マウント時に1回だけ適用する(依存に入れるとズーム操作のたびに戻ってしまう)。
+    }, []);
+
+    return { containerRef, transform, isDragging };
+}
+
+export default function D3Sql ({ data }) {
+    // 正規化・レイアウト・線の幾何はデータクラス(SqlModel)に任せる。
+    const model = useMemo(() => new SqlModel(data), [data]);
+    const { containerRef, transform, isDragging } = usePanZoom(model.initialTransform(INITIAL_PADDING));
+    const [selectedLabel, setSelectedLabel] = useState(null);
+
+    return (
+        <div ref={containerRef}
+             style={{
+                 width: '100%',
+                 height: '100%',
+                 overflow: 'hidden',
+                 cursor: isDragging ? 'grabbing' : 'grab',
+                 userSelect: 'none',
+             }}>
+          <svg width="100%" height="100%">
+            <defs>
+              <marker id="d3-sql-arrow" viewBox="0 0 10 10" refX="9" refY="5"
+                      markerWidth={7} markerHeight={7} orient="auto-start-reverse">
+                <path d="M 0 0 L 10 5 L 0 10 z" fill="#666666"/>
+              </marker>
+            </defs>
+            <g transform={`translate(${transform.x},${transform.y}) scale(${transform.k})`}>
+              {model.joinLines.map(({ key, ...edge }) => <JoinEdge key={key} {...edge}/>)}
+              {model.lineageLines.map(({ key, ...edge }) => (
+                  <LineageEdge key={key} {...edge} onLabelClick={setSelectedLabel}/>
+              ))}
+              {model.boxList().map((box) => <EntityBox key={box.id} box={box}/>)}
+              {model.boxList().filter((box) => box.whereText).map((box) => {
+                  // WHERE/ORDER BYなど、そのエンティティのSELECTスコープに
+                  // 付随する句のテキストは、そのエンティティ自身のxに揃え、
+                  // その箱の下端から22px下に配置する(サブクエリごとに別々の
+                  // WHEREを持つ場合は、それぞれのResult/実テーブルの直下に
+                  // 表示する)。
+                  const textX = box.x;
+                  const textY = box.y + box.h + 22;
+                  return (
+                      <text key={`clause:${box.id}`} x={textX} y={textY} fontFamily="monospace"
+                            fontSize={13} fill="#333333" xmlSpace="preserve">
+                        {box.whereText.split('\n').map((line, i) => (
+                            <tspan key={i} x={textX} dy={i === 0 ? 0 : 18}>
+                              {line}
+                            </tspan>
+                        ))}
+                      </text>
+                  );
+              })}
+            </g>
+          </svg>
+          <LineageLabelPopup info={selectedLabel} onClose={() => setSelectedLabel(null)}/>
+        </div>
+    );
+}

package/src/index.js

@@ -0,0 +1,5 @@
+import D3Sql from './components/D3Sql.js';
+import SqlModel from './js/SqlModel.js';
+
+export { SqlModel };
+export default D3Sql;