@thoughtspot/visual-embed-sdk 1.40.1-alpha.1 → 1.41.0-pre-render-1

package/src/embed/ts-embed.ts

@@ -185,10 +185,7 @@ 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;
@@ -201,11 +198,11 @@ export class TsEmbed {
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
+        const embedConfig = getEmbedConfig();
+        this.embedConfig = embedConfig;
+    
         this.hostEventClient = new HostEventClient(this.iFrame);
-
         this.isReadyForRenderPromise = getInitPromise().then(async () => {
-            const embedConfig = getEmbedConfig();
-            this.embedConfig = embedConfig;
             if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
                 this.embedConfig.authTriggerContainer = domSelector;
             }
@@ -313,8 +310,6 @@ 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
@@ -480,67 +475,19 @@ 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);
+
+        const embedListenerReadyHandler = this.createEmbedContainerHandler(EmbedEvent.EmbedListenerReady);
+        this.on(EmbedEvent.EmbedListenerReady, embedListenerReadyHandler, { start: false }, true);
+
+        const authInitHandler = this.createEmbedContainerHandler(EmbedEvent.AuthInit);
+        this.on(EmbedEvent.AuthInit, authInitHandler, { start: false }, true);
     };
 
     /**
@@ -561,6 +508,12 @@ export class TsEmbed {
         return `${basePath}#`;
     }
 
+    protected getUpdateEmbedParamsObject() {
+        let queryParams = this.getEmbedParamsObject();
+        queryParams = { ...this.viewConfig, ...queryParams };
+        return queryParams;
+    }
+
     /**
      * Common query params set for all the embed modes.
      * @param queryParams
@@ -743,10 +696,15 @@ export class TsEmbed {
     }
 
     protected getEmbedParams() {
-        const queryParams = this.getBaseQueryParams();
+        const queryParams = this.getEmbedParamsObject();
         return getQueryParamString(queryParams);
     }
 
+    protected getEmbedParamsObject() {
+        const params = this.getBaseQueryParams();
+        return params;
+    }
+
     protected getRootIframeSrc() {
         const query = this.getEmbedParams();
         return this.getEmbedBasePath(query);
@@ -1131,11 +1089,9 @@ 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;
     }
 
@@ -1183,6 +1139,77 @@ export class TsEmbed {
         }
     }
 
+     /**
+     * @hidden
+     * Internal state to track if the embed container is loaded.
+     * This is used to trigger events after the embed container is loaded.
+     */
+     public isEmbedContainerLoaded = false;
+
+    /**
+     * @hidden
+     * Internal state to track the callbacks to be executed after the embed container 
+     * is loaded.
+     * This is used to trigger events after the embed container is loaded.
+     */
+    private embedContainerReadyCallbacks: Array<() => void> = [];
+
+    protected getPreRenderObj<T extends TsEmbed>(): T {
+        const embedObj = (this.insertedDomEl as any)?.[this.embedNodeKey] as T;
+        if (embedObj === (this as any)) {
+            logger.info('embedObj is same as this');
+        }
+        return embedObj;
+    }
+
+    private checkEmbedContainerLoaded() {
+        if (this.isEmbedContainerLoaded) return true;
+
+        const preRenderObj = this.getPreRenderObj<TsEmbed>();
+        if (preRenderObj && preRenderObj.isEmbedContainerLoaded) {
+            this.isEmbedContainerLoaded = true;
+        }
+
+        return this.isEmbedContainerLoaded;
+    }
+    private executeEmbedContainerReadyCallbacks() {
+        logger.debug('executePendingEvents', this.embedContainerReadyCallbacks);
+        this.embedContainerReadyCallbacks.forEach((callback) => {
+            callback?.();
+        });
+        this.embedContainerReadyCallbacks = [];
+    }
+
+    /**
+     * Executes a callback after the embed container is loaded.
+     * @param callback The callback to execute
+     */
+    protected executeAfterEmbedContainerLoaded(callback: () => void) {
+        if (this.checkEmbedContainerLoaded()) {
+            callback?.();
+        } else {
+            logger.debug('pushing callback to embedContainerReadyCallbacks', callback);
+            this.embedContainerReadyCallbacks.push(callback);
+        }
+    }
+
+    protected createEmbedContainerHandler = (source: EmbedEvent.AuthInit | EmbedEvent.EmbedListenerReady) => () => {
+        const processEmbedContainerReady = () => {
+            logger.debug('processEmbedContainerReady');
+            this.isEmbedContainerLoaded = true;
+            this.executeEmbedContainerReadyCallbacks();
+        }
+        if (source === EmbedEvent.AuthInit) {
+            const AUTH_INIT_FALLBACK_DELAY = 1000;
+            // Wait for 1 second to ensure the embed container is loaded
+            // This is a workaround to ensure the embed container is loaded
+            // this is needed until all clusters have EmbedListenerReady event
+            setTimeout(processEmbedContainerReady, AUTH_INIT_FALLBACK_DELAY);
+        } else if (source === EmbedEvent.EmbedListenerReady) {
+            processEmbedContainerReady();
+        }
+    }
+
     /**
      * Triggers an event to the embedded app
      * @param {HostEvent} messageType The event type
@@ -1251,7 +1278,7 @@ export class TsEmbed {
      * Creates the preRender shell
      * @param showPreRenderByDefault - Show the preRender after render, hidden by default
      */
-    public async preRender(showPreRenderByDefault = false): Promise<TsEmbed> {
+    public async preRender(showPreRenderByDefault = false): Promise<TsEmbed> {        
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
@@ -1379,7 +1406,10 @@ export class TsEmbed {
                 return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
-            this.trigger(HostEvent.UpdateEmbedParams, this.viewConfig);
+            logger.debug('triggering UpdateEmbedParams', this.viewConfig);
+            this.executeAfterEmbedContainerLoaded(() => {
+                this.trigger(HostEvent.UpdateEmbedParams, this.getUpdateEmbedParamsObject());
+            });
         }
 
         this.beforePrerenderVisible();