@yanqirenshi/d3.sql 0.1.0

package/src/js/SqlModel.js

@@ -0,0 +1,601 @@
+// SqlModel — SQL リネージグラフのデータクラス。
+// 入力({entities, lineageEdges, joinEdges})の正規化・自動レイアウト・
+// 線の幾何計算までを持ち、DOM/React には依存しない(描画は D3Sql が担当)。
+//
+// データモデル(元プロジェクト sql-sitter との会話で決めたルール):
+// - entities: 箱1つ分。kind='table'は物理テーブル、kind='result'はそのSELECT
+//   スコープの出力(サブクエリなら内側から Result 1, Result 2, ... と数える。
+//   最終スコープだけ番号を外して太字の「Result」にする)。
+//   alias は FROM句の `AS エイリアス` を箱の上に表示するためのキャプション。
+//   `whereText`があれば、その箱の直下にWHERE/HAVINGなどの句をそのまま
+//   テキストで表示する。`orderByColumns`(列名の配列、ORDER BY内の
+//   並び順)があれば、対応する行の右端に順序番号のboxを付ける。
+//   `distinct`があれば右辺に縦帯を付ける(DISTINCTに限らず、UNIONの
+//   合流点など他の意味でも使う)。帯のラベルは既定で「distinct」、
+//   `bandLabel`があればそちらを表示する。`columns`を指定しなければ、
+//   lineageEdges/joinEdgesで実際に参照されている列から自動導出する。
+// - lineageEdges: 列の値がどこから来たかを示す矢印(常にResult側へ向く)。
+//   label は GROUP BYキーなら `G01`/`G02`...(GROUP BY内の並び順)、集約/
+//   ウィンドウ関数・式経由ならその内容(例: `MAX`, `LTRIM`, `/1000`)、
+//   単純な値渡しならラベル無し。`from`は単一の{entity,column}のほか、
+//   式が複数列にわたる場合は配列になる(1つのラベルboxから複数本の
+//   斜め線を引く)。リテラル値や引数に列を取らない関数呼び出し(例:
+//   `current_date()`)は由来が無いので矢印無し(`from: null`)。
+// - joinEdges: 列同士の一致関係(データの変換ではなく条件)。joinType の
+//   矢印方向は LEFT='b側にだけ矢印', RIGHT='a側にだけ矢印', INNER='矢印
+//   無しの線'。`kind:'in'`は`WHERE col IN (サブクエリ)`(破線の間隔を
+//   JOINより細かくして見分ける、label既定は'IN')。
+
+import * as d3 from 'd3';
+import { graphStratify, sugiyama, tweakDirection } from 'd3-dag';
+
+export const ROW_H = 28;
+export const HEADER_H = 34;
+export const BOX_W = 240;
+export const BRANCH_GAP = 11;
+export const LINEAGE_LABEL_GAP = 40;
+// DISTINCTを表す縦長の帯の幅。SELECT DISTINCTのResultの右辺に付け、
+// そのResultへ入る全てのリネージ線をこの帯の右端まで延長する。
+export const DISTINCT_BAND_WIDTH = 24;
+
+const LAYER_SPACING = 400;
+const SIBLING_GAP = 40;
+
+export function shuffled (items) {
+    const arr = [...items];
+    for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+}
+
+// 実テーブル(kind='table')のヘッダ色。同じ物理テーブル名(title)を使う
+// エンティティは全て同じ色にする。色の割り当てには d3 の scaleOrdinal +
+// schemeTableau10 を使い、どのtitleがどの色になるかはドメインの順序を
+// シャッフルすることでランダムにする。
+export function buildTableColors (entities) {
+    const titles = Array.from(new Set(entities.filter((e) => e.kind === 'table').map((e) => e.title)));
+    const colorScale = d3.scaleOrdinal(d3.schemeTableau10).domain(shuffled(titles));
+    const colors = {};
+    titles.forEach((title) => {
+        colors[title] = colorScale(title);
+    });
+    return colors;
+}
+
+// sql-sitterのextract_graph()(実データ)がentityに列一覧を持たない場合は、
+// lineageEdges/joinEdgesで実際に参照されている列を初出順に集めて補う
+// (明示された`columns`があればそれを優先する)。
+export function withDerivedColumns (entities, lineageEdges, joinEdges) {
+    const columnsById = {};
+    const seenById = {};
+    entities.forEach((e) => { columnsById[e.id] = []; seenById[e.id] = new Set(); });
+
+    const addRef = (ref) => {
+        if (!ref) return;
+        (Array.isArray(ref) ? ref : [ref]).forEach(({ entity, column }) => {
+            if (!seenById[entity] || seenById[entity].has(column)) return;
+            seenById[entity].add(column);
+            columnsById[entity].push(column);
+        });
+    };
+
+    lineageEdges.forEach((edge) => { addRef(edge.from); addRef(edge.to); });
+    joinEdges.forEach((edge) => { addRef(edge.a); addRef(edge.b); });
+
+    return entities.map((e) => (e.columns ? e : { ...e, columns: columnsById[e.id] }));
+}
+
+// sql-sitterはResultスコープを内側から順にResult 1, Result 2, ...と
+// 番号を振り、最終スコープ(一番外側)が常に一番大きい番号になる
+// (番号付きは中間サブクエリの出力、最終スコープだけ番号を外して
+// 太字+黒背景白文字の「Result」にする)。この規則で自動判定し、
+// データ側でいちいち title/headerColor を指定しなくて済むようにする。
+const RESULT_NUMBER_RE = /^Result (\d+)$/;
+
+export function markFinalResult (entities) {
+    let final = null;
+    entities.forEach((e) => {
+        if (e.kind !== 'result') return;
+        const m = RESULT_NUMBER_RE.exec(e.title);
+        if (!m) return;
+        const num = parseInt(m[1], 10);
+        if (!final || num > final.num) final = { entity: e, num };
+    });
+    if (!final) return entities;
+    return entities.map((e) => (e === final.entity
+        ? {
+            ...e,
+            title: 'Result',
+            headerColor: e.headerColor || '#000000',
+            headerTextColor: e.headerTextColor || '#ffffff',
+        }
+        : e));
+}
+
+export function entityHeight (entity) {
+    return HEADER_H + entity.columns.length * ROW_H;
+}
+
+// JOINで結び付くエンティティ同士をUnion-Findでグループ化する。同じ
+// グループのエンティティは自動レイアウトで同じ列(レイヤー)に配置する
+// (JOINで繋がる相手とは同じ列に並べる)。
+export function groupByJoin (entities, joinEdges) {
+    const parent = {};
+    entities.forEach((e) => { parent[e.id] = e.id; });
+    const find = (x) => {
+        while (parent[x] !== x) x = parent[x];
+        return x;
+    };
+    joinEdges.forEach((edge) => {
+        const ra = find(edge.a.entity);
+        const rb = find(edge.b.entity);
+        if (ra !== rb) parent[ra] = rb;
+    });
+
+    const groups = {};
+    entities.forEach((entity) => {
+        const g = find(entity.id);
+        (groups[g] = groups[g] || []).push(entity);
+    });
+    return { find, groups };
+}
+
+// entities/lineageEdges/joinEdgesからエンティティ毎の(x,y)を自動計算する。
+// JOINで繋がるエンティティをグループ化して1つのノードとしてd3-dagに渡し、
+// リネージの依存関係(lineageEdges)をグループ間のparentIdsとして
+// d3-dagのsugiyama(層状レイアウト)にレイヤリングさせる。tweakDirection
+// ('RL')で「深い(=物理テーブルに近い)ほど右、浅い(=最終結果)ほど左」に
+// 揃える。グループ内の複数エンティティ(JOINの相手同士)は同じ列内で
+// 縦に並べる。
+export function buildAutoPositions (entities, lineageEdges, joinEdges) {
+    if (entities.length === 0) return {};
+
+    const { find, groups } = groupByJoin(entities, joinEdges);
+
+    const groupParentIds = {};
+    Object.keys(groups).forEach((g) => { groupParentIds[g] = new Set(); });
+    lineageEdges.forEach((edge) => {
+        // `from`が無い(リテラル値・列を取らない関数呼び出し)エッジは
+        // 由来となる実体が無いのでレイアウトの依存関係には使わない。
+        if (!edge.from) return;
+        // `from`は単一の{entity,column}か、複数列を1つの式(例: ||連結)で
+        // 結合した場合の配列。
+        const froms = Array.isArray(edge.from) ? edge.from : [edge.from];
+        const gTo = find(edge.to.entity);
+        froms.forEach((f) => {
+            const gFrom = find(f.entity);
+            if (gFrom !== gTo) groupParentIds[gTo].add(gFrom);
+        });
+    });
+
+    const dagData = Object.keys(groups).map((g) => ({
+        id: g,
+        parentIds: Array.from(groupParentIds[g]),
+    }));
+    const groupHeight = (g) => groups[g].reduce((sum, e) => sum + entityHeight(e) + SIBLING_GAP, -SIBLING_GAP);
+
+    const dag = graphStratify()(dagData);
+    const layout = sugiyama()
+        .nodeSize((node) => [groupHeight(node.data.id), LAYER_SPACING])
+        // sugiyamaの既定gapは[1,1]で、同じ列(レイヤー)に並ぶ別グループ同士が
+        // ほぼ隙間無く接してしまうため、グループ内で使っているSIBLING_GAPと
+        // 同じ幅を明示的に確保する。
+        .gap([SIBLING_GAP, 0])
+        .tweaks([tweakDirection('RL')]);
+    layout(dag);
+
+    // X(列・レイヤー)はsugiyamaの結果をそのまま使う。Yはsugiyamaに任せず、
+    // 「1つのSQL(サブクエリも含む)ではスコープのメンバー全員を同じ高さに
+    // 揃える」というルールで実テーブル側から再帰的に組み立て直す。
+    const xById = {};
+    for (const node of dag.nodes()) {
+        groups[node.data.id].forEach((entity) => { xById[entity.id] = node.x; });
+    }
+
+    // ラベルbox(見積もり幅)がJOIN線や次の列のエンティティと被らないよう、
+    // 列の間隔をラベル幅に応じて広げる(ラベルboxの右端とJOIN線/
+    // エンティティの間は11pxの余白を確保する)。
+    const widenedXById = widenColumnsForLabels(xById, lineageEdges, entities);
+
+    return buildTopAlignedPositions(entities, lineageEdges, joinEdges, widenedXById, find, groups);
+}
+
+// ラベル文字列からラベルboxのおおよその幅を見積もる(全角文字は半角の
+// 約2倍幅として計算)。実際の描画幅はSVGの<text>で実測するが、レイアウト
+// (列の間隔)を決める段階ではDOM測定前なので、この見積もりを使う。
+export function estimateLabelWidth (label) {
+    if (!label) return 0;
+    let width = 8;
+    for (const ch of label) {
+        const code = ch.codePointAt(0);
+        const isWide =
+            (code >= 0x1100 && code <= 0x115f) ||
+            (code >= 0x2e80 && code <= 0xa4cf) ||
+            (code >= 0xac00 && code <= 0xd7a3) ||
+            (code >= 0xf900 && code <= 0xfaff) ||
+            (code >= 0xff00 && code <= 0xff60) ||
+            (code >= 0xffe0 && code <= 0xffe6);
+        width += isWide ? 13 : 7;
+    }
+    return width;
+}
+
+// 各列(x)の右側の間隔を、そこを`to`とするラベル付きリネージ線のラベル幅
+// (見積もり)+ 余白ぶん確保できるよう広げる。列の並び順(ランク)は
+// 変えず、間隔だけを必要に応じて広げる。ラベルの左端は`to`のエンティティ
+// 自身の幅(BOX_W)・DISTINCT帯の分だけ`to.x`より右にずれるので、その分も
+// 加味する(これを忘れるとJOIN線/次のエンティティと被る)。
+export function widenColumnsForLabels (xById, lineageEdges, entities) {
+    const ranks = [...new Set(Object.values(xById))].sort((a, b) => a - b);
+    if (ranks.length === 0) return xById;
+
+    const entityById = {};
+    entities.forEach((e) => { entityById[e.id] = e; });
+
+    const requiredGapAfter = {};
+    lineageEdges.forEach((edge) => {
+        if (!edge.label || !edge.to) return;
+        const toX = xById[edge.to.entity];
+        const toEntity = entityById[edge.to.entity];
+        if (toX === undefined || !toEntity) return;
+        const toEdgeOffset = BOX_W + (toEntity.distinct ? BRANCH_GAP + DISTINCT_BAND_WIDTH : 0);
+        const needed = toEdgeOffset + LINEAGE_LABEL_GAP + estimateLabelWidth(edge.label) + BRANCH_GAP;
+        requiredGapAfter[toX] = Math.max(requiredGapAfter[toX] || 0, needed);
+    });
+
+    const remapped = { [ranks[0]]: ranks[0] };
+    for (let i = 1; i < ranks.length; i++) {
+        const prevRank = ranks[i - 1];
+        const gap = Math.max(ranks[i] - prevRank, requiredGapAfter[prevRank] || 0);
+        remapped[ranks[i]] = remapped[prevRank] + gap;
+    }
+
+    const adjusted = {};
+    Object.keys(xById).forEach((id) => {
+        adjusted[id] = remapped[xById[id]];
+    });
+    return adjusted;
+}
+
+// entity.id -> lineageEdgesから求めた「直接の子」(そのエンティティ自身の
+// SQLスコープのFROM句に出てくる参照先)の一覧(重複無し、初出順)。実テーブル
+// は他から値を受け取らないので常に空になる。
+export function buildLineageChildren (entities, lineageEdges) {
+    const children = {};
+    entities.forEach((e) => { children[e.id] = []; });
+    const seen = new Set();
+    lineageEdges.forEach((edge) => {
+        // `from`が無い(リテラル値・列を取らない関数呼び出し)エッジは
+        // 由来となる実体が無いのでスコープの子には含めない。
+        if (!edge.from) return;
+        const froms = Array.isArray(edge.from) ? edge.from : [edge.from];
+        froms.forEach((f) => {
+            if (f.entity === edge.to.entity) return;
+            const key = `${edge.to.entity}|${f.entity}`;
+            if (seen.has(key)) return;
+            seen.add(key);
+            children[edge.to.entity].push(f.entity);
+        });
+    });
+    return children;
+}
+
+// JOINの a側を上、b側を下にする表示順。members内で直接JOINしている関係
+// だけを使う簡易的な位相ソート(サイクルが無い前提。無ければ元の順のまま)。
+export function orderByJoinAB (members, joinEdges) {
+    const before = {};
+    members.forEach((m) => { before[m] = new Set(); });
+    joinEdges.forEach((edge) => {
+        const a = edge.a.entity;
+        const b = edge.b.entity;
+        if (before[a] !== undefined && before[b] !== undefined) {
+            before[b].add(a);
+        }
+    });
+    const ordered = [];
+    const remaining = new Set(members);
+    while (remaining.size > 0) {
+        const next = [...remaining].find((m) => [...before[m]].every((dep) => !remaining.has(dep)));
+        const pick = next !== undefined ? next : [...remaining][0];
+        ordered.push(pick);
+        remaining.delete(pick);
+    }
+    return ordered;
+}
+
+// 「1つのSQL(サブクエリも含む)では上端を揃え、JOINがあれば縦に積む」
+// というルールでYを実テーブル側から再帰的に組み立てる。あるエンティティの
+// 「スコープメンバー」=直接の子をJOIN相手も含めて拡張した集合。スコープ
+// メンバーが1つだけなら、その子と同じYに揃える。複数(JOIN)で、そのうち
+// 自分の子を持つ(=さらに深いリネージがある)メンバーが1つだけなら、その
+// メンバーの自然なYはそのままにして、他の実テーブル側はJOINのa/b順で
+// 隙間無く隣接させる(上にも負のYまで拡張して構わない)。複数のメンバーが
+// それぞれ自分の子を持つ場合は、無理に隙間0で隣接させず、reachが大きい方を
+// 優先して自然なYを尊重しつつ重ならないように詰める。
+export function buildTopAlignedPositions (entities, lineageEdges, joinEdges, xById, find, groups) {
+    const entityById = {};
+    entities.forEach((e) => { entityById[e.id] = e; });
+    const lineageChildren = buildLineageChildren(entities, lineageEdges);
+
+    const scopeMembersOf = (entityId) => {
+        const memberIds = new Set();
+        lineageChildren[entityId].forEach((childId) => {
+            groups[find(childId)].forEach((m) => memberIds.add(m.id));
+        });
+        return entities.filter((e) => memberIds.has(e.id)).map((e) => e.id);
+    };
+
+    const reachCache = {};
+    const reachOf = (entityId) => {
+        if (entityId in reachCache) return reachCache[entityId];
+        reachCache[entityId] = xById[entityId];
+        let reach = xById[entityId];
+        scopeMembersOf(entityId).forEach((childId) => {
+            reach = Math.max(reach, reachOf(childId));
+        });
+        reachCache[entityId] = reach;
+        return reach;
+    };
+
+    const positions = {};
+    const nextY = {};
+    const visited = new Set();
+
+    function place (entityId, desiredY) {
+        const x = xById[entityId];
+        // 列が未使用ならdesiredYをそのまま使う(負の値も許す。JOIN相手の
+        // 実テーブル側をa/b順で隣接させるために上へ伸びることがある)。
+        const minY = x in nextY ? nextY[x] : -Infinity;
+        const y = Math.max(desiredY, minY);
+        positions[entityId] = { x, y };
+        nextY[x] = y + entityHeight(entityById[entityId]) + SIBLING_GAP;
+    }
+
+    // メンバー全体(メンバー自身の既に確定済みの子孫も含む)をdelta分
+    // だけずらす。子孫との相対位置(揃え)を保ったまま動かすため。
+    function shiftSubtree (id, delta) {
+        if (delta === 0) return;
+        positions[id] = { ...positions[id], y: positions[id].y + delta };
+        scopeMembersOf(id).forEach((childId) => shiftSubtree(childId, delta));
+    }
+
+    function assign (entityId) {
+        if (visited.has(entityId)) return;
+        visited.add(entityId);
+
+        const members = scopeMembersOf(entityId);
+        if (members.length === 0) {
+            place(entityId, 0);
+            return;
+        }
+
+        // 制約の強い(その先の列が深い)メンバーから先に確定させる。
+        const byReach = [...members].sort((a, b) => reachOf(b) - reachOf(a));
+        byReach.forEach(assign);
+
+        // 一番reachが大きい(外部への繋がりが深い)メンバーを基準
+        // (アンカー)にして動かさない。他のメンバーはJOINのa/b順で隙間
+        // 無く隣接させ、既に確定済みの子孫がいればまとめてずらす(負のY
+        // まで拡張して構わない)。このエンティティ自身は、メンバー全員の
+        // 中で一番上(Yが最小)になったものに揃える。
+        const anchor = byReach[0];
+        const ab = orderByJoinAB(members, joinEdges);
+        const anchorIndex = ab.indexOf(anchor);
+        for (let i = anchorIndex - 1; i >= 0; i--) {
+            const below = ab[i + 1];
+            const targetY = positions[below].y - entityHeight(entityById[ab[i]]) - SIBLING_GAP;
+            shiftSubtree(ab[i], targetY - positions[ab[i]].y);
+        }
+        for (let i = anchorIndex + 1; i < ab.length; i++) {
+            const above = ab[i - 1];
+            const targetY = positions[above].y + entityHeight(entityById[above]) + SIBLING_GAP;
+            shiftSubtree(ab[i], targetY - positions[ab[i]].y);
+        }
+
+        const topY = Math.min(...members.map((id) => positions[id].y));
+        place(entityId, topY);
+    }
+
+    [...entities].sort((a, b) => reachOf(b.id) - reachOf(a.id)).forEach((e) => assign(e.id));
+
+    // 保険: 再帰的な組み立てで多少の誤差が出ても、列内の重なりだけは必ず
+    // 無くす(Y順に並べ、隙間が無ければ後ろのものを必要な分だけ下へずらす)。
+    const byColumn = {};
+    Object.entries(positions).forEach(([id, pos]) => {
+        (byColumn[pos.x] = byColumn[pos.x] || []).push(id);
+    });
+    Object.values(byColumn).forEach((ids) => {
+        ids.sort((a, b) => positions[a].y - positions[b].y);
+        let minY = -Infinity;
+        ids.forEach((id) => {
+            if (positions[id].y < minY) positions[id].y = minY;
+            minY = positions[id].y + entityHeight(entityById[id]) + SIBLING_GAP;
+        });
+    });
+
+    return positions;
+}
+
+export function buildLayout (entities, positions, tableColors) {
+    const boxes = {};
+    entities.forEach((entity) => {
+        const h = entityHeight(entity);
+        const pos = positions[entity.id];
+        boxes[entity.id] = {
+            id: entity.id,
+            x: pos.x,
+            y: pos.y,
+            w: BOX_W,
+            h,
+            title: entity.title,
+            alias: entity.alias,
+            headerColor: entity.headerColor || (entity.kind === 'table' ? tableColors[entity.title] : null),
+            headerTextColor: entity.headerTextColor || null,
+            distinct: !!entity.distinct,
+            bandLabel: entity.bandLabel || 'distinct',
+            orderByColumns: entity.orderByColumns || null,
+            whereText: entity.whereText || null,
+            rows: entity.columns.map((col, i) => ({
+                name: col,
+                y: pos.y + HEADER_H + i * ROW_H + ROW_H / 2,
+            })),
+        };
+    });
+    return boxes;
+}
+
+export function findRowY (box, columnName) {
+    const row = box && box.rows.find((r) => r.name === columnName);
+    return row ? row.y : null;
+}
+
+// JOIN線の幾何。aの左辺から一度左に出てから下へ、bの左辺へ横に入る
+// エルボー型の折れ線。同じ起点(a)から出るJOIN線が複数あるときに、縦の
+// ガイド線が重ならないよう起点ごとに少しずつオフセットする。
+// あわせて「どの列がJOIN線の分岐点(branchX)を持つか」の索引も返す。
+// SELECT側の線はこの分岐点がある列なら、箱の縁ではなく分岐点から始める
+// (「分岐点から線を引く」ルール)。
+export function buildJoinLines (boxes, joinEdges) {
+    const branchOffsets = {};
+    const branchPointByPort = {};
+    const lines = joinEdges.map((edge) => {
+        const a = boxes[edge.a.entity];
+        const b = boxes[edge.b.entity];
+        const y1 = findRowY(a, edge.a.column);
+        const y2 = findRowY(b, edge.b.column);
+        if (!a || !b || y1 === null || y2 === null) return null;
+
+        const offsetIndex = branchOffsets[edge.a.entity] || 0;
+        branchOffsets[edge.a.entity] = offsetIndex + 1;
+        const branchX = a.x - 20 - offsetIndex * 10;
+        branchPointByPort[`${edge.a.entity}.${edge.a.column}`] = branchX;
+
+        return {
+            key: `join:${edge.a.entity}.${edge.a.column}<->${edge.b.entity}.${edge.b.column}`,
+            x1: a.x,
+            y1,
+            x2: b.x,
+            y2,
+            branchX,
+            joinType: edge.joinType,
+            label: edge.label,
+            kind: edge.kind,
+        };
+    }).filter(Boolean);
+
+    return { lines, branchPointByPort };
+}
+
+// リネージ線の幾何。常にsource(右)からResult側(左)へ向く。
+// DISTINCTの帯がある場合は、そこまで線を延長する(distinctは全ての
+// リネージ線が通る帯として表現する。帯とResult本体の間は11pxの余白)。
+// ラベルの左端はbranchXのブレに関わらず、宛先(to)の縁からの固定距離に
+// する(左端位置を揃える)。
+export function buildLineageLines (boxes, lineageEdges, branchPointByPort) {
+    return lineageEdges.map((edge) => {
+        const to = boxes[edge.to.entity];
+        const y2 = findRowY(to, edge.to.column);
+        if (!to || y2 === null) return null;
+
+        const toEdgeX = to.x + to.w + (to.distinct ? BRANCH_GAP + DISTINCT_BAND_WIDTH : 0);
+        const labelX = toEdgeX + LINEAGE_LABEL_GAP;
+
+        if (!edge.from) {
+            // リテラル値・列を取らない関数呼び出し(由来となる実テーブルが
+            // 無い列)は、ラベルboxからResultへの短い矢印だけを描く。
+            return {
+                key: `literal:${edge.to.entity}.${edge.to.column}`,
+                x1: labelX,
+                y1: y2,
+                x2: toEdgeX,
+                y2,
+                labelX,
+                label: edge.label,
+                showPort: false,
+                labelInfo: {
+                    label: edge.label,
+                    fromTitle: null,
+                    fromColumn: null,
+                    toTitle: to.alias || to.title,
+                    toColumn: edge.to.column,
+                    sql: edge.sql,
+                },
+            };
+        }
+
+        // `from`は単一の{entity,column}か、複数列を1つの式(例: ||連結)で
+        // 結合した場合の配列(1つのラベルboxから複数本の斜め線を引く)。
+        const froms = Array.isArray(edge.from) ? edge.from : [edge.from];
+        const sources = [];
+        for (const f of froms) {
+            const from = boxes[f.entity];
+            const y1 = findRowY(from, f.column);
+            if (!from || y1 === null) return null;
+            const branchX = branchPointByPort[`${f.entity}.${f.column}`];
+            // JOIN線の角(branchX)、またはJOIN線が無い場合はエンティティの縁
+            // との間を、SELECT側の線の開始点が重なって見えないよう少しだけ
+            // 離す。
+            const startX = (branchX !== undefined ? branchX : from.x) - BRANCH_GAP;
+            sources.push({ x: startX, y: y1, title: from.alias || from.title, column: f.column });
+        }
+
+        return {
+            key: `lineage:${froms.map((f) => `${f.entity}.${f.column}`).join('+')}->${edge.to.entity}.${edge.to.column}`,
+            x1: sources[0].x,
+            y1: sources[0].y,
+            x2: toEdgeX,
+            y2,
+            labelX,
+            label: edge.label,
+            sources,
+            labelInfo: {
+                label: edge.label,
+                fromDisplay: sources.map((s) => `${s.title}.${s.column}`).join(' , '),
+                toTitle: to.alias || to.title,
+                toColumn: edge.to.column,
+                sql: edge.sql,
+            },
+        };
+    }).filter(Boolean);
+}
+
+// SQL リネージグラフのデータクラス本体。入力の正規化(列の自動導出・
+// 最終Resultの判定)からレイアウト(自動配置・箱の寸法)・線の幾何までを
+// 構築時に済ませ、描画側(D3Sql)は結果を SVG に写すだけにする。
+export default class SqlModel {
+    constructor (data) {
+        const raw = data || {};
+
+        this._core = raw;
+
+        this.entities = markFinalResult(
+            withDerivedColumns(raw.entities || [], raw.lineageEdges || [], raw.joinEdges || []));
+        this.lineageEdges = raw.lineageEdges || [];
+        this.joinEdges = raw.joinEdges || [];
+
+        this.tableColors = buildTableColors(this.entities);
+        this.positions = buildAutoPositions(this.entities, this.lineageEdges, this.joinEdges);
+        this.boxes = buildLayout(this.entities, this.positions, this.tableColors);
+
+        const join = buildJoinLines(this.boxes, this.joinEdges);
+        this.joinLines = join.lines;
+        this.lineageLines = buildLineageLines(this.boxes, this.lineageEdges, join.branchPointByPort);
+    }
+    boxList () {
+        return Object.values(this.boxes);
+    }
+    // レイアウトは負のYまで伸びることがあるので、初期表示はコンテンツの
+    // 左上(負の座標も含む)に余白を付けて揃える(そうしないと、最終Result
+    // などの箱が初期ビューポート外になり、パン操作をしないと見えない)。
+    initialTransform (padding = 40) {
+        const boxes = this.boxList();
+        if (boxes.length === 0) return { x: 0, y: 0, k: 1 };
+        return {
+            x: padding - Math.min(...boxes.map((b) => b.x)),
+            y: padding - Math.min(...boxes.map((b) => b.y)),
+            k: 1,
+        };
+    }
+}