Make the formula api optional for the lens builder (#179255)

## Summary

For ES|QL charts the formula api should be redundant. This is going to
make the api lighter as there is no need to import the lens plugin if
you want to use the builder to create ES|QL charts.

dev_docs/lens/config_api.mdx

@@ -21,7 +21,7 @@ const config: LensConfig = {
   value: 'sum'
 }
 
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder(config, { 
   timeRange: { from: 'now-30d', to: 'now', type: 'relative' },
   embeddable: true,
@@ -41,8 +41,8 @@ The `LensConfigBuilder` class is the central interface of the API, facilitating
 
 The constructor requires two parameters:
 
-- `formulaAPI`: An instance of `FormulaPublicApi`, allowing the builder to perform formula calculations necessary for certain visualizations.
 - `dataViewsAPI`: An instance of `DataViewsPublicPluginStart`, enabling the builder to access and manage data views within Kibana.
+- `formulaAPI`: An instance of `FormulaPublicApi`, allowing the builder to perform formula calculations necessary for certain visualizations. You can omit this if you want to create an ES|QL visualization.
 
 #### build Method
 

dev_docs/lens/examples.mdx

@@ -110,7 +110,7 @@ These configurations illustrate the API's capability to define various visualiza
 Any of the above LensConfigs can be converted to actual lens configuration which can be passed to lens embeddable like this:
 
 ```
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder(config, { 
   timeRange: { from: 'now-30d', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/gauge.mdx

@@ -74,7 +74,7 @@ const gaugeConfig: LensConfig = {
   queryMaxValue: 'max',
   shape: 'arc',
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(gaugeConfig, { 
   timeRange: { from: 'now-1h', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/heatmap.mdx

@@ -63,7 +63,7 @@ const heatmapConfig: LensConfig = {
     position: 'right',
   },
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(heatmapConfig, {
   timeRange: { from: 'now-1M', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/metric.mdx

@@ -74,7 +74,7 @@ const config: LensConfig = {
   value: 'totalSales',
   label: 'Total Sales Value',
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder(config, { 
   timeRange: { from: 'now-30d', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/mosaic.mdx

@@ -52,7 +52,7 @@ const mosaicConfig: LensConfig = {
   breakdown: 'geo.src',
   xAxis: 'geo.dest',
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(mosaicConfig, {
   timeRange: { from: 'now-1y', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/pie.mdx

@@ -58,7 +58,7 @@ const pieConfig: LensConfig = {
     position: 'right',
   },
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(pieConfig, {
   timeRange: { from: 'now-1y', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/regionmap.mdx

@@ -44,7 +44,7 @@ const regionMapConfig: LensConfig = {
   breakdown: 'geo.dest',
   value: 'bytes',
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(regionMapConfig, {
   timeRange: { from: 'now-1y', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/table.mdx

@@ -60,7 +60,7 @@ const tableConfig: LensConfig = {
   ],
   value: 'bytes',
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(tableConfig, {
   timeRange: { from: 'now-1y', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/tagcloud.mdx

@@ -42,7 +42,7 @@ const tagCloudConfig: LensConfig = {
   breakdown: 'geo.dest',
   value: 'bytes',
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(tagCloudConfig, {
   timeRange: { from: 'now-1M', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/treemap.mdx

@@ -50,7 +50,7 @@ const treemapConfig: LensConfig = {
   ],
   value: 'bytes',
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(treemapConfig, {
   timeRange: { from: 'now-1y', to: 'now', type: 'relative' },
   embeddable: true,

dev_docs/lens/xy.mdx

@@ -166,7 +166,7 @@ const xyConfig: LensConfig = {
     showYAxisTitle: true,
   },
 };
-const configBuilder = new LensConfigBuilder(lensFormulaAPI, dataViewsAPI);
+const configBuilder = new LensConfigBuilder(dataViewsAPI, lensFormulaAPI);
 const lensConfig = configBuilder.build(xyConfig, {
   timeRange: { from: 'now-1y', to: 'now', type: 'relative' },
   embeddable: true,

packages/kbn-lens-embeddable-utils/config_builder/charts/gauge.ts

@@ -63,7 +63,7 @@ function buildFormulaLayer(
   layer: LensGaugeConfig,
   i: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): FormBasedPersistedState['layers'][0] {
   const layers = {
     [DEFAULT_LAYER_ID]: {

packages/kbn-lens-embeddable-utils/config_builder/charts/heatmap.ts

@@ -67,7 +67,7 @@ function buildFormulaLayer(
   layer: LensHeatmapConfig,
   i: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): FormBasedPersistedState['layers'][0] {
   const defaultLayer = {
     ...getFormulaColumn(ACCESSOR, mapToFormula(layer), dataView, formulaAPI),

packages/kbn-lens-embeddable-utils/config_builder/charts/metric.ts

@@ -98,7 +98,7 @@ function buildFormulaLayer(
   layer: LensMetricConfig,
   i: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): FormBasedPersistedState['layers'] {
   const baseLayer: PersistedIndexPatternLayer = {
     columnOrder: [ACCESSOR, HISTOGRAM_COLUMN_NAME],

packages/kbn-lens-embeddable-utils/config_builder/charts/partition.ts

@@ -70,7 +70,7 @@ function buildFormulaLayer(
   layer: LensTreeMapConfig | LensPieConfig | LensMosaicConfig,
   layerNr: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): FormBasedPersistedState['layers'][0] {
   const layers = {
     [DEFAULT_LAYER_ID]: {

packages/kbn-lens-embeddable-utils/config_builder/charts/region_map.ts

@@ -51,7 +51,7 @@ function buildFormulaLayer(
   layer: LensRegionMapConfig,
   i: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): FormBasedPersistedState['layers'][0] {
   const layers = {
     [DEFAULT_LAYER_ID]: {

packages/kbn-lens-embeddable-utils/config_builder/charts/table.ts

@@ -42,7 +42,7 @@ function buildFormulaLayer(
   layer: LensTableConfig,
   i: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): FormBasedPersistedState['layers'][0] {
   const layers = {
     [DEFAULT_LAYER_ID]: {

packages/kbn-lens-embeddable-utils/config_builder/charts/tag_cloud.ts

@@ -52,7 +52,7 @@ function buildFormulaLayer(
   layer: LensTagCloudConfig,
   i: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): FormBasedPersistedState['layers'][0] {
   const layers = {
     [DEFAULT_LAYER_ID]: {

packages/kbn-lens-embeddable-utils/config_builder/charts/xy.ts

@@ -163,7 +163,7 @@ function buildAllFormulasInLayer(
   layer: LensSeriesLayer | LensAnnotationLayer | LensReferenceLineLayer,
   i: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): PersistedIndexPatternLayer {
   return layer.yAxis.reduce((acc, curr, valueIndex) => {
     const formulaColumn = getFormulaColumn(
@@ -181,7 +181,7 @@ function buildFormulaLayer(
   layer: LensSeriesLayer | LensAnnotationLayer | LensReferenceLineLayer,
   i: number,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi
+  formulaAPI?: FormulaPublicApi
 ): FormBasedPersistedState['layers'][0] {
   if (layer.type === 'series') {
     const resultLayer = buildAllFormulasInLayer(layer, i, dataView, formulaAPI);

packages/kbn-lens-embeddable-utils/config_builder/columns/formula.ts

@@ -14,11 +14,11 @@ export function getFormulaColumn(
   id: string,
   config: FormulaValueConfig,
   dataView: DataView,
-  formulaAPI: FormulaPublicApi,
+  formulaAPI?: FormulaPublicApi,
   baseLayer?: PersistedIndexPatternLayer
 ): PersistedIndexPatternLayer {
   const { formula, ...rest } = config;
-  const formulaLayer = formulaAPI.insertOrReplaceFormulaColumn(
+  const formulaLayer = formulaAPI?.insertOrReplaceFormulaColumn(
     id,
     { formula, ...rest },
     baseLayer || { columnOrder: [], columns: {} },

packages/kbn-lens-embeddable-utils/config_builder/config_builder.ts

@@ -35,10 +35,11 @@ export class LensConfigBuilder {
     xy: buildXY,
     table: buildTable,
   };
-  private formulaAPI: FormulaPublicApi;
+  private formulaAPI: FormulaPublicApi | undefined;
   private dataViewsAPI: DataViewsPublicPluginStart;
 
-  constructor(formulaAPI: FormulaPublicApi, dataViewsAPI: DataViewsPublicPluginStart) {
+  // formulaApi is optional, as it is not necessary to use it when creating charts with ES|QL
+  constructor(dataViewsAPI: DataViewsPublicPluginStart, formulaAPI?: FormulaPublicApi) {
     this.formulaAPI = formulaAPI;
     this.dataViewsAPI = dataViewsAPI;
   }

packages/kbn-lens-embeddable-utils/config_builder/types.ts

@@ -290,7 +290,7 @@ export interface LensXYConfigBase {
 }
 export interface BuildDependencies {
   dataViewsAPI: DataViewsPublicPluginStart;
-  formulaAPI: FormulaPublicApi;
+  formulaAPI?: FormulaPublicApi;
 }
 
 export type LensXYConfig = Identity<LensBaseConfig & LensXYConfigBase>;

x-pack/examples/lens_config_builder_example/public/app.tsx

@@ -60,7 +60,7 @@ export const App = (props: {
   const LensSaveModalComponent = props.plugins.lens.SaveModalComponent;
 
   const attributes = useAsync(async () => {
-    const configBuilder = new LensConfigBuilder(props.formula, props.dataViews);
+    const configBuilder = new LensConfigBuilder(props.dataViews, props.formula);
     return (await configBuilder.build(lensConfig, {
       embeddable: false,
     })) as TypedLensByValueInput['attributes'];

x-pack/examples/lens_embeddable_inline_editing_example/public/app.tsx

@@ -41,7 +41,7 @@ export const App = (props: {
   const [panelActive, setPanelActive] = useState<number | null>(null);
 
   const configBuilder = useMemo(
-    () => new LensConfigBuilder(props.stateHelpers.formula, props.plugins.dataViews),
+    () => new LensConfigBuilder(props.plugins.dataViews, props.stateHelpers.formula),
     [props.plugins.dataViews, props.stateHelpers.formula]
   );
 

x-pack/plugins/observability_solution/infra/public/hooks/use_lens_attributes.ts

@@ -31,7 +31,7 @@ export const useLensAttributes = (params: UseLensAttributesParams) => {
       return undefined;
     }
 
-    const builder = new LensConfigBuilder(formulaAPI, dataViews);
+    const builder = new LensConfigBuilder(dataViews, formulaAPI);
 
     return builder.build(params) as Promise<LensAttributes>;
   }, [params.chartType, params.dataset, dataViews]);