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

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

@@ -0,0 +1,215 @@
+/**
+ *  post message event bridge spec file
+ *
+ *  @author Chetan Agrawal <chetan.agrawal@thoughtspot.com>
+ */
+import _ from 'lodash';
+import { postMessageToHostApp } from './post-message-event-bridge';
+
+const TIMEOUT_THRESHOLD = 30000;
+
+describe('postMessageToHostApp', () => {
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    test('should resolve the promise with null when successful', async () => {
+        // Mock the necessary variables and functions
+        const componentId = '123';
+        const hostUrl = 'https://example.com';
+        const eventPayload = { foo: 'bar' };
+        const eventType = 'SOME_EVENT';
+
+        // mockpost Message
+        const mockPostMessage = jest.spyOn(global.parent.window, 'postMessage');
+        // mock Message Channel
+        const channel = {
+            port1: { onmessage: null, close: jest.fn() },
+            port2: {},
+        };
+        const messageChannelMock = { MessageChannel: jest.fn(() => channel) };
+        global.MessageChannel = messageChannelMock.MessageChannel as any;
+
+        // Call the function
+        const promise = postMessageToHostApp(
+            componentId,
+            hostUrl,
+            eventPayload,
+            eventType as any,
+        );
+
+        // Simulate a successful response
+        const response = { data: { hasError: false } };
+        if (_.isFunction(channel.port1.onmessage)) {
+            (channel.port1.onmessage as any)(response);
+        } else {
+            // on message should have been initialized
+            throw new Error('on message should have been initialized');
+        }
+
+        // Wait for the promise to resolve
+        await expect(promise).resolves.toBeNull();
+
+        // Verify that the postMessage function was called with the correct
+        // arguments
+        expect(mockPostMessage).toHaveBeenCalledWith(
+            {
+                componentId,
+                payload: eventPayload,
+                eventType,
+                source: 'ts-chart-sdk',
+            },
+            hostUrl,
+            [channel.port2],
+        );
+
+        // Verify that the MessageChannel was used correctly
+        expect(channel.port1.close).toHaveBeenCalled();
+        expect(messageChannelMock.MessageChannel).toHaveBeenCalled();
+    });
+
+    test('should reject the promise with an error message when there is an error', async () => {
+        // Mock the necessary variables and functions
+        const componentId = '123';
+        const hostUrl = 'https://example.com';
+        const eventPayload = { foo: 'bar' };
+        const eventType = 'SOME_EVENT';
+
+        // mockpost Message
+        const mockPostMessage = jest.spyOn(global.parent.window, 'postMessage');
+        // mock Message Channel
+        const channel = {
+            port1: { onmessage: null, close: jest.fn() },
+            port2: {},
+        };
+        const messageChannelMock = { MessageChannel: jest.fn(() => channel) };
+        global.MessageChannel = messageChannelMock.MessageChannel as any;
+
+        // Call the function
+        const promise = postMessageToHostApp(
+            componentId,
+            hostUrl,
+            eventPayload,
+            eventType as any,
+        );
+
+        // Simulate an error response
+        const error = new Error('Some error');
+        const response = { data: { hasError: true, error } };
+        if (_.isFunction(channel.port1.onmessage)) {
+            (channel.port1.onmessage as any)(response);
+        } else {
+            // on message should have been initialized
+            throw new Error('on message should have been initialized');
+        }
+
+        // Wait for the promise to reject
+        await expect(promise).rejects.toThrow('Some error');
+
+        // Verify that the postMessage function was called with the correct
+        // arguments
+        expect(mockPostMessage).toHaveBeenCalledWith(
+            {
+                componentId,
+                payload: eventPayload,
+                eventType,
+                source: 'ts-chart-sdk',
+            },
+            hostUrl,
+            [channel.port2],
+        );
+
+        // Verify that the MessageChannel was used correctly
+        expect(channel.port1.close).toHaveBeenCalled();
+        expect(messageChannelMock.MessageChannel).toHaveBeenCalled();
+    });
+
+    test(
+        'should reject the promise after a timeout',
+        async () => {
+            const componentId = 'some-component-id';
+            const hostUrl = 'https://some-host-url.com';
+            const eventPayload = { someKey: 'someValue' };
+            const eventType = 'some-event-type';
+
+            // mockpost Message
+            const mockPostMessage = jest.spyOn(
+                global.parent.window,
+                'postMessage',
+            );
+            // mock Message Channel
+            const channel = {
+                port1: { onmessage: null, close: jest.fn() },
+                port2: {},
+            };
+            const messageChannelMock = {
+                MessageChannel: jest.fn(() => channel),
+            };
+            global.MessageChannel = messageChannelMock.MessageChannel as any;
+
+            const promise = postMessageToHostApp(
+                componentId,
+                hostUrl,
+                eventPayload,
+                eventType as any,
+            );
+
+            expect(mockPostMessage).toHaveBeenCalledWith(
+                {
+                    componentId,
+                    payload: eventPayload,
+                    eventType,
+                    source: 'ts-chart-sdk',
+                },
+                hostUrl,
+                expect.any(Array),
+            );
+
+            await expect(promise).rejects.toThrow(
+                'ChartContext: postMessage operation timed out.',
+            );
+        },
+        TIMEOUT_THRESHOLD + 1000,
+    ); // added extra timeout for this test
+
+    test('should reject the promise if some error in postMessage', async () => {
+        const componentId = 'some-component-id';
+        const hostUrl = 'https://some-host-url.com';
+        const eventPayload = { someKey: 'someValue' };
+        const eventType = 'some-event-type';
+
+        // mockpost Message
+        const mockPostMessage = jest.spyOn(global.parent.window, 'postMessage');
+        mockPostMessage.mockImplementation(() => {
+            throw new Error('Some postMessage error');
+        });
+        // mock Message Channel
+        const channel = {
+            port1: { onmessage: null, close: jest.fn() },
+            port2: {},
+        };
+        const messageChannelMock = { MessageChannel: jest.fn(() => channel) };
+        global.MessageChannel = messageChannelMock.MessageChannel as any;
+
+        const promise = postMessageToHostApp(
+            componentId,
+            hostUrl,
+            eventPayload,
+            eventType as any,
+        );
+
+        // Wait for the promise to reject
+        await expect(promise).rejects.toThrow('Some postMessage error');
+
+        expect(mockPostMessage).toHaveBeenCalledWith(
+            {
+                componentId,
+                payload: eventPayload,
+                eventType,
+                source: 'ts-chart-sdk',
+            },
+            hostUrl,
+            expect.any(Array),
+        );
+    });
+});

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

@@ -0,0 +1,88 @@
+import { ChartToTSEvent } from '../types/chart-to-ts-event.types';
+
+const TIMEOUT_THRESHOLD = 30000; // 30sec
+
+/**
+ * method to listen to messages using postMessage from parent.
+ *
+ * @param  {any} handleMessageEvent
+ */
+const init = (handleMessageEvent: any) => {
+    window.addEventListener('message', handleMessageEvent);
+};
+
+/**
+ * stop listening to the messages
+ *
+ * @param  {any} handleMessageEvent
+ */
+const destroy = (handleMessageEvent: any) => {
+    window.removeEventListener('message', handleMessageEvent);
+};
+
+/**
+ * @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  {any} eventPayload payload for the event
+ * @param  {ChartToTSEvent} eventType type of the event
+ * @returns Promise
+ */
+const postMessageToHostApp = (
+    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(null);
+            }
+        };
+
+        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',
+                },
+                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,
+};

package/src/test/test-utils.ts

@@ -0,0 +1,13 @@
+import { ChartModel } from '../types/common.types';
+
+const mockChartModel = {
+    config: {
+        chartConfig: {},
+    },
+} as ChartModel;
+
+export const mockInitializeContextPayload = {
+    componentId: 'COMPONENT_ID',
+    hostUrl: 'https://some.chart.app',
+    chartModel: mockChartModel,
+};

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

@@ -0,0 +1,174 @@
+export enum ColumnType {
+    UNKNOWN,
+    MEASURE,
+    ATTRIBUTE,
+}
+
+/**
+ * Defines type of the data associated with a column
+ */
+export enum DataType {
+    UNKNOWN,
+    // Boolean data type
+    BOOL,
+    // string data types
+    CHAR,
+    // Numeric data types
+    INT32,
+    INT64,
+    FLOAT,
+    DOUBLE,
+    // Date type attributes
+    DATE,
+    DATE_TIME,
+    TIME,
+    // Miscellaneous
+    MAX_TYPE,
+}
+
+export enum ColumnTimeBucket {
+    NO_BUCKET,
+    DAILY,
+    WEEKLY,
+    MONTHLY,
+    QUARTERLY,
+    YEARLY,
+    HOURLY,
+    AUTO,
+    HOUR_OF_DAY,
+    DAY_OF_WEEK,
+    DAY_OF_MONTH,
+    DAY_OF_QUARTER,
+    DAY_OF_YEAR,
+    WEEK_OF_MONTH,
+    WEEK_OF_QUARTER,
+    WEEK_OF_YEAR,
+    MONTH_OF_QUARTER,
+    MONTH_OF_YEAR,
+    QUARTER_OF_YEAR,
+}
+
+/**
+ * Enum values for column format type defined in the worksheet
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export enum FormatType {
+    NONE,
+    PATTERN,
+    PERCENTAGE,
+    CURRENCY,
+}
+
+/**
+ * Type of currency formatting defined in the worksheet
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export enum CurrencyFormatType {
+    USER_LOCALE,
+    COLUMN,
+    ISO_CODE,
+}
+
+/**
+ * Currency Format for the columm 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
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    column: string;
+    /**
+     * ISO code for the currency types
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    isoCode: string;
+}
+
+/**
+ * Defines the type for column formatting in the worksheet and related details.
+ * Based on the type of formatting, the pattern and currency formats are defined.
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export interface ColumnFormat {
+    type: FormatType;
+    /**
+     * Pattern to define the number formatting style
+     *
+     * @optional
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    pattern?: string;
+    /**
+     * Currency format details
+     *
+     * @optional
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    currencyFormat?: CurrencyFormat;
+}
+
+export interface ChartColumn {
+    /**
+     * Column Id
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    id: string;
+    /**
+     * Column Name
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    name: string;
+    /**
+     * Type of column if attribute or measure
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    type: ColumnType;
+
+    /**
+     * Type of the time based aggregation
+     * when the column data is of type Date, Datetime, Time
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    timeBucket: ColumnTimeBucket;
+
+    /**
+     * Type of data for the column
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    dataType: DataType;
+
+    // // worksheet level formatting
+    // // (TBD make this more cleaner during export)
+    // /**
+    //  * @deprecated
+    //  * @hidden To be removed and merged with the format
+    //  * @version SDK: 0.1 | ThoughtSpot:
+    //  */
+    // formatPattern?: string
+    // /**
+    //  * @deprecated
+    //  * @hidden To be removed and merged with the format
+    //  */
+    // formatType?: FormatType
+
+    /**
+     * Formatting for the columns defined in the worksheet
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    format?: ColumnFormat;
+}

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

@@ -0,0 +1,159 @@
+import { VisualProps } from './common.types';
+
+/**
+ *
+ * @group Chart to ThoughtSpot Events
+ */
+export enum ChartToTSEvent {
+    /**
+     * Context Menu events
+     */
+    OpenContextMenu = 'OpenContextMenu',
+    CloseContextMenu = 'CloseContextMenu',
+
+    /**
+     * Axis Menu events
+     */
+    OpenAxisMenu = 'OpenAxisMenu',
+    CloseAxisMenu = 'CloseAxisMenu',
+
+    /**
+     * Render life cycle events
+     */
+    RenderStart = 'RenderStart',
+    RenderError = 'RenderError',
+    RenderComplete = 'RenderComplete',
+
+    /**
+     * Visual Props Update
+     */
+    UpdateVisualProps = 'UpdateVisualProps',
+}
+
+/**
+ * This map defines the event type and its corresponding payload needed by event
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ * @group Chart to ThoughtSpot Events
+ */
+export interface ChartToTSEventsPayloadMap {
+    /**
+     * Trigger to open Context Menu
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.OpenContextMenu]: OpenContextMenuEventPayload;
+    /**
+     * Trigger to close Context Menu
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.CloseContextMenu]: null;
+
+    /**
+     * Trigger to notify the render start
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.RenderStart]: null;
+    /**
+     * Trigger to notify the render completion
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.RenderComplete]: null;
+    /**
+     * Trigger to notify the render error
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.RenderError]: RenderErrorEventPayload;
+    /**
+     * Trigger to update the visual props
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    [ChartToTSEvent.UpdateVisualProps]: UpdateVisualPropsEventPayload;
+}
+
+/**
+ *
+ * @group Chart to ThoughtSpot Events
+ */
+type UpdateVisualPropsEventPayload = VisualProps;
+
+/**
+ * @group Chart to ThoughtSpot Events / Context Menu
+ */
+// start - open context menu payload
+export interface PointVal {
+    // 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: any;
+}
+/**
+ *
+ * @group Chart to ThoughtSpot Events / Context Menu
+ */
+export interface Point {
+    tuple: PointVal[];
+}
+
+/**
+ *
+ * @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
+
+    /**
+     * 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.
+     *
+     * Callback will be triggered via postMessage api contract.
+     */
+    onClick: (...args: any[]) => void;
+}
+
+/**
+ *
+ * @group Chart to ThoughtSpot Events
+ */
+export interface OpenContextMenuEventPayload {
+    event: Pick<
+        PointerEvent,
+        | 'x'
+        | 'y'
+        | 'clientX'
+        | 'clientY'
+        | 'pageX'
+        | 'pageY'
+        | 'screenX'
+        | 'screenY'
+    >;
+    clickedPoint: Point;
+    selectedPoints?: Point[];
+    customActions?: CustomAction[];
+}
+// end - open context menu payload
+
+/**
+ * @group Chart to ThoughtSpot Events
+ */
+interface RenderErrorEventPayload {
+    hasError: boolean;
+    error: any;
+}
+
+/**
+ *
+ * @group Chart to ThoughtSpot Events
+ */
+export enum ErrorType {
+    MultipleContextsNotSupported = 'MultipleContextsNotSupported',
+}