@hms-dbmi-bgm/react-workflow-viz
Version:
React component for visualizing CWL-like workflows and provenance graphs.
646 lines (514 loc) • 27 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
exports.traceEdges = traceEdges;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
var _underscore = _interopRequireDefault(require("underscore"));
var _reactTransitionGroup = require("react-transition-group");
var _d2 = require("d3");
var _Edge = _interopRequireDefault(require("./Edge"));
var _utilities = require("../utilities");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function (o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function (o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function traceEdges(originalEdges, nodes, columnWidth, columnSpacing, rowSpacing, contentWidth, contentHeight, innerMargin) {
var nodeEdgeLedgeWidths = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : [10, 10];
var topMargin = innerMargin && innerMargin.top || 0;
var leftMargin = innerMargin && innerMargin.left || 0;
var endHeight = topMargin + contentHeight + (innerMargin && Math.max(0, innerMargin.bottom - 10)) || 0;
var colStartXMap = {}; // Filled in visibility graph
var nodesByColumn = _underscore["default"].reduce(nodes, function (m, node) {
var column = node.column;
if (typeof m[column] === 'undefined') {
m[column] = []; // Keys assigned as str, not numbers
}
m[column].push(node);
return m;
}, {});
var columnCount = _underscore["default"].keys(nodesByColumn).length;
function buildVisibilityGraph() {
var subdivisions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 4;
// Horizontal Line Y Coords
var partialHeight = rowSpacing / subdivisions;
var quarterHeight = rowSpacing / 4;
var horizontalLineYCoords = [];
var currY = topMargin;
while (currY >= 10) {
currY -= partialHeight;
}
while (currY < endHeight) {
currY += partialHeight;
horizontalLineYCoords.push(currY);
}
var segments = [];
var segmentsByColumnIdx = [];
var _loop = function (columnIdx) {
segmentsByColumnIdx.push([]);
var nodesInColYCoords = _underscore["default"].pluck(nodesByColumn[columnIdx], 'y');
var nodesInColYCoordsLen = nodesInColYCoords.length;
var colStartX = colStartXMap[columnIdx];
if (typeof colStartX === 'undefined') {
colStartX = colStartXMap[columnIdx] = leftMargin + columnIdx * columnWidth + columnSpacing * columnIdx;
}
var colEndX = colStartX + columnWidth;
_underscore["default"].forEach(horizontalLineYCoords, function (yCoord) {
for (var i = 0; i < nodesInColYCoordsLen; i++) {
var highY = nodesInColYCoords[i] + quarterHeight;
var lowY = nodesInColYCoords[i] - quarterHeight;
if (yCoord <= highY && yCoord >= lowY) {
return;
}
}
var segment = [[colStartX, yCoord], [colEndX, yCoord]];
segments.push(segment);
segmentsByColumnIdx[columnIdx].push(segment);
});
};
for (var columnIdx = 0; columnIdx < columnCount; columnIdx++) {
_loop(columnIdx);
} // console.log('HORZ', horizontalLineYCoords, endHeight, nodesByColumn, segments);
return {
segments: segments,
segmentsByColumnIdx: segmentsByColumnIdx
};
}
function assembleSegments(segmentQ) {
arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
var usedSegments = new Map(); // (segment, [[source, target], ...])
var segmentQLen = segmentQ.length;
/**
*
* @param {number} columnIdx - Higher-level abstraction of 'prevXCoord'. Previous/curr column to get segment from.
* @param {number} prevYCoord - Previous Y
* @param {Object} source - Source Node
* @param {Object} target - Target Node
* @param {*} previousEdges
*/
function getNearestSegment(columnIdx, prevYCoord, source, target) {
var previousEdges = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
var targetYCoord = target.y;
var startXForCol = colStartXMap[columnIdx];
var prevEdgesLen = previousEdges.length;
var upperY = Math.max(prevYCoord, targetYCoord);
var lowerY = Math.min(prevYCoord, targetYCoord); //const yCoordMedian = (prevYCoord + targetYCoord) / 2;
var closestSegmentDiff = Infinity;
var closestSegmentIdx = -1;
var currSegment = null,
currSegmentY = 0,
currExistingSegmentNodes = null,
currDiff = null;
var i,
j,
prevEdge,
prevVs,
multiplier = 1,
intersections = 0,
willDiverge = false;
for (i = 0; i < segmentQLen; i++) {
currSegment = segmentQ[i];
currSegmentY = currSegment[0][1];
if (currSegment[0][0] !== startXForCol) {
continue;
} // Skip used segments unless (going to same target node) or (from same source node and on same Y coord).
currExistingSegmentNodes = usedSegments.get(currSegment);
if (currExistingSegmentNodes) {
willDiverge = _underscore["default"].every(currExistingSegmentNodes, function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exSrc = _ref2[0],
exTgt = _ref2[1];
return exSrc === source;
}); // if (!(
// willDiverge || // (below) Gets a little confusing if converge esp in order/grouping. `currSegmentY === prevYCoord` addresses this somewhat.
// (_.every(currExistingSegmentNodes, function([ exSrc, exTgt ]){ return exTgt === target; }) && currSegmentY === prevYCoord)
// )) {
// continue;
// }
if (!willDiverge) {
continue;
}
} //currDiff = Math.abs(yCoordMedian - currSegmentY);
if (currSegmentY > upperY) {
currDiff = currSegmentY - upperY;
} else if (currSegmentY < lowerY) {
currDiff = lowerY - currSegmentY;
} else if (willDiverge) {
currDiff = -0.01;
} else {
//{
// Any path between lower and upper bound is fine.
// Favor those closer to prev edge
//currDiff = Math.abs(targetYCoord - currSegmentY) * 0.01;
currDiff = Math.abs(prevYCoord - currSegmentY) * 0.01;
} // Check for intersections, add to score (unless reusing existing segment)
if (!currExistingSegmentNodes) {
intersections = 0;
for (j = 0; j < prevEdgesLen; j++) {
prevEdge = previousEdges[j];
if (Array.isArray(prevEdge.vertices)) {
prevVs = prevEdge.vertices;
multiplier = 2;
} else {
prevVs = [[prevEdge.source.x + columnWidth, prevEdge.source.y], [prevEdge.target.x, prevEdge.target.y]];
multiplier = 1;
}
prevVs.reduce(function (prevV, v) {
if (!prevV) return v; // First V
if (!(prevV[0] + nodeEdgeLedgeWidths[0] < startXForCol && v[0] >= startXForCol - nodeEdgeLedgeWidths[0])) {
return v;
} // if (source.name === "chromsize" && columnIdx === 2) {
// console.log('TTTX\n', v, '\n', prevV, '\n', columnIdx, intersections);
// }
if (v[1] > currSegmentY && prevV[1] < prevYCoord || v[1] < currSegmentY && prevV[1] > prevYCoord) {
// Boost 'any' intersections
// Multiplier allows us to try to avoid intersecting
// bigger lines moreso than smaller ones
if (intersections === 0) intersections += 2 * multiplier;
intersections += multiplier; //if (startXForCol> 1400 && startXForCol < 1600){
// console.log('X', v[0], v[1], '<-', prevV[0], prevV[1]);
//}
}
return v;
}, null);
} // if (source.name === "chromsize" && columnIdx === 2) {
// console.log('TTT', previousEdges.slice(), columnIdx, currSegmentY, intersections);
// }
currDiff += intersections * (rowSpacing * 0.8);
} // end intersection checking
//if (startXForCol> 1400 && startXForCol < 1600){
// console.log('INT', currDiff, currSegmentY, intersections, prevYCoord);
//}
if (closestSegmentDiff > currDiff) {
closestSegmentDiff = currDiff;
closestSegmentIdx = i;
} // console.log("SEG", currSegment, intersections, prevYCoord, currDiff);
}
if (closestSegmentIdx === -1) {
return null;
}
var bestSegment = segmentQ[closestSegmentIdx];
if (currExistingSegmentNodes) {
currExistingSegmentNodes.push([source, target]);
} else {
usedSegments.set(bestSegment, [[source, target]]);
}
return bestSegment;
}
var originalEdgesSortedByLength = originalEdges.slice(0).sort(function (edgeA, edgeB) {
var sA = edgeA.source,
tA = edgeA.target;
var sB = edgeB.source,
tB = edgeB.target;
var colDifA = Math.abs(tA.column - sA.column);
var colDifB = Math.abs(tB.column - sB.column); // If just 1 col dif, move to front for intersection testing (tracing skipped)
if (colDifA === 1 && colDifB === 1) {
return 0;
}
if (colDifA === 1) {
return -1;
}
if (colDifB === 1) {
return 1;
} // Else do longer edges first
var xDistA = Math.abs(tA.x - sA.x);
var xDistB = Math.abs(tB.x - sB.x);
if (xDistA > xDistB) return -1;
if (xDistA < xDistB) return 1;
var yDistA = Math.abs(tA.y - sA.y);
var yDistB = Math.abs(tB.y - sB.y);
if (yDistA > yDistB) return 1;
if (yDistA < yDistB) return -1;
return 0;
});
var resultEdges = [];
originalEdgesSortedByLength.forEach(function (edge) {
var source = edge.source,
target = edge.target;
var sourceCol = source.column,
sourceX = source.x,
sourceY = source.y;
var targetCol = target.column,
targetX = target.x,
targetY = target.y;
var columnDiff = targetCol - sourceCol;
if (columnDiff <= 0) {
// Shouldn't happen I don't think except if file is re-used/generated or some other unexpected condition.
console.error("Target column is greater than source column", source, target);
resultEdges.push(edge);
return; // Skip tracing it.
}
if (columnDiff === 1) {
resultEdges.push(edge);
return; // Doesn't need to go around obstacles, skip.
}
var vertices = [[sourceX + columnWidth, sourceY]];
var prevY = sourceY;
for (var colIdx = sourceCol + 1; colIdx < targetCol; colIdx++) {
//const yDiff = targetY - prevY;
//const idealYCoord = prevY + (yDiff / 2); // (((colIdx - sourceCol) / columnDiff) * yDiff);
var bestSegment = getNearestSegment(colIdx, prevY, source, target, resultEdges);
if (!bestSegment) {
throw new Error("Could not find viable path for edge");
}
var _bestSegment = _slicedToArray(bestSegment, 2),
_bestSegment$ = _slicedToArray(_bestSegment[0], 2),
bsX = _bestSegment$[0],
bsY = _bestSegment$[1],
_bestSegment$2 = _slicedToArray(_bestSegment[1], 2),
beX = _bestSegment$2[0],
beY = _bestSegment$2[1]; //const origSrcTrg = usedSegments.get(bestSegment);
//const isReusedSource = origSrcTrg[0] === source && origSrcTrg[1] !== target;
vertices.push([bsX - nodeEdgeLedgeWidths[0], bsY]);
vertices.push([beX + nodeEdgeLedgeWidths[1], beY]);
prevY = beY;
}
vertices.push([targetX, targetY]); // console.log("EDGE", edge);
resultEdges.push(_objectSpread(_objectSpread({}, edge), {}, {
vertices: vertices
}));
});
return resultEdges;
}
var res;
var tracedEdges = null;
var attempts = 0;
while (!tracedEdges && attempts < 5) {
res = buildVisibilityGraph(4 + attempts);
try {
tracedEdges = assembleSegments(res.segments, 4 + attempts);
} catch (e) {
tracedEdges = null;
if (e.message === "Could not find viable path for edge") {
console.warn("Could not find path", attempts);
} else {
throw e;
}
}
attempts++;
}
return {
edges: tracedEdges,
horizontalSegments: res.segments
};
}
var ForwardedEdge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
return /*#__PURE__*/_react["default"].createElement(_Edge["default"], _extends({}, props, {
forwardedRef: ref
}));
});
var EdgesLayer = /*#__PURE__*/function (_React$PureComponent) {
_inherits(EdgesLayer, _React$PureComponent);
var _super = _createSuper(EdgesLayer);
function EdgesLayer(props) {
var _this;
_classCallCheck(this, EdgesLayer);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "sortedEdges", (0, _memoizeOne["default"])(function (edges, selectedNodes, isNodeDisabled) {
var nextEdges = EdgesLayer.sortedEdges(edges, selectedNodes, isNodeDisabled);
return nextEdges;
}));
_this.sortedEdges = _this.sortedEdges.bind(_assertThisInitialized(_this)); // Create refs for each node
_this.nodeRefs = {};
return _this;
}
_createClass(EdgesLayer, [{
key: "pathArrows",
value: function pathArrows() {
if (!this.props.pathArrows) return null;
return _Edge["default"].pathArrowsMarkers();
}
/**
* Wraps Edges and each Edge in TransitionGroup and Transition, respectively.
* We cannot use CSSTransition at the moment because it does not change the className
* of SVG element(s). We must manually change it (or an attribute of it).
*/
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
outerHeight = _this$props.outerHeight,
innerWidth = _this$props.innerWidth,
innerHeight = _this$props.innerHeight,
width = _this$props.width,
origEdges = _this$props.edges,
nodes = _this$props.nodes,
selectedNode = _this$props.selectedNode,
isNodeDisabled = _this$props.isNodeDisabled,
contentWidth = _this$props.contentWidth,
_this$props$scale = _this$props.scale,
scale = _this$props$scale === void 0 ? 1 : _this$props$scale,
propColumnWidth = _this$props.columnWidth,
propColumnSpacing = _this$props.columnSpacing,
propRowSpacing = _this$props.rowSpacing,
propInnerMargin = _this$props.innerMargin; // scaling
var columnWidth = (0, _utilities.roundScaled)(propColumnWidth, scale);
var columnSpacing = (0, _utilities.roundScaled)(propColumnSpacing, scale);
var rowSpacing = (0, _utilities.roundScaled)(propRowSpacing, scale);
var innerMargin = {
top: (0, _utilities.roundScaled)(propInnerMargin.top, scale),
right: (0, _utilities.roundScaled)(propInnerMargin.right, scale),
bottom: (0, _utilities.roundScaled)(propInnerMargin.bottom, scale),
left: (0, _utilities.roundScaled)(propInnerMargin.left, scale)
};
var _traceEdges = traceEdges(origEdges, nodes, columnWidth, columnSpacing, rowSpacing, contentWidth, innerHeight, innerMargin),
edges = _traceEdges.edges,
horizontalSegments = _traceEdges.horizontalSegments;
var edgeCount = edges.length;
var divWidth = Math.max(width, contentWidth);
return /*#__PURE__*/_react["default"].createElement("div", {
className: "edges-layer-wrapper",
style: {
'width': divWidth,
'height': outerHeight
}
}, /*#__PURE__*/_react["default"].createElement("svg", {
className: "edges-layer",
width: divWidth,
height: outerHeight
}, this.pathArrows(), /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.TransitionGroup, {
component: null
}, _underscore["default"].map(this.sortedEdges(edges, selectedNode, isNodeDisabled), function (edge) {
var key = (edge.source.id || edge.source.name) + "----" + (edge.target.id || edge.target.name);
if (!_this2.nodeRefs[key]) {
_this2.nodeRefs[key] = /*#__PURE__*/_react["default"].createRef();
}
return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.Transition, {
unmountOnExit: true,
mountOnEnter: true,
timeout: 500,
key: key,
onEnter: function onEnter() {
return EdgesLayer.edgeOnEnter(_this2.nodeRefs[key]);
},
onEntering: function onEntering() {
return EdgesLayer.edgeOnEntering(_this2.nodeRefs[key]);
},
onEntered: function onEntered() {
return EdgesLayer.edgeOnEntered(_this2.nodeRefs[key]);
},
onExit: function onExit() {
return EdgesLayer.edgeOnExit(_this2.nodeRefs[key]);
},
nodeRef: _this2.nodeRefs[key]
}, /*#__PURE__*/_react["default"].createElement(ForwardedEdge, _extends({}, _this2.props, {
key: key,
edge: edge,
edgeCount: edgeCount,
startX: edge.source.x,
startY: edge.source.y,
endX: edge.target.x,
endY: edge.target.y,
ref: _this2.nodeRefs[key]
})));
})), /*#__PURE__*/_react["default"].createElement(DebugVizGraphLayer, {
segments: horizontalSegments
})));
}
}], [{
key: "sortedEdges",
value:
/**
* Move selected edges to top, and disabled ones to bottom, because CSS z-index doesn't work for SVG elements.
*/
function sortedEdges(edges, selectedNode, isNodeDisabled) {
return edges.slice(0).sort(function (a, b) {
var isASelected = _Edge["default"].isSelected(a, selectedNode, isNodeDisabled);
var isBSelected = _Edge["default"].isSelected(b, selectedNode, isNodeDisabled);
if (isASelected && !isBSelected) {
return 1;
} else if (!isASelected && isBSelected) {
return -1;
} else {
return 0;
}
}).sort(function (a, b) {
var isADisabled = _Edge["default"].isDisabled(a, isNodeDisabled);
var isBDisabled = _Edge["default"].isDisabled(b, isNodeDisabled);
if (isADisabled && !isBDisabled) {
return -1;
} else if (!isADisabled && isBDisabled) {
return 1;
} else {
return 0;
}
});
}
}, {
key: "edgeOnEnter",
value: function edgeOnEnter(nodeRef) {
if (nodeRef.current && nodeRef.current.style) {
nodeRef.current.style.opacity = 0;
}
}
}, {
key: "edgeOnEntering",
value: function edgeOnEntering(nodeRef) {
if (nodeRef.current && nodeRef.current.style) {
nodeRef.current.style.opacity = 0;
}
}
}, {
key: "edgeOnEntered",
value: function edgeOnEntered(nodeRef) {
if (nodeRef.current && nodeRef.current.style) {
nodeRef.current.style.opacity = null;
}
}
}, {
key: "edgeOnExit",
value: function edgeOnExit(nodeRef) {
if (nodeRef.current && nodeRef.current.style) {
nodeRef.current.style.opacity = 0;
}
}
}]);
return EdgesLayer;
}(_react["default"].PureComponent);
exports["default"] = EdgesLayer;
var DebugVizGraphLayer = /*#__PURE__*/_react["default"].memo(function (_ref3) {
var segments = _ref3.segments,
_ref3$enabled = _ref3.enabled,
enabled = _ref3$enabled === void 0 ? false : _ref3$enabled;
if (!enabled) return null;
var paths = segments.map(function (seg) {
var path = (0, _d2.path)();
path.moveTo.apply(path, _toConsumableArray(seg[0]));
path.lineTo.apply(path, _toConsumableArray(seg[1]));
return path.toString();
}).map(function (pathStr, idx) {
return /*#__PURE__*/_react["default"].createElement("path", {
d: pathStr,
key: idx
});
});
return /*#__PURE__*/_react["default"].createElement("g", {
className: "vis-debug-graph"
}, paths);
});