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

package/lib/src/visual-embed-sdk.d.ts

@@ -13,7 +13,7 @@ declare module '@thoughtspot/visual-embed-sdk' {
       * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
       */
     import { AppEmbed, Page, AppViewConfig } from '@thoughtspot/visual-embed-sdk/embed/app';
-    import { init, prefetch, logout, getEmbedConfig, executeTML, exportTML } from '@thoughtspot/visual-embed-sdk/embed/base';
+    import { init, prefetch, logout, getEmbedConfig, executeTML, exportTML, executeTMLInput, exportTMLInput } from '@thoughtspot/visual-embed-sdk/embed/base';
     import { PinboardEmbed, LiveboardViewConfig, LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/embed/liveboard';
     import { SearchEmbed, SearchViewConfig } from '@thoughtspot/visual-embed-sdk/embed/search';
     import { SearchBarEmbed, SearchBarViewConfig } from '@thoughtspot/visual-embed-sdk/embed/search-bar';
@@ -21,7 +21,8 @@ declare module '@thoughtspot/visual-embed-sdk' {
     import { AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, EmbedConfig, PrefetchFeatures, FrameParams, DOMSelector, HomeLeftNavItem, HomepageModule, MessageOptions, MessageCallback, MessagePayload, CustomisationsInterface, CustomStyles, customCssInterface, ContextMenuTriggerOptions } from '@thoughtspot/visual-embed-sdk/types';
     import { CustomCssVariables } from '@thoughtspot/visual-embed-sdk/css-variables';
     import { SageEmbed, SageViewConfig } from '@thoughtspot/visual-embed-sdk/embed/sage';
-    export { init, logout, prefetch, executeTML, exportTML, getEmbedConfig as getInitConfig, getSessionInfo, SearchEmbed, SearchBarEmbed, PinboardEmbed, LiveboardEmbed, SageEmbed, AppEmbed, AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter, Page, AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, ContextMenuTriggerOptions, EmbedConfig, SearchViewConfig, SearchBarViewConfig, LiveboardViewConfig, SageViewConfig, AppViewConfig, PrefetchFeatures, FrameParams, HomeLeftNavItem, HomepageModule, DOMSelector, MessageOptions, MessageCallback, MessagePayload, CustomisationsInterface, CustomStyles, customCssInterface, CustomCssVariables, };
+    import { AnswerService } from '@thoughtspot/visual-embed-sdk/utils/graphql/answerService/answerService';
+    export { init, logout, prefetch, executeTML, exportTML, executeTMLInput, exportTMLInput, getEmbedConfig as getInitConfig, getSessionInfo, SearchEmbed, SearchBarEmbed, PinboardEmbed, LiveboardEmbed, SageEmbed, AppEmbed, AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter, AnswerService, Page, AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, ContextMenuTriggerOptions, EmbedConfig, SearchViewConfig, SearchBarViewConfig, LiveboardViewConfig, SageViewConfig, AppViewConfig, PrefetchFeatures, FrameParams, HomeLeftNavItem, HomepageModule, DOMSelector, MessageOptions, MessageCallback, MessagePayload, CustomisationsInterface, CustomStyles, customCssInterface, CustomCssVariables, };
 }
 
 declare module '@thoughtspot/visual-embed-sdk/embed/app' {
@@ -184,6 +185,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
         */
     export class AppEmbed extends V1Embed {
             protected viewConfig: AppViewConfig;
+            protected embedComponentType: string;
             constructor(domSelector: DOMSelector, viewConfig: AppViewConfig);
             /**
                 * Constructs a map of parameters to be passed on to the
@@ -215,8 +217,10 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
                 *
                 * @param renderOptions An object containing the page ID
                 * to be embedded.
+                * @param showPreRenderByDefault
                 */
-            render(): AppEmbed;
+            render(showPreRenderByDefault?: boolean): AppEmbed;
+            preRender(showPreRenderByDefault?: boolean): AppEmbed;
     }
 }
 
@@ -314,6 +318,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/base' {
         *
         * @param data
         * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
+        * @group Global methods
         */
     export const executeTML: (data: executeTMLInput) => Promise<any>;
     /**
@@ -322,6 +327,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/base' {
         *
         * @param data
         * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
+        * @group Global methods
         */
     export const exportTML: (data: exportTMLInput) => Promise<any>;
     /**
@@ -447,6 +453,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/liveboard' {
         */
     export class LiveboardEmbed extends V1Embed {
             protected viewConfig: LiveboardViewConfig;
+            protected embedComponentType: string;
             constructor(domSelector: DOMSelector, viewConfig: LiveboardViewConfig);
             /**
                 * Construct a map of params to be passed on to the
@@ -466,8 +473,8 @@ declare module '@thoughtspot/visual-embed-sdk/embed/liveboard' {
                 * @param renderOptions An object specifying the Liveboard ID,
                 * visualization ID and the runtime filters.
                 */
-            render(): LiveboardEmbed;
-            preRender(): LiveboardEmbed;
+            render(showPreRenderByDefault?: boolean): LiveboardEmbed;
+            preRender(showPreRenderByDefault?: boolean): LiveboardEmbed;
             navigateToLiveboard(liveboardId: string, vizId?: string, activeTabId?: string): void;
     }
     /**
@@ -599,12 +606,16 @@ declare module '@thoughtspot/visual-embed-sdk/embed/search' {
                 * The view configuration for the embedded ThoughtSpot search.
                 */
             protected viewConfig: SearchViewConfig;
+            protected embedComponentType: string;
             constructor(domSelector: DOMSelector, viewConfig: SearchViewConfig);
             protected getEmbedParams(): string;
             /**
                 * Render the embedded ThoughtSpot search
+                *
+                * @param showPreRenderByDefault
                 */
-            render(): SearchEmbed;
+            render(showPreRenderByDefault?: boolean): SearchEmbed;
+            preRender(showPreRenderByDefault?: boolean): SearchEmbed;
     }
 }
 
@@ -651,6 +662,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/search-bar' {
                 * The view configuration for the embedded ThoughtSpot search bar.
                 */
             protected viewConfig: SearchBarViewConfig;
+            protected embedComponentType: string;
             constructor(domSelector: string, viewConfig: SearchBarViewConfig);
             /**
                 * Render the embedded ThoughtSpot search
@@ -856,6 +868,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
         * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
         */
     import { CustomCssVariables } from '@thoughtspot/visual-embed-sdk/css-variables';
+    import type { SessionInterface } from '@thoughtspot/visual-embed-sdk/utils/graphql/answerService/answerService';
     /**
         * The authentication mechanism for allowing access to the
         * the embedded app
@@ -1579,6 +1592,13 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * @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.
@@ -1608,7 +1628,19 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             hiddenHomeLeftNavItems?: HomeLeftNavItem[];
             /**
-                * TBD
+                * PreRender id to be used for PreRendering the embed.
+                * Use PreRender to render the embed in the background and then
+                * show or hide the rendered embed using showPreRender or hidePreRender respectively.
+                *
+                * @example
+                * ```js
+                * const embed = new LiveboardEmbed('#embed', {
+                *   ... // other liveboard view config
+                *   preRenderId: "preRenderId-123"
+                * });
+                * embed.showPreRender();
+                * ```
+                * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
                 */
             preRenderId?: string;
     }
@@ -1729,27 +1761,27 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             /**
                 * 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"
     }
     /**
         * A filter that can be applied to ThoughtSpot answers, Liveboards, or
@@ -3920,18 +3952,6 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             PersonalisedViewsDropdown = "personalisedViewsDropdown"
     }
-    export interface SessionInterface {
-            sessionId: string;
-            genNo: number;
-            acSession: {
-                    sessionId: string;
-                    genNo: number;
-            };
-    }
-    export enum OperationType {
-            GetChartWithData = "GetChartWithData",
-            GetTableWithHeadlineData = "GetTableWithHeadlineData"
-    }
     export interface AnswerServiceType {
             getAnswer?: (offset: number, batchSize: number) => any;
     }
@@ -3948,6 +3968,39 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             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;
+    }
 }
 
 declare module '@thoughtspot/visual-embed-sdk/css-variables' {
@@ -4379,6 +4432,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/sage' {
                 *
                 */
             protected viewConfig: SageViewConfig;
+            protected embedComponentType: string;
             constructor(domSelector: DOMSelector, viewConfig: SageViewConfig);
             /**
                 * Constructs a map of parameters to be passed on to the
@@ -4390,12 +4444,73 @@ declare module '@thoughtspot/visual-embed-sdk/embed/sage' {
             /**
                 * Render the embedded ThoughtSpot Sage
                 *
+                * @param showPreRenderByDefault
                 * @returns {SageEmbed} Eureka/Sage embed
                 */
-            render(): SageEmbed;
+            render(showPreRenderByDefault?: boolean): SageEmbed;
+            preRender(showPreRenderByDefault?: boolean): SageEmbed;
     }
 }
 
+declare module '@thoughtspot/visual-embed-sdk/utils/graphql/answerService/answerService' {
+    import type { VizPoint } from '@thoughtspot/visual-embed-sdk/types';
+    export interface SessionInterface {
+            sessionId: string;
+            genNo: number;
+            acSession: {
+                    sessionId: string;
+                    genNo: number;
+            };
+    }
+    export enum OperationType {
+            GetChartWithData = "GetChartWithData",
+            GetTableWithHeadlineData = "GetTableWithHeadlineData"
+    }
+    interface UnderlyingDataPoint {
+            columnId: string;
+            dataValue: any;
+    }
+    /**
+        * Class representing the answer service provided with the
+        * custom action payload. This service could be used to run
+        * graphql queries in the context of the answer on which the
+        * custom action was triggered.
+        *
+        * @example
+        * ```js
+        *  embed.on(EmbedEvent.CustomAction, e => {
+        *     const underlying = await e.answerService.getUnderlyingDataForPoint([
+        *       'col name 1'
+        *     ]);
+        *     const data = await underlying.fetchData(0, 100);
+        *  })
+        * ```
+        * @version
+        * ThoughtSpot: 9.9.0.cl / SDK: 1.25.0
+        */
+    export class AnswerService {
+            constructor(session: SessionInterface, answer: any, thoughtSpotHost: string, selectedPoints?: VizPoint[]);
+            getSourceDetail(): Promise<any>;
+            removeColumns(columnIds: string[]): Promise<any>;
+            addColumns(columnIds: string[]): Promise<any>;
+            fetchData(offset?: number, size?: number): Promise<{
+                    columns: any;
+                    data: any;
+            }>;
+            /**
+                *
+                * @param userLocale
+                * @param omitInfo Omit the download Info on top of the CSV
+                * @returns Response
+                */
+            fetchCSVBlob(userLocale?: string, omitInfo?: boolean): Promise<Response>;
+            getUnderlyingDataForPoint(outputColumnNames: string[], selectedPoints?: UnderlyingDataPoint[]): Promise<AnswerService>;
+            executeQuery(query: string, variables: any): Promise<any>;
+            getSession(): SessionInterface;
+    }
+    export {};
+}
+
 declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
     /**
         * Copyright (c) 2022
@@ -4429,6 +4544,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
                 */
             protected thoughtSpotHost: string;
             protected thoughtSpotV2Base: string;
+            protected embedComponentType: string;
             constructor(domSelector: DOMSelector, viewConfig?: ViewConfig);
             /**
                 * Handles errors within the SDK
@@ -4461,14 +4577,15 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
             protected getEmbedParams(): string;
             protected getRootIframeSrc(): string;
             protected createIframeEl(frameSrc: string): HTMLIFrameElement;
+            protected handleInsertionIntoDOM(child: string | Node, showPreRenderByDefault?: boolean): void;
             /**
                 * 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 renderIFrame(url: string): Promise<any>;
+            protected renderIFrame(url: string, showPreRenderByDefault?: boolean): Promise<any>;
             getPreRenderIds(): {
                     wrapper: string;
                     shield: string;
@@ -4476,10 +4593,10 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
             };
             protected createPreRenderWrapper(child: HTMLElement): HTMLDivElement;
             protected preRenderWrapper: HTMLElement;
-            protected preRenderShield: HTMLElement;
             protected preRenderChild: HTMLElement;
+            protected connectPreRendered(): boolean;
             protected isPreRenderAvailable(): boolean;
-            protected insertIntoDOMForPreRender(child: string | HTMLElement): void;
+            protected insertIntoDOMForPreRender(child: string | HTMLElement, showPreRenderByDefault?: boolean): void;
             hidePreRender(): void;
             showPreRender(): void;
             syncPreRenderStyle(): void;
@@ -4581,8 +4698,10 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
             render(): TsEmbed;
             /**
                 * Creates the preRender shell
+                *
+                * @param showPreRenderByDefault
                 */
-            preRender(): TsEmbed;
+            preRender(showPreRenderByDefault?: boolean): TsEmbed;
             /**
                 * Get the Post Url Params for THOUGHTSPOT from the current
                 * host app URL.
@@ -4622,8 +4741,9 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
                 * 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;
+            protected renderV1Embed(iframeSrc: string, showPreRenderByDefault?: boolean): any;
             protected getRootIframeSrc(): string;
             /**
                 * @inheritdoc

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.24.0-dev",
+    "version": "1.24.0-preRender.1",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -139,11 +139,10 @@
         "identity-obj-proxy": "^3.0.0",
         "istanbul-merge": "^1.1.1",
         "jest": "^26.6.3",
-        "jest-puppeteer": "^4.4.0",
+        "jest-fetch-mock": "^3.0.3",
         "jsdom": "^17.0.0",
         "node-sass": "^8.0.0",
         "prettier": "2.1.2",
-        "puppeteer": "^7.0.1",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-resizable": "^1.11.0",

package/src/embed/app.ts

@@ -168,6 +168,8 @@ export class AppEmbed extends V1Embed {
 
     private defaultHeight = '100%';
 
+    protected embedComponentType = 'AppEmbed';
+
     // eslint-disable-next-line no-useless-constructor
     constructor(domSelector: DOMSelector, viewConfig: AppViewConfig) {
         super(domSelector, viewConfig);
@@ -257,7 +259,7 @@ export class AppEmbed extends V1Embed {
      */
     protected updateIFrameHeight = (data: MessagePayload) => {
         this.setIFrameHeight(Math.max(data.data, this.iFrame?.scrollHeight));
-    }
+    };
 
     private embedIframeCenter = (data: MessagePayload, responder: any) => {
         const obj = this.getIframeCenter();
@@ -265,9 +267,7 @@ export class AppEmbed extends V1Embed {
     };
 
     private setIframeHeightForNonEmbedLiveboard = (data: MessagePayload) => {
-        const {
-            height: frameHeight, ...restParams
-        } = this.viewConfig.frameParams || {};
+        const { height: frameHeight, ...restParams } = this.viewConfig.frameParams || {};
         if (!data.data.currentPath.startsWith('/pinboard/')) {
             this.setIFrameHeight(frameHeight || this.defaultHeight);
         }
@@ -357,12 +357,19 @@ export class AppEmbed extends V1Embed {
      *
      * @param renderOptions An object containing the page ID
      * to be embedded.
+     * @param showPreRenderByDefault
      */
-    public render(): AppEmbed {
+    public render(showPreRenderByDefault = false): AppEmbed {
         super.render();
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src);
+        this.renderV1Embed(src, showPreRenderByDefault);
+
+        return this;
+    }
 
+    public preRender(showPreRenderByDefault = false): AppEmbed {
+        super.preRender(showPreRenderByDefault);
+        this.render(showPreRenderByDefault);
         return this;
     }
 }

package/src/embed/base.ts

@@ -261,6 +261,7 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>):
  *
  * @param data
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
+ * @group Global methods
  */
 export const executeTML = async (data: executeTMLInput): Promise<any> => {
     const { thoughtSpotHost, authType } = config;
@@ -311,6 +312,7 @@ export const executeTML = async (data: executeTMLInput): Promise<any> => {
  *
  * @param data
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
+ * @group Global methods
  */
 export const exportTML = async (data: exportTMLInput): Promise<any> => {
     const { thoughtSpotHost, authType } = config;

package/src/embed/liveboard.ts

@@ -132,6 +132,8 @@ export class LiveboardEmbed extends V1Embed {
 
     private defaultHeight = 500;
 
+    protected embedComponentType = 'LiveboardEmbed';
+
     // eslint-disable-next-line no-useless-constructor
     constructor(domSelector: DOMSelector, viewConfig: LiveboardViewConfig) {
         super(domSelector, viewConfig);
@@ -282,19 +284,19 @@ export class LiveboardEmbed extends V1Embed {
      * @param renderOptions An object specifying the Liveboard ID,
      * visualization ID and the runtime filters.
      */
-    public render(): LiveboardEmbed {
+    public render(showPreRenderByDefault = false): LiveboardEmbed {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src);
+        this.renderV1Embed(src, showPreRenderByDefault);
 
         return this;
     }
 
-    public preRender(): LiveboardEmbed {
-        super.preRender();
+    public preRender(showPreRenderByDefault = false): LiveboardEmbed {
+        super.preRender(showPreRenderByDefault);
 
-        this.render();
+        this.render(showPreRenderByDefault);
 
         return this;
     }

package/src/embed/sage.ts

@@ -100,6 +100,8 @@ export class SageEmbed extends V1Embed {
      */
     protected viewConfig: SageViewConfig;
 
+    protected embedComponentType = 'SageEmbed';
+
     // eslint-disable-next-line no-useless-constructor
     constructor(domSelector: DOMSelector, viewConfig: SageViewConfig) {
         super(domSelector, viewConfig);
@@ -166,13 +168,22 @@ export class SageEmbed extends V1Embed {
     /**
      * Render the embedded ThoughtSpot Sage
      *
+     * @param showPreRenderByDefault
      * @returns {SageEmbed} Eureka/Sage embed
      */
-    public render(): SageEmbed {
+    public render(showPreRenderByDefault = false): SageEmbed {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src);
+        this.renderV1Embed(src, showPreRenderByDefault);
+
+        return this;
+    }
+
+    public preRender(showPreRenderByDefault = false): SageEmbed {
+        super.preRender(showPreRenderByDefault);
+
+        this.render(showPreRenderByDefault);
 
         return this;
     }

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: [],
                     },
                 });
             });