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

package/src/react/use-custom-chart-context.spec.tsx

@@ -8,8 +8,6 @@ import { TSToChartEvent } from '../types/ts-to-chart-event.types';
 import { contextChartProps } from './mocks/custom-chart-context-mock';
 import { useChartContext } from './use-custom-chart-context';
 
-jest.mock('../main/post-message-event-bridge');
-
 describe('useChartContext initialization', () => {
     let eventProcessor: any;
     let mockInitMessage;
@@ -26,6 +24,7 @@ describe('useChartContext initialization', () => {
         );
         mockInitMessage.mockImplementation((fn: any) => {
             eventProcessor = fn;
+            return () => null;
         });
 
         mockPostMessageToHost.mockImplementation(() => {
@@ -35,6 +34,7 @@ describe('useChartContext initialization', () => {
     afterEach(() => {
         // Clear mock implementations after each test
         jest.clearAllMocks();
+        PostMessageEventBridge.globalThis.isInitialized = false;
     });
 
     test('should initialize the context only after intialize completes', async () => {
@@ -47,32 +47,24 @@ describe('useChartContext initialization', () => {
         expect(result.current.hasInitialized).toBe(false);
         expect(result.current.chartModel).toBeUndefined();
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: {
-                    componentId: 'COMPONENT_ID',
-                    hostUrl: 'https://some.chart.app',
-                    chartModel: mockedChartModel,
-                },
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
             },
-            ports: [{ postMessage: mockPostMessage }],
+            eventType: TSToChartEvent.Initialize,
         });
-
-        eventProcessor({
-            data: {
-                payload: {},
-                eventType: TSToChartEvent.InitializeComplete,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(true);
             expect(result.current.chartModel).toEqual(mockedChartModel);
         });
-        result.current?.destroy();
     });
 
     test('should make sure hasInitialized to remain false when context initialization failed', async () => {
@@ -117,6 +109,7 @@ describe('useChartContext emit', () => {
         );
         mockInitMessage.mockImplementation((fn: any) => {
             eventProcessor = fn;
+            return () => null;
         });
 
         mockPostMessageToHost.mockImplementation(() => {
@@ -126,6 +119,7 @@ describe('useChartContext emit', () => {
     afterEach(() => {
         // Clear mock implementations after each test
         jest.clearAllMocks();
+        PostMessageEventBridge.globalThis.isInitialized = false;
     });
 
     test('should trigger the emitter correctly when context is initialized', async () => {
@@ -134,23 +128,17 @@ describe('useChartContext emit', () => {
             useChartContext(contextChartProps),
         );
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: mockInitializeContextPayload,
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: mockInitializeContextPayload,
+            eventType: TSToChartEvent.Initialize,
         });
 
-        eventProcessor({
-            data: {
-                payload: {},
-                eventType: TSToChartEvent.InitializeComplete,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(true);
         });
@@ -174,14 +162,12 @@ describe('useChartContext emit', () => {
             useChartContext(contextChartProps),
         );
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: mockInitializeContextPayload,
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: mockInitializeContextPayload,
+            eventType: TSToChartEvent.Initialize,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(false);
         });
@@ -207,6 +193,7 @@ describe('useChartContext setOn listeners', () => {
         );
         mockInitMessage.mockImplementation((fn: any) => {
             eventProcessor = fn;
+            return () => null;
         });
 
         mockPostMessageToHost.mockImplementation(() => {
@@ -216,6 +203,7 @@ describe('useChartContext setOn listeners', () => {
     afterEach(() => {
         // Clear mock implementations after each test
         jest.clearAllMocks();
+        PostMessageEventBridge.globalThis.isInitialized = false;
     });
 
     test('should trigger the setOnEvent correctly when context is initialized', async () => {
@@ -227,63 +215,49 @@ describe('useChartContext setOn listeners', () => {
         // Assert that the context is not initialized initially
         expect(result.current.hasInitialized).toBe(false);
         expect(result.current.chartModel).toBeUndefined();
-        const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: {
-                    componentId: 'COMPONENT_ID',
-                    hostUrl: 'https://some.chart.app',
-                    chartModel: mockedChartModel,
-                },
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
             },
-            ports: [{ postMessage: mockPostMessage }],
+            eventType: TSToChartEvent.Initialize,
         });
 
-        eventProcessor({
-            data: {
-                payload: {},
-                eventType: TSToChartEvent.InitializeComplete,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(true);
             expect(result.current.chartModel).toEqual(mockedChartModel);
         });
 
-        eventProcessor({
-            data: {
-                payload: { chartModel: {} },
-                eventType: TSToChartEvent.ChartModelUpdate,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        const resp = await eventProcessor({
+            payload: { chartModel: {} },
+            eventType: TSToChartEvent.ChartModelUpdate,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
-            expect(mockPostMessage).toHaveBeenCalledWith({
+            expect(resp).toEqual({
                 triggerRenderChart: true,
             });
             expect(result.current.chartModel).toEqual({});
         });
 
-        eventProcessor({
-            data: {
-                payload: { visualProps: { color: 'red' } },
-                eventType: TSToChartEvent.VisualPropsUpdate,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        const propsUpdateResp = await eventProcessor({
+            payload: { visualProps: { color: 'red' } },
+            eventType: TSToChartEvent.VisualPropsUpdate,
+            source: 'ts-host-app',
         });
-        expect(mockPostMessage).toHaveBeenCalledWith({
+
+        expect(propsUpdateResp).toEqual({
             triggerRenderChart: true,
         });
         await waitFor(() => {
-            expect(mockPostMessage).toHaveBeenCalledWith({
-                triggerRenderChart: true,
-            });
             expect(result.current.chartModel?.visualProps).toEqual({
                 color: 'red',
             });
@@ -297,14 +271,12 @@ describe('useChartContext setOn listeners', () => {
             useChartContext(contextChartProps),
         );
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: mockInitializeContextPayload,
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: mockInitializeContextPayload,
+            eventType: TSToChartEvent.Initialize,
+            source: 'ts-host-app',
         });
+
         await waitFor(() => {
             expect(result.current.hasInitialized).toBe(false);
         });
@@ -333,6 +305,7 @@ describe('useChartContext on React Wrapper component', () => {
         );
         mockInitMessage.mockImplementation((fn: any) => {
             eventProcessor = fn;
+            return () => null;
         });
 
         mockPostMessageToHost.mockImplementation(() => {
@@ -342,6 +315,7 @@ describe('useChartContext on React Wrapper component', () => {
     afterEach(() => {
         // Clear mock implementations after each test
         jest.clearAllMocks();
+        PostMessageEventBridge.globalThis.isInitialized = false;
     });
     test('TSChartContext renders children and should not increase counter for useEffect on chartModel if visualProps is updated', async () => {
         const CustomChartComponent = () => {
@@ -364,18 +338,15 @@ describe('useChartContext on React Wrapper component', () => {
         const { getByTestId, rerender } = render(<CustomChartComponent />);
 
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: {
-                    componentId: 'COMPONENT_ID',
-                    hostUrl: 'https://some.chart.app',
-                    chartModel: mockedChartModel,
-                },
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
             },
-            ports: [{ postMessage: mockPostMessage }],
+            eventType: TSToChartEvent.Initialize,
         });
+
         rerender(<CustomChartComponent />);
 
         // Check if the child element is rendered
@@ -385,13 +356,10 @@ describe('useChartContext on React Wrapper component', () => {
             );
         });
 
-        eventProcessor({
-            data: {
-                payload: { visualProps: { color: 'red' } },
-                eventType: TSToChartEvent.VisualPropsUpdate,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+        await eventProcessor({
+            payload: { visualProps: { color: 'red' } },
+            eventType: TSToChartEvent.VisualPropsUpdate,
+            source: 'ts-host-app',
         });
 
         // Re-render the component with a new key
@@ -432,26 +400,22 @@ describe('useChartContext on React Wrapper component', () => {
 
         // Re-render the component with a new key
         const mockPostMessage = jest.fn();
-        eventProcessor({
-            data: {
-                payload: {
-                    componentId: 'COMPONENT_ID',
-                    hostUrl: 'https://some.chart.app',
-                    chartModel: mockedChartModel,
-                },
-                eventType: TSToChartEvent.Initialize,
-                source: 'ts-host-app',
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
             },
-            ports: [{ postMessage: mockPostMessage }],
+            eventType: TSToChartEvent.Initialize,
+            source: 'ts-host-app',
         });
-        eventProcessor({
-            data: {
-                payload: { visualProps: { color: 'red' } },
-                eventType: TSToChartEvent.VisualPropsUpdate,
-                source: 'ts-host-app',
-            },
-            ports: [{ postMessage: mockPostMessage }],
+
+        await eventProcessor({
+            payload: { visualProps: { color: 'red' } },
+            eventType: TSToChartEvent.VisualPropsUpdate,
+            source: 'ts-host-app',
         });
+
         rerender(<CustomChartComponent />);
         // Check if the child element is still in the document after re-render
         const updatedChildElement = getByTestId('child-element');

package/src/types/common.types.ts

@@ -168,7 +168,7 @@ export interface AppConfig {
     appOptions?: {
         isMobile?: boolean;
         isPrintMode?: boolean; // export mode on/off
-
+        isLiveboardContext?: boolean; // if chart renders in liveboard context
         // runtime configurations
         isDebugMode?: boolean; // enables debug mode for logging
     };

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

@@ -1,3 +1,4 @@
+import { AllowedConfigurations } from '../main/custom-chart-context';
 import { ChartColumn } from './answer-column.types';
 import { Point } from './chart-to-ts-event.types';
 import {
@@ -159,6 +160,13 @@ export interface InitializeEventPayload {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     hostUrl: string;
+    /**
+     * The selector of the container element where the chart will be rendered. Used for internal
+     * charts, external custom charts mostly have their own DOM.
+     *
+     * @version SDK: 0.2 | ThoughtSpot:
+     */
+    containerElSelector: string;
 }
 
 /**
@@ -191,6 +199,12 @@ export interface InitializeEventResponsePayload {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     visualPropEditorDefinition?: VisualPropEditorDefinition;
+    /**
+     * Toggle native configurations supported by TS UI. Ex: column level number and conditional formatting.
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    allowedConfigurations?: AllowedConfigurations;
 }
 
 /**

package/cjs/index.d.ts

@@ -1,9 +0,0 @@
-export * from './types/common.types';
-export * from './types/configurator.types';
-export * from './types/visual-prop.types';
-export * from './types/answer-column.types';
-export * from './types/chart-to-ts-event.types';
-export * from './types/ts-to-chart-event.types';
-export * from './main/custom-chart-context';
-export * from './react/use-custom-chart-context';
-//# sourceMappingURL=index.d.ts.map

package/cjs/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC"}

package/cjs/index.js

@@ -1,25 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./types/common.types"), exports);
-__exportStar(require("./types/configurator.types"), exports);
-__exportStar(require("./types/visual-prop.types"), exports);
-__exportStar(require("./types/answer-column.types"), exports);
-__exportStar(require("./types/chart-to-ts-event.types"), exports);
-__exportStar(require("./types/ts-to-chart-event.types"), exports);
-__exportStar(require("./main/custom-chart-context"), exports);
-__exportStar(require("./react/use-custom-chart-context"), exports);
-//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uDAAqC;AACrC,6DAA2C;AAC3C,4DAA0C;AAC1C,8DAA4C;AAC5C,kEAAgD;AAChD,kEAAgD;AAChD,8DAA4C;AAC5C,mEAAiD"}

package/cjs/main/custom-chart-context.d.ts

@@ -1,47 +0,0 @@
-import { ChartToTSEventsPayloadMap, OpenAxisMenuEventPayload, OpenContextMenuEventPayload } from '../types/chart-to-ts-event.types';
-import { AppConfig, ChartConfig, ChartModel, ValidationResponse, VisualProps } from '../types/common.types';
-import { ChartConfigEditorDefinition } from '../types/configurator.types';
-import { Query, TSToChartEventsPayloadMap } from '../types/ts-to-chart-event.types';
-import { VisualPropEditorDefinition } from '../types/visual-prop.types';
-export type CustomChartContextProps = {
-    getDefaultChartConfig: (chartModel: ChartModel) => ChartConfig[];
-    getQueriesFromChartConfig: (chartConfig: ChartConfig[]) => Query[];
-    renderChart: (ctx: CustomChartContext) => Promise<void>;
-    validateConfig?: (updatedConfig: ChartConfig[], chartModel: ChartModel) => ValidationResponse;
-    validateVisualProps?: (updatedVisualProps: VisualProps, chartModel: ChartModel) => ValidationResponse;
-    chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
-};
-export declare class CustomChartContext {
-    private componentId;
-    private hostUrl;
-    private chartModel;
-    private appConfig;
-    private chartContextProps;
-    private eventListeners;
-    private hasInitializedPromise;
-    private triggerInitResolve;
-    private contextMenuActionHandler;
-    private axisMenuActionHandler;
-    constructor(chartContextProps: CustomChartContextProps);
-    initialize: () => Promise<void>;
-    on<T extends keyof TSToChartEventsPayloadMap>(eventType: T, callbackFn: TSToChartEventsPayloadMap[T]): void;
-    off<T extends keyof TSToChartEventsPayloadMap>(eventType: T): void;
-    private onInternal;
-    destroy(): void;
-    getChartModel: () => ChartModel;
-    getAppConfig: () => AppConfig;
-    contextMenuCustomActionPreProcessor(eventPayload: [OpenContextMenuEventPayload]): [OpenContextMenuEventPayload];
-    axisMenuCustomActionPreProcessor(eventPayload: [OpenAxisMenuEventPayload]): [OpenAxisMenuEventPayload];
-    private eventPayloadPreProcessor;
-    emitEvent<T extends keyof ChartToTSEventsPayloadMap>(eventType: T, ...eventPayload: ChartToTSEventsPayloadMap[T]): Promise<any>;
-    private registerEventProcessor;
-    private eventProcessor;
-    private registerEvents;
-    private initializeContext;
-    private initializationComplete;
-    private publishChartContextPropsToHost;
-    private executeEventListenerCBs;
-}
-export declare const getChartContext: (customChartConfig: CustomChartContextProps) => Promise<CustomChartContext>;
-//# sourceMappingURL=custom-chart-context.d.ts.map

package/cjs/main/custom-chart-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"custom-chart-context.d.ts","sourceRoot":"","sources":["../../src/main/custom-chart-context.ts"],"names":[],"mappings":"AASA,OAAO,EAGH,yBAAyB,EAIzB,wBAAwB,EACxB,2BAA2B,EAC9B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EACH,SAAS,EACT,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,WAAW,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAUH,KAAK,EAEL,yBAAyB,EAI5B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAKxE,MAAM,MAAM,uBAAuB,GAAG;IAQlC,qBAAqB,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,WAAW,EAAE,CAAC;IAQjE,yBAAyB,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,CAAC;IAQnE,WAAW,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAUxD,cAAc,CAAC,EAAE,CACb,aAAa,EAAE,WAAW,EAAE,EAC5B,UAAU,EAAE,UAAU,KACrB,kBAAkB,CAAC;IAWxB,mBAAmB,CAAC,EAAE,CAClB,kBAAkB,EAAE,WAAW,EAC/B,UAAU,EAAE,UAAU,KACrB,kBAAkB,CAAC;IAQxB,2BAA2B,CAAC,EAAE,2BAA2B,EAAE,CAAC;IAW5D,0BAA0B,CAAC,EAAE,0BAA0B,CAAC;CAC3D,CAAC;AAWF,qBAAa,kBAAkB;IAU3B,OAAO,CAAC,WAAW,CAAM;IASzB,OAAO,CAAC,OAAO,CAAM;IAQrB,OAAO,CAAC,UAAU,CAAyB;IAO3C,OAAO,CAAC,SAAS,CAAiB;IAOlC,OAAO,CAAC,iBAAiB,CACkC;IAQ3D,OAAO,CAAC,cAAc,CAAoD;IAW1E,OAAO,CAAC,qBAAqB,CAAgB;IAS7C,OAAO,CAAC,kBAAkB,CAAsB;IAQhD,OAAO,CAAC,wBAAwB,CAAgC;IAQhE,OAAO,CAAC,qBAAqB,CAA6B;gBAO9C,iBAAiB,EAAE,uBAAuB;IAkB/C,UAAU,QAAO,QAAQ,IAAI,CAAC,CAGnC;IAUK,EAAE,CAAC,CAAC,SAAS,MAAM,yBAAyB,EAC/C,SAAS,EAAE,CAAC,EACZ,UAAU,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACzC,IAAI;IAeA,GAAG,CAAC,CAAC,SAAS,MAAM,yBAAyB,EAAE,SAAS,EAAE,CAAC,GAAG,IAAI;IAiBzE,OAAO,CAAC,UAAU;IAgBX,OAAO;IAUP,aAAa,QAAO,UAAU,CAAoB;IAOlD,YAAY,QAAO,SAAS,CAAmB;IAQ/C,mCAAmC,CACtC,YAAY,EAAE,CAAC,2BAA2B,CAAC,GAC5C,CAAC,2BAA2B,CAAC;IAiCzB,gCAAgC,CACnC,YAAY,EAAE,CAAC,wBAAwB,CAAC,GACzC,CAAC,wBAAwB,CAAC;IAiC7B,OAAO,CAAC,wBAAwB;IA0BzB,SAAS,CAAC,CAAC,SAAS,MAAM,yBAAyB,EACtD,SAAS,EAAE,CAAC,EACZ,GAAG,YAAY,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAC9C,OAAO,CAAC,GAAG,CAAC;IAuBf,OAAO,CAAC,sBAAsB,CAU5B;IAOF,OAAO,CAAC,cAAc,CAuBpB;IAOF,OAAO,CAAC,cAAc,CAqOpB;IASF,OAAO,CAAC,iBAAiB,CASvB;IAEF,OAAO,CAAC,sBAAsB,CAM5B;IAEF,OAAO,CAAC,8BAA8B,CA6BhC;IAQN,OAAO,CAAC,uBAAuB,CAyB7B;CACL;AAQD,eAAO,MAAM,eAAe,sBACL,uBAAuB,KAC3C,QAAQ,kBAAkB,CAO5B,CAAC"}