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 { cardWidth : number ; edgeWidth : number ; reverseEdges : boolean ; artifactIds : number [ ] ; offset : number ; top : number ; artifactToCardMap : Map < number , number > ; outputExecutionToOutputArtifactMap : Map < number , number [ ] > ; } /**
 * A version of <EdgeCanvas/> that draws the lines connecting the edges of a list of vertically
 * stacked output artifact cards <LineageCardColumn /> to the many output execution <LineageCard />
 * elements in an adjacent <LineageCardColumn />.
 */ export class ControlledEdgeCanvas extends React . Component < ControlledEdgeCanvasProps > { public render ( ) { 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 = [ ] ; 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 ( < EdgeLine height = { viewHeight } width = { edgeWidth } y1 = { lastNodePositions . y1 } y4 = { lastNodePositions . y4 } / > ) ; } ) ; const css = edgeCanvasCss ( this . props . cardWidth , this . props . top + CARD_TITLE_HEIGHT + CARD_ROW_HEIGHT / 2 , edgeWidth ) ; const edgeCanvasClasses = classes ( css . edgeCanvas , reverseEdges && 'edgeCanvasReverse' ) ; return < div className = { edgeCanvasClasses } > { edgeLines } < /div>; } }