[Dashboard] [Controls] Add unmapped runtime field support to options list

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

@@ -7,7 +7,7 @@
  */
 
 import type { Filter, Query, BoolQuery, TimeRange } from '@kbn/es-query';
-import { FieldSpec, DataView } from '@kbn/data-views-plugin/common';
+import { FieldSpec, DataView, RuntimeFieldSpec } from '@kbn/data-views-plugin/common';
 
 import { DataControlInput } from '../types';
 
@@ -57,9 +57,11 @@ export type OptionsListRequest = Omit<
  * The Options list request body is sent to the serverside Options List route and is used to create the ES query.
  */
 export interface OptionsListRequestBody {
+  runtimeFieldMap?: Record<string, RuntimeFieldSpec>;
   filters?: Array<{ bool: BoolQuery }>;
   selectedOptions?: string[];
   runPastTimeout?: boolean;
+  parentFieldName?: string;
   textFieldName?: string;
   searchString?: string;
   fieldSpec?: FieldSpec;

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

@@ -52,7 +52,7 @@ import {
 } from '../../types';
 import { CONTROL_WIDTH_OPTIONS } from './editor_constants';
 import { pluginServices } from '../../services';
-import { loadFieldRegistryFromDataViewId } from './data_control_editor_tools';
+import { getDataControlFieldRegistry } from './data_control_editor_tools';
 interface EditControlProps {
   embeddable?: ControlEmbeddable<DataControlInput>;
   isCreate: boolean;
@@ -116,10 +116,10 @@ export const ControlEditor = ({
   useEffect(() => {
     (async () => {
       if (state.selectedDataView?.id) {
-        setFieldRegistry(await loadFieldRegistryFromDataViewId(state.selectedDataView.id));
+        setFieldRegistry(await getDataControlFieldRegistry(await get(state.selectedDataView.id)));
       }
     })();
-  }, [state.selectedDataView]);
+  }, [state.selectedDataView?.id, get]);
 
   useMount(() => {
     let mounted = true;

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

@@ -6,13 +6,20 @@
  * Side Public License, v 1.
  */
 
+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';
 
-const dataControlFieldRegistryCache: { [key: string]: DataControlFieldRegistry } = {};
+export const getDataControlFieldRegistry = memoize(
+  async (dataView: DataView) => {
+    return await loadFieldRegistryFromDataView(dataView);
+  },
+  (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
@@ -22,6 +29,7 @@ const doubleLinkFields = (dataView: DataView) => {
     if (!fieldRegistry[field.name]) {
       fieldRegistry[field.name] = { field, compatibleControlTypes: [] };
     }
+
     const parentFieldName = (field.subType as IFieldSubTypeMulti)?.multi?.parent;
     if (parentFieldName) {
       fieldRegistry[field.name].parentFieldName = parentFieldName;
@@ -36,20 +44,13 @@ const doubleLinkFields = (dataView: DataView) => {
   return fieldRegistry;
 };
 
-export const loadFieldRegistryFromDataViewId = async (
-  dataViewId: string
+const loadFieldRegistryFromDataView = async (
+  dataView: DataView
 ): Promise<DataControlFieldRegistry> => {
-  if (dataControlFieldRegistryCache[dataViewId]) {
-    return dataControlFieldRegistryCache[dataViewId];
-  }
   const {
-    dataViews,
     controls: { getControlTypes, getControlFactory },
   } = pluginServices.getServices();
-  const dataView = await dataViews.get(dataViewId);
-
   const newFieldRegistry: DataControlFieldRegistry = doubleLinkFields(dataView);
-
   const controlFactories = getControlTypes().map(
     (controlType) => getControlFactory(controlType) as IEditableControlFactory
   );
@@ -64,7 +65,6 @@ export const loadFieldRegistryFromDataViewId = async (
       delete newFieldRegistry[dataViewField.name];
     }
   });
-  dataControlFieldRegistryCache[dataViewId] = newFieldRegistry;
 
   return newFieldRegistry;
 };

src/plugins/controls/public/control_group/embeddable/control_group_container.tsx

@@ -43,7 +43,7 @@ import { ControlEmbeddable, ControlInput, ControlOutput, DataControlInput } from
 import { CreateControlButton, CreateControlButtonTypes } from '../editor/create_control';
 import { CreateTimeSliderControlButton } from '../editor/create_time_slider_control';
 import { TIME_SLIDER_CONTROL } from '../../time_slider';
-import { loadFieldRegistryFromDataViewId } from '../editor/data_control_editor_tools';
+import { getDataControlFieldRegistry } from '../editor/data_control_editor_tools';
 
 let flyoutRef: OverlayRef | undefined;
 export const setFlyoutRef = (newRef: OverlayRef | undefined) => {
@@ -102,7 +102,8 @@ export class ControlGroupContainer extends Container<
     fieldName: string;
     title?: string;
   }) {
-    const fieldRegistry = await loadFieldRegistryFromDataViewId(dataViewId);
+    const dataView = await pluginServices.getServices().dataViews.get(dataViewId);
+    const fieldRegistry = await getDataControlFieldRegistry(dataView);
     const field = fieldRegistry[fieldName];
     return this.addNewEmbeddable(field.compatibleControlTypes[0], {
       id: uuid,

src/plugins/controls/public/services/options_list/options_list_service.ts

@@ -89,6 +89,7 @@ class OptionsListService implements ControlsOptionsListService {
       fieldName: field.name,
       fieldSpec: field,
       textFieldName: (field as OptionsListField).textFieldName,
+      runtimeFieldMap: dataView.toSpec().runtimeFieldMap,
     };
   };
 

src/plugins/controls/server/options_list/options_list_suggestions_route.ts

@@ -85,8 +85,7 @@ export const setupOptionsListSuggestionsRoute = (
     /**
      * Build ES Query
      */
-    const { runPastTimeout, filters, fieldName } = request;
-
+    const { runPastTimeout, filters, fieldName, runtimeFieldMap } = request;
     const { terminateAfter, timeout } = getAutocompleteSettings();
     const timeoutSettings = runPastTimeout
       ? {}
@@ -124,6 +123,9 @@ export const setupOptionsListSuggestionsRoute = (
           },
         },
       },
+      runtime_mappings: {
+        ...runtimeFieldMap,
+      },
     };
 
     /**