@thoughtspot/ts-chart-sdk 0.0.1-alpha.1 → 0.0.1-alpha.11

package/src/main/custom-chart-context.ts

@@ -5,13 +5,20 @@
  *
  * Copyright: ThoughtSpot Inc. 2023
  */
+
 import _ from 'lodash';
 import {
+    AxisMenuActionHandler,
     ChartToTSEvent,
     ChartToTSEventsPayloadMap,
+    ContextMenuActionHandler,
+    CustomAction,
     ErrorType,
+    OpenAxisMenuEventPayload,
+    OpenContextMenuEventPayload,
 } from '../types/chart-to-ts-event.types';
 import {
+    AppConfig,
     ChartConfig,
     ChartModel,
     ValidationResponse,
@@ -19,8 +26,10 @@ import {
 } from '../types/common.types';
 import { ChartConfigEditorDefinition } from '../types/configurator.types';
 import {
+    AxisMenuCustomActionPayload,
     ChartConfigValidateEventPayload,
     ChartModelUpdateEventPayload,
+    ContextMenuCustomActionPayload,
     DataUpdateEventPayload,
     GetDataQueryPayload,
     GetDataQueryResponsePayload,
@@ -54,7 +63,10 @@ export type CustomChartContextProps = {
      * @returns {@link Array<Query>}
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    getQueriesFromChartConfig: (chartConfig: ChartConfig[]) => Query[];
+    getQueriesFromChartConfig: (
+        chartConfig: ChartConfig[],
+        chartModel: ChartModel,
+    ) => Query[];
     /**
      * Main Render function that will render the chart based on the chart context provided
      *
@@ -104,6 +116,8 @@ export type CustomChartContextProps = {
      * on the TS app. If not provided, visual properties will not be configurable in
      * editor
      *
+     * @param chartModel
+     * @returns {@link VisualPropEditorDefinition}
      * @version SDK: 0.1 | ThoughtSpot:
      */
     visualPropEditorDefinition?: VisualPropEditorDefinition;
@@ -116,7 +130,6 @@ const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
     validateConfig: () => ({ isValid: true }),
     validateVisualProps: () => ({ isValid: true }),
     chartConfigEditorDefinition: undefined,
-    visualPropEditorDefinition: undefined,
 };
 
 export class CustomChartContext {
@@ -148,6 +161,13 @@ export class CustomChartContext {
      */
     private chartModel: ChartModel = {} as any;
 
+    /**
+     * App Config object. This contains the app state like locale and timezones.
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private appConfig: AppConfig = {};
+
     /**
      * Chart Props Object to define the workflow of the application
      *
@@ -184,6 +204,22 @@ export class CustomChartContext {
      */
     private triggerInitResolve: () => void = _.noop;
 
+    /**
+     * Stores the callbacks of context menu custom action based on custom action id
+     *
+     * @returns {@link ContextMenuActionHandler}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private contextMenuActionHandler: ContextMenuActionHandler = {};
+
+    /**
+     * Stores the callbacks of axis menu custom action based on custom action id
+     *
+     * @returns {@link AxisMenuActionHandler}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private axisMenuActionHandler: AxisMenuActionHandler = {};
+
     /**
      * Constructor to only accept context props as payload
      *
@@ -232,6 +268,21 @@ export class CustomChartContext {
         this.eventListeners[eventType].push(callbackFn);
     }
 
+    /**
+     * Removes specific event listeners on the chart context.
+     *
+     * @param  {T} eventType
+     * @returns void
+     */
+    public off<T extends keyof TSToChartEventsPayloadMap>(eventType: T): void {
+        if (_.isNil(this.eventListeners[eventType])) {
+            console.log('No event listener found to remove');
+            this.eventListeners[eventType] = [];
+            return;
+        }
+        this.eventListeners[eventType].splice(0, 1);
+    }
+
     /**
      * Add internal event listeners on the chart context with the required callback.
      *
@@ -268,6 +319,107 @@ export class CustomChartContext {
      */
     public getChartModel = (): ChartModel => this.chartModel;
 
+    /**
+     * Getter for the chart model object
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    public getAppConfig = (): AppConfig => this.appConfig;
+
+    /**
+     * Function to store the context menu custom action callback mapped with action id
+     * @param  {[OpenContextMenuEventPayload]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    public contextMenuCustomActionPreProcessor(
+        eventPayload: [OpenContextMenuEventPayload],
+    ): [OpenContextMenuEventPayload] {
+        // clear out the stored custom events callback for context menu
+        this.contextMenuActionHandler = {};
+        if (_.isEmpty(eventPayload?.[0]?.customActions)) {
+            return eventPayload;
+        }
+        eventPayload?.[0]?.customActions?.forEach((action: CustomAction) => {
+            this.contextMenuActionHandler[action.id] = action.onClick;
+        });
+        const processedCustomActions = eventPayload[0]?.customActions?.map(
+            (action: CustomAction) => {
+                return {
+                    id: action.id,
+                    label: action.label,
+                    icon: action.icon,
+                };
+            },
+        );
+        const processedPayload: [OpenContextMenuEventPayload] = [
+            {
+                ...eventPayload[0],
+                customActions: processedCustomActions as CustomAction[],
+            },
+        ];
+        return processedPayload;
+    }
+
+    /**
+     * Function to store the axis menu custom action callback mapped with action id
+     * @param  {[OpenAxisMenuEventPayload]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    public axisMenuCustomActionPreProcessor(
+        eventPayload: [OpenAxisMenuEventPayload],
+    ): [OpenAxisMenuEventPayload] {
+        // clear out the stored custom events callback for axis menu
+        this.axisMenuActionHandler = {};
+        if (_.isEmpty(eventPayload?.[0]?.customActions)) {
+            return eventPayload;
+        }
+        eventPayload[0].customActions?.forEach((action: CustomAction) => {
+            this.axisMenuActionHandler[action.id] = action.onClick;
+        });
+        const processedCustomActions = eventPayload?.[0].customActions?.map(
+            (action: CustomAction) => {
+                return {
+                    id: action.id,
+                    label: action.label,
+                    icon: action.icon,
+                };
+            },
+        );
+        const processedPayload: [OpenAxisMenuEventPayload] = [
+            {
+                ...eventPayload[0],
+                customActions: processedCustomActions as CustomAction[],
+            },
+        ];
+        return processedPayload;
+    }
+
+    /**
+     * Function to process the event payload based on event type
+     * @param  {ChartToTSEventsPayloadMap[T]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    private eventPayloadPreProcessor<T extends keyof ChartToTSEventsPayloadMap>(
+        eventType: T,
+        eventPayload: ChartToTSEventsPayloadMap[T],
+    ): ChartToTSEventsPayloadMap[T] {
+        switch (eventType) {
+            case ChartToTSEvent.OpenContextMenu:
+                return this.contextMenuCustomActionPreProcessor(
+                    eventPayload as [OpenContextMenuEventPayload],
+                ) as ChartToTSEventsPayloadMap[T];
+            case ChartToTSEvent.OpenAxisMenu:
+                return this.axisMenuCustomActionPreProcessor(
+                    eventPayload as [OpenAxisMenuEventPayload],
+                ) as ChartToTSEventsPayloadMap[T];
+            default:
+                return eventPayload;
+        }
+    }
+
     /**
      * Function to emit Chart to TS Events to the TS application.
 
@@ -286,10 +438,14 @@ export class CustomChartContext {
             );
             return Promise.reject(new Error('Context not initialized'));
         }
+        const processedPayload = this.eventPayloadPreProcessor(
+            eventType,
+            eventPayload,
+        );
         return PostMessageEventBridge.postMessageToHostApp(
             this.componentId,
             this.hostUrl,
-            eventPayload?.[0] ?? null,
+            processedPayload?.[0] ?? null,
             eventType,
         );
     }
@@ -417,6 +573,7 @@ export class CustomChartContext {
                 const queries =
                     this.chartContextProps.getQueriesFromChartConfig(
                         payload.config,
+                        this.chartModel,
                     );
                 return {
                     queries,
@@ -431,6 +588,94 @@ export class CustomChartContext {
             this.chartContextProps.renderChart(this);
         });
 
+        /**
+         * This event is triggered when the custom context action is triggered from TS app
+         */
+        this.onInternal(
+            TSToChartEvent.ContextMenuActionClick,
+            (
+                payload: ContextMenuCustomActionPayload,
+            ): {
+                isValid: boolean;
+                error?: unknown;
+            } => {
+                try {
+                    const {
+                        id: customActionCallback,
+                        clickedPoint,
+                        selectedPoints,
+                        event,
+                    } = payload.customAction;
+                    const customActionCallbackArgs = {
+                        id: customActionCallback,
+                        clickedPoint,
+                        selectedPoints,
+                        event,
+                    };
+                    this.contextMenuActionHandler[customActionCallback](
+                        customActionCallbackArgs,
+                    );
+                    return {
+                        isValid: true,
+                    };
+                } catch (error: unknown) {
+                    console.log(
+                        'ContextMenuCustomAction: payload recieved:',
+                        payload,
+                        'CustomActionCallbackStore:',
+                        this.axisMenuActionHandler,
+                    );
+                    return {
+                        isValid: false,
+                        error,
+                    };
+                }
+            },
+        );
+
+        /**
+         * This event is triggered when the custom axis action is triggered from TS app
+         */
+        this.onInternal(
+            TSToChartEvent.AxisMenuActionClick,
+            (
+                payload: AxisMenuCustomActionPayload,
+            ): {
+                isValid: boolean;
+                error?: unknown;
+            } => {
+                try {
+                    const {
+                        id: customActionCallback,
+                        columnIds,
+                        event,
+                    } = payload.customAction;
+                    const customActionCallbackArgs = {
+                        id: customActionCallback,
+                        columnIds,
+                        event,
+                    };
+                    this.axisMenuActionHandler[customActionCallback](
+                        customActionCallbackArgs,
+                    );
+                    return {
+                        isValid: true,
+                    };
+                } catch (error: unknown) {
+                    console.log(
+                        'AxisMenuCustomAction: payload recieved:',
+                        payload,
+                        'CustomActionCallbackStore:',
+                        this.axisMenuActionHandler,
+                    );
+                    return {
+                        isValid: false,
+                        error,
+                    };
+                }
+            },
+        );
+
         // Register External Events
         // These events are readable by the developer
 
@@ -501,6 +746,7 @@ export class CustomChartContext {
         this.componentId = payload.componentId;
         this.hostUrl = payload.hostUrl;
         this.chartModel = payload.chartModel;
+        this.appConfig = payload.appConfig ?? {};
 
         return this.publishChartContextPropsToHost();
     };
@@ -534,7 +780,6 @@ export class CustomChartContext {
                         this.chartModel,
                     );
             }
-
             return {
                 isConfigValid: isValid,
                 defaultChartConfig,

package/src/main/post-message-event-bridge.spec.ts

@@ -13,7 +13,7 @@ describe('postMessageToHostApp', () => {
         jest.resetAllMocks();
     });
 
-    test('should resolve the promise with null when successful', async () => {
+    test('should resolve the promise with data object when successful', async () => {
         // Mock the necessary variables and functions
         const componentId = '123';
         const hostUrl = 'https://example.com';
@@ -39,7 +39,9 @@ describe('postMessageToHostApp', () => {
         );
 
         // Simulate a successful response
-        const response = { data: { hasError: false } };
+        const response = {
+            data: { hasError: false, randomData: 'randomString' },
+        };
         if (_.isFunction(channel.port1.onmessage)) {
             (channel.port1.onmessage as any)(response);
         } else {
@@ -48,7 +50,7 @@ describe('postMessageToHostApp', () => {
         }
 
         // Wait for the promise to resolve
-        await expect(promise).resolves.toBeNull();
+        await expect(promise).resolves.toEqual(response.data);
 
         // Verify that the postMessage function was called with the correct
         // arguments

package/src/main/post-message-event-bridge.ts

@@ -44,7 +44,7 @@ const postMessageToHostApp = (
                 reject(error);
             } else {
                 console.log('ChartContext: message success:', res.data);
-                resolve(null);
+                resolve(res.data);
             }
         };
 

package/src/react/mocks/custom-chart-context-mock.ts

@@ -0,0 +1,114 @@
+import _ from 'lodash';
+import { CustomChartContextProps } from '../../main/custom-chart-context';
+import { ColumnType } from '../../types/answer-column.types';
+import { ChartConfig, ChartModel } from '../../types/common.types';
+import { Query } from '../../types/ts-to-chart-event.types';
+
+export const contextChartProps: CustomChartContextProps = {
+    getDefaultChartConfig: (chartModel: ChartModel): ChartConfig[] => {
+        const cols = chartModel.columns;
+
+        const measureColumns = _.filter(
+            cols,
+            (col) => col.type === ColumnType.MEASURE,
+        );
+
+        const attributeColumns = _.filter(
+            cols,
+            (col) => col.type === ColumnType.ATTRIBUTE,
+        );
+
+        const axisConfig: ChartConfig = {
+            key: 'column',
+            dimensions: [
+                {
+                    key: 'x',
+                    columns: [attributeColumns[0]],
+                },
+                {
+                    key: 'y',
+                    columns: measureColumns.slice(0, 2),
+                },
+            ],
+        };
+        return [axisConfig];
+    },
+    getQueriesFromChartConfig: (chartConfig: ChartConfig[]): Array<Query> => {
+        const queries = chartConfig.map(
+            (config: ChartConfig): Query =>
+                _.reduce(
+                    config.dimensions,
+                    (acc: Query, dimension) => ({
+                        queryColumns: [
+                            ...acc.queryColumns,
+                            ...dimension.columns,
+                        ],
+                    }),
+                    {
+                        queryColumns: [],
+                    } as Query,
+                ),
+        );
+        return queries;
+    },
+    chartConfigEditorDefinition: [
+        {
+            key: 'column',
+            label: 'Custom Column',
+            descriptionText:
+                'X Axis can only have attributes, Y Axis can only have measures, Color can only have attributes. ' +
+                'Should have just 1 column in Y axis with colors columns.',
+            columnSections: [
+                {
+                    key: 'x',
+                    label: 'Custom X Axis',
+                    allowAttributeColumns: true,
+                    allowMeasureColumns: false,
+                    allowTimeSeriesColumns: true,
+                    maxColumnCount: 1,
+                },
+                {
+                    key: 'y',
+                    label: 'Custom Y Axis',
+                    allowAttributeColumns: false,
+                    allowMeasureColumns: true,
+                    allowTimeSeriesColumns: false,
+                },
+            ],
+        },
+    ],
+    visualPropEditorDefinition: {
+        elements: [
+            {
+                key: 'color',
+                type: 'radio',
+                defaultValue: 'red',
+                values: ['red', 'green', 'yellow'],
+                label: 'Colors',
+            },
+            {
+                type: 'section',
+                key: 'accordion',
+                label: 'Accordion',
+                children: [
+                    {
+                        key: 'Color2',
+                        type: 'radio',
+                        defaultValue: 'blue',
+                        values: ['blue', 'white', 'red'],
+                        label: 'Color2',
+                    },
+                    {
+                        key: 'datalabels',
+                        type: 'toggle',
+                        defaultValue: false,
+                        label: 'Data Labels',
+                    },
+                ],
+            },
+        ],
+    },
+    renderChart: (cx) => {
+        return Promise.resolve();
+    },
+};