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

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;
@@ -273,7 +270,7 @@ export class TsEmbed {
         const isDisabled = (
             this.viewConfig.overrideOrgId !== undefined
             || this.embedConfig.disablePreauthCache === true
-            || this.isFullAppEmbedWithVisiblePrimaryNavbar()
+            // || this.isFullAppEmbedWithVisiblePrimaryNavbar()
         );
         return !isDisabled;
     }
@@ -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);
     };
 
     /**
@@ -1131,11 +1078,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 +1128,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
@@ -1379,11 +1395,8 @@ 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) {
@@ -1401,6 +1414,8 @@ export class TsEmbed {
             }
         }
 
+        this.beforePrerenderVisible();
+
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();