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

package/src/embed/app.spec.ts

@@ -131,7 +131,7 @@ describe('App embed tests', () => {
     });
 
     describe('should render the correct routes for pages', () => {
-        /* eslint-disable no-loop-func */
+
         const pageRouteMap = {
             [Page.Search]: 'answer',
             [Page.Answers]: 'answers',
@@ -148,7 +148,7 @@ describe('App embed tests', () => {
             const pageId = pageIds[i];
 
             test(`${pageId}`, async () => {
-                const route = pageRouteMap[pageId];
+                const route = pageRouteMap[pageId as keyof typeof pageRouteMap];
                 const appEmbed = new AppEmbed(getRootEl(), {
                     ...defaultViewConfig,
                     pageId: pageId as Page,
@@ -181,7 +181,7 @@ describe('App embed tests', () => {
             const pageIdsForModularHome = pageIdsForModularHomes[i];
 
             test(`${pageIdsForModularHome}`, async () => {
-                const route = pageRouteMap[pageIdsForModularHome];
+                const route = pageRouteMapForModularHome[pageIdsForModularHome as keyof typeof pageRouteMapForModularHome];
                 const appEmbed = new AppEmbed(getRootEl(), {
                     ...defaultViewConfig,
                     modularHomeExperience: true,
@@ -753,7 +753,7 @@ describe('App embed tests', () => {
     test('Should add dataPanelCustomGroupsAccordionInitialState flag to the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
-            // eslint-disable-next-line max-len
+
             dataPanelCustomGroupsAccordionInitialState:
                 DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST,
         } as AppViewConfig);
@@ -768,12 +768,13 @@ describe('App embed tests', () => {
     });
 
     test('should register event handlers to adjust iframe height', async () => {
+        let embedHeightCallback: any = () => { };
         const onSpy = jest.spyOn(AppEmbed.prototype, 'on').mockImplementation((event, callback) => {
             if (event === EmbedEvent.RouteChange) {
                 callback({ data: { currentPath: '/answers' } }, jest.fn());
             }
             if (event === EmbedEvent.EmbedHeight) {
-                callback({ data: '100%' });
+                embedHeightCallback = callback;
             }
             if (event === EmbedEvent.EmbedIframeCenter) {
                 callback({}, jest.fn());
@@ -785,16 +786,23 @@ describe('App embed tests', () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
             fullHeight: true,
+            lazyLoadingForFullHeight: true,
         } as AppViewConfig);
 
-        appEmbed.render();
+        // Set the iframe before render
+        (appEmbed as any).iFrame = document.createElement('iframe');
+
+        // Wait for render to complete
+        await appEmbed.render();
+        embedHeightCallback({ data: '100%' });
 
+        // Verify event handlers were registered
         await executeAfterWait(() => {
             expect(onSpy).toHaveBeenCalledWith(EmbedEvent.EmbedHeight, expect.anything());
             expect(onSpy).toHaveBeenCalledWith(EmbedEvent.RouteChange, expect.anything());
             expect(onSpy).toHaveBeenCalledWith(EmbedEvent.EmbedIframeCenter, expect.anything());
-        });
-        jest.clearAllMocks();
+            expect(onSpy).toHaveBeenCalledWith(EmbedEvent.RequestVisibleEmbedCoordinates, expect.anything());
+        }, 100);
     });
 
     describe('Navigate to Page API', () => {
@@ -882,4 +890,385 @@ describe('App 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 appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                lazyLoadingMargin: '100px 0px',
+            } as AppViewConfig);
+
+            await appEmbed.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 () => {
+            // Mock the iframe element first
+            mockIFrame.getBoundingClientRect = jest.fn().mockReturnValue({
+                top: 100,
+                left: 150,
+                bottom: 600,
+                right: 800,
+                width: 650,
+                height: 500,
+            });
+            Object.defineProperty(mockIFrame, 'scrollHeight', { value: 500 });
+
+            // Mock the event handlers
+            const onSpy = jest.spyOn(AppEmbed.prototype, 'on').mockImplementation((event, callback) => {
+                return null;
+            });
+            jest.spyOn(TsEmbed.prototype as any, 'getIframeCenter').mockReturnValue({});
+            jest.spyOn(TsEmbed.prototype as any, 'setIFrameHeight').mockReturnValue({});
+
+            // Create the AppEmbed instance
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as AppViewConfig);
+
+            // Set the iframe before render
+            (appEmbed as any).iFrame = mockIFrame;
+
+            // Add the iframe to the DOM
+            const rootEl = getRootEl();
+            rootEl.appendChild(mockIFrame);
+
+            // Wait for render to complete
+            await appEmbed.render();
+
+            // Wait for iframe initialization and URL parameters to be set
+            await executeAfterWait(() => {
+                const iframeSrc = appEmbed.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 appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: false,
+                lazyLoadingForFullHeight: true,
+            } as AppViewConfig);
+
+            // Wait for render to complete
+            await appEmbed.render();
+
+            // Wait for iframe initialization and URL parameters to be set
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).not.toContain('isLazyLoadingForEmbedEnabled=true');
+                expect(iframeSrc).not.toContain('isFullHeightPinboard=true');
+            }, 100); // 100ms wait time to ensure iframe src is set
+        });
+
+        test('should not set isLazyLoadingForEmbedEnabled when fullHeight is true but lazyLoadingForFullHeight is false', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: false,
+            } as AppViewConfig);
+
+            // Wait for render to complete
+            await appEmbed.render();
+
+            // Wait for iframe initialization and URL parameters to be set
+            await executeAfterWait(() => {
+                const iframeSrc = getIFrameSrc();
+                expect(iframeSrc).not.toContain('isLazyLoadingForEmbedEnabled=true');
+                expect(iframeSrc).toContain('isFullHeightPinboard=true');
+            }, 100); // 100ms wait time to ensure iframe src is set
+        });
+
+        test('should register RequestFullHeightLazyLoadData event handler when fullHeight is enabled', async () => {
+            const onSpy = jest.spyOn(AppEmbed.prototype, 'on');
+
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+            } as AppViewConfig);
+
+            await appEmbed.render();
+
+            expect(onSpy).toHaveBeenCalledWith(EmbedEvent.RequestVisibleEmbedCoordinates, expect.any(Function));
+
+            onSpy.mockRestore();
+        });
+
+        test('should send correct visible data when RequestFullHeightLazyLoadData is triggered', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as AppViewConfig);
+
+            const mockTrigger = jest.spyOn(appEmbed, 'trigger');
+
+            await appEmbed.render();
+
+            // Trigger the lazy load data calculation
+            (appEmbed 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 () => {
+            // Mock iframe partially clipped from top and left
+            mockIFrame.getBoundingClientRect = jest.fn().mockReturnValue({
+                top: -50,
+                left: -30,
+                bottom: 700,
+                right: 1024,
+                width: 1054,
+                height: 750,
+            });
+
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as AppViewConfig);
+
+            const mockTrigger = jest.spyOn(appEmbed, 'trigger');
+
+            await appEmbed.render();
+
+            // Trigger the lazy load data calculation
+            (appEmbed as any).sendFullHeightLazyLoadData();
+
+            expect(mockTrigger).toHaveBeenCalledWith(HostEvent.VisibleEmbedCoordinates, {
+                top: 50,   // 50px clipped from top
+                height: 700, // visible height (from 0 to 700)
+                left: 30,  // 30px clipped from left
+                width: 1024, // visible width (from 0 to 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 appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as AppViewConfig);
+
+            await appEmbed.render();
+
+            // Wait for the post-render events to be registered
+            await executeAfterWait(() => {
+                expect(addEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+                expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function), 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 appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as AppViewConfig);
+
+            await appEmbed.render();
+            appEmbed.destroy();
+
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+
+            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 appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+            } as AppViewConfig);
+
+            // Set the iframe before render
+            (appEmbed as any).iFrame = mockIFrame;
+
+            await appEmbed.render();
+
+            // Create a mock responder function
+            const mockResponder = jest.fn();
+
+            // Trigger the handler directly
+            (appEmbed 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('IFrame height management', () => {
+        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,
+            });
+            Object.defineProperty(mockIFrame, 'scrollHeight', { value: 500 });
+        });
+
+        test('should not call setIFrameHeight if currentPath starts with "/embed/viz/"', () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+            } as AppViewConfig) as any;
+            const spySetIFrameHeight = jest.spyOn(appEmbed, 'setIFrameHeight');
+
+            appEmbed.render();
+            appEmbed.setIframeHeightForNonEmbedLiveboard({
+                data: { currentPath: '/embed/viz/' },
+                type: 'Route',
+            });
+
+            expect(spySetIFrameHeight).not.toHaveBeenCalled();
+        });
+
+        test('should not call setIFrameHeight if currentPath starts with "/embed/insights/viz/"', () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+            } as AppViewConfig) as any;
+            const spySetIFrameHeight = jest.spyOn(appEmbed, 'setIFrameHeight');
+
+            appEmbed.render();
+            appEmbed.setIframeHeightForNonEmbedLiveboard({
+                data: { currentPath: '/embed/insights/viz/' },
+                type: 'Route',
+            });
+
+            expect(spySetIFrameHeight).not.toHaveBeenCalled();
+        });
+
+        test('should call setIFrameHeight if currentPath starts with "/some/other/path/"', () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+            } as AppViewConfig) as any;
+            const spySetIFrameHeight = jest
+                .spyOn(appEmbed, 'setIFrameHeight')
+                .mockImplementation(jest.fn());
+
+            appEmbed.render();
+            appEmbed.setIframeHeightForNonEmbedLiveboard({
+                data: { currentPath: '/some/other/path/' },
+                type: 'Route',
+            });
+
+            expect(spySetIFrameHeight).toHaveBeenCalled();
+        });
+
+        test('should update iframe height correctly', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+            } as AppViewConfig) as any;
+
+            // Set up the mock iframe
+            appEmbed.iFrame = mockIFrame;
+            document.body.appendChild(mockIFrame);
+
+            await appEmbed.render();
+            const mockEvent = {
+                data: 600,
+                type: EmbedEvent.EmbedHeight,
+            };
+            appEmbed.updateIFrameHeight(mockEvent);
+
+            // Check if the iframe style was updated
+            expect(mockIFrame.style.height).toBe('600px');
+        });
+
+        test('should handle updateIFrameHeight with default height', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+            } as AppViewConfig) as any;
+
+            // Set up the mock iframe
+            appEmbed.iFrame = mockIFrame;
+            document.body.appendChild(mockIFrame);
+
+            await appEmbed.render();
+            const mockEvent = {
+                data: 0, // This will make it use the scrollHeight
+                type: EmbedEvent.EmbedHeight,
+            };
+            appEmbed.updateIFrameHeight(mockEvent);
+
+            // Should use the scrollHeight
+            expect(mockIFrame.style.height).toBe('500px');
+        });
+    });
 });

package/src/embed/app.ts

@@ -9,7 +9,7 @@
  */
 
 import { logger } from '../utils/logger';
-import { getQueryParamString } from '../utils';
+import { calculateVisibleElementData, getQueryParamString } from '../utils';
 import {
     Param,
     DOMSelector,
@@ -23,7 +23,7 @@ import { V1Embed } from './ts-embed';
 /**
  * Pages within the ThoughtSpot app that can be embedded.
  */
-// eslint-disable-next-line no-shadow
+
 export enum Page {
     /**
      * Home page
@@ -93,7 +93,7 @@ export enum PrimaryNavbarVersion {
      * Sliding (v3) introduces a new left-side navigation hub featuring a tab switcher,
      * along with updates to the top navigation bar.
      * It serves as the foundational version of the PrimaryNavBar.
-     */
+     */
     Sliding = 'v3',
 }
 
@@ -103,9 +103,9 @@ export enum PrimaryNavbarVersion {
  */
 export enum HomePage {
     /**
-     * Modular (v2) introduces the updated Modular Home Experience.
-     * It serves as the foundational version of the home page.
-     */
+     * Modular (v2) introduces the updated Modular Home Experience.
+     * It serves as the foundational version of the home page.
+     */
     Modular = 'v2',
 }
 
@@ -531,6 +531,48 @@ export interface AppViewConfig extends AllEmbedViewConfig {
      * ```
      */
     isLiveboardStylingAndGroupingEnabled?: boolean;
+
+    /**
+     * This flag is used to enable the full height lazy load data.
+     * 
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#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 AppEmbed('#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;
 }
 
 /**
@@ -542,7 +584,7 @@ export class AppEmbed extends V1Embed {
 
     private defaultHeight = '100%';
 
-    // eslint-disable-next-line no-useless-constructor
+
     constructor(domSelector: DOMSelector, viewConfig: AppViewConfig) {
         viewConfig.embedComponentType = 'AppEmbed';
         super(domSelector, viewConfig);
@@ -550,6 +592,7 @@ export class AppEmbed extends V1Embed {
             this.on(EmbedEvent.RouteChange, this.setIframeHeightForNonEmbedLiveboard);
             this.on(EmbedEvent.EmbedHeight, this.updateIFrameHeight);
             this.on(EmbedEvent.EmbedIframeCenter, this.embedIframeCenter);
+            this.on(EmbedEvent.RequestVisibleEmbedCoordinates, this.requestVisibleEmbedCoordinatesHandler);
         }
     }
 
@@ -583,7 +626,7 @@ export class AppEmbed extends V1Embed {
             enable2ColumnLayout,
             enableCustomColumnGroups = false,
             isOnBeforeGetVizDataInterceptEnabled = false,
-            /* eslint-disable-next-line max-len */
+
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
             collapseSearchBar = true,
             isLiveboardCompactHeaderEnabled = false,
@@ -598,7 +641,7 @@ export class AppEmbed extends V1Embed {
             isLiveboardStylingAndGroupingEnabled,
         } = this.viewConfig;
 
-        let params = {};
+        let params: any = {};
         params[Param.PrimaryNavHidden] = !showPrimaryNavbar;
         params[Param.HideProfleAndHelp] = !!disableProfileAndHelp;
         params[Param.HideApplicationSwitcher] = !!hideApplicationSwitcher;
@@ -631,6 +674,10 @@ export class AppEmbed extends V1Embed {
 
         if (fullHeight === true) {
             params[Param.fullHeight] = true;
+            if (this.viewConfig.lazyLoadingForFullHeight) {
+                params[Param.IsLazyLoadingForEmbedEnabled] = true;
+                params[Param.RootMarginForLazyLoad] = this.viewConfig.lazyLoadingMargin;
+            }
         }
 
         if (tag) {
@@ -656,7 +703,7 @@ export class AppEmbed extends V1Embed {
         }
 
         if (isOnBeforeGetVizDataInterceptEnabled) {
-            /* eslint-disable-next-line max-len */
+
             params[
                 Param.IsOnBeforeGetVizDataInterceptEnabled
             ] = isOnBeforeGetVizDataInterceptEnabled;
@@ -684,12 +731,12 @@ export class AppEmbed extends V1Embed {
             || dataPanelCustomGroupsAccordionInitialState
             === DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST
         ) {
-            /* eslint-disable-next-line max-len */
+
             params[
                 Param.DataPanelCustomGroupsAccordionInitialState
             ] = dataPanelCustomGroupsAccordionInitialState;
         } else {
-            /* eslint-disable-next-line max-len */
+
             params[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
         }
 
@@ -715,6 +762,23 @@ export class AppEmbed extends V1Embed {
         return queryParams;
     }
 
+    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 });
+    }
+
     /**
      * Constructs the URL of the ThoughtSpot app page to be rendered.
      * @param pageId The ID of the page to be embedded.
@@ -737,6 +801,7 @@ export class AppEmbed extends V1Embed {
      */
     protected updateIFrameHeight = (data: MessagePayload) => {
         this.setIFrameHeight(Math.max(data.data, this.iFrame?.scrollHeight));
+        this.sendFullHeightLazyLoadData();
     };
 
     private embedIframeCenter = (data: MessagePayload, responder: any) => {
@@ -845,6 +910,34 @@ export class AppEmbed extends V1Embed {
         }
     }
 
+    /**
+     * 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);
+        }
+    }
+
     /**
      * Renders the embedded application pages in the ThoughtSpot app.
      * @param renderOptions An object containing the page ID
@@ -856,6 +949,7 @@ export class AppEmbed extends V1Embed {
         const src = this.getIFrameSrc();
         await this.renderV1Embed(src);
 
+        this.postRender();
         return this;
     }
 }