import React from 'react'; import { Group } from '@vx/group'; import { curveBasis } from '@vx/curve'; import { LinePath } from '@vx/shape'; import { TransformMatrix } from '@vx/zoom/lib/types'; import { NodeData, Direction, EntitySelectParams, TreeProps, VizNode, VizEdge, EntityAndType } from './types'; import LineageEntityNode from './LineageEntityNode'; import { ANTD_GRAY } from '../entity/shared/constants'; type Props = { data: NodeData; zoom: { transformMatrix: TransformMatrix; }; onEntityClick: (EntitySelectParams) => void; onEntityCenter: (EntitySelectParams) => void; onLineageExpand: (data: EntityAndType) => void; selectedEntity?: EntitySelectParams; hoveredEntity?: EntitySelectParams; setHoveredEntity: (EntitySelectParams) => void; onDrag: (params: EntitySelectParams, event: React.MouseEvent) => void; margin: TreeProps['margin']; direction: Direction; nodesToRender: VizNode[]; edgesToRender: VizEdge[]; nodesByUrn: Record; }; function transformToString(transform: { scaleX: number; scaleY: number; translateX: number; translateY: number; skewX: number; skewY: number; }): string { return `matrix(${transform.scaleX}, ${transform.skewX}, ${transform.skewY}, ${transform.scaleY}, ${transform.translateX}, ${transform.translateY})`; } export default function LineageTreeNodeAndEdgeRenderer({ data, zoom, margin, onEntityClick, onEntityCenter, onLineageExpand, selectedEntity, hoveredEntity, setHoveredEntity, onDrag, direction, nodesToRender, edgesToRender, nodesByUrn, }: Props) { const isLinkHighlighted = (link) => link.source.data.urn === hoveredEntity?.urn || link.target.data.urn === hoveredEntity?.urn; return ( {[ // we want to render non-highlighted links first since svg does not support the // concept of a z-index ...edgesToRender.filter((link) => !isLinkHighlighted(link)), ...edgesToRender.filter(isLinkHighlighted), ].map((link) => { const isHighlighted = isLinkHighlighted(link); return ( d.y} y={(d) => d.x} curve={curveBasis} data={link.curve} stroke={isHighlighted ? '#1890FF' : ANTD_GRAY[6]} strokeWidth="1" markerEnd={`url(#triangle-downstream${isHighlighted ? '-highlighted' : ''})`} markerStart={`url(#triangle-upstream${isHighlighted ? '-highlighted' : ''})`} data-testid={`edge-${link.source.data.urn}-${link.target.data.urn}-${direction}`} /> ); })} {nodesToRender.map((node) => { const isSelected = node.data.urn === selectedEntity?.urn; const isHovered = node.data.urn === hoveredEntity?.urn; return ( setHoveredEntity(select)} onEntityClick={onEntityClick} onEntityCenter={onEntityCenter} onExpandClick={onLineageExpand} direction={direction} isCenterNode={data.urn === node.data.urn} nodesToRenderByUrn={nodesByUrn} onDrag={onDrag} /> ); })} ); }