@thoughtspot/visual-embed-sdk 1.44.3 → 1.44.4

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

@@ -2483,6 +2483,44 @@ describe('Unit test case for ts embed', () => {
             expect(libEmbed.preRender).toHaveBeenCalledTimes(0);
         });
 
+        it('should set overflow:hidden when hidePreRender and remove when showPreRender', async () => {
+            createRootEleForEmbed();
+
+            (window as any).ResizeObserver = window.ResizeObserver
+                || jest.fn().mockImplementation(() => ({
+                    disconnect: jest.fn(),
+                    observe: jest.fn(),
+                    unobserve: jest.fn(),
+                }));
+
+            const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                preRenderId: 'overflow-test',
+                liveboardId: 'myLiveboardId',
+            });
+
+            await libEmbed.preRender();
+            await waitFor(() => !!getIFrameEl());
+
+            const preRenderIds = libEmbed.getPreRenderIds();
+            const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
+
+            // After preRender (calls hidePreRender by default)
+            // should have overflow:hidden
+            expect(preRenderWrapper.style.overflow).toBe('hidden');
+            expect(preRenderWrapper.style.opacity).toBe('0');
+
+            // After showPreRender, overflow should be removed
+            // to inherit from CSS
+            libEmbed.showPreRender();
+            expect(preRenderWrapper.style.overflow).toBe('');
+            expect(preRenderWrapper.style.opacity).toBe('');
+
+            // After hidePreRender again, overflow should be hidden
+            libEmbed.hidePreRender();
+            expect(preRenderWrapper.style.overflow).toBe('hidden');
+            expect(preRenderWrapper.style.opacity).toBe('0');
+        });
+
         it('it should connect with another object', async () => {
             createRootEleForEmbed();
             mockMessageChannel();
@@ -4107,19 +4145,7 @@ describe('Fullscreen change handler behavior', () => {
 });
 
 describe('ShowPreRender with UpdateEmbedParams', () => {
-    beforeAll(() => {
-        init({
-            thoughtSpotHost: 'tshost',
-            authType: AuthType.None,
-        });
-    });
-
-    afterEach(() => {
-        const rootEle = document.getElementById('myRoot');
-        rootEle?.remove();
-    });
-
-    test('should trigger UpdateEmbedParams when showPreRender connects to existing prerendered component', async () => {
+    const setupPreRenderTest = async (preRenderId: string, initialConfig: Partial<LiveboardViewConfig>) => {
         createRootEleForEmbed();
         mockMessageChannel();
 
@@ -4131,8 +4157,8 @@ describe('ShowPreRender with UpdateEmbedParams', () => {
             }));
 
         const embed1 = new LiveboardEmbed('#tsEmbedDiv', {
-            preRenderId: 'update-params-test',
-            liveboardId: 'original-lb',
+            preRenderId,
+            ...initialConfig,
         });
         
         await embed1.preRender();
@@ -4143,6 +4169,24 @@ describe('ShowPreRender with UpdateEmbedParams', () => {
         mockProcessTrigger.mockClear();
         mockProcessTrigger.mockResolvedValue({});
 
+        return embed1;
+    };
+
+    beforeAll(() => {
+        init({
+            thoughtSpotHost: 'tshost',
+            authType: AuthType.None,
+        });
+    });
+
+    afterEach(() => {
+        const rootEle = document.getElementById('myRoot');
+        rootEle?.remove();
+    });
+
+    test('should trigger UpdateEmbedParams when showPreRender connects to existing prerendered component', async () => {
+        await setupPreRenderTest('update-params-test', { liveboardId: 'original-lb' });
+
         const embed2 = new LiveboardEmbed('#tsEmbedDiv', {
             preRenderId: 'update-params-test',
             liveboardId: 'updated-lb',
@@ -4161,4 +4205,135 @@ describe('ShowPreRender with UpdateEmbedParams', () => {
             );
         });
     });
+
+    test('should trigger UpdateEmbedParams with runtime filters and visible vizs', async () => {
+        await setupPreRenderTest('url-param-test', { liveboardId: 'original-lb' });
+
+        const embed2 = new LiveboardEmbed('#tsEmbedDiv', {
+            preRenderId: 'url-param-test',
+            liveboardId: 'original-lb',
+            visibleVizs: ['viz-1'],
+            runtimeFilters: [
+                {
+                    columnName: 'Color',
+                    operator: RuntimeFilterOp.IN,
+                    values: ['red', 'blue'],
+                },
+                {
+                    columnName: 'Region',
+                    operator: RuntimeFilterOp.EQ,
+                    values: ['North'],
+                },
+            ],
+        });
+
+        embed2.showPreRender();
+
+        await executeAfterWait(() => {
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                expect.any(Object),
+                HostEvent.UpdateEmbedParams,
+                expect.any(String),
+                expect.objectContaining({
+                    liveboardId: 'original-lb',
+                    visibleVizs: ['viz-1'],
+                    runtimeFilters: [
+                        {
+                            columnName: 'Color',
+                            operator: RuntimeFilterOp.IN,
+                            values: ['red', 'blue'],
+                        },
+                        {
+                            columnName: 'Region',
+                            operator: RuntimeFilterOp.EQ,
+                            values: ['North'],
+                        },
+                    ],
+                }),
+            );
+        });
+    });
+
+    test('should trigger UpdateEmbedParams with updated config', async () => {
+        await setupPreRenderTest('preserve-config-test', {
+            liveboardId: 'original-lb',
+            runtimeFilters: [
+                {
+                    columnName: 'Color',
+                    operator: RuntimeFilterOp.IN,
+                    values: ['red', 'blue'],
+                },
+            ],
+        });
+
+        const embed2 = new LiveboardEmbed('#tsEmbedDiv', {
+            preRenderId: 'preserve-config-test',
+            liveboardId: 'original-lb',
+            visibleVizs: ['viz-1', 'viz-2'],
+            runtimeFilters: [
+                {
+                    columnName: 'Region',
+                    operator: RuntimeFilterOp.EQ,
+                    values: ['North'],
+                },
+            ],
+        });
+
+        embed2.showPreRender();
+
+        await executeAfterWait(() => {
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                expect.any(Object),
+                HostEvent.UpdateEmbedParams,
+                expect.any(String),
+                expect.objectContaining({
+                    liveboardId: 'original-lb',
+                    visibleVizs: ['viz-1', 'viz-2'],
+                    runtimeFilters: [
+                        {
+                            columnName: 'Region',
+                            operator: RuntimeFilterOp.EQ,
+                            values: ['North'],
+                        },
+                    ],
+                }),
+            );
+        });
+    });
+
+    test('should handle error when getUpdateEmbedParamsObject fails during showPreRender', async () => {
+        await setupPreRenderTest('error-test', { liveboardId: 'original-lb' });
+
+        const handleErrorSpy = jest.spyOn(LiveboardEmbed.prototype as any, 'handleError');
+
+        const embed2 = new LiveboardEmbed('#tsEmbedDiv', {
+            preRenderId: 'error-test',
+            liveboardId: 'updated-lb',
+        });
+
+        const mockError = new Error('Failed to get params');
+        jest.spyOn(embed2 as any, 'getUpdateEmbedParamsObject').mockRejectedValue(mockError);
+
+        embed2.showPreRender();
+
+        await executeAfterWait(() => {
+            expect(handleErrorSpy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    errorType: ErrorDetailsTypes.API,
+                    message: 'Failed to get params',
+                    code: EmbedErrorCodes.UPDATE_PARAMS_FAILED,
+                    error: 'Failed to get params',
+                }),
+            );
+
+            expect(mockProcessTrigger).not.toHaveBeenCalledWith(
+                expect.any(Object),
+                HostEvent.UpdateEmbedParams,
+                expect.any(String),
+                expect.any(Object),
+            );
+        });
+
+        handleErrorSpy.mockRestore();
+    });
 });

package/src/embed/ts-embed.ts

@@ -592,9 +592,11 @@ export class TsEmbed {
         return `${basePath}#`;
     }
 
-    protected getUpdateEmbedParamsObject() {
+    protected async getUpdateEmbedParamsObject() {
         let queryParams = this.getEmbedParamsObject();
-        queryParams = { ...this.viewConfig, ...queryParams, ...this.getAppInitData() };
+        const appInitData = await this.getAppInitData();
+        queryParams = { ...this.viewConfig, ...queryParams, ...appInitData };
+        
         return queryParams;
     }
 
@@ -957,6 +959,8 @@ export class TsEmbed {
         preRenderWrapper.id = preRenderIds.wrapper;
         const initialPreRenderWrapperStyle = {
             position: 'absolute',
+            top: '0',
+            left: '0',
             width: '100vw',
             height: '100vh',
         };
@@ -1574,8 +1578,19 @@ export class TsEmbed {
             }
             this.validatePreRenderViewConfig(this.viewConfig);
             logger.debug('triggering UpdateEmbedParams', this.viewConfig);
-            this.executeAfterEmbedContainerLoaded(() => {
-                this.trigger(HostEvent.UpdateEmbedParams, this.getUpdateEmbedParamsObject());
+            this.executeAfterEmbedContainerLoaded(async () => {
+                try {
+                    const params = await this.getUpdateEmbedParamsObject();
+                    this.trigger(HostEvent.UpdateEmbedParams, params);
+                } catch (error) {
+                    logger.error(ERROR_MESSAGE.UPDATE_PARAMS_FAILED, error);
+                    this.handleError({
+                        errorType: ErrorDetailsTypes.API,
+                        message: error?.message || ERROR_MESSAGE.UPDATE_PARAMS_FAILED,
+                        code: EmbedErrorCodes.UPDATE_PARAMS_FAILED,
+                        error: error?.message || error,
+                    });
+                }
             });
         }
 
@@ -1598,7 +1613,7 @@ export class TsEmbed {
             }
         }
 
-        removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
+        removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events', 'overflow']);
 
         this.subscribeToEvents();
 
@@ -1647,7 +1662,10 @@ export class TsEmbed {
             opacity: '0',
             pointerEvents: 'none',
             zIndex: '-1000',
-            position: 'absolute ',
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            overflow: 'hidden',
         };
         setStyleProperties(this.preRenderWrapper, preRenderHideStyles);
 

package/src/errors.ts

@@ -28,6 +28,7 @@ export const ERROR_MESSAGE = {
     LOGIN_FAILED: 'Login failed',
     ERROR_PARSING_API_INTERCEPT_BODY: 'Error parsing api intercept body',
     SSR_ENVIRONMENT_ERROR: 'SSR environment detected. This function cannot be called in SSR environment.',
+    UPDATE_PARAMS_FAILED: 'Failed to update embed parameters',
 };
 
 export const CUSTOM_ACTIONS_ERROR_MESSAGE = {

package/src/index.ts

@@ -66,6 +66,8 @@ import {
     CustomActionsPosition,
     CustomActionTarget,
     InterceptedApiType,
+    EmbedErrorCodes,
+    ErrorDetailsTypes,
 } from './types';
 import { CustomCssVariables } from './css-variables';
 import { SageEmbed, SageViewConfig } from './embed/sage';
@@ -156,6 +158,8 @@ export {
     CustomActionsPosition,
     CustomActionTarget,
     InterceptedApiType,
+    EmbedErrorCodes,
+    ErrorDetailsTypes,
 };
 
 export { resetCachedAuthToken } from './authToken';

package/src/types.ts

@@ -169,57 +169,71 @@ export enum AuthType {
 }
 /**
  *
- * This option does not apply to the classic homepage experience.
- * To access the updated modular homepage,
- * set `modularHomeExperience` to `true`
- * (available as Early Access feature in 9.12.5.cl).
+ * **Note**:  This attribute is not supported in the classic (V1) homepage experience.
  *
  */
 
 export enum HomeLeftNavItem {
     /**
+     * The *Search data* option in
+     * the *Insights* left navigation panel.
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
      */
     SearchData = 'search-data',
     /**
+     * The *Home* menu option in
+     * the *Insights* left navigation panel.
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
      */
     Home = 'insights-home',
     /**
+     * The *Liveboards* menu option in
+     * the *Insights* left navigation panel.
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
      */
     Liveboards = 'liveboards',
     /**
+     * The *Answers* menu option in
+     * the *Insights* left navigation panel.
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
      */
     Answers = 'answers',
     /**
+     * The *Monitor subscriptions* menu option in
+     * the *Insights* left navigation panel.
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
      */
     MonitorSubscription = 'monitor-alerts',
     /**
+     * The *SpotIQ analysis* menu option in
+     * the *Insights* left navigation panel.
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
      */
     SpotIQAnalysis = 'spotiq-analysis',
     /**
+     * The *Liveboard schedules* menu option in
+     * the *Insights* left navigation panel.
      * @version SDK: 1.34.0| ThoughtSpot: 10.3.0.cl
      */
     LiveboardSchedules = 'liveboard-schedules',
     /**
-     * Create new options in the insights left navigation,
-     * available when new navigation V3 is enabled.
+     * The create option in the *Insights*
+     * left navigation panel.
+     * Available in the V3 navigation experience.
      * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     Create = 'create',
     /**
-     * Spotter option in the insights left navigation,
-     * available when new navigation V3 is enabled.
+     * The *Spotter* menu option in the *Insights*
+     * left navigation panel.
+     * Available in the V3 navigation experience.
      * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     Spotter = 'spotter',
     /**
-     * Favorites option in the insights left navigation,
-     * available when new navigation V3 is enabled.
+     * The *Favorites* section in the *Insights*
+     * left navigation panel.
+     * Available in the V3 navigation experience.
      * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
     Favorites = 'favorites',
@@ -1113,11 +1127,13 @@ export interface BaseViewConfig extends ApiInterceptFlags {
  */
 export interface HomePageConfig {
     /**
-     * Hide list page columns
-     * For example: hiddenListColumns = [ListPageColumns.Author]
+     * Hide columns on list pages such as
+     * *Liveboards* and *Answers*.
+     * For example: `hiddenListColumns = [ListPageColumns.Author]`
      *
-     * **Note**: This option is currently available only in full app embedding and requires importing the ListPageColumns enum.
-     * At present, it can be used with Liveboard and Answer list pages, and starting with version 10.14.0.cl, it will also be supported for the Home page.
+     * **Note**: This option is available only in full app embedding and requires importing the `ListPageColumns` enum.
+     * Starting with version 10.14.0.cl, you can use this attribute to
+     * hide the columns on all list pages in the *Insights* section.
      *
      * Supported embed types: `AppEmbed`
      * @version SDK: 1.38.0 | ThoughtSpot: 10.9.0.cl
@@ -1133,13 +1149,11 @@ export interface HomePageConfig {
      */
     hiddenListColumns?: ListPageColumns[];
     /**
-     * Hide the home page modules
-     * For example: hiddenHomepageModules = [HomepageModule.MyLibrary]
+     * Control the visibility of home page modules.
+     * To specify the modules, import the `HomepageModule` enum.
+     * For example: `hiddenHomepageModules = [HomepageModule.MyLibrary]`
      *
-     * **Note**: This option does not apply to the classic homepage.
-     * To access the updated modular homepage, set
-     * `modularHomeExperience` to `true` (available as Early Access feature in 9.12.5.cl).
-     * To use it, you need to import `HomepageModule` enum.
+     * **Note**: This attribute is not supported in the classic (v1) experience.
      *
      * Supported embed types: `AppEmbed`
      * @version SDK: 1.28.0 | ThoughtSpot: 9.12.5.cl, 10.1.0.sw
@@ -1148,20 +1162,18 @@ export interface HomePageConfig {
      * import { HomepageModule } from '@thoughtspot/visual-embed-sdk';
      *
      * const embed = new AppEmbed('#tsEmbed', {
-     *    ... //other embed view config
+     *    ... // V2/V3 navigation and home page experience attributes
      *    hiddenHomepageModules : [HomepageModule.Favorite,HomepageModule.Learning],
+     *    //...other embed view configuration attributes
      * })
      * ```
      */
     hiddenHomepageModules?: HomepageModule[];
     /**
-     * reordering the home page modules
-     * eg: reorderedHomepageModules = [HomepageModule.MyLibrary, HomepageModule.Watchlist]
-     *
-     * **Note**: This option does not apply to the classic homepage.
-     * To access the updated modular homepage, set
-     * `modularHomeExperience` to `true` (available as Early Access feature in 9.12.5.cl).
-     * To use it, you need to import `HomepageModule` enum.
+     * Reorder home page modules.
+     * To specify the modules, import the `HomepageModule` enum.
+     * For example: `reorderedHomepageModules = [HomepageModule.MyLibrary, HomepageModule.Watchlist]`
+     * **Note**: This attribute is not supported in the classic (v1) homepage.
      *
      * Supported embed types: `AppEmbed`
      * @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl, 10.1.0.sw
@@ -1170,16 +1182,19 @@ export interface HomePageConfig {
      * import { HomepageModule } from '@thoughtspot/visual-embed-sdk';
      *
      * const embed = new AppEmbed('#tsEmbed', {
-     *    ... //other embed view config
+     *    ...//V2/V3 navigation and home page experience attributes
      *    reorderedHomepageModules:[HomepageModule.Favorite,HomepageModule.MyLibrary],
+     *    //... other embed view configuration attributes
      * })
      * ```
      */
     reorderedHomepageModules?: HomepageModule[];
     /**
-     * homepageLeftNavItems : Show or hide the left navigation bar items.
-     * There are 8 eight home navigation list items.
-     * To hide these items, specify the string in the array.
+     * Controls the visibility of the menu items
+     * on the home page left navigation panel.
+     * To specify the menu items, import the `HomeLeftNavItem` enum.
+     *
+     * **Note**: This attribute is not supported in the classic (v1) homepage.
      *
      * Supported embed types: `AppEmbed`
      * @example
@@ -1187,15 +1202,11 @@ export interface HomePageConfig {
      * import { HomeLeftNavItem } from '@thoughtspot/visual-embed-sdk';
      *
      * const embed = new AppEmbed('#tsEmbed', {
-     *    ... //other embed view config
+     *    //... V2/V3 experience attributes
      *    hiddenHomeLeftNavItems : [HomeLeftNavItem.Home,HomeLeftNavItem.Answers],
+     *    ... //other embed view configuration attributes
      * })
      * ```
-     *
-     * **Note**: This option does not apply to the classic homepage.
-     * To access the updated modular homepage, set
-     * `modularHomeExperience` to `true` (available as Early Access feature in 9.12.5.cl).
-     * To use it, you need to import `HomeLeftNavItem` enum.
      * @version SDK: 1.28.0 | ThoughtSpot: 9.12.5.cl, 10.1.0.sw
      */
     hiddenHomeLeftNavItems?: HomeLeftNavItem[];
@@ -1748,10 +1759,11 @@ export enum RuntimeFilterOp {
 }
 
 /**
- * Home page module that can be hidden.
- * **Note**: This option does not apply to the classic homepage.
- * To access the updated modular homepage, set
- * `modularHomeExperience` to `true` (available as Early Access feature in 9.12.5.cl).
+ * Home page modules that can be hidden
+ * via `hiddenHomepageModules` and reordered via
+ * `reorderedHomepageModules`.
+ *
+ * **Note**: This option is not supported in the classic (v1) experience.
  * @version SDK: 1.28.0 | ThoughtSpot: 9.12.5.cl, 10.1.0.sw
  */
 
@@ -1765,7 +1777,7 @@ export enum HomepageModule {
      */
     Watchlist = 'WATCHLIST',
     /**
-     * favorite objects
+     * Favorite module
      */
     Favorite = 'FAVORITE',
     /**
@@ -2960,6 +2972,28 @@ export enum EmbedEvent {
      * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
      */
     PreviewSpotterData = 'PreviewSpotterData',
+    /**
+     * Emitted when user opens up the Add to Coaching modal on any visualization in Spotter Embed.
+     * @example
+     * ```js
+     * spotterEmbed.on(EmbedEvent.AddToCoaching, (payload) => {
+     *     console.log('payload', payload);
+     * })
+     *```
+     * @version SDK: 1.45.0 | ThoughtSpot: 26.2.0.cl
+     */
+    AddToCoaching = 'addToCoaching',
+    /**
+     * Emitted when user opens up the data model instructions modal in Spotter embed.
+     * @example
+     * ```js
+     * spotterEmbed.on(EmbedEvent.DataModelInstructions, (payload) => {
+     *     console.log('payload', payload);
+     * })
+     * ```
+     * @version SDK: 1.45.0 | ThoughtSpot: 26.2.0.cl
+     */
+    DataModelInstructions = 'DataModelInstructions',
     /**
      * Emitted when the Spotter query is triggered in Spotter embed.
      * @example
@@ -4385,6 +4419,26 @@ export enum HostEvent {
      * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     PreviewSpotterData = 'PreviewSpotterData',
+    /**
+     * Opens the Add to Coaching modal from a visualization in Spotter Embed.
+     * @param - `vizId ` refers to the Visualization ID in Spotter embed and is required.
+     * @example
+     * ```js
+     * spotterEmbed.trigger(HostEvent.AddToCoaching, { vizId: '730496d6-6903-4601-937e-2c691821af3c' });
+     * 
+     *```
+     * @version SDK: 1.45.0 | ThoughtSpot: 26.2.0.cl
+     */
+    AddToCoaching = 'addToCoaching',
+    /**
+     * Opens the data model instructions modal in Spotter Embed.
+     * @example
+     * ```js
+     * spotterEmbed.trigger(HostEvent.DataModelInstructions);
+     * ```
+     * @version SDK: 1.45.0 | ThoughtSpot: 26.2.0.cl
+     */
+    DataModelInstructions = 'DataModelInstructions',
     /**
      * Resets the Spotter Embed Conversation.
      * @example
@@ -6298,6 +6352,9 @@ export enum EmbedErrorCodes {
 
     /** Error parsing api intercept body */
     PARSING_API_INTERCEPT_BODY_ERROR = 'PARSING_API_INTERCEPT_BODY_ERROR',
+
+    /** Failed to update embed parameters during pre-render */
+    UPDATE_PARAMS_FAILED = 'UPDATE_PARAMS_FAILED',
 }
 
 /**

package/src/utils.ts

@@ -147,7 +147,8 @@ export const isValidCssMargin = (value: string): boolean => {
         return false;
     }
 
-    // This pattern allows for an optional negative sign, and numbers that can be integers or decimals (including leading dot).
+    // This pattern allows for an optional negative sign, and numbers
+    // that can be integers or decimals (including leading dot).
     const cssUnitPattern = /^-?(\d+(\.\d*)?|\.\d+)(px|em|rem|%|vh|vw)$/i;
     const parts = value.trim().split(/\s+/);