[Visualizations] Changes in custom visualizations support (#88317) (#…

…89266) * Convert to typescript * Move related files directly into plugin * Implement toExpressionAst * Remove build_pipeline dedicated fn * Async import converter * Create a custom renderer * Move function directly into plugin * Update tests * Move files directly into related plugins * Remove ExprVis instance usage in maps visualizations * Use uiState updates * Fix minor issues * Update expression builder * Update styles * Create wrapper component * Update rendering * Create region map expression renderer * Fix tests and types * Fix initial render * Remove resize subscription * Fix custom visualization expression * Update region map expression in tests * Update files structure * Remove ReactVisController * Remove base visualization renderer * Remove extra vis properties * Use requiresSearch flag for agg based vis * Update types * Remove visualization expression function * Create toExpressionAst function * Update custom visualization example * Update interpreter functional tests * Enhance VisTypeDefinition interface * Enhance visualization types * Update license Co-authored-by: Alexey Antonov <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Alexey Antonov <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 26, 2021 · 3f81a0b · 3f81a0b
1 parent 2916bd9
commit 3f81a0b
Show file tree

Hide file tree

Showing 140 changed files with 751 additions and 1,889 deletions.
diff --git a/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx b/src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx
@@ -29,8 +29,6 @@ beforeEach(() => {
         name: 'test',
         title: 'test',
         visualization: null,
-        requestHandler: 'test',
-        responseHandler: 'test',
         stage: 'beta',
         requiresSearch: false,
         hidden: false,

diff --git a/src/plugins/input_control_vis/public/components/editor/controls_tab.tsx b/src/plugins/input_control_vis/public/components/editor/controls_tab.tsx
@@ -19,7 +19,7 @@ import {
   EuiSelect,
 } from '@elastic/eui';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { IIndexPattern } from 'src/plugins/data/public';
 import { ControlEditor } from './control_editor';
 import {
@@ -40,7 +40,7 @@ interface ControlsTabUiState {
   type: CONTROL_TYPES;
 }
 
-export type ControlsTabProps = VisOptionsProps<InputControlVisParams> & {
+export type ControlsTabProps = VisEditorOptionsProps<InputControlVisParams> & {
   deps: InputControlVisDependencies;
 };
 

diff --git a/src/plugins/input_control_vis/public/components/editor/index.tsx b/src/plugins/input_control_vis/public/components/editor/index.tsx
@@ -7,17 +7,17 @@
  */
 
 import React, { lazy } from 'react';
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { InputControlVisDependencies } from '../../plugin';
 import { InputControlVisParams } from '../../types';
 
 const ControlsTab = lazy(() => import('./controls_tab'));
 const OptionsTab = lazy(() => import('./options_tab'));
 
 export const getControlsTab = (deps: InputControlVisDependencies) => (
-  props: VisOptionsProps<InputControlVisParams>
+  props: VisEditorOptionsProps<InputControlVisParams>
 ) => <ControlsTab {...props} deps={deps} />;
 
-export const OptionsTabLazy = (props: VisOptionsProps<InputControlVisParams>) => (
+export const OptionsTabLazy = (props: VisEditorOptionsProps<InputControlVisParams>) => (
   <OptionsTab {...props} />
 );
diff --git a/src/plugins/input_control_vis/public/components/editor/options_tab.tsx b/src/plugins/input_control_vis/public/components/editor/options_tab.tsx
@@ -12,10 +12,10 @@ import { EuiForm, EuiFormRow, EuiSwitch } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiSwitchEvent } from '@elastic/eui';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { InputControlVisParams } from '../../types';
 
-export type OptionsTabProps = VisOptionsProps<InputControlVisParams>;
+export type OptionsTabProps = VisEditorOptionsProps<InputControlVisParams>;
 
 class OptionsTab extends PureComponent<OptionsTabProps> {
   handleUpdateFiltersChange = (event: EuiSwitchEvent) => {

diff --git a/src/plugins/input_control_vis/public/input_control_vis_type.ts b/src/plugins/input_control_vis/public/input_control_vis_type.ts
@@ -7,15 +7,15 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { VisGroups, BaseVisTypeOptions } from '../../visualizations/public';
+import { VisGroups, VisTypeDefinition } from '../../visualizations/public';
 import { getControlsTab, OptionsTabLazy } from './components/editor';
 import { InputControlVisDependencies } from './plugin';
 import { toExpressionAst } from './to_ast';
 import { InputControlVisParams } from './types';
 
 export function createInputControlVisTypeDefinition(
   deps: InputControlVisDependencies
-): BaseVisTypeOptions<InputControlVisParams> {
+): VisTypeDefinition<InputControlVisParams> {
   const ControlsTab = getControlsTab(deps);
 
   return {
@@ -56,7 +56,6 @@ export function createInputControlVisTypeDefinition(
       ],
     },
     inspectorAdapters: {},
-    requestHandler: 'none',
     toExpressionAst,
   };
 }
diff --git a/src/plugins/region_map/public/components/index.tsx b/src/plugins/region_map/public/components/index.tsx
@@ -8,11 +8,11 @@
 
 import React, { lazy } from 'react';
 import { IServiceSettings } from 'src/plugins/maps_legacy/public';
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { RegionMapVisParams } from '../region_map_types';
 
 const RegionMapOptions = lazy(() => import('./region_map_options'));
 
 export const createRegionMapOptions = (getServiceSettings: () => Promise<IServiceSettings>) => (
-  props: VisOptionsProps<RegionMapVisParams>
+  props: VisEditorOptionsProps<RegionMapVisParams>
 ) => <RegionMapOptions {...props} getServiceSettings={getServiceSettings} />;
diff --git a/src/plugins/region_map/public/components/region_map_options.tsx b/src/plugins/region_map/public/components/region_map_options.tsx
@@ -10,7 +10,7 @@ import React, { useCallback, useMemo } from 'react';
 import { EuiIcon, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { FileLayerField, VectorLayer, IServiceSettings } from '../../../maps_legacy/public';
 import { SelectOption, SwitchOption, NumberInputOption } from '../../../vis_default_editor/public';
 import { WmsOptions } from '../../../maps_legacy/public';
@@ -28,7 +28,7 @@ const mapFieldForOption = ({ description, name }: FileLayerField) => ({
 
 export type RegionMapOptionsProps = {
   getServiceSettings: () => Promise<IServiceSettings>;
-} & VisOptionsProps<RegionMapVisParams>;
+} & VisEditorOptionsProps<RegionMapVisParams>;
 
 function RegionMapOptions(props: RegionMapOptionsProps) {
   const { getServiceSettings, stateParams, vis, setValue } = props;

diff --git a/src/plugins/region_map/public/region_map_type.ts b/src/plugins/region_map/public/region_map_type.ts
@@ -8,7 +8,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { BaseVisTypeOptions } from '../../visualizations/public';
+import { VisTypeDefinition } from '../../visualizations/public';
 import { truncatedColorSchemas } from '../../charts/public';
 import { ORIGIN } from '../../maps_legacy/public';
 
@@ -23,7 +23,7 @@ export function createRegionMapTypeDefinition({
   uiSettings,
   regionmapsConfig,
   getServiceSettings,
-}: RegionMapVisualizationDependencies): BaseVisTypeOptions<RegionMapVisParams> {
+}: RegionMapVisualizationDependencies): VisTypeDefinition<RegionMapVisParams> {
   return {
     name: 'region_map',
     getInfoMessage: getDeprecationMessage,
@@ -139,5 +139,6 @@ provided base maps, or add your own. Darker colors represent higher values.',
 
       return vis;
     },
+    requiresSearch: true,
   };
 }
diff --git a/src/plugins/region_map/public/to_ast.ts b/src/plugins/region_map/public/to_ast.ts
@@ -11,11 +11,11 @@ import {
   IndexPatternLoadExpressionFunctionDefinition,
 } from '../../data/public';
 import { buildExpression, buildExpressionFunction } from '../../expressions/public';
-import { getVisSchemas, Vis, BuildPipelineParams } from '../../visualizations/public';
+import { getVisSchemas, VisToExpressionAst } from '../../visualizations/public';
 import { RegionMapExpressionFunctionDefinition } from './region_map_fn';
 import { RegionMapVisConfig, RegionMapVisParams } from './region_map_types';
 
-export const toExpressionAst = (vis: Vis<RegionMapVisParams>, params: BuildPipelineParams) => {
+export const toExpressionAst: VisToExpressionAst<RegionMapVisParams> = (vis, params) => {
   const esaggs = buildExpressionFunction<EsaggsExpressionFunctionDefinition>('esaggs', {
     index: buildExpression([
       buildExpressionFunction<IndexPatternLoadExpressionFunctionDefinition>('indexPatternLoad', {

diff --git a/src/plugins/tile_map/public/components/tile_map_options.tsx b/src/plugins/tile_map/public/components/tile_map_options.tsx
@@ -10,8 +10,8 @@ import React, { useEffect } from 'react';
 import { EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import {
-  VisOptionsProps,
   BasicOptions,
   SelectOption,
   SwitchOption,
@@ -21,7 +21,7 @@ import { WmsOptions } from '../../../maps_legacy/public';
 import { TileMapVisParams } from '../types';
 import { MapTypes } from '../utils/map_types';
 
-export type TileMapOptionsProps = VisOptionsProps<TileMapVisParams>;
+export type TileMapOptionsProps = VisEditorOptionsProps<TileMapVisParams>;
 
 function TileMapOptions(props: TileMapOptionsProps) {
   const { stateParams, setValue, vis } = props;

diff --git a/src/plugins/tile_map/public/tile_map_type.ts b/src/plugins/tile_map/public/tile_map_type.ts
@@ -7,7 +7,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { BaseVisTypeOptions } from 'src/plugins/visualizations/public';
+import { VisTypeDefinition } from 'src/plugins/visualizations/public';
 import { truncatedColorSchemas } from '../../charts/public';
 
 // @ts-expect-error
@@ -21,7 +21,7 @@ import { MapTypes } from './utils/map_types';
 
 export function createTileMapTypeDefinition(
   dependencies: TileMapVisualizationDependencies
-): BaseVisTypeOptions<TileMapVisParams> {
+): VisTypeDefinition<TileMapVisParams> {
   const { uiSettings, getServiceSettings } = dependencies;
 
   return {
@@ -147,5 +147,6 @@ export function createTileMapTypeDefinition(
       }
       return vis;
     },
+    requiresSearch: true,
   };
 }
diff --git a/src/plugins/tile_map/public/to_ast.ts b/src/plugins/tile_map/public/to_ast.ts
@@ -11,11 +11,11 @@ import {
   IndexPatternLoadExpressionFunctionDefinition,
 } from '../../data/public';
 import { buildExpression, buildExpressionFunction } from '../../expressions/public';
-import { getVisSchemas, Vis, BuildPipelineParams } from '../../visualizations/public';
+import { getVisSchemas, VisToExpressionAst } from '../../visualizations/public';
 import { TileMapExpressionFunctionDefinition } from './tile_map_fn';
 import { TileMapVisConfig, TileMapVisParams } from './types';
 
-export const toExpressionAst = (vis: Vis<TileMapVisParams>, params: BuildPipelineParams) => {
+export const toExpressionAst: VisToExpressionAst<TileMapVisParams> = (vis, params) => {
   const esaggs = buildExpressionFunction<EsaggsExpressionFunctionDefinition>('esaggs', {
     index: buildExpression([
       buildExpressionFunction<IndexPatternLoadExpressionFunctionDefinition>('indexPatternLoad', {

diff --git a/src/plugins/vis_default_editor/public/components/agg_group_helper.test.ts b/src/plugins/vis_default_editor/public/components/agg_group_helper.test.ts
@@ -50,7 +50,6 @@ describe('DefaultEditorGroup helpers', () => {
         min: 0,
         max: 3,
         aggFilter: [],
-        editor: false,
         params: [],
         defaults: null,
         mustBeFirst: true,
@@ -62,7 +61,6 @@ describe('DefaultEditorGroup helpers', () => {
         min: 2,
         max: 3,
         aggFilter: [],
-        editor: false,
         params: [],
         defaults: null,
       },

diff --git a/src/plugins/vis_default_editor/public/components/options/basic_options.tsx b/src/plugins/vis_default_editor/public/components/options/basic_options.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps } from '../../vis_options_props';
+import { VisEditorOptionsProps } from '../../../../visualizations/public';
 import { SwitchOption } from './switch';
 import { SelectOption } from './select';
 
@@ -23,7 +23,7 @@ function BasicOptions<VisParams extends BasicOptionsParams>({
   stateParams,
   setValue,
   vis,
-}: VisOptionsProps<VisParams>) {
+}: VisEditorOptionsProps<VisParams>) {
   return (
     <>
       <SelectOption

diff --git a/src/plugins/vis_default_editor/public/components/options/color_schema.tsx b/src/plugins/vis_default_editor/public/components/options/color_schema.tsx
@@ -12,7 +12,7 @@ import { EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ColorSchemaParams, ColorSchema } from 'src/plugins/charts/public';
-import { VisOptionsProps } from '../../vis_options_props';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { SelectOption } from './select';
 import { SwitchOption } from './switch';
 
@@ -24,7 +24,7 @@ export type SetColorSchemaOptionsValue = <T extends keyof ColorSchemaParams>(
 interface ColorSchemaOptionsProps extends ColorSchemaParams {
   disabled?: boolean;
   colorSchemas: ColorSchema[];
-  uiState: VisOptionsProps['uiState'];
+  uiState: VisEditorOptionsProps['uiState'];
   setValue: SetColorSchemaOptionsValue;
   showHelpText?: boolean;
 }

diff --git a/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts b/src/plugins/vis_default_editor/public/components/sidebar/use_option_tabs.ts
@@ -9,13 +9,12 @@
 import { useCallback, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { Vis } from '../../../../visualizations/public';
+import { Vis, VisEditorOptionsProps } from '../../../../visualizations/public';
 
-import { VisOptionsProps } from '../../vis_options_props';
 import { DefaultEditorDataTab, DefaultEditorDataTabProps } from './data_tab';
 
 export interface OptionTab {
-  editor: React.ComponentType<VisOptionsProps | DefaultEditorDataTabProps>;
+  editor: React.ComponentType<VisEditorOptionsProps | DefaultEditorDataTabProps>;
   name: string;
   title: string;
   isSelected?: boolean;

diff --git a/src/plugins/vis_default_editor/public/index.ts b/src/plugins/vis_default_editor/public/index.ts
@@ -16,7 +16,6 @@ export { PalettePicker } from './components/controls/palette_picker';
 export * from './components/options';
 export { RangesParamEditor, RangeValues } from './components/controls/ranges';
 export * from './editor_size';
-export * from './vis_options_props';
 export * from './utils';
 
 export const plugin = (context: PluginInitializerContext) => {

diff --git a/src/plugins/vis_default_editor/public/vis_options_props.tsx b/src/plugins/vis_default_editor/public/vis_options_props.tsx
diff --git a/src/plugins/vis_type_markdown/public/markdown_options.test.tsx b/src/plugins/vis_type_markdown/public/markdown_options.test.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { MarkdownVisParams } from './types';
 import { MarkdownOptions } from './markdown_options';
 
@@ -21,7 +21,7 @@ describe('MarkdownOptions', () => {
       openLinksInNewTab: false,
     },
     setValue: jest.fn(),
-  } as unknown) as VisOptionsProps<MarkdownVisParams>;
+  } as unknown) as VisEditorOptionsProps<MarkdownVisParams>;
 
   it('should match snapshot', () => {
     const comp = shallow(<MarkdownOptions {...props} />);

diff --git a/src/plugins/vis_type_markdown/public/markdown_options.tsx b/src/plugins/vis_type_markdown/public/markdown_options.tsx
@@ -18,10 +18,10 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
 import { MarkdownVisParams } from './types';
 
-function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisParams>) {
+function MarkdownOptions({ stateParams, setValue }: VisEditorOptionsProps<MarkdownVisParams>) {
   const onMarkdownUpdate = useCallback(
     ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) => setValue('markdown', value),
     [setValue]

diff --git a/src/plugins/vis_type_markdown/public/markdown_vis.ts b/src/plugins/vis_type_markdown/public/markdown_vis.ts
@@ -11,10 +11,11 @@ import { i18n } from '@kbn/i18n';
 import { MarkdownOptions } from './markdown_options';
 import { SettingsOptions } from './settings_options_lazy';
 import { DefaultEditorSize } from '../../vis_default_editor/public';
-import { VisGroups } from '../../visualizations/public';
+import { VisGroups, VisTypeDefinition } from '../../visualizations/public';
 import { toExpressionAst } from './to_ast';
+import { MarkdownVisParams } from './types';
 
-export const markdownVisDefinition = {
+export const markdownVisDefinition: VisTypeDefinition<MarkdownVisParams> = {
   name: 'markdown',
   title: 'Markdown',
   isAccessible: true,
@@ -58,7 +59,5 @@ export const markdownVisDefinition = {
     showTimePicker: false,
     showFilterBar: false,
   },
-  requestHandler: 'none',
-  responseHandler: 'none',
   inspectorAdapters: {},
 };
diff --git a/src/plugins/vis_type_markdown/public/settings_options.tsx b/src/plugins/vis_type_markdown/public/settings_options.tsx
@@ -10,10 +10,11 @@ import React from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
-import { VisOptionsProps, SwitchOption, RangeOption } from '../../vis_default_editor/public';
+import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
+import { SwitchOption, RangeOption } from '../../vis_default_editor/public';
 import { MarkdownVisParams } from './types';
 
-function SettingsOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisParams>) {
+function SettingsOptions({ stateParams, setValue }: VisEditorOptionsProps<MarkdownVisParams>) {
   return (
     <EuiPanel paddingSize="s">
       <RangeOption

diff --git a/src/plugins/vis_type_markdown/public/to_ast.ts b/src/plugins/vis_type_markdown/public/to_ast.ts
@@ -9,8 +9,9 @@
 import { VisToExpressionAst } from '../../visualizations/public';
 import { buildExpression, buildExpressionFunction } from '../../expressions/public';
 import { MarkdownVisExpressionFunctionDefinition } from './markdown_fn';
+import { MarkdownVisParams } from './types';
 
-export const toExpressionAst: VisToExpressionAst = (vis) => {
+export const toExpressionAst: VisToExpressionAst<MarkdownVisParams> = (vis) => {
   const { markdown, fontSize, openLinksInNewTab } = vis.params;
 
   const markdownVis = buildExpressionFunction<MarkdownVisExpressionFunctionDefinition>(