@yanqirenshi/d3.sql 0.1.0

package/.babelrc

@@ -0,0 +1,14 @@
+{
+    "presets": [
+        ["@babel/preset-env", { "modules": false }],
+        "@babel/react"
+    ],
+    "env": {
+        "test": {
+            "presets": [
+                ["@babel/preset-env", { "modules": "commonjs" }],
+                "@babel/react"
+            ]
+        }
+    }
+}

package/README.md

@@ -0,0 +1,64 @@
+# @yanqirenshi/d3.sql
+
+SQLのリネージ(列の値がどこから来たか)を、パン/ズーム可能なSVG図として
+描画するReactコンポーネント。レイアウトは d3-dag(sugiyama)、パン/ズームは
+d3.zoom を使う。
+
+[foodata](https://github.com/ni-hama/foodata) プロジェクトの
+`hub/src/contents/SqlGraph.js`([sql-sitter](https://github.com/ni-hama/foodata/tree/main/sql-sitter)
+というRust製SQLパーサーが`extract_graph()`で抽出するリネージグラフを
+表示するために作られたもの)を、モノレポの規約(データクラス/描画クラスの
+2系統・d3 メタパッケージ・MUI 非依存)に合わせて取り込んだもの。
+
+## クラス構成
+
+- `SqlModel`(データクラス) — 入力の正規化(列の自動導出・最終Resultの
+  判定)・自動レイアウト(d3-dag)・線の幾何計算。DOM/React 非依存で、
+  テストはこの層に対して行う。
+- `D3Sql`(描画クラス / React ラッパ) — SqlModel の結果を SVG に写す。
+  パン/ズーム(d3.zoom)・ラベルboxの実測幅差し替え・ラベルクリックの
+  ポップアップを持つ。
+
+## 入力データの形
+
+```js
+{
+  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` 冒頭のコメントを参照。
+
+## 使い方
+
+```jsx
+import D3Sql from '@yanqirenshi/d3.sql';
+
+<div style={{ width: '100%', height: 600 }}>
+  <D3Sql data={graph}/>
+</div>
+```
+
+## 開発
+
+```bash
+npm run transpile -w @yanqirenshi/d3.sql   # Babel で dist/ へ(dist はコミット対象)
+npm test          -w @yanqirenshi/d3.sql   # jest(データクラスのテスト)
+```

package/dist/components/D3Sql.js

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

package/dist/index.js

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