[ML] Fix Index Data Visualizer error if index pattern has histogram field type (#104553) (#104919)

* [ML] Add NON_AGGREGATABLE_FIELD_TYPES, add icon type

* Fix types

* Add histogram icon, fix types showing for hidden fields

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Quynh Nguyen <43350163+qn895@users.noreply.github.com>

Author: kibanamachine

x-pack/plugins/data_visualizer/common/constants.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import { KBN_FIELD_TYPES } from '../../../../src/plugins/data/common';
+
 export const UI_SETTING_MAX_FILE_SIZE = 'fileUpload:maxFileSize';
 
 export const MB = Math.pow(2, 20);
@@ -27,7 +29,26 @@ export const JOB_FIELD_TYPES = {
   KEYWORD: 'keyword',
   NUMBER: 'number',
   TEXT: 'text',
+  HISTOGRAM: 'histogram',
   UNKNOWN: 'unknown',
 } as const;
 
+export const JOB_FIELD_TYPES_OPTIONS = {
+  [JOB_FIELD_TYPES.BOOLEAN]: { name: 'Boolean', icon: 'tokenBoolean' },
+  [JOB_FIELD_TYPES.DATE]: { name: 'Date', icon: 'tokenDate' },
+  [JOB_FIELD_TYPES.GEO_POINT]: { name: 'Geo point', icon: 'tokenGeo' },
+  [JOB_FIELD_TYPES.GEO_SHAPE]: { name: 'Geo shape', icon: 'tokenGeo' },
+  [JOB_FIELD_TYPES.IP]: { name: 'IP address', icon: 'tokenIP' },
+  [JOB_FIELD_TYPES.KEYWORD]: { name: 'Keyword', icon: 'tokenKeyword' },
+  [JOB_FIELD_TYPES.NUMBER]: { name: 'Number', icon: 'tokenNumber' },
+  [JOB_FIELD_TYPES.TEXT]: { name: 'Text', icon: 'tokenString' },
+  [JOB_FIELD_TYPES.HISTOGRAM]: { name: 'Histogram', icon: 'tokenNumber' },
+  [JOB_FIELD_TYPES.UNKNOWN]: { name: 'Unknown' },
+};
+
 export const OMIT_FIELDS: string[] = ['_source', '_type', '_index', '_id', '_version', '_score'];
+
+export const NON_AGGREGATABLE_FIELD_TYPES = new Set<string>([
+  KBN_FIELD_TYPES.GEO_SHAPE,
+  KBN_FIELD_TYPES.HISTOGRAM,
+]);

x-pack/plugins/data_visualizer/public/application/common/components/field_type_icon/field_type_icon.tsx

@@ -72,6 +72,9 @@ export const FieldTypeIcon: FC<FieldTypeIconProps> = ({
       iconType = 'tokenNumber';
       color = fieldName !== undefined ? 'euiColorVis1' : 'euiColorVis2';
       break;
+    case JOB_FIELD_TYPES.HISTOGRAM:
+      iconType = 'tokenHistogram';
+      color = 'euiColorVis7';
     case JOB_FIELD_TYPES.UNKNOWN:
       // Use defaults
       break;

x-pack/plugins/data_visualizer/public/application/common/components/field_types_filter/field_types_filter.tsx

@@ -14,19 +14,7 @@ import type {
   FileBasedUnknownFieldVisConfig,
 } from '../stats_table/types/field_vis_config';
 import { FieldTypeIcon } from '../field_type_icon';
-import { JOB_FIELD_TYPES } from '../../../../../common';
-
-const JOB_FIELD_TYPES_OPTIONS = {
-  [JOB_FIELD_TYPES.BOOLEAN]: { name: 'Boolean', icon: 'tokenBoolean' },
-  [JOB_FIELD_TYPES.DATE]: { name: 'Date', icon: 'tokenDate' },
-  [JOB_FIELD_TYPES.GEO_POINT]: { name: 'Geo point', icon: 'tokenGeo' },
-  [JOB_FIELD_TYPES.GEO_SHAPE]: { name: 'Geo shape', icon: 'tokenGeo' },
-  [JOB_FIELD_TYPES.IP]: { name: 'IP address', icon: 'tokenIP' },
-  [JOB_FIELD_TYPES.KEYWORD]: { name: 'Keyword', icon: 'tokenKeyword' },
-  [JOB_FIELD_TYPES.NUMBER]: { name: 'Number', icon: 'tokenNumber' },
-  [JOB_FIELD_TYPES.TEXT]: { name: 'Text', icon: 'tokenString' },
-  [JOB_FIELD_TYPES.UNKNOWN]: { name: 'Unknown' },
-};
+import { JOB_FIELD_TYPES_OPTIONS } from '../../../../../common';
 
 interface Props {
   fields: Array<FileBasedFieldVisConfig | FileBasedUnknownFieldVisConfig>;

x-pack/plugins/data_visualizer/public/application/common/util/field_types_utils.ts

@@ -78,6 +78,9 @@ export function kbnTypeToJobType(field: IndexPatternField) {
     case KBN_FIELD_TYPES.GEO_SHAPE:
       type = JOB_FIELD_TYPES.GEO_SHAPE;
       break;
+    case KBN_FIELD_TYPES.HISTOGRAM:
+      type = JOB_FIELD_TYPES.HISTOGRAM;
+      break;
 
     default:
       break;

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx

@@ -56,7 +56,7 @@ import { useDataVisualizerKibana } from '../../../kibana_context';
 import { FieldCountPanel } from '../../../common/components/field_count_panel';
 import { DocumentCountContent } from '../../../common/components/document_count_content';
 import { DataLoader } from '../../data_loader/data_loader';
-import { JOB_FIELD_TYPES } from '../../../../../common';
+import { JOB_FIELD_TYPES, OMIT_FIELDS } from '../../../../../common';
 import { useTimefilter } from '../../hooks/use_time_filter';
 import { kbnTypeToJobType } from '../../../common/util/field_types_utils';
 import { SearchPanel } from '../search_panel';
@@ -204,18 +204,21 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
     }
   }, [currentIndexPattern, toasts]);
 
-  // Obtain the list of non metric field types which appear in the index pattern.
-  let indexedFieldTypes: JobFieldType[] = [];
   const indexPatternFields: IndexPatternField[] = currentIndexPattern.fields;
-  indexPatternFields.forEach((field) => {
-    if (field.scripted !== true) {
-      const dataVisualizerType: JobFieldType | undefined = kbnTypeToJobType(field);
-      if (dataVisualizerType !== undefined && !indexedFieldTypes.includes(dataVisualizerType)) {
-        indexedFieldTypes.push(dataVisualizerType);
+
+  const fieldTypes = useMemo(() => {
+    // Obtain the list of non metric field types which appear in the index pattern.
+    const indexedFieldTypes: JobFieldType[] = [];
+    indexPatternFields.forEach((field) => {
+      if (!OMIT_FIELDS.includes(field.name) && field.scripted !== true) {
+        const dataVisualizerType: JobFieldType | undefined = kbnTypeToJobType(field);
+        if (dataVisualizerType !== undefined && !indexedFieldTypes.includes(dataVisualizerType)) {
+          indexedFieldTypes.push(dataVisualizerType);
+        }
       }
-    }
-  });
-  indexedFieldTypes = indexedFieldTypes.sort();
+    });
+    return indexedFieldTypes.sort();
+  }, [indexPatternFields]);
 
   const defaults = getDefaultPageState();
 
@@ -859,7 +862,7 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
                     samplerShardSize={samplerShardSize}
                     setSamplerShardSize={setSamplerShardSize}
                     overallStats={overallStats}
-                    indexedFieldTypes={indexedFieldTypes}
+                    indexedFieldTypes={fieldTypes}
                     setVisibleFieldTypes={setVisibleFieldTypes}
                     visibleFieldTypes={visibleFieldTypes}
                     visibleFieldNames={visibleFieldNames}

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/search_panel/field_type_filter.tsx

@@ -8,30 +8,18 @@
 import React, { FC, useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { JOB_FIELD_TYPES, JobFieldType } from '../../../../../common';
+import { JOB_FIELD_TYPES_OPTIONS, JobFieldType } from '../../../../../common';
 import { FieldTypeIcon } from '../../../common/components/field_type_icon';
 import { MultiSelectPicker, Option } from '../../../common/components/multi_select_picker';
 
-const ML_JOB_FIELD_TYPES_OPTIONS = {
-  [JOB_FIELD_TYPES.BOOLEAN]: { name: 'Boolean', icon: 'tokenBoolean' },
-  [JOB_FIELD_TYPES.DATE]: { name: 'Date', icon: 'tokenDate' },
-  [JOB_FIELD_TYPES.GEO_POINT]: { name: 'Geo point', icon: 'tokenGeo' },
-  [JOB_FIELD_TYPES.GEO_SHAPE]: { name: 'Geo shape', icon: 'tokenGeo' },
-  [JOB_FIELD_TYPES.IP]: { name: 'IP address', icon: 'tokenIP' },
-  [JOB_FIELD_TYPES.KEYWORD]: { name: 'Keyword', icon: 'tokenKeyword' },
-  [JOB_FIELD_TYPES.NUMBER]: { name: 'Number', icon: 'tokenNumber' },
-  [JOB_FIELD_TYPES.TEXT]: { name: 'Text', icon: 'tokenString' },
-  [JOB_FIELD_TYPES.UNKNOWN]: { name: 'Unknown' },
-};
-
 export const DatavisualizerFieldTypeFilter: FC<{
   indexedFieldTypes: JobFieldType[];
   setVisibleFieldTypes(q: string[]): void;
   visibleFieldTypes: string[];
 }> = ({ indexedFieldTypes, setVisibleFieldTypes, visibleFieldTypes }) => {
   const options: Option[] = useMemo(() => {
     return indexedFieldTypes.map((indexedFieldName) => {
-      const item = ML_JOB_FIELD_TYPES_OPTIONS[indexedFieldName];
+      const item = JOB_FIELD_TYPES_OPTIONS[indexedFieldName];
 
       return {
         value: indexedFieldName,

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/data_loader/data_loader.ts

@@ -10,8 +10,7 @@ import { CoreSetup } from 'kibana/public';
 import { estypes } from '@elastic/elasticsearch';
 import { i18n } from '@kbn/i18n';
 import { IndexPattern } from '../../../../../../../src/plugins/data/common/index_patterns/index_patterns';
-import { KBN_FIELD_TYPES } from '../../../../../../../src/plugins/data/common';
-import { OMIT_FIELDS } from '../../../../common/constants';
+import { NON_AGGREGATABLE_FIELD_TYPES, OMIT_FIELDS } from '../../../../common/constants';
 import { FieldRequestConfig } from '../../../../common/types';
 import { getVisualizerFieldStats, getVisualizerOverallStats } from '../services/visualizer_stats';
 
@@ -49,7 +48,7 @@ export class DataLoader {
     this._indexPattern.fields.forEach((field) => {
       const fieldName = field.displayName !== undefined ? field.displayName : field.name;
       if (this.isDisplayField(fieldName) === true) {
-        if (field.aggregatable === true && field.type !== KBN_FIELD_TYPES.GEO_SHAPE) {
+        if (field.aggregatable === true && !NON_AGGREGATABLE_FIELD_TYPES.has(field.type)) {
           aggregatableFields.push(field.name);
         } else {
           nonAggregatableFields.push(field.name);