@thoughtspot/visual-embed-sdk 1.48.0 → 1.49.0

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

@@ -9,7 +9,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.V1Embed = exports.TsEmbed = exports.THOUGHTSPOT_PARAM_PREFIX = void 0;
 const tslib_1 = require("tslib");
-const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
 const isObject_1 = tslib_1.__importDefault(require("lodash/isObject"));
 const contracts_1 = require("./hostEventClient/contracts");
@@ -80,7 +79,7 @@ class TsEmbed {
             const eventPort = this.getEventPort(event);
             const eventData = this.formatEventData(event, eventType);
             if (event.source === this.iFrame.contentWindow) {
-                const processedEventData = (0, processData_1.processEventData)(eventType, eventData, this.thoughtSpotHost, this.isPreRendered ? this.preRenderWrapper : this.el);
+                const processedEventData = (0, processData_1.processEventData)(eventType, eventData, this.thoughtSpotHost, this.isPreRendered ? this.preRenderWrapper : this.hostElement);
                 if (eventType === types_1.EmbedEvent.ApiIntercept) {
                     this.handleApiInterceptEvent({ eventData, eventPort });
                     return;
@@ -108,7 +107,7 @@ class TsEmbed {
         };
         this.handleAuthFailure = (error) => {
             logger_1.logger.error(`${errors_1.ERROR_MESSAGE.INVALID_TOKEN_ERROR} Error : ${error === null || error === void 0 ? void 0 : error.message}`);
-            (0, processData_1.processAuthFailure)(error, this.isPreRendered ? this.preRenderWrapper : this.el);
+            (0, processData_1.processAuthFailure)(error, this.isPreRendered ? this.preRenderWrapper : this.hostElement);
         };
         /**
          * Refresh the auth token if the autoLogin is true and the authType is TrustedAuthTokenCookieless
@@ -132,7 +131,7 @@ 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 === types_1.AuthType.TrustedAuthTokenCookieless);
+            const autoLogin = autoLoginConfig !== null && autoLoginConfig !== void 0 ? autoLoginConfig : authType === types_1.AuthType.TrustedAuthTokenCookieless;
             try {
                 await this.refreshAuthTokenForCookieless(responder, types_1.EmbedEvent.AuthExpire, false);
             }
@@ -150,7 +149,8 @@ class TsEmbed {
          * @param responder
          */
         this.idleSessionTimeout = (_, responder) => {
-            (0, base_1.handleAuth)().then(async () => {
+            (0, base_1.handleAuth)()
+                .then(async () => {
                 let authToken = '';
                 try {
                     authToken = await (0, authToken_1.getAuthenticationToken)(this.embedConfig);
@@ -162,7 +162,8 @@ class TsEmbed {
                 catch (e) {
                     this.handleAuthFailure(e);
                 }
-            }).catch((e) => {
+            })
+                .catch((e) => {
                 logger_1.logger.error(`Auto Login failed, Error : ${e === null || e === void 0 ? void 0 : e.message}`);
             });
             (0, base_1.notifyAuthFailure)(auth_1.AuthFailureType.IDLE_SESSION_TIMEOUT);
@@ -204,10 +205,10 @@ 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
@@ -233,28 +234,7 @@ 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 (!(0, utils_1.isUndefined)(viewConfig[key])
-                        && !(0, isEqual_1.default)(viewConfig[key], preRenderedObject.viewConfig[key])) {
-                        logger_1.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 = (0, utils_1.getDOMNode)(domSelector);
+        this.hostElement = (0, utils_1.getDOMNode)(domSelector);
         this.eventHandlerMap = new Map();
         this.isError = false;
         this.viewConfig = {
@@ -267,16 +247,43 @@ class TsEmbed {
             ...viewConfig,
         });
         const embedConfig = (0, embedConfig_1.getEmbedConfig)();
-        this.embedConfig = embedConfig;
+        if (embedConfig) {
+            this.embedConfig = embedConfig;
+            this.thoughtSpotHost = (0, config_1.getThoughtSpotHost)(embedConfig);
+            this.thoughtSpotV2Base = (0, config_1.getV2BasePath)(embedConfig);
+        }
         this.hostEventClient = new host_event_client_1.HostEventClient(this.iFrame);
-        this.isReadyForRenderPromise = (0, base_1.getInitPromise)().then(async () => {
-            if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
+        this.shouldWaitForRenderPromise = !(0, base_1.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 : (0, embedConfig_1.getEmbedConfig)();
+            if (!this.embedConfig) {
+                logger_1.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 = (0, config_1.getThoughtSpotHost)(embedConfig);
-            this.thoughtSpotV2Base = (0, config_1.getV2BasePath)(embedConfig);
-            this.shouldEncodeUrlQueryParams = embedConfig.shouldEncodeUrlQueryParams;
-        });
+            this.thoughtSpotHost = (0, config_1.getThoughtSpotHost)(this.embedConfig);
+            this.thoughtSpotV2Base = (0, config_1.getV2BasePath)(this.embedConfig);
+            this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
+        };
+        if (!this.shouldWaitForRenderPromise) {
+            afterInit();
+        }
+        else {
+            this.isReadyForRenderPromise = (0, base_1.getInitPromise)()
+                .then(afterInit)
+                .catch((err) => {
+                logger_1.logger.error('SDK init failed before embed could be configured', err);
+                this.throwInitError();
+            })
+                .finally(() => {
+                this.shouldWaitForRenderPromise = false;
+            });
+        }
     }
     /**
      * Throws error encountered during initialization.
@@ -333,9 +340,9 @@ 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;
     }
     /**
@@ -346,8 +353,8 @@ 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
@@ -390,7 +397,7 @@ 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);
         };
@@ -399,7 +406,12 @@ class TsEmbed {
             const response = await this.triggerUIPassThrough(contracts_1.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;
         };
-        (0, api_intercept_1.handleInterceptEvent)({ eventData, executeEvent, viewConfig: this.viewConfig, getUnsavedAnswerTml });
+        (0, api_intercept_1.handleInterceptEvent)({
+            eventData,
+            executeEvent,
+            viewConfig: this.viewConfig,
+            getUnsavedAnswerTml,
+        });
     }
     /**
      * Subscribe to message events that depend on successful iframe setup
@@ -450,7 +462,7 @@ class TsEmbed {
             authToken = await (0, authToken_1.getAuthenticationToken)(this.embedConfig);
         }
         catch (e) {
-            (0, processData_1.processAuthFailure)(e, this.isPreRendered ? this.preRenderWrapper : this.el);
+            (0, processData_1.processAuthFailure)(e, this.isPreRendered ? this.preRenderWrapper : this.hostElement);
             throw e;
         }
         return authToken;
@@ -460,14 +472,17 @@ class TsEmbed {
         const authToken = await this.getAuthTokenForCookielessInit();
         const customActionsResult = (0, custom_actions_1.getCustomActions)([
             ...(this.viewConfig.customActions || []),
-            ...(this.embedConfig.customActions || [])
+            ...(this.embedConfig.customActions || []),
         ]);
         if (customActionsResult.errors.length > 0) {
             this.handleError({
                 errorType: types_1.ErrorDetailsTypes.VALIDATION_ERROR,
                 message: customActionsResult.errors,
                 code: types_1.EmbedErrorCodes.CUSTOM_ACTION_VALIDATION,
-                error: { type: types_1.EmbedErrorCodes.CUSTOM_ACTION_VALIDATION, message: customActionsResult.errors }
+                error: {
+                    type: types_1.EmbedErrorCodes.CUSTOM_ACTION_VALIDATION,
+                    message: customActionsResult.errors,
+                },
             });
         }
         const baseInitData = {
@@ -506,7 +521,7 @@ class TsEmbed {
      */
     async refreshAuthTokenForCookieless(responder, eventType, forceRefresh = false) {
         const { authType, autoLogin } = this.embedConfig;
-        const isAutoLoginTrue = autoLogin !== null && autoLogin !== void 0 ? autoLogin : (authType === types_1.AuthType.TrustedAuthTokenCookieless);
+        const isAutoLoginTrue = autoLogin !== null && autoLogin !== void 0 ? autoLogin : authType === types_1.AuthType.TrustedAuthTokenCookieless;
         if (isAutoLoginTrue && authType === types_1.AuthType.TrustedAuthTokenCookieless) {
             const authToken = await (0, authToken_1.getAuthenticationToken)(this.embedConfig, forceRefresh);
             responder({
@@ -643,8 +658,7 @@ class TsEmbed {
         if (spriteUrl) {
             queryParams[types_1.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[types_1.Param.StringIDsUrl] = stringIDsUrl;
         }
@@ -654,15 +668,10 @@ class TsEmbed {
         if (locale !== undefined) {
             queryParams[types_1.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[types_1.Param.EnableLinkOverridesV2] = true;
             queryParams[types_1.Param.LinkOverride] = true;
         }
-        else if (linkOverride) {
-            queryParams[types_1.Param.LinkOverride] = linkOverride;
-        }
         if (insertInToSlide) {
             queryParams[types_1.Param.ShowInsertToSlide] = insertInToSlide;
         }
@@ -743,8 +752,14 @@ 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 {
@@ -753,6 +768,9 @@ 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
@@ -857,6 +875,14 @@ class TsEmbed {
         (0, utils_1.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);
@@ -867,15 +893,12 @@ 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;
@@ -896,6 +919,23 @@ 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 = (0, utils_1.getCssDimension)(frameWidth || config_1.DEFAULT_EMBED_WIDTH);
+        const height = (0, utils_1.getCssDimension)(frameHeight || config_1.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();
@@ -905,7 +945,10 @@ 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();
         }
@@ -923,19 +966,19 @@ 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;
         }
     }
@@ -944,14 +987,26 @@ class TsEmbed {
      * @param height The height in pixels
      */
     setIFrameHeight(height) {
-        this.iFrame.style.height = (0, utils_1.getCssDimension)(height);
+        if (this.isPreRendered) {
+            if (this.insertedDomEl) {
+                this.insertedDomEl.style.height = (0, utils_1.getCssDimension)(height);
+            }
+            else if (this.preRenderWrapper) {
+                this.preRenderWrapper.style.height = (0, utils_1.getCssDimension)(height);
+            }
+        }
+        else {
+            // normal (non-preRender) mode: size the iframe directly
+            this.iFrame.style.height = (0, utils_1.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 === types_1.EmbedEvent.Error
-            && errorType === types_1.EmbedErrorCodes.HOST_EVENT_VALIDATION
-            && (!(0, utils_1.getHostEventsConfig)(this.viewConfig).useHostEventsV2 || (0, utils_1.getHostEventsConfig)(this.viewConfig).shouldBypassPayloadValidation)) {
+        if (eventType === types_1.EmbedEvent.Error &&
+            errorType === types_1.EmbedErrorCodes.HOST_EVENT_VALIDATION &&
+            (!(0, utils_1.getHostEventsConfig)(this.viewConfig).useHostEventsV2 ||
+                (0, utils_1.getHostEventsConfig)(this.viewConfig).shouldBypassPayloadValidation)) {
             logger_1.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;
         }
@@ -974,10 +1029,10 @@ class TsEmbed {
             if (
             // When start status is true it trigger only start releated
             // payload
-            (callbackObj.options.start && dataStatus === utils_1.embedEventStatus.START)
+            (callbackObj.options.start && dataStatus === utils_1.embedEventStatus.START) ||
                 // When start status is false it trigger only end releated
                 // payload
-                || (!callbackObj.options.start && dataStatus === utils_1.embedEventStatus.END)) {
+                (!callbackObj.options.start && dataStatus === utils_1.embedEventStatus.END)) {
                 const responder = this.createEmbedEventResponder(eventPort, eventType);
                 callbackObj.callback(data, responder);
             }
@@ -1113,7 +1168,7 @@ 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_1.logger.info('embedObj is same as this');
         }
@@ -1188,7 +1243,7 @@ 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_1.logger.debug(`Cannot trigger ${messageType} - iframe not available (likely due to auth failure)`);
@@ -1230,7 +1285,8 @@ class TsEmbed {
         if (!(0, base_1.getIsInitCalled)()) {
             logger_1.logger.error(errors_1.ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
         }
-        await this.isReadyForRenderPromise;
+        if (this.shouldWaitForRenderPromise)
+            await this.isReadyForRenderPromise;
         this.isRendered = true;
         return this;
     }
@@ -1241,33 +1297,33 @@ 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() {
@@ -1305,6 +1361,9 @@ class TsEmbed {
         this.showPreRenderByDefault = showPreRenderByDefault;
         const isAlreadyRendered = this.connectPreRendered();
         if (isAlreadyRendered && !replaceExistingPreRender) {
+            if (this.showPreRenderByDefault) {
+                this.showPreRender();
+            }
             return this;
         }
         return this.handleRenderForPrerender();
@@ -1340,25 +1399,28 @@ 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 (!(0, embedConfig_1.getEmbedConfig)().waitForCleanupOnDestroy) {
                 this.trigger(types_1.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 = (0, embedConfig_1.getEmbedConfig)().cleanupTimeout;
                 Promise.race([
                     this.trigger(types_1.HostEvent.DestroyEmbed),
                     new Promise((resolve) => setTimeout(resolve, cleanupTimeout)),
-                ]).catch((e) => {
+                ])
+                    .catch((e) => {
                     logger_1.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);
@@ -1387,56 +1449,75 @@ class TsEmbed {
         if (!(0, base_1.getIsInitCalled)()) {
             logger_1.logger.error(errors_1.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_1.logger.debug('triggering UpdateEmbedParams', this.viewConfig);
+        this.executeAfterEmbedContainerLoaded(async () => {
+            try {
+                const params = await this.getUpdateEmbedParamsObject();
+                this.trigger(types_1.HostEvent.UpdateEmbedParams, params);
+            }
+            catch (error) {
+                logger_1.logger.error(errors_1.ERROR_MESSAGE.UPDATE_PARAMS_FAILED, error);
+                this.handleError({
+                    errorType: types_1.ErrorDetailsTypes.API,
+                    message: (error === null || error === void 0 ? void 0 : error.message) || errors_1.ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
+                    code: types_1.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_1.logger.error(errors_1.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_1.logger.debug('triggering UpdateEmbedParams', this.viewConfig);
-            this.executeAfterEmbedContainerLoaded(async () => {
-                try {
-                    const params = await this.getUpdateEmbedParamsObject();
-                    this.trigger(types_1.HostEvent.UpdateEmbedParams, params);
-                }
-                catch (error) {
-                    logger_1.logger.error(errors_1.ERROR_MESSAGE.UPDATE_PARAMS_FAILED, error);
-                    this.handleError({
-                        errorType: types_1.ErrorDetailsTypes.API,
-                        message: (error === null || error === void 0 ? void 0 : error.message) || errors_1.ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
-                        code: types_1.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) {
                             (0, utils_1.setStyleProperties)(this.preRenderWrapper, {
                                 width: `${entry.contentRect.width}px`,
                                 height: `${entry.contentRect.height}px`,
@@ -1444,10 +1525,15 @@ class TsEmbed {
                         }
                     });
                 });
-                this.resizeObserver.observe(this.el);
+                this.resizeObserver.observe(observeTarget);
             }
         }
-        (0, utils_1.removeStyleProperties)(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events', 'overflow']);
+        (0, utils_1.removeStyleProperties)(this.preRenderWrapper, [
+            'z-index',
+            'opacity',
+            'pointer-events',
+            'overflow',
+        ]);
         this.subscribeToEvents();
         // Setup fullscreen change handler for prerendered components
         if (this.iFrame) {
@@ -1455,6 +1541,9 @@ 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
@@ -1464,16 +1553,17 @@ class TsEmbed {
      * is not defined or not found.
      */
     syncPreRenderStyle() {
-        if (!this.isPreRenderAvailable() || !this.el) {
+        if (!this.isPreRenderConnected() || !this.getPreRenderPlaceHolderElement()) {
             logger_1.logger.error(errors_1.ERROR_MESSAGE.SYNC_STYLE_CALLED_BEFORE_RENDER);
             return;
         }
-        const elBoundingClient = this.el.getBoundingClientRect();
+        const elBoundingClient = this.getPreRenderPlaceHolderElement().getBoundingClientRect();
         (0, utils_1.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',
         });
     }
     /**
@@ -1481,7 +1571,8 @@ class TsEmbed {
      * If the component is not preRendered, it issues a warning.
      */
     hidePreRender() {
-        if (!this.isPreRenderAvailable()) {
+        logger_1.logger.debug('HidePreRender Called');
+        if (!this.isPreRenderConnected()) {
             // if the embed component is not preRendered , nothing to hide
             logger_1.logger.warn('PreRender should be called before hiding it using hidePreRender.');
             return;
@@ -1499,6 +1590,10 @@ class TsEmbed {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
+        const placeHolderEle = this.getPreRenderPlaceHolderElement();
+        if (placeHolderEle) {
+            placeHolderEle.parentElement.removeChild(placeHolderEle);
+        }
         this.unsubscribeToEvents();
     }
     /**
@@ -1512,6 +1607,7 @@ 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}`,
         };
     }
     /**