mma-server/src/main/resources/com/aliyun/odps/mma/server/ui/static/dag-viz.js
/* (Job page only) Helper function to connect two RDDs with a curved edge. */
(Job page only) Helper function to connect two RDDs with a curved edge.
( Job page only ) Helper function to connect two RDDs with a curved edge .
function connectRDDs(fromRDDId, toRDDId, edgesContainer, svgContainer) {
  var fromNodeId = VizConstants.nodePrefix + fromRDDId;
  var toNodeId = VizConstants.nodePrefix + toRDDId;
  var fromPos = getAbsolutePosition(svgContainer.select("g." + fromNodeId));
  var toPos = getAbsolutePosition(svgContainer.select("g." + toNodeId));
  var delta = toFloat(svgContainer
  .select("g.node." + toNodeId)
  .select("circle")
  .attr("r"));
  if (fromPos.x < toPos.x) {
    fromPos.x += delta;
    toPos.x -= delta;
  } else if (fromPos.x > toPos.x) {
    fromPos.x -= delta;
    toPos.x += delta;
  }
  var points;
  if (fromPos.y == toPos.y) {
    points = [
      [fromPos.x, fromPos.y],
      [fromPos.x + (toPos.x - fromPos.x) * 0.2, fromPos.y],
      [fromPos.x + (toPos.x - fromPos.x) * 0.3, fromPos.y - 20],
      [fromPos.x + (toPos.x - fromPos.x) * 0.7, fromPos.y - 20],
      [fromPos.x + (toPos.x - fromPos.x) * 0.8, toPos.y],
      [toPos.x, toPos.y]
    ];
  } else {
    points = [
      [fromPos.x, fromPos.y],
      [fromPos.x + (toPos.x - fromPos.x) * 0.4, fromPos.y],
      [fromPos.x + (toPos.x - fromPos.x) * 0.6, toPos.y],
      [toPos.x, toPos.y]
    ];
  }
  var line = d3.svg.line().interpolate("basis");
  edgesContainer.append("path").datum(points).attr("d", line);
}
function connectRDDs ( fromRDDId , toRDDId , edgesContainer , svgContainer ) { var fromNodeId = VizConstants . nodePrefix + fromRDDId ; var toNodeId = VizConstants . nodePrefix + toRDDId ; var fromPos = getAbsolutePosition ( svgContainer . select ( "g." + fromNodeId ) ) ; var toPos = getAbsolutePosition ( svgContainer . select ( "g." + toNodeId ) ) ; var delta = toFloat ( svgContainer . select ( "g.node." + toNodeId ) . select ( "circle" ) . attr ( "r" ) ) ; if ( fromPos . x < toPos . x ) { fromPos . x += delta ; toPos . x -= delta ; } else if ( fromPos . x > toPos . x ) { fromPos . x -= delta ; toPos . x += delta ; } var points ; if ( fromPos . y == toPos . y ) { points = [ [ fromPos . x , fromPos . y ] , [ fromPos . x + ( toPos . x - fromPos . x ) * 0.2 , fromPos . y ] , [ fromPos . x + ( toPos . x - fromPos . x ) * 0.3 , fromPos . y - 20 ] , [ fromPos . x + ( toPos . x - fromPos . x ) * 0.7 , fromPos . y - 20 ] , [ fromPos . x + ( toPos . x - fromPos . x ) * 0.8 , toPos . y ] , [ toPos . x , toPos . y ] ] ; } else { points = [ [ fromPos . x , fromPos . y ] , [ fromPos . x + ( toPos . x - fromPos . x ) * 0.4 , fromPos . y ] , [ fromPos . x + ( toPos . x - fromPos . x ) * 0.6 , toPos . y ] , [ toPos . x , toPos . y ] ] ; } var line = d3 . svg . line ( ) . interpolate ( "basis" ) ; edgesContainer . append ( "path" ) . datum ( points ) . attr ( "d" , line ) ; }
(Job page only) Helper function to connect two RDDs with a curved edge.
( Job page only ) Helper function to connect two RDDs with a curved edge .
// On the job page, RDDs are rendered as dots (circles). When rendering the path, // we need to account for the radii of these circles. Otherwise the arrow heads // will bleed into the circle itself. // If they are on the same rank, curve the middle part of the edge // upward a little to avoid interference with things in between // e.g.       _______ //      _____/       \_____ // Otherwise, draw a curved edge that flattens out on both ends // e.g.       _____ //           / //          | //    _____/