Create switch to render line charts using vega-lite

src/plugins/vis_type_vega/public/components/vega_vis_editor.tsx

@@ -37,7 +37,7 @@ import { i18n } from '@osd/i18n';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { getNotifications } from '../services';
-import { VisParams } from '../vega_fn';
+import { VisParams } from '../expressions/vega_fn';
 import { VegaHelpMenu } from './vega_help_menu';
 import { VegaActionsMenu } from './vega_actions_menu';
 

src/plugins/vis_type_vega/public/expressions/line_vega_spec_fn.ts

@@ -0,0 +1,243 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { cloneDeep } from 'lodash';
+import { i18n } from '@osd/i18n';
+import {
+  ExpressionFunctionDefinition,
+  OpenSearchDashboardsDatatable,
+  OpenSearchDashboardsDatatableColumn,
+} from '../../../expressions/public';
+import { VegaVisualizationDependencies } from '../plugin';
+import { VislibDimensions, VisParams } from '../../../visualizations/public';
+
+type Input = OpenSearchDashboardsDatatable;
+type Output = Promise<string>;
+
+interface Arguments {
+  visLayers: string | null;
+  visParams: string;
+  dimensions: string;
+}
+
+export type VegaSpecExpressionFunctionDefinition = ExpressionFunctionDefinition<
+  'line_vega_spec',
+  Input,
+  Arguments,
+  Output
+>;
+
+// Get the first xaxis field as only 1 setup of X Axis will be supported and
+// there won't be support for split series and split chart
+const getXAxisId = (dimensions: any, columns: OpenSearchDashboardsDatatableColumn[]): string => {
+  return columns.filter((column) => column.name === dimensions.x.label)[0].id;
+};
+
+const cleanString = (rawString: string): string => {
+  return rawString.replaceAll('"', '');
+};
+
+const formatDataTable = (
+  datatable: OpenSearchDashboardsDatatable
+): OpenSearchDashboardsDatatable => {
+  datatable.columns.forEach((column) => {
+    // clean quotation marks from names in columns
+    column.name = cleanString(column.name);
+  });
+  return datatable;
+};
+
+const createSpecFromDatatable = (
+  datatable: OpenSearchDashboardsDatatable,
+  visParams: VisParams,
+  dimensions: VislibDimensions
+): object => {
+  // TODO: we can try to use VegaSpec type but it is currently very outdated, where many
+  // of the fields and sub-fields don't have other optional params that we want for customizing.
+  // For now, we make this more loosely-typed by just specifying it as a generic object.
+  const spec = {} as any;
+
+  const legendPosition = visParams.legendPosition;
+
+  spec.$schema = 'https://vega.github.io/schema/vega-lite/v5.json';
+  spec.data = {
+    values: datatable.rows,
+  };
+  spec.config = {
+    view: {
+      stroke: null,
+    },
+    concat: {
+      spacing: 0,
+    },
+    // the circle timeline representing annotations
+    circle: {
+      color: 'blue',
+    },
+    // the vertical line when user hovers over an annotation circle
+    rule: {
+      color: 'red',
+    },
+    legend: {
+      orient: legendPosition,
+    },
+  };
+
+  // Get the valueAxes data and generate a map to easily fetch the different valueAxes data
+  const valueAxis = {};
+  visParams?.valueAxes.forEach((yAxis: { id: { toString: () => string | number } }) => {
+    // @ts-ignore
+    valueAxis[yAxis.id.toString()] = yAxis;
+  });
+
+  spec.layer = [] as any[];
+
+  if (datatable.rows.length > 0 && dimensions.x != null) {
+    const xAxisId = getXAxisId(dimensions, datatable.columns);
+    const xAxisTitle = cleanString(dimensions.x.label);
+    const startTime = new Date(dimensions.x.params.bounds.min).valueOf();
+    const endTime = new Date(dimensions.x.params.bounds.max).valueOf();
+    let skip = 0;
+    datatable.columns.forEach((column, index) => {
+      // Check if its not xAxis column data
+      if (column.meta?.aggConfigParams?.interval != null) {
+        skip++;
+      } else {
+        const currentSeriesParams = visParams.seriesParams[index - skip];
+        const currentValueAxis =
+          // @ts-ignore
+          valueAxis[currentSeriesParams.valueAxis.toString()];
+        let tooltip: Array<{ field: string; type: string; title: string }> = [];
+        if (visParams.addTooltip) {
+          tooltip = [
+            { field: xAxisId, type: 'temporal', title: xAxisTitle },
+            { field: column.id, type: 'quantitative', title: column.name },
+          ];
+        }
+        spec.layer.push({
+          mark: {
+            // Possible types are: line, area, histogram. The eligibility checker will
+            // prevent area and histogram (though area works in vega-lite)
+            type: currentSeriesParams.type,
+            // Possible types: linear, cardinal, step-after. All of these types work in vega-lite
+            interpolate: currentSeriesParams.interpolate,
+            // The possible values is any number, which matches what vega-lite supports
+            strokeWidth: currentSeriesParams.lineWidth,
+            // this corresponds to showing the dots in the visbuilder for each data point
+            point: currentSeriesParams.showCircles,
+          },
+          encoding: {
+            x: {
+              axis: {
+                title: xAxisTitle,
+                grid: visParams.grid.categoryLines,
+              },
+              field: xAxisId,
+              type: 'temporal',
+              scale: {
+                domain: [startTime, endTime],
+              },
+            },
+            y: {
+              axis: {
+                title: cleanString(currentValueAxis.title.text) || column.name,
+                grid: visParams.grid.valueAxis !== '',
+                orient: currentValueAxis.position,
+                labels: currentValueAxis.labels.show,
+                labelAngle: currentValueAxis.labels.rotate,
+              },
+              field: column.id,
+              type: 'quantitative',
+            },
+            tooltip,
+            color: {
+              datum: column.name,
+            },
+          },
+        });
+      }
+    });
+  }
+
+  if (visParams.addTimeMarker) {
+    spec.transform = [
+      {
+        calculate: 'now()',
+        as: 'now_field',
+      },
+    ];
+
+    spec.layer.push({
+      mark: 'rule',
+      encoding: {
+        x: {
+          type: 'temporal',
+          field: 'now_field',
+        },
+        color: {
+          value: 'red',
+        },
+        size: {
+          value: 1,
+        },
+      },
+    });
+  }
+
+  if (visParams.thresholdLine.show as boolean) {
+    spec.layer.push({
+      mark: {
+        type: 'rule',
+        color: visParams.thresholdLine.color,
+      },
+      encoding: {
+        y: {
+          datum: visParams.thresholdLine.value,
+        },
+      },
+    });
+  }
+
+  return spec;
+};
+
+export const createVegaSpecFn = (
+  dependencies: VegaVisualizationDependencies
+): VegaSpecExpressionFunctionDefinition => ({
+  name: 'line_vega_spec',
+  type: 'string',
+  inputTypes: ['opensearch_dashboards_datatable'],
+  help: i18n.translate('visTypeVega.function.help', {
+    defaultMessage: 'Construct vega spec',
+  }),
+  args: {
+    visLayers: {
+      types: ['string', 'null'],
+      default: '',
+      help: '',
+    },
+    visParams: {
+      types: ['string'],
+      default: '""',
+      help: '',
+    },
+    dimensions: {
+      types: ['string'],
+      default: '""',
+      help: '',
+    },
+  },
+  async fn(input, args, context) {
+    const table = cloneDeep(input);
+
+    // creating initial vega spec from table
+    const spec = createSpecFromDatatable(
+      formatDataTable(table),
+      JSON.parse(args.visParams),
+      JSON.parse(args.dimensions)
+    );
+    return JSON.stringify(spec);
+  },
+});

src/plugins/vis_type_vega/public/vega_fn.ts → src/plugins/vis_type_vega/public/expressions/vega_fn.ts

@@ -35,13 +35,13 @@ import {
   ExpressionFunctionDefinition,
   OpenSearchDashboardsContext,
   Render,
-} from '../../expressions/public';
-import { VegaVisualizationDependencies } from './plugin';
-import { createVegaRequestHandler } from './vega_request_handler';
-import { VegaInspectorAdapters } from './vega_inspector/index';
-import { TimeRange, Query } from '../../data/public';
-import { VisRenderValue } from '../../visualizations/public';
-import { VegaParser } from './data_model/vega_parser';
+} from '../../../expressions/public';
+import { VegaVisualizationDependencies } from '../plugin';
+import { createVegaRequestHandler } from '../vega_request_handler';
+import { VegaInspectorAdapters } from '../vega_inspector';
+import { TimeRange, Query } from '../../../data/public';
+import { VisRenderValue } from '../../../visualizations/public';
+import { VegaParser } from '../data_model/vega_parser';
 
 type Input = OpenSearchDashboardsContext | null;
 type Output = Promise<Render<RenderValue>>;
@@ -52,6 +52,14 @@ interface Arguments {
 
 export type VisParams = Required<Arguments>;
 
+export type VegaExpressionFunctionDefinition = ExpressionFunctionDefinition<
+  'vega',
+  Input,
+  Arguments,
+  Output,
+  ExecutionContext<unknown, VegaInspectorAdapters>
+>;
+
 interface RenderValue extends VisRenderValue {
   visData: VegaParser;
   visType: 'vega';
@@ -60,13 +68,7 @@ interface RenderValue extends VisRenderValue {
 
 export const createVegaFn = (
   dependencies: VegaVisualizationDependencies
-): ExpressionFunctionDefinition<
-  'vega',
-  Input,
-  Arguments,
-  Output,
-  ExecutionContext<unknown, VegaInspectorAdapters>
-> => ({
+): VegaExpressionFunctionDefinition => ({
   name: 'vega',
   type: 'render',
   inputTypes: ['opensearch_dashboards_context', 'null'],

src/plugins/vis_type_vega/public/index.ts

@@ -35,3 +35,6 @@ import { VegaPlugin as Plugin } from './plugin';
 export function plugin(initializerContext: PluginInitializerContext<ConfigSchema>) {
   return new Plugin(initializerContext);
 }
+
+export { VegaExpressionFunctionDefinition } from './expressions/vega_fn';
+export { VegaSpecExpressionFunctionDefinition } from './expressions/line_vega_spec_fn';

src/plugins/vis_type_vega/public/plugin.ts

@@ -43,13 +43,14 @@ import {
   setInjectedMetadata,
 } from './services';
 
-import { createVegaFn } from './vega_fn';
+import { createVegaFn } from './expressions/vega_fn';
 import { createVegaTypeDefinition } from './vega_type';
 import { IServiceSettings } from '../../maps_legacy/public';
 import './index.scss';
 import { ConfigSchema } from '../config';
 
 import { getVegaInspectorView } from './vega_inspector';
+import { createVegaSpecFn } from './expressions/line_vega_spec_fn';
 
 /** @internal */
 export interface VegaVisualizationDependencies {
@@ -104,6 +105,7 @@ export class VegaPlugin implements Plugin<Promise<void>, void> {
     inspector.registerView(getVegaInspectorView({ uiSettings: core.uiSettings }));
 
     expressions.registerFunction(() => createVegaFn(visualizationDependencies));
+    expressions.registerFunction(() => createVegaSpecFn(visualizationDependencies));
 
     visualizations.createBaseVisualization(createVegaTypeDefinition(visualizationDependencies));
   }

src/plugins/vis_type_vega/public/vega_request_handler.ts

@@ -34,7 +34,7 @@ import { SearchAPI } from './data_model/search_api';
 import { TimeCache } from './data_model/time_cache';
 
 import { VegaVisualizationDependencies } from './plugin';
-import { VisParams } from './vega_fn';
+import { VisParams } from './expressions/vega_fn';
 import { getData, getInjectedMetadata } from './services';
 import { VegaInspectorAdapters } from './vega_inspector';
 

src/plugins/vis_type_vega/public/vega_view/vega_base_view.js

@@ -437,7 +437,8 @@ export class VegaBaseView {
    * Set global debug variable to simplify vega debugging in console. Show info message first time
    */
   setDebugValues(view, spec, vlspec) {
-    this._parser.searchAPI.inspectorAdapters?.vega.bindInspectValues({
+    // The vega inspector can now be null when rendering line charts using vega for the overlay visualization feature
+    this._parser.searchAPI.inspectorAdapters?.vega?.bindInspectValues({
       view,
       spec: vlspec || spec,
     });

src/plugins/vis_type_vislib/opensearch_dashboards.json

@@ -3,7 +3,7 @@
   "version": "opensearchDashboards",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["charts", "data", "expressions", "visualizations", "opensearchDashboardsLegacy"],
+  "requiredPlugins": ["charts", "data", "expressions", "visualizations", "opensearchDashboardsLegacy", "visTypeVega"],
   "optionalPlugins": ["visTypeXy"],
   "requiredBundles": ["opensearchDashboardsUtils", "visDefaultEditor"]
 }

src/plugins/vis_type_vislib/public/line.ts

@@ -50,6 +50,7 @@ import { createVislibVisController } from './vis_controller';
 import { VisTypeVislibDependencies } from './plugin';
 import { Rotates } from '../../charts/public';
 import { VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
+import { toExpressionAst } from './line_to_expression';
 
 export const createLineVisTypeDefinition = (deps: VisTypeVislibDependencies) => ({
   name: 'line',
@@ -58,6 +59,7 @@ export const createLineVisTypeDefinition = (deps: VisTypeVislibDependencies) =>
   description: i18n.translate('visTypeVislib.line.lineDescription', {
     defaultMessage: 'Emphasize trends',
   }),
+  toExpressionAst,
   visualization: createVislibVisController(deps),
   getSupportedTriggers: () => {
     return [VIS_EVENT_TO_TRIGGER.filter, VIS_EVENT_TO_TRIGGER.brush];