@thoughtspot/ts-chart-sdk 0.0.1-alpha.9 → 0.0.2-alpha.2

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

@@ -43,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 = {
     /**
@@ -63,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
      *
@@ -118,6 +128,9 @@ export type CustomChartContextProps = {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     visualPropEditorDefinition?: VisualPropEditorDefinition;
+
+    // Whether user wants thoughtspot default number and conditional formatting
+    allowedConfigurations?: AllowedConfigurations;
 };
 
 /**
@@ -127,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 {
@@ -141,6 +158,8 @@ export class CustomChartContext {
      */
     private componentId = '';
 
+    private removeListener: () => void = _.noop;
+
     /**
      * host app url
      *
@@ -217,6 +236,8 @@ export class CustomChartContext {
      */
     private axisMenuActionHandler: AxisMenuActionHandler = {};
 
+    public containerEl: HTMLElement | null = null;
+
     /**
      * Constructor to only accept context props as payload
      *
@@ -305,8 +326,8 @@ export class CustomChartContext {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     public destroy() {
-        PostMessageEventBridge.destroyMessageListener(this.eventProcessor);
-        isInitialized = false;
+        this.removeListener();
+        globalThis.isInitialized = false;
     }
 
     /**
@@ -429,7 +450,7 @@ 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',
             );
@@ -439,7 +460,7 @@ export class CustomChartContext {
             eventType,
             eventPayload,
         );
-        return PostMessageEventBridge.postMessageToHostApp(
+        return postMessageToHostApp(
             this.componentId,
             this.hostUrl,
             processedPayload?.[0] ?? null,
@@ -452,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();
     };
@@ -468,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;
     };
 
     /**
@@ -570,6 +575,7 @@ export class CustomChartContext {
                 const queries =
                     this.chartContextProps.getQueriesFromChartConfig(
                         payload.config,
+                        this.chartModel,
                     );
                 return {
                     queries,
@@ -743,13 +749,16 @@ export class CustomChartContext {
         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();
@@ -783,6 +792,8 @@ export class CustomChartContext {
                     this.chartContextProps.chartConfigEditorDefinition,
                 visualPropEditorDefinition:
                     this.chartContextProps.visualPropEditorDefinition,
+                allowedConfigurations:
+                    this.chartContextProps.allowedConfigurations,
             };
         };
 
@@ -792,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
@@ -806,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 === window.parent ? 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,
+            );
+        }),
+    ]);
+}