@thoughtspot/visual-embed-sdk 1.41.0 → 1.42.0

package/src/embed/sage.spec.ts

@@ -18,7 +18,7 @@ const defaultConfig: SageViewConfig = {
     hideAutocompleteSuggestions: false,
     hideSampleQuestions: false,
     isProductTour: false,
-    dataPanelV2: false,
+    dataPanelV2: true,
 };
 
 const thoughtSpotHost = 'tshost';
@@ -43,7 +43,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
             );
         });
     });
@@ -54,7 +54,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=true&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=true&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
             );
         });
     });
@@ -68,7 +68,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=true&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=true&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
             );
         });
     });
@@ -82,7 +82,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=true&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=true&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
             );
         });
     });
@@ -96,7 +96,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=true&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=true&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
             );
         });
     });
@@ -110,7 +110,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=true&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=true&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
             );
         });
     });
@@ -137,7 +137,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka?worksheet=worksheet-id`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka?worksheet=worksheet-id`,
             );
         });
     });
@@ -154,7 +154,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka?worksheet=worksheet-id&query=test%20query`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka?worksheet=worksheet-id&query=test%20query`,
             );
         });
     });
@@ -171,7 +171,7 @@ describe('Sage  embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatch(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&hideAction=%5B%22reportError%22%5D#/embed/eureka?executeSearch=true&query=test-query`,
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=true&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&hideAction=%5B%22reportError%22%5D#/embed/eureka?executeSearch=true&query=test-query`,
             );
         });
     });
@@ -189,4 +189,18 @@ describe('Sage  embed tests', () => {
             );
         });
     });
+
+    test('should set enableDataPanelV2 to false if data panel v2 flag is false', async () => {
+        const sageEmbed = new SageEmbed(getRootEl(), {
+            ...defaultConfig,
+            dataPanelV2: false,
+        });
+        await sageEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatch(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&enableDataPanelV2=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=false&hideEurekaSuggestions=false&isProductTour=false&hideSageAnswerHeader=false&hideAction=%5B%22reportError%22%5D#/embed/eureka`,
+            );
+        });
+    });
 });

package/src/embed/sage.ts

@@ -153,12 +153,7 @@ export class SageEmbed extends V1Embed {
         super(domSelector, viewConfig);
     }
 
-    /**
-     * Constructs a map of parameters to be passed on to the
-     * embedded Eureka or Sage search page.
-     * @returns {string} query string
-     */
-    protected getEmbedParams(): string {
+    protected getEmbedParamsObject() {
         const {
             disableWorksheetChange,
             hideWorksheetSelector,
@@ -184,6 +179,16 @@ export class SageEmbed extends V1Embed {
         params[Param.IsProductTour] = !!isProductTour;
         params[Param.HideSageAnswerHeader] = !!hideSageAnswerHeader;
 
+        return params;
+    }
+
+    /**
+     * Constructs a map of parameters to be passed on to the
+     * embedded Eureka or Sage search page.
+     * @returns {string} query string
+     */
+    protected getEmbedParams(): string {
+        const params = this.getEmbedParamsObject();
         return getQueryParamString(params, true);
     }
 
@@ -194,15 +199,15 @@ export class SageEmbed extends V1Embed {
      */
     public getIFrameSrc(): string {
         const path = 'eureka';
-        const postHashObj = {};
+        const postHashObj: Record<string, any> = {};
         const tsPostHashParams = this.getThoughtSpotPostUrlParams();
         const {
             dataSource, searchOptions,
         } = this.viewConfig;
 
-        if (dataSource) postHashObj[Param.WorksheetId] = dataSource;
+        if (dataSource) (postHashObj as any)[Param.WorksheetId] = dataSource;
         if (searchOptions?.searchQuery && searchOptions.executeSearch) {
-            postHashObj[Param.executeSearch] = true;
+            (postHashObj as any)[Param.executeSearch] = true;
         }
 
         let sagePostHashParams = new URLSearchParams(postHashObj).toString();

package/src/embed/search-bar.tsx

@@ -118,12 +118,7 @@ export class SearchBarEmbed extends TsEmbed {
         this.viewConfig = viewConfig;
     }
 
-    /**
-     * Construct the URL of the embedded ThoughtSpot search to be
-     * loaded in the iframe
-     * @param dataSources A list of data source GUIDs
-     */
-    private getIFrameSrc() {
+    protected getEmbedParamsObject() {
         const {
             searchOptions,
             dataSource,
@@ -131,7 +126,6 @@ export class SearchBarEmbed extends TsEmbed {
             useLastSelectedSources = false,
             excludeSearchTokenStringFromURL,
         } = this.viewConfig;
-        const path = 'search-bar-embed';
         const queryParams = this.getBaseQueryParams();
 
         queryParams[Param.HideActions] = [...(queryParams[Param.HideActions] ?? [])];
@@ -159,6 +153,19 @@ export class SearchBarEmbed extends TsEmbed {
             queryParams[Param.UseLastSelectedDataSource] = false;
         }
         queryParams[Param.searchEmbed] = true;
+
+        return queryParams;
+    }
+
+    /**
+     * Construct the URL of the embedded ThoughtSpot search to be
+     * loaded in the iframe
+     * @param dataSources A list of data source GUIDs
+     */
+    private getIFrameSrc() {
+        const queryParams = this.getEmbedParamsObject();
+        const path = 'search-bar-embed';
+       
         let query = '';
         const queryParamsString = getQueryParamString(queryParams, true);
         if (queryParamsString) {

package/src/embed/search.spec.ts

@@ -6,9 +6,7 @@ import {
 } from './search';
 import * as authInstance from '../auth';
 import { init } from '../index';
-import {
-    Action, AuthType, EmbedEvent, RuntimeFilterOp,
-} from '../types';
+import { Action, AuthType, EmbedEvent, RuntimeFilterOp } from '../types';
 import {
     executeAfterWait,
     getDocumentBody,
@@ -58,7 +56,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&enableDataPanelV2=false&dataSourceMode=expand&useLastSelectedSources=false${prefixParams}#/embed/answer`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&enableDataPanelV2=true&dataSourceMode=expand&useLastSelectedSources=false${prefixParams}#/embed/answer`,
             );
         });
     });
@@ -444,7 +442,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=true${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=true${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -459,7 +457,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -474,7 +472,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -505,7 +503,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false&hideSearchBar=true${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false&hideSearchBar=true${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -528,13 +526,14 @@ describe('Search embed tests', () => {
         const searchEmbed = new SearchEmbed(getRootEl(), {
             ...defaultViewConfig,
             // eslint-disable-next-line max-len
-            dataPanelCustomGroupsAccordionInitialState: DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST,
+            dataPanelCustomGroupsAccordionInitialState:
+                DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST,
         });
         searchEmbed.render();
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_FIRST${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_FIRST${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -566,7 +565,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
 
@@ -612,7 +611,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&executeSearch=true&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&executeSearch=true&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
 
@@ -640,7 +639,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false&searchTokenString=[commit date][revenue]${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false&searchTokenString=[commit date][revenue]${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
     });
@@ -660,7 +659,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false&searchTokenString=[commit date][revenue]${prefixParams}#/embed/saved-answer/${answerId}`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false&searchTokenString=[commit date][revenue]${prefixParams}#/embed/saved-answer/${answerId}`,
             );
         });
 

package/src/embed/search.ts

@@ -331,7 +331,7 @@ export const HiddenActionItemByDefaultForSearchEmbed = [
 ];
 
 export interface SearchAppInitData extends DefaultAppInitData {
-  searchOptions?: SearchOptions;
+    searchOptions?: SearchOptions;
 }
 
 /**
@@ -381,7 +381,7 @@ export class SearchEmbed extends TsEmbed {
         return { ...defaultAppInitData, ...this.getSearchInitData() };
     }
 
-    protected getEmbedParams(): string {
+    protected getEmbedParamsObject() {
         const {
             hideResults,
             enableSearchAssist,
@@ -392,13 +392,13 @@ export class SearchEmbed extends TsEmbed {
             dataSources,
             excludeRuntimeFiltersfromURL,
             hideSearchBar,
-            dataPanelV2 = false,
+            dataPanelV2 = true,
             useLastSelectedSources = false,
             runtimeParameters,
             collapseSearchBarInitially = false,
             enableCustomColumnGroups = false,
             isOnBeforeGetVizDataInterceptEnabled = false,
-            /* eslint-disable-next-line max-len */
+
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
             focusSearchBarOnRender = true,
             excludeRuntimeParametersfromURL,
@@ -443,7 +443,7 @@ export class SearchEmbed extends TsEmbed {
         }
 
         if (isOnBeforeGetVizDataInterceptEnabled) {
-            /* eslint-disable-next-line max-len */
+
             queryParams[Param.IsOnBeforeGetVizDataInterceptEnabled] = isOnBeforeGetVizDataInterceptEnabled;
         }
 
@@ -460,7 +460,7 @@ export class SearchEmbed extends TsEmbed {
         }
 
         queryParams[Param.searchEmbed] = true;
-        /* eslint-disable-next-line max-len */
+
         queryParams[Param.CollapseSearchBarInitially] = collapseSearchBarInitially || collapseSearchBar;
         queryParams[Param.EnableCustomColumnGroups] = enableCustomColumnGroups;
         if (dataPanelCustomGroupsAccordionInitialState
@@ -468,12 +468,23 @@ export class SearchEmbed extends TsEmbed {
             || dataPanelCustomGroupsAccordionInitialState
             === DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST
         ) {
-            /* eslint-disable-next-line max-len */
+
             queryParams[Param.DataPanelCustomGroupsAccordionInitialState] = dataPanelCustomGroupsAccordionInitialState;
         } else {
-            /* eslint-disable-next-line max-len */
+
             queryParams[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
         }
+        return queryParams;
+    }
+
+    protected getEmbedParams() {
+        const {
+            runtimeParameters,
+            runtimeFilters,
+            excludeRuntimeParametersfromURL,
+            excludeRuntimeFiltersfromURL,
+        } = this.viewConfig;
+        const queryParams = this.getEmbedParamsObject();
         let query = '';
         const queryParamsString = getQueryParamString(queryParams, true);
         if (queryParamsString) {

package/src/embed/ts-embed.spec.ts

@@ -2488,7 +2488,7 @@ describe('Unit test case for ts embed', () => {
         });
 
         afterAll((): void => {
-            window.location = location;
+            window.location = location as any;
         });
 
         it('get url params for TS', () => {

package/src/embed/ts-embed.ts

@@ -199,11 +199,11 @@ export class TsEmbed {
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
+        const embedConfig = getEmbedConfig();
+        this.embedConfig = embedConfig;
+    
         this.hostEventClient = new HostEventClient(this.iFrame);
-
         this.isReadyForRenderPromise = getInitPromise().then(async () => {
-            const embedConfig = getEmbedConfig();
-            this.embedConfig = embedConfig;
             if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
                 this.embedConfig.authTriggerContainer = domSelector;
             }
@@ -494,10 +494,10 @@ export class TsEmbed {
         this.on(EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
         this.on(EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
         this.on(EmbedEvent.IdleSessionTimeout, this.idleSessionTimeout, { start: false }, true);
-        
-        const embedListenerReadyHandler = this.createEmbedContainerHandler(EmbedEvent.EmbedListenerReady);  
+
+        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);
     };
@@ -520,6 +520,12 @@ export class TsEmbed {
         return `${basePath}#`;
     }
 
+    protected getUpdateEmbedParamsObject() {
+        let queryParams = this.getEmbedParamsObject();
+        queryParams = { ...this.viewConfig, ...queryParams };
+        return queryParams;
+    }
+
     /**
      * Common query params set for all the embed modes.
      * @param queryParams
@@ -702,10 +708,15 @@ export class TsEmbed {
     }
 
     protected getEmbedParams() {
-        const queryParams = this.getBaseQueryParams();
+        const queryParams = this.getEmbedParamsObject();
         return getQueryParamString(queryParams);
     }
 
+    protected getEmbedParamsObject() {
+        const params = this.getBaseQueryParams();
+        return params;
+    }
+
     protected getRootIframeSrc() {
         const query = this.getEmbedParams();
         return this.getEmbedBasePath(query);
@@ -1140,12 +1151,12 @@ export class TsEmbed {
         }
     }
 
-    /**
+     /**
      * @hidden
      * Internal state to track if the embed container is loaded.
      * This is used to trigger events after the embed container is loaded.
      */
-    public isEmbedContainerLoaded = false;
+     public isEmbedContainerLoaded = false;
 
     /**
      * @hidden
@@ -1191,7 +1202,7 @@ export class TsEmbed {
         } else {
             logger.debug('pushing callback to embedContainerReadyCallbacks', callback);
             this.embedContainerReadyCallbacks.push(callback);
-          }
+        }
     }
 
     protected createEmbedContainerHandler = (source: EmbedEvent.AuthInit | EmbedEvent.EmbedListenerReady) => () => {
@@ -1279,13 +1290,20 @@ export class TsEmbed {
      * Creates the preRender shell
      * @param showPreRenderByDefault - Show the preRender after render, hidden by default
      */
-    public async preRender(showPreRenderByDefault = false): Promise<TsEmbed> {
+
+    public async preRender(showPreRenderByDefault = false, replaceExistingPreRender = false): Promise<TsEmbed> {
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
         }
         this.isPreRendered = true;
         this.showPreRenderByDefault = showPreRenderByDefault;
+        
+        const isAlreadyRendered = this.connectPreRendered();
+        if (isAlreadyRendered && !replaceExistingPreRender) {
+            return this;
+        }
+
         return this.handleRenderForPrerender();
     }
 
@@ -1407,8 +1425,14 @@ export class TsEmbed {
                 return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
+            logger.debug('triggering UpdateEmbedParams', this.viewConfig);
+            this.executeAfterEmbedContainerLoaded(() => {
+                this.trigger(HostEvent.UpdateEmbedParams, this.getUpdateEmbedParamsObject());
+            });
         }
 
+        this.beforePrerenderVisible();
+
         if (this.el) {
             this.syncPreRenderStyle();
             if (!this.viewConfig.doNotTrackPreRenderSize) {
@@ -1426,8 +1450,6 @@ export class TsEmbed {
             }
         }
 
-        this.beforePrerenderVisible();
-
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();

package/src/errors.ts

@@ -10,6 +10,7 @@ export const ERROR_MESSAGE = {
     SDK_NOT_INITIALIZED: 'SDK not initialized',
     SESSION_INFO_FAILED: 'Failed to get session information',
     INVALID_TOKEN_ERROR: 'Received invalid token from getAuthToken callback or authToken endpoint.',
+    INVALID_TOKEN_TYPE_ERROR: 'Expected getAuthToken to return a string, but received a {invalidType}.',
     MIXPANEL_TOKEN_NOT_FOUND: 'Mixpanel token not found in session info',
     PRERENDER_ID_MISSING: 'PreRender ID is required for preRender',
     SYNC_STYLE_CALLED_BEFORE_RENDER: 'PreRender should be called before using syncPreRenderStyle',

package/src/react/all-types-export.spec.ts

@@ -6,6 +6,6 @@ describe('Exports', () => {
     });
 
     it('should not have undefined exports', () => {
-        Object.keys(Exports).forEach((exportKey) => expect(Boolean(Exports[exportKey])).toBe(true));
+        Object.entries(Exports).forEach(([, exportValue]) => {expect(Boolean(exportValue)).toBe(true);});
     });
 });

package/src/react/index.spec.tsx

@@ -56,7 +56,7 @@ describe('React Components', () => {
                 ),
             ).toBe(true);
             expect(getIFrameSrc(container)).toBe(
-                `http://${thoughtSpotHost}/?embedApp=true&hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&preAuthCache=true&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=true&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
+                `http://${thoughtSpotHost}/?embedApp=true&hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&preAuthCache=true&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=true&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=true&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
             );
         });
 

package/src/react/index.tsx

@@ -94,10 +94,12 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
             };
         }, [viewConfig, listeners]);
 
+        const preRenderStyles = isPreRenderedComponent ? { display: 'none' } : {};
+
         return viewConfig.insertAsSibling ? (
-            <span data-testid="tsEmbed" ref={ref} style={{ position: 'absolute' }}></span>
+            <span data-testid="tsEmbed" ref={ref} style={{ position: 'absolute', ...preRenderStyles }}></span>
         ) : (
-            <div data-testid="tsEmbed" ref={ref} style={style} className={`ts-embed-container ${className}`}></div>
+            <div data-testid="tsEmbed" ref={ref} style={{ ...style, ...preRenderStyles }} className={`ts-embed-container ${className}`}></div>
         );
     },
 );

package/src/react/util.spec.tsx

@@ -0,0 +1,88 @@
+import { getViewPropsAndListeners } from './util';
+import { EmbedEvent, MessageCallback } from '../types';
+
+describe('React util functions', () => {
+    describe('getViewPropsAndListeners', () => {
+        test('should return empty viewConfig and listeners for empty props', () => {
+            const props = {};
+            const result = getViewPropsAndListeners(props);
+
+            expect(result.viewConfig).toEqual({});
+            expect(result.listeners).toEqual({});
+        });
+
+        test('should separate view config properties from props', () => {
+            const props = {
+                frameParams: { width: 100, height: 200 },
+                showLiveboardTitle: true,
+                liveboardId: 'test-liveboard-id',
+                vizId: 'test-viz-id',
+                className: 'test-class',
+                style: { color: 'red' },
+            };
+
+            const result = getViewPropsAndListeners(props);
+
+            expect(result.viewConfig).toEqual({
+                frameParams: { width: 100, height: 200 },
+                showLiveboardTitle: true,
+                liveboardId: 'test-liveboard-id',
+                vizId: 'test-viz-id',
+                className: 'test-class',
+                style: { color: 'red' },
+            });
+            expect(result.listeners).toEqual({});
+        });
+
+        test('should separate event handlers from props', () => {
+            const onInit: MessageCallback = jest.fn();
+            const onLoad: MessageCallback = jest.fn();
+            const onData: MessageCallback = jest.fn();
+
+            const props = {
+                onInit,
+                onLoad,
+                onData,
+            };
+
+            const result = getViewPropsAndListeners(props);
+
+            expect(result.viewConfig).toEqual({});
+            expect(result.listeners).toEqual({
+                [EmbedEvent.Init]: onInit,
+                [EmbedEvent.Load]: onLoad,
+                [EmbedEvent.Data]: onData,
+            });
+        });
+
+        test('should handle both view config and event handlers', () => {
+            const onInit: MessageCallback = jest.fn();
+            const onAuthInit: MessageCallback = jest.fn();
+            const onQueryChanged: MessageCallback = jest.fn();
+
+            const props = {
+                liveboardId: 'test-liveboard-id',
+                showLiveboardTitle: false,
+                frameParams: { height: 500 },
+                onInit,
+                onAuthInit,
+                onQueryChanged,
+                className: 'embed-container',
+            };
+
+            const result = getViewPropsAndListeners(props);
+
+            expect(result.viewConfig).toEqual({
+                liveboardId: 'test-liveboard-id',
+                showLiveboardTitle: false,
+                frameParams: { height: 500 },
+                className: 'embed-container',
+            });
+            expect(result.listeners).toEqual({
+                [EmbedEvent.Init]: onInit,
+                [EmbedEvent.AuthInit]: onAuthInit,
+                [EmbedEvent.QueryChanged]: onQueryChanged,
+            });
+        });
+    });
+});