@thoughtspot/visual-embed-sdk 1.47.3 → 1.49.0

package/lib/src/embed/ts-embed.js

@@ -5,27 +5,26 @@
  * @summary Base classes
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
-import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
 import { UIPassthroughEvent, } from './hostEventClient/contracts';
 import { logger } from '../utils/logger';
 import { getAuthenticationToken } from '../authToken';
 import { AnswerService } from '../utils/graphql/answerService/answerService';
-import { getEncodedQueryParamsString, getCssDimension, getOffsetTop, embedEventStatus, setAttributes, getCustomisations, getRuntimeFilters, getDOMNode, getFilterQuery, getQueryParamString, getRuntimeParameters, setStyleProperties, removeStyleProperties, isUndefined, getHostEventsConfig, } from '../utils';
+import { getEncodedQueryParamsString, getCssDimension, getOffsetTop, embedEventStatus, setAttributes, getCustomisations, getRuntimeFilters, getDOMNode, getFilterQuery, getQueryParamString, getRuntimeParameters, setStyleProperties, removeStyleProperties, getHostEventsConfig, } from '../utils';
 import { getCustomActions } from '../utils/custom-actions';
 import { getThoughtSpotHost, URL_MAX_LENGTH, DEFAULT_EMBED_WIDTH, DEFAULT_EMBED_HEIGHT, getV2BasePath, } from '../config';
 import { AuthType, HostEvent, EmbedEvent, Action, Param, ContextMenuTriggerOptions, ErrorDetailsTypes, EmbedErrorCodes, } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 import { processEventData, processAuthFailure } from '../utils/processData';
 import { version } from '../../package.json';
-import { getAuthPromise, renderInQueue, handleAuth, notifyAuthFailure, getInitPromise, getIsInitCalled, } from './base';
+import { 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.
  */
@@ -76,7 +75,7 @@ export class TsEmbed {
             const eventPort = this.getEventPort(event);
             const eventData = this.formatEventData(event, eventType);
             if (event.source === this.iFrame.contentWindow) {
-                const processedEventData = processEventData(eventType, eventData, this.thoughtSpotHost, this.isPreRendered ? this.preRenderWrapper : this.el);
+                const processedEventData = processEventData(eventType, eventData, this.thoughtSpotHost, this.isPreRendered ? this.preRenderWrapper : this.hostElement);
                 if (eventType === EmbedEvent.ApiIntercept) {
                     this.handleApiInterceptEvent({ eventData, eventPort });
                     return;
@@ -104,7 +103,7 @@ export class TsEmbed {
         };
         this.handleAuthFailure = (error) => {
             logger.error(`${ERROR_MESSAGE.INVALID_TOKEN_ERROR} Error : ${error === null || error === void 0 ? void 0 : 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
@@ -128,7 +127,7 @@ export class TsEmbed {
             const { authType, autoLogin: autoLoginConfig } = this.embedConfig;
             // Default autoLogin: true for cookieless if undefined/null, otherwise
             // false
-            const autoLogin = autoLoginConfig !== null && autoLoginConfig !== void 0 ? autoLoginConfig : (authType === AuthType.TrustedAuthTokenCookieless);
+            const autoLogin = autoLoginConfig !== null && autoLoginConfig !== void 0 ? autoLoginConfig : authType === AuthType.TrustedAuthTokenCookieless;
             try {
                 await this.refreshAuthTokenForCookieless(responder, EmbedEvent.AuthExpire, false);
             }
@@ -146,7 +145,8 @@ export class TsEmbed {
          * @param responder
          */
         this.idleSessionTimeout = (_, responder) => {
-            handleAuth().then(async () => {
+            handleAuth()
+                .then(async () => {
                 let authToken = '';
                 try {
                     authToken = await getAuthenticationToken(this.embedConfig);
@@ -158,7 +158,8 @@ export class TsEmbed {
                 catch (e) {
                     this.handleAuthFailure(e);
                 }
-            }).catch((e) => {
+            })
+                .catch((e) => {
                 logger.error(`Auto Login failed, Error : ${e === null || e === void 0 ? void 0 : e.message}`);
             });
             notifyAuthFailure(AuthFailureType.IDLE_SESSION_TIMEOUT);
@@ -200,10 +201,10 @@ 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.
+         */
         this.isEmbedContainerLoaded = false;
         /**
          * @hidden
@@ -229,28 +230,7 @@ export class TsEmbed {
                 processEmbedContainerReady();
             }
         };
-        this.validatePreRenderViewConfig = (viewConfig) => {
-            var _a;
-            const preRenderAllowedKeys = ['preRenderId', 'vizId', 'liveboardId'];
-            const preRenderedObject = (_a = this.insertedDomEl) === null || _a === void 0 ? void 0 : _a[this.embedNodeKey];
-            if (!preRenderedObject)
-                return;
-            if (viewConfig.preRenderId) {
-                const allOtherKeys = Object.keys(viewConfig).filter((key) => !preRenderAllowedKeys.includes(key) && !key.startsWith('on'));
-                allOtherKeys.forEach((key) => {
-                    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.');
-                    }
-                });
-            }
-        };
-        this.el = getDOMNode(domSelector);
+        this.hostElement = getDOMNode(domSelector);
         this.eventHandlerMap = new Map();
         this.isError = false;
         this.viewConfig = {
@@ -263,16 +243,43 @@ 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 !== null && embedConfig !== void 0 ? 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;
+            });
+        }
     }
     /**
      * Throws error encountered during initialization.
@@ -329,9 +336,9 @@ 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;
     }
     /**
@@ -342,8 +349,8 @@ export class TsEmbed {
         const appViewConfig = this.viewConfig;
         // Check if this is a FullAppEmbed (AppEmbed)
         // showPrimaryNavbar defaults to true if not explicitly set to false
-        return (appViewConfig.embedComponentType === 'AppEmbed'
-            && appViewConfig.showPrimaryNavbar === true);
+        return (appViewConfig.embedComponentType === 'AppEmbed' &&
+            appViewConfig.showPrimaryNavbar === true);
     }
     /**
      * fix for ts7.sep.cl
@@ -386,7 +393,7 @@ export class TsEmbed {
         this.subscribedListeners.online = onlineEventListener;
         this.subscribedListeners.offline = offlineEventListener;
     }
-    handleApiInterceptEvent({ eventData, eventPort }) {
+    handleApiInterceptEvent({ eventData, eventPort, }) {
         const executeEvent = (_eventType, data) => {
             this.executeCallbacks(_eventType, data, eventPort);
         };
@@ -395,7 +402,12 @@ export class TsEmbed {
             const response = await this.triggerUIPassThrough(UIPassthroughEvent.GetUnsavedAnswerTML, props);
             return (_b = (_a = response.filter((item) => item.value)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value;
         };
-        handleInterceptEvent({ eventData, executeEvent, viewConfig: this.viewConfig, getUnsavedAnswerTml });
+        handleInterceptEvent({
+            eventData,
+            executeEvent,
+            viewConfig: this.viewConfig,
+            getUnsavedAnswerTml,
+        });
     }
     /**
      * Subscribe to message events that depend on successful iframe setup
@@ -446,24 +458,27 @@ export class TsEmbed {
             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;
         }
         return authToken;
     }
     async getDefaultAppInitData() {
-        var _a, _b;
+        var _a, _b, _c;
         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,
                 message: customActionsResult.errors,
                 code: EmbedErrorCodes.CUSTOM_ACTION_VALIDATION,
-                error: { type: EmbedErrorCodes.CUSTOM_ACTION_VALIDATION, message: customActionsResult.errors }
+                error: {
+                    type: EmbedErrorCodes.CUSTOM_ACTION_VALIDATION,
+                    message: customActionsResult.errors,
+                },
             });
         }
         const baseInitData = {
@@ -484,7 +499,7 @@ export class TsEmbed {
             customVariablesForThirdPartyTools: this.embedConfig.customVariablesForThirdPartyTools || {},
             hiddenListColumns: this.viewConfig.hiddenListColumns || [],
             customActions: customActionsResult.actions,
-            embedExpiryInAuthToken: this.viewConfig.refreshAuthTokenOnNearExpiry,
+            embedExpiryInAuthToken: (_c = this.viewConfig.refreshAuthTokenOnNearExpiry) !== null && _c !== void 0 ? _c : true,
             ...getInterceptInitData(this.viewConfig),
             ...getHostEventsConfig(this.viewConfig),
         };
@@ -502,7 +517,7 @@ export class TsEmbed {
      */
     async refreshAuthTokenForCookieless(responder, eventType, forceRefresh = false) {
         const { authType, autoLogin } = this.embedConfig;
-        const isAutoLoginTrue = autoLogin !== null && autoLogin !== void 0 ? autoLogin : (authType === AuthType.TrustedAuthTokenCookieless);
+        const isAutoLoginTrue = autoLogin !== null && autoLogin !== void 0 ? autoLogin : authType === AuthType.TrustedAuthTokenCookieless;
         if (isAutoLoginTrue && authType === AuthType.TrustedAuthTokenCookieless) {
             const authToken = await getAuthenticationToken(this.embedConfig, forceRefresh);
             responder({
@@ -639,8 +654,7 @@ export class TsEmbed {
         if (spriteUrl) {
             queryParams[Param.IconSpriteUrl] = spriteUrl.replace('https://', '');
         }
-        const stringIDsUrl = ((_c = customizations === null || customizations === void 0 ? void 0 : customizations.content) === null || _c === void 0 ? void 0 : _c.stringIDsUrl)
-            || ((_d = embedCustomizations === null || embedCustomizations === void 0 ? void 0 : embedCustomizations.content) === null || _d === void 0 ? void 0 : _d.stringIDsUrl);
+        const stringIDsUrl = ((_c = customizations === null || customizations === void 0 ? void 0 : customizations.content) === null || _c === void 0 ? void 0 : _c.stringIDsUrl) || ((_d = embedCustomizations === null || embedCustomizations === void 0 ? void 0 : embedCustomizations.content) === null || _d === void 0 ? void 0 : _d.stringIDsUrl);
         if (stringIDsUrl) {
             queryParams[Param.StringIDsUrl] = stringIDsUrl;
         }
@@ -650,15 +664,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;
         }
@@ -739,8 +748,14 @@ export class TsEmbed {
         iFrame.name = 'ThoughtSpot Embedded Analytics';
         return iFrame;
     }
+    /**
+     * Returns true if this embed instance is configured for pre-rendering.
+     */
+    isPreRenderEmbed() {
+        return !!this.viewConfig.preRenderId;
+    }
     handleInsertionIntoDOM(child) {
-        if (this.isPreRendered) {
+        if (this.isPreRenderEmbed()) {
             this.insertIntoDOMForPreRender(child);
         }
         else {
@@ -749,6 +764,9 @@ export class TsEmbed {
         if (this.insertedDomEl instanceof Node) {
             this.insertedDomEl[this.embedNodeKey] = this;
         }
+        if (this.preRenderWrapper) {
+            this.preRenderWrapper[this.embedNodeKey] = this;
+        }
     }
     /**
      * Renders the embedded ThoughtSpot app in an iframe and sets up
@@ -853,6 +871,14 @@ export class TsEmbed {
         setStyleProperties(preRenderWrapper, initialPreRenderWrapperStyle);
         return preRenderWrapper;
     }
+    /**
+     * 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.
+     */
     connectPreRendered() {
         const preRenderIds = this.getPreRenderIds();
         const preRenderWrapperElement = document.getElementById(preRenderIds.wrapper);
@@ -863,15 +889,12 @@ 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();
     }
-    isPreRenderAvailable() {
-        return (this.isRendered
-            && this.isPreRendered
-            && Boolean(this.preRenderWrapper && this.preRenderChild));
+    isPreRenderConnected() {
+        return Boolean(this.preRenderWrapper && this.preRenderChild);
     }
     createPreRenderChild(child) {
         var _a;
@@ -892,6 +915,23 @@ 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.
+     */
+    createPreRenderPlaceholder() {
+        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;
+    }
     insertIntoDOMForPreRender(child) {
         const preRenderChild = this.createPreRenderChild(child);
         const preRenderWrapper = this.createPreRenderWrapper();
@@ -901,7 +941,10 @@ 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();
         }
@@ -919,19 +962,19 @@ export class TsEmbed {
                 div.id = TS_EMBED_ID;
                 child = div;
             }
-            if (((_a = this.el.nextElementSibling) === null || _a === void 0 ? void 0 : _a.id) === TS_EMBED_ID) {
-                this.el.nextElementSibling.remove();
+            if (((_a = this.hostElement.nextElementSibling) === null || _a === void 0 ? void 0 : _a.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;
         }
     }
@@ -940,14 +983,26 @@ export class TsEmbed {
      * @param height The height in pixels
      */
     setIFrameHeight(height) {
-        this.iFrame.style.height = getCssDimension(height);
+        if (this.isPreRendered) {
+            if (this.insertedDomEl) {
+                this.insertedDomEl.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);
+        }
     }
     shouldSkipEvent(eventType, data) {
         var _a, _b, _c;
         const errorType = (_a = data === null || data === void 0 ? void 0 : data.errorType) !== null && _a !== void 0 ? _a : (_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.code;
-        if (eventType === EmbedEvent.Error
-            && errorType === EmbedErrorCodes.HOST_EVENT_VALIDATION
-            && (!getHostEventsConfig(this.viewConfig).useHostEventsV2 || getHostEventsConfig(this.viewConfig).shouldBypassPayloadValidation)) {
+        if (eventType === EmbedEvent.Error &&
+            errorType === EmbedErrorCodes.HOST_EVENT_VALIDATION &&
+            (!getHostEventsConfig(this.viewConfig).useHostEventsV2 ||
+                getHostEventsConfig(this.viewConfig).shouldBypassPayloadValidation)) {
             logger.warn(`Host Event Validation failed: ${(_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.message}`);
             return true;
         }
@@ -970,10 +1025,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);
             }
@@ -1109,7 +1164,7 @@ export class TsEmbed {
     }
     getPreRenderObj() {
         var _a;
-        const embedObj = (_a = this.insertedDomEl) === null || _a === void 0 ? void 0 : _a[this.embedNodeKey];
+        const embedObj = (_a = this.preRenderWrapper) === null || _a === void 0 ? void 0 : _a[this.embedNodeKey];
         if (embedObj === this) {
             logger.info('embedObj is same as this');
         }
@@ -1184,7 +1239,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(`Cannot trigger ${messageType} - iframe not available (likely due to auth failure)`);
@@ -1226,7 +1281,8 @@ 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;
     }
@@ -1237,33 +1293,33 @@ export class TsEmbed {
         return this.render();
     }
     /**
-    * 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
      */
     async getCurrentContext() {
@@ -1301,6 +1357,9 @@ export class TsEmbed {
         this.showPreRenderByDefault = showPreRenderByDefault;
         const isAlreadyRendered = this.connectPreRendered();
         if (isAlreadyRendered && !replaceExistingPreRender) {
+            if (this.showPreRenderByDefault) {
+                this.showPreRender();
+            }
             return this;
         }
         return this.handleRenderForPrerender();
@@ -1336,25 +1395,28 @@ export class TsEmbed {
      * @version SDK: 1.19.1 | ThoughtSpot: *
      */
     destroy() {
-        var _a, _b;
+        var _a, _b, _c;
         try {
             this.removeFullscreenChangeHandler();
             this.unsubscribeToEvents();
+            (_a = this.preRenderWrapper) === null || _a === void 0 ? void 0 : _a.remove();
             if (!this.isRendered) {
                 return;
             }
             if (!getEmbedConfig().waitForCleanupOnDestroy) {
                 this.trigger(HostEvent.DestroyEmbed);
-                (_b = (_a = this.insertedDomEl) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.insertedDomEl);
+                (_c = (_b = this.insertedDomEl) === null || _b === void 0 ? void 0 : _b.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(this.insertedDomEl);
             }
             else {
                 const cleanupTimeout = getEmbedConfig().cleanupTimeout;
                 Promise.race([
                     this.trigger(HostEvent.DestroyEmbed),
                     new Promise((resolve) => setTimeout(resolve, cleanupTimeout)),
-                ]).catch((e) => {
+                ])
+                    .catch((e) => {
                     logger.log('Error destroying TS Embed', e);
-                }).finally(() => {
+                })
+                    .finally(() => {
                     var _a, _b;
                     try {
                         (_b = (_a = this.insertedDomEl) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this.insertedDomEl);
@@ -1383,56 +1445,75 @@ 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;
         return this.renderIFrame(prerenderFrameSrc);
     }
     beforePrerenderVisible() {
-        // 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 === null || error === void 0 ? void 0 : error.message) || ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
+                    code: EmbedErrorCodes.UPDATE_PARAMS_FAILED,
+                    error: (error === null || error === void 0 ? void 0 : error.message) || error,
+                });
+            }
+        });
     }
     /**
-     * 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.
      */
     async showPreRender() {
+        var _a;
+        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 (!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 === null || error === void 0 ? void 0 : error.message) || ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
-                        code: EmbedErrorCodes.UPDATE_PARAMS_FAILED,
-                        error: (error === null || error === void 0 ? void 0 : error.message) || error,
-                    });
-                }
-            });
+        if (!this.isPreRenderConnected()) {
+            // this will call showPreRender down the line
+            return this.preRender(true);
         }
+        this.isRendered = true;
         this.beforePrerenderVisible();
-        if (this.el) {
+        if (this.hostElement) {
+            this.insertedDomEl = this.createPreRenderPlaceholder();
+            if (this.viewConfig.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.style.height = existingHeight;
+                }
+            }
+            const placeHolderId = this.getPreRenderIds().placeHolder;
+            const oldEle = this.hostElement.querySelector(`#${placeHolderId}`);
+            if (oldEle) {
+                this.hostElement.removeChild(oldEle);
+            }
+            this.hostElement.appendChild(this.insertedDomEl);
             this.syncPreRenderStyle();
             if (!this.viewConfig.doNotTrackPreRenderSize) {
+                const observeTarget = (_a = this.insertedDomEl) !== null && _a !== void 0 ? _a : 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`,
@@ -1440,10 +1521,15 @@ 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
         if (this.iFrame) {
@@ -1451,6 +1537,9 @@ export class TsEmbed {
         }
         return this;
     }
+    getPreRenderPlaceHolderElement() {
+        return this.insertedDomEl;
+    }
     /**
      * Synchronizes the style properties of the PreRender component with the embedding
      * element. This function adjusts the position, width, and height of the PreRender
@@ -1460,16 +1549,17 @@ export class TsEmbed {
      * is not defined or not found.
      */
     syncPreRenderStyle() {
-        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',
         });
     }
     /**
@@ -1477,7 +1567,8 @@ export class TsEmbed {
      * If the component is not preRendered, it issues a warning.
      */
     hidePreRender() {
-        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;
@@ -1495,6 +1586,10 @@ export class TsEmbed {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
+        const placeHolderEle = this.getPreRenderPlaceHolderElement();
+        if (placeHolderEle) {
+            placeHolderEle.parentElement.removeChild(placeHolderEle);
+        }
         this.unsubscribeToEvents();
     }
     /**
@@ -1508,6 +1603,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}`,
         };
     }
     /**