@thoughtspot/visual-embed-sdk 1.40.0 → 1.40.1-alpha.1

package/src/embed/ts-embed.ts

@@ -185,7 +185,10 @@ export class TsEmbed {
      */
     private fullscreenChangeHandler: (() => void) | null = null;
 
+    public id: string;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
+        this.id = Date.now().toString();
         this.el = getDOMNode(domSelector);
         this.eventHandlerMap = new Map();
         this.isError = false;
@@ -237,7 +240,7 @@ export class TsEmbed {
      * @param event The window message event
      */
     private getEventType(event: MessageEvent) {
-        // eslint-disable-next-line no-underscore-dangle
+
         return event.data?.type || event.data?.__type;
     }
 
@@ -281,11 +284,11 @@ export class TsEmbed {
      */
     private isFullAppEmbedWithVisiblePrimaryNavbar(): boolean {
         const appViewConfig = this.viewConfig as any;
-        
+
         // Check if this is a FullAppEmbed (AppEmbed)
         // showPrimaryNavbar defaults to true if not explicitly set to false
         return (
-            appViewConfig.embedComponentType === 'AppEmbed' 
+            appViewConfig.embedComponentType === 'AppEmbed'
             && appViewConfig.showPrimaryNavbar === true
         );
     }
@@ -310,6 +313,8 @@ export class TsEmbed {
 
     private subscribedListeners: Record<string, any> = {};
 
+    public isEmbedContainerLoaded = false;
+
     /**
      * Adds a global event listener to window for "message" events.
      * ThoughtSpot detects if a particular event is targeted to this
@@ -431,7 +436,8 @@ export class TsEmbed {
     private updateAuthToken = async (_: any, responder: any) => {
         const { authType } = this.embedConfig;
         let { autoLogin } = this.embedConfig;
-        // Default autoLogin: true for cookieless if undefined/null, otherwise false
+        // Default autoLogin: true for cookieless if undefined/null, otherwise
+        // false
         autoLogin = autoLogin ?? (authType === AuthType.TrustedAuthTokenCookieless);
         if (autoLogin && authType === AuthType.TrustedAuthTokenCookieless) {
             try {
@@ -474,11 +480,65 @@ export class TsEmbed {
         notifyAuthFailure(AuthFailureType.IDLE_SESSION_TIMEOUT);
     };
 
+    private pendingEvents: Array<{ eventType: HostEvent, data: TriggerPayload<any, HostEvent>, onEventTriggered?: () => void }> = [];
+
+    protected getPreRenderObj<T extends TsEmbed>() {
+        const embedObj = (this.insertedDomEl as any)?.[this.embedNodeKey] as T;
+        if (embedObj === (this as any)) {
+            console.log('embedObj is same as this');
+            return null;
+        }
+        return (this.insertedDomEl as any)?.[this.embedNodeKey] as T;
+    }
+
+    private checkEmbedContainerLoaded() {
+        if (this.isEmbedContainerLoaded) return true;
+
+        const preRenderObj = this.getPreRenderObj<TsEmbed>();
+        if (preRenderObj && preRenderObj.isEmbedContainerLoaded) {
+            this.isEmbedContainerLoaded = true;
+        }
+
+        console.log('checkEmbedContainerLoaded', this.isEmbedContainerLoaded);
+
+        return this.isEmbedContainerLoaded;
+    }
+
+    private executePendingEvents() {
+        console.log('executePendingEvents', this.pendingEvents);
+        setTimeout(() => {
+            this.pendingEvents.forEach((event) => {
+                console.log('executing event', event.eventType, event.data);        
+                this.trigger(event.eventType, event.data);
+                event.onEventTriggered?.();
+            });
+            this.pendingEvents = [];
+        }, 1000);
+    }
+    protected triggerAfterLoad(eventType: HostEvent, data: TriggerPayload<any, HostEvent>, onEventTriggered?: () => void) {
+        if (this.checkEmbedContainerLoaded()) {
+            console.log('triggerAfterLoad', eventType, data);
+            this.trigger(eventType, data);
+            onEventTriggered?.();
+        } else {
+            console.log('pushing to pendingEvents', eventType, data, this.getPreRenderObj());
+            this.pendingEvents.push({ eventType, data, onEventTriggered });
+            console.log('pendingEvents', this.pendingEvents);
+        }
+    }
+
     /**
      * Register APP_INIT event and sendback init payload
      */
     private registerAppInit = () => {
         this.on(EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
+        this.on(EmbedEvent.AuthInit, () => {
+            console.log('AuthInit', this.getPreRenderObj());
+            this.isEmbedContainerLoaded = true;
+            console.log('isEmbedContainerLoaded', this.isEmbedContainerLoaded);
+            console.log('executePendingEvents', this.pendingEvents);
+            this.executePendingEvents();
+        }, { start: false }, true);
         this.on(EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
         this.on(EmbedEvent.IdleSessionTimeout, this.idleSessionTimeout, { start: false }, true);
     };
@@ -798,8 +858,9 @@ export class TsEmbed {
                                 }
                             });
                         }
-                        
-                        // Setup fullscreen change handler after iframe is loaded and ready
+
+                        // Setup fullscreen change handler after iframe is
+                        // loaded and ready
                         this.setupFullscreenChangeHandler();
                     });
                     this.iFrame.addEventListener('error', () => {
@@ -926,7 +987,7 @@ export class TsEmbed {
                 const div = document.createElement('div');
                 div.innerHTML = child;
                 div.id = TS_EMBED_ID;
-                // eslint-disable-next-line no-param-reassign
+
                 child = div;
             }
             if (this.el.nextElementSibling?.id === TS_EMBED_ID) {
@@ -1070,11 +1131,11 @@ export class TsEmbed {
         if (this.isRendered) {
             logger.warn('Please register event handlers before calling render');
         }
-        
+
         const callbacks = this.eventHandlerMap.get(messageType) || [];
         callbacks.push({ options, callback });
         this.eventHandlerMap.set(messageType, callbacks);
-        
+
         return this;
     }
 
@@ -1174,7 +1235,7 @@ export class TsEmbed {
         }
         await this.isReadyForRenderPromise;
         this.isRendered = true;
-        
+
         return this;
     }
 
@@ -1288,11 +1349,11 @@ export class TsEmbed {
                 ) {
                     logger.warn(
                         `${viewConfig.embedComponentType || 'Component'} was pre-rendered with `
-                            + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
-                            + `but a different value "${JSON.stringify(viewConfig[key])}" `
-                            + 'was passed to the Embed component. '
-                            + 'The new value provided is ignored, the value provided during '
-                            + 'preRender is used.',
+                        + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+                        + `but a different value "${JSON.stringify(viewConfig[key])}" `
+                        + 'was passed to the Embed component. '
+                        + 'The new value provided is ignored, the value provided during '
+                        + 'preRender is used.',
                     );
                 }
             });
@@ -1318,8 +1379,11 @@ export class TsEmbed {
                 return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
+            this.trigger(HostEvent.UpdateEmbedParams, this.viewConfig);
         }
 
+        this.beforePrerenderVisible();
+
         if (this.el) {
             this.syncPreRenderStyle();
             if (!this.viewConfig.doNotTrackPreRenderSize) {
@@ -1337,12 +1401,10 @@ export class TsEmbed {
             }
         }
 
-        this.beforePrerenderVisible();
-
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();
-        
+
         // Setup fullscreen change handler for prerendered components
         if (this.iFrame) {
             this.setupFullscreenChangeHandler();
@@ -1431,7 +1493,7 @@ export class TsEmbed {
     private setupFullscreenChangeHandler() {
         const embedConfig = getEmbedConfig();
         const disableFullscreenPresentation = embedConfig?.disableFullscreenPresentation ?? true;
-        
+
         if (disableFullscreenPresentation) {
             return;
         }
@@ -1444,7 +1506,8 @@ export class TsEmbed {
             const isFullscreen = !!document.fullscreenElement;
             if (!isFullscreen) {
                 logger.info('Exited fullscreen mode - triggering ExitPresentMode');
-                // Only trigger if iframe is available and contentWindow is accessible
+                // Only trigger if iframe is available and contentWindow is
+                // accessible
                 if (this.iFrame && this.iFrame.contentWindow) {
                     this.trigger(HostEvent.ExitPresentMode);
                 } else {
@@ -1540,6 +1603,6 @@ export class V1Embed extends TsEmbed {
      * Only for testing purposes.
      * @hidden
      */
-    // eslint-disable-next-line camelcase
+
     public test__executeCallbacks = this.executeCallbacks;
 }

package/src/types.ts

@@ -2339,7 +2339,7 @@ export enum EmbedEvent {
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      * @example
      *```js
-     * liveboardEmbed.on(EmbedEvent.LiveboardInfo, payload => {
+     * liveboardEmbed.on(EmbedEvent.AnswerChartSwitcher, payload => {
      *    console.log('Liveboard details', payload);
      * })
      *```
@@ -2714,58 +2714,58 @@ export enum EmbedEvent {
      */
     RequestVisibleEmbedCoordinates = 'requestVisibleEmbedCoordinates',
     /**
-     * Emitted when Spotter response is text data
+     * Emitted when spotter response is text data
      * @example
      * ```js
      * spotterEmbed.on(EmbedEvent.SpotterData, (payload) => {
      *     console.log('payload', payload);
      * })
      *```
-     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
     SpotterData = 'SpotterData',
     /**
-     * Emitted when user opens up the worksheet preview modal in Spotter embed.
+     * Emitted when user opens up the worksheet preview modal in spotter embed.
      * @example
      * ```js
      * spotterEmbed.on(EmbedEvent.PreviewSpotterData, (payload) => {
      *     console.log('payload', payload);
      * })
      *```
-     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
     PreviewSpotterData = 'PreviewSpotterData',
     /**
-     * Emitted when the Spotter query is triggered in Spotter embed.
+     * Emitted when the spotter query is triggered in spotter embed.
      * @example
      * ```js
      * spotterEmbed.on(EmbedEvent.SpotterQueryTriggered, (payload) => {
      *     console.log('payload', payload);
      * })
      *```
-     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
     SpotterQueryTriggered = 'SpotterQueryTriggered',
     /**
-     * Emitted when the last Spotter query is edited in Spotter embed.
+     * Emitted when the last spotter query is edited in spotter embed.
      * @example
      * ```js
      * spotterEmbed.on(EmbedEvent.LastPromptEdited, (payload) => {
      *     console.log('payload', payload);
      * })
      *```
-     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
     LastPromptEdited = 'LastPromptEdited',
     /**
-     * Emitted when the last Spotter query is deleted in Spotter embed.
+     * Emitted when the last spotter query is deleted in spotter embed.
      * @example
      * ```js
      * spotterEmbed.on(EmbedEvent.LastPromptDeleted, (payload) => {
      *     console.log('payload', payload);
      * })
      *```
-     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
     LastPromptDeleted = 'LastPromptDeleted',
     /**
@@ -2776,7 +2776,7 @@ export enum EmbedEvent {
      *     console.log('payload', payload);
      * })
      *```
-     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
     ResetSpotterConversation = 'ResetSpotterConversation',
     /**
@@ -2789,7 +2789,7 @@ export enum EmbedEvent {
      *```
      * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
-    SpotterInit = 'spotterInit'
+    SpotterInit = 'SpotterInit'
 }
 
 /**
@@ -2879,7 +2879,6 @@ export enum HostEvent {
      * done automatically on the most popular column.
      * @param - vizId [TS >= 9.8.0] - Optional. The GUID of the visualization to drill
      * in case of a Liveboard.
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
      * @example
      * ```js
      * searchEmbed.on(EmbedEvent.VizPointDoubleClick, (payload) => {
@@ -3199,21 +3198,12 @@ export enum HostEvent {
      * Trigger the **Download PDF** action on an embedded Liveboard,
      * visualization or Answer.
      *
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
-     * 
      * **NOTE**: The **Download** > **PDF** action is available on
      * visualizations and Answers if the data is in tabular format.
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.DownloadAsPdf)
      * ```
-     * @example
-     * ```js
-     * spotterEmbed.trigger(HostEvent.DownloadAsPdf, {
-     *     vizId:'730496d6-6903-4601-937e-2c691821af3c'
-     *  });
-     * ```
-     * 
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
     DownloadAsPdf = 'downloadAsPdf',
@@ -3315,8 +3305,7 @@ export enum HostEvent {
      * This event is not supported in visualization embed and search embed.
      * @param - object - To trigger the action for a specific visualization
      * in Liveboard embed, pass in `vizId` as a key.
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
-     * 
+     * **Required** in Spotter embed.
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.Edit)
@@ -3331,12 +3320,6 @@ export enum HostEvent {
      *     vizId:'730496d6-6903-4601-937e-2c691821af3c'
      *  });
      * ```
-     * @example
-     * ```js
-     * const editResponse = await spotterEmbed.trigger(HostEvent.Edit, {
-     *     vizId:'730496d6-6903-4601-937e-2c691821af3c'
-     *  });
-     * ```
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
     Edit = 'edit',
@@ -3457,7 +3440,6 @@ export enum HostEvent {
     /**
      * Trigger the **Download** action on charts in
      * the embedded view.
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.Download, {vizId:
@@ -3466,11 +3448,6 @@ export enum HostEvent {
      * ```js
      * embed.trigger(HostEvent.Download)
      * ```
-     * ```js
-     * spotterEmbed.trigger(HostEvent.Download, {
-     *     vizId:'730496d6-6903-4601-937e-2c691821af3c'
-     *  });
-     * ```
      * @deprecated from SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl ,9.4.1.sw
      * Use {@link DownloadAsPng}
      * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1.sw
@@ -3499,7 +3476,6 @@ export enum HostEvent {
     /**
      * Trigger the **Download** > **CSV**  action on tables in
      * the embedded view.
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.DownloadAsCsv, {vizId:
@@ -3522,7 +3498,6 @@ export enum HostEvent {
     /**
      * Trigger the **Download** > **XLSX**  action on tables
      * in the embedded view.
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.DownloadAsXlsx, {vizId:
@@ -3558,7 +3533,7 @@ export enum HostEvent {
     /**
      * Trigger the **Save**  action on a Liveboard or Answer.
      * Saves the changes.
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
+     * @param - `vizId` is required in Spotter Embed.
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.Save)
@@ -3868,7 +3843,6 @@ export enum HostEvent {
     UpdateParameters = 'UpdateParameters',
     /**
      * Triggers GetParameters to fetch the runtime Parameters.
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
      * ```js
      * liveboardEmbed.trigger(HostEvent.GetParameters).then((parameter) => {
      *  console.log('parameters', parameter);
@@ -3912,7 +3886,7 @@ export enum HostEvent {
      * @param - optional attributes to set Answer properties.
      *  `name` - Name string for the Answer.
      *  `description` - Description text for the Answer.
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
+     *
      * @example
      * ```js
      * const saveAnswerResponse = await searchEmbed.trigger(HostEvent.SaveAnswer, {
@@ -3920,14 +3894,6 @@ export enum HostEvent {
      *      description: "Total sales by states in MidWest"
      *   });
      * ```
-     * @example
-     * ```js
-     * const saveAnswerResponse = await spotterEmbed.trigger(HostEvent.SaveAnswer, {
-     *      vizId: '730496d6-6903-4601-937e-2c691821af3c',
-     *      name: "Sales by states",
-     *      description: "Total sales by states in MidWest"
-     * });
-     * ```
      * @version SDK: 1.36.0 | ThoughtSpot: 10.6.0.cl
      */
     SaveAnswer = 'saveAnswer',
@@ -3959,7 +3925,7 @@ export enum HostEvent {
     /**
      * Triggers a search operation with the search tokens specified in
      * the search query string in spotter embed.
-     * @param - `query`: Text string in Natural Language format
+     * @param - `queryString`: Text string in Natural Language format
      * @param - `executeSearch`: Boolean to execute search and update search query
      * @example
      * ```js
@@ -3968,7 +3934,6 @@ export enum HostEvent {
      *  executeSearch: true,
      * })
      * ```
-     * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     SpotterSearch = 'SpotterSearch',
     /**
@@ -3978,7 +3943,6 @@ export enum HostEvent {
      * ```js
      * spotterEmbed.trigger(HostEvent.EditLastPrompt, "revenue per year");
      * ```
-     * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     EditLastPrompt = 'EditLastPrompt',
     /**
@@ -3987,7 +3951,6 @@ export enum HostEvent {
      * ```js
      * spotterEmbed.trigger(HostEvent.PreviewSpotterData);
      * ```
-     * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     PreviewSpotterData = 'PreviewSpotterData',
     /**
@@ -3996,7 +3959,6 @@ export enum HostEvent {
      * ```js
      * spotterEmbed.trigger(HostEvent.ResetSpotterConversation);
      * ```
-     * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     ResetSpotterConversation = 'ResetSpotterConversation',
     /**
@@ -4005,19 +3967,17 @@ export enum HostEvent {
      * ```js
      * spotterEmbed.trigger(HostEvent.DeleteLastPrompt);
      * ```
-     * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     DeleteLastPrompt = 'DeleteLastPrompt',
     /**
      * Toggle the visualization to chart or table view.
-     * @param - `vizId ` refers to the answer id in spotter Embed, it is required in spotter Embed.
+     * @param - `vizId ` In Spotter Embed, vizId is required.
      * @example
      * ```js
      * spotterEmbed.trigger(HostEvent.AnswerChartSwitcher, {
-     *          vizId:'b535c760-8bbe-4e6f-bb26-af56b4129a1e'
+     *          vizId:"'b535c760-8bbe-4e6f-bb26-af56b4129a1e'"
      * });
      *```
-     * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     AnswerChartSwitcher = 'answerChartSwitcher',
     /**
@@ -4044,16 +4004,26 @@ export enum HostEvent {
      */
     VisibleEmbedCoordinates = 'visibleEmbedCoordinates',
     /**
-     * Trigger the *Ask Spotter* action for visualizations
-     * @param - `vizId` refers to the Answer ID in Spotter embed and is required in Spotter embed.
+     * Trigger the *Ask Sage* action for visualizations
      * @example
      * ```js
-     * spotterEmbed.trigger(HostEvent.AskSpotter,
-     * {vizId:'730496d6-6903-4601-937e-2c691821af3c'})
+     * liveboardEmbed.trigger(HostEvent.AskSpotter,
+     * {containerId:'730496d6-6903-4601-937e-2c691821af3c'})
      * ```
      * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
-    AskSpotter = 'AskSpotter',
+    AskSpotter = 'askSpotter',
+
+    /**
+     * @hidden
+     * Triggers the update of the embed params.
+     * 
+     * @example
+     * ```js
+     * liveboardEmbed.trigger(HostEvent.UpdateEmbedParams, viewConfig);
+     * ```
+     */
+    UpdateEmbedParams = 'updateEmbedParams',
 }
 
 /**