import React , { FC , useState , useContext , useEffect } from 'react' ; import { i18n } from '@kbn/i18n' ; import { EuiSpacer , EuiSwitch } from '@elastic/eui' ; import { JobCreatorContext } from '../../../../../job_creator_context' ; import { Description } from './description' ; import { MMLCallout } from '../mml_callout' ; import { ML_JOB_AGGREGATION } from '../../../../../../../../../../../common/constants/aggregation_types' ; import { isCategorizationJobCreator } from '../../../../../../../common/job_creator' ; export const ModelPlotSwitch = ( ) => { const { jobCreator , jobCreatorUpdate , jobCreatorUpdated } = useContext ( JobCreatorContext ) ; const [ modelPlotEnabled , setModelPlotEnabled ] = useState ( jobCreator . modelPlot ) ; const [ enabled , setEnabled ] = useState ( false ) ; useEffect ( ( ) => { jobCreator . modelPlot = modelPlotEnabled ; jobCreatorUpdate ( ) ; } , [ modelPlotEnabled ] ) ; useEffect ( ( ) => { const aggs = [ ML_JOB_AGGREGATION . RARE ] ; const isRareCategoryJob = isCategorizationJobCreator ( jobCreator ) && jobCreator . aggregations . some ( ( agg ) => aggs . includes ( agg . id ) ) ; setEnabled ( isRareCategoryJob === false ) ; } , [ jobCreatorUpdated ] ) ; function toggleModelPlot ( ) { setModelPlotEnabled ( ! modelPlotEnabled ) ; } return ( < > < Description > < EuiSwitch name = "switch" disabled = { enabled === false } checked = { modelPlotEnabled } onChange = { toggleModelPlot } data - test - subj = "mlJobWizardSwitchModelPlot" label = { i18n . translate ( 'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.enableModelPlot.title' , { defaultMessage : 'Enable model plot' , } ) } / > < /Description> < MMLCallout / > < EuiSpacer /> < />); } ;