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

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

@@ -5,7 +5,7 @@
  */
 
 import { mockInitializeContextPayload } from '../test/test-utils';
-import { ErrorType } from '../types/chart-to-ts-event.types';
+import { ChartToTSEvent, ErrorType } from '../types/chart-to-ts-event.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
 import { CustomChartContext, getChartContext } from './custom-chart-context';
 import * as PostMessageEventBridge from './post-message-event-bridge';
@@ -17,7 +17,7 @@ jest.spyOn(console, 'log').mockImplementation(() => {
 });
 
 describe('CustomChartContext', () => {
-    let eventProcesor: any;
+    let eventProcessor: any;
 
     let getDefaultChartConfig = jest.fn();
     let getQueriesFromChartConfig = jest.fn();
@@ -37,7 +37,11 @@ describe('CustomChartContext', () => {
         renderChart = jest.fn();
 
         mockInitMessage.mockImplementation((fn: any) => {
-            eventProcesor = fn;
+            eventProcessor = fn;
+        });
+
+        mockPostMessageToHost.mockImplementation(() => {
+            return global.Promise.resolve();
         });
     });
 
@@ -53,9 +57,9 @@ describe('CustomChartContext', () => {
 
         afterEach(() => {
             // Destroy the chart context after each test
-            customChartContext.destroy();
             jest.resetAllMocks();
-            eventProcesor = null;
+            customChartContext.destroy();
+            eventProcessor = null;
         });
 
         test('should wait till the parent calls initialize', async () => {
@@ -81,7 +85,7 @@ describe('CustomChartContext', () => {
 
             // Check that the hasInitializedPromise has resolved
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.Initialize,
@@ -90,8 +94,19 @@ describe('CustomChartContext', () => {
                 ports: [{ postMessage: mockPostMessage }],
             });
 
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
             await expect(promise).resolves.toBeUndefined();
-            expect(mockPostMessage).toHaveBeenCalledWith({
+            expect(mockPostMessage).toHaveBeenCalledTimes(2);
+
+            expect(mockPostMessage.mock.calls[0][0]).toEqual({
                 isConfigValid: false,
                 defaultChartConfig: undefined,
                 chartConfigEditorDefinition: undefined,
@@ -107,7 +122,7 @@ describe('CustomChartContext', () => {
 
             // Check that the hasInitializedPromise has resolved
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.Initialize,
@@ -116,6 +131,15 @@ describe('CustomChartContext', () => {
                 ports: [{ postMessage: mockPostMessage }],
             });
 
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
             await expect(promise).resolves.toBeUndefined();
 
             let error;
@@ -156,7 +180,7 @@ describe('CustomChartContext', () => {
             // Destroy the chart context after each test
             jest.resetAllMocks();
             customChartContext.destroy();
-            eventProcesor = null;
+            eventProcessor = null;
         });
 
         test('should not trigger post message if host is not accurate', () => {
@@ -164,7 +188,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger for ChartConfigValidate
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.ChartConfigValidate,
@@ -182,7 +206,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger for ChartConfigValidate
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.ChartConfigValidate,
@@ -197,7 +221,7 @@ describe('CustomChartContext', () => {
             mockPostMessage.mockReset();
 
             // mock the event trigger for VisualPropsValidate
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.VisualPropsValidate,
@@ -213,7 +237,7 @@ describe('CustomChartContext', () => {
             mockPostMessage.mockReset();
 
             // mock the event trigger for TriggerRenderChart
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.TriggerRenderChart,
@@ -228,7 +252,7 @@ describe('CustomChartContext', () => {
             mockPostMessage.mockReset();
 
             // mock the event trigger for getQueriesFromChartConfig
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.GetDataQuery,
@@ -246,7 +270,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger for DataUpdate
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: {
                         data: 'random data',
@@ -264,7 +288,7 @@ describe('CustomChartContext', () => {
             mockPostMessage.mockReset();
 
             // mock the event trigger for VisualPropsValidate
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: {
                         chartModel: {
@@ -288,8 +312,8 @@ describe('CustomChartContext', () => {
 
             mockPostMessage.mockReset();
 
-            // mock the event trigger for TriggerRenderChart
-            eventProcesor({
+            // mock the event trigger for VisualPropsUpdate
+            eventProcessor({
                 data: {
                     payload: {
                         visualProps: 'random data',
@@ -319,7 +343,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TEST_EVENT_TYPE,
@@ -339,7 +363,7 @@ describe('CustomChartContext', () => {
 
             // mock the event trigger
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TEST_EVENT_TYPE,
@@ -358,6 +382,7 @@ describe('CustomChartContext', () => {
 
     describe('emitEvent', () => {
         let customChartContext: CustomChartContext;
+
         beforeEach(() => {
             customChartContext = new CustomChartContext({
                 getDefaultChartConfig,
@@ -367,9 +392,9 @@ describe('CustomChartContext', () => {
         });
         afterEach(() => {
             // Destroy the chart context after each test
-            jest.resetAllMocks();
             customChartContext.destroy();
-            eventProcesor = null;
+            eventProcessor = null;
+            jest.resetAllMocks();
         });
 
         test('should reject the promise if the chart context is not initialized', async () => {
@@ -384,13 +409,13 @@ describe('CustomChartContext', () => {
 
             // Check that the result is defined
             expect(mockPostMessageToHost).not.toHaveBeenCalled();
-            await expect(result).rejects.not.toBeDefined();
+            await expect(result).rejects.toBeDefined();
         });
 
         test('should resolve the promise if the chart context is initialized', async () => {
             // Check that the hasInitializedPromise has resolved
             const mockPostMessage = jest.fn();
-            eventProcesor({
+            eventProcessor({
                 data: {
                     payload: mockInitializeContextPayload,
                     eventType: TSToChartEvent.Initialize,
@@ -399,6 +424,19 @@ describe('CustomChartContext', () => {
                 ports: [{ postMessage: mockPostMessage }],
             });
 
+            eventProcessor({
+                data: {
+                    payload: {},
+                    eventType: TSToChartEvent.InitializeComplete,
+                    source: 'ts-host-app',
+                },
+                ports: [{ postMessage: mockPostMessage }],
+            });
+
+            const promise = customChartContext.initialize();
+            await expect(promise).resolves.toBeUndefined();
+            expect(mockPostMessage).toHaveBeenCalledTimes(2);
+
             // define mock response for the postMessage response promise
             let resolve: any;
             mockPostMessageToHost.mockImplementation(
@@ -417,8 +455,9 @@ describe('CustomChartContext', () => {
                 TEST_EVENT_TYPE,
                 testPayload,
             );
-            global.setTimeout(() => resolve('helloworld'), 3000);
+            global.setTimeout(() => resolve('helloworld'), 1000);
 
+            await expect(result).resolves.toEqual('helloworld');
             // Check that the result is defined
             expect(mockPostMessageToHost).toHaveBeenCalledWith(
                 mockInitializeContextPayload.componentId,
@@ -426,7 +465,29 @@ describe('CustomChartContext', () => {
                 testPayload,
                 TEST_EVENT_TYPE,
             );
-            await expect(result).resolves.toBe('helloworld');
+
+            // test for null payload
+            // Call the emitEvent function and wait for it to resolve
+            mockPostMessageToHost.mockReset();
+            mockPostMessageToHost.mockImplementation(
+                () =>
+                    new global.Promise<any>((res) => {
+                        resolve = res;
+                    }),
+            );
+            const result2 = customChartContext.emitEvent(
+                ChartToTSEvent.RenderStart,
+            );
+            global.setTimeout(() => resolve('helloworld'), 1000);
+
+            await expect(result2).resolves.toEqual('helloworld');
+            // Check that the result is defined
+            expect(mockPostMessageToHost).toHaveBeenCalledWith(
+                mockInitializeContextPayload.componentId,
+                mockInitializeContextPayload.hostUrl,
+                null,
+                ChartToTSEvent.RenderStart,
+            );
         });
     });
 });

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

@@ -7,6 +7,7 @@
  */
 import _ from 'lodash';
 import {
+    ChartToTSEvent,
     ChartToTSEventsPayloadMap,
     ErrorType,
 } from '../types/chart-to-ts-event.types';
@@ -63,7 +64,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 +78,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
@@ -120,8 +121,8 @@ const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
 
 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
@@ -194,7 +195,7 @@ export class CustomChartContext {
             ...chartContextProps,
         };
         this.registerEventProcessor();
-        this.hasInitializedPromise = new Promise((resolve) => {
+        this.hasInitializedPromise = new Promise((resolve, reject) => {
             this.triggerInitResolve = resolve;
         });
     }
@@ -277,18 +278,18 @@ 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'));
         }
         return PostMessageEventBridge.postMessageToHostApp(
             this.componentId,
             this.hostUrl,
-            eventPayload,
+            eventPayload?.[0] ?? null,
             eventType,
         );
     }
@@ -357,6 +358,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,8 +427,8 @@ 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);
         });
 
         // Register External Events
@@ -481,8 +489,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
@@ -494,13 +502,15 @@ export class CustomChartContext {
         this.hostUrl = payload.hostUrl;
         this.chartModel = payload.chartModel;
 
+        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 =
@@ -547,8 +557,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.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

package/src/types/answer-column.types.ts

@@ -72,14 +72,14 @@ export enum CurrencyFormatType {
 }
 
 /**
- * Currency Format for the columm defined in the worksheet
+ * Currency format for the column defined in the worksheet
  *
  * @version SDK: 0.1 | ThoughtSpot:
  */
 export interface CurrencyFormat {
     type: CurrencyFormatType;
     /**
-     * column id of the column in case of currency formatted by a column
+     * column ID of the column in case of currency formatted by a column
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -118,13 +118,13 @@ export interface ColumnFormat {
 
 export interface ChartColumn {
     /**
-     * Column Id
+     * Column ID
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
     id: string;
     /**
-     * Column Name
+     * Column name
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
@@ -137,7 +137,7 @@ export interface ChartColumn {
     type: ColumnType;
 
     /**
-     * Type of the time based aggregation
+     * Type of the time-based aggregation
      * when the column data is of type Date, Datetime, Time
      *
      * @version SDK: 0.1 | ThoughtSpot:

package/src/types/chart-to-ts-event.types.ts

@@ -31,7 +31,7 @@ export enum ChartToTSEvent {
 }
 
 /**
- * This map defines the event type and its corresponding payload needed by event
+ * This map defines the event type and its corresponding payload needed by the event
  *
  * @version SDK: 0.1 | ThoughtSpot:
  * @group Chart to ThoughtSpot Events
@@ -42,38 +42,38 @@ export interface ChartToTSEventsPayloadMap {
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.OpenContextMenu]: OpenContextMenuEventPayload;
+    [ChartToTSEvent.OpenContextMenu]: [OpenContextMenuEventPayload];
     /**
      * Trigger to close Context Menu
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.CloseContextMenu]: null;
+    [ChartToTSEvent.CloseContextMenu]: [];
 
     /**
      * Trigger to notify the render start
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.RenderStart]: null;
+    [ChartToTSEvent.RenderStart]: [];
     /**
      * Trigger to notify the render completion
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.RenderComplete]: null;
+    [ChartToTSEvent.RenderComplete]: [];
     /**
      * Trigger to notify the render error
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.RenderError]: RenderErrorEventPayload;
+    [ChartToTSEvent.RenderError]: [RenderErrorEventPayload];
     /**
      * Trigger to update the visual props
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    [ChartToTSEvent.UpdateVisualProps]: UpdateVisualPropsEventPayload;
+    [ChartToTSEvent.UpdateVisualProps]: [UpdateVisualPropsEventPayload];
 }
 
 /**
@@ -87,10 +87,10 @@ type UpdateVisualPropsEventPayload = VisualProps;
  */
 // start - open context menu payload
 export interface PointVal {
-    // column id of the column associated with the value
+    // Column ID of the column associated with the value
     columnId: string;
-    // value of the point clicked on, mostly makes sense for attributes.
-    // this can be an array of values as well.
+    // Value of the point clicked on, mostly makes sense for attributes.
+    // This can be an array of values as well.
     value: any;
 }
 /**
@@ -106,16 +106,16 @@ export interface Point {
  * @group Chart to ThoughtSpot Events / Context Menu
  */
 export interface CustomAction {
-    id: string; // id of the action user defined
-    label: string; // developer should i18n this
-    icon: string; // icon string to show on the context/axis menu
+    id: string; // ID of the user-defined action
+    label: string; // Developer should i18n this
+    icon?: string; // Icon string to show on the context/axis menu
 
     /**
-     * This function will need to have a defined set of args.
-     * For e.g., pointClick Event, point details and chart model in case on context menu
-     * For axis menu, it would be different.
+     * This function will need to have a defined set of arguments.
+     * For example, pointClick Event, point details and chart model in case of context menu
+     * For Axis menu, it would be different.
      *
-     * Callback will be triggered via postMessage api contract.
+     * Callback will be triggered via postMessage API contract.
      */
     onClick: (...args: any[]) => void;
 }
@@ -125,17 +125,7 @@ export interface CustomAction {
  * @group Chart to ThoughtSpot Events
  */
 export interface OpenContextMenuEventPayload {
-    event: Pick<
-        PointerEvent,
-        | 'x'
-        | 'y'
-        | 'clientX'
-        | 'clientY'
-        | 'pageX'
-        | 'pageY'
-        | 'screenX'
-        | 'screenY'
-    >;
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>;
     clickedPoint: Point;
     selectedPoints?: Point[];
     customActions?: CustomAction[];