Timelion visualization renderer (#78540) (#79124)

* Update styles

* Implement toExpressionAst fn

* Implement renderer

* Update unit tests

* Add unit tests

* Update types

* Remove unused vars

* Fix types

* Update types

* Show error message when no data

* Update ExpressionRenderDefinition api

* Update renderer when there is no data

* Make options component lazy

Co-authored-by: Elastic Machine <[email protected]>
# Conflicts:
#	docs/development/plugins/expressions/public/kibana-plugin-plugins-expressions-public.expressionrenderdefinition.displayname.md
#	docs/development/plugins/expressions/server/kibana-plugin-plugins-expressions-server.expressionrenderdefinition.displayname.md
#	src/plugins/expressions/public/public.api.md
#	src/plugins/expressions/server/server.api.md

src/plugins/expressions/common/expression_renderers/types.ts

@@ -28,7 +28,7 @@ export interface ExpressionRenderDefinition<Config = unknown> {
   /**
    * A user friendly name of the renderer as will be displayed to user in UI.
    */
-  displayName: string;
+  displayName?: string;
 
   /**
    * Help text as will be displayed to user. A sentence or few about what this

src/plugins/timelion/public/index.scss

@@ -10,3 +10,9 @@
 @import './app';
 @import './base';
 @import './directives/index';
+
+// these styles is needed to be loaded here explicitly if the timelion visualization was not opened in browser
+// styles for timelion visualization are lazy loaded only while a vis is opened
+// this will duplicate styles only if both Timelion app and timelion visualization are loaded
+// could be left here as it is since the Timelion app is deprecated
+@import '../../vis_type_timelion/public/components/index.scss';

src/plugins/vis_type_tagcloud/public/tag_cloud_vis_renderer.tsx

@@ -25,7 +25,6 @@ import { ExpressionRenderDefinition } from '../../expressions/common/expression_
 import { TagCloudVisDependencies } from './plugin';
 import { TagCloudVisRenderValue } from './tag_cloud_fn';
 
-// @ts-ignore
 const TagCloudChart = lazy(() => import('./components/tag_cloud_chart'));
 
 export const getTagCloudVisRenderer: (

src/plugins/vis_type_timelion/public/components/_panel.scss → src/plugins/vis_type_timelion/public/components/_timelion_vis.scss

@@ -58,3 +58,11 @@
   white-space: nowrap;
   font-weight: $euiFontWeightBold;
 }
+
+.visEditor--timelion {
+  .visEditorSidebar__timelionOptions {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+  }
+}

src/plugins/vis_type_timelion/public/components/_index.scss → src/plugins/vis_type_timelion/public/components/index.scss

@@ -1,2 +1,2 @@
-@import 'panel';
+@import 'timelion_vis';
 @import 'timelion_expression_input';

src/plugins/vis_type_timelion/public/components/index.ts

@@ -19,4 +19,3 @@
 
 export * from './timelion_expression_input';
 export * from './timelion_interval';
-export * from './timelion_vis';

src/plugins/vis_type_timelion/public/components/panel.tsx → src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx

@@ -21,7 +21,9 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import $ from 'jquery';
 import moment from 'moment-timezone';
 import { debounce, compact, get, each, cloneDeep, last, map } from 'lodash';
+import { useResizeObserver } from '@elastic/eui';
 
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { useKibana } from '../../../kibana_react/public';
 import '../flot';
 import { DEFAULT_TIME_FORMAT } from '../../common/lib';
@@ -38,18 +40,19 @@ import { Series, Sheet } from '../helpers/timelion_request_handler';
 import { tickFormatters } from '../helpers/tick_formatters';
 import { generateTicksProvider } from '../helpers/tick_generator';
 import { TimelionVisDependencies } from '../plugin';
-import { ExprVisAPIEvents } from '../../../visualizations/public';
+
+import './index.scss';
 
 interface CrosshairPlot extends jquery.flot.plot {
   setCrosshair: (pos: Position) => void;
   clearCrosshair: () => void;
 }
 
-interface PanelProps {
-  applyFilter: ExprVisAPIEvents['applyFilter'];
+interface TimelionVisComponentProps {
+  fireEvent: IInterpreterRenderHandlers['event'];
   interval: string;
   seriesList: Sheet;
-  renderComplete(): void;
+  renderComplete: IInterpreterRenderHandlers['done'];
 }
 
 interface Position {
@@ -75,11 +78,16 @@ const DEBOUNCE_DELAY = 50;
 // ensure legend is the same height with or without a caption so legend items do not move around
 const emptyCaption = '<br>';
 
-function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps) {
+function TimelionVisComponent({
+  interval,
+  seriesList,
+  renderComplete,
+  fireEvent,
+}: TimelionVisComponentProps) {
   const kibana = useKibana<TimelionVisDependencies>();
   const [chart, setChart] = useState(() => cloneDeep(seriesList.list));
   const [canvasElem, setCanvasElem] = useState<HTMLDivElement>();
-  const [chartElem, setChartElem] = useState<HTMLDivElement>();
+  const [chartElem, setChartElem] = useState<HTMLDivElement | null>(null);
 
   const [originalColorMap, setOriginalColorMap] = useState(() => new Map<Series, string>());
 
@@ -191,7 +199,7 @@ function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps
           interval,
           kibana.services.timefilter,
           kibana.services.uiSettings,
-          chartElem && chartElem.clientWidth,
+          chartElem?.clientWidth,
           grid
         );
         const updatedSeries = buildSeriesData(chartValue, options);
@@ -216,12 +224,14 @@ function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps
         updateCaption(newPlot.getData());
       }
     },
-    [canvasElem, chartElem, renderComplete, kibana.services, interval, updateCaption]
+    [canvasElem, chartElem?.clientWidth, renderComplete, kibana.services, interval, updateCaption]
   );
 
+  const dimensions = useResizeObserver(chartElem);
+
   useEffect(() => {
     updatePlot(chart, seriesList.render && seriesList.render.grid);
-  }, [chart, updatePlot, seriesList.render]);
+  }, [chart, updatePlot, seriesList.render, dimensions]);
 
   useEffect(() => {
     const colorsSet: Array<[Series, string]> = [];
@@ -349,21 +359,24 @@ function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps
 
   const plotSelectedHandler = useCallback(
     (event: JQuery.TriggeredEvent, ranges: Ranges) => {
-      applyFilter({
-        timeFieldName: '*',
-        filters: [
-          {
-            range: {
-              '*': {
-                gte: ranges.xaxis.from,
-                lte: ranges.xaxis.to,
+      fireEvent({
+        name: 'applyFilter',
+        data: {
+          timeFieldName: '*',
+          filters: [
+            {
+              range: {
+                '*': {
+                  gte: ranges.xaxis.from,
+                  lte: ranges.xaxis.to,
+                },
               },
             },
-          },
-        ],
+          ],
+        },
       });
     },
-    [applyFilter]
+    [fireEvent]
   );
 
   useEffect(() => {
@@ -396,4 +409,6 @@ function Panel({ interval, seriesList, renderComplete, applyFilter }: PanelProps
   );
 }
 
-export { Panel };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TimelionVisComponent as default };

src/plugins/vis_type_timelion/public/helpers/timelion_request_handler.ts

@@ -19,10 +19,10 @@
 
 import { i18n } from '@kbn/i18n';
 import { KIBANA_CONTEXT_NAME } from 'src/plugins/expressions/public';
-import { VisParams } from '../../../visualizations/public';
 import { TimeRange, Filter, esQuery, Query } from '../../../data/public';
 import { TimelionVisDependencies } from '../plugin';
 import { getTimezone } from './get_timezone';
+import { TimelionVisParams } from '../timelion_vis_fn';
 
 interface Stats {
   cacheCount: number;
@@ -77,7 +77,7 @@ export function getTimelionRequestHandler({
     timeRange: TimeRange;
     filters: Filter[];
     query: Query;
-    visParams: VisParams;
+    visParams: TimelionVisParams;
   }): Promise<TimelionSuccessResponse> {
     const expression = visParams.expression;
 

src/plugins/vis_type_timelion/public/plugin.ts

@@ -39,8 +39,8 @@ import { getTimelionVisDefinition } from './timelion_vis_type';
 import { setIndexPatterns, setSavedObjectsClient } from './helpers/plugin_services';
 import { ConfigSchema } from '../config';
 
-import './index.scss';
 import { getArgValueSuggestions } from './helpers/arg_value_suggestions';
+import { getTimelionVisRenderer } from './timelion_vis_renderer';
 
 /** @internal */
 export interface TimelionVisDependencies extends Partial<CoreStart> {
@@ -93,7 +93,8 @@ export class TimelionVisPlugin
     };
 
     expressions.registerFunction(() => getTimelionVisualizationConfig(dependencies));
-    visualizations.createReactVisualization(getTimelionVisDefinition(dependencies));
+    expressions.registerRenderer(getTimelionVisRenderer(dependencies));
+    visualizations.createBaseVisualization(getTimelionVisDefinition(dependencies));
 
     return {
       isUiEnabled: this.initializerContext.config.get().ui.enabled,

src/plugins/vis_type_timelion/public/timelion_options.tsx

@@ -21,30 +21,45 @@ import React, { useCallback } from 'react';
 import { EuiPanel } from '@elastic/eui';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { VisParams } from './timelion_vis_fn';
+import { KibanaContextProvider } from '../../kibana_react/public';
+
+import { TimelionVisParams } from './timelion_vis_fn';
 import { TimelionInterval, TimelionExpressionInput } from './components';
+import { TimelionVisDependencies } from './plugin';
 
-export type TimelionOptionsProps = VisOptionsProps<VisParams>;
+export type TimelionOptionsProps = VisOptionsProps<TimelionVisParams>;
 
-function TimelionOptions({ stateParams, setValue, setValidity }: TimelionOptionsProps) {
-  const setInterval = useCallback((value: VisParams['interval']) => setValue('interval', value), [
-    setValue,
-  ]);
+function TimelionOptions({
+  services,
+  stateParams,
+  setValue,
+  setValidity,
+}: TimelionOptionsProps & {
+  services: TimelionVisDependencies;
+}) {
+  const setInterval = useCallback(
+    (value: TimelionVisParams['interval']) => setValue('interval', value),
+    [setValue]
+  );
   const setExpressionInput = useCallback(
-    (value: VisParams['expression']) => setValue('expression', value),
+    (value: TimelionVisParams['expression']) => setValue('expression', value),
     [setValue]
   );
 
   return (
-    <EuiPanel className="visEditorSidebar__timelionOptions" paddingSize="s">
-      <TimelionInterval
-        value={stateParams.interval}
-        setValue={setInterval}
-        setValidity={setValidity}
-      />
-      <TimelionExpressionInput value={stateParams.expression} setValue={setExpressionInput} />
-    </EuiPanel>
+    <KibanaContextProvider services={services}>
+      <EuiPanel className="visEditorSidebar__timelionOptions" paddingSize="s">
+        <TimelionInterval
+          value={stateParams.interval}
+          setValue={setInterval}
+          setValidity={setValidity}
+        />
+        <TimelionExpressionInput value={stateParams.expression} setValue={setExpressionInput} />
+      </EuiPanel>
+    </KibanaContextProvider>
   );
 }
 
-export { TimelionOptions };
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { TimelionOptions as default };