import React , { FC , useContext , useEffect , useState } from 'react' ; import { EuiBasicTable , EuiText } from '@elastic/eui' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { JobCreatorContext } from '../../../job_creator_context' ; import { CategorizationJobCreator } from '../../../../../common/job_creator' ; import { Results } from '../../../../../common/results_loader' ; import { ml } from '../../../../../../../services/ml_api_service' ; import { NUMBER_OF_CATEGORY_EXAMPLES } from '../../../../../../../../../common/constants/categorization_job' ; export const TopCategories = ( ) => { const { jobCreator : jc , resultsLoader } = useContext ( JobCreatorContext ) ; const jobCreator = jc as CategorizationJobCreator ; const [ tableRow , setTableRow ] = useState < Array < { count ? : number ; example : string ; } > > ( [ ] ) ; const [ totalCategories , setTotalCategories ] = useState ( 0 ) ; function setResultsWrapper ( results ) { loadTopCats ( ) ; } async function loadTopCats ( ) { const results = await ml . jobs . topCategories ( jobCreator . jobId , NUMBER_OF_CATEGORY_EXAMPLES ) ; setTableRow ( results . categories . map ( ( c ) => ( { count : c . count , example : c . category . examples ?. length ? c . category . examples [ 0 ] : '' , } ) ) ) ; setTotalCategories ( results . total ) ; } useEffect ( ( ) => { const resultsSubscription = resultsLoader . subscribeToResults ( setResultsWrapper ) ; return ( ) => { resultsSubscription . unsubscribe ( ) ; } ; } , [ ] ) ; const columns = [ ... ( jobCreator . modelPlot ? [ { field : 'count' , name : 'count' , width : '100px' , render : ( count ) => ( < EuiText size = "s" > < code > { count } < /code> < /EuiText>), } , ] : [ ] ) , { field : 'example' , name : 'Example' , render : ( example ) => ( < EuiText size = "s" > < code > { example } < /code> < /EuiText>), } , ] ; return ( < > { totalCategories > 0 && ( < > < div > < FormattedMessage id = "xpack.ml.newJob.wizard.pickFieldsStep.categorizationTotalCategories" defaultMessage = "Total categories: {totalCategories}" values = { { totalCategories } } /> < /div> < EuiBasicTable columns = { columns } items = { tableRow } / > < />)} < />); } ;