@thoughtspot/visual-embed-sdk 1.48.0 → 1.49.1

package/src/embed/ts-embed.ts

@@ -35,6 +35,7 @@ import {
     removeStyleProperties,
     isUndefined,
     getHostEventsConfig,
+    getValueFromWindow,
 } from '../utils';
 import { getCustomActions } from '../utils/custom-actions';
 import {
@@ -67,18 +68,27 @@ import {
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 import { processEventData, processAuthFailure } from '../utils/processData';
-import { version } from '../../package.json';
+import { version } from '../utils/sdk-version';
 import {
-    getAuthPromise, renderInQueue, handleAuth, notifyAuthFailure,
+    getAuthPromise,
+    renderInQueue,
+    handleAuth,
+    notifyAuthFailure,
     getInitPromise,
     getIsInitCalled,
+    getIsInitCompleted,
 } from './base';
 import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
 import { ERROR_MESSAGE } from '../errors';
 import { getPreauthInfo } from '../utils/sessionInfoService';
 import { HostEventClient } from './hostEventClient/host-event-client';
-import { getInterceptInitData, handleInterceptEvent, processApiInterceptResponse, processLegacyInterceptResponse } from '../api-intercept';
+import {
+    getInterceptInitData,
+    handleInterceptEvent,
+    processApiInterceptResponse,
+    processLegacyInterceptResponse,
+} from '../api-intercept';
 
 /**
  * Global prefix for all ThoughtSpot postHash Params.
@@ -111,7 +121,7 @@ export class TsEmbed {
     /**
      * The DOM node where the ThoughtSpot app is to be embedded.
      */
-    protected el: HTMLElement;
+    protected hostElement: HTMLElement;
 
     /**
      * The key to store the embed instance in the DOM node
@@ -135,7 +145,11 @@ export class TsEmbed {
         this.hostEventClient.setIframeElement(iFrame);
     }
 
-    protected viewConfig: ViewConfig & { visibleTabs?: string[], hiddenTabs?: string[], showAlerts?: boolean };
+    protected viewConfig: ViewConfig & {
+        visibleTabs?: string[];
+        hiddenTabs?: string[];
+        showAlerts?: boolean;
+    };
 
     protected embedConfig: EmbedConfig;
 
@@ -186,6 +200,7 @@ export class TsEmbed {
     protected hostEventClient: HostEventClient;
 
     protected isReadyForRenderPromise;
+    protected shouldWaitForRenderPromise: boolean;
 
     /**
      * Handler for fullscreen change events
@@ -193,7 +208,7 @@ export class TsEmbed {
     private fullscreenChangeHandler: (() => void) | null = null;
 
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
-        this.el = getDOMNode(domSelector);
+        this.hostElement = getDOMNode(domSelector);
         this.eventHandlerMap = new Map();
         this.isError = false;
         this.viewConfig = {
@@ -206,17 +221,42 @@ export class TsEmbed {
             ...viewConfig,
         });
         const embedConfig = getEmbedConfig();
-        this.embedConfig = embedConfig;
-
+        if (embedConfig) {
+            this.embedConfig = embedConfig;
+            this.thoughtSpotHost = getThoughtSpotHost(embedConfig);
+            this.thoughtSpotV2Base = getV2BasePath(embedConfig);
+        }
         this.hostEventClient = new HostEventClient(this.iFrame);
-        this.isReadyForRenderPromise = getInitPromise().then(async () => {
-            if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
+        this.shouldWaitForRenderPromise = !getIsInitCompleted();
+        const afterInit = () => {
+            // Prefer the config captured at construction time; fall back to
+            // getEmbedConfig() for the case where init()
+            // hadn't been called yet.
+            this.embedConfig = embedConfig ?? getEmbedConfig();
+            if (!this.embedConfig) {
+                logger.error('embedConfig unavailable in afterInit; init() may not have completed');
+                return;
+            }
+            if (!this.embedConfig.authTriggerContainer && !this.embedConfig.useEventForSAMLPopup) {
                 this.embedConfig.authTriggerContainer = domSelector;
             }
-            this.thoughtSpotHost = getThoughtSpotHost(embedConfig);
-            this.thoughtSpotV2Base = getV2BasePath(embedConfig);
-            this.shouldEncodeUrlQueryParams = embedConfig.shouldEncodeUrlQueryParams;
-        });
+            this.thoughtSpotHost = getThoughtSpotHost(this.embedConfig);
+            this.thoughtSpotV2Base = getV2BasePath(this.embedConfig);
+            this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
+        };
+        if (!this.shouldWaitForRenderPromise) {
+            afterInit();
+        } else {
+            this.isReadyForRenderPromise = getInitPromise()
+                .then(afterInit)
+                .catch((err) => {
+                    logger.error('SDK init failed before embed could be configured', err);
+                    this.throwInitError();
+                })
+                .finally(() => {
+                    this.shouldWaitForRenderPromise = false;
+                });
+        }
     }
 
     /**
@@ -227,7 +267,7 @@ export class TsEmbed {
             errorType: ErrorDetailsTypes.VALIDATION_ERROR,
             message: ERROR_MESSAGE.INIT_SDK_REQUIRED,
             code: EmbedErrorCodes.INIT_ERROR,
-            error : ERROR_MESSAGE.INIT_SDK_REQUIRED,
+            error: ERROR_MESSAGE.INIT_SDK_REQUIRED,
         });
     }
 
@@ -248,7 +288,6 @@ export class TsEmbed {
      * @param event The window message event
      */
     private getEventType(event: MessageEvent) {
-
         return event.data?.type || event.data?.__type;
     }
 
@@ -278,11 +317,10 @@ export class TsEmbed {
         // 3. FullAppEmbed has primary navbar visible since:
         //    - primary navbar requires fresh auth state for navigation
         //    - cached auth may not reflect current user permissions
-        const isDisabled = (
-            this.viewConfig.overrideOrgId !== undefined
-            || this.embedConfig.disablePreauthCache === true
-            || this.isFullAppEmbedWithVisiblePrimaryNavbar()
-        );
+        const isDisabled =
+            this.viewConfig.overrideOrgId !== undefined ||
+            this.embedConfig.disablePreauthCache === true ||
+            this.isFullAppEmbedWithVisiblePrimaryNavbar();
         return !isDisabled;
     }
 
@@ -296,8 +334,8 @@ export class TsEmbed {
         // Check if this is a FullAppEmbed (AppEmbed)
         // showPrimaryNavbar defaults to true if not explicitly set to false
         return (
-            appViewConfig.embedComponentType === 'AppEmbed'
-            && appViewConfig.showPrimaryNavbar === true
+            appViewConfig.embedComponentType === 'AppEmbed' &&
+            appViewConfig.showPrimaryNavbar === true
         );
     }
 
@@ -338,7 +376,7 @@ export class TsEmbed {
                 errorType: ErrorDetailsTypes.NETWORK,
                 message: ERROR_MESSAGE.OFFLINE_WARNING,
                 code: EmbedErrorCodes.NETWORK_ERROR,
-                offlineWarning : ERROR_MESSAGE.OFFLINE_WARNING,
+                offlineWarning: ERROR_MESSAGE.OFFLINE_WARNING,
             };
             this.executeCallbacks(EmbedEvent.Error, errorDetails);
             logger.warn(errorDetails);
@@ -349,15 +387,29 @@ export class TsEmbed {
         this.subscribedListeners.offline = offlineEventListener;
     }
 
-    private handleApiInterceptEvent({ eventData, eventPort }: { eventData: any, eventPort: MessagePort | void }) {
+    private handleApiInterceptEvent({
+        eventData,
+        eventPort,
+    }: {
+        eventData: any;
+        eventPort: MessagePort | void;
+    }) {
         const executeEvent = (_eventType: EmbedEvent, data: any) => {
             this.executeCallbacks(_eventType, data, eventPort);
-        }
-        const getUnsavedAnswerTml = async (props: { sessionId?: string, vizId?: string }) => {
-            const response = await this.triggerUIPassThrough(UIPassthroughEvent.GetUnsavedAnswerTML, props);
+        };
+        const getUnsavedAnswerTml = async (props: { sessionId?: string; vizId?: string }) => {
+            const response = await this.triggerUIPassThrough(
+                UIPassthroughEvent.GetUnsavedAnswerTML,
+                props,
+            );
             return response.filter((item) => item.value)?.[0]?.value;
-        }
-        handleInterceptEvent({ eventData, executeEvent, viewConfig: this.viewConfig, getUnsavedAnswerTml });
+        };
+        handleInterceptEvent({
+            eventData,
+            executeEvent,
+            viewConfig: this.viewConfig,
+            getUnsavedAnswerTml,
+        });
     }
 
     private messageEventListener = (event: MessageEvent<any>) => {
@@ -369,7 +421,7 @@ export class TsEmbed {
                 eventType,
                 eventData,
                 this.thoughtSpotHost,
-                this.isPreRendered ? this.preRenderWrapper : this.el,
+                this.isPreRendered ? this.preRenderWrapper : this.hostElement,
             );
 
             if (eventType === EmbedEvent.ApiIntercept) {
@@ -377,11 +429,7 @@ export class TsEmbed {
                 return;
             }
 
-            this.executeCallbacks(
-                eventType,
-                processedEventData,
-                eventPort,
-            );
+            this.executeCallbacks(eventType, processedEventData, eventPort);
         }
     };
     /**
@@ -394,7 +442,6 @@ export class TsEmbed {
 
         this.subscribedListeners.message = this.messageEventListener;
     }
-   
 
     /**
      * Adds event listeners for both network and message events.
@@ -409,7 +456,6 @@ export class TsEmbed {
         this.subscribeToMessageEvents();
     }
 
-
     private unsubscribeToNetworkEvents() {
         if (this.subscribedListeners.online) {
             window.removeEventListener('online', this.subscribedListeners.online);
@@ -441,7 +487,7 @@ export class TsEmbed {
         try {
             authToken = await getAuthenticationToken(this.embedConfig);
         } catch (e) {
-            processAuthFailure(e, this.isPreRendered ? this.preRenderWrapper : this.el);
+            processAuthFailure(e, this.isPreRendered ? this.preRenderWrapper : this.hostElement);
             throw e;
         }
 
@@ -452,15 +498,18 @@ export class TsEmbed {
         const authToken = await this.getAuthTokenForCookielessInit();
         const customActionsResult = getCustomActions([
             ...(this.viewConfig.customActions || []),
-            ...(this.embedConfig.customActions || [])
+            ...(this.embedConfig.customActions || []),
         ]);
         if (customActionsResult.errors.length > 0) {
             this.handleError({
-                    errorType: ErrorDetailsTypes.VALIDATION_ERROR,
+                errorType: ErrorDetailsTypes.VALIDATION_ERROR,
+                message: customActionsResult.errors,
+                code: EmbedErrorCodes.CUSTOM_ACTION_VALIDATION,
+                error: {
+                    type: EmbedErrorCodes.CUSTOM_ACTION_VALIDATION,
                     message: customActionsResult.errors,
-                    code: EmbedErrorCodes.CUSTOM_ACTION_VALIDATION,
-                    error : { type: EmbedErrorCodes.CUSTOM_ACTION_VALIDATION, message: customActionsResult.errors }
-                });
+                },
+            });
         }
         const baseInitData = {
             customisations: getCustomisations(this.embedConfig, this.viewConfig),
@@ -521,11 +570,11 @@ export class TsEmbed {
     private async refreshAuthTokenForCookieless(
         responder: (data: any) => void,
         eventType: EmbedEvent,
-        forceRefresh: boolean = false
+        forceRefresh: boolean = false,
     ): Promise<void> {
         const { authType, autoLogin } = this.embedConfig;
-        const isAutoLoginTrue = autoLogin ?? (authType === AuthType.TrustedAuthTokenCookieless);
-        
+        const isAutoLoginTrue = autoLogin ?? authType === AuthType.TrustedAuthTokenCookieless;
+
         if (isAutoLoginTrue && authType === AuthType.TrustedAuthTokenCookieless) {
             const authToken = await getAuthenticationToken(this.embedConfig, forceRefresh);
             responder({
@@ -537,21 +586,24 @@ export class TsEmbed {
 
     private handleAuthFailure = (error: Error) => {
         logger.error(`${ERROR_MESSAGE.INVALID_TOKEN_ERROR} Error : ${error?.message}`);
-        processAuthFailure(error, this.isPreRendered ? this.preRenderWrapper : this.el);
-    }
+        processAuthFailure(error, this.isPreRendered ? this.preRenderWrapper : this.hostElement);
+    };
 
     /**
      * Refresh the auth token if the autoLogin is true and the authType is TrustedAuthTokenCookieless
      * @param _
      * @param responder
      */
-    private tokenRefresh = async (_: MessagePayload, responder: (data: {type: EmbedEvent, data: {authToken: string}}) => void) => {
+    private tokenRefresh = async (
+        _: MessagePayload,
+        responder: (data: { type: EmbedEvent; data: { authToken: string } }) => void,
+    ) => {
         try {
             await this.refreshAuthTokenForCookieless(responder, EmbedEvent.RefreshAuthToken, true);
         } catch (e) {
             this.handleAuthFailure(e);
         }
-    }
+    };
 
     /**
      * Sends updated auth token to the iFrame to avoid user logout
@@ -562,14 +614,14 @@ export class TsEmbed {
         const { authType, autoLogin: autoLoginConfig } = this.embedConfig;
         // Default autoLogin: true for cookieless if undefined/null, otherwise
         // false
-        const autoLogin = autoLoginConfig ?? (authType === AuthType.TrustedAuthTokenCookieless);
-        
+        const autoLogin = autoLoginConfig ?? authType === AuthType.TrustedAuthTokenCookieless;
+
         try {
             await this.refreshAuthTokenForCookieless(responder, EmbedEvent.AuthExpire, false);
         } catch (e) {
             this.handleAuthFailure(e);
         }
-        
+
         if (autoLogin && authType !== AuthType.TrustedAuthTokenCookieless) {
             handleAuth();
         }
@@ -582,20 +634,22 @@ export class TsEmbed {
      * @param responder
      */
     private idleSessionTimeout = (_: any, responder: any) => {
-        handleAuth().then(async () => {
-            let authToken = '';
-            try {
-                authToken = await getAuthenticationToken(this.embedConfig);
-                responder({
-                    type: EmbedEvent.IdleSessionTimeout,
-                    data: { authToken },
-                });
-            } catch (e) {
-                this.handleAuthFailure(e);
-            }
-        }).catch((e) => {
-            logger.error(`Auto Login failed, Error : ${e?.message}`);
-        });
+        handleAuth()
+            .then(async () => {
+                let authToken = '';
+                try {
+                    authToken = await getAuthenticationToken(this.embedConfig);
+                    responder({
+                        type: EmbedEvent.IdleSessionTimeout,
+                        data: { authToken },
+                    });
+                } catch (e) {
+                    this.handleAuthFailure(e);
+                }
+            })
+            .catch((e) => {
+                logger.error(`Auto Login failed, Error : ${e?.message}`);
+            });
         notifyAuthFailure(AuthFailureType.IDLE_SESSION_TIMEOUT);
     };
 
@@ -607,9 +661,11 @@ export class TsEmbed {
         this.on(EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
         this.on(EmbedEvent.IdleSessionTimeout, this.idleSessionTimeout, { start: false }, true);
 
-        const embedListenerReadyHandler = this.createEmbedContainerHandler(EmbedEvent.EmbedListenerReady);
+        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);
         this.on(EmbedEvent.RefreshAuthToken, this.tokenRefresh, { start: false }, true);
@@ -637,7 +693,7 @@ export class TsEmbed {
         let queryParams = this.getEmbedParamsObject();
         const appInitData = await this.getAppInitData();
         queryParams = { ...this.viewConfig, ...queryParams, ...appInitData };
-        
+
         return queryParams;
     }
 
@@ -718,7 +774,7 @@ export class TsEmbed {
                 errorType: ErrorDetailsTypes.VALIDATION_ERROR,
                 message: ERROR_MESSAGE.CONFLICTING_ACTIONS_CONFIG,
                 code: EmbedErrorCodes.CONFLICTING_ACTIONS_CONFIG,
-                error : ERROR_MESSAGE.CONFLICTING_ACTIONS_CONFIG,
+                error: ERROR_MESSAGE.CONFLICTING_ACTIONS_CONFIG,
             });
             return queryParams;
         }
@@ -728,7 +784,7 @@ export class TsEmbed {
                 errorType: ErrorDetailsTypes.VALIDATION_ERROR,
                 message: ERROR_MESSAGE.CONFLICTING_TABS_CONFIG,
                 code: EmbedErrorCodes.CONFLICTING_TABS_CONFIG,
-                error : ERROR_MESSAGE.CONFLICTING_TABS_CONFIG,
+                error: ERROR_MESSAGE.CONFLICTING_TABS_CONFIG,
             });
             return queryParams;
         }
@@ -774,8 +830,8 @@ export class TsEmbed {
             queryParams[Param.IconSpriteUrl] = spriteUrl.replace('https://', '');
         }
 
-        const stringIDsUrl = customizations?.content?.stringIDsUrl
-            || embedCustomizations?.content?.stringIDsUrl;
+        const stringIDsUrl =
+            customizations?.content?.stringIDsUrl || embedCustomizations?.content?.stringIDsUrl;
         if (stringIDsUrl) {
             queryParams[Param.StringIDsUrl] = stringIDsUrl;
         }
@@ -786,13 +842,10 @@ export class TsEmbed {
         if (locale !== undefined) {
             queryParams[Param.Locale] = locale;
         }
-        // TODO: Once V2 is stable, send both flags when
-        // linkOverride is true (remove the else-if).
-        if (enableLinkOverridesV2) {
+
+        if (!disableRedirectionLinksInNewTab && (enableLinkOverridesV2 || linkOverride)) {
             queryParams[Param.EnableLinkOverridesV2] = true;
             queryParams[Param.LinkOverride] = true;
-        } else if (linkOverride) {
-            queryParams[Param.LinkOverride] = linkOverride;
         }
         if (insertInToSlide) {
             queryParams[Param.ShowInsertToSlide] = insertInToSlide;
@@ -889,8 +942,14 @@ export class TsEmbed {
         return iFrame;
     }
 
+    /**
+     * Returns true if this embed instance is configured for pre-rendering.
+     */
+    protected isPreRenderEmbed() {
+        return !!this.viewConfig.preRenderId;
+    }
     protected handleInsertionIntoDOM(child: string | Node): void {
-        if (this.isPreRendered) {
+        if (this.isPreRenderEmbed()) {
             this.insertIntoDOMForPreRender(child);
         } else {
             this.insertIntoDOM(child);
@@ -898,6 +957,9 @@ export class TsEmbed {
         if (this.insertedDomEl instanceof Node) {
             (this.insertedDomEl as any)[this.embedNodeKey] = this;
         }
+        if (this.preRenderWrapper) {
+            (this.preRenderWrapper as any)[this.embedNodeKey] = this;
+        }
     }
 
     /**
@@ -990,7 +1052,7 @@ export class TsEmbed {
                         errorType: ErrorDetailsTypes.API,
                         message: error.message || ERROR_MESSAGE.LOGIN_FAILED,
                         code: EmbedErrorCodes.LOGIN_FAILED,
-                        error : error,
+                        error: error,
                     });
                 });
         });
@@ -1019,6 +1081,14 @@ export class TsEmbed {
 
     protected preRenderChild: HTMLElement;
 
+    /**
+     * Checks for an existing pre-rendered component and connects to it.
+     *
+     * If a matching pre-rendered component is found in the DOM, this method
+     * sets the internal properties of the embed object to reference it.
+     *
+     * @returns True if a connection was successfully established, false otherwise.
+     */
     protected connectPreRendered(): boolean {
         const preRenderIds = this.getPreRenderIds();
         const preRenderWrapperElement = document.getElementById(preRenderIds.wrapper);
@@ -1031,19 +1101,14 @@ export class TsEmbed {
             if (this.preRenderChild instanceof HTMLIFrameElement) {
                 this.setIframeElement(this.preRenderChild);
             }
-            this.insertedDomEl = this.preRenderWrapper;
             this.isRendered = true;
         }
 
-        return this.isPreRenderAvailable();
+        return this.isPreRenderConnected();
     }
 
-    protected isPreRenderAvailable(): boolean {
-        return (
-            this.isRendered
-            && this.isPreRendered
-            && Boolean(this.preRenderWrapper && this.preRenderChild)
-        );
+    protected isPreRenderConnected(): boolean {
+        return Boolean(this.preRenderWrapper && this.preRenderChild);
     }
 
     protected createPreRenderChild(child: string | Node): HTMLElement {
@@ -1069,6 +1134,24 @@ export class TsEmbed {
         return divChildNode;
     }
 
+    /**
+     * Creates the in-flow placeholder div inserted into the host element when
+     * showPreRender() is called. The wrapper observes this element to stay
+     * aligned with the host layout.
+     */
+    private createPreRenderPlaceholder(): HTMLDivElement {
+        const placeholder = document.createElement('div');
+        const id = this.getPreRenderIds();
+        const { width: frameWidth, height: frameHeight } = this.viewConfig.frameParams || {};
+        const width = getCssDimension(frameWidth || DEFAULT_EMBED_WIDTH);
+        const height = getCssDimension(frameHeight || DEFAULT_EMBED_HEIGHT);
+        placeholder.style.width = width;
+        placeholder.style.height = height;
+        // we can improve this , lol
+        placeholder.id = id.placeHolder;
+        return placeholder;
+    }
+
     protected insertIntoDOMForPreRender(child: string | Node): void {
         const preRenderChild = this.createPreRenderChild(child);
         const preRenderWrapper = this.createPreRenderWrapper();
@@ -1080,7 +1163,11 @@ export class TsEmbed {
         if (preRenderChild instanceof HTMLIFrameElement) {
             this.setIframeElement(preRenderChild);
         }
-        this.insertedDomEl = preRenderWrapper;
+
+        if (this.iFrame) {
+            this.iFrame.style.height = '100%';
+            this.iFrame.style.width = '100%';
+        }
 
         if (this.showPreRenderByDefault) {
             this.showPreRender();
@@ -1102,17 +1189,17 @@ export class TsEmbed {
 
                 child = div;
             }
-            if (this.el.nextElementSibling?.id === TS_EMBED_ID) {
-                this.el.nextElementSibling.remove();
+            if (this.hostElement.nextElementSibling?.id === TS_EMBED_ID) {
+                this.hostElement.nextElementSibling.remove();
             }
-            this.el.parentElement.insertBefore(child, this.el.nextSibling);
+            this.hostElement.parentElement.insertBefore(child, this.hostElement.nextSibling);
             this.insertedDomEl = child;
         } else if (typeof child === 'string') {
-            this.el.innerHTML = child;
-            this.insertedDomEl = this.el.children[0];
+            this.hostElement.innerHTML = child;
+            this.insertedDomEl = this.hostElement.children[0];
         } else {
-            this.el.innerHTML = '';
-            this.el.appendChild(child);
+            this.hostElement.innerHTML = '';
+            this.hostElement.appendChild(child);
             this.insertedDomEl = child;
         }
     }
@@ -1122,7 +1209,16 @@ export class TsEmbed {
      * @param height The height in pixels
      */
     protected setIFrameHeight(height: number | string): void {
-        this.iFrame.style.height = getCssDimension(height);
+        if (this.isPreRendered) {
+            if (this.insertedDomEl) {
+                (this.insertedDomEl as HTMLElement).style.height = getCssDimension(height);
+            } else if (this.preRenderWrapper) {
+                this.preRenderWrapper.style.height = getCssDimension(height);
+            }
+        } else {
+            // normal (non-preRender) mode: size the iframe directly
+            this.iFrame.style.height = getCssDimension(height);
+        }
     }
 
     /**
@@ -1130,10 +1226,12 @@ export class TsEmbed {
      * Embed event handler -> responder -> createEmbedEventResponder -> send response
      * @param eventPort The event port for a specific MessageChannel
      * @param eventType The event type
-     * @returns 
+     * @returns
      */
-    protected createEmbedEventResponder = (eventPort: MessagePort | void, eventType: EmbedEvent) => {
-
+    protected createEmbedEventResponder = (
+        eventPort: MessagePort | void,
+        eventType: EmbedEvent,
+    ) => {
         const getPayloadToSend = (payload: any) => {
             if (eventType === EmbedEvent.OnBeforeGetVizDataIntercept) {
                 return processLegacyInterceptResponse(payload);
@@ -1142,25 +1240,26 @@ export class TsEmbed {
                 return processApiInterceptResponse(payload);
             }
             return payload;
-        }   
+        };
         return (payload: any) => {
             const payloadToSend = getPayloadToSend(payload);
             this.triggerEventOnPort(eventPort, payloadToSend);
-        }
-    }
+        };
+    };
 
-    private shouldSkipEvent(eventType: EmbedEvent, data: any): boolean {                                                                                                         
-        const errorType = data?.errorType ?? data?.data?.code;                                                                                                              
-        if (                                                                                                                                                                     
-            eventType === EmbedEvent.Error
-            && errorType === EmbedErrorCodes.HOST_EVENT_VALIDATION                                                                                                                  
-            && (!getHostEventsConfig(this.viewConfig).useHostEventsV2 || getHostEventsConfig(this.viewConfig).shouldBypassPayloadValidation)                                                                                                                                
+    private shouldSkipEvent(eventType: EmbedEvent, data: any): boolean {
+        const errorType = data?.errorType ?? data?.data?.code;
+        if (
+            eventType === EmbedEvent.Error &&
+            errorType === EmbedErrorCodes.HOST_EVENT_VALIDATION &&
+            (!getHostEventsConfig(this.viewConfig).useHostEventsV2 ||
+                getHostEventsConfig(this.viewConfig).shouldBypassPayloadValidation)
         ) {
             logger.warn(`Host Event Validation failed: ${data?.data?.message}`);
-            return true;                                                                                                                                                         
-        }           
+            return true;
+        }
         return false;
-    }                                                                                                                                                                            
+    }
     /**
      * Executes all registered event handlers for a particular event type
      * @param eventType The event type
@@ -1181,10 +1280,10 @@ export class TsEmbed {
             if (
                 // When start status is true it trigger only start releated
                 // payload
-                (callbackObj.options.start && dataStatus === embedEventStatus.START)
+                (callbackObj.options.start && dataStatus === embedEventStatus.START) ||
                 // When start status is false it trigger only end releated
                 // payload
-                || (!callbackObj.options.start && dataStatus === embedEventStatus.END)
+                (!callbackObj.options.start && dataStatus === embedEventStatus.END)
             ) {
                 const responder = this.createEmbedEventResponder(eventPort, eventType);
                 callbackObj.callback(data, responder);
@@ -1330,22 +1429,22 @@ 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.
-    */
+     * @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 
+     * 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;
+        const embedObj = (this.preRenderWrapper as any)?.[this.embedNodeKey] as T;
         if (embedObj === (this as any)) {
             logger.info('embedObj is same as this');
         }
@@ -1383,22 +1482,23 @@ export class TsEmbed {
         }
     }
 
-    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();
-        }
-    }
+    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
@@ -1447,7 +1547,7 @@ export class TsEmbed {
             return null;
         }
 
-        // Check if iframe exists before triggering - 
+        // Check if iframe exists before triggering -
         // this prevents the error when auth fails
         if (!this.iFrame) {
             logger.debug(
@@ -1457,21 +1557,30 @@ export class TsEmbed {
         }
 
         // send an empty object, this is needed for liveboard default handlers
-        return this.hostEventClient.triggerHostEvent(messageType, data, context).catch((err: Error & {
-            isValidationError?: boolean;
-            embedErrorDetails?: { errorType: ErrorDetailsTypes; message: string; code: EmbedErrorCodes; error: string };
-        }): Promise<null> => {
-            if (err?.isValidationError) {
-                const errorDetails = err.embedErrorDetails ?? {
-                    errorType: ErrorDetailsTypes.VALIDATION_ERROR,
-                    message: err.message || ERROR_MESSAGE.UPDATEFILTERS_INVALID_PAYLOAD,
-                    code: EmbedErrorCodes.UPDATEFILTERS_INVALID_PAYLOAD,
-                    error: err.message,
-                };
-                this.handleError(errorDetails);
-            }
-            throw err;
-        });
+        return this.hostEventClient.triggerHostEvent(messageType, data, context).catch(
+            (
+                err: Error & {
+                    isValidationError?: boolean;
+                    embedErrorDetails?: {
+                        errorType: ErrorDetailsTypes;
+                        message: string;
+                        code: EmbedErrorCodes;
+                        error: string;
+                    };
+                },
+            ): Promise<null> => {
+                if (err?.isValidationError) {
+                    const errorDetails = err.embedErrorDetails ?? {
+                        errorType: ErrorDetailsTypes.VALIDATION_ERROR,
+                        message: err.message || ERROR_MESSAGE.UPDATEFILTERS_INVALID_PAYLOAD,
+                        code: EmbedErrorCodes.UPDATEFILTERS_INVALID_PAYLOAD,
+                        error: err.message,
+                    };
+                    this.handleError(errorDetails);
+                }
+                throw err;
+            },
+        );
     }
 
     /**
@@ -1499,7 +1608,7 @@ export class TsEmbed {
         if (!getIsInitCalled()) {
             logger.error(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
         }
-        await this.isReadyForRenderPromise;
+        if (this.shouldWaitForRenderPromise) await this.isReadyForRenderPromise;
         this.isRendered = true;
 
         return this;
@@ -1514,33 +1623,33 @@ export class TsEmbed {
     }
 
     /**
-    * Context object for the embedded component.
-    * @returns {ContextObject} The current context object containing the page type and object ids.
-    * @example
-    * ```js
-    * const context = await embed.getCurrentContext();
-    * console.log(context);
-    * 
-    * // Example output
-    * {
-    *   stack: [
-    *     {
-    *       name: 'Liveboard',
-    *       type: ContextType.Liveboard,
-    *       objectIds: {
-    *         liveboardId: '123',
-    *       },
-    *     },
-    *   ],
-    *   currentContext: {
-    *     name: 'Liveboard',
-    *     type: ContextType.Liveboard,
-    *     objectIds: {
-    *       liveboardId: '123',
-    *     },
-    *   },
-    * }
-    * ```
+     * Context object for the embedded component.
+     * @returns {ContextObject} The current context object containing the page type and object ids.
+     * @example
+     * ```js
+     * const context = await embed.getCurrentContext();
+     * console.log(context);
+     *
+     * // Example output
+     * {
+     *   stack: [
+     *     {
+     *       name: 'Liveboard',
+     *       type: ContextType.Liveboard,
+     *       objectIds: {
+     *         liveboardId: '123',
+     *       },
+     *     },
+     *   ],
+     *   currentContext: {
+     *     name: 'Liveboard',
+     *     type: ContextType.Liveboard,
+     *     objectIds: {
+     *       liveboardId: '123',
+     *     },
+     *   },
+     * }
+     * ```
      * @version SDK: 1.45.2 | ThoughtSpot: 26.3.0.cl
      */
     public async getCurrentContext(): Promise<ContextObject> {
@@ -1560,7 +1669,7 @@ export class TsEmbed {
      *
      * @param eventName - The host or action event to generate the subscribed event name for.
      * @returns The formatted event name (e.g., "Save Subscribed").
-     * 
+     *
      * @version SDK: 1.47.2 | ThoughtSpot: 26.3.0.cl
      */
     public subscribedEvent(eventName: HostEvent | Action): string {
@@ -1572,7 +1681,10 @@ export class TsEmbed {
      * @param showPreRenderByDefault - Show the preRender after render, hidden by default
      */
 
-    public async preRender(showPreRenderByDefault = false, replaceExistingPreRender = false): Promise<TsEmbed> {
+    public async preRender(
+        showPreRenderByDefault = false,
+        replaceExistingPreRender = false,
+    ): Promise<TsEmbed> {
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
@@ -1582,6 +1694,9 @@ export class TsEmbed {
 
         const isAlreadyRendered = this.connectPreRendered();
         if (isAlreadyRendered && !replaceExistingPreRender) {
+            if (this.showPreRenderByDefault) {
+                this.showPreRender();
+            }
             return this;
         }
 
@@ -1628,26 +1743,29 @@ export class TsEmbed {
         try {
             this.removeFullscreenChangeHandler();
             this.unsubscribeToEvents();
+            this.preRenderWrapper?.remove();
             if (!this.isRendered) {
                 return;
             }
             if (!getEmbedConfig().waitForCleanupOnDestroy) {
-                this.trigger(HostEvent.DestroyEmbed)
+                this.trigger(HostEvent.DestroyEmbed);
                 this.insertedDomEl?.parentNode?.removeChild(this.insertedDomEl);
             } else {
                 const cleanupTimeout = getEmbedConfig().cleanupTimeout;
                 Promise.race([
                     this.trigger(HostEvent.DestroyEmbed),
                     new Promise((resolve) => setTimeout(resolve, cleanupTimeout)),
-                ]).catch((e) => {
-                    logger.log('Error destroying TS Embed', e);
-                }).finally(() => {
-                    try {
-                        this.insertedDomEl?.parentNode?.removeChild(this.insertedDomEl);
-                    } catch (e) {
-                        logger.log('Error removing DOM element on destroy', e);
-                    }
-                });
+                ])
+                    .catch((e) => {
+                        logger.log('Error destroying TS Embed', e);
+                    })
+                    .finally(() => {
+                        try {
+                            this.insertedDomEl?.parentNode?.removeChild(this.insertedDomEl);
+                        } catch (e) {
+                            logger.log('Error removing DOM element on destroy', e);
+                        }
+                    });
             }
         } catch (e) {
             logger.log('Error destroying TS Embed', e);
@@ -1669,7 +1787,7 @@ export class TsEmbed {
         if (!getIsInitCalled()) {
             logger.error(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
         }
-        await this.isReadyForRenderPromise;
+        if (this.shouldWaitForRenderPromise) await this.isReadyForRenderPromise;
 
         const prerenderFrameSrc = this.getRootIframeSrc();
         this.isRendered = true;
@@ -1677,80 +1795,72 @@ export class TsEmbed {
     }
 
     protected beforePrerenderVisible(): void {
-        // Override in subclass
+        // We can ignore this as its a bit expensive and the newer customers
+        // have moved on to UpdateEmbedParams supported clusters
+        // this.validatePreRenderViewConfig(this.viewConfig); removed in #517
+        logger.debug('triggering UpdateEmbedParams', this.viewConfig);
+        this.executeAfterEmbedContainerLoaded(async () => {
+            try {
+                const params = await this.getUpdateEmbedParamsObject();
+                this.trigger(HostEvent.UpdateEmbedParams, params);
+            } catch (error) {
+                logger.error(ERROR_MESSAGE.UPDATE_PARAMS_FAILED, error);
+                this.handleError({
+                    errorType: ErrorDetailsTypes.API,
+                    message: error?.message || ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
+                    code: EmbedErrorCodes.UPDATE_PARAMS_FAILED,
+                    error: error?.message || error,
+                });
+            }
+        });
     }
 
-    private validatePreRenderViewConfig = (viewConfig: ViewConfig) => {
-        const preRenderAllowedKeys = ['preRenderId', 'vizId', 'liveboardId'];
-        const preRenderedObject = (this.insertedDomEl as any)?.[this.embedNodeKey] as TsEmbed;
-        if (!preRenderedObject) return;
-        if (viewConfig.preRenderId) {
-            const allOtherKeys = Object.keys(viewConfig).filter(
-                (key) => !preRenderAllowedKeys.includes(key) && !key.startsWith('on'),
-            );
-
-            allOtherKeys.forEach((key: keyof ViewConfig) => {
-                if (
-                    !isUndefined(viewConfig[key])
-                    && !isEqual(viewConfig[key], preRenderedObject.viewConfig[key])
-                ) {
-                    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.',
-                    );
-                }
-            });
-        }
-    };
-
     /**
-     * Displays the PreRender component.
-     * If the component is not preRendered, it attempts to create and render it.
-     * Also, synchronizes the style of the PreRender component with the embedding
-     * element.
+     * Displays the pre-rendered component inside the host element.
+     * If the component has not been pre-rendered yet, it initiates rendering first.
+     * Inserts a placeholder element into the host and positions the pre-render
+     * wrapper to overlay it.
      */
     public async showPreRender(): Promise<TsEmbed> {
+        if (this.shouldWaitForRenderPromise) await this.isReadyForRenderPromise;
+
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
         }
-        if (!this.isPreRenderAvailable()) {
-            const isAvailable = this.connectPreRendered();
+        if (!this.isPreRenderConnected()) {
+            // this will call showPreRender down the line
+            return this.preRender(true);
+        }
+        this.isRendered = true;
+        this.beforePrerenderVisible();
 
-            if (!isAvailable) {
-                // if the Embed component is not preRendered , Render it now and
-                return this.preRender(true);
-            }
-            this.validatePreRenderViewConfig(this.viewConfig);
-            logger.debug('triggering UpdateEmbedParams', this.viewConfig);
-            this.executeAfterEmbedContainerLoaded(async () => {
-                try {
-                    const params = await this.getUpdateEmbedParamsObject();
-                    this.trigger(HostEvent.UpdateEmbedParams, params);
-                } catch (error) {
-                    logger.error(ERROR_MESSAGE.UPDATE_PARAMS_FAILED, error);
-                    this.handleError({
-                        errorType: ErrorDetailsTypes.API,
-                        message: error?.message || ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
-                        code: EmbedErrorCodes.UPDATE_PARAMS_FAILED,
-                        error: error?.message || error,
-                    });
+        if (this.hostElement) {
+            this.insertedDomEl = this.createPreRenderPlaceholder();
+            if ((this.viewConfig as { fullHeight: boolean }).fullHeight) {
+                // If fullHeight has already sized the wrapper, seed the placeholder
+                // with the same height so syncPreRenderStyle gets an accurate rect.
+                const existingHeight = this.preRenderWrapper.style.height;
+                if (existingHeight) {
+                    (this.insertedDomEl as HTMLDivElement).style.height = existingHeight;
                 }
-            });
-        }
+            }
 
-        this.beforePrerenderVisible();
+            const placeHolderId = this.getPreRenderIds().placeHolder;
+            const oldEle = this.hostElement.querySelector(`#${placeHolderId}`);
+            if (oldEle) {
+                this.hostElement.removeChild(oldEle);
+            }
+
+            this.hostElement.appendChild(this.insertedDomEl);
 
-        if (this.el) {
             this.syncPreRenderStyle();
+
             if (!this.viewConfig.doNotTrackPreRenderSize) {
+                const observeTarget = (this.insertedDomEl as HTMLElement) ?? this.hostElement;
                 this.resizeObserver = new ResizeObserver((entries) => {
                     entries.forEach((entry) => {
-                        if (entry.contentRect && entry.target === this.el) {
+                        if (entry.contentRect && entry.target === observeTarget) {
                             setStyleProperties(this.preRenderWrapper, {
                                 width: `${entry.contentRect.width}px`,
                                 height: `${entry.contentRect.height}px`,
@@ -1758,12 +1868,16 @@ export class TsEmbed {
                         }
                     });
                 });
-                this.resizeObserver.observe(this.el);
+                this.resizeObserver.observe(observeTarget);
             }
         }
 
-        removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events', 'overflow']);
-
+        removeStyleProperties(this.preRenderWrapper, [
+            'z-index',
+            'opacity',
+            'pointer-events',
+            'overflow',
+        ]);
         this.subscribeToEvents();
 
         // Setup fullscreen change handler for prerendered components
@@ -1774,6 +1888,10 @@ export class TsEmbed {
         return this;
     }
 
+    protected getPreRenderPlaceHolderElement() {
+        return this.insertedDomEl as HTMLDivElement;
+    }
+
     /**
      * Synchronizes the style properties of the PreRender component with the embedding
      * element. This function adjusts the position, width, and height of the PreRender
@@ -1783,17 +1901,18 @@ export class TsEmbed {
      * is not defined or not found.
      */
     public syncPreRenderStyle(): void {
-        if (!this.isPreRenderAvailable() || !this.el) {
+        if (!this.isPreRenderConnected() || !this.getPreRenderPlaceHolderElement()) {
             logger.error(ERROR_MESSAGE.SYNC_STYLE_CALLED_BEFORE_RENDER);
             return;
         }
-        const elBoundingClient = this.el.getBoundingClientRect();
+        const elBoundingClient = this.getPreRenderPlaceHolderElement().getBoundingClientRect();
 
         setStyleProperties(this.preRenderWrapper, {
             top: `${elBoundingClient.y + window.scrollY}px`,
             left: `${elBoundingClient.x + window.scrollX}px`,
             width: `${elBoundingClient.width}px`,
             height: `${elBoundingClient.height}px`,
+            position: 'absolute',
         });
     }
 
@@ -1802,7 +1921,8 @@ export class TsEmbed {
      * If the component is not preRendered, it issues a warning.
      */
     public hidePreRender(): void {
-        if (!this.isPreRenderAvailable()) {
+        logger.debug('HidePreRender Called');
+        if (!this.isPreRenderConnected()) {
             // if the embed component is not preRendered , nothing to hide
             logger.warn('PreRender should be called before hiding it using hidePreRender.');
             return;
@@ -1822,6 +1942,11 @@ export class TsEmbed {
             this.resizeObserver.disconnect();
         }
 
+        const placeHolderEle = this.getPreRenderPlaceHolderElement();
+        if (placeHolderEle) {
+            placeHolderEle.parentElement.removeChild(placeHolderEle);
+        }
+
         this.unsubscribeToEvents();
     }
 
@@ -1836,6 +1961,7 @@ export class TsEmbed {
         return {
             wrapper: `tsEmbed-pre-render-wrapper-${this.viewConfig.preRenderId}`,
             child: `tsEmbed-pre-render-child-${this.viewConfig.preRenderId}`,
+            placeHolder: `tsEmbed-pre-render-placeholder-${this.viewConfig.preRenderId}`,
         };
     }