[ML] Redesign file-based Data Visualizer

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

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { ES_FIELD_TYPES } from '../../../../../src/plugins/data/common';
+
 export interface InputOverrides {
   [key: string]: string;
 }
@@ -29,15 +31,27 @@ export interface FindFileStructureResponse {
       count: number;
       cardinality: number;
       top_hits: Array<{ count: number; value: any }>;
+      mean_value?: number;
+      median_value?: number;
       max_value?: number;
       min_value?: number;
+      earliest?: string;
+      latest?: string;
     };
   };
   sample_start: string;
   num_messages_analyzed: number;
   mappings: {
-    [fieldName: string]: {
-      type: string;
+    properties: {
+      [fieldName: string]: {
+        // including all possible Elasticsearch types
+        // since find_file_structure API can be enhanced to include new fields in the future
+        type: Exclude<
+          ES_FIELD_TYPES,
+          ES_FIELD_TYPES._ID | ES_FIELD_TYPES._INDEX | ES_FIELD_TYPES._SOURCE | ES_FIELD_TYPES._TYPE
+        >;
+        format?: string;
+      };
     };
   };
   quote: string;

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

@@ -42,11 +42,7 @@ export interface MlGenericUrlPageState extends MlIndexBasedSearchState {
   [key: string]: any;
 }
 
-export interface DataVisualizerIndexBasedAppState {
-  pageIndex: number;
-  pageSize: number;
-  sortField: string;
-  sortDirection: string;
+export interface DataVisualizerIndexBasedAppState extends Omit<ListingPageUrlState, 'queryText'> {
   searchString?: Query['query'];
   searchQuery?: Query['query'];
   searchQueryLanguage?: SearchQueryLanguage;
@@ -57,6 +53,13 @@ export interface DataVisualizerIndexBasedAppState {
   showAllFields?: boolean;
   showEmptyFields?: boolean;
 }
+
+export interface DataVisualizerFileBasedAppState extends Omit<ListingPageUrlState, 'queryText'> {
+  visibleFieldTypes?: string[];
+  visibleFieldNames?: string[];
+  showDistributions?: boolean;
+}
+
 export type MlGenericUrlState = MLPageState<
   | typeof ML_PAGES.DATA_VISUALIZER_INDEX_VIEWER
   | typeof ML_PAGES.ANOMALY_DETECTION_CREATE_JOB

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

@@ -22,6 +22,7 @@
 
 .mlDataGridChart__legendBoolean {
   width: 100%;
+  min-width: $euiButtonMinWidth;
   td { text-align: center }
 }
 

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

@@ -20,7 +20,7 @@ import { NON_AGGREGATABLE } from './common';
 
 export const hoveredRow$ = new BehaviorSubject<any | null>(null);
 
-const BAR_COLOR = euiPaletteColorBlind()[0];
+export const BAR_COLOR = euiPaletteColorBlind()[0];
 const BAR_COLOR_BLUR = euiPaletteColorBlind({ rotations: 2 })[10];
 const MAX_CHART_COLUMNS = 20;
 

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

@@ -11,11 +11,15 @@ import { EuiText, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { FieldTypeIcon } from '../field_type_icon';
-import { FieldVisConfig } from '../../datavisualizer/index_based/common';
 import { getMLJobTypeAriaLabel } from '../../util/field_types_utils';
+import {
+  FieldVisConfig,
+  FileBasedFieldVisConfig,
+  isIndexBasedFieldVisConfig,
+} from '../../datavisualizer/stats_table/types/field_vis_config';
 
 interface Props {
-  card: FieldVisConfig;
+  card: FieldVisConfig | FileBasedFieldVisConfig;
 }
 
 export const FieldTitleBar: FC<Props> = ({ card }) => {
@@ -30,13 +34,13 @@ export const FieldTitleBar: FC<Props> = ({ card }) => {
 
   if (card.fieldName === undefined) {
     classNames.push('document_count');
-  } else if (card.isUnsupportedType === true) {
+  } else if (isIndexBasedFieldVisConfig(card) && card.isUnsupportedType === true) {
     classNames.push('type-other');
   } else {
     classNames.push(card.type);
   }
 
-  if (card.isUnsupportedType !== true) {
+  if (isIndexBasedFieldVisConfig(card) && card.isUnsupportedType !== true) {
     // All the supported field types have aria labels.
     cardTitleAriaLabel.unshift(getMLJobTypeAriaLabel(card.type)!);
   }

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts

@@ -7,7 +7,10 @@
 import { Direction, EuiBasicTableProps, Pagination, PropertySort } from '@elastic/eui';
 import { useCallback, useMemo } from 'react';
 import { ListingPageUrlState } from '../../../../../../../common/types/common';
-import { DataVisualizerIndexBasedAppState } from '../../../../../../../common/types/ml_url_generator';
+import {
+  DataVisualizerFileBasedAppState,
+  DataVisualizerIndexBasedAppState,
+} from '../../../../../../../common/types/ml_url_generator';
 
 const PAGE_SIZE_OPTIONS = [10, 25, 50];
 
@@ -38,7 +41,10 @@ interface UseTableSettingsReturnValue<T> {
 
 export function useTableSettings<TypeOfItem>(
   items: TypeOfItem[],
-  pageState: ListingPageUrlState | DataVisualizerIndexBasedAppState,
+  pageState:
+    | ListingPageUrlState
+    | DataVisualizerIndexBasedAppState
+    | DataVisualizerFileBasedAppState,
   updatePageState: (update: Partial<ListingPageUrlState>) => void
 ): UseTableSettingsReturnValue<TypeOfItem> {
   const { pageIndex, pageSize, sortField, sortDirection } = pageState;

x-pack/plugins/ml/public/application/datavisualizer/_index.scss

@@ -1,3 +1,3 @@
 @import 'file_based/index';
 @import 'index_based/index';
-@import 'stats_datagrid/index';
+@import 'stats_table/index';

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/_index.scss

@@ -1,7 +1,6 @@
 @import 'file_datavisualizer_view/index';
 @import 'results_view/index';
 @import 'analysis_summary/index';
-@import 'fields_stats/index';
 @import 'about_panel/index';
 @import 'import_summary/index';
 @import 'experimental_badge/index';

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/field_data_card.tsx → x-pack/plugins/ml/public/application/datavisualizer/file_based/components/expanded_row/file_based_expanded_row.tsx

@@ -4,45 +4,28 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiPanel } from '@elastic/eui';
-import React, { FC } from 'react';
-
-import { ML_JOB_FIELD_TYPES } from '../../../../../../common/constants/field_types';
-
-import { FieldVisConfig } from '../../common';
-import { FieldTitleBar } from '../../../../components/field_title_bar/index';
+import React from 'react';
 import {
   BooleanContent,
   DateContent,
   GeoPointContent,
   IpContent,
   KeywordContent,
-  NotInDocsContent,
-  NumberContent,
   OtherContent,
   TextContent,
-} from './content_types';
-import { LoadingIndicator } from './loading_indicator';
-
-export interface FieldDataCardProps {
-  config: FieldVisConfig;
-}
+  NumberContent,
+} from '../../../stats_table/components/field_data_expanded_row';
+import { ML_JOB_FIELD_TYPES } from '../../../../../../common/constants/field_types';
+import type { FileBasedFieldVisConfig } from '../../../stats_table/types/field_vis_config';
 
-export const FieldDataCard: FC<FieldDataCardProps> = ({ config }) => {
-  const { fieldName, loading, type, existsInDocs } = config;
+export const FileBasedDataVisualizerExpandedRow = ({ item }: { item: FileBasedFieldVisConfig }) => {
+  const config = item;
+  const { type, fieldName } = config;
 
   function getCardContent() {
-    if (existsInDocs === false) {
-      return <NotInDocsContent />;
-    }
-
     switch (type) {
       case ML_JOB_FIELD_TYPES.NUMBER:
-        if (fieldName !== undefined) {
-          return <NumberContent config={config} />;
-        } else {
-          return null;
-        }
+        return <NumberContent config={config} />;
 
       case ML_JOB_FIELD_TYPES.BOOLEAN:
         return <BooleanContent config={config} />;
@@ -68,15 +51,11 @@ export const FieldDataCard: FC<FieldDataCardProps> = ({ config }) => {
   }
 
   return (
-    <EuiPanel
-      data-test-subj={`mlFieldDataCard ${fieldName} ${type}`}
-      className="mlFieldDataCard"
-      hasShadow={false}
+    <div
+      className="mlDataVisualizerFieldExpandedRow"
+      data-test-subj={`mlDataVisualizerFieldExpandedRow-${fieldName}`}
     >
-      <FieldTitleBar card={config} />
-      <div className="mlFieldDataCard__content" data-test-subj="mlFieldDataCardContent">
-        {loading === true ? <LoadingIndicator /> : getCardContent()}
-      </div>
-    </EuiPanel>
+      {getCardContent()}
+    </div>
   );
 };

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/expanded_row/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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 { FileBasedDataVisualizerExpandedRow } from './file_based_expanded_row';

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/field_data_row/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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 { FileBasedNumberContentPreview } from './number_content_preview';

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/field_data_row/number_content_preview.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FileBasedFieldVisConfig } from '../../../stats_table/types';
+
+export const FileBasedNumberContentPreview = ({ config }: { config: FileBasedFieldVisConfig }) => {
+  const stats = config.stats;
+  if (
+    stats === undefined ||
+    stats.min === undefined ||
+    stats.median === undefined ||
+    stats.max === undefined
+  )
+    return null;
+  return (
+    <EuiFlexGroup direction={'column'} gutterSize={'xs'}>
+      <EuiFlexGroup gutterSize="xs">
+        <EuiFlexItem>
+          <b>
+            <FormattedMessage
+              id="xpack.ml.fileDatavisualizer.fieldStatsCard.minTitle"
+              defaultMessage="min"
+            />
+          </b>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <b>
+            <FormattedMessage
+              id="xpack.ml.fileDatavisualizer.fieldStatsCard.medianTitle"
+              defaultMessage="median"
+            />
+          </b>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <b>
+            <FormattedMessage
+              id="xpack.ml.fileDatavisualizer.fieldStatsCard.maxTitle"
+              defaultMessage="max"
+            />
+          </b>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexGroup gutterSize="xs">
+        <EuiFlexItem>{stats.min}</EuiFlexItem>
+        <EuiFlexItem>{stats.median}</EuiFlexItem>
+        <EuiFlexItem>{stats.max}</EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/field_names_filter/field_names_filter.tsx

@@ -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 React, { FC, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { MultiSelectPicker } from '../../../../components/multi_select_picker';
+import type {
+  FileBasedFieldVisConfig,
+  FileBasedUnknownFieldVisConfig,
+} from '../../../stats_table/types/field_vis_config';
+
+interface Props {
+  fields: Array<FileBasedFieldVisConfig | FileBasedUnknownFieldVisConfig>;
+  setVisibleFieldNames(q: string[]): void;
+  visibleFieldNames: string[];
+}
+
+export const DataVisualizerFieldNamesFilter: FC<Props> = ({
+  fields,
+  setVisibleFieldNames,
+  visibleFieldNames,
+}) => {
+  const fieldNameTitle = useMemo(
+    () =>
+      i18n.translate('xpack.ml.dataVisualizer.fileBased.fieldNameSelect', {
+        defaultMessage: 'Field name',
+      }),
+    []
+  );
+  const options = useMemo(
+    () => fields.filter((d) => d.fieldName !== undefined).map((d) => ({ value: d.fieldName! })),
+    [fields]
+  );
+
+  return (
+    <MultiSelectPicker
+      title={fieldNameTitle}
+      options={options}
+      onChange={setVisibleFieldNames}
+      checkedOptions={visibleFieldNames}
+      dataTestSubj={'mlDataVisualizerFieldNameSelect'}
+    />
+  );
+};

x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/index.ts → x-pack/plugins/ml/public/application/datavisualizer/file_based/components/field_names_filter/index.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { FieldDataCard, FieldDataCardProps } from './field_data_card';
+export { DataVisualizerFieldNamesFilter } from './field_names_filter';