[Dashboard] [Controls] Load more options list suggestions on scroll

src/plugins/controls/common/options_list/types.ts

@@ -9,8 +9,8 @@
 import { FieldSpec, DataView, RuntimeFieldSpec } from '@kbn/data-views-plugin/common';
 import type { Filter, Query, BoolQuery, TimeRange } from '@kbn/es-query';
 
-import { OptionsListSortingType } from './suggestions_sorting';
-import { DataControlInput } from '../types';
+import type { OptionsListSortingType } from './suggestions_sorting';
+import type { DataControlInput } from '../types';
 
 export const OPTIONS_LIST_CONTROL = 'optionsListControl';
 
@@ -20,46 +20,55 @@ export interface OptionsListEmbeddableInput extends DataControlInput {
   existsSelected?: boolean;
   runPastTimeout?: boolean;
   singleSelect?: boolean;
+  hideActionBar?: boolean;
   hideExclude?: boolean;
   hideExists?: boolean;
   hideSort?: boolean;
-  hideActionBar?: boolean;
   exclude?: boolean;
   placeholder?: string;
 }
 
-export type OptionsListField = FieldSpec & {
-  textFieldName?: string;
-  parentFieldName?: string;
-  childFieldName?: string;
-};
-
 export interface OptionsListSuggestions {
   [key: string]: { doc_count: number };
 }
 
 /**
  * The Options list response is returned from the serverside Options List route.
  */
-export interface OptionsListResponse {
-  rejected: boolean;
+export interface OptionsListSuccessResponse {
   suggestions: OptionsListSuggestions;
-  totalCardinality: number;
+  totalCardinality?: number; // total cardinality will be undefined when `useExpensiveQueries` is `false`
   invalidSelections?: string[];
 }
 
+/**
+ * The invalid selections are parsed **after** the server returns with the result from the ES client; so, the
+ * suggestion aggregation parser only returns the suggestions list + the cardinality of the result
+ */
+export type OptionsListParsedSuggestions = Pick<
+  OptionsListSuccessResponse,
+  'suggestions' | 'totalCardinality'
+>;
+
+export interface OptionsListFailureResponse {
+  error: 'aborted' | Error;
+}
+
+export type OptionsListResponse = OptionsListSuccessResponse | OptionsListFailureResponse;
+
 /**
  * The Options list request type taken in by the public Options List service.
  */
 export type OptionsListRequest = Omit<
   OptionsListRequestBody,
   'filters' | 'fieldName' | 'fieldSpec' | 'textFieldName'
 > & {
+  allowExpensiveQueries: boolean;
   timeRange?: TimeRange;
-  field: OptionsListField;
   runPastTimeout?: boolean;
   dataView: DataView;
   filters?: Filter[];
+  field: FieldSpec;
   query?: Query;
 };
 
@@ -68,13 +77,13 @@ export type OptionsListRequest = Omit<
  */
 export interface OptionsListRequestBody {
   runtimeFieldMap?: Record<string, RuntimeFieldSpec>;
+  allowExpensiveQueries: boolean;
   sort?: OptionsListSortingType;
   filters?: Array<{ bool: BoolQuery }>;
   selectedOptions?: string[];
   runPastTimeout?: boolean;
-  parentFieldName?: string;
-  textFieldName?: string;
   searchString?: string;
   fieldSpec?: FieldSpec;
   fieldName: string;
+  size: number;
 }

src/plugins/controls/common/types.ts

@@ -30,7 +30,5 @@ export type ControlInput = EmbeddableInput & {
 
 export type DataControlInput = ControlInput & {
   fieldName: string;
-  parentFieldName?: string;
-  childFieldName?: string;
   dataViewId: string;
 };

src/plugins/controls/public/__stories__/controls.stories.tsx

@@ -61,7 +61,6 @@ const storybookStubOptionsListRequest = async (
             {}
           ),
           totalCardinality: 100,
-          rejected: false,
         }),
       120
     )

src/plugins/controls/public/control_group/component/control_frame_component.tsx

@@ -9,15 +9,13 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import {
+  EuiButtonEmpty,
   EuiButtonIcon,
   EuiFormControlLayout,
   EuiFormLabel,
   EuiFormRow,
-  EuiIcon,
-  EuiLink,
   EuiLoadingChart,
   EuiPopover,
-  EuiText,
   EuiToolTip,
 } from '@elastic/eui';
 
@@ -40,25 +38,26 @@ interface ControlFrameErrorProps {
 const ControlFrameError = ({ error }: ControlFrameErrorProps) => {
   const [isPopoverOpen, setPopoverOpen] = useState(false);
   const popoverButton = (
-    <EuiText className="errorEmbeddableCompact__button" size="xs">
-      <EuiLink
-        className="eui-textTruncate"
-        color="subdued"
-        onClick={() => setPopoverOpen((open) => !open)}
-      >
-        <EuiIcon type="alert" color="danger" />
-        <FormattedMessage
-          id="controls.frame.error.message"
-          defaultMessage="An error has occurred. Read more"
-        />
-      </EuiLink>
-    </EuiText>
+    <EuiButtonEmpty
+      color="danger"
+      iconSize="m"
+      iconType={'alert'}
+      onClick={() => setPopoverOpen((open) => !open)}
+      className={'errorEmbeddableCompact__button'}
+      textProps={{ className: 'errorEmbeddableCompact__text' }}
+    >
+      <FormattedMessage
+        id="controls.frame.error.message"
+        defaultMessage="An error occurred. View more"
+      />
+    </EuiButtonEmpty>
   );
 
   return (
     <EuiPopover
       button={popoverButton}
       isOpen={isPopoverOpen}
+      className="errorEmbeddableCompact__popover"
       anchorClassName="errorEmbeddableCompact__popoverAnchor"
       closePopover={() => setPopoverOpen(false)}
     >

src/plugins/controls/public/control_group/editor/control_editor.tsx

@@ -199,11 +199,8 @@ export const ControlEditor = ({
               selectedFieldName={selectedField}
               dataView={dataView}
               onSelectField={(field) => {
-                const { parentFieldName, childFieldName } = fieldRegistry?.[field.name] ?? {};
                 onTypeEditorChange({
                   fieldName: field.name,
-                  ...(parentFieldName && { parentFieldName }),
-                  ...(childFieldName && { childFieldName }),
                 });
                 const newDefaultTitle = field.displayName ?? field.name;
                 setDefaultTitle(newDefaultTitle);

src/plugins/controls/public/control_group/editor/data_control_editor_tools.ts

@@ -8,11 +8,10 @@
 
 import { memoize } from 'lodash';
 
-import { IFieldSubTypeMulti } from '@kbn/es-query';
 import { DataView } from '@kbn/data-views-plugin/common';
 
 import { pluginServices } from '../../services';
-import { DataControlFieldRegistry, IEditableControlFactory } from '../../types';
+import { DataControlField, DataControlFieldRegistry, IEditableControlFactory } from '../../types';
 
 export const getDataControlFieldRegistry = memoize(
   async (dataView: DataView) => {
@@ -21,50 +20,30 @@ export const getDataControlFieldRegistry = memoize(
   (dataView: DataView) => [dataView.id, JSON.stringify(dataView.fields.getAll())].join('|')
 );
 
-const doubleLinkFields = (dataView: DataView) => {
-  // double link the parent-child relationship specifically for case-sensitivity support for options lists
-  const fieldRegistry: DataControlFieldRegistry = {};
-
-  for (const field of dataView.fields.getAll()) {
-    if (!fieldRegistry[field.name]) {
-      fieldRegistry[field.name] = { field, compatibleControlTypes: [] };
-    }
-
-    const parentFieldName = (field.subType as IFieldSubTypeMulti)?.multi?.parent;
-    if (parentFieldName) {
-      fieldRegistry[field.name].parentFieldName = parentFieldName;
-
-      const parentField = dataView.getFieldByName(parentFieldName);
-      if (!fieldRegistry[parentFieldName] && parentField) {
-        fieldRegistry[parentFieldName] = { field: parentField, compatibleControlTypes: [] };
-      }
-      fieldRegistry[parentFieldName].childFieldName = field.name;
-    }
-  }
-  return fieldRegistry;
-};
-
 const loadFieldRegistryFromDataView = async (
   dataView: DataView
 ): Promise<DataControlFieldRegistry> => {
   const {
     controls: { getControlTypes, getControlFactory },
   } = pluginServices.getServices();
-  const newFieldRegistry: DataControlFieldRegistry = doubleLinkFields(dataView);
+
   const controlFactories = getControlTypes().map(
     (controlType) => getControlFactory(controlType) as IEditableControlFactory
   );
-  dataView.fields.map((dataViewField) => {
-    for (const factory of controlFactories) {
-      if (factory.isFieldCompatible) {
-        factory.isFieldCompatible(newFieldRegistry[dataViewField.name]);
+  const fieldRegistry: DataControlFieldRegistry = dataView.fields
+    .getAll()
+    .reduce((registry, field) => {
+      const test: DataControlField = { field, compatibleControlTypes: [] };
+      for (const factory of controlFactories) {
+        if (factory.isFieldCompatible) {
+          factory.isFieldCompatible(test);
+        }
       }
-    }
-
-    if (newFieldRegistry[dataViewField.name]?.compatibleControlTypes.length === 0) {
-      delete newFieldRegistry[dataViewField.name];
-    }
-  });
+      if (test.compatibleControlTypes.length === 0) {
+        return { ...registry };
+      }
+      return { ...registry, [field.name]: test };
+    }, {});
 
-  return newFieldRegistry;
+  return fieldRegistry;
 };

src/plugins/controls/public/options_list/components/options_list.scss

@@ -9,8 +9,18 @@
 
 .optionsList__actions {
   padding: $euiSizeS;
+  padding-bottom: 0;
   border-bottom: $euiBorderThin;
   border-color: darken($euiColorLightestShade, 2%);
+
+  .optionsList__actionsRow {
+    margin: ($euiSizeS / 2) 0 !important;
+
+    .optionsList__actionBarDivider {
+      height: $euiSize;
+      border-right: $euiBorderThin;
+    }
+  }
 }
 
 .optionsList__popoverTitle {
@@ -30,13 +40,17 @@
   font-style: italic;
 }
 
+.optionsList__loadMore {
+  font-style: italic;
+}
+
 .optionsList__negateLabel {
   font-weight: bold;
   font-size: $euiSizeM;
   color: $euiColorDanger;
 }
 
-.optionsList__ignoredBadge {
+.optionsList__actionBarFirstBadge {
   margin-left: $euiSizeS;
 }
 
@@ -86,3 +100,18 @@
 .optionsList--sortPopover {
   width: $euiSizeXL * 7;
 }
+
+.optionslist--loadingMoreGroupLabel {
+  text-align: center;
+  padding: $euiSizeM;
+  font-style: italic;
+  height:  $euiSizeXXL !important;
+}
+
+.optionslist--endOfOptionsGroupLabel {
+  text-align: center;
+  font-size: $euiSizeM;
+  height:  auto !important;
+  color: $euiTextSubduedColor;
+  padding: $euiSizeM;
+}

src/plugins/controls/public/options_list/components/options_list_control.test.tsx

@@ -20,6 +20,7 @@ import { BehaviorSubject } from 'rxjs';
 describe('Options list control', () => {
   const defaultProps = {
     typeaheadSubject: new BehaviorSubject(''),
+    loadMoreSubject: new BehaviorSubject(10),
   };
 
   interface MountOptions {