@thoughtspot/visual-embed-sdk 1.39.3 → 1.40.1-alpha.1

package/src/embed/liveboard.spec.ts

@@ -786,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,
             );
 
@@ -814,6 +814,259 @@ 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();
+
+            // Wait for the post-render events to be registered
+            await executeAfterWait(() => {
+                expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.anything());
+                expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.anything(), true);
+            }, 100);
+
+            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';
@@ -324,6 +324,46 @@ 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.40.0 | ThoughtSpot:10.12.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.40.0 | ThoughtSpot:10.12.0.cl
+     */
+    lazyLoadingMargin?: string;
 }
 
 /**
@@ -346,19 +386,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);
         }
     }
 
@@ -367,7 +408,7 @@ export class LiveboardEmbed extends V1Embed {
      * embedded Liveboard or visualization.
      */
     protected getEmbedParams() {
-        let params = {};
+        let params: any = {};
         params = this.getBaseQueryParams(params);
         const {
             enableVizTransformations,
@@ -402,6 +443,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;
@@ -484,6 +529,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.
@@ -509,6 +571,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) => {
@@ -582,16 +645,20 @@ export class LiveboardEmbed extends V1Embed {
     }
 
     protected beforePrerenderVisible(): void {
-        const embedObj = this.insertedDomEl?.[this.embedNodeKey] as LiveboardEmbed;
+        const embedObj = this.getPreRenderObj<LiveboardEmbed>();
 
         if (isUndefined(embedObj)) return;
 
-        const showDifferentLib = this.viewConfig.liveboardId
-            && embedObj.viewConfig.liveboardId !== this.viewConfig.liveboardId;
+        const showDifferentLib = this.currentLiveboardId
+            && embedObj.currentLiveboardId !== this.currentLiveboardId;
 
         if (showDifferentLib) {
-            const libId = this.viewConfig.liveboardId;
-            this.navigateToLiveboard(libId);
+            console.log('showDifferentLib', this.currentLiveboardId);
+            const libId = this.currentLiveboardId;
+            this.navigateToLiveboard(libId, null, null, () => {
+                console.log('onNavigateCalled', libId);
+                embedObj.currentLiveboardId = libId;
+            });
         }
     }
 
@@ -622,6 +689,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, true);
+        }
+    }
+
+    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
@@ -635,16 +729,20 @@ export class LiveboardEmbed extends V1Embed {
         await this.renderV1Embed(src);
         this.showPreviewLoader();
 
+        this.postRender();
         return this;
     }
 
-    public navigateToLiveboard(liveboardId: string, vizId?: string, activeTabId?: string) {
+    public currentLiveboardId: string = this.viewConfig.liveboardId;
+
+    public navigateToLiveboard(liveboardId: string, vizId?: string, activeTabId?: string, onNavigateCalled?: () => void) {
         const path = this.getIframeSuffixSrc(liveboardId, vizId, activeTabId);
         this.viewConfig.liveboardId = liveboardId;
         this.viewConfig.activeTabId = activeTabId;
         this.viewConfig.vizId = vizId;
         if (this.isRendered) {
-            this.trigger(HostEvent.Navigate, path.substring(1));
+            console.log('navigating to liveboard', path.substring(1));
+            this.triggerAfterLoad(HostEvent.Navigate, path.substring(1), onNavigateCalled);
         } else if (this.viewConfig.preRenderId) {
             this.preRender(true);
         } else {