[ML] DF Analytics results view: ensure boolean values in charts shown without formatting (#78888)

* add functional test for searchBar filters. remove boolean schema from datagrid

* always use string version of key for charts

* add schema back in for histogram label

* use ?? instead of || for undefined check

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

@@ -51,7 +51,7 @@ export const ColumnChart: FC<Props> = ({ chartData, columnType, dataTestSubj })
               name="count"
               xScaleType={xScaleType}
               yScaleType="linear"
-              xAccessor="key"
+              xAccessor={'key_as_string'}
               yAccessors={['doc_count']}
               styleAccessor={(d) => d.datum.color}
               data={data}

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

@@ -67,7 +67,7 @@ export const getFieldType = (schema: EuiDataGridColumn['schema']): KBN_FIELD_TYP
 
 interface NumericDataItem {
   key: number;
-  key_as_string?: string;
+  key_as_string?: string | number;
   doc_count: number;
 }
 
@@ -231,11 +231,13 @@ export const useColumnChart = (
   if (isOrdinalChartData(chartData)) {
     data = chartData.data.map((d: OrdinalDataItem) => ({
       ...d,
+      key_as_string: d.key_as_string ?? d.key,
       color: getColor(d),
     }));
   } else if (isNumericChartData(chartData)) {
     data = chartData.data.map((d: NumericDataItem) => ({
       ...d,
+      key_as_string: d.key_as_string || d.key,
       color: getColor(d),
     }));
   }

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

@@ -163,7 +163,10 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
             />
           </EuiFlexItem>
           {filters && filters.options && (
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem
+              grow={false}
+              data-test-subj="mlDFAnalyticsExplorationQueryBarFilterButtons"
+            >
               <EuiButtonGroup
                 legend={i18n.translate(
                   'xpack.ml.dataframe.analytics.explorationQueryBar.buttonGroupLegend',
@@ -172,7 +175,6 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
                   }
                 )}
                 name="analyticsQueryBarFilterButtons"
-                data-test-subj="mlDFAnalyticsExplorationQueryBarFilterButtons"
                 options={filters.options}
                 type="multi"
                 idToSelectedMap={idToSelectedMap}

x-pack/test/functional/apps/ml/data_frame_analytics/classification_creation.ts

@@ -205,6 +205,7 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.dataFrameAnalyticsResults.assertClassificationEvaluatePanelElementsExists();
           await ml.dataFrameAnalyticsResults.assertClassificationTablePanelExists();
           await ml.dataFrameAnalyticsResults.assertResultsTableExists();
+          await ml.dataFrameAnalyticsResults.assertResultsTableTrainingFiltersExist();
           await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty();
         });
       });

x-pack/test/functional/apps/ml/data_frame_analytics/regression_creation.ts

@@ -205,6 +205,7 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.dataFrameAnalyticsResults.assertRegressionEvaluatePanelElementsExists();
           await ml.dataFrameAnalyticsResults.assertRegressionTablePanelExists();
           await ml.dataFrameAnalyticsResults.assertResultsTableExists();
+          await ml.dataFrameAnalyticsResults.assertResultsTableTrainingFiltersExist();
           await ml.dataFrameAnalyticsResults.assertResultsTableNotEmpty();
         });
       });

x-pack/test/functional/services/ml/data_frame_analytics_results.ts

@@ -43,6 +43,12 @@ export function MachineLearningDataFrameAnalyticsResultsProvider({
       await testSubjects.existOrFail('mlExplorationDataGrid loaded', { timeout: 5000 });
     },
 
+    async assertResultsTableTrainingFiltersExist() {
+      await testSubjects.existOrFail('mlDFAnalyticsExplorationQueryBarFilterButtons', {
+        timeout: 5000,
+      });
+    },
+
     async getResultTableRows() {
       return await testSubjects.findAll('mlExplorationDataGrid loaded > dataGridRow');
     },