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

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,
@@ -34,9 +43,16 @@ import {
     VisualPropsValidateEventPayload,
 } from '../types/ts-to-chart-event.types';
 import { VisualPropEditorDefinition } from '../types/visual-prop.types';
-import * as PostMessageEventBridge from './post-message-event-bridge';
-
-let isInitialized = false;
+import {
+    globalThis,
+    initMessageListener,
+    postMessageToHostApp,
+} from './post-message-event-bridge';
+
+export type AllowedConfigurations = {
+    allowColumnNumberFormatting: boolean;
+    allowColumnConditionalFormatting: boolean;
+};
 
 export type CustomChartContextProps = {
     /**
@@ -54,7 +70,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
      *
@@ -109,6 +128,9 @@ export type CustomChartContextProps = {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     visualPropEditorDefinition?: VisualPropEditorDefinition;
+
+    // Whether user wants thoughtspot default number and conditional formatting
+    allowedConfigurations?: AllowedConfigurations;
 };
 
 /**
@@ -118,6 +140,10 @@ const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
     validateConfig: () => ({ isValid: true }),
     validateVisualProps: () => ({ isValid: true }),
     chartConfigEditorDefinition: undefined,
+    allowedConfigurations: {
+        allowColumnNumberFormatting: false,
+        allowColumnConditionalFormatting: false,
+    },
 };
 
 export class CustomChartContext {
@@ -132,6 +158,8 @@ export class CustomChartContext {
      */
     private componentId = '';
 
+    private removeListener: () => void = _.noop;
+
     /**
      * host app url
      *
@@ -149,6 +177,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
      *
@@ -185,6 +220,24 @@ 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 = {};
+
+    public containerEl: HTMLElement | null = null;
+
     /**
      * Constructor to only accept context props as payload
      *
@@ -273,8 +326,8 @@ export class CustomChartContext {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     public destroy() {
-        PostMessageEventBridge.destroyMessageListener(this.eventProcessor);
-        isInitialized = false;
+        this.removeListener();
+        globalThis.isInitialized = false;
     }
 
     /**
@@ -284,6 +337,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.
 
@@ -296,16 +450,20 @@ export class CustomChartContext {
         eventType: T,
         ...eventPayload: ChartToTSEventsPayloadMap[T]
     ): Promise<any> {
-        if (!isInitialized) {
+        if (!globalThis.isInitialized) {
             console.log(
                 'Chart Context: not initialized the context, something went wrong',
             );
             return Promise.reject(new Error('Context not initialized'));
         }
-        return PostMessageEventBridge.postMessageToHostApp(
+        const processedPayload = this.eventPayloadPreProcessor(
+            eventType,
+            eventPayload,
+        );
+        return postMessageToHostApp(
             this.componentId,
             this.hostUrl,
-            eventPayload?.[0] ?? null,
+            processedPayload?.[0] ?? null,
             eventType,
         );
     }
@@ -315,13 +473,13 @@ export class CustomChartContext {
      * Process all the functions via the eventProcess callback
      */
     private registerEventProcessor = () => {
-        if (isInitialized) {
+        if (globalThis.isInitialized) {
             console.error(
                 'The context is already initialized. you cannot have multiple contexts',
             );
             throw new Error(ErrorType.MultipleContextsNotSupported);
         }
-        PostMessageEventBridge.initMessageListener(this.eventProcessor);
+        this.removeListener = initMessageListener(this.eventProcessor);
 
         this.registerEvents();
     };
@@ -331,29 +489,13 @@ export class CustomChartContext {
      *
      * @param event : Message Event Object
      */
-    private eventProcessor = (event: MessageEvent) => {
-        if (event.data.source !== 'ts-host-app') {
-            return;
-        }
-
-        console.log(
-            'Chart Context: message received:',
-            event.data.eventType,
-            event.data,
-        );
+    private eventProcessor = (data: any) => {
+        console.log('Chart Context: message received:', data.eventType, data);
 
-        const messageResponse = this.executeEventListenerCBs(event);
+        const messageResponse = this.executeEventListenerCBs(data);
 
         // respond back to parent to confirm/ack the receipt
-        if (!_.isNil(event.ports[0])) {
-            if (!_.isNil(messageResponse)) {
-                event.ports[0].postMessage({
-                    ...(messageResponse as any),
-                });
-            } else {
-                event.ports[0].postMessage({});
-            }
-        }
+        return messageResponse;
     };
 
     /**
@@ -433,6 +575,7 @@ export class CustomChartContext {
                 const queries =
                     this.chartContextProps.getQueriesFromChartConfig(
                         payload.config,
+                        this.chartModel,
                     );
                 return {
                     queries,
@@ -447,6 +590,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
 
@@ -517,13 +748,17 @@ export class CustomChartContext {
         this.componentId = payload.componentId;
         this.hostUrl = payload.hostUrl;
         this.chartModel = payload.chartModel;
+        this.appConfig = payload.appConfig ?? {};
+        this.containerEl = payload.containerElSelector
+            ? document.querySelector(payload.containerElSelector)
+            : null;
 
         return this.publishChartContextPropsToHost();
     };
 
     private initializationComplete = (): void => {
         // context is now initialized
-        isInitialized = true;
+        globalThis.isInitialized = true;
 
         // TODO: following can be done behind a promise
         this.triggerInitResolve();
@@ -557,6 +792,8 @@ export class CustomChartContext {
                     this.chartContextProps.chartConfigEditorDefinition,
                 visualPropEditorDefinition:
                     this.chartContextProps.visualPropEditorDefinition,
+                allowedConfigurations:
+                    this.chartContextProps.allowedConfigurations,
             };
         };
 
@@ -566,12 +803,12 @@ export class CustomChartContext {
      * @param event : Message Event Object
      * @returns response to be sent back to the message sender (host)
      */
-    private executeEventListenerCBs = (event: MessageEvent): any => {
+    private executeEventListenerCBs = (data: any): any => {
         // do basic sanity
-        const payload = event.data.payload;
+        const payload = data.payload;
         let response;
-        if (_.isArray(this.eventListeners[event.data.eventType])) {
-            this.eventListeners[event.data.eventType].forEach((callback) => {
+        if (_.isArray(this.eventListeners[data.eventType])) {
+            this.eventListeners[data.eventType].forEach((callback) => {
                 // this is a problem today if we have multiple callbacks
                 // registered. only the last response will be sent back to the
                 // server
@@ -580,15 +817,15 @@ export class CustomChartContext {
         } else {
             response = {
                 hasError: true,
-                error: `Event type not recognised or processed: ${event.data.eventType}`,
+                error: `Event type not recognised or processed: ${data.eventType}`,
             };
         }
 
         console.log(
             'ChartContext: Response:',
-            event.data.eventType,
+            data.eventType,
             response,
-            this.eventListeners[event.data.eventType]?.length,
+            this.eventListeners[data.eventType]?.length,
         );
         return response;
     };

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

@@ -66,7 +66,6 @@ describe('postMessageToHostApp', () => {
         );
 
         // Verify that the MessageChannel was used correctly
-        expect(channel.port1.close).toHaveBeenCalled();
         expect(messageChannelMock.MessageChannel).toHaveBeenCalled();
     });
 
@@ -121,8 +120,6 @@ describe('postMessageToHostApp', () => {
             [channel.port2],
         );
 
-        // Verify that the MessageChannel was used correctly
-        expect(channel.port1.close).toHaveBeenCalled();
         expect(messageChannelMock.MessageChannel).toHaveBeenCalled();
     });
 

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

@@ -1,23 +1,23 @@
+import { onMessage, sendMessage } from 'promise-postmessage';
 import { ChartToTSEvent } from '../types/chart-to-ts-event.types';
+import { timeout } from './util';
 
 const TIMEOUT_THRESHOLD = 30000; // 30sec
 
-/**
- * method to listen to messages using postMessage from the parent.
- *
- * @param  {any} handleMessageEvent
- */
-const init = (handleMessageEvent: any) => {
-    window.addEventListener('message', handleMessageEvent);
-};
+const elSelector = new URL(import.meta.url).searchParams.get('elSelector');
+const target =
+    (elSelector && (document.querySelector(elSelector) as HTMLElement)) ||
+    window.parent;
+
+const globalThis = (target instanceof Window ? window : target) as any;
 
 /**
- * stop listening to the messages
+ * method to listen to messages using postMessage from the parent.
  *
  * @param  {any} handleMessageEvent
  */
-const destroy = (handleMessageEvent: any) => {
-    window.removeEventListener('message', handleMessageEvent);
+const init = (handleMessageEvent: (data: any) => Promise<any> | any) => {
+    return onMessage(handleMessageEvent, target, 'child');
 };
 
 /**
@@ -28,61 +28,35 @@ const destroy = (handleMessageEvent: any) => {
  * @param  {ChartToTSEvent} eventType type of the event
  * @returns Promise
  */
-const postMessageToHostApp = (
+const postMessageToHostApp = async (
     componentId: string,
     hostUrl: string,
     eventPayload: any,
     eventType: ChartToTSEvent,
-): Promise<any> =>
-    new Promise((resolve, reject) => {
-        const channel = new MessageChannel();
-        channel.port1.onmessage = (res: any) => {
-            channel.port1.close();
-            const { hasError, error } = res.data;
-            if (hasError) {
-                console.log('ChartContext: message failure:', res.data);
-                reject(error);
-            } else {
-                console.log('ChartContext: message success:', res.data);
-                resolve(res.data);
-            }
-        };
-
-        setTimeout(() => {
-            reject(
-                new Error(
-                    `ChartContext: postMessage operation timed out. ${eventType}`,
-                    eventPayload,
-                ),
-            );
-        }, TIMEOUT_THRESHOLD);
-
-        try {
-            window.parent.window.postMessage(
-                {
-                    componentId,
-                    payload: {
-                        ...eventPayload,
-                    },
-                    eventType,
-                    source: 'ts-chart-sdk',
+): Promise<any> => {
+    const resp = await timeout(
+        sendMessage(
+            target,
+            {
+                componentId,
+                payload: {
+                    ...eventPayload,
                 },
-                hostUrl,
-                [channel.port2],
-            );
-        } catch (err) {
-            console.error(
-                'ChartContext: error in emitting event:',
-                err,
                 eventType,
-                eventPayload,
-            );
-            reject(err);
-        }
-    });
-
-export {
-    init as initMessageListener,
-    destroy as destroyMessageListener,
-    postMessageToHostApp,
+                source: 'ts-chart-sdk',
+            },
+            {
+                origin: hostUrl,
+                endpoint: 'child',
+            },
+        ),
+        TIMEOUT_THRESHOLD,
+        'ChartContext: postMessage operation timed out.',
+    );
+    if (resp.hasError) {
+        throw new Error(resp.error);
+    }
+    return resp;
 };
+
+export { init as initMessageListener, postMessageToHostApp, globalThis };

package/src/main/util.ts

@@ -0,0 +1,11 @@
+export function timeout(promise: Promise<any>, ms: number, message?: string) {
+    return Promise.race([
+        promise,
+        new Promise((resolve, reject) => {
+            setTimeout(
+                () => reject(new Error(message || 'Operation timed out.')),
+                ms,
+            );
+        }),
+    ]);
+}