[7.x] [ML] Add feature importance summary charts (#78238)

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

@@ -21,3 +21,42 @@ export interface TopClass {
 }
 
 export type TopClasses = TopClass[];
+
+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 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/common/types/inference.ts

@@ -5,6 +5,7 @@
  */
 
 import { DataFrameAnalyticsConfig } from './data_frame_analytics';
+import { TotalFeatureImportance } from './feature_importance';
 
 export interface IngestStats {
   count: number;
@@ -54,6 +55,7 @@ export interface ModelConfigResponse {
     | {
         analytics_config: DataFrameAnalyticsConfig;
         input: any;
+        total_feature_importance?: TotalFeatureImportance[];
       }
     | Record<string, any>;
   model_id: string;

x-pack/plugins/ml/public/application/components/data_grid/feature_importance/decision_path_chart.tsx

@@ -74,6 +74,7 @@ interface DecisionPathChartProps {
   baseline?: number;
   minDomain: number | undefined;
   maxDomain: number | undefined;
+  showValues?: boolean;
 }
 
 const DECISION_PATH_MARGIN = 125;
@@ -87,6 +88,7 @@ export const DecisionPathChart = ({
   minDomain,
   maxDomain,
   baseline,
+  showValues,
 }: DecisionPathChartProps) => {
   // adjust the height so it's compact for items with more features
   const baselineData: LineAnnotationDatum[] = useMemo(
@@ -105,9 +107,12 @@ export const DecisionPathChart = ({
     ],
     [baseline]
   );
-  // guarantee up to num_precision significant digits
-  // without having it in scientific notation
-  const tickFormatter = useCallback((d) => Number(d.toPrecision(NUM_PRECISION)).toString(), []);
+  // if regression, guarantee up to num_precision significant digits without having it in scientific notation
+  // if classification, hide the numeric values since we only want to show the path
+  const tickFormatter = useCallback(
+    (d) => (showValues === false ? '' : Number(d.toPrecision(NUM_PRECISION)).toString()),
+    []
+  );
 
   return (
     <Chart
@@ -127,6 +132,7 @@ export const DecisionPathChart = ({
       <Axis
         id={'xpack.ml.dataframe.analytics.explorationResults.decisionPathXAxis'}
         tickFormat={tickFormatter}
+        ticks={showValues === false ? 0 : undefined}
         title={i18n.translate(
           'xpack.ml.dataframe.analytics.explorationResults.decisionPathXAxisTitle',
           {

x-pack/plugins/ml/public/application/components/data_grid/feature_importance/decision_path_classification.tsx

@@ -99,6 +99,7 @@ export const ClassificationDecisionPath: FC<ClassificationDecisionPathProps> = (
         predictionFieldName={predictionFieldName}
         minDomain={domain.minDomain}
         maxDomain={domain.maxDomain}
+        showValues={false}
       />
     </>
   );

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

@@ -19,9 +19,18 @@ import { DataFrameAnalyticsConfig } 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/feature_importance';
+import { getToastNotificationService } from '../../services/toast_notification_service';
+import {
+  isClassificationAnalysis,
+  isRegressionAnalysis,
+} from '../../../../common/util/analytics_utils';
 
 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 +42,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 +68,28 @@ export const useResultsViewConfig = (jobId: string) => {
           analyticsConfigs.data_frame_analytics.length > 0
         ) {
           const jobConfigUpdate = analyticsConfigs.data_frame_analytics[0];
+          // don't fetch the total feature importance if it's outlier_detection
+          if (
+            isClassificationAnalysis(jobConfigUpdate.analysis) ||
+            isRegressionAnalysis(jobConfigUpdate.analysis)
+          ) {
+            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 +139,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;
   defaultIsTraining?: boolean;
@@ -27,6 +27,7 @@ export const ClassificationExploration: FC<Props> = ({ jobId, defaultIsTraining
       }
     )}
     EvaluatePanel={EvaluatePanel}
+    FeatureImportanceSummaryPanel={FeatureImportanceSummaryPanel}
     defaultIsTraining={defaultIsTraining}
   />
 );

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,13 +28,15 @@ interface Props {
   jobId: string;
   title: string;
   EvaluatePanel: FC<EvaluatePanelProps>;
+  FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProps>;
   defaultIsTraining?: boolean;
 }
 
 export const ExplorationPageWrapper: FC<Props> = ({
   jobId,
   title,
   EvaluatePanel,
+  FeatureImportanceSummaryPanel,
   defaultIsTraining,
 }) => {
   const {
@@ -45,6 +48,7 @@ export const ExplorationPageWrapper: FC<Props> = ({
     jobConfigErrorMessage,
     jobStatus,
     needsDestIndexPattern,
+    totalFeatureImportance,
   } = useResultsViewConfig(jobId);
   const [searchQuery, setSearchQuery] = useState<ResultsSearchQuery>(defaultSearchQuery);
 
@@ -63,6 +67,14 @@ export const ExplorationPageWrapper: FC<Props> = ({
       {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, defaultIsTraining }) =
       values: { jobId },
     })}
     EvaluatePanel={EvaluatePanel}
+    FeatureImportanceSummaryPanel={FeatureImportanceSummaryPanel}
     defaultIsTraining={defaultIsTraining}
   />
 );