From dddc78623a3d6ca0bd3102ea3de85473d2f4ffa5 Mon Sep 17 00:00:00 2001 From: kwasi Date: Tue, 18 Feb 2020 17:10:25 -0800 Subject: [PATCH] [MLMD] Add support for many-to-many (#44) * [MLMD] Fix inaccurate edge connections * Remove EdgeCanvas logic coupled to sleep timer and perform measurement of LineageView. * Sort Artifacts so they're laid out in Execution order. * Draw multiple EdgeCanvas elements to connect executions to Artifacts. * Adds for control of positioning relative to the card column and starting offset. * Update columnWidth on window resize * Fix LineageActionBar overflow * Respond to review changes * Extract constant for the EdgeLine control point * Remove unnecessary usage of `!important` --- build/lib/index.js.map | 2 +- build/lib/mlmd/ControlledEdgeCanvas.js | 72 ++++++++ build/lib/mlmd/ControlledEdgeCanvas.js.map | 1 + build/lib/mlmd/EdgeCanvas.js | 157 +++++------------ build/lib/mlmd/EdgeCanvas.js.map | 2 +- build/lib/mlmd/EdgeLine.js | 27 +++ build/lib/mlmd/EdgeLine.js.map | 1 + build/lib/mlmd/LineageActionBar.js | 8 +- build/lib/mlmd/LineageActionBar.js.map | 2 +- build/lib/mlmd/LineageCard.js | 13 +- build/lib/mlmd/LineageCard.js.map | 2 +- build/lib/mlmd/LineageCardColumn.js | 57 +++++- build/lib/mlmd/LineageCardColumn.js.map | 2 +- build/lib/mlmd/LineageCss.js | 6 + build/lib/mlmd/LineageCss.js.map | 2 +- build/lib/mlmd/LineageView.js | 125 +++++++++----- build/lib/mlmd/LineageView.js.map | 2 +- package-lock.json | 5 + package.json | 1 + src/index.ts | 20 +-- src/mlmd/ControlledEdgeCanvas.tsx | 92 ++++++++++ src/mlmd/EdgeCanvas.tsx | 192 +++++++++------------ src/mlmd/EdgeLine.tsx | 38 ++++ src/mlmd/LineageActionBar.tsx | 10 +- src/mlmd/LineageCard.tsx | 14 +- src/mlmd/LineageCardColumn.tsx | 107 ++++++++++-- src/mlmd/LineageCss.ts | 8 + src/mlmd/LineageView.tsx | 169 +++++++++++++----- 28 files changed, 774 insertions(+), 363 deletions(-) create mode 100644 build/lib/mlmd/ControlledEdgeCanvas.js create mode 100644 build/lib/mlmd/ControlledEdgeCanvas.js.map create mode 100644 build/lib/mlmd/EdgeLine.js create mode 100644 build/lib/mlmd/EdgeLine.js.map create mode 100644 src/mlmd/ControlledEdgeCanvas.tsx create mode 100644 src/mlmd/EdgeLine.tsx diff --git a/build/lib/index.js.map b/build/lib/index.js.map index 07214e0..937022b 100644 --- a/build/lib/index.js.map +++ b/build/lib/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AASA,0FAS8D;AAR5D,uCAAA,QAAQ,CAAA;AACR,2CAAA,YAAY,CAAA;AACZ,sCAAA,OAAO,CAAA;AACP,0CAAA,WAAW,CAAA;AACX,oCAAA,KAAK,CAAA;AACL,wCAAA,SAAS,CAAA;AACT,4CAAA,aAAa,CAAA;AACb,oCAAA,KAAK,CAAA;AAEP,4HAE+E;AAD7E,iFAAA,iCAAiC,CAAA;AAEnC,0GA2BqE;AA1BnE,8DAAA,uBAAuB,CAAA;AACvB,+DAAA,wBAAwB,CAAA;AACxB,8DAAA,uBAAuB,CAAA;AACvB,+DAAA,wBAAwB,CAAA;AACxB,0DAAA,mBAAmB,CAAA;AACnB,2DAAA,oBAAoB,CAAA;AACpB,qEAAA,8BAA8B,CAAA;AAC9B,sEAAA,+BAA+B,CAAA;AAC/B,4DAAA,qBAAqB,CAAA;AACrB,6DAAA,sBAAsB,CAAA;AACtB,+DAAA,wBAAwB,CAAA;AACxB,gEAAA,yBAAyB,CAAA;AACzB,yDAAA,kBAAkB,CAAA;AAClB,0DAAA,mBAAmB,CAAA;AACnB,oEAAA,6BAA6B,CAAA;AAC7B,qEAAA,8BAA8B,CAAA;AAC9B,qEAAA,8BAA8B,CAAA;AAC9B,sEAAA,+BAA+B,CAAA;AAC/B,+DAAA,wBAAwB,CAAA;AACxB,gEAAA,yBAAyB,CAAA;AACzB,oEAAA,6BAA6B,CAAA;AAC7B,qEAAA,8BAA8B,CAAA;AAC9B,+DAAA,wBAAwB,CAAA;AACxB,gEAAA,yBAAyB,CAAA;AACzB,2DAAA,oBAAoB,CAAA;AACpB,4DAAA,qBAAqB,CAAA;AAEvB,kCAMmB;AALjB,oBAAA,GAAG,CAAA;AACH,yCAAA,wBAAwB,CAAA;AACxB,mCAAA,kBAAkB,CAAA;AAClB,oCAAA,mBAAmB,CAAA;AACnB,0CAAA,yBAAyB,CAAA;AAE3B,gDAA2E;AAAnE,wCAAA,gBAAgB,CAAA;AAAE,+CAAA,uBAAuB,CAAA;AACjD,kDAA8C;AAAtC,oCAAA,WAAW,CAAA;AACnB,sCAKqB;AAJnB,mCAAA,gBAAgB,CAAA;AAChB,sCAAA,mBAAmB,CAAA;AACnB,iDAAA,8BAA8B,CAAA;AAC9B,8BAAA,WAAW,CAAA;AAEb,wCAAkE;AAA1D,yBAAA,MAAM,CAAA;AAAE,mCAAA,gBAAgB,CAAA;AAAE,4BAAA,SAAS,CAAA"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AASA,0FAS8D;AAR5D,uCAAA,QAAQ,CAAA;AACR,2CAAA,YAAY,CAAA;AACZ,sCAAA,OAAO,CAAA;AACP,0CAAA,WAAW,CAAA;AACX,oCAAA,KAAK,CAAA;AACL,wCAAA,SAAS,CAAA;AACT,4CAAA,aAAa,CAAA;AACb,oCAAA,KAAK,CAAA;AAEP,4HAE+E;AAD7E,iFAAA,iCAAiC,CAAA;AAEnC,0GA2BsE;AA1BpE,8DAAA,uBAAuB,CAAA;AACvB,+DAAA,wBAAwB,CAAA;AACxB,8DAAA,uBAAuB,CAAA;AACvB,+DAAA,wBAAwB,CAAA;AACxB,0DAAA,mBAAmB,CAAA;AACnB,2DAAA,oBAAoB,CAAA;AACpB,qEAAA,8BAA8B,CAAA;AAC9B,sEAAA,+BAA+B,CAAA;AAC/B,4DAAA,qBAAqB,CAAA;AACrB,6DAAA,sBAAsB,CAAA;AACtB,+DAAA,wBAAwB,CAAA;AACxB,gEAAA,yBAAyB,CAAA;AACzB,yDAAA,kBAAkB,CAAA;AAClB,0DAAA,mBAAmB,CAAA;AACnB,oEAAA,6BAA6B,CAAA;AAC7B,qEAAA,8BAA8B,CAAA;AAC9B,qEAAA,8BAA8B,CAAA;AAC9B,sEAAA,+BAA+B,CAAA;AAC/B,+DAAA,wBAAwB,CAAA;AACxB,gEAAA,yBAAyB,CAAA;AACzB,oEAAA,6BAA6B,CAAA;AAC7B,qEAAA,8BAA8B,CAAA;AAC9B,+DAAA,wBAAwB,CAAA;AACxB,gEAAA,yBAAyB,CAAA;AACzB,2DAAA,oBAAoB,CAAA;AACpB,4DAAA,qBAAqB,CAAA;AAEvB,kCAMoB;AALlB,oBAAA,GAAG,CAAA;AACH,yCAAA,wBAAwB,CAAA;AACxB,mCAAA,kBAAkB,CAAA;AAClB,oCAAA,mBAAmB,CAAA;AACnB,0CAAA,yBAAyB,CAAA;AAE3B,gDAA4E;AAApE,wCAAA,gBAAgB,CAAA;AAAE,+CAAA,uBAAuB,CAAA;AACjD,kDAA+C;AAAvC,oCAAA,WAAW,CAAA;AACnB,sCAKsB;AAJpB,mCAAA,gBAAgB,CAAA;AAChB,sCAAA,mBAAmB,CAAA;AACnB,iDAAA,8BAA8B,CAAA;AAC9B,8BAAA,WAAW,CAAA;AAEb,wCAAmE;AAA3D,yBAAA,MAAM,CAAA;AAAE,mCAAA,gBAAgB,CAAA;AAAE,4BAAA,SAAS,CAAA"} \ No newline at end of file diff --git a/build/lib/mlmd/ControlledEdgeCanvas.js b/build/lib/mlmd/ControlledEdgeCanvas.js new file mode 100644 index 0000000..a9157c8 --- /dev/null +++ b/build/lib/mlmd/ControlledEdgeCanvas.js @@ -0,0 +1,72 @@ +"use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = function (d, b) { + extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return extendStatics(d, b); + }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + result["default"] = mod; + return result; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var React = __importStar(require("react")); +var typestyle_1 = require("typestyle"); +var EdgeCanvas_1 = require("./EdgeCanvas"); +var EdgeLine_1 = require("./EdgeLine"); +var LineageCss_1 = require("./LineageCss"); +exports.CARD_OFFSET = LineageCss_1.CARD_SPACER_HEIGHT + LineageCss_1.CARD_TITLE_HEIGHT + LineageCss_1.CARD_CONTAINER_BORDERS; +/** + * A version of that draws the lines connecting the edges of a list of vertically + * stacked output artifact cards to the many output execution + * elements in an adjacent . + */ +var ControlledEdgeCanvas = /** @class */ (function (_super) { + __extends(ControlledEdgeCanvas, _super); + function ControlledEdgeCanvas(props) { + return _super.call(this, props) || this; + } + ControlledEdgeCanvas.prototype.render = function () { + var _this = this; + var _a = this.props, reverseEdges = _a.reverseEdges, edgeWidth = _a.edgeWidth; + var viewHeight = 1; + var lastNode = reverseEdges ? 'y1' : 'y4'; + var lastNodePositions = { y1: 0, y4: 0 }; + if (this.props.offset) { + lastNodePositions[lastNode] += this.props.offset; + viewHeight += this.props.offset; + } + var edgeLines = []; + this.props.artifactIds.forEach(function (artifactId, index) { + if (index !== 0) { + var offset = exports.CARD_OFFSET; + if (_this.props.artifactToCardMap.get(artifactId) !== + _this.props.artifactToCardMap.get(artifactId - 1)) { + offset += LineageCss_1.CARD_ROW_HEIGHT; + } + viewHeight += offset; + lastNodePositions[lastNode] += offset; + } + edgeLines.push(React.createElement(EdgeLine_1.EdgeLine, { height: viewHeight, width: edgeWidth, y1: lastNodePositions.y1, y4: lastNodePositions.y4 })); + }); + var css = EdgeCanvas_1.edgeCanvasCss( + /* left= */ this.props.cardWidth, + /* top= */ this.props.top + LineageCss_1.CARD_TITLE_HEIGHT + LineageCss_1.CARD_ROW_HEIGHT / 2, + /* width= */ edgeWidth); + var edgeCanvasClasses = typestyle_1.classes(css.edgeCanvas, reverseEdges && 'edgeCanvasReverse'); + return React.createElement("div", { className: edgeCanvasClasses }, edgeLines); + }; + return ControlledEdgeCanvas; +}(React.Component)); +exports.ControlledEdgeCanvas = ControlledEdgeCanvas; +//# sourceMappingURL=ControlledEdgeCanvas.js.map \ No newline at end of file diff --git a/build/lib/mlmd/ControlledEdgeCanvas.js.map b/build/lib/mlmd/ControlledEdgeCanvas.js.map new file mode 100644 index 0000000..8503012 --- /dev/null +++ b/build/lib/mlmd/ControlledEdgeCanvas.js.map @@ -0,0 +1 @@ +{"version":3,"file":"ControlledEdgeCanvas.js","sourceRoot":"","sources":["../../../src/mlmd/ControlledEdgeCanvas.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,uCAAkC;AAClC,2CAA2C;AAC3C,uCAAoC;AACpC,2CAKsB;AAET,QAAA,WAAW,GAAG,+BAAkB,GAAG,8BAAiB,GAAG,mCAAsB,CAAC;AAyB3F;;;;GAIG;AACH;IAA0C,wCAA0C;IAClF,8BAAY,KAAU;eACpB,kBAAM,KAAK,CAAC;IACd,CAAC;IAEM,qCAAM,GAAb;QAAA,iBA4CC;QA3CO,IAAA,eAAsC,EAArC,8BAAY,EAAE,wBAAuB,CAAC;QAE7C,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,IAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC5C,IAAM,iBAAiB,GAAG,EAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;QACzC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACrB,iBAAiB,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;YACjD,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;SACjC;QAED,IAAM,SAAS,GAAkB,EAAE,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,UAAC,UAAU,EAAE,KAAK;YAC/C,IAAI,KAAK,KAAK,CAAC,EAAE;gBACf,IAAI,MAAM,GAAG,mBAAW,CAAC;gBAEzB,IAAI,KAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC;oBAC9C,KAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE;oBAClD,MAAM,IAAI,4BAAe,CAAC;iBAC3B;gBAED,UAAU,IAAI,MAAM,CAAC;gBACrB,iBAAiB,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC;aACvC;YAED,SAAS,CAAC,IAAI,CACZ,oBAAC,mBAAQ,IACP,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,iBAAiB,CAAC,EAAE,EACxB,EAAE,EAAE,iBAAiB,CAAC,EAAE,GACxB,CACH,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,IAAM,GAAG,GACP,0BAAa;QACX,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;QAChC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,8BAAiB,GAAG,4BAAe,GAAG,CAAC;QACnE,YAAY,CAAC,SAAS,CACvB,CAAC;QACJ,IAAM,iBAAiB,GAAG,mBAAO,CAAC,GAAG,CAAC,UAAU,EAAE,YAAY,IAAI,mBAAmB,CAAC,CAAC;QACvF,OAAO,6BAAK,SAAS,EAAE,iBAAiB,IAAG,SAAS,CAAO,CAAC;IAC9D,CAAC;IACH,2BAAC;AAAD,CAAC,AAlDD,CAA0C,KAAK,CAAC,SAAS,GAkDxD;AAlDY,oDAAoB"} \ No newline at end of file diff --git a/build/lib/mlmd/EdgeCanvas.js b/build/lib/mlmd/EdgeCanvas.js index b976e1b..a6166f4 100644 --- a/build/lib/mlmd/EdgeCanvas.js +++ b/build/lib/mlmd/EdgeCanvas.js @@ -12,42 +12,6 @@ var __extends = (this && this.__extends) || (function () { d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); -var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { - function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } - return new (P || (P = Promise))(function (resolve, reject) { - function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } - function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } - function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } - step((generator = generator.apply(thisArg, _arguments || [])).next()); - }); -}; -var __generator = (this && this.__generator) || function (thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; - function verb(n) { return function (v) { return step([n, v]); }; } - function step(op) { - if (f) throw new TypeError("Generator is already executing."); - while (_) try { - if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; - if (y = 0, t) op = [op[0] & 2, t.value]; - switch (op[0]) { - case 0: case 1: t = op; break; - case 4: _.label++; return { value: op[1], done: false }; - case 5: _.label++; y = op[1]; op = [0]; continue; - case 7: op = _.ops.pop(); _.trys.pop(); continue; - default: - if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } - if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } - if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } - if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } - if (t[2]) _.ops.pop(); - _.trys.pop(); continue; - } - op = body.call(thisArg, _); - } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } - if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; - } -}; var __importStar = (this && this.__importStar) || function (mod) { if (mod && mod.__esModule) return mod; var result = {}; @@ -55,18 +19,38 @@ var __importStar = (this && this.__importStar) || function (mod) { result["default"] = mod; return result; }; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; Object.defineProperty(exports, "__esModule", { value: true }); var React = __importStar(require("react")); -// @ts-ignore -var react_svg_line_chart_1 = __importDefault(require("react-svg-line-chart")); var typestyle_1 = require("typestyle"); var LineageCss_1 = require("./LineageCss"); -var LineageCard_1 = require("./LineageCard"); -var react_dom_1 = require("react-dom"); -var Utils_1 = require("./Utils"); +var EdgeLine_1 = require("./EdgeLine"); +exports.CARD_OFFSET = LineageCss_1.CARD_SPACER_HEIGHT + LineageCss_1.CARD_TITLE_HEIGHT + LineageCss_1.CARD_CONTAINER_BORDERS; +exports.edgeCanvasCss = function (left, top, width) { + return typestyle_1.stylesheet({ + edgeCanvas: { + border: 0, + display: 'block', + left: left, + transition: 'transform .25s', + overflow: 'visible', + position: 'absolute', + top: LineageCss_1.px(top), + width: width, + zIndex: -1, + $nest: { + '&.edgeCanvasReverse': { + left: 0, + transform: 'translateX(-100%)', + }, + svg: { + display: 'block', + overflow: 'visible', + position: 'absolute', + }, + }, + }, + }); +}; /** * Canvas that draws the lines connecting the edges of a list of vertically stacked cards in one * to the topmost in an adjacent . @@ -77,92 +61,33 @@ var Utils_1 = require("./Utils"); var EdgeCanvas = /** @class */ (function (_super) { __extends(EdgeCanvas, _super); function EdgeCanvas(props) { - var _this = _super.call(this, props) || this; - _this.state = { - edgeGap: -1, - parentWidth: -1, - }; - return _this; + return _super.call(this, props) || this; } EdgeCanvas.prototype.render = function () { - var _a = this.props, cards = _a.cards, columnPadding = _a.columnPadding, reverseEdges = _a.reverseEdges; + var _a = this.props, cards = _a.cards, reverseEdges = _a.reverseEdges, edgeWidth = _a.edgeWidth; var viewHeight = 1; - var cardBodyHeight = 67; - var cardContainerBorders = 2; - var cardOffset = LineageCss_1.CARD_SPACER_HEIGHT + LineageCard_1.CARD_TITLE_HEIGHT + cardContainerBorders; - var _b = this.state, edgeGap = _b.edgeGap, parentWidth = _b.parentWidth; - var viewWidth = Math.max(edgeGap, 0) + 2 * columnPadding; - var css = typestyle_1.stylesheet({ - edgeCanvas: { - border: 0, - display: 'block', - left: parentWidth - edgeGap, - top: LineageCss_1.px(LineageCard_1.CARD_TITLE_HEIGHT + cardBodyHeight / 2), - overflow: 'visible', - position: 'absolute', - width: viewWidth, - zIndex: -1, - transition: 'transform .25s', - $nest: { - svg: { - display: 'block', - overflow: 'visible', - position: 'absolute', - }, - '&.edgeCanvasReverse': { - left: 0, - transform: 'translateX(-100%)', - }, - }, - }, - }); var lastNode = reverseEdges ? 'y1' : 'y4'; var lastNodePositions = { y1: 0, y4: 0 }; var edgeLines = []; cards.forEach(function (card, i) { card.elements.forEach(function (element, j) { - if (!element.next) + if (!element.next) { return; - var y1 = lastNodePositions.y1, y4 = lastNodePositions.y4; - edgeLines.push(React.createElement(react_svg_line_chart_1.default, { key: i + "-" + j, data: [ - { x: 0, y: y1 }, - { x: 30, y: y1 }, - { x: viewWidth - 30, y: y4 }, - { x: viewWidth, y: y4 }, - ], areaVisible: false, axisVisible: false, gridVisible: false, labelsVisible: false, pathColor: '#BDC1C6', pathVisible: true, pathWidth: 1, pathOpacity: 1, pointsVisible: false, viewBoxHeight: viewHeight, viewBoxWidth: viewWidth, pathSmoothing: 0 })); - viewHeight += cardBodyHeight; - lastNodePositions[lastNode] += cardBodyHeight; + } + edgeLines.push(React.createElement(EdgeLine_1.EdgeLine, { height: viewHeight, width: edgeWidth, y1: lastNodePositions.y1, y4: lastNodePositions.y4 })); + viewHeight += LineageCss_1.CARD_ROW_HEIGHT; + lastNodePositions[lastNode] += LineageCss_1.CARD_ROW_HEIGHT; }); - viewHeight += cardOffset; - lastNodePositions[lastNode] += cardOffset; + viewHeight += exports.CARD_OFFSET; + lastNodePositions[lastNode] += exports.CARD_OFFSET; }); + var css = exports.edgeCanvasCss( + /* left= */ this.props.cardWidth, + /* top= */ LineageCss_1.CARD_TITLE_HEIGHT + LineageCss_1.CARD_ROW_HEIGHT / 2, + /* width= */ edgeWidth); var edgeCanvasClasses = typestyle_1.classes(css.edgeCanvas, reverseEdges && 'edgeCanvasReverse'); - Utils_1.sleep(1).then(this.componentDidMount.bind(this)); return React.createElement("div", { className: edgeCanvasClasses }, edgeLines); }; - EdgeCanvas.prototype.componentDidMount = function () { - return __awaiter(this, void 0, void 0, function () { - var $this, _a, $next, $parent, parentWidth, edgeGap; - return __generator(this, function (_b) { - switch (_b.label) { - case 0: - $this = react_dom_1.findDOMNode(this); - _a = [$this.nextSibling, $this.parentElement], $next = _a[0], $parent = _a[1]; - if (!$this || !$next) - return [2 /*return*/]; - return [4 /*yield*/, Utils_1.sleep(1)]; // So the browser has time to draw the elements (and have correct clientWidth values) - case 1: - _b.sent(); // So the browser has time to draw the elements (and have correct clientWidth values) - parentWidth = $parent.clientWidth; - edgeGap = parentWidth - $next.clientWidth; - if (edgeGap === this.state.edgeGap) - return [2 /*return*/]; - this.setState({ edgeGap: edgeGap, parentWidth: parentWidth }); - return [2 /*return*/]; - } - }); - }); - }; return EdgeCanvas; }(React.Component)); exports.EdgeCanvas = EdgeCanvas; diff --git a/build/lib/mlmd/EdgeCanvas.js.map b/build/lib/mlmd/EdgeCanvas.js.map index 0aff475..50428e7 100644 --- a/build/lib/mlmd/EdgeCanvas.js.map +++ b/build/lib/mlmd/EdgeCanvas.js.map @@ -1 +1 @@ -{"version":3,"file":"EdgeCanvas.js","sourceRoot":"","sources":["../../../src/mlmd/EdgeCanvas.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,aAAa;AACb,8EAA6C;AAC7C,uCAA8C;AAC9C,2CAAoD;AACpD,6CAAgD;AAEhD,uCAAsC;AACtC,iCAA6B;AAc7B;;;;;;GAMG;AAGH;IAAgC,8BAAiD;IAC7E,oBAAY,KAAU;QAAtB,YACI,kBAAM,KAAK,CAAC,SAKf;QAJG,KAAI,CAAC,KAAK,GAAG;YACT,OAAO,EAAE,CAAC,CAAC;YACX,WAAW,EAAE,CAAC,CAAC;SAClB,CAAA;;IACL,CAAC;IAEM,2BAAM,GAAb;QACU,IAAA,eAAiD,EAAhD,gBAAK,EAAE,gCAAa,EAAE,8BAA0B,CAAC;QAExD,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,IAAM,cAAc,GAAG,EAAE,CAAC;QAC1B,IAAM,oBAAoB,GAAG,CAAC,CAAC;QAC/B,IAAM,UAAU,GAAG,+BAAkB,GAAG,+BAAiB,GAAG,oBAAoB,CAAC;QAC3E,IAAA,eAAmC,EAAlC,oBAAO,EAAE,4BAAyB,CAAA;QACzC,IAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,aAAa,CAAC;QAE3D,IAAM,GAAG,GAAG,sBAAU,CAAC;YACnB,UAAU,EAAE;gBACR,MAAM,EAAE,CAAC;gBACT,OAAO,EAAE,OAAO;gBAChB,IAAI,EAAE,WAAW,GAAG,OAAO;gBAC3B,GAAG,EAAE,eAAE,CAAC,+BAAiB,GAAG,cAAc,GAAG,CAAC,CAAC;gBAC/C,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,CAAC,CAAC;gBACV,UAAU,EAAE,gBAAgB;gBAC5B,KAAK,EAAE;oBACH,GAAG,EAAE;wBACD,OAAO,EAAE,OAAO;wBAChB,QAAQ,EAAE,SAAS;wBACnB,QAAQ,EAAE,UAAU;qBACvB;oBACD,qBAAqB,EAAE;wBACnB,IAAI,EAAE,CAAC;wBACP,SAAS,EAAE,mBAAmB;qBACjC;iBACJ;aACJ;SACJ,CAAC,CAAC;QAEH,IAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC5C,IAAM,iBAAiB,GAAG,EAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;QAEzC,IAAM,SAAS,GAAkB,EAAE,CAAC;QACpC,KAAK,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAC,OAAO,EAAE,CAAC;gBAC7B,IAAI,CAAC,OAAO,CAAC,IAAI;oBAAE,OAAO;gBACnB,IAAA,yBAAE,EAAE,yBAAE,CAAsB;gBACnC,SAAS,CAAC,IAAI,CACV,oBAAC,8BAAS,IACN,GAAG,EAAK,CAAC,SAAI,CAAG,EAChB,IAAI,EAAE;wBACF,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAC;wBACb,EAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC;wBACd,EAAC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,EAAC;wBAC1B,EAAC,CAAC,EAAE,SAAS,EAAO,CAAC,EAAE,EAAE,EAAC;qBAC7B,EACD,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,CAAC,EACZ,WAAW,EAAE,CAAC,EACd,aAAa,EAAE,KAAK,EACpB,aAAa,EAAE,UAAU,EACzB,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,CAAC,GAAI,CAC3B,CAAC;gBACF,UAAU,IAAI,cAAc,CAAC;gBAC7B,iBAAiB,CAAC,QAAQ,CAAC,IAAI,cAAc,CAAC;YAClD,CAAC,CAAC,CAAC;YACH,UAAU,IAAI,UAAU,CAAC;YACzB,iBAAiB,CAAC,QAAQ,CAAC,IAAI,UAAU,CAAC;QAC9C,CAAC,CAAC,CAAC;QAEH,IAAM,iBAAiB,GAAG,mBAAO,CAAC,GAAG,CAAC,UAAU,EAAE,YAAY,IAAI,mBAAmB,CAAC,CAAC;QACvF,aAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QAChD,OAAO,6BAAK,SAAS,EAAE,iBAAiB,IAAG,SAAS,CAAO,CAAA;IAC/D,CAAC;IAEK,sCAAiB,GAAvB;;;;;;wBACU,KAAK,GAAG,uBAAW,CAAC,IAAI,CAAgB,CAAA;wBACxC,KAAmB,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAkB,EAA3E,KAAK,QAAA,EAAE,OAAO,QAAA,CAA6D;wBAClF,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK;4BAAE,sBAAM;wBAC5B,qBAAM,aAAK,CAAC,CAAC,CAAC,EAAA,CAAC,qFAAqF;;wBAApG,SAAc,CAAA,CAAC,qFAAqF;wBAC9F,WAAW,GAAG,OAAO,CAAC,WAAW,CAAA;wBACjC,OAAO,GAAG,WAAW,GAAG,KAAK,CAAC,WAAW,CAAA;wBAC/C,IAAI,OAAO,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO;4BAAE,sBAAM;wBAC1C,IAAI,CAAC,QAAQ,CAAC,EAAC,OAAO,SAAA,EAAE,WAAW,aAAA,EAAC,CAAC,CAAA;;;;;KACxC;IACL,iBAAC;AAAD,CAAC,AAhGD,CAAgC,KAAK,CAAC,SAAS,GAgG9C;AAhGY,gCAAU"} \ No newline at end of file +{"version":3,"file":"EdgeCanvas.js","sourceRoot":"","sources":["../../../src/mlmd/EdgeCanvas.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,uCAA8C;AAC9C,2CAMsB;AAEtB,uCAAoC;AAEvB,QAAA,WAAW,GAAG,+BAAkB,GAAG,8BAAiB,GAAG,mCAAsB,CAAC;AAE9E,QAAA,aAAa,GAAG,UAAC,IAAY,EAAE,GAAW,EAAE,KAAa;IACpE,OAAO,sBAAU,CAAC;QAChB,UAAU,EAAE;YACV,MAAM,EAAE,CAAC;YACT,OAAO,EAAE,OAAO;YAChB,IAAI,MAAA;YACJ,UAAU,EAAE,gBAAgB;YAC5B,QAAQ,EAAE,SAAS;YACnB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,eAAE,CAAC,GAAG,CAAC;YACZ,KAAK,OAAA;YACL,MAAM,EAAE,CAAC,CAAC;YAEV,KAAK,EAAE;gBACL,qBAAqB,EAAE;oBACrB,IAAI,EAAE,CAAC;oBACP,SAAS,EAAE,mBAAmB;iBAC/B;gBACD,GAAG,EAAE;oBACH,OAAO,EAAE,OAAO;oBAChB,QAAQ,EAAE,SAAS;oBACnB,QAAQ,EAAE,UAAU;iBACrB;aACF;SACF;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAaF;;;;;;GAMG;AACH;IAAgC,8BAAgC;IAC9D,oBAAY,KAAU;eACpB,kBAAM,KAAK,CAAC;IACd,CAAC;IAEM,2BAAM,GAAb;QACQ,IAAA,eAA6C,EAA5C,gBAAK,EAAE,8BAAY,EAAE,wBAAuB,CAAC;QAEpD,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,IAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC5C,IAAM,iBAAiB,GAAG,EAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAC,CAAC;QAEzC,IAAM,SAAS,GAAkB,EAAE,CAAC;QACpC,KAAK,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAC,OAAO,EAAE,CAAC;gBAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;oBACjB,OAAO;iBACR;gBAED,SAAS,CAAC,IAAI,CACZ,oBAAC,mBAAQ,IACP,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,iBAAiB,CAAC,EAAE,EACxB,EAAE,EAAE,iBAAiB,CAAC,EAAE,GACxB,CACH,CAAC;gBAEF,UAAU,IAAI,4BAAe,CAAC;gBAC9B,iBAAiB,CAAC,QAAQ,CAAC,IAAI,4BAAe,CAAC;YACjD,CAAC,CAAC,CAAC;YACH,UAAU,IAAI,mBAAW,CAAC;YAC1B,iBAAiB,CAAC,QAAQ,CAAC,IAAI,mBAAW,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEH,IAAM,GAAG,GACP,qBAAa;QACX,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS;QAChC,UAAU,CAAC,8BAAiB,GAAG,4BAAe,GAAG,CAAC;QAClD,YAAY,CAAC,SAAS,CACvB,CAAC;QACJ,IAAM,iBAAiB,GAAG,mBAAO,CAAC,GAAG,CAAC,UAAU,EAAE,YAAY,IAAI,mBAAmB,CAAC,CAAC;QACvF,OAAO,6BAAK,SAAS,EAAE,iBAAiB,IAAG,SAAS,CAAO,CAAC;IAC9D,CAAC;IACH,iBAAC;AAAD,CAAC,AA7CD,CAAgC,KAAK,CAAC,SAAS,GA6C9C;AA7CY,gCAAU"} \ No newline at end of file diff --git a/build/lib/mlmd/EdgeLine.js b/build/lib/mlmd/EdgeLine.js new file mode 100644 index 0000000..cb70e3c --- /dev/null +++ b/build/lib/mlmd/EdgeLine.js @@ -0,0 +1,27 @@ +"use strict"; +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + result["default"] = mod; + return result; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var React = __importStar(require("react")); +// @ts-ignore +var react_svg_line_chart_1 = __importDefault(require("react-svg-line-chart")); +// How many pixels away from the point the curve should start at. +var HORIZONTAL_CONTROL_POINT_OFFSET = 30; +exports.EdgeLine = function (props) { + var height = props.height, width = props.width, y1 = props.y1, y4 = props.y4; + return React.createElement(react_svg_line_chart_1.default, { data: [ + { x: 0, y: y1 }, + { x: HORIZONTAL_CONTROL_POINT_OFFSET, y: y1 }, + { x: width - HORIZONTAL_CONTROL_POINT_OFFSET, y: y4 }, + { x: width, y: y4 }, + ], areaVisible: false, axisVisible: false, gridVisible: false, labelsVisible: false, pathColor: '#BDC1C6', pathVisible: true, pathWidth: 1, pathOpacity: 1, pointsVisible: false, viewBoxHeight: height, viewBoxWidth: width, pathSmoothing: 0 }); +}; +//# sourceMappingURL=EdgeLine.js.map \ No newline at end of file diff --git a/build/lib/mlmd/EdgeLine.js.map b/build/lib/mlmd/EdgeLine.js.map new file mode 100644 index 0000000..461d571 --- /dev/null +++ b/build/lib/mlmd/EdgeLine.js.map @@ -0,0 +1 @@ +{"version":3,"file":"EdgeLine.js","sourceRoot":"","sources":["../../../src/mlmd/EdgeLine.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAA+B;AAC/B,aAAa;AACb,8EAA6C;AAE7C,iEAAiE;AACjE,IAAM,+BAA+B,GAAG,EAAE,CAAC;AAS9B,QAAA,QAAQ,GAA4B,UAAC,KAAK;IAC9C,IAAA,qBAAM,EAAE,mBAAK,EAAE,aAAE,EAAE,aAAE,CAAU;IAEtC,OAAO,oBAAC,8BAAS,IACf,IAAI,EAAE;YACJ,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAC;YACb,EAAC,CAAC,EAAE,+BAA+B,EAAE,CAAC,EAAE,EAAE,EAAC;YAC3C,EAAC,CAAC,EAAE,KAAK,GAAG,+BAA+B,EAAE,CAAC,EAAE,EAAE,EAAC;YACnD,EAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAC;SAClB,EACD,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,IAAI,EACjB,SAAS,EAAE,CAAC,EACZ,WAAW,EAAE,CAAC,EACd,aAAa,EAAE,KAAK,EACpB,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,CAAC,GAChB,CAAC;AACL,CAAC,CAAC"} \ No newline at end of file diff --git a/build/lib/mlmd/LineageActionBar.js b/build/lib/mlmd/LineageActionBar.js index 40dafcd..1d44f26 100644 --- a/build/lib/mlmd/LineageActionBar.js +++ b/build/lib/mlmd/LineageActionBar.js @@ -77,6 +77,12 @@ var actionBarCss = typestyle_1.stylesheet({ } } }, + breadcrumbContainer: { + alignItems: 'center', + display: 'flex', + flexShrink: 1, + overflow: 'hidden', + }, breadcrumbInactive: __assign(__assign({ color: Css_1.color.grey }, baseBreadcrumb), { $nest: { '&:hover': { textDecoration: 'underline', @@ -135,7 +141,7 @@ var LineageActionBar = /** @class */ (function (_super) { } }); return (React.createElement("div", { className: typestyle_1.classes(actionBarCss.container, Css_1.padding(25, 'lr'), Css_1.commonCss.flex) }, - React.createElement("div", { className: typestyle_1.classes(Css_1.commonCss.flex) }, breadcrumbs), + React.createElement("div", { className: typestyle_1.classes(actionBarCss.breadcrumbContainer) }, breadcrumbs), React.createElement("div", null, React.createElement(Button_1.default, { className: typestyle_1.classes(actionBarCss.actionButton), disabled: false, onClick: this.reset }, React.createElement(Replay_1.default, null), diff --git a/build/lib/mlmd/LineageActionBar.js.map b/build/lib/mlmd/LineageActionBar.js.map index 05fa65a..3db5d2e 100644 --- a/build/lib/mlmd/LineageActionBar.js.map +++ b/build/lib/mlmd/LineageActionBar.js.map @@ -1 +1 @@ -{"version":3,"file":"LineageActionBar.js","sourceRoot":"","sources":["../../../src/mlmd/LineageActionBar.tsx"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"LineageActionBar.js","sourceRoot":"","sources":["../../../src/mlmd/LineageActionBar.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/build/lib/mlmd/LineageCard.js b/build/lib/mlmd/LineageCard.js index 267a9f6..aa9253d 100644 --- a/build/lib/mlmd/LineageCard.js +++ b/build/lib/mlmd/LineageCard.js @@ -36,14 +36,10 @@ var React = __importStar(require("react")); var typestyle_1 = require("typestyle"); var LineageCardRow_1 = require("./LineageCardRow"); var LineageCss_1 = require("./LineageCss"); -var CARD_RADIUS = 6; -var CARD_TITLE_BASE_HEIGHT = 40; -var CARD_TITLE_BORDER_BOTTOM_HEIGHT = 1; -exports.CARD_TITLE_HEIGHT = CARD_TITLE_BASE_HEIGHT + CARD_TITLE_BORDER_BOTTOM_HEIGHT; var cardTitleBase = { borderTopLeftRadius: '4px', borderTopRightRadius: '4px', - height: LineageCss_1.px(CARD_TITLE_BASE_HEIGHT), + height: LineageCss_1.px(LineageCss_1.CARD_TITLE_BASE_HEIGHT), }; var LineageCard = /** @class */ (function (_super) { __extends(LineageCard, _super); @@ -61,8 +57,7 @@ var LineageCard = /** @class */ (function (_super) { cardContainer: { background: 'white', border: "1px solid " + colors_1.grey[300], - borderRadius: LineageCss_1.px(CARD_RADIUS), - maxWidth: LineageCss_1.px(285), + borderRadius: LineageCss_1.px(LineageCss_1.CARD_RADIUS), $nest: { h3: { color: colors_1.blue[600], @@ -79,7 +74,7 @@ var LineageCard = /** @class */ (function (_super) { } } }, - cardTitle: __assign(__assign({}, cardTitleBase), { borderBottom: LineageCss_1.px(CARD_TITLE_BORDER_BOTTOM_HEIGHT) + " solid " + colors_1.grey[200] }), + cardTitle: __assign(__assign({}, cardTitleBase), { borderBottom: LineageCss_1.px(LineageCss_1.CARD_TITLE_BORDER_BOTTOM_HEIGHT) + " solid " + colors_1.grey[200] }), execution: { background: '#2C4A6D', border: '1px solid #CCE4FF', @@ -101,7 +96,7 @@ var LineageCard = /** @class */ (function (_super) { }, }, }, - executionCardTitle: __assign(__assign({}, cardTitleBase), { borderBottom: LineageCss_1.px(CARD_TITLE_BORDER_BOTTOM_HEIGHT) + " solid transparent" }), + executionCardTitle: __assign(__assign({}, cardTitleBase), { borderBottom: LineageCss_1.px(LineageCss_1.CARD_TITLE_BORDER_BOTTOM_HEIGHT) + " solid transparent" }), target: { border: "2px solid " + colors_1.blue[500], } diff --git a/build/lib/mlmd/LineageCard.js.map b/build/lib/mlmd/LineageCard.js.map index c31b250..32bb3d2 100644 --- a/build/lib/mlmd/LineageCard.js.map +++ b/build/lib/mlmd/LineageCard.js.map @@ -1 +1 @@ -{"version":3,"file":"LineageCard.js","sourceRoot":"","sources":["../../../src/mlmd/LineageCard.tsx"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"LineageCard.js","sourceRoot":"","sources":["../../../src/mlmd/LineageCard.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/build/lib/mlmd/LineageCardColumn.js b/build/lib/mlmd/LineageCardColumn.js index 546cb1c..926dbc8 100644 --- a/build/lib/mlmd/LineageCardColumn.js +++ b/build/lib/mlmd/LineageCardColumn.js @@ -21,6 +21,8 @@ var react_1 = __importDefault(require("react")); var typestyle_1 = require("typestyle"); var LineageCard_1 = require("./LineageCard"); var EdgeCanvas_1 = require("./EdgeCanvas"); +var ControlledEdgeCanvas_1 = require("./ControlledEdgeCanvas"); +var LineageCss_1 = require("./LineageCss"); var LineageCardColumn = /** @class */ (function (_super) { __extends(LineageCardColumn, _super); function LineageCardColumn() { @@ -34,9 +36,7 @@ var LineageCardColumn = /** @class */ (function (_super) { justifyContent: 'center', minHeight: '100%', padding: "0 " + columnPadding + "px", - width: '20%', - maxWidth: '20%', - minWidth: 'max(20%, 170px)', + width: this.props.columnWidth, boxSizing: 'border-box', $nest: { h2: { @@ -71,12 +71,57 @@ var LineageCardColumn = /** @class */ (function (_super) { return react_1.default.createElement(LineageCard_1.LineageCard, { key: i, title: det.title, type: this.props.type, addSpacer: isNotFirstEl, rows: det.elements, isTarget: /Target/i.test(this.props.title), setLineageViewTarget: this.props.setLineageViewTarget }); }; LineageCardColumn.prototype.drawColumnContent = function () { - var _a = this.props, cards = _a.cards, columnPadding = _a.columnPadding, skipEdgeCanvas = _a.skipEdgeCanvas; + var _a = this.props, cards = _a.cards, columnPadding = _a.columnPadding, columnWidth = _a.columnWidth, skipEdgeCanvas = _a.skipEdgeCanvas; + var edgeWidth = columnPadding * 2; + var cardWidth = columnWidth - edgeWidth; + var edgeCanvases = []; + if (this.props.outputExecutionToOutputArtifactMap) { + edgeCanvases = this.buildOutputExecutionToOutputArtifactEdgeCanvases(this.props.outputExecutionToOutputArtifactMap, cards, edgeWidth, cardWidth); + } + else { + edgeCanvases.push(react_1.default.createElement(EdgeCanvas_1.EdgeCanvas, { cardWidth: cardWidth, edgeWidth: edgeWidth, cards: cards, reverseEdges: !!this.props.reverseBindings })); + } return react_1.default.createElement(react_1.default.Fragment, null, - skipEdgeCanvas ? null : - react_1.default.createElement(EdgeCanvas_1.EdgeCanvas, { cards: cards, columnPadding: columnPadding, reverseEdges: !!this.props.reverseBindings }), + skipEdgeCanvas ? null : edgeCanvases, cards.map(this.jsxFromCardDetails.bind(this))); }; + LineageCardColumn.prototype.buildOutputExecutionToOutputArtifactEdgeCanvases = function (outputExecutionToOutputArtifactMap, artifactCards, edgeWidth, cardWidth) { + var _this = this; + var edgeCanvases = []; + var artifactIdToCardMap = new Map(); + artifactCards.forEach(function (card, index) { + card.elements.forEach(function (row) { + artifactIdToCardMap.set(row.resource.getId(), index); + }); + }); + // Offset relative to the top of the column + var artifactOffset = 0; + var artifactCardIndex; + var executionCardIndex = 0; + outputExecutionToOutputArtifactMap.forEach(function (artifactIds) { + var executionCardTop = (LineageCss_1.CARD_ROW_HEIGHT + EdgeCanvas_1.CARD_OFFSET) * executionCardIndex; + edgeCanvases.push(react_1.default.createElement(ControlledEdgeCanvas_1.ControlledEdgeCanvas, { cardWidth: cardWidth, edgeWidth: edgeWidth, reverseEdges: !!_this.props.reverseBindings, artifactIds: artifactIds, artifactToCardMap: artifactIdToCardMap, offset: artifactOffset - executionCardTop, outputExecutionToOutputArtifactMap: outputExecutionToOutputArtifactMap, top: executionCardTop })); + // Advance starting artifact offset. + artifactIds.forEach(function (artifactId) { + if (artifactCardIndex === null) { + artifactCardIndex = artifactIdToCardMap.get(artifactId); + return; + } + var newArtifactIndex = artifactIdToCardMap.get(artifactId); + if (artifactCardIndex === newArtifactIndex) { + // Next artifact row is on the same card + artifactOffset += EdgeCanvas_1.CARD_OFFSET; + } + else { + // Next artifact row is on the next card + artifactOffset += LineageCss_1.CARD_ROW_HEIGHT + EdgeCanvas_1.CARD_OFFSET; + } + artifactCardIndex = newArtifactIndex; + }); + executionCardIndex++; + }); + return edgeCanvases; + }; return LineageCardColumn; }(react_1.default.Component)); exports.LineageCardColumn = LineageCardColumn; diff --git a/build/lib/mlmd/LineageCardColumn.js.map b/build/lib/mlmd/LineageCardColumn.js.map index f3de4e2..cd778c6 100644 --- a/build/lib/mlmd/LineageCardColumn.js.map +++ b/build/lib/mlmd/LineageCardColumn.js.map @@ -1 +1 @@ -{"version":3,"file":"LineageCardColumn.js","sourceRoot":"","sources":["../../../src/mlmd/LineageCardColumn.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,uEAAiD;AACjD,gDAA0B;AAC1B,uCAA8C;AAC9C,6CAA0C;AAE1C,2CAAwC;AAkBxC;IAAuC,qCAAuC;IAA9E;;IA4EA,CAAC;IA3EQ,kCAAM,GAAb;QACQ,IAAA,eAAyC,EAAxC,gCAAa,EAAE,cAAI,EAAE,gBAAmB,CAAC;QAEhD,IAAM,GAAG,GAAG,sBAAU,CAAC;YACrB,UAAU,EAAE;gBACV,OAAO,EAAE,cAAc;gBACvB,cAAc,EAAE,QAAQ;gBACxB,SAAS,EAAE,MAAM;gBACjB,OAAO,EAAE,OAAK,aAAa,OAAI;gBAC/B,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;gBACf,QAAQ,EAAE,iBAAiB;gBAC3B,SAAS,EAAE,YAAY;gBACvB,KAAK,EAAE;oBACL,EAAE,EAAE;wBACF,KAAK,EAAE,cAAI,CAAC,GAAG,CAAC;wBAChB,UAAU,EAAE,oBAAoB;wBAChC,QAAQ,EAAE,MAAM;wBAChB,aAAa,EAAE,OAAO;wBACtB,UAAU,EAAE,MAAM;wBAClB,SAAS,EAAE,MAAM;wBACjB,aAAa,EAAE,YAAY;qBAC5B;iBACF;aACF;YACD,UAAU,EAAE;gBACV,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,MAAM;aACd;YACD,YAAY,EAAE;gBACZ,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,UAAU;gBAClB,SAAS,EAAE,MAAM;gBACjB,KAAK,EAAE,MAAM;aACd;SACF,CAAC,CAAC;QAEH,OAAO,CACL,uCAAK,SAAS,EAAE,mBAAO,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC;YAC3C,uCAAK,SAAS,EAAE,mBAAO,CAAC,GAAG,CAAC,YAAY,CAAC;gBACvC,0CAAK,KAAK,CAAM,CACZ;YACN,uCAAK,SAAS,EAAE,mBAAO,CAAC,GAAG,CAAC,UAAU,CAAC,IACpC,IAAI,CAAC,iBAAiB,EAAE,CACrB,CACF,CACP,CAAC;IACJ,CAAC;IACO,8CAAkB,GAA1B,UAA2B,GAAgB,EAAE,CAAS;QACpD,IAAM,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC;QAC3B,OAAO,8BAAC,yBAAW,IACjB,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,GAAG,CAAC,QAAQ,EAClB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAC1C,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,GACrD,CAAC;IACL,CAAC;IACO,6CAAiB,GAAzB;QACQ,IAAA,eAAmD,EAAlD,gBAAK,EAAE,gCAAa,EAAE,kCAA4B,CAAC;QAE1D,OAAO,8BAAC,eAAK,CAAC,QAAQ;YAElB,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;gBACrB,8BAAC,uBAAU,IACT,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAC1C;YAEL,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAC/B,CAAC;IACpB,CAAC;IACH,wBAAC;AAAD,CAAC,AA5ED,CAAuC,eAAK,CAAC,SAAS,GA4ErD;AA5EY,8CAAiB"} \ No newline at end of file +{"version":3,"file":"LineageCardColumn.js","sourceRoot":"","sources":["../../../src/mlmd/LineageCardColumn.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/build/lib/mlmd/LineageCss.js b/build/lib/mlmd/LineageCss.js index 342fd54..cfc343c 100644 --- a/build/lib/mlmd/LineageCss.js +++ b/build/lib/mlmd/LineageCss.js @@ -1,5 +1,11 @@ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.px = function (number) { return number + "px"; }; +exports.CARD_RADIUS = 6; +exports.CARD_CONTAINER_BORDERS = 2; +exports.CARD_TITLE_BASE_HEIGHT = 40; +exports.CARD_TITLE_BORDER_BOTTOM_HEIGHT = 1; +exports.CARD_TITLE_HEIGHT = exports.CARD_TITLE_BASE_HEIGHT + exports.CARD_TITLE_BORDER_BOTTOM_HEIGHT; exports.CARD_SPACER_HEIGHT = 24; +exports.CARD_ROW_HEIGHT = 67; //# sourceMappingURL=LineageCss.js.map \ No newline at end of file diff --git a/build/lib/mlmd/LineageCss.js.map b/build/lib/mlmd/LineageCss.js.map index 44b0648..93e0ae4 100644 --- a/build/lib/mlmd/LineageCss.js.map +++ b/build/lib/mlmd/LineageCss.js.map @@ -1 +1 @@ -{"version":3,"file":"LineageCss.js","sourceRoot":"","sources":["../../../src/mlmd/LineageCss.ts"],"names":[],"mappings":";;AAAa,QAAA,EAAE,GAAG,UAAC,MAAc,IAAa,OAAG,MAAM,OAAI,EAAb,CAAa,CAAC;AAE/C,QAAA,kBAAkB,GAAG,EAAE,CAAC"} \ No newline at end of file +{"version":3,"file":"LineageCss.js","sourceRoot":"","sources":["../../../src/mlmd/LineageCss.ts"],"names":[],"mappings":";;AAAa,QAAA,EAAE,GAAG,UAAC,MAAc,IAAa,OAAG,MAAM,OAAI,EAAb,CAAa,CAAC;AAG/C,QAAA,WAAW,GAAG,CAAC,CAAC;AAChB,QAAA,sBAAsB,GAAG,CAAC,CAAC;AAC3B,QAAA,sBAAsB,GAAG,EAAE,CAAC;AAC5B,QAAA,+BAA+B,GAAG,CAAC,CAAC;AACpC,QAAA,iBAAiB,GAAG,8BAAsB,GAAG,uCAA+B,CAAC;AAC7E,QAAA,kBAAkB,GAAG,EAAE,CAAC;AACxB,QAAA,eAAe,GAAG,EAAE,CAAC"} \ No newline at end of file diff --git a/build/lib/mlmd/LineageView.js b/build/lib/mlmd/LineageView.js index bd34f15..7655004 100644 --- a/build/lib/mlmd/LineageView.js +++ b/build/lib/mlmd/LineageView.js @@ -93,78 +93,101 @@ var isOutputEvent = function (event) { }; /** Default size used when columnPadding prop is unset. */ var DEFAULT_COLUMN_PADDING = 40; +var LINEAGE_VIEW_CSS = typestyle_1.stylesheet({ + LineageExplorer: { + $nest: { + '&&': { flexFlow: 'row' } + }, + position: 'relative', + background: '#F8F8F9', + zIndex: 0, + }, +}); var LineageView = /** @class */ (function (_super) { __extends(LineageView, _super); function LineageView(props) { var _this = _super.call(this, props) || this; + _this.containerRef = React.createRef(); _this.metadataStoreService = Api_1.Api.getInstance().metadataStoreService; _this.actionBarRef = React.createRef(); _this.state = { + columnWidth: 0, columnNames: ['Input Artifact', '', 'Target', '', 'Output Artifact'], columnTypes: ['ipa', 'ipx', 'target', 'opx', 'opa'], - target: props.target, inputArtifacts: [], inputExecutions: [], - outputExecutions: [], outputArtifacts: [], + outputExecutionToOutputArtifactMap: new Map(), + outputExecutions: [], + target: props.target, }; _this.loadData = _this.loadData.bind(_this); _this.setTargetFromActionBar = _this.setTargetFromActionBar.bind(_this); _this.setTargetFromLineageCard = _this.setTargetFromLineageCard.bind(_this); + _this.setColumnWidth = _this.setColumnWidth.bind(_this); _this.loadData(_this.props.target.getId()); return _this; } + LineageView.prototype.componentDidMount = function () { + this.setColumnWidth(); + window.addEventListener('resize', this.setColumnWidth); + }; + LineageView.prototype.componentWillUnmount = function () { + window.removeEventListener('resize', this.setColumnWidth); + }; LineageView.prototype.render = function () { - if (!this.artifactTypes) - return null; - var css = typestyle_1.stylesheet({ - LineageExplorer: { - $nest: { - '&&': { flexFlow: 'row' } - }, - position: 'relative', - background: '#F8F8F9', - zIndex: 0, - }, - }); + if (!this.artifactTypes || !this.state.columnWidth) { + return ( + // Return an empty page to allow componentDidMount() to measure the flex container. + React.createElement("div", { className: typestyle_1.classes(Css_1.commonCss.page), ref: this.containerRef })); + } var columnNames = this.state.columnNames; var columnPadding = this.props.columnPadding || DEFAULT_COLUMN_PADDING; - return (React.createElement("div", { className: typestyle_1.classes(Css_1.commonCss.page) }, + return (React.createElement("div", { className: typestyle_1.classes(Css_1.commonCss.page), ref: this.containerRef }, React.createElement(LineageActionBar_1.LineageActionBar, { ref: this.actionBarRef, initialTarget: this.props.target, setLineageViewTarget: this.setTargetFromActionBar }), - React.createElement("div", { className: typestyle_1.classes(Css_1.commonCss.page, css.LineageExplorer, 'LineageExplorer') }, - React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'artifact', cards: this.buildArtifactCards(this.state.inputArtifacts), title: "" + columnNames[0], columnPadding: columnPadding, setLineageViewTarget: this.setTargetFromLineageCard }), - React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'execution', cards: this.buildExecutionCards(this.state.inputExecutions), columnPadding: columnPadding, title: "" + columnNames[1] }), - React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'artifact', cards: this.buildArtifactCards([this.state.target], /* isTarget= */ true), columnPadding: columnPadding, title: "" + columnNames[2] }), - React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'execution', cards: this.buildExecutionCards(this.state.outputExecutions), columnPadding: columnPadding, reverseBindings: true, title: "" + columnNames[3] }), - React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'artifact', cards: this.buildArtifactCards(this.state.outputArtifacts), reverseBindings: true, columnPadding: columnPadding, title: "" + columnNames[4], setLineageViewTarget: this.setTargetFromLineageCard })))); + React.createElement("div", { className: typestyle_1.classes(Css_1.commonCss.page, LINEAGE_VIEW_CSS.LineageExplorer, 'LineageExplorer') }, + React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'artifact', cards: this.buildArtifactCards(this.state.inputArtifacts), title: "" + columnNames[0], columnWidth: this.state.columnWidth, columnPadding: columnPadding, setLineageViewTarget: this.setTargetFromLineageCard }), + React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'execution', cards: this.buildExecutionCards(this.state.inputExecutions), columnPadding: columnPadding, title: "" + columnNames[1], columnWidth: this.state.columnWidth }), + React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'artifact', cards: this.buildArtifactCards([this.state.target], /* isTarget= */ true), columnPadding: columnPadding, skipEdgeCanvas: true /* Canvas will be drawn by the next canvas's reverse edges. */, title: "" + columnNames[2], columnWidth: this.state.columnWidth }), + React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'execution', cards: this.buildExecutionCards(this.state.outputExecutions), columnPadding: columnPadding, reverseBindings: true, title: "" + columnNames[3], columnWidth: this.state.columnWidth }), + React.createElement(LineageCardColumn_1.LineageCardColumn, { type: 'artifact', cards: this.buildArtifactCards(this.state.outputArtifacts), columnPadding: columnPadding, columnWidth: this.state.columnWidth, outputExecutionToOutputArtifactMap: this.state.outputExecutionToOutputArtifactMap, reverseBindings: true, setLineageViewTarget: this.setTargetFromLineageCard, title: "" + columnNames[4] })))); }; LineageView.prototype.buildArtifactCards = function (artifacts, isTarget) { var _this = this; if (isTarget === void 0) { isTarget = false; } - var artifactsByTypeId = lodash_groupby_1.default(artifacts, function (artifact) { return (artifact.getTypeId()); }); - return Object.keys(artifactsByTypeId).map(function (typeId) { - var artifactTypeName = Utils_1.getTypeName(Number(typeId), _this.artifactTypes); - var artifacts = artifactsByTypeId[typeId]; - return { - title: artifactTypeName, - elements: artifacts.map(function (artifact) { return ({ - resource: artifact, - resourceDetailsPageRoute: _this.props.buildResourceDetailsPageRoute(artifact, artifactTypeName), - prev: !isTarget || _this.state.inputExecutions.length > 0, - next: !isTarget || _this.state.outputExecutions.length > 0, - }); }) - }; + var orderedCardsByType = []; + var currentType; + var currentTypeName; + var currentCard; + artifacts.forEach(function (artifact) { + if (!currentType || artifact.getTypeId() !== currentType) { + // Create a new card + currentType = artifact.getTypeId(); + currentTypeName = Utils_1.getTypeName(Number(currentType), _this.artifactTypes); + currentCard = { + title: currentTypeName, + elements: [] + }; + orderedCardsByType.push(currentCard); + } + currentCard.elements.push({ + resource: artifact, + resourceDetailsPageRoute: _this.props.buildResourceDetailsPageRoute(artifact, currentTypeName), + prev: !isTarget || _this.state.inputExecutions.length > 0, + next: !isTarget || _this.state.outputExecutions.length > 0, + }); }); + return orderedCardsByType; }; LineageView.prototype.buildExecutionCards = function (executions) { var _this = this; - var executionsByTypeId = lodash_groupby_1.default(executions, function (execution) { return (execution.getTypeId()); }); + var executionsByTypeId = lodash_groupby_1.default(executions, function (e) { return (e.getTypeId()); }); return Object.keys(executionsByTypeId).map(function (typeId) { var executionTypeName = Utils_1.getTypeName(Number(typeId), _this.executionTypes); - var executions = executionsByTypeId[typeId]; + var executionsForType = executionsByTypeId[typeId]; return { title: executionTypeName, - elements: executions.map(function (execution) { return ({ + elements: executionsForType.map(function (execution) { return ({ resource: execution, resourceDetailsPageRoute: _this.props.buildResourceDetailsPageRoute(execution, executionTypeName), prev: true, @@ -175,7 +198,7 @@ var LineageView = /** @class */ (function (_super) { }; LineageView.prototype.loadData = function (targetId) { return __awaiter(this, void 0, void 0, function () { - var _a, targetArtifactEvents, executionTypes, artifactTypes, outputExecutionIds, inputExecutionIds, _i, targetArtifactEvents_1, event_1, executionId, _b, outputExecutions, inputExecutions, _c, inputExecutionEvents, outputExecutionEvents, inputExecutionInputArtifactIds, outputExecutionOutputArtifactIds, _d, inputArtifacts, outputArtifacts; + var _a, targetArtifactEvents, executionTypes, artifactTypes, outputExecutionIds, inputExecutionIds, _i, targetArtifactEvents_1, event_1, executionId, _b, outputExecutions, inputExecutions, _c, inputExecutionEvents, outputExecutionEvents, inputExecutionInputArtifactIds, outputExecutionToOutputArtifactMap, outputExecutionOutputArtifactIds, _d, inputArtifacts, outputArtifacts; return __generator(this, function (_e) { switch (_e.label) { case 0: return [4 /*yield*/, Promise.all([ @@ -220,12 +243,22 @@ var LineageView = /** @class */ (function (_super) { } inputExecutionInputArtifactIds.push(event.getArtifactId()); }); + outputExecutionToOutputArtifactMap = new Map(); outputExecutionOutputArtifactIds = []; outputExecutionEvents.forEach(function (event) { if (!isOutputEvent(event)) { return; } - outputExecutionOutputArtifactIds.push(event.getArtifactId()); + var executionId = event.getExecutionId(); + if (!outputExecutionToOutputArtifactMap.get(executionId)) { + outputExecutionToOutputArtifactMap.set(executionId, []); + } + var artifactId = event.getArtifactId(); + outputExecutionOutputArtifactIds.push(artifactId); + var artifacts = outputExecutionToOutputArtifactMap.get(executionId); + if (artifacts) { + artifacts.push(artifactId); + } }); return [4 /*yield*/, Promise.all([ this.getArtifacts(inputExecutionInputArtifactIds), @@ -234,7 +267,11 @@ var LineageView = /** @class */ (function (_super) { case 4: _d = _e.sent(), inputArtifacts = _d[0], outputArtifacts = _d[1]; this.setState({ - inputArtifacts: inputArtifacts, inputExecutions: inputExecutions, outputArtifacts: outputArtifacts, outputExecutions: outputExecutions, + inputArtifacts: inputArtifacts, + inputExecutions: inputExecutions, + outputArtifacts: outputArtifacts, + outputExecutionToOutputArtifactMap: outputExecutionToOutputArtifactMap, + outputExecutions: outputExecutions, }); return [2 /*return*/, '']; } @@ -328,6 +365,14 @@ var LineageView = /** @class */ (function (_super) { }); }); }; + LineageView.prototype.setColumnWidth = function () { + if (!this.containerRef || !this.containerRef.current) { + return; + } + this.setState({ + columnWidth: this.containerRef.current.clientWidth / 5 + }); + }; return LineageView; }(React.Component)); exports.LineageView = LineageView; diff --git a/build/lib/mlmd/LineageView.js.map b/build/lib/mlmd/LineageView.js.map index b17ee59..20f9ba8 100644 --- a/build/lib/mlmd/LineageView.js.map +++ b/build/lib/mlmd/LineageView.js.map @@ -1 +1 @@ -{"version":3,"file":"LineageView.js","sourceRoot":"","sources":["../../../src/mlmd/LineageView.tsx"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"LineageView.js","sourceRoot":"","sources":["../../../src/mlmd/LineageView.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c187643..aefd02e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9408,6 +9408,11 @@ "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=", "dev": true }, + "lodash.flatten": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz", + "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=" + }, "lodash.flattendeep": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", diff --git a/package.json b/package.json index 51c996b..8d251df 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "google-protobuf": "^3.11.2", "grpc-web": "^1.0.7", "lodash.debounce": "^4.0.8", + "lodash.flatten": "^4.4.0", "lodash.groupby": "^4.6.0", "lodash.isfunction": "^3.0.9", "react-svg-line-chart": "^2.0.2" diff --git a/src/index.ts b/src/index.ts index 270b9f5..3f5243d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,11 +1,11 @@ // NOTE: This is a workaround to allow types to be re-exported while still using create-react-app's // toolchain, which uses babel under the hood. See: // https://github.com/facebook/create-react-app/issues/6054 -import {ListRequest as ListRequestType} from './common/ListRequest' -import {LineageResource as LineageResourceType} from './mlmd/LineageTypes' +import {ListRequest as ListRequestType} from './common/ListRequest'; +import {LineageResource as LineageResourceType} from './mlmd/LineageTypes'; -export type LineageResource = LineageResourceType -export type ListRequest = ListRequestType +export type LineageResource = LineageResourceType; +export type ListRequest = ListRequestType; export { Artifact, @@ -47,20 +47,20 @@ export { GetExecutionsByIDResponse, GetExecutionsRequest, GetExecutionsResponse, -} from './mlmd/generated/ml_metadata/proto/metadata_store_service_pb' +} from './mlmd/generated/ml_metadata/proto/metadata_store_service_pb'; export { Api, ArtifactCustomProperties, ArtifactProperties, ExecutionProperties, ExecutionCustomProperties, -} from './mlmd/Api' -export {getArtifactTypes, getArtifactCreationTime} from './mlmd/LineageApi' -export {LineageView} from './mlmd/LineageView' +} from './mlmd/Api'; +export {getArtifactTypes, getArtifactCreationTime} from './mlmd/LineageApi'; +export {LineageView} from './mlmd/LineageView'; export { getMetadataValue, getResourceProperty, getResourcePropertyViaFallBack, getTypeName -} from './mlmd/Utils' -export {logger, formatDateString, titleCase} from './common/Utils' +} from './mlmd/Utils'; +export {logger, formatDateString, titleCase} from './common/Utils'; diff --git a/src/mlmd/ControlledEdgeCanvas.tsx b/src/mlmd/ControlledEdgeCanvas.tsx new file mode 100644 index 0000000..fb96dc2 --- /dev/null +++ b/src/mlmd/ControlledEdgeCanvas.tsx @@ -0,0 +1,92 @@ +import * as React from 'react'; +import {classes} from 'typestyle'; +import {edgeCanvasCss} from './EdgeCanvas'; +import {EdgeLine} from './EdgeLine'; +import { + CARD_ROW_HEIGHT, + CARD_CONTAINER_BORDERS, + CARD_SPACER_HEIGHT, + CARD_TITLE_HEIGHT, +} from './LineageCss'; + +export const CARD_OFFSET = CARD_SPACER_HEIGHT + CARD_TITLE_HEIGHT + CARD_CONTAINER_BORDERS; + +interface ControlledEdgeCanvasProps { + // The edge is drawn over the card column and offset by the card width + cardWidth: number; + edgeWidth: number; + + // If true edges are drawn from right to left. + reverseEdges: boolean; + + // A list of output artifactIds + artifactIds: number[]; + + // Offset for the artifact edge lines in pixels. + offset: number; + + // Top of the destination execution card relative to the top of the lineage card column. + top: number; + + // Map from artifact id to card index. + artifactToCardMap: Map; + + outputExecutionToOutputArtifactMap: Map; +} + +/** + * A version of that draws the lines connecting the edges of a list of vertically + * stacked output artifact cards to the many output execution + * elements in an adjacent . + */ +export class ControlledEdgeCanvas extends React.Component { + constructor(props: any) { + super(props); + } + + public render(): JSX.Element | null { + const {reverseEdges, edgeWidth} = this.props; + + let viewHeight = 1; + + const lastNode = reverseEdges ? 'y1' : 'y4'; + const lastNodePositions = {y1: 0, y4: 0}; + if (this.props.offset) { + lastNodePositions[lastNode] += this.props.offset; + viewHeight += this.props.offset; + } + + const edgeLines: JSX.Element[] = []; + this.props.artifactIds.forEach((artifactId, index) => { + if (index !== 0) { + let offset = CARD_OFFSET; + + if (this.props.artifactToCardMap.get(artifactId) !== + this.props.artifactToCardMap.get(artifactId - 1)) { + offset += CARD_ROW_HEIGHT; + } + + viewHeight += offset; + lastNodePositions[lastNode] += offset; + } + + edgeLines.push( + + ); + }); + + const css = + edgeCanvasCss( + /* left= */ this.props.cardWidth, + /* top= */ this.props.top + CARD_TITLE_HEIGHT + CARD_ROW_HEIGHT / 2, + /* width= */ edgeWidth, + ); + const edgeCanvasClasses = classes(css.edgeCanvas, reverseEdges && 'edgeCanvasReverse'); + return
{edgeLines}
; + } +} diff --git a/src/mlmd/EdgeCanvas.tsx b/src/mlmd/EdgeCanvas.tsx index 79b9e99..60d3c3d 100644 --- a/src/mlmd/EdgeCanvas.tsx +++ b/src/mlmd/EdgeCanvas.tsx @@ -1,23 +1,54 @@ import * as React from 'react'; -// @ts-ignore -import LineChart from 'react-svg-line-chart'; import {classes, stylesheet} from 'typestyle'; -import {CARD_SPACER_HEIGHT, px} from './LineageCss'; -import {CARD_TITLE_HEIGHT} from "./LineageCard"; -import {CardDetails} from "./LineageCardColumn"; -import {findDOMNode} from 'react-dom'; -import {sleep} from './Utils' +import { + CARD_ROW_HEIGHT, + CARD_CONTAINER_BORDERS, + CARD_SPACER_HEIGHT, + CARD_TITLE_HEIGHT, + px, +} from './LineageCss'; +import {CardDetails} from './LineageCardColumn'; +import {EdgeLine} from './EdgeLine'; -interface EdgeCanvasProps { - cards: CardDetails[]; - columnPadding: number; - // If true edges are drawn from right to left. - reverseEdges: boolean; -} +export const CARD_OFFSET = CARD_SPACER_HEIGHT + CARD_TITLE_HEIGHT + CARD_CONTAINER_BORDERS; + +export const edgeCanvasCss = (left: number, top: number, width: number) => { + return stylesheet({ + edgeCanvas: { + border: 0, + display: 'block', + left, + transition: 'transform .25s', + overflow: 'visible', + position: 'absolute', + top: px(top), + width, + zIndex: -1, -interface EdgeCanvasState { - edgeGap: number - parentWidth: number + $nest: { + '&.edgeCanvasReverse': { + left: 0, + transform: 'translateX(-100%)', + }, + svg: { + display: 'block', + overflow: 'visible', + position: 'absolute', + }, + }, + }, + }); +}; + +export interface EdgeCanvasProps { + cards: CardDetails[]; + + // The edge is drawn over the card column and offset by the card width + cardWidth: number; + edgeWidth: number; + + // If true edges are drawn from right to left. + reverseEdges: boolean; } /** @@ -27,102 +58,49 @@ interface EdgeCanvasState { * The adjacent column is assumed to be to right of the connecting cards unless `reverseEdges` * is set to true. */ +export class EdgeCanvas extends React.Component { + constructor(props: any) { + super(props); + } + public render(): JSX.Element | null { + const {cards, reverseEdges, edgeWidth} = this.props; -export class EdgeCanvas extends React.Component { - constructor(props: any) { - super(props) - this.state = { - edgeGap: -1, - parentWidth: -1, - } - } + let viewHeight = 1; - public render(): JSX.Element | null { - const {cards, columnPadding, reverseEdges} = this.props; + const lastNode = reverseEdges ? 'y1' : 'y4'; + const lastNodePositions = {y1: 0, y4: 0}; - let viewHeight = 1; - const cardBodyHeight = 67; - const cardContainerBorders = 2; - const cardOffset = CARD_SPACER_HEIGHT + CARD_TITLE_HEIGHT + cardContainerBorders; - const {edgeGap, parentWidth} = this.state - const viewWidth = Math.max(edgeGap, 0) + 2 * columnPadding; - - const css = stylesheet({ - edgeCanvas: { - border: 0, - display: 'block', - left: parentWidth - edgeGap, - top: px(CARD_TITLE_HEIGHT + cardBodyHeight / 2), - overflow: 'visible', - position: 'absolute', - width: viewWidth, - zIndex: -1, - transition: 'transform .25s', - $nest: { - svg: { - display: 'block', - overflow: 'visible', - position: 'absolute', - }, - '&.edgeCanvasReverse': { - left: 0, - transform: 'translateX(-100%)', - }, - }, - }, - }); - - const lastNode = reverseEdges ? 'y1' : 'y4'; - const lastNodePositions = {y1: 0, y4: 0}; + const edgeLines: JSX.Element[] = []; + cards.forEach((card, i) => { + card.elements.forEach((element, j) => { + if (!element.next) { + return; + } - const edgeLines: JSX.Element[] = []; - cards.forEach((card, i) => { - card.elements.forEach((element, j) => { - if (!element.next) return; - const {y1, y4} = lastNodePositions; - edgeLines.push( - - ); - viewHeight += cardBodyHeight; - lastNodePositions[lastNode] += cardBodyHeight; - }); - viewHeight += cardOffset; - lastNodePositions[lastNode] += cardOffset; - }); + edgeLines.push( + + ); - const edgeCanvasClasses = classes(css.edgeCanvas, reverseEdges && 'edgeCanvasReverse'); - sleep(1).then(this.componentDidMount.bind(this)) - return
{edgeLines}
- } + viewHeight += CARD_ROW_HEIGHT; + lastNodePositions[lastNode] += CARD_ROW_HEIGHT; + }); + viewHeight += CARD_OFFSET; + lastNodePositions[lastNode] += CARD_OFFSET; + }); - async componentDidMount() { - const $this = findDOMNode(this) as HTMLElement - const [$next, $parent] = [$this.nextSibling, $this.parentElement] as HTMLElement[] - if (!$this || !$next) return - await sleep(1) // So the browser has time to draw the elements (and have correct clientWidth values) - const parentWidth = $parent.clientWidth - const edgeGap = parentWidth - $next.clientWidth - if (edgeGap === this.state.edgeGap) return - this.setState({edgeGap, parentWidth}) - } + const css = + edgeCanvasCss( + /* left= */ this.props.cardWidth, + /* top= */ CARD_TITLE_HEIGHT + CARD_ROW_HEIGHT / 2, + /* width= */ edgeWidth, + ); + const edgeCanvasClasses = classes(css.edgeCanvas, reverseEdges && 'edgeCanvasReverse'); + return
{edgeLines}
; + } } diff --git a/src/mlmd/EdgeLine.tsx b/src/mlmd/EdgeLine.tsx new file mode 100644 index 0000000..266be82 --- /dev/null +++ b/src/mlmd/EdgeLine.tsx @@ -0,0 +1,38 @@ +import * as React from 'react'; +// @ts-ignore +import LineChart from 'react-svg-line-chart'; + +// How many pixels away from the point the curve should start at. +const HORIZONTAL_CONTROL_POINT_OFFSET = 30; + +interface EdgeLineProps { + height: number; + width: number; + y1: number; + y4: number; +} + +export const EdgeLine: React.FC = (props) => { + const {height, width, y1, y4} = props; + + return ; +}; \ No newline at end of file diff --git a/src/mlmd/LineageActionBar.tsx b/src/mlmd/LineageActionBar.tsx index 18859b1..0cbe539 100644 --- a/src/mlmd/LineageActionBar.tsx +++ b/src/mlmd/LineageActionBar.tsx @@ -49,6 +49,12 @@ const actionBarCss = stylesheet({ } } }, + breadcrumbContainer: { + alignItems: 'center', + display: 'flex', + flexShrink: 1, + overflow: 'hidden', + }, breadcrumbInactive: { color: color.grey, ...baseBreadcrumb, @@ -123,7 +129,7 @@ export class LineageActionBar extends React.Component, - , +