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

package/src/embed/search-bar.tsx

@@ -45,6 +45,8 @@ export class SearchBarEmbed extends TsEmbed {
      */
     protected viewConfig: SearchBarViewConfig;
 
+    protected embedComponentType = 'SearchBarEmbed';
+
     constructor(domSelector: string, viewConfig: SearchBarViewConfig) {
         super(domSelector);
         this.viewConfig = viewConfig;

package/src/embed/search.ts

@@ -149,6 +149,8 @@ export class SearchEmbed extends TsEmbed {
      */
     protected viewConfig: SearchViewConfig;
 
+    protected embedComponentType = 'SearchEmbed';
+
     constructor(domSelector: DOMSelector, viewConfig: SearchViewConfig) {
         super(domSelector);
         this.viewConfig = viewConfig;
@@ -257,13 +259,15 @@ export class SearchEmbed extends TsEmbed {
 
     /**
      * Render the embedded ThoughtSpot search
+     *
+     * @param showPreRenderByDefault
      */
-    public render(): SearchEmbed {
+    public render(showPreRenderByDefault = false): SearchEmbed {
         super.render();
         const { answerId } = this.viewConfig;
 
         const src = this.getIFrameSrc(answerId);
-        this.renderIFrame(src);
+        this.renderIFrame(src, showPreRenderByDefault);
         getAuthPromise().then(() => {
             if (
                 checkReleaseVersionInBeta(
@@ -276,4 +280,12 @@ export class SearchEmbed extends TsEmbed {
         });
         return this;
     }
+
+    public preRender(showPreRenderByDefault = false): SearchEmbed {
+        super.preRender(showPreRenderByDefault);
+
+        this.render(showPreRenderByDefault);
+
+        return this;
+    }
 }

package/src/embed/ts-embed.spec.ts

@@ -113,6 +113,8 @@ describe('Unit test case for ts embed', () => {
                     runtimeFilterParams: null,
                     hiddenHomeLeftNavItems: [],
                     hiddenHomepageModules: [],
+                    hostConfig: undefined,
+                    reorderedHomepageModules: [],
                 },
             });
         });
@@ -142,6 +144,8 @@ describe('Unit test case for ts embed', () => {
                     runtimeFilterParams: null,
                     hiddenHomeLeftNavItems: [],
                     hiddenHomepageModules: [],
+                    hostConfig: undefined,
+                    reorderedHomepageModules: [],
                 },
             });
             expect(getIFrameSrc()).toContain(
@@ -181,6 +185,44 @@ describe('Unit test case for ts embed', () => {
                     hiddenHomeLeftNavItems: [],
                     hiddenHomepageModules: [HomepageModule.MyLibrary,
                         HomepageModule.Learning],
+                    reorderedHomepageModules: [],
+                },
+            });
+        });
+
+        test('Reordering the home page modules from view Config should be part of app_init payload', async () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            const mockedReorderedHomepageModules: HomepageModule[] = [
+                HomepageModule.MyLibrary,
+                HomepageModule.Watchlist,
+            ];
+
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                reorderedHomepageModules: mockedReorderedHomepageModules,
+            });
+            searchEmbed.render();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: {
+                    customisations,
+                    authToken: '',
+                    hostConfig: undefined,
+                    runtimeFilterParams: null,
+                    hiddenHomeLeftNavItems: [],
+                    hiddenHomepageModules: [],
+                    reorderedHomepageModules: [HomepageModule.MyLibrary,
+                        HomepageModule.Watchlist],
                 },
             });
         });
@@ -219,6 +261,8 @@ describe('Unit test case for ts embed', () => {
                     runtimeFilterParams: 'col1=color&op1=EQ&val1=blue',
                     hiddenHomeLeftNavItems: [],
                     hiddenHomepageModules: [],
+                    hostConfig: undefined,
+                    reorderedHomepageModules: [],
                 },
             });
         });
@@ -257,6 +301,8 @@ describe('Unit test case for ts embed', () => {
                     runtimeFilterParams: null,
                     hiddenHomeLeftNavItems: [],
                     hiddenHomepageModules: [],
+                    hostConfig: undefined,
+                    reorderedHomepageModules: [],
                 },
             });
         });
@@ -293,6 +339,7 @@ describe('Unit test case for ts embed', () => {
                     hiddenHomeLeftNavItems: [HomeLeftNavItem.Home,
                         HomeLeftNavItem.Documentation],
                     hiddenHomepageModules: [],
+                    reorderedHomepageModules: [],
                 },
             });
         });
@@ -448,6 +495,8 @@ describe('Unit test case for ts embed', () => {
                         runtimeFilterParams: null,
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
+                        hostConfig: undefined,
+                        reorderedHomepageModules: [],
                     },
                 });
             });

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,7 @@ export class TsEmbed {
      * and executes the registered callbacks accordingly.
      */
     private subscribeToEvents() {
-        window.addEventListener('message', (event) => {
+        const messageEventListener = (event: MessageEvent<any>) => {
             const eventType = this.getEventType(event);
             const eventPort = this.getEventPort(event);
             const eventData = this.formatEventData(event, eventType);
@@ -245,16 +250,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 +301,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 +548,17 @@ export class TsEmbed {
         return iFrame;
     }
 
+
     /**
      * Renders the embedded ThoughtSpot app in an iframe and sets up
      * event listeners.
      *
      * @param url
      * @param frameOptions
+     * @param showPreRender
+     * @param showPreRenderByDefault
      */
-    protected async renderIFrame(url: string): Promise<any> {
+    protected async renderIFrame(url: string, showPreRenderByDefault = false): Promise<any> {
         if (this.isError) {
             return null;
         }
@@ -586,6 +612,9 @@ export class TsEmbed {
                     });
                     if (this.isPreRendered) {
                         this.insertIntoDOMForPreRender(this.iFrame);
+                        if (showPreRenderByDefault) {
+                            this.showPreRender();
+                        }
                     } else {
                         this.insertIntoDOM(this.iFrame);
                     }
@@ -627,11 +656,10 @@ export class TsEmbed {
 
         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;
@@ -659,7 +687,7 @@ export class TsEmbed {
 
     protected preRenderChild: HTMLElement;
 
-    protected isPreRenderAvailable(): boolean {
+    protected connectPreRendered(): boolean {
         const preRenderIds = this.getPreRenderIds();
         this.preRenderWrapper = this.preRenderWrapper
             || document.getElementById(preRenderIds.wrapper);
@@ -667,7 +695,11 @@ export class TsEmbed {
             || document.getElementById(preRenderIds.shield);
         this.preRenderChild = this.preRenderChild
             || document.getElementById(preRenderIds.child);
+        this.iFrame = this.preRenderChild as HTMLIFrameElement;
+        return this.isPreRenderAvailable();
+    }
 
+    protected isPreRenderAvailable(): boolean {
         return !!this.preRenderWrapper && !!this.preRenderShield
             && !!this.preRenderChild;
     }
@@ -717,15 +749,20 @@ export class TsEmbed {
             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();
@@ -733,9 +770,11 @@ export class TsEmbed {
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         setStyleProperties(this.preRenderShield, { zIndex: '-1' });
+
+        this.subscribeToEvents();
     }
 
-    public syncPreRenderStyle() {
+    public syncPreRenderStyle(): void {
         if (!this.el) {
             throw new Error('Embed element is not defined');
         }
@@ -982,7 +1021,7 @@ export class TsEmbed {
     /**
      * Creates the preRender shell
      */
-    public preRender(): TsEmbed {
+    public preRender(showPreRenderByDefault = false): TsEmbed {
         this.isPreRendered = true;
         return this;
     }
@@ -1068,8 +1107,8 @@ export class V1Embed extends TsEmbed {
      *
      * @param iframeSrc
      */
-    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,10 +18,9 @@ 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,
@@ -29,19 +28,14 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
                     {
                         insertAsSibling: viewConfig.insertAsSibling,
                         frameParams: {
-                            class: viewConfig.insertAsSibling
-                                ? className || ''
-                                : '',
+                            class: viewConfig.insertAsSibling ? className || '' : '',
                         },
                     },
                     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) {
@@ -64,23 +58,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 +85,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.
@@ -116,8 +102,12 @@ interface AppProps extends EmbedProps, AppViewConfig { }
  * ```
  */
 export const AppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConfig>(_AppEmbed);
+export const PreRenderedAppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConfig>(
+    _AppEmbed,
+    true,
+);
 
-interface LiveboardProps extends EmbedProps, LiveboardViewConfig { }
+interface LiveboardProps extends EmbedProps, LiveboardViewConfig {}
 
 /**
  * React component for Liveboard embed.
@@ -139,10 +129,17 @@ export const LiveboardEmbed = componentFactory<
     LiveboardProps,
     LiveboardViewConfig
 >(_LiveboardEmbed);
-
 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 +160,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.
@@ -181,6 +184,11 @@ interface SageEmbedProps extends EmbedProps, SageViewConfig { }
 export const SageEmbed = componentFactory<typeof _SageEmbed, SageEmbedProps, SageViewConfig>(
     _SageEmbed,
 );
+export const PreRenderedSageEmbed = componentFactory<
+    typeof _SageEmbed,
+    SageEmbedProps,
+    SageViewConfig
+>(_SageEmbed, true);
 
 type EmbedComponent =
     | typeof SearchEmbed
@@ -206,17 +214,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,

package/src/types.ts

@@ -8,6 +8,7 @@
  */
 
 import { CustomCssVariables } from './css-variables';
+import type { SessionInterface } from './utils/graphql/answerService/answerService';
 
 /**
  * The authentication mechanism for allowing access to the
@@ -532,7 +533,7 @@ export interface EmbedConfig {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LayoutConfig {}
+export interface LayoutConfig { }
 
 /**
  * Embedded iFrame configuration
@@ -756,6 +757,12 @@ export interface ViewConfig {
      * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
      */
     hiddenHomepageModules?: HomepageModule[];
+    /**
+     * reordering the home page modules
+     * eg: reorderedHomepageModules = [HomepageModule.MyLibrary, HomepageModule.Watchlist]
+     * @version SDK: 1.28.0 | Thoughtspot: 9.9.0.cl
+     */
+    reorderedHomepageModules?: HomepageModule[];
     /**
      * The list of tab IDs to show in the embedded.
      * Only this Tabs will be shown in their respective LBs.
@@ -921,27 +928,27 @@ export enum HomepageModule {
     /**
      * Search bar
      */
-    Search = 'search',
+    Search = 'SEARCH',
     /**
      * kPI watchlist module
      */
-    Watchlist = 'watchlist',
+    Watchlist = 'WATCHLIST',
     /**
      * favorite objects
      */
-    Favorite = 'favorite',
+    Favorite = 'FAVORITE',
     /**
      * List of answers and liveboards
      */
-    MyLibrary = 'mylibrary',
+    MyLibrary = 'MY_LIBRARY',
     /**
      * Trending list
      */
-    Trending = 'trending',
+    Trending = 'TRENDING',
     /**
      * Learning videos
      */
-    Learning = 'learning',
+    Learning = 'LEARNING',
 }
 
 /**
@@ -3126,18 +3133,6 @@ export enum Action {
     PersonalisedViewsDropdown = 'personalisedViewsDropdown',
 }
 
-export interface SessionInterface {
-    sessionId: string;
-    genNo: number;
-    acSession: { sessionId: string; genNo: number };
-}
-
-// eslint-disable-next-line no-shadow
-export enum OperationType {
-    GetChartWithData = 'GetChartWithData',
-    GetTableWithHeadlineData = 'GetTableWithHeadlineData',
-}
-
 export interface AnswerServiceType {
     getAnswer?: (offset: number, batchSize: number) => any;
 }
@@ -3156,3 +3151,39 @@ export enum ContextMenuTriggerOptions {
     LEFT_CLICK = 'left-click',
     RIGHT_CLICK = 'right-click',
 }
+
+export interface ColumnValue {
+    column: {
+        id: string,
+        name: string,
+        dataType: string,
+        [key: string]: any
+    },
+    value: string | number | boolean;
+}
+
+export interface VizPoint {
+    selectedAttributes: ColumnValue[],
+    selectedMeasures: ColumnValue[]
+}
+
+export interface CustomActionPayload {
+    contextMenuPoints?: {
+        clickedPoint: VizPoint
+        selectedPoints: VizPoint[]
+    };
+    embedAnswerData: {
+        name: string,
+        id: string,
+        sources: {
+            header: {
+                guid: string
+            }
+        },
+        columns: any[],
+        data: any[],
+        [key: string]: any
+    };
+    session: SessionInterface;
+    vizId?: string;
+}