@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/components/PipelineGraph/PipelineRunGraph.js

@@ -0,0 +1,341 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { produce } from 'immer';
+import { clog } from "../../utils/debug";
+// eslint-disable-next-line import/no-cycle
+import { PipelineDAG } from "./PipelineDAG";
+import { groupBy } from 'lodash-es';
+import { Rect } from "./Rect";
+import intl from "../../locale";
+var vGap = 10;
+var hGap = 48;
+
+// export const origin = {
+//   x: SOURCES_WIDTH + hGap,
+//   y: 0,
+// };
+
+/**
+ * 提供节点和连线数据，不渲染实际的 svg 元素
+ * 编辑/运行共用。潜在缩略图？
+ */
+export var PipelineRunGraph = /*#__PURE__*/function () {
+  function PipelineRunGraph(nodes, stageIds, graphConfigs) {
+    this.graphConfigs = {
+      vGap: 10,
+      hGap: 48,
+      originX: 0,
+      originY: 0
+    };
+    this.pipelineDAG = void 0;
+    this.columnStacks = void 0;
+    this.stageIds = void 0;
+    this.nodes = void 0;
+    /* nodeId -> 计算的节点位置 */
+    this.nodePositions = {};
+    /* nodeId -> 报告的尺寸 */
+    this.uiRects = {};
+    /* edgeId -> svg path */
+    this.nodeEdges = {};
+    this.graph = {};
+    this.graphConfigs = _extends({}, this.graphConfigs, graphConfigs);
+    this.nodes = nodes;
+    this.stageIds = stageIds;
+    this.pipelineDAG = new PipelineDAG(nodes);
+    this.columnStacks = this.getColumnStack();
+  }
+  var _proto = PipelineRunGraph.prototype;
+  _proto.getNodesPosition = function getNodesPosition() {
+    var _this = this;
+    this.nodePositions = produce(this.nodePositions, function (draft) {
+      var xCursor = _this.graphConfigs.originX;
+      // 每一列
+      _this.columnStacks.forEach(function (col) {
+        var bottomCursor = _this.graphConfigs.originY;
+        var thisColRight = xCursor + /* maxElmentWidthThisCol */Math.max.apply(Math, col.map(function (id) {
+          return _this.uiRects[id].width;
+        }));
+        xCursor = thisColRight + _this.graphConfigs.hGap;
+        // 一列中的每一个
+        col.forEach(function (nodeId, i) {
+          var y = bottomCursor + (i ? _this.graphConfigs.vGap : 0);
+          if (!draft[nodeId]) {
+            draft[nodeId] = {};
+          }
+
+          // 所有卡片 右端对齐
+          draft[nodeId].x = thisColRight - _this.uiRects[nodeId].width;
+          draft[nodeId].y = y;
+          var node = _this.uiRects[nodeId];
+          // no node?
+          var nodeHeight = node.height;
+          bottomCursor = y + nodeHeight;
+        });
+      });
+    });
+  };
+  _proto.getEdgesSvgPath = function getEdgesSvgPath() {
+    var _this2 = this;
+    var dagEdges = this.pipelineDAG.edges;
+    clog('getEdgesSvgPath');
+    this.nodeEdges = produce(this.nodeEdges, function (nodeEdgesDraft) {
+      dagEdges.forEach(function (edge) {
+        var path = [];
+        var fromColIndex = _this2.columnStacks.findIndex(function (col) {
+          return col.includes(edge.from);
+        });
+        var toColIndex = _this2.columnStacks.findIndex(function (col) {
+          return col.includes(edge.to);
+        });
+        var isAdjacentColumn = toColIndex - fromColIndex === 1;
+
+        /* 两列之间的 gap 的水平中间应该在哪里 */
+        var getColumnGapCenter = function getColumnGapCenter(leftColumnIndex) {
+          if (!_this2.columnStacks[leftColumnIndex + 1]) {
+            throw new Error(intl.get({
+              id: 'rdc-tb-cd-assets.components.PipelineGraph.PipelineRunGraph.TheNumberOfInvalidColumns',
+              defaultMessage: '无效的列数。最后一列之后没有 gap'
+            }));
+          }
+          var leftColumnRight = Math.max.apply(Math, _this2.columnStacks[leftColumnIndex].map(function (nodeId) {
+            return _this2.nodePositions[nodeId].x + _this2.uiRects[nodeId].width;
+          }));
+          var rightColumnLeft = Math.min.apply(Math, _this2.columnStacks[leftColumnIndex + 1].map(function (nodeId) {
+            return _this2.nodePositions[nodeId].x;
+          }));
+          return Math.round((leftColumnRight + rightColumnLeft) / 2);
+        };
+        var fromNodePostion = _this2.nodePositions[edge.from];
+        var toNodePostion = _this2.nodePositions[edge.to];
+        var edgeFromConnector = {
+          x: Math.round(fromNodePostion.x + _this2.uiRects[edge.from].afterConnector.x),
+          y: Math.round(fromNodePostion.y + _this2.uiRects[edge.from].afterConnector.y)
+        };
+        var edgeToConnector = {
+          x: Math.round(toNodePostion.x + _this2.uiRects[edge.to].preConnector.x),
+          y: Math.round(toNodePostion.y + _this2.uiRects[edge.to].preConnector.y)
+        };
+        if (isAdjacentColumn) {
+          path.push.apply(path, _this2.getAdjacentPathSegment(edgeFromConnector, edgeToConnector, getColumnGapCenter(fromColIndex)));
+        } else {
+          var lowestBetweenWithGapV = /* IIFE block */function () {
+            var stacksBetween = _this2.columnStacks.slice(fromColIndex + 1, toColIndex);
+            var lowestPerCol = stacksBetween.flatMap(function (v) {
+              return v.slice(-1);
+            }).map(function (nid) {
+              var position = _this2.nodePositions[nid];
+              var rectSize = _this2.uiRects[nid];
+              return position.y + rectSize.height;
+            });
+            var lowestBetween = Math.max.apply(Math, lowestPerCol);
+            return Math.round(lowestBetween + _this2.graphConfigs.hGap / 2);
+          }();
+          var bottomY = Math.max(lowestBetweenWithGapV, edgeFromConnector.y, edgeToConnector.y);
+          path.push.apply(path, _this2.getAdjacentPathSegment(edgeFromConnector, {
+            x: edgeFromConnector.x + _this2.graphConfigs.hGap,
+            y: bottomY
+          }, getColumnGapCenter(fromColIndex)));
+          path.push("H " + (edgeToConnector.x - _this2.graphConfigs.hGap));
+          var segmentWithoutStartM = _this2.getAdjacentPathSegment({
+            x: edgeToConnector.x - _this2.graphConfigs.hGap,
+            y: bottomY
+          }, edgeToConnector, getColumnGapCenter(toColIndex - 1)).slice(1);
+          path.push.apply(path, segmentWithoutStartM);
+        }
+        var edgeId = _this2.buildEdgeId(edge);
+        nodeEdgesDraft[edgeId] = path.join(' ');
+      });
+    });
+  };
+  _proto.getAdjacentPathSegment = function getAdjacentPathSegment(from, to, hCenter) {
+    var path = [];
+    var radiusX = 10;
+    var verticalDiff = to.y - from.y;
+    var halfVDiff = Math.abs(verticalDiff) / 2;
+    var vDirection = verticalDiff > 0 ? 1 : verticalDiff === 0 ? 0 : -1;
+    var columnGapMiddleX = hCenter || (from.x + to.x) / 2;
+    var xSmooth = Math.max(radiusX - halfVDiff, 0) * 0.5;
+    path.push("M " + from.x + "," + from.y);
+    path.push("H " + (columnGapMiddleX - radiusX));
+    path.push("Q " + (columnGapMiddleX - xSmooth) + "," + from.y + " " + columnGapMiddleX + "," + (from.y + vDirection * Math.min(radiusX, halfVDiff)));
+    path.push("V " + (to.y - vDirection * Math.min(radiusX, halfVDiff)));
+    path.push("Q " + (columnGapMiddleX + xSmooth) + "," + to.y + " " + (columnGapMiddleX + radiusX) + "," + to.y);
+    path.push("H " + to.x);
+    return path;
+  };
+  _proto.getGraph = function getGraph() {
+    var _this3 = this;
+    if (Object.entries(this.uiRects).length !== this.nodes.length) {
+      throw new Error(intl.get({
+        id: 'rdc-tb-cd-assets.components.PipelineGraph.PipelineRunGraph.TheNumberOfElementSizes',
+        defaultMessage: '元素尺寸数量不匹配'
+      }));
+    }
+    this.getNodesPosition();
+    this.getEdgesSvgPath();
+    this.graph = produce(this.graph, function (draft) {
+      draft.rects = _this3.nodePositions;
+      draft.edges = _this3.nodeEdges;
+      draft.uiRects = _this3.uiRects;
+    });
+    return this.graph;
+  }
+
+  // 获取 stage 的位置尺寸
+  ;
+  _proto.getStageRects = function getStageRects() {
+    var _this4 = this;
+    var stages = groupBy(this.nodes.filter(function (n) {
+      return n.payload.type === 'JOB';
+    }), function (n) {
+      return n.payload.stageId;
+    });
+    return Object.entries(stages).map(function (_ref) {
+      var stageId = _ref[0],
+        nodes = _ref[1];
+      var stageName = nodes[0].payload.stageName;
+      var lefts = nodes.map(function (n) {
+        return _this4.nodePositions[n.id].x;
+      });
+      var tops = nodes.map(function (n) {
+        return _this4.nodePositions[n.id].y;
+      });
+      var rights = nodes.map(function (n) {
+        return _this4.nodePositions[n.id].x + _this4.uiRects[n.id].width;
+      });
+      var bottoms = nodes.map(function (n) {
+        return _this4.nodePositions[n.id].y + _this4.uiRects[n.id].height;
+      });
+      var innerRect = new Rect({
+        x: Math.min.apply(Math, lefts),
+        y: Math.min.apply(Math, tops),
+        bottom: Math.max.apply(Math, bottoms),
+        right: Math.max.apply(Math, rights)
+      });
+      return {
+        stageId: stageId,
+        stageName: stageName,
+        // 类似 contentBox
+        innerRect: innerRect,
+        // 类似 borderBox
+        outerRect: innerRect.setXY(innerRect.x - _this4.graphConfigs.hGap / 2, innerRect.y, 'resize').setRightBottom(innerRect.right + _this4.graphConfigs.hGap / 2, innerRect.bottom + _this4.graphConfigs.hGap, 'resize')
+      };
+    });
+  };
+  _proto.getColumnStack = function getColumnStack() {
+    var _this5 = this;
+    var depthMap = {};
+
+    /** 每个stage起点的深度，每个stage计算完后更新 */
+    var stageDepth = 0;
+    this.stageIds.forEach(function (stageId) {
+      var thisStageNodes = _this5.nodes.filter(function (n) {
+        return n.payload.type === 'JOB' && n.payload.stageId == stageId;
+      });
+      var nodes = [].concat(thisStageNodes);
+
+      /** 此 stage 中的节点深度 */
+      var nodeDepths = {};
+      function getDepth(node) {
+        var _node$dependsOn;
+        if (nodeDepths[node.id] !== undefined) {
+          return nodeDepths[node.id];
+        }
+        var isHead = !((_node$dependsOn = node.dependsOn) !== null && _node$dependsOn !== void 0 && _node$dependsOn.length) || node.dependsOn.every(function (depId) {
+          return !nodes.find(function (node) {
+            return node.id === depId;
+          });
+        });
+        if (isHead) {
+          nodeDepths[node.id] = stageDepth;
+          return stageDepth;
+        }
+        var depNodes = node.dependsOn.map(function (depid) {
+          return nodes.find(function (node) {
+            return node.id === depid;
+          });
+        }).filter(Boolean);
+        var depth = 1 + Math.max.apply(Math, depNodes.map(function (n) {
+          return getDepth(n);
+        }));
+        nodeDepths[node.id] = depth;
+        return depth;
+      }
+      nodes.forEach(function (n) {
+        return getDepth(n);
+      });
+      depthMap = _extends({}, depthMap, nodeDepths);
+      stageDepth = Math.max.apply(Math, Object.values(nodeDepths)) + 1;
+    });
+    var stack = [];
+    Object.entries(depthMap).forEach(function (_ref2) {
+      var id = _ref2[0],
+        _depth = _ref2[1];
+      var depth = _depth;
+      if (stack[depth]) {
+        stack[depth].push(id);
+      } else {
+        stack[depth] = [id];
+      }
+    });
+    console.log('stack');
+    return stack;
+  };
+  _proto.getHighlightNodesAndEdgesById = function getHighlightNodesAndEdgesById(nodeId) {
+    var CROSS_STAGE = true;
+    var edgeIds = this.pipelineDAG.edges.filter(function (e) {
+      return e.from === nodeId || e.to === nodeId;
+    }).map(this.buildEdgeId);
+    var nodesBefore = this.pipelineDAG.getNodePre(nodeId) || [];
+    var nodesAfter = this.pipelineDAG.getNodeAfter(nodeId) || [];
+    var nodeIds = [].concat(nodesBefore, [nodeId], nodesAfter);
+    if (CROSS_STAGE) {
+      var beforeIsNodeConnector = nodesBefore.length === 1 && this.nodes.find(function (node) {
+        return node.id === nodesBefore[0];
+      }).payload.type === 'STAGE_CONNECTOR';
+      var afterIsNodeConnector = nodesAfter.length === 1 && this.nodes.find(function (node) {
+        return node.id === nodesAfter[0];
+      }).payload.type === 'STAGE_CONNECTOR';
+      if (beforeIsNodeConnector) {
+        var nodeIdBefore = nodesBefore[0];
+        var edges = this.pipelineDAG.edges.filter(function (e) {
+          return e.to === nodeIdBefore;
+        }).map(this.buildEdgeId);
+        var nodes = this.pipelineDAG.getNodePre(nodeIdBefore);
+        edgeIds = [].concat(edgeIds, edges);
+        nodeIds = [].concat(nodeIds, nodes);
+      }
+      if (afterIsNodeConnector) {
+        var nodeIdAfter = nodesAfter[0];
+        var _edges = this.pipelineDAG.edges.filter(function (e) {
+          return e.from === nodeIdAfter;
+        }).map(this.buildEdgeId);
+        var _nodes = this.pipelineDAG.getNodeAfter(nodeIdAfter);
+        edgeIds = [].concat(edgeIds, _edges);
+        nodeIds = [].concat(nodeIds, _nodes);
+      }
+    }
+    return {
+      edgeIds: edgeIds,
+      nodeIds: nodeIds
+    };
+  };
+  _proto.buildEdgeId = function buildEdgeId(edge) {
+    return "@" + edge.from + "-->@" + edge.to;
+  }
+
+  // isAllRectsSetted() {
+  //   return
+  // }
+  ;
+  _proto.setUIRectSize = function setUIRectSize(nodeId, mutate) {
+    if (nodeId) {
+      this.uiRects = produce(this.uiRects, function (uiRectsDraft) {
+        uiRectsDraft[nodeId] = uiRectsDraft[nodeId] || {};
+        mutate(uiRectsDraft[nodeId]);
+      });
+    }
+  };
+  return PipelineRunGraph;
+}();
+PipelineRunGraph.vGap = vGap;
+PipelineRunGraph.hGap = hGap;

package/es/components/PipelineGraph/Rect.d.ts

@@ -0,0 +1,29 @@
+interface RectConstructBySize {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface RectConstructBy4Edge {
+    x: number;
+    y: number;
+    right: number;
+    bottom: number;
+}
+export declare class Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    constructor(rect: RectConstructBySize);
+    constructor(rect: RectConstructBy4Edge);
+    get top(): number;
+    get left(): number;
+    get right(): number;
+    get bottom(): number;
+    setWidth(width: number): Rect;
+    setHeight(height: number): Rect;
+    setXY(x: number, y: number, action: 'resize' | 'move'): Rect;
+    setRightBottom(right: number, bottom: number, action: 'resize' | 'move'): Rect;
+}
+export {};

package/es/components/PipelineGraph/Rect.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _createClass from "@babel/runtime/helpers/createClass";
+export var Rect = /*#__PURE__*/function () {
+  function Rect(rect) {
+    this.x = null;
+    this.y = null;
+    this.width = null;
+    this.height = null;
+    this.x = rect.x;
+    this.y = rect.y;
+    if ('width' in rect) {
+      this.width = rect.width;
+      this.height = rect.height;
+    } else {
+      this.width = rect.right - rect.x;
+      this.height = rect.bottom - rect.y;
+    }
+  }
+  var _proto = Rect.prototype;
+  _proto.setWidth = function setWidth(width) {
+    return new Rect(_extends({}, this, {
+      width: width
+    }));
+  };
+  _proto.setHeight = function setHeight(height) {
+    return new Rect(_extends({}, this, {
+      height: height
+    }));
+  };
+  _proto.setXY = function setXY(x, y, action) {
+    if (action === 'move') {
+      return new Rect({
+        x: x,
+        y: y,
+        width: this.width,
+        height: this.height
+      });
+    } else if (action === 'resize') {
+      return new Rect({
+        x: x,
+        y: y,
+        right: this.right,
+        bottom: this.bottom
+      });
+    } else {
+      throw new TypeError();
+    }
+  };
+  _proto.setRightBottom = function setRightBottom(right, bottom, action) {
+    if (action === 'move') {
+      var x = right - this.width;
+      var y = bottom - this.height;
+      return new Rect({
+        x: x,
+        y: y,
+        width: this.width,
+        height: this.height
+      });
+    } else if (action === 'resize') {
+      return new Rect({
+        x: this.x,
+        y: this.y,
+        right: right,
+        bottom: bottom
+      });
+    } else {
+      throw new TypeError();
+    }
+  };
+  return _createClass(Rect, [{
+    key: "top",
+    get: function get() {
+      return this.y;
+    }
+  }, {
+    key: "left",
+    get: function get() {
+      return this.x;
+    }
+  }, {
+    key: "right",
+    get: function get() {
+      return this.x + this.width;
+    }
+  }, {
+    key: "bottom",
+    get: function get() {
+      return this.y + this.height;
+    }
+  }]);
+}();

package/es/components/PipelineGraph/StageHeader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PipelineCanvasTransform } from './PipelineCanvas';
+import { Rect } from './Rect';
+interface IProps {
+    innerRectOnCanvas: Rect;
+    outerRectOnCanvas: Rect;
+    transform: PipelineCanvasTransform;
+    y: number;
+    stickyLeft?: number;
+    children: React.ReactNode;
+}
+export default function StageHeader(props: IProps): JSX.Element;
+export {};

package/es/components/PipelineGraph/StageHeader.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { createProjection } from "./createProjection";
+import { CanvasEntity } from "./PipelineCanvas";
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { clamp } from "./utils";
+export default function StageHeader(props) {
+  var projection = createProjection(props.transform);
+  var outerRectPosOnVP = projection.canvasToViewPort(props.outerRectOnCanvas);
+  var innerRectPosOnVP = projection.canvasToViewPort(props.innerRectOnCanvas);
+  var _useState = useState(0),
+    titleWidth = _useState[0],
+    setTitleWidth = _useState[1];
+  function sticky(left, width, container) {
+    var rightMax = container.right - width;
+    var stickyPos = left + 0;
+    return clamp(container.left, rightMax, stickyPos);
+  }
+  var isSticky = typeof props.stickyLeft === 'number';
+  var x = isSticky ? sticky(props.stickyLeft, titleWidth, {
+    left: innerRectPosOnVP.x,
+    right: innerRectPosOnVP.right
+  }) : innerRectPosOnVP.x;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CanvasEntity, {
+    x: Math.ceil(outerRectPosOnVP.x),
+    y: props.y
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: Math.floor(outerRectPosOnVP.width - 1)
+    },
+    className: 'stageNameBar'
+  })), /*#__PURE__*/React.createElement(CanvasEntity, {
+    x: x,
+    y: props.y
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'stageName'
+  }, props.children, /*#__PURE__*/React.createElement(AutoSizer, {
+    onResize: function onResize(_ref) {
+      var width = _ref.width;
+      setTitleWidth(width);
+    }
+  }, function () {
+    return null;
+  }))));
+}

package/es/components/PipelineGraph/ViewPortCanvas.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const viewPortCanavsRender: ({ graph, transform, viewPortSize, sourceElementTitle, canvasCptRef, }: {
+    graph: any;
+    transform: any;
+    viewPortSize: any;
+    sourceElementTitle: any;
+    canvasCptRef: any;
+}) => JSX.Element;

package/es/components/PipelineGraph/ViewPortCanvas.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import { createProjection } from "./createProjection";
+import { Rect } from "./Rect";
+import { STATUSBAR_HEIGHT, SOURCES_SIDEBAR_WIDTH, SOURCES_WIDTH, SOURCES_PADDING } from "./sizes";
+import StageHeader from "./StageHeader";
+import { roundToPoint5 } from "./utils";
+import { ViewPortStatusBar } from "./ViewPortStatusBar";
+
+// 视口上的，不随画布缩放的元素
+export var viewPortCanavsRender = function viewPortCanavsRender(_ref) {
+  var _graph$nodes, _graphItem$stageConne;
+  var graph = _ref.graph,
+    transform = _ref.transform,
+    viewPortSize = _ref.viewPortSize,
+    sourceElementTitle = _ref.sourceElementTitle,
+    canvasCptRef = _ref.canvasCptRef;
+  if (!graph) {
+    return null;
+  }
+  var projection = createProjection(transform);
+  var graphContent = graph.getGraph();
+  var graphItem = {
+    stageConnector: (_graph$nodes = graph.nodes) === null || _graph$nodes === void 0 ? void 0 : _graph$nodes.filter(function (n) {
+      return n.payload.type === 'STAGE_CONNECTOR';
+    }).map(function (node) {
+      var _graphContent$rects;
+      return graphContent === null || graphContent === void 0 ? void 0 : (_graphContent$rects = graphContent.rects) === null || _graphContent$rects === void 0 ? void 0 : _graphContent$rects[node.id];
+    }),
+    stages: function () {
+      try {
+        return graph === null || graph === void 0 ? void 0 : graph.getStageRects();
+      } catch (e) {
+        //
+      }
+    }()
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
+    "data-dbg-id": "viewport-svg",
+    width: "100%",
+    height: "100%"
+  }, graphItem === null || graphItem === void 0 ? void 0 : (_graphItem$stageConne = graphItem.stageConnector) === null || _graphItem$stageConne === void 0 ? void 0 : _graphItem$stageConne.map(function (connector) {
+    if (!connector) return null;
+    var posOnVP = projection.canvasToViewPort(connector);
+    return /*#__PURE__*/React.createElement("path", {
+      style: {
+        animation: 'none'
+      },
+      d: "M " + roundToPoint5(posOnVP.x) + ",0 V " + viewPortSize.height,
+      strokeWidth: "1",
+      stroke: "#dbdbdb"
+    });
+  })), headerTitle({
+    top: 0,
+    graphItem: graphItem,
+    transform: transform,
+    sourceElementTitle: sourceElementTitle
+  }), /*#__PURE__*/React.createElement(ViewPortStatusBar, {
+    top: 0,
+    transform: transform,
+    projection: projection,
+    graphItem: graphItem,
+    sourceElementTitle: sourceElementTitle,
+    canvasCptRef: canvasCptRef
+  }));
+};
+function headerTitle(_ref2) {
+  var _graphItem$stages;
+  var graphItem = _ref2.graphItem,
+    top = _ref2.top,
+    transform = _ref2.transform,
+    sourceElementTitle = _ref2.sourceElementTitle;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, graphItem === null || graphItem === void 0 ? void 0 : (_graphItem$stages = graphItem.stages) === null || _graphItem$stages === void 0 ? void 0 : _graphItem$stages.map(function (v) {
+    var headerY = Math.max(top + STATUSBAR_HEIGHT - 1, 0);
+    return /*#__PURE__*/React.createElement(StageHeader, {
+      innerRectOnCanvas: v.innerRect,
+      outerRectOnCanvas: v.outerRect,
+      transform: transform,
+      y: headerY,
+      stickyLeft: SOURCES_SIDEBAR_WIDTH + 18
+    }, v.stageName || v.stageId);
+  }), function () {
+    var headerY = Math.max(top + STATUSBAR_HEIGHT - 1, 0);
+    return /*#__PURE__*/React.createElement(StageHeader, {
+      innerRectOnCanvas: new Rect({
+        x: SOURCES_PADDING,
+        width: SOURCES_WIDTH - SOURCES_PADDING * 2,
+        // padding
+        height: 0,
+        y: 0
+      }),
+      outerRectOnCanvas: new Rect({
+        x: 0,
+        width: SOURCES_WIDTH,
+        y: /* unused */0,
+        height: /* unused */0
+      }),
+      y: headerY,
+      transform: transform
+    }, sourceElementTitle);
+  }());
+}
+
+// export function statusBar(top, statusBarRender) {
+//   // {/* status bar */}
+//   return (
+//     <>
+//       <CanvasEntity x={0} y={top} style={{ width: '100%' }}>
+//         <div
+//           style={{
+//             backgroundColor: '#ffffff',
+//             marginTop: -1,
+//             pointerEvents: 'initial',
+//           }}
+//         >
+//           {statusBarRender()}
+//         </div>
+//       </CanvasEntity>
+
+//       {/* bar shadow */}
+//       <CanvasEntity x={0} y={0}>
+//         <div
+//           style={{
+//             boxShadow: top > -5 ? 'none' : '#7e7e7e75 0px 1px 3px 0px',
+//             height: 1,
+//             width: 'calc(100vw - 64px)',
+//             transition: 'box-shadow 0.2s',
+//           }}
+//         ></div>
+//       </CanvasEntity>
+//     </>
+//   );
+// }

package/es/components/PipelineGraph/ViewPortStatusBar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import PipelineCanvas from './PipelineCanvas';
+import { createProjection } from './createProjection';
+interface IProps {
+    projection: ReturnType<typeof createProjection>;
+    canvasCptRef: React.MutableRefObject<PipelineCanvas>;
+    sourceElementTitle: string;
+    top: number;
+    transform: any;
+}
+export declare function ViewPortStatusBar(props: IProps): JSX.Element;
+export {};