@thoughtspot/visual-embed-sdk 1.39.1 → 1.39.2-alpha.2

package/src/embed/embedConfig.ts

@@ -10,13 +10,14 @@ const configKey = 'embedConfig';
  *
  * @example
  * ```js
+ * import { getInitConfig } from '@thoughtspot/visual-embed-sdk';
+ * // Call the getInitConfig method to retrieve the embed configuration
  * const config = getInitConfig();
+ * // Log the configuration settings
  * console.log(config);
  * ```
- * @example
- *
- * Returns the `EmbedConfig` object, which
- * contains the configuration settings used to
+ * Returns the link:https://developers.thoughtspot.com/docs/Interface_EmbedConfig[EmbedConfig]
+ * object, which contains the configuration settings used to
  * initialize the SDK, including the following:
  *
  *  - `thoughtSpotHost` - ThoughtSpot host URL
@@ -24,10 +25,11 @@ const configKey = 'embedConfig';
  * `AuthServerCookieless` for  `AuthType.TrustedAuthTokenCookieless`
  *  - `customizations` - Style, text, and icon customization settings
  *  that were applied during the SDK initialization.
- * 
- * For a comprehensive list of embed configuration settings,
- * see link:https://developers.thoughtspot.com/docs/Interface_EmbedConfig[Developer Documentation].
  *
+ * The following JSON output shows the embed configuration
+ * settings returned from the code in the previous example:
+ *
+ * @example
  * ```json
  * {
  *   "thoughtSpotHost": "https://{ThoughtSpot-Host}",
@@ -49,7 +51,7 @@ const configKey = 'embedConfig';
  *   "authTriggerContainer": "#your-own-div"
  *  }
  * ```
- * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1.cl, and later
+ * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1.sw, and later
  * @group Global methods
  */
 export const getEmbedConfig = (): EmbedConfig => getValueFromWindow(configKey) || ({} as any);

package/src/embed/liveboard.spec.ts

@@ -347,7 +347,7 @@ describe('Liveboard/viz embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&coverAndFilterOptionInPDF=true${prefixParams}#/embed/viz/${liveboardId}`,
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&arePdfCoverFilterPageCheckboxesEnabled=true${prefixParams}#/embed/viz/${liveboardId}`,
             );
         });
     });
@@ -362,7 +362,7 @@ describe('Liveboard/viz embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&coverAndFilterOptionInPDF=false&${prefixParams}#/embed/viz/${liveboardId}`,
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&arePdfCoverFilterPageCheckboxesEnabled=false&${prefixParams}#/embed/viz/${liveboardId}`,
             );
         });
     });
@@ -770,8 +770,9 @@ describe('Liveboard/viz embed tests', () => {
             });
 
             let resizeObserverCb: any;
-            (window as any).ResizeObserver = window.ResizeObserver
-                || jest.fn().mockImplementation((resizeObserverCbParam: any) => {
+            (window as any).ResizeObserver =
+                window.ResizeObserver ||
+                jest.fn().mockImplementation((resizeObserverCbParam: any) => {
                     resizeObserverCb = resizeObserverCbParam;
                     return {
                         disconnect: jest.fn(),
@@ -785,7 +786,7 @@ describe('Liveboard/viz embed tests', () => {
             await waitFor(() => !!getIFrameEl());
 
             const ts = '__tsEmbed';
-            expect(document.getElementById(libEmbed.getPreRenderIds().wrapper)[ts]).toEqual(
+            expect((document.getElementById(libEmbed.getPreRenderIds().wrapper) as any)[ts]).toEqual(
                 libEmbed,
             );
 
@@ -813,6 +814,256 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    describe('LazyLoadingForFullHeight functionality', () => {
+        let mockIFrame: HTMLIFrameElement;
+
+        beforeEach(() => {
+            mockIFrame = document.createElement('iframe');
+            mockIFrame.getBoundingClientRect = jest.fn().mockReturnValue({
+                top: 100,
+                left: 150,
+                bottom: 600,
+                right: 800,
+                width: 650,
+                height: 500,
+            });
+            jest.spyOn(document, 'createElement').mockImplementation((tagName) => {
+                if (tagName === 'iframe') {
+                    return mockIFrame;
+                }
+                return document.createElement(tagName);
+            });
+        });
+
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+
+        test('should set lazyLoadingMargin parameter when provided', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                lazyLoadingMargin: '100px 0px',
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).toContain('isLazyLoadingForEmbedEnabled=true');
+                expect(iframeSrc).toContain('isFullHeightPinboard=true');
+                expect(iframeSrc).toContain('rootMarginForLazyLoad=100px%200px');
+            }, 100);
+        });
+
+        test('should set isLazyLoadingForEmbedEnabled=true when both fullHeight and lazyLoadingForFullHeight are enabled', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).toContain('isLazyLoadingForEmbedEnabled=true');
+                expect(iframeSrc).toContain('isFullHeightPinboard=true');
+            }, 100);
+        });
+
+        test('should not set lazyLoadingForEmbed when lazyLoadingForFullHeight is enabled but fullHeight is false', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: false,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).not.toContain('isLazyLoadingForEmbedEnabled=true');
+                expect(iframeSrc).not.toContain('isFullHeightPinboard=true');
+            }, 100);
+        });
+
+        test('should not set isLazyLoadingForEmbedEnabled when fullHeight is true but lazyLoadingForFullHeight is false', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).not.toContain('isLazyLoadingForEmbedEnabled=true');
+                expect(iframeSrc).toContain('isFullHeightPinboard=true');
+            }, 100);
+        });
+
+        test('should register event handlers to adjust iframe height', async () => {
+            const onSpy = jest.spyOn(LiveboardEmbed.prototype, 'on');
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            await executeAfterWait(() => {
+                expect(onSpy).toHaveBeenCalledWith(EmbedEvent.EmbedHeight, expect.anything());
+                expect(onSpy).toHaveBeenCalledWith(EmbedEvent.RouteChange, expect.anything());
+                expect(onSpy).toHaveBeenCalledWith(EmbedEvent.EmbedIframeCenter, expect.anything());
+                expect(onSpy).toHaveBeenCalledWith(EmbedEvent.RequestVisibleEmbedCoordinates, expect.anything());
+            }, 100);
+        });
+
+        test('should send correct visible data when RequestVisibleEmbedCoordinates is triggered', async () => {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            const mockTrigger = jest.spyOn(liveboardEmbed, 'trigger');
+
+            await liveboardEmbed.render();
+
+            // Trigger the lazy load data calculation
+            (liveboardEmbed as any).sendFullHeightLazyLoadData();
+
+            expect(mockTrigger).toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
+                top: 0,
+                height: 500,
+                left: 0,
+                width: 650,
+            });
+        });
+
+        test('should calculate correct visible data for partially visible full height element', async () => {
+            mockIFrame.getBoundingClientRect = jest.fn().mockReturnValue({
+                top: -50,
+                left: -30,
+                bottom: 700,
+                right: 1024,
+                width: 1054,
+                height: 750,
+            });
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            const mockTrigger = jest.spyOn(liveboardEmbed, 'trigger');
+
+            await liveboardEmbed.render();
+
+            // Trigger the lazy load data calculation
+            (liveboardEmbed as any).sendFullHeightLazyLoadData();
+
+            expect(mockTrigger).toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
+                top: 50,
+                height: 700,
+                left: 30,
+                width: 1024,
+            });
+        });
+
+        test('should add window event listeners for resize and scroll when fullHeight and lazyLoadingForFullHeight are enabled', async () => {
+            const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+
+            expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.anything());
+            expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.anything());
+
+            addEventListenerSpy.mockRestore();
+        });
+
+        test('should remove window event listeners on destroy when fullHeight and lazyLoadingForFullHeight are enabled', async () => {
+            const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            await liveboardEmbed.render();
+            liveboardEmbed.destroy();
+
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.anything());
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.anything());
+
+            removeEventListenerSpy.mockRestore();
+        });
+
+        test('should handle RequestVisibleEmbedCoordinates event and respond with correct data', async () => {
+            // Mock the iframe element
+            mockIFrame.getBoundingClientRect = jest.fn().mockReturnValue({
+                top: 100,
+                left: 150,
+                bottom: 600,
+                right: 800,
+                width: 650,
+                height: 500,
+            });
+            Object.defineProperty(mockIFrame, 'scrollHeight', { value: 500 });
+
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as LiveboardViewConfig);
+
+            // Set the iframe before render
+            (liveboardEmbed as any).iFrame = mockIFrame;
+
+            await liveboardEmbed.render();
+
+            // Create a mock responder function
+            const mockResponder = jest.fn();
+
+            // Trigger the handler directly
+            (liveboardEmbed as any).requestVisibleEmbedCoordinatesHandler({}, mockResponder);
+
+            // Verify the responder was called with the correct data
+            expect(mockResponder).toHaveBeenCalledWith({
+                type: EmbedEvent.RequestVisibleEmbedCoordinates,
+                data: {
+                    top: 0,
+                    height: 500,
+                    left: 0,
+                    width: 650,
+                },
+            });
+        });
+    });
+
     describe('Host events for liveborad', () => {
         test('Host event with empty param', async () => {
             const mockProcessTrigger = jest.spyOn(tsEmbed.TsEmbed.prototype, 'trigger');

package/src/embed/liveboard.ts

@@ -21,7 +21,7 @@ import {
     BaseViewConfig,
     LiveboardAppEmbedViewConfig,
 } from '../types';
-import { getQueryParamString, isUndefined } from '../utils';
+import { calculateVisibleElementData, getQueryParamString, isUndefined } from '../utils';
 import { getAuthPromise } from './base';
 import { TsEmbed, V1Embed } from './ts-embed';
 import { addPreviewStylesIfNotPresent } from '../utils/global-styles';
@@ -269,24 +269,6 @@ export interface LiveboardViewConfig extends BaseViewConfig, LiveboardOtherViewC
      * })
      */
     dataSourceId?: string;
-
-    /**
-     * This flag is for show/hide checkboxes for include or exclude
-     * cover page and filters in the Liveboard PDF.
-     * 
-     * Supported embed types: `LiveboardEmbed`
-     * @version SDK: 1.37.0 | ThoughtSpot:10.8.0.cl
-     * @default true
-     * Supported embed types: `LiveboardEmbed`
-     * @example
-     * ```js
-     * const embed = new LiveboardEmbed('#tsEmbed', {
-     *    ... //other embed view config
-     *    coverAndFilterOptionInPDF: false,
-     * })
-     * ```
-     */
-    coverAndFilterOptionInPDF?: boolean;
     /**
      * The list of tab IDs to hide from the embedded.
      * This Tabs will be hidden from their respective LBs.
@@ -342,6 +324,47 @@ export interface LiveboardViewConfig extends BaseViewConfig, LiveboardOtherViewC
      * ```
      */
     isLiveboardStylingAndGroupingEnabled?: boolean;
+    /**
+     * This flag is used to enable the full height lazy load data.
+     * 
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    // ...other options
+     *    fullHeight: true,
+     *    lazyLoadingForFullHeight: true,
+     * })
+     * ```
+     * 
+     * @type {boolean}
+     * @default false
+     * @version SDK: 1.39.0 | ThoughtSpot:10.10.0.cl
+     */
+    lazyLoadingForFullHeight?: boolean;
+
+    /**
+     * The margin to be used for lazy loading.
+     * 
+     * For example, if the margin is set to '10px',
+     * the visualization will be loaded 10px before the its top edge is visible in the
+     * viewport.
+     * 
+     * The format is similar to CSS margin.
+     * 
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    // ...other options
+     *    fullHeight: true,
+     *    lazyLoadingForFullHeight: true,
+     *   // Using 0px, the visualization will be only loaded when its visible in the viewport.
+     *    lazyLoadingMargin: '0px',
+     * })
+     * ```
+     * @type {string}
+     * @version SDK: 1.39.0 | ThoughtSpot:10.10.0.cl
+     */
+    lazyLoadingMargin?: string;
 }
 
 /**
@@ -364,19 +387,20 @@ export class LiveboardEmbed extends V1Embed {
 
     private defaultHeight = 500;
 
-     
+
     constructor(domSelector: DOMSelector, viewConfig: LiveboardViewConfig) {
         viewConfig.embedComponentType = 'LiveboardEmbed';
         super(domSelector, viewConfig);
         if (this.viewConfig.fullHeight === true) {
             if (this.viewConfig.vizId) {
                 logger.warn('Full height is currently only supported for Liveboard embeds.' +
-                  'Using full height with vizId might lead to unexpected behavior.');
+                    'Using full height with vizId might lead to unexpected behavior.');
             }
 
             this.on(EmbedEvent.RouteChange, this.setIframeHeightForNonEmbedLiveboard);
             this.on(EmbedEvent.EmbedHeight, this.updateIFrameHeight);
             this.on(EmbedEvent.EmbedIframeCenter, this.embedIframeCenter);
+            this.on(EmbedEvent.RequestVisibleEmbedCoordinates, this.requestVisibleEmbedCoordinatesHandler);
         }
     }
 
@@ -385,7 +409,7 @@ export class LiveboardEmbed extends V1Embed {
      * embedded Liveboard or visualization.
      */
     protected getEmbedParams() {
-        let params = {};
+        let params: any = {};
         params = this.getBaseQueryParams(params);
         const {
             enableVizTransformations,
@@ -411,7 +435,7 @@ export class LiveboardEmbed extends V1Embed {
             oAuthPollingInterval,
             isForceRedirect,
             dataSourceId,
-            coverAndFilterOptionInPDF,
+            coverAndFilterOptionInPDF = false,
             isLiveboardStylingAndGroupingEnabled,
         } = this.viewConfig;
 
@@ -420,6 +444,10 @@ export class LiveboardEmbed extends V1Embed {
 
         if (fullHeight === true) {
             params[Param.fullHeight] = true;
+            if (this.viewConfig.lazyLoadingForFullHeight) {
+                params[Param.IsLazyLoadingForEmbedEnabled] = true;
+                params[Param.RootMarginForLazyLoad] = this.viewConfig.lazyLoadingMargin;
+            }
         }
         if (defaultHeight) {
             this.defaultHeight = defaultHeight;
@@ -471,9 +499,6 @@ export class LiveboardEmbed extends V1Embed {
             params[Param.DataSourceId] = dataSourceId;
         }
 
-        if (coverAndFilterOptionInPDF !== undefined) {
-            params[Param.CoverAndFilterOptionInPDF] = coverAndFilterOptionInPDF;
-        }
 
         if (isLiveboardStylingAndGroupingEnabled !== undefined) {
             params[Param.IsLiveboardStylingAndGroupingEnabled] = isLiveboardStylingAndGroupingEnabled;
@@ -486,6 +511,7 @@ export class LiveboardEmbed extends V1Embed {
         params[Param.HideIrrelevantFiltersInTab] = hideIrrelevantChipsInLiveboardTabs;
         params[Param.DataPanelV2Enabled] = dataPanelV2;
         params[Param.EnableCustomColumnGroups] = enableCustomColumnGroups;
+        params[Param.CoverAndFilterOptionInPDF] = coverAndFilterOptionInPDF;
         const queryParams = getQueryParamString(params, true);
 
         return queryParams;
@@ -504,6 +530,23 @@ export class LiveboardEmbed extends V1Embed {
         return suffix;
     }
 
+    private sendFullHeightLazyLoadData = () => {
+        const data = calculateVisibleElementData(this.iFrame);
+        this.trigger(HostEvent.VisibleEmbedCoordinates, data);
+    }
+    
+    /**
+     * This is a handler for the RequestVisibleEmbedCoordinates event.
+     * It is used to send the visible coordinates data to the host application.
+     * @param data The event payload
+     * @param responder The responder function
+     */
+    private requestVisibleEmbedCoordinatesHandler = (data: MessagePayload, responder: any) => {
+        logger.info('Sending RequestVisibleEmbedCoordinates', data);
+        const visibleCoordinatesData = calculateVisibleElementData(this.iFrame);
+        responder({ type: EmbedEvent.RequestVisibleEmbedCoordinates, data: visibleCoordinatesData });
+    }
+
     /**
      * Construct the URL of the embedded ThoughtSpot Liveboard or visualization
      * to be loaded within the iFrame.
@@ -529,6 +572,7 @@ export class LiveboardEmbed extends V1Embed {
      */
     private updateIFrameHeight = (data: MessagePayload) => {
         this.setIFrameHeight(Math.max(data.data, this.defaultHeight));
+        this.sendFullHeightLazyLoadData();
     };
 
     private embedIframeCenter = (data: MessagePayload, responder: any) => {
@@ -602,7 +646,7 @@ export class LiveboardEmbed extends V1Embed {
     }
 
     protected beforePrerenderVisible(): void {
-        const embedObj = this.insertedDomEl?.[this.embedNodeKey] as LiveboardEmbed;
+        const embedObj = (this.insertedDomEl as any)?.[this.embedNodeKey] as LiveboardEmbed;
 
         if (isUndefined(embedObj)) return;
 
@@ -642,6 +686,33 @@ export class LiveboardEmbed extends V1Embed {
         }
         return super.trigger(messageType, dataWithVizId);
     }
+    /**
+     * Destroys the ThoughtSpot embed, and remove any nodes from the DOM.
+     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     */
+    public destroy() {
+        super.destroy();
+        this.unregisterLazyLoadEvents();
+    }
+
+    private postRender() {
+        this.registerLazyLoadEvents();
+    }
+
+    private registerLazyLoadEvents() {
+        if (this.viewConfig.fullHeight && this.viewConfig.lazyLoadingForFullHeight) {
+            // TODO: Use passive: true, install modernizr to check for passive
+            window.addEventListener('resize', this.sendFullHeightLazyLoadData);
+            window.addEventListener('scroll', this.sendFullHeightLazyLoadData);
+        }
+    }
+
+    private unregisterLazyLoadEvents() {
+        if (this.viewConfig.fullHeight && this.viewConfig.lazyLoadingForFullHeight) {
+            window.removeEventListener('resize', this.sendFullHeightLazyLoadData);
+            window.removeEventListener('scroll', this.sendFullHeightLazyLoadData);
+        }
+    }
 
     /**
      * Render an embedded ThoughtSpot Liveboard or visualization
@@ -655,6 +726,7 @@ export class LiveboardEmbed extends V1Embed {
         await this.renderV1Embed(src);
         this.showPreviewLoader();
 
+        this.postRender();
         return this;
     }