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

package/src/embed/ts-embed.ts

@@ -185,7 +185,10 @@ export class TsEmbed {
      */
     private fullscreenChangeHandler: (() => void) | null = null;
 
+    public id: string;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
+        this.id = Date.now().toString();
         this.el = getDOMNode(domSelector);
         this.eventHandlerMap = new Map();
         this.isError = false;
@@ -237,7 +240,7 @@ export class TsEmbed {
      * @param event The window message event
      */
     private getEventType(event: MessageEvent) {
-        // eslint-disable-next-line no-underscore-dangle
+
         return event.data?.type || event.data?.__type;
     }
 
@@ -281,11 +284,11 @@ export class TsEmbed {
      */
     private isFullAppEmbedWithVisiblePrimaryNavbar(): boolean {
         const appViewConfig = this.viewConfig as any;
-        
+
         // Check if this is a FullAppEmbed (AppEmbed)
         // showPrimaryNavbar defaults to true if not explicitly set to false
         return (
-            appViewConfig.embedComponentType === 'AppEmbed' 
+            appViewConfig.embedComponentType === 'AppEmbed'
             && appViewConfig.showPrimaryNavbar === true
         );
     }
@@ -310,6 +313,8 @@ export class TsEmbed {
 
     private subscribedListeners: Record<string, any> = {};
 
+    public isEmbedContainerLoaded = false;
+
     /**
      * Adds a global event listener to window for "message" events.
      * ThoughtSpot detects if a particular event is targeted to this
@@ -431,7 +436,8 @@ export class TsEmbed {
     private updateAuthToken = async (_: any, responder: any) => {
         const { authType } = this.embedConfig;
         let { autoLogin } = this.embedConfig;
-        // Default autoLogin: true for cookieless if undefined/null, otherwise false
+        // Default autoLogin: true for cookieless if undefined/null, otherwise
+        // false
         autoLogin = autoLogin ?? (authType === AuthType.TrustedAuthTokenCookieless);
         if (autoLogin && authType === AuthType.TrustedAuthTokenCookieless) {
             try {
@@ -474,11 +480,65 @@ export class TsEmbed {
         notifyAuthFailure(AuthFailureType.IDLE_SESSION_TIMEOUT);
     };
 
+    private pendingEvents: Array<{ eventType: HostEvent, data: TriggerPayload<any, HostEvent>, onEventTriggered?: () => void }> = [];
+
+    protected getPreRenderObj<T extends TsEmbed>() {
+        const embedObj = (this.insertedDomEl as any)?.[this.embedNodeKey] as T;
+        if (embedObj === (this as any)) {
+            console.log('embedObj is same as this');
+            return null;
+        }
+        return (this.insertedDomEl as any)?.[this.embedNodeKey] as T;
+    }
+
+    private checkEmbedContainerLoaded() {
+        if (this.isEmbedContainerLoaded) return true;
+
+        const preRenderObj = this.getPreRenderObj<TsEmbed>();
+        if (preRenderObj && preRenderObj.isEmbedContainerLoaded) {
+            this.isEmbedContainerLoaded = true;
+        }
+
+        console.log('checkEmbedContainerLoaded', this.isEmbedContainerLoaded);
+
+        return this.isEmbedContainerLoaded;
+    }
+
+    private executePendingEvents() {
+        console.log('executePendingEvents', this.pendingEvents);
+        setTimeout(() => {
+            this.pendingEvents.forEach((event) => {
+                console.log('executing event', event.eventType, event.data);        
+                this.trigger(event.eventType, event.data);
+                event.onEventTriggered?.();
+            });
+            this.pendingEvents = [];
+        }, 1000);
+    }
+    protected triggerAfterLoad(eventType: HostEvent, data: TriggerPayload<any, HostEvent>, onEventTriggered?: () => void) {
+        if (this.checkEmbedContainerLoaded()) {
+            console.log('triggerAfterLoad', eventType, data);
+            this.trigger(eventType, data);
+            onEventTriggered?.();
+        } else {
+            console.log('pushing to pendingEvents', eventType, data, this.getPreRenderObj());
+            this.pendingEvents.push({ eventType, data, onEventTriggered });
+            console.log('pendingEvents', this.pendingEvents);
+        }
+    }
+
     /**
      * Register APP_INIT event and sendback init payload
      */
     private registerAppInit = () => {
         this.on(EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
+        this.on(EmbedEvent.AuthInit, () => {
+            console.log('AuthInit', this.getPreRenderObj());
+            this.isEmbedContainerLoaded = true;
+            console.log('isEmbedContainerLoaded', this.isEmbedContainerLoaded);
+            console.log('executePendingEvents', this.pendingEvents);
+            this.executePendingEvents();
+        }, { start: false }, true);
         this.on(EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
         this.on(EmbedEvent.IdleSessionTimeout, this.idleSessionTimeout, { start: false }, true);
     };
@@ -798,8 +858,9 @@ export class TsEmbed {
                                 }
                             });
                         }
-                        
-                        // Setup fullscreen change handler after iframe is loaded and ready
+
+                        // Setup fullscreen change handler after iframe is
+                        // loaded and ready
                         this.setupFullscreenChangeHandler();
                     });
                     this.iFrame.addEventListener('error', () => {
@@ -926,7 +987,7 @@ export class TsEmbed {
                 const div = document.createElement('div');
                 div.innerHTML = child;
                 div.id = TS_EMBED_ID;
-                // eslint-disable-next-line no-param-reassign
+
                 child = div;
             }
             if (this.el.nextElementSibling?.id === TS_EMBED_ID) {
@@ -1070,11 +1131,11 @@ export class TsEmbed {
         if (this.isRendered) {
             logger.warn('Please register event handlers before calling render');
         }
-        
+
         const callbacks = this.eventHandlerMap.get(messageType) || [];
         callbacks.push({ options, callback });
         this.eventHandlerMap.set(messageType, callbacks);
-        
+
         return this;
     }
 
@@ -1174,7 +1235,7 @@ export class TsEmbed {
         }
         await this.isReadyForRenderPromise;
         this.isRendered = true;
-        
+
         return this;
     }
 
@@ -1288,11 +1349,11 @@ export class TsEmbed {
                 ) {
                     logger.warn(
                         `${viewConfig.embedComponentType || 'Component'} was pre-rendered with `
-                            + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
-                            + `but a different value "${JSON.stringify(viewConfig[key])}" `
-                            + 'was passed to the Embed component. '
-                            + 'The new value provided is ignored, the value provided during '
-                            + 'preRender is used.',
+                        + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+                        + `but a different value "${JSON.stringify(viewConfig[key])}" `
+                        + 'was passed to the Embed component. '
+                        + 'The new value provided is ignored, the value provided during '
+                        + 'preRender is used.',
                     );
                 }
             });
@@ -1318,8 +1379,11 @@ export class TsEmbed {
                 return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
+            this.trigger(HostEvent.UpdateEmbedParams, this.viewConfig);
         }
 
+        this.beforePrerenderVisible();
+
         if (this.el) {
             this.syncPreRenderStyle();
             if (!this.viewConfig.doNotTrackPreRenderSize) {
@@ -1337,12 +1401,10 @@ export class TsEmbed {
             }
         }
 
-        this.beforePrerenderVisible();
-
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();
-        
+
         // Setup fullscreen change handler for prerendered components
         if (this.iFrame) {
             this.setupFullscreenChangeHandler();
@@ -1431,7 +1493,7 @@ export class TsEmbed {
     private setupFullscreenChangeHandler() {
         const embedConfig = getEmbedConfig();
         const disableFullscreenPresentation = embedConfig?.disableFullscreenPresentation ?? true;
-        
+
         if (disableFullscreenPresentation) {
             return;
         }
@@ -1444,7 +1506,8 @@ export class TsEmbed {
             const isFullscreen = !!document.fullscreenElement;
             if (!isFullscreen) {
                 logger.info('Exited fullscreen mode - triggering ExitPresentMode');
-                // Only trigger if iframe is available and contentWindow is accessible
+                // Only trigger if iframe is available and contentWindow is
+                // accessible
                 if (this.iFrame && this.iFrame.contentWindow) {
                     this.trigger(HostEvent.ExitPresentMode);
                 } else {
@@ -1540,6 +1603,6 @@ export class V1Embed extends TsEmbed {
      * Only for testing purposes.
      * @hidden
      */
-    // eslint-disable-next-line camelcase
+
     public test__executeCallbacks = this.executeCallbacks;
 }

package/src/types.ts

@@ -2707,6 +2707,12 @@ export enum EmbedEvent {
      * @version SDK : 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     ExitPresentMode = 'exitPresentMode',
+    /**
+     * Emitted when a user requests the full height lazy load data.
+     * @version SDK : 1.39.0 | ThoughtSpot : 10.10.0.cl
+     * @hidden
+     */
+    RequestVisibleEmbedCoordinates = 'requestVisibleEmbedCoordinates',
     /**
      * Emitted when spotter response is text data
      * @example
@@ -2802,7 +2808,7 @@ export enum EmbedEvent {
  * // create the liveboard embed.
  *
  * liveboardEmbed.trigger(HostEvent.UpdateRuntimeFilters, [
- *   { columnName: 'state, operator: RuntimeFilterOp.EQ, values: ['california']}
+ *   { columnName: 'state', operator: RuntimeFilterOp.EQ, values: ["california"]}
  * ]);
  * ```
  * @example
@@ -3011,12 +3017,12 @@ export enum HostEvent {
      * Works with Search and Liveboard embed.
      * @param - { columnId: string,
      *  name: string,
-     *  type: INT64/CHAR/DATE,
-     *  dataType: ATTRIBUTE/MEASURE }
+     *  type: ATTRIBUTE/MEASURE,
+     *  dataType: INT64/CHAR/DATE }
      * @example
      * ```js
      * searchEmbed.trigger(HostEvent.OpenFilter,
-     *  {column: { columnId: '<column-GUID>', name: 'column name', type: 'INT64', dataType: 'ATTRIBUTE'}})
+     *  {column: { columnId: '<column-GUID>', name: 'column name', type: 'ATTRIBUTE', dataType: 'INT64'}})
      * ```
      * @example
      * ```js
@@ -3984,7 +3990,19 @@ export enum HostEvent {
      * @version SDK: 1.40.0 | ThoughtSpot: 10.11.0.cl
      */
     ExitPresentMode = 'exitPresentMode',
-
+    /**
+     * Triggers the full height lazy load data.
+     * @example
+     * ```js
+     * liveboardEmbed.on(EmbedEvent.RequestVisibleEmbedCoordinates, (payload) => {
+     *      console.log(payload);
+     * });
+     * ```
+     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     *
+     * @hidden
+     */
+    VisibleEmbedCoordinates = 'visibleEmbedCoordinates',
     /**
      * Trigger the *Ask Sage* action for visualizations
      * @example
@@ -3995,6 +4013,17 @@ export enum HostEvent {
      * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
      */
     AskSpotter = 'askSpotter',
+
+    /**
+     * @hidden
+     * Triggers the update of the embed params.
+     * 
+     * @example
+     * ```js
+     * liveboardEmbed.trigger(HostEvent.UpdateEmbedParams, viewConfig);
+     * ```
+     */
+    UpdateEmbedParams = 'updateEmbedParams',
 }
 
 /**
@@ -4139,6 +4168,8 @@ export enum Param {
     PrimaryAction = 'primaryAction',
     isSpotterAgentEmbed = 'isSpotterAgentEmbed',
     IsLiveboardStylingAndGroupingEnabled = 'isLiveboardStylingAndGroupingEnabled',
+    IsLazyLoadingForEmbedEnabled = 'isLazyLoadingForEmbedEnabled',
+    RootMarginForLazyLoad = 'rootMarginForLazyLoad'
 }
 
 /**

package/src/utils/processTrigger.ts

@@ -31,7 +31,7 @@ function postIframeMessage(
     thoughtSpotHost: string,
     channel?: MessageChannel,
 ) {
-    return iFrame.contentWindow.postMessage(message, thoughtSpotHost, [channel?.port2]);
+    return iFrame.contentWindow?.postMessage(message, thoughtSpotHost, [channel?.port2]);
 }
 
 export const TRIGGER_TIMEOUT = 30000;

package/src/utils.spec.ts

@@ -16,6 +16,7 @@ import {
     handlePresentEvent,
     handleExitPresentMode,
     getTypeFromValue,
+    calculateVisibleElementData,
 } from './utils';
 import { RuntimeFilterOp } from './types';
 import { logger } from './utils/logger';
@@ -315,7 +316,7 @@ describe('unit test for utils', () => {
         });
 
         test('Object should be set if not', () => {
-            // eslint-disable-next-line no-underscore-dangle
+
             (window as any)._tsEmbedSDK = null;
 
             storeValueInWindow('test', 'testValue');
@@ -341,7 +342,7 @@ describe('Fullscreen Utility Functions', () => {
 
     beforeEach(() => {
         jest.clearAllMocks();
-        
+
         // Store and mock exitFullscreen
         originalExitFullscreen = document.exitFullscreen;
         document.exitFullscreen = jest.fn();
@@ -436,3 +437,250 @@ describe('Fullscreen Utility Functions', () => {
         });
     });
 });
+
+describe('calculateVisibleElementData', () => {
+    let mockElement: HTMLElement;
+    let originalInnerHeight: number;
+    let originalInnerWidth: number;
+
+    beforeEach(() => {
+        // Store original window dimensions
+        originalInnerHeight = window.innerHeight;
+        originalInnerWidth = window.innerWidth;
+
+        // Mock window dimensions
+        Object.defineProperty(window, 'innerHeight', {
+            writable: true,
+            configurable: true,
+            value: 800,
+        });
+        Object.defineProperty(window, 'innerWidth', {
+            writable: true,
+            configurable: true,
+            value: 1200,
+        });
+
+        // Create mock element
+        mockElement = document.createElement('div');
+    });
+
+    afterEach(() => {
+        // Restore original window dimensions
+        Object.defineProperty(window, 'innerHeight', {
+            value: originalInnerHeight,
+        });
+        Object.defineProperty(window, 'innerWidth', {
+            value: originalInnerWidth,
+        });
+    });
+
+    it('should calculate data for fully visible element', () => {
+        // Mock getBoundingClientRect for element fully within viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: 150,
+            bottom: 300,
+            right: 400,
+            width: 250,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Full height visible
+            left: 0, // Not clipped from left
+            width: 250, // Full width visible
+        });
+    });
+
+    it('should calculate data for element clipped from top', () => {
+        // Mock getBoundingClientRect for element partially above viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -50,
+            left: 100,
+            bottom: 150,
+            right: 400,
+            width: 300,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 50, // Clipped 50px from top
+            height: 150, // 150px visible height (0 to 150)
+            left: 0, // Not clipped from left
+            width: 300, // Full width visible
+        });
+    });
+
+    it('should calculate data for element clipped from left', () => {
+        // Mock getBoundingClientRect for element partially left of viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: -80,
+            bottom: 300,
+            right: 200,
+            width: 280,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Full height visible
+            left: 80, // Clipped 80px from left
+            width: 200, // 200px visible width (0 to 200)
+        });
+    });
+
+    it('should calculate data for element clipped from bottom', () => {
+        // Mock getBoundingClientRect for element extending below viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 600,
+            left: 100,
+            bottom: 950, // Extends beyond window height of 800
+            right: 400,
+            width: 300,
+            height: 350,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Only 200px visible (600 to 800)
+            left: 0, // Not clipped from left
+            width: 300, // Full width visible
+        });
+    });
+
+    it('should calculate data for element clipped from right', () => {
+        // Mock getBoundingClientRect for element extending beyond right edge
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: 1000,
+            bottom: 300,
+            right: 1400, // Extends beyond window width of 1200
+            width: 400,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Full height visible
+            left: 0, // Not clipped from left
+            width: 200, // Only 200px visible width (1000 to 1200)
+        });
+    });
+
+    it('should calculate data for element clipped from multiple sides', () => {
+        // Mock getBoundingClientRect for element clipped from top and left
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -100,
+            left: -50,
+            bottom: 200,
+            right: 300,
+            width: 350,
+            height: 300,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 100, // Clipped 100px from top
+            height: 200, // 200px visible height (0 to 200)
+            left: 50, // Clipped 50px from left
+            width: 300, // 300px visible width (0 to 300)
+        });
+    });
+
+    it('should handle element completely outside viewport (above)', () => {
+        // Mock getBoundingClientRect for element completely above viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -300,
+            left: 100,
+            bottom: -100,
+            right: 400,
+            width: 300,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 300, // Clipped 300px from top
+            height: 0, // No visible height (clamped from negative)
+            left: 0, // Not clipped from left
+            width: 300, // Full width would be visible if in viewport
+        });
+    });
+
+    it('should handle element completely outside viewport (left)', () => {
+        // Mock getBoundingClientRect for element completely left of viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 100,
+            left: -400,
+            bottom: 300,
+            right: -100,
+            width: 300,
+            height: 200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 200, // Full height would be visible if in viewport
+            left: 400, // Clipped 400px from left
+            width: 0, // No visible width (min(1200, -100) - max(-400, 0) = -100 - 0 = -100, but clamped)
+        });
+    });
+
+    it('should handle element larger than viewport', () => {
+        // Mock getBoundingClientRect for element larger than viewport
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: -200,
+            left: -300,
+            bottom: 1000,
+            right: 1500,
+            width: 1800,
+            height: 1200,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 200, // Clipped 200px from top
+            height: 800, // Visible height equals window height
+            left: 300, // Clipped 300px from left
+            width: 1200, // Visible width equals window width
+        });
+    });
+
+    it('should handle element exactly at viewport boundaries', () => {
+        // Mock getBoundingClientRect for element at exact viewport boundaries
+        jest.spyOn(mockElement, 'getBoundingClientRect').mockReturnValue({
+            top: 0,
+            left: 0,
+            bottom: 800,
+            right: 1200,
+            width: 1200,
+            height: 800,
+        } as DOMRect);
+
+        const result = calculateVisibleElementData(mockElement);
+
+        expect(result).toEqual({
+            top: 0, // Not clipped from top
+            height: 800, // Full viewport height
+            left: 0, // Not clipped from left
+            width: 1200, // Full viewport width
+        });
+    });
+});

package/src/utils.ts

@@ -269,7 +269,7 @@ export const getOperationNameFromQuery = (query: string) => {
 export function removeTypename(obj: any) {
     if (!obj || typeof obj !== 'object') return obj;
 
-    // eslint-disable-next-line no-restricted-syntax
+
     for (const key in obj) {
         if (key === '__typename') {
             delete obj[key];
@@ -300,7 +300,11 @@ export const setStyleProperties = (
 ): void => {
     if (!element?.style) return;
     Object.keys(styleProperties).forEach((styleProperty) => {
-        element.style[styleProperty] = styleProperties[styleProperty].toString();
+        const styleKey = styleProperty as keyof CSSStyleDeclaration;
+        const value = styleProperties[styleKey];
+        if (value !== undefined) {
+            (element.style as any)[styleKey] = value.toString();
+        }
     });
 };
 /**
@@ -463,3 +467,25 @@ export const handleExitPresentMode = async (): Promise<void> => {
 
     logger.warn('Exit fullscreen API is not supported by this browser.');
 };
+
+export const calculateVisibleElementData = (element: HTMLElement) => {
+    const rect = element.getBoundingClientRect();
+
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+
+    const frameRelativeTop = Math.max(rect.top, 0);
+    const frameRelativeLeft = Math.max(rect.left, 0);
+
+    const frameRelativeBottom = Math.min(windowHeight, rect.bottom);
+    const frameRelativeRight = Math.min(windowWidth, rect.right);
+
+    const data = {
+        top: Math.max(0, rect.top * -1),
+        height: Math.max(0, frameRelativeBottom - frameRelativeTop),
+        left: Math.max(0, rect.left * -1),
+        width: Math.max(0, frameRelativeRight - frameRelativeLeft),
+    };
+
+    return data;
+}