import { useEffect , useMemo } from 'react' ; import { EuiDataGridColumn } from '@elastic/eui' ; import type { DataView } from '../../../../../../../../../../src/plugins/data_views/public' ; import { DataLoader } from '../../../../../datavisualizer/index_based/data_loader' ; import { useColorRange , COLOR_RANGE , COLOR_RANGE_SCALE , } from '../../../../../components/color_range_legend' ; import { getFieldType , getDataGridSchemasFromFieldTypes , showDataGridColumnChartErrorMessageToast , useRenderCellValue , UseIndexDataReturnType , } from '../../../../../components/data_grid' ; import { SavedSearchQuery } from '../../../../../contexts/ml' ; import { getToastNotifications } from '../../../../../util/dependency_cache' ; import { getIndexData , getIndexFields , DataFrameAnalyticsConfig } from '../../../../common' ; import { FEATURE_INFLUENCE } from '../../../../common/constants' ; import { DEFAULT_RESULTS_FIELD } from '../../../../../../../common/constants/data_frame_analytics' ; import { sortExplorationResultsFields , ML__ID_COPY , ML__INCREMENTAL_ID , } from '../../../../common/fields' ; import { getFeatureCount , getOutlierScoreFieldName } from './common' ; import { useExplorationDataGrid } from '../exploration_results_table/use_exploration_data_grid' ; export const useOutlierData = ( indexPattern , jobConfig , searchQuery ) : UseIndexDataReturnType => { const needsDestIndexFields = indexPattern !== undefined && indexPattern . title === jobConfig ?. source . index [ 0 ] ; const columns = useMemo ( ( ) => { const newColumns = [ ] ; if ( jobConfig !== undefined && indexPattern !== undefined ) { const resultsField = jobConfig . dest . results_field ; const { fieldTypes } = getIndexFields ( jobConfig , needsDestIndexFields ) ; newColumns . push ( ... getDataGridSchemasFromFieldTypes ( fieldTypes , resultsField ) . sort ( ( a , b ) => sortExplorationResultsFields ( a . id , b . id , jobConfig ) ) ) ; } return newColumns ; } , [ jobConfig , indexPattern ] ) ; const dataGrid = useExplorationDataGrid ( columns , 8 , ( d ) => ! d . includes ( `.${ FEATURE_INFLUENCE }.` ) && d !== ML__ID_COPY && d !== ML__INCREMENTAL_ID ) ; useEffect ( ( ) => { if ( jobConfig !== undefined ) { dataGrid . setSortingColumns ( [ { id : getOutlierScoreFieldName ( jobConfig ) , direction : 'desc' } ] ) ; } } , [ jobConfig && jobConfig . id ] ) ; useEffect ( ( ) => { const options = { didCancel : false } ; getIndexData ( jobConfig , dataGrid , searchQuery , options ) ; return ( ) => { options . didCancel = true ; } ; } , [ jobConfig && jobConfig . id , dataGrid . pagination , searchQuery , dataGrid . sortingColumns ] ) ; const dataLoader = useMemo ( ( ) => indexPattern !== undefined ? new DataLoader ( indexPattern , getToastNotifications ( ) ) : undefined , [ indexPattern ] ) ; const fetchColumnChartsData = async function ( ) { try { if ( jobConfig !== undefined && dataLoader !== undefined ) { const columnChartsData = await dataLoader . loadFieldHistograms ( columns . filter ( ( cT ) => dataGrid . visibleColumns . includes ( cT . id ) ) . map ( ( cT ) => ( { fieldName : cT . id , type : getFieldType ( cT . schema ) , } ) ) , searchQuery ) ; dataGrid . setColumnCharts ( columnChartsData ) ; } } catch ( e ) { showDataGridColumnChartErrorMessageToast ( e , getToastNotifications ( ) ) ; } } ; useEffect ( ( ) => { if ( dataGrid . chartsVisible ) { fetchColumnChartsData ( ) ; } } , [ dataGrid . chartsVisible , jobConfig ?. dest . index , JSON . stringify ( [ searchQuery , [ ... dataGrid . visibleColumns ] . sort ( ) ] ) , ] ) ; const colorRange = useColorRange ( COLOR_RANGE . BLUE , COLOR_RANGE_SCALE . INFLUENCER , jobConfig !== undefined ? getFeatureCount ( jobConfig . dest . results_field , dataGrid . tableItems ) : 1 ) ; const renderCellValue = useRenderCellValue ( indexPattern , dataGrid . pagination , dataGrid . tableItems , jobConfig ?. dest . results_field ?? DEFAULT_RESULTS_FIELD , ( columnId , cellValue , fullItem , setCellProps ) => { const resultsField = jobConfig ?. dest . results_field ?? '' ; let backgroundColor ; const featureNames = fullItem [ `${ resultsField }.${ FEATURE_INFLUENCE }` ] ; if ( Array . isArray ( featureNames ) ) { const featureForColumn = featureNames . find ( ( feature ) => columnId === feature . feature_name [ 0 ] ) ; if ( featureForColumn ) { backgroundColor = colorRange ( featureForColumn . influence [ 0 ] ) ; } } if ( backgroundColor !== undefined ) { setCellProps ( { style : { backgroundColor : String ( backgroundColor ) } , } ) ; } } ) ; return { ... dataGrid , renderCellValue , } ; } ;