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

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

@@ -21,10 +21,14 @@ import {
     AppConfig,
     ChartConfig,
     ChartModel,
+    SuccessValidationResponse,
     ValidationResponse,
     VisualProps,
 } from '../types/common.types';
-import { ChartConfigEditorDefinition } from '../types/configurator.types';
+import {
+    ChartConfigEditorDefinition,
+    ConfigEditorDefinitionSetter,
+} from '../types/configurator.types';
 import {
     AxisMenuCustomActionPayload,
     ChartConfigValidateEventPayload,
@@ -42,10 +46,21 @@ import {
     VisualPropsUpdateEventPayload,
     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 {
+    VisualEditorDefinitionSetter,
+    VisualPropEditorDefinition,
+} from '../types/visual-prop.types';
+import {
+    globalThis,
+    initMessageListener,
+    postMessageToHostApp,
+} from './post-message-event-bridge';
+
+export type AllowedConfigurations = {
+    allowColumnNumberFormatting: boolean;
+    allowColumnConditionalFormatting: boolean;
+    allowMeasureNamesAndValues: boolean;
+};
 
 export type CustomChartContextProps = {
     /**
@@ -63,7 +78,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
      *
@@ -106,7 +124,9 @@ export type CustomChartContextProps = {
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
+    chartConfigEditorDefinition?:
+        | ConfigEditorDefinitionSetter
+        | ChartConfigEditorDefinition[];
 
     /**
      * Definition to help edit/customize the visual properties from chart settings editor
@@ -117,9 +137,18 @@ export type CustomChartContextProps = {
      * @returns {@link VisualPropEditorDefinition}
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
+    visualPropEditorDefinition?:
+        | VisualEditorDefinitionSetter
+        | VisualPropEditorDefinition;
+
+    // Whether user wants thoughtspot default number and conditional formatting
+    allowedConfigurations?: AllowedConfigurations;
 };
 
+export type ValidationFunctions =
+    | CustomChartContextProps['validateVisualProps']
+    | CustomChartContextProps['validateConfig'];
+
 /**
  * Default configuration options for all the chart context properties
  */
@@ -127,6 +156,11 @@ const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
     validateConfig: () => ({ isValid: true }),
     validateVisualProps: () => ({ isValid: true }),
     chartConfigEditorDefinition: undefined,
+    allowedConfigurations: {
+        allowColumnNumberFormatting: false,
+        allowColumnConditionalFormatting: false,
+        allowMeasureNamesAndValues: false,
+    },
 };
 
 export class CustomChartContext {
@@ -141,6 +175,8 @@ export class CustomChartContext {
      */
     private componentId = '';
 
+    private removeListener: () => void = _.noop;
+
     /**
      * host app url
      *
@@ -217,6 +253,8 @@ export class CustomChartContext {
      */
     private axisMenuActionHandler: AxisMenuActionHandler = {};
 
+    public containerEl: HTMLElement | null = null;
+
     /**
      * Constructor to only accept context props as payload
      *
@@ -305,8 +343,8 @@ export class CustomChartContext {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     public destroy() {
-        PostMessageEventBridge.destroyMessageListener(this.eventProcessor);
-        isInitialized = false;
+        this.removeListener();
+        globalThis.isInitialized = false;
     }
 
     /**
@@ -358,6 +396,48 @@ export class CustomChartContext {
         return processedPayload;
     }
 
+    /**
+     * Funtions return the chart config editor definition
+     * @param {ChartConfig[]} currentChartConfig
+     * @param {VisualProps}
+     * @returns {ChartConfigEditorDefinition[]}
+     */
+    private getChartConfigEditorDefinition = (
+        currentState: Partial<ChartModel> = {},
+    ) => {
+        if (_.isFunction(this.chartContextProps.chartConfigEditorDefinition)) {
+            return this.chartContextProps.chartConfigEditorDefinition(
+                {
+                    ...this.chartModel,
+                    ...currentState,
+                },
+                this,
+            );
+        }
+        return this.chartContextProps.chartConfigEditorDefinition;
+    };
+
+    /**
+     * Funtions returns the visual prop editor definition
+     * @param {ChartConfig[]} currentChartConfig
+     * @param {VisualProps}
+     * @returns {VisualPropEditorDefinition}
+     */
+    private getVisualPropEditorDefinition = (
+        currentState: Partial<ChartModel> = {},
+    ) => {
+        if (_.isFunction(this.chartContextProps.visualPropEditorDefinition)) {
+            return this.chartContextProps.visualPropEditorDefinition(
+                {
+                    ...this.chartModel,
+                    ...currentState,
+                },
+                this,
+            );
+        }
+        return this.chartContextProps.visualPropEditorDefinition;
+    };
+
     /**
      * Function to store the axis menu custom action callback mapped with action id
      * @param  {[OpenAxisMenuEventPayload]} eventPayload Event payload bound
@@ -417,6 +497,24 @@ export class CustomChartContext {
         }
     }
 
+    private validationsResponseProcessor(
+        currentValidationState: Partial<ChartModel>,
+        validationResponse: ValidationResponse,
+    ) {
+        const visualPropEditorDefinition = this.getVisualPropEditorDefinition(
+            currentValidationState,
+        );
+        const chartConfigEditorDefinition = this.getChartConfigEditorDefinition(
+            currentValidationState,
+        );
+
+        return {
+            ...validationResponse,
+            visualPropEditorDefinition,
+            chartConfigEditorDefinition,
+        };
+    }
+
     /**
      * Function to emit Chart to TS Events to the TS application.
 
@@ -429,7 +527,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 +537,7 @@ export class CustomChartContext {
             eventType,
             eventPayload,
         );
-        return PostMessageEventBridge.postMessageToHostApp(
+        return postMessageToHostApp(
             this.componentId,
             this.hostUrl,
             processedPayload?.[0] ?? null,
@@ -452,13 +550,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 +566,13 @@ export class CustomChartContext {
      *
      * @param event : Message Event Object
      */
-    private eventProcessor = (event: MessageEvent) => {
-        if (event.data.source !== 'ts-host-app') {
-            return;
-        }
+    private eventProcessor = (data: any) => {
+        console.log('Chart Context: message received:', data.eventType, data);
 
-        console.log(
-            'Chart Context: message received:',
-            event.data.eventType,
-            event.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;
     };
 
     /**
@@ -525,13 +607,27 @@ export class CustomChartContext {
          */
         this.onInternal(
             TSToChartEvent.VisualPropsValidate,
-            (payload: VisualPropsValidateEventPayload): ValidationResponse => {
+            (
+                payload: VisualPropsValidateEventPayload,
+            ):
+                | (ValidationResponse & SuccessValidationResponse)
+                | ValidationResponse => {
                 if (this.chartContextProps.validateVisualProps) {
                     const validationResponse =
                         this.chartContextProps.validateVisualProps(
                             payload.visualProps,
                             this.chartModel,
                         );
+                    if (validationResponse.isValid) {
+                        const currentVisualState = {
+                            visualProps: payload.visualProps,
+                        };
+
+                        return this.validationsResponseProcessor(
+                            currentVisualState,
+                            validationResponse,
+                        );
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -546,13 +642,29 @@ export class CustomChartContext {
          */
         this.onInternal(
             TSToChartEvent.ChartConfigValidate,
-            (payload: ChartConfigValidateEventPayload): ValidationResponse => {
+            (
+                payload: ChartConfigValidateEventPayload,
+            ):
+                | (ValidationResponse & SuccessValidationResponse)
+                | ValidationResponse => {
                 if (this.chartContextProps.validateConfig) {
                     const validationResponse =
                         this.chartContextProps.validateConfig(
                             payload.chartConfig,
                             this.chartModel,
                         );
+                    if (validationResponse.isValid) {
+                        const currentConfigState = {
+                            config: {
+                                ...this.chartModel.config,
+                                chartConfig: payload.chartConfig,
+                            },
+                        };
+                        return this.validationsResponseProcessor(
+                            currentConfigState,
+                            validationResponse,
+                        );
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -570,6 +682,7 @@ export class CustomChartContext {
                 const queries =
                     this.chartContextProps.getQueriesFromChartConfig(
                         payload.config,
+                        this.chartModel,
                     );
                 return {
                     queries,
@@ -743,13 +856,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();
@@ -780,9 +896,11 @@ export class CustomChartContext {
                 isConfigValid: isValid,
                 defaultChartConfig,
                 chartConfigEditorDefinition:
-                    this.chartContextProps.chartConfigEditorDefinition,
+                    this.getChartConfigEditorDefinition(),
                 visualPropEditorDefinition:
-                    this.chartContextProps.visualPropEditorDefinition,
+                    this.getVisualPropEditorDefinition(),
+                allowedConfigurations:
+                    this.chartContextProps.allowedConfigurations,
             };
         };
 
@@ -792,12 +910,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 +924,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,
+            );
+        }),
+    ]);
+}