[ML] Add feature importance summary charts

x-pack/plugins/ml/common/types/inference.ts

@@ -43,6 +43,33 @@ export interface TrainedModelStat {
   };
 }
 
+export interface ClassFeatureImportanceSummary {
+  class_name: string;
+  importance: {
+    max: number;
+    min: number;
+    mean_magnitude: number;
+  };
+}
+export interface ClassificationTotalFeatureImportance {
+  feature_name: string;
+  classes: ClassFeatureImportanceSummary[];
+}
+
+export interface RegressionFeatureImportanceSummary {
+  max: number;
+  min: number;
+  mean_magnitude: number;
+}
+
+export interface RegressionTotalFeatureImportance {
+  feature_name: string;
+  importance: RegressionFeatureImportanceSummary;
+}
+export type TotalFeatureImportance =
+  | ClassificationTotalFeatureImportance
+  | RegressionTotalFeatureImportance;
+
 export interface ModelConfigResponse {
   created_by: string;
   create_time: string;
@@ -54,6 +81,7 @@ export interface ModelConfigResponse {
     | {
         analytics_config: DataFrameAnalyticsConfig;
         input: any;
+        total_feature_importance?: TotalFeatureImportance[];
       }
     | Record<string, any>;
   model_id: string;
@@ -79,3 +107,15 @@ export interface ModelPipelines {
 export interface InferenceConfigResponse {
   trained_model_configs: ModelConfigResponse[];
 }
+
+export function isClassificationTotalFeatureImportance(
+  summary: ClassificationTotalFeatureImportance | RegressionTotalFeatureImportance
+): summary is ClassificationTotalFeatureImportance {
+  return (summary as ClassificationTotalFeatureImportance).classes !== undefined;
+}
+
+export function isRegressionTotalFeatureImportance(
+  summary: ClassificationTotalFeatureImportance | RegressionTotalFeatureImportance
+): summary is RegressionTotalFeatureImportance {
+  return (summary as RegressionTotalFeatureImportance).importance !== undefined;
+}

x-pack/plugins/ml/public/application/data_frame_analytics/common/use_results_view_config.ts

@@ -15,13 +15,18 @@ import { ml } from '../../services/ml_api_service';
 import { newJobCapsService } from '../../services/new_job_capabilities_service';
 import { useMlContext } from '../../contexts/ml';
 
-import { DataFrameAnalyticsConfig } from '../common';
+import { ANALYSIS_CONFIG_TYPE, DataFrameAnalyticsConfig, getAnalysisType } from '../common';
 
 import { isGetDataFrameAnalyticsStatsResponseOk } from '../pages/analytics_management/services/analytics_service/get_analytics';
 import { DATA_FRAME_TASK_STATE } from '../pages/analytics_management/components/analytics_list/common';
+import { useInferenceApiService } from '../../services/ml_api_service/inference';
+import { TotalFeatureImportance } from '../../../../common/types/inference';
+import { getToastNotificationService } from '../../services/toast_notification_service';
 
 export const useResultsViewConfig = (jobId: string) => {
   const mlContext = useMlContext();
+  const inferenceApiService = useInferenceApiService();
+
   const [indexPattern, setIndexPattern] = useState<IndexPattern | undefined>(undefined);
   const [isInitialized, setIsInitialized] = useState<boolean>(false);
   const [needsDestIndexPattern, setNeedsDestIndexPattern] = useState<boolean>(false);
@@ -33,13 +38,18 @@ export const useResultsViewConfig = (jobId: string) => {
   const [jobConfigErrorMessage, setJobConfigErrorMessage] = useState<undefined | string>(undefined);
   const [jobStatus, setJobStatus] = useState<DATA_FRAME_TASK_STATE | undefined>(undefined);
 
+  const [totalFeatureImportance, setTotalFeatureImportance] = useState<
+    TotalFeatureImportance[] | undefined
+  >(undefined);
+
   // get analytics configuration, index pattern and field caps
   useEffect(() => {
     (async function () {
       setIsLoadingJobConfig(false);
 
       try {
         const analyticsConfigs = await ml.dataFrameAnalytics.getDataFrameAnalytics(jobId);
+
         const analyticsStats = await ml.dataFrameAnalytics.getDataFrameAnalyticsStats(jobId);
         const stats = isGetDataFrameAnalyticsStatsResponseOk(analyticsStats)
           ? analyticsStats.data_frame_analytics[0]
@@ -54,6 +64,29 @@ export const useResultsViewConfig = (jobId: string) => {
           analyticsConfigs.data_frame_analytics.length > 0
         ) {
           const jobConfigUpdate = analyticsConfigs.data_frame_analytics[0];
+          const analysisType = getAnalysisType(jobConfigUpdate.analysis);
+          // don't fetch the total feature importance if it's outlier_detection
+          if (
+            analysisType === ANALYSIS_CONFIG_TYPE.CLASSIFICATION ||
+            analysisType === ANALYSIS_CONFIG_TYPE.REGRESSION
+          ) {
+            try {
+              const inferenceModels = await inferenceApiService.getInferenceModel(`${jobId}*`, {
+                include: 'total_feature_importance',
+              });
+              const inferenceModel = inferenceModels.find(
+                (model) => model.metadata?.analytics_config?.id === jobId
+              );
+              if (
+                Array.isArray(inferenceModel?.metadata?.total_feature_importance) === true &&
+                inferenceModel?.metadata?.total_feature_importance.length > 0
+              ) {
+                setTotalFeatureImportance(inferenceModel?.metadata?.total_feature_importance);
+              }
+            } catch (e) {
+              getToastNotificationService().displayErrorToast(e);
+            }
+          }
 
           try {
             const destIndex = Array.isArray(jobConfigUpdate.dest.index)
@@ -103,5 +136,6 @@ export const useResultsViewConfig = (jobId: string) => {
     jobConfigErrorMessage,
     jobStatus,
     needsDestIndexPattern,
+    totalFeatureImportance,
   };
 };

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/classification_exploration.tsx

@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 
 import { ExplorationPageWrapper } from '../exploration_page_wrapper';
 import { EvaluatePanel } from './evaluate_panel';
-
+import { FeatureImportanceSummaryPanel } from '../total_feature_importance_summary/feature_importance_summary';
 interface Props {
   jobId: string;
 }
@@ -27,6 +27,7 @@ export const ClassificationExploration: FC<Props> = ({ jobId }) => {
         }
       )}
       EvaluatePanel={EvaluatePanel}
+      FeatureImportanceSummaryPanel={FeatureImportanceSummaryPanel}
     />
   );
 };

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_page_wrapper/exploration_page_wrapper.tsx

@@ -16,6 +16,7 @@ import { DATA_FRAME_TASK_STATE } from '../../../analytics_management/components/
 import { ExplorationResultsTable } from '../exploration_results_table';
 import { JobConfigErrorCallout } from '../job_config_error_callout';
 import { LoadingPanel } from '../loading_panel';
+import { FeatureImportanceSummaryPanelProps } from '../total_feature_importance_summary/feature_importance_summary';
 
 export interface EvaluatePanelProps {
   jobConfig: DataFrameAnalyticsConfig;
@@ -27,9 +28,15 @@ interface Props {
   jobId: string;
   title: string;
   EvaluatePanel: FC<EvaluatePanelProps>;
+  FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProps>;
 }
 
-export const ExplorationPageWrapper: FC<Props> = ({ jobId, title, EvaluatePanel }) => {
+export const ExplorationPageWrapper: FC<Props> = ({
+  jobId,
+  title,
+  EvaluatePanel,
+  FeatureImportanceSummaryPanel,
+}) => {
   const {
     indexPattern,
     isInitialized,
@@ -39,6 +46,7 @@ export const ExplorationPageWrapper: FC<Props> = ({ jobId, title, EvaluatePanel
     jobConfigErrorMessage,
     jobStatus,
     needsDestIndexPattern,
+    totalFeatureImportance,
   } = useResultsViewConfig(jobId);
   const [searchQuery, setSearchQuery] = useState<ResultsSearchQuery>(defaultSearchQuery);
 
@@ -57,6 +65,14 @@ export const ExplorationPageWrapper: FC<Props> = ({ jobId, title, EvaluatePanel
       {isLoadingJobConfig === false && jobConfig !== undefined && isInitialized === true && (
         <EvaluatePanel jobConfig={jobConfig} jobStatus={jobStatus} searchQuery={searchQuery} />
       )}
+      {isLoadingJobConfig === true && totalFeatureImportance === undefined && <LoadingPanel />}
+      {isLoadingJobConfig === false && totalFeatureImportance !== undefined && (
+        <>
+          <EuiSpacer />
+          <FeatureImportanceSummaryPanel totalFeatureImportance={totalFeatureImportance} />
+        </>
+      )}
+
       <EuiSpacer />
       {isLoadingJobConfig === true && jobConfig === undefined && <LoadingPanel />}
       {isLoadingJobConfig === false &&

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/regression_exploration/regression_exploration.tsx

@@ -11,6 +11,7 @@ import { i18n } from '@kbn/i18n';
 import { ExplorationPageWrapper } from '../exploration_page_wrapper';
 
 import { EvaluatePanel } from './evaluate_panel';
+import { FeatureImportanceSummaryPanel } from '../total_feature_importance_summary/feature_importance_summary';
 
 interface Props {
   jobId: string;
@@ -25,6 +26,7 @@ export const RegressionExploration: FC<Props> = ({ jobId }) => {
         values: { jobId },
       })}
       EvaluatePanel={EvaluatePanel}
+      FeatureImportanceSummaryPanel={FeatureImportanceSummaryPanel}
     />
   );
 };