import cytoscape from 'cytoscape' ; import { ANALYSIS_CONFIG_TYPE , JOB_MAP_NODE_TYPES , } from '../../../../../../common/constants/data_frame_analytics' ; import { EuiThemeType } from '../../../../components/color_range_legend' ; import classificationJobIcon from './icons/ml_classification_job.svg' ; import outlierDetectionJobIcon from './icons/ml_outlier_detection_job.svg' ; import regressionJobIcon from './icons/ml_regression_job.svg' ; const lineColor = '#C5CCD7' ; const MAP_SHAPES = { ELLIPSE : 'ellipse' , RECTANGLE : 'rectangle' , DIAMOND : 'diamond' , TRIANGLE : 'triangle' , } as const ; type MapShapes = typeof MAP_SHAPES [ keyof typeof MAP_SHAPES ] ; function shapeForNode ( el , theme ) { const type = el . data ( 'type' ) ; switch ( type ) { case JOB_MAP_NODE_TYPES . ANALYTICS : return MAP_SHAPES . ELLIPSE ; case JOB_MAP_NODE_TYPES . TRANSFORM : return MAP_SHAPES . RECTANGLE ; case JOB_MAP_NODE_TYPES . INDEX : return MAP_SHAPES . DIAMOND ; case JOB_MAP_NODE_TYPES . TRAINED_MODEL : return MAP_SHAPES . TRIANGLE ; default : return MAP_SHAPES . ELLIPSE ; } } function iconForNode ( el ) { const type = el . data ( 'analysisType' ) ; switch ( type ) { case ANALYSIS_CONFIG_TYPE . OUTLIER_DETECTION : return outlierDetectionJobIcon ; case ANALYSIS_CONFIG_TYPE . CLASSIFICATION : return classificationJobIcon ; case ANALYSIS_CONFIG_TYPE . REGRESSION : return regressionJobIcon ; default : return undefined ; } } function borderColorForNode ( el , theme ) { if ( el . selected ( ) ) { return theme . euiColorPrimary ; } const type = el . data ( 'type' ) ; switch ( type ) { case JOB_MAP_NODE_TYPES . ANALYTICS : return theme . euiColorSuccess ; case JOB_MAP_NODE_TYPES . TRANSFORM : return theme . euiColorVis1 ; case JOB_MAP_NODE_TYPES . INDEX : return theme . euiColorVis2 ; case JOB_MAP_NODE_TYPES . TRAINED_MODEL : return theme . euiColorVis3 ; default : return theme . euiColorMediumShade ; } } export const getCytoscapeOptions = ( theme ) : cytoscape . CytoscapeOptions => ( { autoungrabify : true , boxSelectionEnabled : false , maxZoom : 3 , minZoom : 0.2 , style : [ { selector : 'node' , style : { 'background-color' : ( el ) => el . data ( 'isRoot' ) ? theme . euiColorWarning : theme . euiColorGhost , 'background-height' : '60%' , 'background-width' : '60%' , 'border-color' : ( el ) => borderColorForNode ( el , theme ) , 'border-style' : 'solid' , 'background-image' : ( el ) => iconForNode ( el ) , 'border-width' : ( el ) => ( el . selected ( ) ? 4 : 3 ) , color : theme . euiTextColors . default , 'font-family' : 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif' , 'font-size' : theme . euiFontSizeXS , 'min-zoomed-font-size' : parseInt ( theme . euiSizeL , 10 ) , label : 'data(label)' , shape : ( el ) => shapeForNode ( el , theme ) , 'text-background-color' : theme . euiColorLightestShade , 'text-background-opacity' : 0 , 'text-background-padding' : theme . paddingSizes . xs , 'text-background-shape' : 'roundrectangle' , 'text-margin-y' : parseInt ( theme . paddingSizes . s , 10 ) , 'text-max-width' : '200px' , 'text-valign' : 'bottom' , 'text-wrap' : 'wrap' , } , } , { selector : 'edge' , style : { 'curve-style' : 'taxi' , 'taxi-direction' : 'rightward' , 'line-color' : lineColor , 'overlay-opacity' : 0 , 'target-arrow-color' : lineColor , 'target-arrow-shape' : 'triangle' , 'target-distance-from-node' : theme . paddingSizes . xs , width : 1 , 'source-arrow-shape' : 'none' , } , } , ] , } ) ;