@yanqirenshi/d3.sql 0.1.0

package/dist/js/SqlModel.js

@@ -0,0 +1,717 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+// 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 var ROW_H = 28;
+export var HEADER_H = 34;
+export var BOX_W = 240;
+export var BRANCH_GAP = 11;
+export var LINEAGE_LABEL_GAP = 40;
+// DISTINCTを表す縦長の帯の幅。SELECT DISTINCTのResultの右辺に付け、
+// そのResultへ入る全てのリネージ線をこの帯の右端まで延長する。
+export var DISTINCT_BAND_WIDTH = 24;
+var LAYER_SPACING = 400;
+var SIBLING_GAP = 40;
+export function shuffled(items) {
+  var arr = _toConsumableArray(items);
+  for (var i = arr.length - 1; i > 0; i--) {
+    var j = Math.floor(Math.random() * (i + 1));
+    var _ref = [arr[j], arr[i]];
+    arr[i] = _ref[0];
+    arr[j] = _ref[1];
+  }
+  return arr;
+}
+
+// 実テーブル(kind='table')のヘッダ色。同じ物理テーブル名(title)を使う
+// エンティティは全て同じ色にする。色の割り当てには d3 の scaleOrdinal +
+// schemeTableau10 を使い、どのtitleがどの色になるかはドメインの順序を
+// シャッフルすることでランダムにする。
+export function buildTableColors(entities) {
+  var titles = Array.from(new Set(entities.filter(function (e) {
+    return e.kind === 'table';
+  }).map(function (e) {
+    return e.title;
+  })));
+  var colorScale = d3.scaleOrdinal(d3.schemeTableau10).domain(shuffled(titles));
+  var colors = {};
+  titles.forEach(function (title) {
+    colors[title] = colorScale(title);
+  });
+  return colors;
+}
+
+// sql-sitterのextract_graph()(実データ)がentityに列一覧を持たない場合は、
+// lineageEdges/joinEdgesで実際に参照されている列を初出順に集めて補う
+// (明示された`columns`があればそれを優先する)。
+export function withDerivedColumns(entities, lineageEdges, joinEdges) {
+  var columnsById = {};
+  var seenById = {};
+  entities.forEach(function (e) {
+    columnsById[e.id] = [];
+    seenById[e.id] = new Set();
+  });
+  var addRef = function addRef(ref) {
+    if (!ref) return;
+    (Array.isArray(ref) ? ref : [ref]).forEach(function (_ref2) {
+      var entity = _ref2.entity,
+        column = _ref2.column;
+      if (!seenById[entity] || seenById[entity].has(column)) return;
+      seenById[entity].add(column);
+      columnsById[entity].push(column);
+    });
+  };
+  lineageEdges.forEach(function (edge) {
+    addRef(edge.from);
+    addRef(edge.to);
+  });
+  joinEdges.forEach(function (edge) {
+    addRef(edge.a);
+    addRef(edge.b);
+  });
+  return entities.map(function (e) {
+    return e.columns ? e : _objectSpread(_objectSpread({}, e), {}, {
+      columns: columnsById[e.id]
+    });
+  });
+}
+
+// sql-sitterはResultスコープを内側から順にResult 1, Result 2, ...と
+// 番号を振り、最終スコープ(一番外側)が常に一番大きい番号になる
+// (番号付きは中間サブクエリの出力、最終スコープだけ番号を外して
+// 太字+黒背景白文字の「Result」にする)。この規則で自動判定し、
+// データ側でいちいち title/headerColor を指定しなくて済むようにする。
+var RESULT_NUMBER_RE = /^Result (\d+)$/;
+export function markFinalResult(entities) {
+  var _final = null;
+  entities.forEach(function (e) {
+    if (e.kind !== 'result') return;
+    var m = RESULT_NUMBER_RE.exec(e.title);
+    if (!m) return;
+    var num = parseInt(m[1], 10);
+    if (!_final || num > _final.num) _final = {
+      entity: e,
+      num: num
+    };
+  });
+  if (!_final) return entities;
+  return entities.map(function (e) {
+    return e === _final.entity ? _objectSpread(_objectSpread({}, 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) {
+  var parent = {};
+  entities.forEach(function (e) {
+    parent[e.id] = e.id;
+  });
+  var find = function find(x) {
+    while (parent[x] !== x) x = parent[x];
+    return x;
+  };
+  joinEdges.forEach(function (edge) {
+    var ra = find(edge.a.entity);
+    var rb = find(edge.b.entity);
+    if (ra !== rb) parent[ra] = rb;
+  });
+  var groups = {};
+  entities.forEach(function (entity) {
+    var g = find(entity.id);
+    (groups[g] = groups[g] || []).push(entity);
+  });
+  return {
+    find: find,
+    groups: 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 {};
+  var _groupByJoin = groupByJoin(entities, joinEdges),
+    find = _groupByJoin.find,
+    groups = _groupByJoin.groups;
+  var groupParentIds = {};
+  Object.keys(groups).forEach(function (g) {
+    groupParentIds[g] = new Set();
+  });
+  lineageEdges.forEach(function (edge) {
+    // `from`が無い(リテラル値・列を取らない関数呼び出し)エッジは
+    // 由来となる実体が無いのでレイアウトの依存関係には使わない。
+    if (!edge.from) return;
+    // `from`は単一の{entity,column}か、複数列を1つの式(例: ||連結)で
+    // 結合した場合の配列。
+    var froms = Array.isArray(edge.from) ? edge.from : [edge.from];
+    var gTo = find(edge.to.entity);
+    froms.forEach(function (f) {
+      var gFrom = find(f.entity);
+      if (gFrom !== gTo) groupParentIds[gTo].add(gFrom);
+    });
+  });
+  var dagData = Object.keys(groups).map(function (g) {
+    return {
+      id: g,
+      parentIds: Array.from(groupParentIds[g])
+    };
+  });
+  var groupHeight = function groupHeight(g) {
+    return groups[g].reduce(function (sum, e) {
+      return sum + entityHeight(e) + SIBLING_GAP;
+    }, -SIBLING_GAP);
+  };
+  var dag = graphStratify()(dagData);
+  var layout = sugiyama().nodeSize(function (node) {
+    return [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(サブクエリも含む)ではスコープのメンバー全員を同じ高さに
+  // 揃える」というルールで実テーブル側から再帰的に組み立て直す。
+  var xById = {};
+  var _iterator = _createForOfIteratorHelper(dag.nodes()),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var node = _step.value;
+      groups[node.data.id].forEach(function (entity) {
+        xById[entity.id] = node.x;
+      });
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _loop();
+    }
+
+    // ラベルbox(見積もり幅)がJOIN線や次の列のエンティティと被らないよう、
+    // 列の間隔をラベル幅に応じて広げる(ラベルboxの右端とJOIN線/
+    // エンティティの間は11pxの余白を確保する)。
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var 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;
+  var width = 8;
+  var _iterator2 = _createForOfIteratorHelper(label),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var ch = _step2.value;
+      var code = ch.codePointAt(0);
+      var 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;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return width;
+}
+
+// 各列(x)の右側の間隔を、そこを`to`とするラベル付きリネージ線のラベル幅
+// (見積もり)+ 余白ぶん確保できるよう広げる。列の並び順(ランク)は
+// 変えず、間隔だけを必要に応じて広げる。ラベルの左端は`to`のエンティティ
+// 自身の幅(BOX_W)・DISTINCT帯の分だけ`to.x`より右にずれるので、その分も
+// 加味する(これを忘れるとJOIN線/次のエンティティと被る)。
+export function widenColumnsForLabels(xById, lineageEdges, entities) {
+  var ranks = _toConsumableArray(new Set(Object.values(xById))).sort(function (a, b) {
+    return a - b;
+  });
+  if (ranks.length === 0) return xById;
+  var entityById = {};
+  entities.forEach(function (e) {
+    entityById[e.id] = e;
+  });
+  var requiredGapAfter = {};
+  lineageEdges.forEach(function (edge) {
+    if (!edge.label || !edge.to) return;
+    var toX = xById[edge.to.entity];
+    var toEntity = entityById[edge.to.entity];
+    if (toX === undefined || !toEntity) return;
+    var toEdgeOffset = BOX_W + (toEntity.distinct ? BRANCH_GAP + DISTINCT_BAND_WIDTH : 0);
+    var needed = toEdgeOffset + LINEAGE_LABEL_GAP + estimateLabelWidth(edge.label) + BRANCH_GAP;
+    requiredGapAfter[toX] = Math.max(requiredGapAfter[toX] || 0, needed);
+  });
+  var remapped = _defineProperty({}, ranks[0], ranks[0]);
+  for (var i = 1; i < ranks.length; i++) {
+    var prevRank = ranks[i - 1];
+    var gap = Math.max(ranks[i] - prevRank, requiredGapAfter[prevRank] || 0);
+    remapped[ranks[i]] = remapped[prevRank] + gap;
+  }
+  var adjusted = {};
+  Object.keys(xById).forEach(function (id) {
+    adjusted[id] = remapped[xById[id]];
+  });
+  return adjusted;
+}
+
+// entity.id -> lineageEdgesから求めた「直接の子」(そのエンティティ自身の
+// SQLスコープのFROM句に出てくる参照先)の一覧(重複無し、初出順)。実テーブル
+// は他から値を受け取らないので常に空になる。
+export function buildLineageChildren(entities, lineageEdges) {
+  var children = {};
+  entities.forEach(function (e) {
+    children[e.id] = [];
+  });
+  var seen = new Set();
+  lineageEdges.forEach(function (edge) {
+    // `from`が無い(リテラル値・列を取らない関数呼び出し)エッジは
+    // 由来となる実体が無いのでスコープの子には含めない。
+    if (!edge.from) return;
+    var froms = Array.isArray(edge.from) ? edge.from : [edge.from];
+    froms.forEach(function (f) {
+      if (f.entity === edge.to.entity) return;
+      var key = "".concat(edge.to.entity, "|").concat(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) {
+  var before = {};
+  members.forEach(function (m) {
+    before[m] = new Set();
+  });
+  joinEdges.forEach(function (edge) {
+    var a = edge.a.entity;
+    var b = edge.b.entity;
+    if (before[a] !== undefined && before[b] !== undefined) {
+      before[b].add(a);
+    }
+  });
+  var ordered = [];
+  var remaining = new Set(members);
+  while (remaining.size > 0) {
+    var next = _toConsumableArray(remaining).find(function (m) {
+      return _toConsumableArray(before[m]).every(function (dep) {
+        return !remaining.has(dep);
+      });
+    });
+    var pick = next !== undefined ? next : _toConsumableArray(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) {
+  var entityById = {};
+  entities.forEach(function (e) {
+    entityById[e.id] = e;
+  });
+  var lineageChildren = buildLineageChildren(entities, lineageEdges);
+  var scopeMembersOf = function scopeMembersOf(entityId) {
+    var memberIds = new Set();
+    lineageChildren[entityId].forEach(function (childId) {
+      groups[find(childId)].forEach(function (m) {
+        return memberIds.add(m.id);
+      });
+    });
+    return entities.filter(function (e) {
+      return memberIds.has(e.id);
+    }).map(function (e) {
+      return e.id;
+    });
+  };
+  var reachCache = {};
+  var _reachOf = function reachOf(entityId) {
+    if (entityId in reachCache) return reachCache[entityId];
+    reachCache[entityId] = xById[entityId];
+    var reach = xById[entityId];
+    scopeMembersOf(entityId).forEach(function (childId) {
+      reach = Math.max(reach, _reachOf(childId));
+    });
+    reachCache[entityId] = reach;
+    return reach;
+  };
+  var positions = {};
+  var nextY = {};
+  var visited = new Set();
+  function place(entityId, desiredY) {
+    var x = xById[entityId];
+    // 列が未使用ならdesiredYをそのまま使う(負の値も許す。JOIN相手の
+    // 実テーブル側をa/b順で隣接させるために上へ伸びることがある)。
+    var minY = x in nextY ? nextY[x] : -Infinity;
+    var y = Math.max(desiredY, minY);
+    positions[entityId] = {
+      x: x,
+      y: y
+    };
+    nextY[x] = y + entityHeight(entityById[entityId]) + SIBLING_GAP;
+  }
+
+  // メンバー全体(メンバー自身の既に確定済みの子孫も含む)をdelta分
+  // だけずらす。子孫との相対位置(揃え)を保ったまま動かすため。
+  function shiftSubtree(id, delta) {
+    if (delta === 0) return;
+    positions[id] = _objectSpread(_objectSpread({}, positions[id]), {}, {
+      y: positions[id].y + delta
+    });
+    scopeMembersOf(id).forEach(function (childId) {
+      return shiftSubtree(childId, delta);
+    });
+  }
+  function assign(entityId) {
+    if (visited.has(entityId)) return;
+    visited.add(entityId);
+    var members = scopeMembersOf(entityId);
+    if (members.length === 0) {
+      place(entityId, 0);
+      return;
+    }
+
+    // 制約の強い(その先の列が深い)メンバーから先に確定させる。
+    var byReach = _toConsumableArray(members).sort(function (a, b) {
+      return _reachOf(b) - _reachOf(a);
+    });
+    byReach.forEach(assign);
+
+    // 一番reachが大きい(外部への繋がりが深い)メンバーを基準
+    // (アンカー)にして動かさない。他のメンバーはJOINのa/b順で隙間
+    // 無く隣接させ、既に確定済みの子孫がいればまとめてずらす(負のY
+    // まで拡張して構わない)。このエンティティ自身は、メンバー全員の
+    // 中で一番上(Yが最小)になったものに揃える。
+    var anchor = byReach[0];
+    var ab = orderByJoinAB(members, joinEdges);
+    var anchorIndex = ab.indexOf(anchor);
+    for (var i = anchorIndex - 1; i >= 0; i--) {
+      var below = ab[i + 1];
+      var targetY = positions[below].y - entityHeight(entityById[ab[i]]) - SIBLING_GAP;
+      shiftSubtree(ab[i], targetY - positions[ab[i]].y);
+    }
+    for (var _i = anchorIndex + 1; _i < ab.length; _i++) {
+      var above = ab[_i - 1];
+      var _targetY = positions[above].y + entityHeight(entityById[above]) + SIBLING_GAP;
+      shiftSubtree(ab[_i], _targetY - positions[ab[_i]].y);
+    }
+    var topY = Math.min.apply(Math, _toConsumableArray(members.map(function (id) {
+      return positions[id].y;
+    })));
+    place(entityId, topY);
+  }
+  _toConsumableArray(entities).sort(function (a, b) {
+    return _reachOf(b.id) - _reachOf(a.id);
+  }).forEach(function (e) {
+    return assign(e.id);
+  });
+
+  // 保険: 再帰的な組み立てで多少の誤差が出ても、列内の重なりだけは必ず
+  // 無くす(Y順に並べ、隙間が無ければ後ろのものを必要な分だけ下へずらす)。
+  var byColumn = {};
+  Object.entries(positions).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      id = _ref4[0],
+      pos = _ref4[1];
+    (byColumn[pos.x] = byColumn[pos.x] || []).push(id);
+  });
+  Object.values(byColumn).forEach(function (ids) {
+    ids.sort(function (a, b) {
+      return positions[a].y - positions[b].y;
+    });
+    var minY = -Infinity;
+    ids.forEach(function (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) {
+  var boxes = {};
+  entities.forEach(function (entity) {
+    var h = entityHeight(entity);
+    var pos = positions[entity.id];
+    boxes[entity.id] = {
+      id: entity.id,
+      x: pos.x,
+      y: pos.y,
+      w: BOX_W,
+      h: 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(function (col, i) {
+        return {
+          name: col,
+          y: pos.y + HEADER_H + i * ROW_H + ROW_H / 2
+        };
+      })
+    };
+  });
+  return boxes;
+}
+export function findRowY(box, columnName) {
+  var row = box && box.rows.find(function (r) {
+    return r.name === columnName;
+  });
+  return row ? row.y : null;
+}
+
+// JOIN線の幾何。aの左辺から一度左に出てから下へ、bの左辺へ横に入る
+// エルボー型の折れ線。同じ起点(a)から出るJOIN線が複数あるときに、縦の
+// ガイド線が重ならないよう起点ごとに少しずつオフセットする。
+// あわせて「どの列がJOIN線の分岐点(branchX)を持つか」の索引も返す。
+// SELECT側の線はこの分岐点がある列なら、箱の縁ではなく分岐点から始める
+// (「分岐点から線を引く」ルール)。
+export function buildJoinLines(boxes, joinEdges) {
+  var branchOffsets = {};
+  var branchPointByPort = {};
+  var lines = joinEdges.map(function (edge) {
+    var a = boxes[edge.a.entity];
+    var b = boxes[edge.b.entity];
+    var y1 = findRowY(a, edge.a.column);
+    var y2 = findRowY(b, edge.b.column);
+    if (!a || !b || y1 === null || y2 === null) return null;
+    var offsetIndex = branchOffsets[edge.a.entity] || 0;
+    branchOffsets[edge.a.entity] = offsetIndex + 1;
+    var branchX = a.x - 20 - offsetIndex * 10;
+    branchPointByPort["".concat(edge.a.entity, ".").concat(edge.a.column)] = branchX;
+    return {
+      key: "join:".concat(edge.a.entity, ".").concat(edge.a.column, "<->").concat(edge.b.entity, ".").concat(edge.b.column),
+      x1: a.x,
+      y1: y1,
+      x2: b.x,
+      y2: y2,
+      branchX: branchX,
+      joinType: edge.joinType,
+      label: edge.label,
+      kind: edge.kind
+    };
+  }).filter(Boolean);
+  return {
+    lines: lines,
+    branchPointByPort: branchPointByPort
+  };
+}
+
+// リネージ線の幾何。常にsource(右)からResult側(左)へ向く。
+// DISTINCTの帯がある場合は、そこまで線を延長する(distinctは全ての
+// リネージ線が通る帯として表現する。帯とResult本体の間は11pxの余白)。
+// ラベルの左端はbranchXのブレに関わらず、宛先(to)の縁からの固定距離に
+// する(左端位置を揃える)。
+export function buildLineageLines(boxes, lineageEdges, branchPointByPort) {
+  return lineageEdges.map(function (edge) {
+    var to = boxes[edge.to.entity];
+    var y2 = findRowY(to, edge.to.column);
+    if (!to || y2 === null) return null;
+    var toEdgeX = to.x + to.w + (to.distinct ? BRANCH_GAP + DISTINCT_BAND_WIDTH : 0);
+    var labelX = toEdgeX + LINEAGE_LABEL_GAP;
+    if (!edge.from) {
+      // リテラル値・列を取らない関数呼び出し(由来となる実テーブルが
+      // 無い列)は、ラベルboxからResultへの短い矢印だけを描く。
+      return {
+        key: "literal:".concat(edge.to.entity, ".").concat(edge.to.column),
+        x1: labelX,
+        y1: y2,
+        x2: toEdgeX,
+        y2: y2,
+        labelX: 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から複数本の斜め線を引く)。
+    var froms = Array.isArray(edge.from) ? edge.from : [edge.from];
+    var sources = [];
+    var _iterator3 = _createForOfIteratorHelper(froms),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var f = _step3.value;
+        var from = boxes[f.entity];
+        var y1 = findRowY(from, f.column);
+        if (!from || y1 === null) return null;
+        var branchX = branchPointByPort["".concat(f.entity, ".").concat(f.column)];
+        // JOIN線の角(branchX)、またはJOIN線が無い場合はエンティティの縁
+        // との間を、SELECT側の線の開始点が重なって見えないよう少しだけ
+        // 離す。
+        var startX = (branchX !== undefined ? branchX : from.x) - BRANCH_GAP;
+        sources.push({
+          x: startX,
+          y: y1,
+          title: from.alias || from.title,
+          column: f.column
+        });
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+    return {
+      key: "lineage:".concat(froms.map(function (f) {
+        return "".concat(f.entity, ".").concat(f.column);
+      }).join('+'), "->").concat(edge.to.entity, ".").concat(edge.to.column),
+      x1: sources[0].x,
+      y1: sources[0].y,
+      x2: toEdgeX,
+      y2: y2,
+      labelX: labelX,
+      label: edge.label,
+      sources: sources,
+      labelInfo: {
+        label: edge.label,
+        fromDisplay: sources.map(function (s) {
+          return "".concat(s.title, ".").concat(s.column);
+        }).join(' , '),
+        toTitle: to.alias || to.title,
+        toColumn: edge.to.column,
+        sql: edge.sql
+      }
+    };
+  }).filter(Boolean);
+}
+
+// SQL リネージグラフのデータクラス本体。入力の正規化(列の自動導出・
+// 最終Resultの判定)からレイアウト(自動配置・箱の寸法)・線の幾何までを
+// 構築時に済ませ、描画側(D3Sql)は結果を SVG に写すだけにする。
+var SqlModel = /*#__PURE__*/function () {
+  function SqlModel(data) {
+    _classCallCheck(this, SqlModel);
+    var 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);
+    var join = buildJoinLines(this.boxes, this.joinEdges);
+    this.joinLines = join.lines;
+    this.lineageLines = buildLineageLines(this.boxes, this.lineageEdges, join.branchPointByPort);
+  }
+  return _createClass(SqlModel, [{
+    key: "boxList",
+    value: function boxList() {
+      return Object.values(this.boxes);
+    }
+    // レイアウトは負のYまで伸びることがあるので、初期表示はコンテンツの
+    // 左上(負の座標も含む)に余白を付けて揃える(そうしないと、最終Result
+    // などの箱が初期ビューポート外になり、パン操作をしないと見えない)。
+  }, {
+    key: "initialTransform",
+    value: function initialTransform() {
+      var padding = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 40;
+      var boxes = this.boxList();
+      if (boxes.length === 0) return {
+        x: 0,
+        y: 0,
+        k: 1
+      };
+      return {
+        x: padding - Math.min.apply(Math, _toConsumableArray(boxes.map(function (b) {
+          return b.x;
+        }))),
+        y: padding - Math.min.apply(Math, _toConsumableArray(boxes.map(function (b) {
+          return b.y;
+        }))),
+        k: 1
+      };
+    }
+  }]);
+}();
+export { SqlModel as default };