@thoughtspot/visual-embed-sdk 1.24.0-dev → 1.24.0-preRender.1

package/src/embed/ts-embed.ts

@@ -117,6 +117,8 @@ export class TsEmbed {
      */
     protected thoughtSpotV2Base: string;
 
+    protected embedComponentType = 'TsEmbed';
+
     /**
      * A map of event handlers for particular message types triggered
      * by the embedded app; multiple event handlers can be registered
@@ -161,6 +163,7 @@ export class TsEmbed {
         this.registerAppInit();
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
+            embedComponentType: this.embedComponentType,
         });
     }
 
@@ -227,6 +230,8 @@ export class TsEmbed {
         return eventData;
     }
 
+    private subscribedListeners = {};
+
     /**
      * Adds a global event listener to window for "message" events.
      * ThoughtSpot detects if a particular event is targeted to this
@@ -234,7 +239,8 @@ export class TsEmbed {
      * and executes the registered callbacks accordingly.
      */
     private subscribeToEvents() {
-        window.addEventListener('message', (event) => {
+        this.unsubscribeToEvents();
+        const messageEventListener = (event: MessageEvent<any>) => {
             const eventType = this.getEventType(event);
             const eventPort = this.getEventPort(event);
             const eventData = this.formatEventData(event, eventType);
@@ -245,16 +251,33 @@ export class TsEmbed {
                     eventPort,
                 );
             }
-        });
-        window.addEventListener('online', (e) => {
+        };
+        window.addEventListener('message', messageEventListener);
+
+        const onlineEventListener = (e: Event) => {
             this.trigger(HostEvent.Reload);
-        });
-        window.addEventListener('offline', (e) => {
+        };
+        window.addEventListener('online', onlineEventListener);
+
+        const offlineEventListener = (e: Event) => {
             const offlineWarning = 'Network not Detected. Embed is offline. Please reconnect and refresh';
             this.executeCallbacks(EmbedEvent.Error, {
                 offlineWarning,
             });
             console.warn(offlineWarning);
+        };
+        window.addEventListener('offline', offlineEventListener);
+
+        this.subscribedListeners = {
+            message: messageEventListener,
+            online: onlineEventListener,
+            offline: offlineEventListener,
+        };
+    }
+
+    private unsubscribeToEvents() {
+        Object.keys(this.subscribedListeners).forEach((key) => {
+            window.removeEventListener(key, this.subscribedListeners[key]);
         });
     }
 
@@ -279,6 +302,7 @@ export class TsEmbed {
                     ? getRuntimeFilters(this.viewConfig.runtimeFilters)
                     : null,
                 hiddenHomepageModules: this.viewConfig.hiddenHomepageModules || [],
+                reorderedHomepageModules: this.viewConfig.reorderedHomepageModules || [],
                 hostConfig: this.embedConfig.hostConfig,
                 hiddenHomeLeftNavItems: this.viewConfig?.hiddenHomeLeftNavItems
                     ? this.viewConfig?.hiddenHomeLeftNavItems
@@ -525,14 +549,24 @@ export class TsEmbed {
         return iFrame;
     }
 
+    protected handleInsertionIntoDOM(child: string | Node, showPreRenderByDefault = false): void {
+        if (this.isPreRendered) {
+            this.insertIntoDOMForPreRender(
+                this.embedConfig.loginFailedMessage, showPreRenderByDefault,
+            );
+        } else {
+            this.insertIntoDOM(this.embedConfig.loginFailedMessage);
+        }
+    }
+
     /**
      * Renders the embedded ThoughtSpot app in an iframe and sets up
      * event listeners.
      *
-     * @param url
-     * @param frameOptions
+     * @param url - The URL of the embedded ThoughtSpot app.
+     * @param showPreRenderByDefault - The flag to show the preRender by default.
      */
-    protected async renderIFrame(url: string): Promise<any> {
+    protected async renderIFrame(url: string, showPreRenderByDefault = false): Promise<any> {
         if (this.isError) {
             return null;
         }
@@ -557,11 +591,9 @@ export class TsEmbed {
             return getAuthPromise()
                 ?.then((isLoggedIn: boolean) => {
                     if (!isLoggedIn) {
-                        if (this.isPreRendered) {
-                            this.insertIntoDOMForPreRender(this.embedConfig.loginFailedMessage);
-                        } else {
-                            this.insertIntoDOM(this.embedConfig.loginFailedMessage);
-                        }
+                        this.handleInsertionIntoDOM(
+                            this.embedConfig.loginFailedMessage, showPreRenderByDefault,
+                        );
                         return;
                     }
 
@@ -584,11 +616,9 @@ export class TsEmbed {
                     this.iFrame.addEventListener('error', () => {
                         nextInQueue();
                     });
-                    if (this.isPreRendered) {
-                        this.insertIntoDOMForPreRender(this.iFrame);
-                    } else {
-                        this.insertIntoDOM(this.iFrame);
-                    }
+                    this.handleInsertionIntoDOM(
+                        this.iFrame, showPreRenderByDefault,
+                    );
                     const prefetchIframe = document.querySelectorAll('.prefetchIframe');
                     if (prefetchIframe.length) {
                         prefetchIframe.forEach((el) => {
@@ -602,11 +632,7 @@ export class TsEmbed {
                     uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_FAILED, {
                         error: JSON.stringify(error),
                     });
-                    if (this.isPreRendered) {
-                        this.insertIntoDOMForPreRender(this.embedConfig.loginFailedMessage);
-                    } else {
-                        this.insertIntoDOM(this.embedConfig.loginFailedMessage);
-                    }
+                    this.handleInsertionIntoDOM(this.embedConfig.loginFailedMessage);
                     this.handleError(error);
                 });
         });
@@ -622,32 +648,32 @@ export class TsEmbed {
 
     protected createPreRenderWrapper(child: HTMLElement): HTMLDivElement {
         if (!this.viewConfig.preRenderId) {
-            throw new Error('Pre render id is required');
+            throw new Error('PreRender id is required');
         }
 
         const preRenderIds = this.getPreRenderIds();
 
-        const stalePreRenderWrapper = document.getElementById(preRenderIds.wrapper);
-        if (stalePreRenderWrapper) {
-            console.log('Found stale wrapper , removing');
-            stalePreRenderWrapper.remove();
-        }
+        [preRenderIds.wrapper, preRenderIds.shield, preRenderIds.child]
+            .map((id) => document.getElementById(id))
+            .filter((element) => element)
+            .forEach((existingElement) => existingElement.remove());
 
         const preRenderWrapper = document.createElement('div');
         preRenderWrapper.id = preRenderIds.wrapper;
         setStyleProperties(preRenderWrapper, { position: 'absolute', width: '100vw', height: '100vh' });
 
-        const preRenderShield = document.createElement('div');
-        preRenderShield.id = preRenderIds.shield;
-        setStyleProperties(preRenderShield, { position: 'absolute', width: '100%', height: '100%' });
+        // const preRenderShield = document.createElement('div');
+        // preRenderShield.id = preRenderIds.shield;
+        // setStyleProperties(preRenderShield, { position: 'absolute',
+        // width: '100%', height: '100%' });
 
         child.id = preRenderIds.child;
 
         preRenderWrapper.appendChild(child);
-        preRenderWrapper.appendChild(preRenderShield);
+        // preRenderWrapper.appendChild(preRenderShield);
 
         this.preRenderWrapper = preRenderWrapper;
-        this.preRenderShield = preRenderShield;
+        // this.preRenderShield = preRenderShield;
         this.preRenderChild = child;
 
         return preRenderWrapper;
@@ -655,24 +681,35 @@ export class TsEmbed {
 
     protected preRenderWrapper: HTMLElement;
 
-    protected preRenderShield: HTMLElement;
+    // protected preRenderShield: HTMLElement;
 
     protected preRenderChild: HTMLElement;
 
-    protected isPreRenderAvailable(): boolean {
+    protected connectPreRendered(): boolean {
         const preRenderIds = this.getPreRenderIds();
         this.preRenderWrapper = this.preRenderWrapper
             || document.getElementById(preRenderIds.wrapper);
-        this.preRenderShield = this.preRenderShield
-            || document.getElementById(preRenderIds.shield);
+        // this.preRenderShield = this.preRenderShield
+        //     || document.getElementById(preRenderIds.shield);
         this.preRenderChild = this.preRenderChild
             || document.getElementById(preRenderIds.child);
 
-        return !!this.preRenderWrapper && !!this.preRenderShield
-            && !!this.preRenderChild;
+        if (this.preRenderWrapper && this.preRenderChild) {
+            this.isPreRendered = true;
+            this.iFrame = this.preRenderChild as HTMLIFrameElement;
+        }
+
+        return this.isPreRenderAvailable();
+    }
+
+    protected isPreRenderAvailable(): boolean {
+        return this.isPreRendered;
     }
 
-    protected insertIntoDOMForPreRender(child: string | HTMLElement): void {
+    protected insertIntoDOMForPreRender(
+        child: string | HTMLElement,
+        showPreRenderByDefault = false,
+    ): void {
         let childNode: HTMLElement;
         if (typeof child === 'string') {
             const divChildNode = document.createElement('div');
@@ -684,9 +721,13 @@ export class TsEmbed {
 
         const preRenderWrapper = this.createPreRenderWrapper(childNode);
 
-        document.body.appendChild(preRenderWrapper);
+        if (showPreRenderByDefault) {
+            this.showPreRender();
+        } else {
+            this.hidePreRender();
+        }
 
-        this.hidePreRender();
+        document.body.appendChild(preRenderWrapper);
     }
 
     public hidePreRender(): void {
@@ -707,35 +748,42 @@ export class TsEmbed {
 
         const childBoundingRect = this.preRenderChild.getBoundingClientRect();
 
-        setStyleProperties(this.preRenderShield, {
-            opacity: '0',
-            pointerEvents: 'none',
-            zIndex: '1',
-            width: `${childBoundingRect.width}px`,
-            height: `${childBoundingRect.height}px`,
-            position: 'absolute',
-            top: '0',
-            left: '0',
-        });
+        // setStyleProperties(this.preRenderShield, {
+        //     opacity: '0',
+        //     pointerEvents: 'none',
+        //     zIndex: '1',
+        //     width: `${childBoundingRect.width}px`,
+        //     height: `${childBoundingRect.height}px`,
+        //     position: 'absolute',
+        //     top: '0',
+        //     left: '0',
+        // });
+
+        this.unsubscribeToEvents();
     }
 
-    public showPreRender() {
+    public showPreRender(): void {
         if (!this.isPreRenderAvailable()) {
-            // if the Embed component is nor preRendered , Render it now and
-            // show it (hide is defalt behaviour)
-            console.log('No preRender found, creating new ');
-            this.render();
-            return;
+            const isAvailable = this.connectPreRendered();
+            if (!isAvailable) {
+                // if the Embed component is nor preRendered , Render it now and
+                // show it (hide is defalt behaviour)
+                console.log('No preRender found, creating new ');
+                this.preRender(true);
+                return;
+            }
         }
 
         this.syncPreRenderStyle();
 
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
-        setStyleProperties(this.preRenderShield, { zIndex: '-1' });
+        // setStyleProperties(this.preRenderShield, { zIndex: '-1' });
+
+        this.subscribeToEvents();
     }
 
-    public syncPreRenderStyle() {
+    public syncPreRenderStyle(): void {
         if (!this.el) {
             throw new Error('Embed element is not defined');
         }
@@ -981,8 +1029,10 @@ export class TsEmbed {
 
     /**
      * Creates the preRender shell
+     *
+     * @param showPreRenderByDefault
      */
-    public preRender(): TsEmbed {
+    public preRender(showPreRenderByDefault = false): TsEmbed {
         this.isPreRendered = true;
         return this;
     }
@@ -1025,6 +1075,7 @@ export class TsEmbed {
     public destroy(): void {
         try {
             this.insertedDomEl?.parentNode.removeChild(this.insertedDomEl);
+            this.unsubscribeToEvents();
         } catch (e) {
             console.log('Error destroying TS Embed', e);
         }
@@ -1067,9 +1118,10 @@ export class V1Embed extends TsEmbed {
      * Render the app in an iframe and set up event handlers
      *
      * @param iframeSrc
+     * @param showPreRenderByDefault - if true the preRender will be shown by default
      */
-    protected renderV1Embed(iframeSrc: string): any {
-        return this.renderIFrame(iframeSrc);
+    protected renderV1Embed(iframeSrc: string, showPreRenderByDefault = false): any {
+        return this.renderIFrame(iframeSrc, showPreRenderByDefault);
     }
 
     protected getRootIframeSrc(): string {

package/src/index.ts

@@ -10,6 +10,7 @@
 import { AppEmbed, Page, AppViewConfig } from './embed/app';
 import {
     init, prefetch, logout, getEmbedConfig, executeTML, exportTML,
+    executeTMLInput, exportTMLInput,
 } from './embed/base';
 import { PinboardEmbed, LiveboardViewConfig, LiveboardEmbed } from './embed/liveboard';
 import { SearchEmbed, SearchViewConfig } from './embed/search';
@@ -41,6 +42,7 @@ import {
 } from './types';
 import { CustomCssVariables } from './css-variables';
 import { SageEmbed, SageViewConfig } from './embed/sage';
+import { AnswerService } from './utils/graphql/answerService/answerService';
 
 export {
     init,
@@ -48,6 +50,8 @@ export {
     prefetch,
     executeTML,
     exportTML,
+    executeTMLInput,
+    exportTMLInput,
     getEmbedConfig as getInitConfig,
     getSessionInfo,
     SearchEmbed,
@@ -60,6 +64,7 @@ export {
     AuthStatus,
     AuthEvent,
     AuthEventEmitter,
+    AnswerService,
     // types
     Page,
     AuthType,

package/src/mixpanel-service.spec.ts

@@ -57,6 +57,7 @@ describe('Unit test for mixpanel', () => {
             clusterId: sessionInfo.clusterId,
             clusterName: sessionInfo.clusterName,
             releaseVersion: sessionInfo.releaseVersion,
+            hostAppUrl: 'localhost',
         });
         expect(mixpanel.identify).not.toHaveBeenCalledWith(sessionInfo.userGUID);
     });

package/src/mixpanel-service.ts

@@ -71,6 +71,7 @@ export function initMixpanel(sessionInfo: any): void {
                 clusterId: sessionInfo.clusterId,
                 clusterName: sessionInfo.clusterName,
                 releaseVersion: sessionInfo.releaseVersion,
+                hostAppUrl: window?.location?.host || '',
             });
             isMixpanelInitialized = true;
             emptyQueue();

package/src/react/index.tsx

@@ -18,32 +18,25 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
     (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
         const ref = React.useRef<HTMLDivElement>(null);
         const { className, ...embedProps } = props;
-        const { viewConfig, listeners } = getViewPropsAndListeners<
-            Omit<U, 'className'>,
-            V
-        >(embedProps);
+        const { viewConfig, listeners } = getViewPropsAndListeners<Omit<U, 'className'>, V>(
+            embedProps,
+        );
         useDeepCompareEffect(() => {
             const tsEmbed = new EmbedConstructor(
-                ref!.current,
-                deepMerge(
-                    {
-                        insertAsSibling: viewConfig.insertAsSibling,
-                        frameParams: {
-                            class: viewConfig.insertAsSibling
-                                ? className || ''
-                                : '',
+                    ref!.current,
+                    deepMerge(
+                        {
+                            insertAsSibling: viewConfig.insertAsSibling,
+                            frameParams: {
+                                class: viewConfig.insertAsSibling ? className || '' : '',
+                            },
                         },
-                    },
-                    viewConfig,
-                ),
+                        viewConfig,
+                    ),
             ) as InstanceType<T>;
             Object.keys(listeners).forEach((eventName) => {
-                tsEmbed.on(
-                    eventName as EmbedEvent,
-                    listeners[eventName as EmbedEvent],
-                );
+                tsEmbed.on(eventName as EmbedEvent, listeners[eventName as EmbedEvent]);
             });
-
             if (isPreRenderedComponent) {
                 tsEmbed.preRender();
             } else if (props.preRenderId) {
@@ -64,23 +57,15 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
             };
         }, [viewConfig, listeners]);
 
-        return (
-            (viewConfig.insertAsSibling)
-                ? <span
-                    data-testid="tsEmbed"
-                    ref={ref}
-                    style={{ position: 'absolute' }}
-                ></span>
-                : <div
-                    data-testid="tsEmbed"
-                    ref={ref}
-                    className={className}>
-                </div>
+        return viewConfig.insertAsSibling ? (
+            <span data-testid="tsEmbed" ref={ref} style={{ position: 'absolute' }}></span>
+        ) : (
+            <div data-testid="tsEmbed" ref={ref} className={className}></div>
         );
     },
 );
 
-interface SearchProps extends EmbedProps, SearchViewConfig { }
+interface SearchProps extends EmbedProps, SearchViewConfig {}
 
 /**
  * React component for Search Embed.
@@ -99,7 +84,7 @@ export const SearchEmbed = componentFactory<typeof _SearchEmbed, SearchProps, Se
     _SearchEmbed,
 );
 
-interface AppProps extends EmbedProps, AppViewConfig { }
+interface AppProps extends EmbedProps, AppViewConfig {}
 
 /**
  * React component for Full app Embed.
@@ -117,7 +102,12 @@ interface AppProps extends EmbedProps, AppViewConfig { }
  */
 export const AppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConfig>(_AppEmbed);
 
-interface LiveboardProps extends EmbedProps, LiveboardViewConfig { }
+export const PreRenderedAppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConfig>(
+    _AppEmbed,
+    true,
+);
+
+interface LiveboardProps extends EmbedProps, LiveboardViewConfig {}
 
 /**
  * React component for Liveboard embed.
@@ -142,7 +132,15 @@ export const LiveboardEmbed = componentFactory<
 
 export const PinboardEmbed = LiveboardEmbed;
 
-interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig { }
+export const PreRenderedLiveboardEmbed = componentFactory<
+    typeof _LiveboardEmbed,
+    LiveboardProps,
+    LiveboardViewConfig
+>(_LiveboardEmbed, true);
+
+export const PreRenderedPinboardEmbed = PreRenderedLiveboardEmbed;
+
+interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig {}
 
 /**
  * React component for Search bar embed.
@@ -163,7 +161,13 @@ export const SearchBarEmbed = componentFactory<
     SearchBarViewConfig
 >(_SearchBarEmbed);
 
-interface SageEmbedProps extends EmbedProps, SageViewConfig { }
+export const PreRenderedSearchBarEmbed = componentFactory<
+    typeof _SearchBarEmbed,
+    SearchBarEmbedProps,
+    SearchBarViewConfig
+>(_SearchBarEmbed, true);
+
+interface SageEmbedProps extends EmbedProps, SageViewConfig {}
 
 /**
  * React component for LLM based search Sage embed.
@@ -182,6 +186,12 @@ export const SageEmbed = componentFactory<typeof _SageEmbed, SageEmbedProps, Sag
     _SageEmbed,
 );
 
+export const PreRenderedSageEmbed = componentFactory<
+    typeof _SageEmbed,
+    SageEmbedProps,
+    SageViewConfig
+>(_SageEmbed, true);
+
 type EmbedComponent =
     | typeof SearchEmbed
     | typeof AppEmbed
@@ -206,17 +216,12 @@ type EmbedComponent =
  * ```
  * @returns {React.MutableRefObject<T extends TsEmbed>} ref
  */
-export function useEmbedRef<T extends EmbedComponent>():
-    React.MutableRefObject<React.ComponentRef<T>> {
+export function useEmbedRef<T extends EmbedComponent>(): React.MutableRefObject<
+    React.ComponentRef<T>
+    > {
     return React.useRef<React.ComponentRef<T>>(null);
 }
 
-export const PreRenderedLiveboardEmbed = componentFactory<
-    typeof _LiveboardEmbed,
-    LiveboardProps,
-    LiveboardViewConfig
->(_LiveboardEmbed, true);
-
 export {
     LiveboardViewConfig,
     SearchViewConfig,