[ML] Add decision path charts to exploration results table

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

@@ -79,3 +79,9 @@ export interface DataFrameAnalyticsConfig {
   version: string;
   allow_lazy_start?: boolean;
 }
+
+export enum ANALYSIS_CONFIG_TYPE {
+  OUTLIER_DETECTION = 'outlier_detection',
+  REGRESSION = 'regression',
+  CLASSIFICATION = 'classification',
+}

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

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface ClassFeatureImportance {
+  class_name: string;
+  importance: number;
+}
+export interface FeatureImportance {
+  feature_name: string;
+  importance?: number;
+  classes?: ClassFeatureImportance[];
+}
+
+export interface TopClass {
+  class_name: string;
+  class_probability: number;
+  class_score: number;
+}
+
+export type TopClasses = TopClass[];

x-pack/plugins/ml/common/util/analytics_utils.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  AnalysisConfig,
+  ClassificationAnalysis,
+  OutlierAnalysis,
+  RegressionAnalysis,
+  ANALYSIS_CONFIG_TYPE,
+} from '../types/data_frame_analytics';
+
+export const isOutlierAnalysis = (arg: any): arg is OutlierAnalysis => {
+  const keys = Object.keys(arg);
+  return keys.length === 1 && keys[0] === ANALYSIS_CONFIG_TYPE.OUTLIER_DETECTION;
+};
+
+export const isRegressionAnalysis = (arg: any): arg is RegressionAnalysis => {
+  const keys = Object.keys(arg);
+  return keys.length === 1 && keys[0] === ANALYSIS_CONFIG_TYPE.REGRESSION;
+};
+
+export const isClassificationAnalysis = (arg: any): arg is ClassificationAnalysis => {
+  const keys = Object.keys(arg);
+  return keys.length === 1 && keys[0] === ANALYSIS_CONFIG_TYPE.CLASSIFICATION;
+};
+
+export const getPredictionFieldName = (
+  analysis: AnalysisConfig
+):
+  | RegressionAnalysis['regression']['prediction_field_name']
+  | ClassificationAnalysis['classification']['prediction_field_name'] => {
+  // If undefined will be defaulted to dependent_variable when config is created
+  let predictionFieldName;
+  if (isRegressionAnalysis(analysis) && analysis.regression.prediction_field_name !== undefined) {
+    predictionFieldName = analysis.regression.prediction_field_name;
+  } else if (
+    isClassificationAnalysis(analysis) &&
+    analysis.classification.prediction_field_name !== undefined
+  ) {
+    predictionFieldName = analysis.classification.prediction_field_name;
+  }
+  return predictionFieldName;
+};

x-pack/plugins/ml/public/application/components/data_grid/common.ts

@@ -119,13 +119,14 @@ export const getDataGridSchemasFromFieldTypes = (fieldTypes: FieldTypes, results
       schema = 'numeric';
     }
 
-    if (
-      field.includes(`${resultsField}.${FEATURE_IMPORTANCE}`) ||
-      field.includes(`${resultsField}.${TOP_CLASSES}`)
-    ) {
+    if (field.includes(`${resultsField}.${TOP_CLASSES}`)) {
       schema = 'json';
     }
 
+    if (field.includes(`${resultsField}.${FEATURE_IMPORTANCE}`)) {
+      schema = 'featureImportance';
+    }
+
     return { id: field, schema, isSortable };
   });
 };
@@ -250,10 +251,6 @@ export const useRenderCellValue = (
         return cellValue ? 'true' : 'false';
       }
 
-      if (typeof cellValue === 'object' && cellValue !== null) {
-        return JSON.stringify(cellValue);
-      }
-
       return cellValue;
     };
   }, [indexPattern?.fields, pagination.pageIndex, pagination.pageSize, tableItems]);

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

@@ -5,8 +5,7 @@
  */
 
 import { isEqual } from 'lodash';
-import React, { memo, useEffect, FC } from 'react';
-
+import React, { memo, useEffect, FC, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 
 import {
@@ -24,13 +23,15 @@ import {
 } from '@elastic/eui';
 
 import { CoreSetup } from 'src/core/public';
-
 import { DEFAULT_SAMPLER_SHARD_SIZE } from '../../../../common/constants/field_histograms';
 
-import { INDEX_STATUS } from '../../data_frame_analytics/common';
+import { ANALYSIS_CONFIG_TYPE, INDEX_STATUS } from '../../data_frame_analytics/common';
 
 import { euiDataGridStyle, euiDataGridToolbarSettings } from './common';
 import { UseIndexDataReturnType } from './types';
+import { DecisionPathPopover } from './feature_importance/decision_path_popover';
+import { TopClasses } from '../../../../common/types/feature_importance';
+
 // TODO Fix row hovering + bar highlighting
 // import { hoveredRow$ } from './column_chart';
 
@@ -41,6 +42,8 @@ export const DataGridTitle: FC<{ title: string }> = ({ title }) => (
 );
 
 interface PropsWithoutHeader extends UseIndexDataReturnType {
+  baseline?: number;
+  analysisType?: ANALYSIS_CONFIG_TYPE;
   dataTestSubj: string;
   toastNotifications: CoreSetup['notifications']['toasts'];
 }
@@ -60,6 +63,7 @@ type Props = PropsWithHeader | PropsWithoutHeader;
 export const DataGrid: FC<Props> = memo(
   (props) => {
     const {
+      baseline,
       chartsVisible,
       chartsButtonVisible,
       columnsWithCharts,
@@ -80,8 +84,9 @@ export const DataGrid: FC<Props> = memo(
       toastNotifications,
       toggleChartVisibility,
       visibleColumns,
+      predictionFieldName,
+      analysisType,
     } = props;
-
     // TODO Fix row hovering + bar highlighting
     // const getRowProps = (item: any) => {
     //   return {
@@ -90,6 +95,42 @@ export const DataGrid: FC<Props> = memo(
     //   };
     // };
 
+    const popOverContent = useMemo(() => {
+      return analysisType === ANALYSIS_CONFIG_TYPE.REGRESSION ||
+        analysisType === ANALYSIS_CONFIG_TYPE.CLASSIFICATION
+        ? {
+            featureImportance: ({ children }: { cellContentsElement: any; children: any }) => {
+              const rowIndex = children?.props?.rowIndex;
+              const row = data[rowIndex];
+              const parsedFIArray = row.ml.feature_importance;
+              let predictedValue: string | number | undefined;
+              let topClasses: TopClasses = [];
+              if (
+                predictionFieldName !== undefined &&
+                row &&
+                row.ml[predictionFieldName] !== undefined
+              ) {
+                predictedValue = row.ml[predictionFieldName];
+                topClasses = row.ml.top_classes;
+              }
+
+              return (
+                <DecisionPathPopover
+                  analysisType={analysisType}
+                  predictedValue={predictedValue}
+                  baseline={baseline}
+                  featureImportance={parsedFIArray}
+                  topClasses={topClasses}
+                  predictionFieldName={
+                    predictionFieldName ? predictionFieldName.replace('_prediction', '') : undefined
+                  }
+                />
+              );
+            },
+          }
+        : undefined;
+    }, [baseline, data]);
+
     useEffect(() => {
       if (invalidSortingColumnns.length > 0) {
         invalidSortingColumnns.forEach((columnId) => {
@@ -225,6 +266,7 @@ export const DataGrid: FC<Props> = memo(
                   }
                 : {}),
             }}
+            popoverContents={popOverContent}
             pagination={{
               ...pagination,
               pageSizeOptions: [5, 10, 25],

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

@@ -0,0 +1,137 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// adjust the height so it's compact for items with more features
+import {
+  AnnotationDomainTypes,
+  Axis,
+  AxisConfig,
+  Chart,
+  LineAnnotation,
+  LineAnnotationDatum,
+  LineSeries,
+  PartialTheme,
+  Position,
+  RecursivePartial,
+  ScaleType,
+  Settings,
+} from '@elastic/charts';
+import { EuiIcon } from '@elastic/eui';
+
+import React, { useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { DecisionPathPlotData } from './use_classification_path_data';
+
+const baselineStyle = {
+  line: {
+    strokeWidth: 1,
+    stroke: 'gray',
+    opacity: 1,
+  },
+  details: {
+    fontSize: 12,
+    fontFamily: 'Arial',
+    fontStyle: 'bold',
+    fill: 'gray',
+    padding: 0,
+  },
+};
+
+const axes: RecursivePartial<AxisConfig> = {
+  tickLabelStyle: {
+    fontSize: 12,
+  },
+};
+const theme: PartialTheme = {
+  axes,
+};
+
+interface DecisionPathChartProps {
+  decisionPathData: DecisionPathPlotData;
+  predictionFieldName?: string;
+  baseline?: number;
+  minDomain: number | undefined;
+  maxDomain: number | undefined;
+}
+
+export const DecisionPathChart = ({
+  decisionPathData,
+  predictionFieldName,
+  minDomain,
+  maxDomain,
+  baseline,
+}: DecisionPathChartProps) => {
+  const heightMultiplier = Array.isArray(decisionPathData) && decisionPathData.length > 4 ? 30 : 75;
+  const baselineData: LineAnnotationDatum[] = useMemo(
+    () => [
+      {
+        dataValue: baseline ? parseFloat(baseline.toPrecision(3)) : undefined,
+        details: i18n.translate(
+          'xpack.ml.dataframe.analytics.explorationResults.decisionPathBaselineText',
+          {
+            defaultMessage:
+              'baseline (average of predictions for all data points in the training data set)',
+          }
+        ),
+      },
+    ],
+    [baseline]
+  );
+  const tickFormatter = useCallback((d) => `${Number(d).toPrecision(3)}`, []);
+
+  return (
+    <Chart size={{ height: decisionPathData.length * heightMultiplier }}>
+      <Settings theme={theme} rotation={90} />
+      {baseline && (
+        <LineAnnotation
+          id="xpack.ml.dataframe.analytics.explorationResults.decisionPathBaseline"
+          domainType={AnnotationDomainTypes.YDomain}
+          dataValues={baselineData}
+          style={baselineStyle}
+          marker={<EuiIcon type={'annotation'} />}
+        />
+      )}
+
+      <Axis
+        id={'xpack.ml.dataframe.analytics.explorationResults.decisionPathXAxis'}
+        tickFormat={tickFormatter}
+        title={i18n.translate(
+          'xpack.ml.dataframe.analytics.explorationResults.decisionPathXAxisTitle',
+          {
+            defaultMessage: "Prediction for '{predictionFieldName}'",
+            values: { predictionFieldName },
+          }
+        )}
+        showGridLines={true}
+        position={Position.Bottom}
+        showOverlappingTicks
+        domain={
+          minDomain && maxDomain
+            ? {
+                min: minDomain,
+                max: maxDomain,
+              }
+            : undefined
+        }
+      />
+      <Axis showGridLines={true} id="left" position={Position.Left} />
+      <LineSeries
+        id={'xpack.ml.dataframe.analytics.explorationResults.decisionPathLine'}
+        name={i18n.translate(
+          'xpack.ml.dataframe.analytics.explorationResults.decisionPathLineTitle',
+          {
+            defaultMessage: 'Prediction',
+          }
+        )}
+        xScaleType={ScaleType.Ordinal}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[2]}
+        data={decisionPathData}
+      />
+    </Chart>
+  );
+};