@thoughtspot/visual-embed-sdk 1.40.0 → 1.40.1-alpha.2

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);
     }
 

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.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,
@@ -398,7 +398,7 @@ export class SearchEmbed extends TsEmbed {
             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.ts

@@ -185,7 +185,10 @@ export class TsEmbed {
      */
     private fullscreenChangeHandler: (() => void) | null = null;
 
+    public id: string;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
+        this.id = Date.now().toString();
         this.el = getDOMNode(domSelector);
         this.eventHandlerMap = new Map();
         this.isError = false;
@@ -200,9 +203,10 @@ export class TsEmbed {
         });
         this.hostEventClient = new HostEventClient(this.iFrame);
 
+        const embedConfig = getEmbedConfig();
+        this.embedConfig = embedConfig;
         this.isReadyForRenderPromise = getInitPromise().then(async () => {
-            const embedConfig = getEmbedConfig();
-            this.embedConfig = embedConfig;
+        
             if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
                 this.embedConfig.authTriggerContainer = domSelector;
             }
@@ -237,7 +241,7 @@ export class TsEmbed {
      * @param event The window message event
      */
     private getEventType(event: MessageEvent) {
-        // eslint-disable-next-line no-underscore-dangle
+
         return event.data?.type || event.data?.__type;
     }
 
@@ -281,11 +285,11 @@ export class TsEmbed {
      */
     private isFullAppEmbedWithVisiblePrimaryNavbar(): boolean {
         const appViewConfig = this.viewConfig as any;
-        
+
         // Check if this is a FullAppEmbed (AppEmbed)
         // showPrimaryNavbar defaults to true if not explicitly set to false
         return (
-            appViewConfig.embedComponentType === 'AppEmbed' 
+            appViewConfig.embedComponentType === 'AppEmbed'
             && appViewConfig.showPrimaryNavbar === true
         );
     }
@@ -310,6 +314,8 @@ export class TsEmbed {
 
     private subscribedListeners: Record<string, any> = {};
 
+    public isEmbedContainerLoaded = false;
+
     /**
      * Adds a global event listener to window for "message" events.
      * ThoughtSpot detects if a particular event is targeted to this
@@ -431,7 +437,8 @@ export class TsEmbed {
     private updateAuthToken = async (_: any, responder: any) => {
         const { authType } = this.embedConfig;
         let { autoLogin } = this.embedConfig;
-        // Default autoLogin: true for cookieless if undefined/null, otherwise false
+        // Default autoLogin: true for cookieless if undefined/null, otherwise
+        // false
         autoLogin = autoLogin ?? (authType === AuthType.TrustedAuthTokenCookieless);
         if (autoLogin && authType === AuthType.TrustedAuthTokenCookieless) {
             try {
@@ -474,11 +481,55 @@ export class TsEmbed {
         notifyAuthFailure(AuthFailureType.IDLE_SESSION_TIMEOUT);
     };
 
+    private pendingEvents: Array<{ eventType: HostEvent, data: TriggerPayload<any, HostEvent>, onEventTriggered?: () => void }> = [];
+
+    protected getPreRenderObj<T extends TsEmbed>(): T {
+        const embedObj = (this.insertedDomEl as any)?.[this.embedNodeKey] as T;
+        if (embedObj === (this as any)) {
+            logger.info('embedObj is same as this');
+        }
+        return embedObj;
+    }
+
+    private checkEmbedContainerLoaded() {
+        if (this.isEmbedContainerLoaded) return true;
+
+        const preRenderObj = this.getPreRenderObj<TsEmbed>();
+        if (preRenderObj && preRenderObj.isEmbedContainerLoaded) {
+            this.isEmbedContainerLoaded = true;
+        }
+
+        return this.isEmbedContainerLoaded;
+    }
+
+    private executePendingEvents() {
+        logger.debug('executePendingEvents', this.pendingEvents);
+        setTimeout(() => {
+            this.pendingEvents.forEach((event) => {
+                this.trigger(event.eventType, event.data);
+                event.onEventTriggered?.();
+            });
+            this.pendingEvents = [];
+        }, 1000);
+    }
+    protected triggerAfterLoad(eventType: HostEvent, data: TriggerPayload<any, HostEvent>, onEventTriggered?: () => void) {
+        if (this.checkEmbedContainerLoaded()) {
+            this.trigger(eventType, data);
+            onEventTriggered?.();
+        } else {
+            this.pendingEvents.push({ eventType, data, onEventTriggered });
+        }
+    }
+
     /**
      * Register APP_INIT event and sendback init payload
      */
     private registerAppInit = () => {
         this.on(EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
+        this.on(EmbedEvent.AuthInit, () => {
+            this.isEmbedContainerLoaded = true;
+            this.executePendingEvents();
+        }, { start: false }, true);
         this.on(EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
         this.on(EmbedEvent.IdleSessionTimeout, this.idleSessionTimeout, { start: false }, true);
     };
@@ -501,6 +552,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
@@ -683,10 +740,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);
@@ -798,8 +860,9 @@ export class TsEmbed {
                                 }
                             });
                         }
-                        
-                        // Setup fullscreen change handler after iframe is loaded and ready
+
+                        // Setup fullscreen change handler after iframe is
+                        // loaded and ready
                         this.setupFullscreenChangeHandler();
                     });
                     this.iFrame.addEventListener('error', () => {
@@ -926,7 +989,7 @@ export class TsEmbed {
                 const div = document.createElement('div');
                 div.innerHTML = child;
                 div.id = TS_EMBED_ID;
-                // eslint-disable-next-line no-param-reassign
+
                 child = div;
             }
             if (this.el.nextElementSibling?.id === TS_EMBED_ID) {
@@ -1070,11 +1133,11 @@ export class TsEmbed {
         if (this.isRendered) {
             logger.warn('Please register event handlers before calling render');
         }
-        
+
         const callbacks = this.eventHandlerMap.get(messageType) || [];
         callbacks.push({ options, callback });
         this.eventHandlerMap.set(messageType, callbacks);
-        
+
         return this;
     }
 
@@ -1174,7 +1237,7 @@ export class TsEmbed {
         }
         await this.isReadyForRenderPromise;
         this.isRendered = true;
-        
+
         return this;
     }
 
@@ -1288,11 +1351,11 @@ export class TsEmbed {
                 ) {
                     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.',
+                        + `"${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.',
                     );
                 }
             });
@@ -1318,8 +1381,12 @@ export class TsEmbed {
                 return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
+            logger.debug('triggering UpdateEmbedParams', this.viewConfig);
+            this.triggerAfterLoad(HostEvent.UpdateEmbedParams, this.getUpdateEmbedParamsObject());
         }
 
+        this.beforePrerenderVisible();
+
         if (this.el) {
             this.syncPreRenderStyle();
             if (!this.viewConfig.doNotTrackPreRenderSize) {
@@ -1337,12 +1404,10 @@ export class TsEmbed {
             }
         }
 
-        this.beforePrerenderVisible();
-
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();
-        
+
         // Setup fullscreen change handler for prerendered components
         if (this.iFrame) {
             this.setupFullscreenChangeHandler();
@@ -1431,7 +1496,7 @@ export class TsEmbed {
     private setupFullscreenChangeHandler() {
         const embedConfig = getEmbedConfig();
         const disableFullscreenPresentation = embedConfig?.disableFullscreenPresentation ?? true;
-        
+
         if (disableFullscreenPresentation) {
             return;
         }
@@ -1444,7 +1509,8 @@ export class TsEmbed {
             const isFullscreen = !!document.fullscreenElement;
             if (!isFullscreen) {
                 logger.info('Exited fullscreen mode - triggering ExitPresentMode');
-                // Only trigger if iframe is available and contentWindow is accessible
+                // Only trigger if iframe is available and contentWindow is
+                // accessible
                 if (this.iFrame && this.iFrame.contentWindow) {
                     this.trigger(HostEvent.ExitPresentMode);
                 } else {
@@ -1540,6 +1606,6 @@ export class V1Embed extends TsEmbed {
      * Only for testing purposes.
      * @hidden
      */
-    // eslint-disable-next-line camelcase
+
     public test__executeCallbacks = this.executeCallbacks;
 }