@thoughtspot/ts-chart-sdk 0.0.1-alpha.0 → 0.0.1-alpha.10

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

@@ -5,12 +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,
@@ -18,8 +26,10 @@ import {
 } from '../types/common.types';
 import { ChartConfigEditorDefinition } from '../types/configurator.types';
 import {
+    AxisMenuCustomActionPayload,
     ChartConfigValidateEventPayload,
     ChartModelUpdateEventPayload,
+    ContextMenuCustomActionPayload,
     DataUpdateEventPayload,
     GetDataQueryPayload,
     GetDataQueryResponsePayload,
@@ -63,7 +73,7 @@ export type CustomChartContextProps = {
      */
     renderChart: (ctx: CustomChartContext) => Promise<void>;
     /**
-     * required to validate the current chart configuration
+     * Required to validate the current chart configuration
      * that chart user has updated on the chart config editor
      *
      * @version SDK: 0.1 | ThoughtSpot:
@@ -77,7 +87,7 @@ export type CustomChartContextProps = {
     ) => ValidationResponse;
 
     /**
-     * required to validate the custom visual props that
+     * Required to validate the custom visual props that
      * the chart user has updated on the chart settings editor.
      *
      * @param updatedVisualProps
@@ -103,6 +113,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;
@@ -115,13 +127,12 @@ const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
     validateConfig: () => ({ isValid: true }),
     validateVisualProps: () => ({ isValid: true }),
     chartConfigEditorDefinition: undefined,
-    visualPropEditorDefinition: undefined,
 };
 
 export class CustomChartContext {
     /**
-     * Id to map to the parent chart component.
-     * This is used to differentiate between multiple chart componenets rendered on the
+     * ID to map to the parent chart component.
+     * This is used to differentiate between multiple chart components rendered on the
      * parent app Example: liveboards with multiple charts
      *
      * @hidden
@@ -147,6 +158,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
      *
@@ -183,6 +201,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
      *
@@ -194,7 +228,7 @@ export class CustomChartContext {
             ...chartContextProps,
         };
         this.registerEventProcessor();
-        this.hasInitializedPromise = new Promise((resolve) => {
+        this.hasInitializedPromise = new Promise((resolve, reject) => {
             this.triggerInitResolve = resolve;
         });
     }
@@ -231,6 +265,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.
      *
@@ -267,6 +316,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.
 
@@ -277,18 +427,22 @@ export class CustomChartContext {
      */
     public emitEvent<T extends keyof ChartToTSEventsPayloadMap>(
         eventType: T,
-        eventPayload: ChartToTSEventsPayloadMap[T],
+        ...eventPayload: ChartToTSEventsPayloadMap[T]
     ): Promise<any> {
         if (!isInitialized) {
             console.log(
                 'Chart Context: not initialized the context, something went wrong',
             );
-            return Promise.reject();
+            return Promise.reject(new Error('Context not initialized'));
         }
+        const processedPayload = this.eventPayloadPreProcessor(
+            eventType,
+            eventPayload,
+        );
         return PostMessageEventBridge.postMessageToHostApp(
             this.componentId,
             this.hostUrl,
-            eventPayload,
+            processedPayload?.[0] ?? null,
             eventType,
         );
     }
@@ -357,6 +511,13 @@ export class CustomChartContext {
                 this.initializeContext(payload),
         );
 
+        /**
+         * This event is triggered when the TS app initialization is complete.
+         */
+        this.onInternal(TSToChartEvent.InitializeComplete, () =>
+            this.initializationComplete(),
+        );
+
         /**
          * This event is triggered when the TS app asks for validating the updated visual
          * props If {validateVisualProps} is not defined, default is always returned as
@@ -419,10 +580,98 @@ export class CustomChartContext {
         /**
          * This event is triggered when the TS app re-renders the chart
          */
-        this.onInternal(TSToChartEvent.TriggerRenderChart, async () => {
-            await this.chartContextProps.renderChart(this);
+        this.onInternal(TSToChartEvent.TriggerRenderChart, () => {
+            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
 
@@ -481,8 +730,8 @@ export class CustomChartContext {
     };
 
     /**
-     * private function is going to initialize the flow from TS app and send back
-     * the coinfiguration back to ts app to complete the handshake.
+     * Private function is going to initialize the flow from TS app and send back
+     * the configuration back to ts app to complete the handshake.
      *
      * @param  {InitializeEventPayload} payload
      * @returns InitializeEventResponsePayload
@@ -493,14 +742,17 @@ export class CustomChartContext {
         this.componentId = payload.componentId;
         this.hostUrl = payload.hostUrl;
         this.chartModel = payload.chartModel;
+        this.appConfig = payload.appConfig ?? {};
 
+        return this.publishChartContextPropsToHost();
+    };
+
+    private initializationComplete = (): void => {
         // context is now initialized
         isInitialized = true;
 
         // TODO: following can be done behind a promise
         this.triggerInitResolve();
-
-        return this.publishChartContextPropsToHost();
     };
 
     private publishChartContextPropsToHost =
@@ -524,7 +776,6 @@ export class CustomChartContext {
                         this.chartModel,
                     );
             }
-
             return {
                 isConfigValid: isValid,
                 defaultChartConfig,
@@ -547,8 +798,8 @@ export class CustomChartContext {
         let response;
         if (_.isArray(this.eventListeners[event.data.eventType])) {
             this.eventListeners[event.data.eventType].forEach((callback) => {
-                // this is a problem today if we have multipe callbacks
-                // registered. only the last responsed will be sent back to the
+                // this is a problem today if we have multiple callbacks
+                // registered. only the last response will be sent back to the
                 // server
                 response = callback(payload);
             });

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

@@ -3,7 +3,7 @@ import { ChartToTSEvent } from '../types/chart-to-ts-event.types';
 const TIMEOUT_THRESHOLD = 30000; // 30sec
 
 /**
- * method to listen to messages using postMessage from parent.
+ * method to listen to messages using postMessage from the parent.
  *
  * @param  {any} handleMessageEvent
  */
@@ -23,7 +23,7 @@ const destroy = (handleMessageEvent: any) => {
 /**
  * @param  {string} componentId This is required to send the event to the
  *          right chart component in case of multiple components
- * @param  {string} hostUrl The host application url
+ * @param  {string} hostUrl The host application URL
  * @param  {any} eventPayload payload for the event
  * @param  {ChartToTSEvent} eventType type of the event
  * @returns Promise
@@ -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();
+    },
+};