@thoughtspot/visual-embed-sdk 1.27.9 → 1.27.11

package/src/embed/pinboard.spec.ts

@@ -169,6 +169,7 @@ describe('Pinboard/viz embed tests', () => {
                     values: [1000],
                 },
             ],
+            excludeRuntimeFiltersfromURL: false,
         } as LiveboardViewConfig);
         pinboardEmbed.render();
         await executeAfterWait(() => {
@@ -179,7 +180,7 @@ describe('Pinboard/viz embed tests', () => {
         });
     });
 
-    test('should not apply runtime filters if excludeRuntimeFiltersfromURL is true', async () => {
+    test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is true', async () => {
         const pinboardEmbed = new PinboardEmbed(getRootEl(), {
             ...defaultViewConfig,
             pinboardId,
@@ -202,6 +203,28 @@ describe('Pinboard/viz embed tests', () => {
         });
     });
 
+    test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is undefined', async () => {
+        const liveboardEmbed = new PinboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            pinboardId,
+            vizId,
+            runtimeFilters: [
+                {
+                    columnName: 'sales',
+                    operator: RuntimeFilterOp.EQ,
+                    values: [1000],
+                },
+            ],
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}${prefixParamsVizEmbed}#/embed/viz/${pinboardId}/${vizId}`,
+            );
+        });
+    });
+
     test('should register event handler to adjust iframe height', async () => {
         const pinboardEmbed = new PinboardEmbed(getRootEl(), {
             ...defaultViewConfig,

package/src/embed/sage.ts

@@ -237,11 +237,11 @@ export class SageEmbed extends V1Embed {
      *
      * @returns {SageEmbed} Eureka/Sage embed
      */
-    public render(): SageEmbed {
+    public async render(): Promise<SageEmbed> {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src);
+        await this.renderV1Embed(src);
 
         return this;
     }

package/src/embed/search-bar.tsx

@@ -23,18 +23,44 @@ export interface SearchBarViewConfig
      * Only a single data source is supported currently.
      *
      * @deprecated Use `dataSource` instead
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.1-sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchBarEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSources:['id-2345','id-2345'],
+     * })
+     * ```
      */
     dataSources?: string[];
     /**
-     * The array of data source GUIDs to set on load.
+     * Pass the ID of the source to be selected.
      *
      * @version: SDK: 1.19.0, ThoughtSpot 9.0.0.cl, 9.0.1.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchBarEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSource:'id-2345',
+     * })
+     * ```
      */
     dataSource?: string;
     /**
      * Boolean to define if the last selected data source should be used
      *
      * @version: SDK: 1.24.0, ThoughtSpot 9.5.0.cl, 9.5.0.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchBarEmbed('#tsEmbed', {
+     *    ... // other options
+     *    useLastSelectedSources:false,
+     * })
+     * ```
      */
     useLastSelectedSources?: boolean;
     /**
@@ -48,12 +74,17 @@ export interface SearchBarViewConfig
      * If it’s not executed, the focus is placed at the end of
      * the token string in the search bar.
      *
+     * @version: SDK: 1.2.0 | ThoughtSpot: 9.4.0.sw
+     *
      * @example
      * ```js
-     * searchOptions: {
-     *    searchTokenString: '[quantity purchased] [region]',
-     *    executeSearch: true,
-     * }
+     * const embed = new SearchBarEmbed('#tsEmbed', {
+     *    ... // other options
+     *    searchOptions: {
+     *        searchTokenString: '[quantity purchased] [region]',
+     *        executeSearch: true,
+     *    }
+     * })
      * ```
      */
     searchOptions?: SearchOptions;
@@ -130,11 +161,11 @@ export class SearchBarEmbed extends TsEmbed {
     /**
      * Render the embedded ThoughtSpot search
      */
-    public render(): SearchBarEmbed {
+    public async render(): Promise<SearchBarEmbed> {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderIFrame(src);
+        await this.renderIFrame(src);
         return this;
     }
 }

package/src/embed/search.spec.ts

@@ -178,6 +178,7 @@ describe('Search embed tests', () => {
                     values: ['berkeley'],
                 },
             ],
+            excludeRuntimeFiltersfromURL: false,
         });
         searchEmbed.render();
         await executeAfterWait(() => {
@@ -188,7 +189,7 @@ describe('Search embed tests', () => {
         });
     });
 
-    test('should not add runtime filters if excludeRuntimeFiltersfromURL is true', async () => {
+    test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is true', async () => {
         const dataSources = ['data-source-1'];
         const searchOptions = {
             searchTokenString: '[commit date][revenue]',
@@ -216,6 +217,33 @@ describe('Search embed tests', () => {
         });
     });
 
+    test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is undefined', async () => {
+        const dataSources = ['data-source-1'];
+        const searchOptions = {
+            searchTokenString: '[commit date][revenue]',
+        };
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            hideDataSources: true,
+            dataSources,
+            searchOptions,
+            runtimeFilters: [
+                {
+                    columnName: 'city',
+                    operator: RuntimeFilterOp.EQ,
+                    values: ['berkeley'],
+                },
+            ],
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&searchTokenString=%5Bcommit%20date%5D%5Brevenue%5D&dataSourceMode=hide&useLastSelectedSources=false${prefixParams}#/embed/answer`,
+            );
+        });
+    });
+
     test('Should add dataSource', async () => {
         const dataSource = 'data-source-1';
         const searchOptions = {

package/src/embed/search.ts

@@ -57,16 +57,43 @@ export interface SearchViewConfig
     /**
      * If set to true, the data sources panel is collapsed on load,
      * but can be expanded manually.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    collapseDataSources:true,
+     * })
+     * ```
      */
     collapseDataSources?: boolean;
     /**
      * Show or hide the data sources panel.
+     *
+     * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideDataSources:true,
+     * })
+     * ```
      */
     hideDataSources?: boolean;
     /**
      * Show or hide the charts and tables in search answers.
      * This attribute can be used to create a custom visualization
      * using raw answer data.
+     *
+     * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideResults:true,
+     * })
+     * ```
      */
     hideResults?: boolean;
     /**
@@ -77,11 +104,26 @@ export interface SearchViewConfig
      * If set to true, the Search Assist feature is enabled.
      *
      * @version SDK: 1.13.0 | ThoughtSpot: 8.5.0.cl, 8.8.1-sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    enableSearchAssist:true,
+     * })
+     * ```
      */
     enableSearchAssist?: boolean;
     /**
      * If set to true, the tabular view is set as the default
      * format for presenting search data.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    forceTable:true,
+     * })
      */
     forceTable?: boolean;
     /**
@@ -89,12 +131,26 @@ export interface SearchViewConfig
      * Only a single data source is supported currently.
      *
      * @deprecated Use `dataSource` instead.
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSources:['id-234','id-456'],
+     * })
+     * ```
      */
     dataSources?: string[];
     /**
      * The array of data source GUIDs to set on load.
      *
      * @version: SDK: 1.19.0
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSource:'id-234',
+     * })
+     * ```
      */
     dataSource?: string;
     /**
@@ -127,6 +183,15 @@ export interface SearchViewConfig
     searchOptions?: SearchOptions;
     /**
      * The GUID of a saved answer to load initially.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    answerId:'sed-1234',
+     * })
+     * ```
      */
     answerId?: string;
     /**
@@ -134,6 +199,13 @@ export interface SearchViewConfig
      * The chart/table should still be visible.
      *
      * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.5.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideSearchBar:true,
+     * })
+     * ```
      */
     hideSearchBar?: boolean;
     /**
@@ -141,6 +213,13 @@ export interface SearchViewConfig
      *
      * @default false
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataPanelV2:false,
+     * })
+     * ```
      */
     dataPanelV2?: boolean;
     /**
@@ -201,7 +280,7 @@ export class SearchEmbed extends TsEmbed {
             runtimeFilters,
             dataSource,
             dataSources,
-            excludeRuntimeFiltersfromURL,
+            excludeRuntimeFiltersfromURL = true,
             hideSearchBar,
             dataPanelV2 = false,
             useLastSelectedSources = false,
@@ -286,12 +365,12 @@ export class SearchEmbed extends TsEmbed {
     /**
      * Render the embedded ThoughtSpot search
      */
-    public render(): SearchEmbed {
+    public async render(): Promise<SearchEmbed> {
         super.render();
         const { answerId } = this.viewConfig;
 
         const src = this.getIFrameSrc();
-        this.renderIFrame(src);
+        await this.renderIFrame(src);
         getAuthPromise().then(() => {
             if (
                 checkReleaseVersionInBeta(

package/src/embed/ts-embed-trigger.spec.ts

@@ -0,0 +1,39 @@
+import {
+    init, AuthType, LiveboardEmbed, HostEvent,
+} from '../index';
+import {
+    executeAfterWait,
+    getDocumentBody,
+    getIFrameEl,
+    getRootEl,
+} from '../test/test-utils';
+
+describe('Trigger', () => {
+    beforeEach(() => {
+        document.body.innerHTML = getDocumentBody();
+    });
+    test('should trigger the event', async (done) => {
+        init({
+            thoughtSpotHost: 'https://tshost',
+            authType: AuthType.None,
+        });
+        const lb = new LiveboardEmbed(getRootEl(), {
+            frameParams: {
+                width: '100%',
+                height: '100%',
+            },
+            liveboardId: '123',
+        });
+        const val = await lb.render();
+        const iframe = getIFrameEl();
+        jest.spyOn(iframe.contentWindow, 'postMessage');
+        executeAfterWait(() => {
+            lb.trigger(HostEvent.DownloadAsCsv, { vizId: 'testId' });
+            expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(expect.objectContaining({
+                type: HostEvent.DownloadAsCsv,
+                data: { vizId: 'testId' },
+            }), 'https://tshost', expect.anything());
+            done();
+        });
+    });
+});

package/src/embed/ts-embed.spec.ts

@@ -15,6 +15,7 @@ import {
 import * as mixpanelInstance from '../mixpanel-service';
 import { MIXPANEL_EVENT } from '../mixpanel-service';
 import {
+    createRootEleForEmbed,
     defaultParamsForPinboardEmbed,
     executeAfterWait,
     expectUrlMatchesWithParams,
@@ -47,15 +48,6 @@ const tabId2 = 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0';
 const thoughtSpotHost = 'tshost';
 const defaultParamsPost = '';
 
-const createRootEleForEmbed = () => {
-    const rootEle = document.createElement('div');
-    rootEle.id = 'myRoot';
-    const tsEmbedDiv = document.createElement('div');
-    tsEmbedDiv.id = 'tsEmbedDiv';
-    rootEle.appendChild(tsEmbedDiv);
-    document.body.appendChild(rootEle);
-};
-
 beforeAll(() => {
     spyOn(window, 'alert');
 });
@@ -317,6 +309,46 @@ describe('Unit test case for ts embed', () => {
             });
         });
 
+        test('Runtime filters from view Config should be part of app_init payload when excludeRuntimeFiltersfromURL is undefined', async () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            const mockRuntimeFilters: RuntimeFilter[] = [
+                {
+                    columnName: 'color',
+                    operator: RuntimeFilterOp.EQ,
+                    values: ['blue'],
+                },
+            ];
+
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                excludeRuntimeFiltersfromURL: true,
+                runtimeFilters: mockRuntimeFilters,
+            });
+            searchEmbed.render();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: {
+                    customisations,
+                    authToken: '',
+                    runtimeFilterParams: 'col1=color&op1=EQ&val1=blue',
+                    hiddenHomeLeftNavItems: [],
+                    hiddenHomepageModules: [],
+                    hostConfig: undefined,
+                    reorderedHomepageModules: [],
+                },
+            });
+        });
+
         test('Runtime filters from view Config should not be part of app_init payload when excludeRuntimeFiltersfromURL is false', async () => {
             const mockEmbedEventPayload = {
                 type: EmbedEvent.APP_INIT,
@@ -364,7 +396,7 @@ describe('Unit test case for ts embed', () => {
             };
             const mockedHiddenHomeLeftNavItems: HomeLeftNavItem[] = [
                 HomeLeftNavItem.Home,
-                HomeLeftNavItem.Documentation,
+                HomeLeftNavItem.MonitorSubscription,
             ];
 
             const searchEmbed = new AppEmbed(getRootEl(), {
@@ -386,7 +418,10 @@ describe('Unit test case for ts embed', () => {
                     authToken: '',
                     hostConfig: undefined,
                     runtimeFilterParams: null,
-                    hiddenHomeLeftNavItems: [HomeLeftNavItem.Home, HomeLeftNavItem.Documentation],
+                    hiddenHomeLeftNavItems: [
+                        HomeLeftNavItem.Home,
+                        HomeLeftNavItem.MonitorSubscription,
+                    ],
                     hiddenHomepageModules: [],
                     reorderedHomepageModules: [],
                 },

package/src/embed/ts-embed.ts

@@ -167,7 +167,7 @@ export class TsEmbed {
         this.thoughtSpotV2Base = getV2BasePath(this.embedConfig);
         this.eventHandlerMap = new Map();
         this.isError = false;
-        this.viewConfig = viewConfig;
+        this.viewConfig = { excludeRuntimeFiltersfromURL: true, ...viewConfig };
         this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
         this.registerAppInit();
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
@@ -515,10 +515,7 @@ export class TsEmbed {
         const queryParams = this.shouldEncodeUrlQueryParams
             ? `?base64UrlEncodedFlags=${getEncodedQueryParamsString(queryString)}`
             : `?${queryString}`;
-        let host = this.thoughtSpotHost;
-        if (!isUndefined(this.embedConfig.enableReactShell)) {
-            host = (this.embedConfig.enableReactShell as boolean) ? '/v2' : '/v1';
-        }
+        const host = this.thoughtSpotHost;
         const path = `${host}/${queryParams}#`;
         return path;
     }
@@ -556,8 +553,7 @@ export class TsEmbed {
 
         const {
             height: frameHeight,
-            width: frameWidth,
-            ...restParams
+            width: frameWidth, ...restParams
         } = this.viewConfig.frameParams || {};
         const width = getCssDimension(frameWidth || DEFAULT_EMBED_WIDTH);
         const height = getCssDimension(frameHeight || DEFAULT_EMBED_HEIGHT);
@@ -679,7 +675,7 @@ export class TsEmbed {
     protected connectPreRendered(): boolean {
         const preRenderIds = this.getPreRenderIds();
         this.preRenderWrapper = this.preRenderWrapper
-          || document.getElementById(preRenderIds.wrapper);
+        || document.getElementById(preRenderIds.wrapper);
 
         this.preRenderChild = this.preRenderChild || document.getElementById(preRenderIds.child);
 
@@ -965,6 +961,16 @@ export class TsEmbed {
      */
     public trigger(messageType: HostEvent, data: any = {}): Promise<any> {
         uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
+
+        if (!this.isRendered) {
+            this.handleError('Please call render before triggering events');
+            return null;
+        }
+
+        if (!messageType) {
+            this.handleError('Host event type is undefined');
+            return null;
+        }
         return processTrigger(this.iFrame, messageType, this.thoughtSpotHost, data);
     }
 
@@ -975,7 +981,7 @@ export class TsEmbed {
      *
      * @param args
      */
-    public render(): TsEmbed {
+    public async render(): Promise<TsEmbed> {
         this.isRendered = true;
 
         return this;
@@ -1161,8 +1167,8 @@ export class TsEmbed {
         const elBoundingClient = this.el.getBoundingClientRect();
 
         setStyleProperties(this.preRenderWrapper, {
-            top: `${elBoundingClient.y}px`,
-            left: `${elBoundingClient.x}px`,
+            top: `${elBoundingClient.y + window.scrollY}px`,
+            left: `${elBoundingClient.x + window.scrollX}px`,
             width: `${elBoundingClient.width}px`,
             height: `${elBoundingClient.height}px`,
         });
@@ -1183,8 +1189,6 @@ export class TsEmbed {
             pointerEvents: 'none',
             zIndex: '-1000',
             position: 'absolute ',
-            top: '0',
-            left: '0',
         };
         setStyleProperties(this.preRenderWrapper, preRenderHideStyles);
 
@@ -1235,7 +1239,7 @@ export class V1Embed extends TsEmbed {
 
     constructor(domSelector: DOMSelector, viewConfig: ViewConfig) {
         super(domSelector, viewConfig);
-        this.viewConfig = viewConfig;
+        this.viewConfig = { excludeRuntimeFiltersfromURL: true, ...viewConfig };
     }
 
     /**

package/src/index.ts

@@ -46,11 +46,15 @@ import {
     ContextMenuTriggerOptions,
     RuntimeParameter,
     LogLevel,
+    VizPoint,
+    CustomActionPayload,
 } from './types';
 import { CustomCssVariables } from './css-variables';
 import { SageEmbed, SageViewConfig } from './embed/sage';
-import { AnswerService } from './utils/graphql/answerService/answerService';
+import { AnswerService, SessionInterface, UnderlyingDataPoint } from './utils/graphql/answerService/answerService';
 import { getEmbedConfig } from './embed/embedConfig';
+import { uploadMixpanelEvent, MIXPANEL_EVENT } from './mixpanel-service';
+import { tokenizedFetch } from './tokenizedFetch';
 
 export {
     init,
@@ -62,6 +66,7 @@ export {
     exportTMLInput,
     getEmbedConfig as getInitConfig,
     getSessionInfo,
+    tokenizedFetch,
     SearchEmbed,
     SearchBarEmbed,
     PinboardEmbed,
@@ -74,6 +79,8 @@ export {
     AuthEventEmitter,
     AnswerService,
     // types
+    SessionInterface,
+    UnderlyingDataPoint,
     Page,
     AuthType,
     RuntimeFilter,
@@ -103,4 +110,8 @@ export {
     CustomCssVariables,
     RuntimeParameter,
     LogLevel,
+    uploadMixpanelEvent,
+    MIXPANEL_EVENT,
+    VizPoint,
+    CustomActionPayload,
 };

package/src/mixpanel-service.ts

@@ -18,6 +18,7 @@ export const MIXPANEL_EVENT = {
     VISUAL_SDK_ON: 'visual-sdk-on',
     VISUAL_SDK_IFRAME_LOAD_PERFORMANCE: 'visual-sdk-iframe-load-performance',
     VISUAL_SDK_EMBED_CREATE: 'visual-sdk-embed-create',
+    VERCEL_INTEGRATION_COMPLETED: 'vercel-integration-completed',
 };
 
 let isMixpanelInitialized = false;

package/src/react/all-types-export.ts

@@ -18,6 +18,7 @@ export {
     prefetch,
     getInitConfig,
     getSessionInfo,
+    uploadMixpanelEvent,
     PinboardEmbed,
     AuthFailureType,
     AuthStatus,

package/src/react/index.spec.tsx

@@ -135,6 +135,7 @@ describe('React Components', () => {
                             values: [100],
                         },
                     ]}
+                    excludeRuntimeFiltersfromURL={false}
                 />,
             );
 

package/src/test/test-utils.ts

@@ -116,3 +116,12 @@ export const expectUrlMatch = (source: string, target: string) => {
     const targetUrl = new URL(target);
     expect(sourceUrl.hash).toBe(targetUrl.hash);
 };
+
+export const createRootEleForEmbed = () => {
+    const rootEle = document.createElement('div');
+    rootEle.id = 'myRoot';
+    const tsEmbedDiv = document.createElement('div');
+    tsEmbedDiv.id = 'tsEmbedDiv';
+    rootEle.appendChild(tsEmbedDiv);
+    document.body.appendChild(rootEle);
+};

package/src/tokenizedFetch.ts

@@ -3,6 +3,15 @@ import { getEmbedConfig } from './embed/embedConfig';
 
 import { AuthType } from './types';
 
+/**
+ * Fetch wrapper that adds the authentication token to the request.
+ * Use this to call the ThoughtSpot APIs when using the visual embed sdk.
+ *
+ * @param input
+ * @param init
+ * @version SDK: 1.28.0
+ * @group Global methods
+ */
 export const tokenizedFetch: typeof fetch = async (input, init): Promise<Response> => {
     const embedConfig = getEmbedConfig();
     if (embedConfig.authType !== AuthType.TrustedAuthTokenCookieless) {