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

package/dist/tsembed.js

@@ -4,6 +4,50 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.tsembed = {}));
 }(this, (function (exports) { 'use strict';
 
+    // istanbul ignore next
+    const isObject = (obj) => {
+        if (typeof obj === "object" && obj !== null) {
+            if (typeof Object.getPrototypeOf === "function") {
+                const prototype = Object.getPrototypeOf(obj);
+                return prototype === Object.prototype || prototype === null;
+            }
+            return Object.prototype.toString.call(obj) === "[object Object]";
+        }
+        return false;
+    };
+    const merge = (...objects) => objects.reduce((result, current) => {
+        if (Array.isArray(current)) {
+            throw new TypeError("Arguments provided to ts-deepmerge must be objects, not arrays.");
+        }
+        Object.keys(current).forEach((key) => {
+            if (["__proto__", "constructor", "prototype"].includes(key)) {
+                return;
+            }
+            if (Array.isArray(result[key]) && Array.isArray(current[key])) {
+                result[key] = merge.options.mergeArrays
+                    ? Array.from(new Set(result[key].concat(current[key])))
+                    : current[key];
+            }
+            else if (isObject(result[key]) && isObject(current[key])) {
+                result[key] = merge(result[key], current[key]);
+            }
+            else {
+                result[key] = current[key];
+            }
+        });
+        return result;
+    }, {});
+    const defaultOptions = {
+        mergeArrays: true,
+    };
+    merge.options = defaultOptions;
+    merge.withOptions = (options, ...objects) => {
+        merge.options = Object.assign({ mergeArrays: true }, options);
+        const result = merge(...objects);
+        merge.options = defaultOptions;
+        return result;
+    };
+
     /**
      * Copyright (c) 2023
      *
@@ -200,6 +244,30 @@
     function getDOMNode(domSelector) {
         return typeof domSelector === 'string' ? document.querySelector(domSelector) : domSelector;
     }
+    const deepMerge = (target, source) => merge(target, source);
+    const getOperationNameFromQuery = (query) => {
+        const regex = /(?:query|mutation)\s+(\w+)/;
+        const matches = query.match(regex);
+        return matches === null || matches === void 0 ? void 0 : matches[1];
+    };
+    /**
+     *
+     * @param obj
+     */
+    function removeTypename(obj) {
+        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];
+            }
+            else if (typeof obj[key] === 'object') {
+                removeTypename(obj[key]);
+            }
+        }
+        return obj;
+    }
     const setStyleProperties = (element, styleProperties) => {
         if (!element || !styleProperties)
             return;
@@ -457,27 +525,27 @@
         /**
          * Search bar
          */
-        HomepageModule["Search"] = "search";
+        HomepageModule["Search"] = "SEARCH";
         /**
          * kPI watchlist module
          */
-        HomepageModule["Watchlist"] = "watchlist";
+        HomepageModule["Watchlist"] = "WATCHLIST";
         /**
          * favorite objects
          */
-        HomepageModule["Favorite"] = "favorite";
+        HomepageModule["Favorite"] = "FAVORITE";
         /**
          * List of answers and liveboards
          */
-        HomepageModule["MyLibrary"] = "mylibrary";
+        HomepageModule["MyLibrary"] = "MY_LIBRARY";
         /**
          * Trending list
          */
-        HomepageModule["Trending"] = "trending";
+        HomepageModule["Trending"] = "TRENDING";
         /**
          * Learning videos
          */
-        HomepageModule["Learning"] = "learning";
+        HomepageModule["Learning"] = "LEARNING";
     })(exports.HomepageModule || (exports.HomepageModule = {}));
     (function (EmbedEvent) {
         /**
@@ -2544,12 +2612,6 @@
          */
         Action["PersonalisedViewsDropdown"] = "personalisedViewsDropdown";
     })(exports.Action || (exports.Action = {}));
-    // eslint-disable-next-line no-shadow
-    var OperationType;
-    (function (OperationType) {
-        OperationType["GetChartWithData"] = "GetChartWithData";
-        OperationType["GetTableWithHeadlineData"] = "GetTableWithHeadlineData";
-    })(OperationType || (OperationType = {}));
     (function (PrefetchFeatures) {
         PrefetchFeatures["FullApp"] = "FullApp";
         PrefetchFeatures["SearchEmbed"] = "SearchEmbed";
@@ -8660,6 +8722,7 @@
      * @param sessionInfo
      */
     function initMixpanel(sessionInfo) {
+        var _a;
         if (!sessionInfo || !sessionInfo.mixpanelToken) {
             return;
         }
@@ -8677,6 +8740,7 @@
                     clusterId: sessionInfo.clusterId,
                     clusterName: sessionInfo.clusterName,
                     releaseVersion: sessionInfo.releaseVersion,
+                    hostAppUrl: ((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host) || '',
                 });
                 isMixpanelInitialized = true;
                 emptyQueue();
@@ -9169,12 +9233,12 @@
      * _.isObject(null);
      * // => false
      */
-    function isObject(value) {
+    function isObject$1(value) {
       var type = typeof value;
       return value != null && (type == 'object' || type == 'function');
     }
 
-    var isObject_1 = isObject;
+    var isObject_1 = isObject$1;
 
     /** `Object#toString` result references. */
     var asyncTag = '[object AsyncFunction]',
@@ -10005,9 +10069,9 @@
     var _cacheHas = cacheHas;
 
     /* Built-in method references that are verified to be native. */
-    var Set = _getNative(_root, 'Set');
+    var Set$1 = _getNative(_root, 'Set');
 
-    var _Set = Set;
+    var _Set = Set$1;
 
     /**
      * This method returns `undefined`.
@@ -10846,6 +10910,7 @@
      *
      * @param data
      * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
+     * @group Global methods
      */
     const executeTML = async (data) => {
         const { thoughtSpotHost, authType } = config;
@@ -10893,6 +10958,7 @@
      *
      * @param data
      * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
+     * @group Global methods
      */
     const exportTML = async (data) => {
         const { thoughtSpotHost, authType } = config;
@@ -10938,58 +11004,351 @@
 
     /**
      *
-     * @param session
-     * @param query
-     * @param operation
+     * @param root0
+     * @param root0.query
+     * @param root0.variables
+     * @param root0.thoughtSpotHost
+     * @param root0.isCompositeQuery
+     */
+    async function graphqlQuery({ query, variables, thoughtSpotHost, isCompositeQuery = false, }) {
+        const operationName = getOperationNameFromQuery(query);
+        try {
+            const response = await fetch(`${thoughtSpotHost}/prism/?op=${operationName}`, {
+                method: 'POST',
+                headers: {
+                    'content-type': 'application/json;charset=UTF-8',
+                    'x-requested-by': 'ThoughtSpot',
+                    accept: '*/*',
+                    'accept-language': 'en-us',
+                },
+                body: JSON.stringify({
+                    operationName,
+                    query,
+                    variables,
+                }),
+                credentials: 'include',
+            });
+            const result = await response.json();
+            const dataValues = Object.values(result.data);
+            return (isCompositeQuery) ? result.data : dataValues[0];
+        }
+        catch (error) {
+            return error;
+        }
+    }
+
+    const getSourceDetailQuery = `
+    query GetSourceDetail($ids: [GUID!]!) {
+        getSourceDetailById(ids: $ids, type: LOGICAL_TABLE) {
+        id
+        name
+        description
+        authorName
+        authorDisplayName
+        isExternal
+        type
+        created
+        modified
+        columns {
+            id
+            name
+            author
+            authorDisplayName
+            description
+            dataType
+            type
+            modified
+            ownerName
+            owner
+            dataRecency
+            sources {
+            tableId
+            tableName
+            columnId
+            columnName
+            __typename
+            }
+            synonyms
+            cohortAnswerId
+            __typename
+        }
+        relationships
+        destinationRelationships
+        dataSourceId
+        __typename
+        }
+    }  
+`;
+    const sourceDetailCache = new Map();
+    /**
+     *
      * @param thoughtSpotHost
+     * @param sourceId
      */
-    function getAnswerServiceInstance(session, query, operation, thoughtSpotHost) {
-        let variable;
-        const fetchQuery = async (variables) => {
-            try {
-                const response = await fetch(`${thoughtSpotHost}/prism/?op=${operation}`, {
-                    method: 'POST',
-                    headers: {
-                        'content-type': 'application/json;charset=UTF-8',
-                        'x-requested-by': 'ThoughtSpot',
-                        accept: '*/*',
-                        'accept-language': 'en-us',
-                    },
-                    body: JSON.stringify({
-                        operationName: operation,
-                        query,
-                        variables,
-                    }),
-                    credentials: 'include',
-                });
-                const result = await response.json();
-                return result.data;
+    async function getSourceDetail(thoughtSpotHost, sourceId) {
+        if (sourceDetailCache.has(sourceId)) {
+            return sourceDetailCache.get(sourceId);
+        }
+        const details = await graphqlQuery({
+            query: getSourceDetailQuery,
+            variables: {
+                ids: [sourceId],
+            },
+            thoughtSpotHost,
+        });
+        const souceDetails = details[0];
+        sourceDetailCache.set(sourceId, souceDetails);
+        return souceDetails;
+    }
+
+    const bachSessionId = `
+id {
+    sessionId
+    genNo
+    acSession {
+        sessionId
+        genNo
+    }
+}
+`;
+    const getUnaggregatedAnswerSession = `
+mutation GetUnAggregatedAnswerSession($session: BachSessionIdInput!, $columns: [UserPointSelectionInput!]!) {
+    Answer__getUnaggregatedAnswer(session: $session, columns: $columns) {
+        ${bachSessionId}
+        answer {
+            visualizations {
+                ... on TableViz {
+                    columns {
+                        column {
+                            id
+                            name
+                            referencedColumns {
+                                guid
+                                displayName
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}  
+`;
+    const removeColumns = `
+mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!], $columnIds: [GUID!]) {
+    Answer__removeColumns(
+        session: $session
+        logicalColumnIds: $logicalColumnIds
+        columnIds: $columnIds
+        ) {
+            ${bachSessionId}
+    }
+}
+    `;
+    const addColumns = `
+    mutation AddColumns($session: BachSessionIdInput!, $columns: [AnswerColumnInfo!]!) {
+        Answer__addColumn(session: $session, columns: $columns) {
+            ${bachSessionId}
+        }
+    }
+    `;
+    const getAnswerData = `
+    query GetTableWithHeadlineData($session: BachSessionIdInput!, $deadline: Int!, $dataPaginationParams: DataPaginationParamsInput!) {
+        getAnswer(session: $session) {
+            ${bachSessionId}
+            answer {
+                id
+                visualizations {
+                    id
+                    ... on TableViz {
+                        columns {
+                            column {
+                                id
+                                name
+                                type
+                                aggregationType
+                                dataType
+                            }
+                        }
+                        data(deadline: $deadline, pagination: $dataPaginationParams)
+                    }          
+                }
+            }
+        }
+    }
+`;
+
+    // eslint-disable-next-line no-shadow
+    var OperationType;
+    (function (OperationType) {
+        OperationType["GetChartWithData"] = "GetChartWithData";
+        OperationType["GetTableWithHeadlineData"] = "GetTableWithHeadlineData";
+    })(OperationType || (OperationType = {}));
+    /**
+     * 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
+     */
+    class AnswerService {
+        constructor(session, answer, thoughtSpotHost, selectedPoints) {
+            this.session = session;
+            this.answer = answer;
+            this.thoughtSpotHost = thoughtSpotHost;
+            this.selectedPoints = selectedPoints;
+            this.session = removeTypename(session);
+        }
+        async getSourceDetail() {
+            const sourceId = this.answer.sources[0].header.guid;
+            return getSourceDetail(this.thoughtSpotHost, sourceId);
+        }
+        async removeColumns(columnIds) {
+            return this.executeQuery(removeColumns, {
+                logicalColumnIds: columnIds,
+            });
+        }
+        async addColumns(columnIds) {
+            return this.executeQuery(addColumns, {
+                columns: columnIds.map((colId) => ({ logicalColumnId: colId })),
+            });
+        }
+        async fetchData(offset = 0, size = 1000) {
+            const { answer } = await this.executeQuery(getAnswerData, {
+                deadline: 0,
+                dataPaginationParams: {
+                    isClientPaginated: true,
+                    offset,
+                    size,
+                },
+            });
+            const { columns, data } = answer.visualizations[0];
+            return {
+                columns,
+                data,
+            };
+        }
+        /**
+         *
+         * @param userLocale
+         * @param omitInfo Omit the download Info on top of the CSV
+         * @returns Response
+         */
+        async fetchCSVBlob(userLocale = 'en-us', omitInfo = false) {
+            if (omitInfo) {
+                console.warn('omitInfo not supported yet.');
             }
-            catch (error) {
-                return error;
+            const fetchUrl = `${this.thoughtSpotHost}/prism/download/answer/csv?sessionId=${this.session.sessionId}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data&omitInfo=${omitInfo}`;
+            return fetch(fetchUrl, {
+                credentials: 'include',
+            });
+        }
+        async getUnderlyingDataForPoint(outputColumnNames, selectedPoints) {
+            if (!selectedPoints && !this.selectedPoints) {
+                throw new Error('Needs to be triggered in context of a point');
             }
-        };
-        const fetchData = (offset, batchSize) => {
-            if (operation === OperationType.GetChartWithData) {
-                variable = { batchSize, offset: offset * batchSize };
+            if (!selectedPoints) {
+                selectedPoints = getSelectedPointsForUnderlyingDataQuery(this.selectedPoints);
+            }
+            const sourceDetail = await this.getSourceDetail();
+            const ouputColumnGuids = getGuidsFromColumnNames(sourceDetail, outputColumnNames);
+            const unAggAnswer = await graphqlQuery({
+                query: getUnaggregatedAnswerSession,
+                variables: {
+                    session: this.session,
+                    columns: selectedPoints,
+                },
+                thoughtSpotHost: this.thoughtSpotHost,
+            });
+            const unaggAnswerSession = new AnswerService(unAggAnswer.id, unAggAnswer.answer, this.thoughtSpotHost);
+            const currentColumns = new Set(unAggAnswer.answer.visualizations[0].columns
+                .map((c) => c.column.referencedColumns[0].guid));
+            const columnsToAdd = [...ouputColumnGuids].filter((col) => !currentColumns.has(col));
+            if (columnsToAdd.length) {
+                await unaggAnswerSession.addColumns(columnsToAdd);
+            }
+            const columnsToRemove = [...currentColumns].filter((col) => !ouputColumnGuids.has(col));
+            if (columnsToRemove.length) {
+                await unaggAnswerSession.removeColumns(columnsToRemove);
+            }
+            return unaggAnswerSession;
+        }
+        async executeQuery(query, variables) {
+            const data = await graphqlQuery({
+                query,
+                variables: {
+                    session: this.session,
+                    ...variables,
+                },
+                thoughtSpotHost: this.thoughtSpotHost,
+                isCompositeQuery: false,
+            });
+            this.session = deepMerge(this.session, (data === null || data === void 0 ? void 0 : data.id) || {});
+            return data;
+        }
+        getSession() {
+            return this.session;
+        }
+    }
+    /**
+     *
+     * @param sourceDetail
+     * @param colNames
+     */
+    function getGuidsFromColumnNames(sourceDetail, colNames) {
+        const cols = sourceDetail.columns.reduce((colSet, col) => {
+            colSet[col.name] = col;
+            return colSet;
+        }, {});
+        return new Set(colNames.map((colName) => {
+            const col = cols[colName];
+            return col.id;
+        }));
+    }
+    /**
+     *
+     * @param selectedPoints
+     */
+    function getSelectedPointsForUnderlyingDataQuery(selectedPoints) {
+        const underlyingDataPoint = [];
+        /**
+         *
+         * @param colVal
+         */
+        function addPointFromColVal(colVal) {
+            const dataType = colVal.column.dataType;
+            const id = colVal.column.id;
+            let dataValue;
+            if (dataType === 'DATE') {
+                dataValue = [{
+                        epochRange: {
+                            startEpoch: colVal.value,
+                        },
+                    }];
             }
             else {
-                variable = {
-                    dataPaginationParams: {
-                        isClientPaginated: true,
-                        offset: offset * batchSize,
-                        size: batchSize,
-                    },
-                };
+                dataValue = [{ value: colVal.value }];
             }
-            return fetchQuery({
-                session,
-                ...variable,
+            underlyingDataPoint.push({
+                columnId: colVal.column.id,
+                dataValue,
             });
-        };
-        return {
-            fetchData,
-        };
+        }
+        selectedPoints.forEach((p) => {
+            p.selectedAttributes.forEach(addPointFromColVal);
+        });
+        return underlyingDataPoint;
     }
 
     /**
@@ -10998,16 +11357,12 @@
      * @param thoughtSpotHost
      */
     function processCustomAction(e, thoughtSpotHost) {
-        var _a;
-        if ([OperationType.GetChartWithData, OperationType.GetTableWithHeadlineData].includes((_a = e.data) === null || _a === void 0 ? void 0 : _a.operation)) {
-            const { session, query, operation } = e.data;
-            const answerService = getAnswerServiceInstance(session, query, operation, thoughtSpotHost);
-            return {
-                ...e,
-                answerService,
-            };
-        }
-        return e;
+        const { session, embedAnswerData, contextMenuPoints } = e.data;
+        const answerService = new AnswerService(session, embedAnswerData, thoughtSpotHost, contextMenuPoints === null || contextMenuPoints === void 0 ? void 0 : contextMenuPoints.selectedPoints);
+        return {
+            ...e,
+            answerService,
+        };
     }
     /**
      *
@@ -11152,7 +11507,7 @@
         });
     }
 
-    var name="@thoughtspot/visual-embed-sdk";var version="1.24.0-dev";var description="ThoughtSpot Embed SDK";var module="lib/src/index.js";var main="dist/tsembed.js";var types="lib/src/index.d.ts";var files=["dist/**","lib/**","src/**","cjs/**"];var exports$1={".":{"import":"./lib/src/index.js",require:"./cjs/src/index.js",types:"./lib/src/index.d.ts"},"./react":{"import":"./lib/src/react/all-types-export.js",require:"./cjs/src/react/all-types-export.js",types:"./lib/src/react/all-types-export.d.ts"},"./lib/src/react":{"import":"./lib/src/react/all-types-export.js",require:"./cjs/src/react/all-types-export.js",types:"./lib/src/react/all-types-export.d.ts"}};var typesVersions={"*":{react:["./lib/src/react/all-types-export.d.ts"]}};var scripts={lint:"eslint 'src/**'","lint:fix":"eslint 'src/**/*.*' --fix",tsc:"tsc -p . --incremental false; tsc -p . --incremental false --module commonjs --outDir cjs",start:"gatsby develop","build:gatsby":"npm run clean:gatsby && gatsby build --prefix-paths","build:gatsby:noprefix":"npm run clean:gatsby && gatsby build","serve:gatsby":"gatsby serve","clean:gatsby":"gatsby clean","build-and-publish":"npm run build:gatsby && npm run publish","bundle-dts-file":"dts-bundle --name @thoughtspot/visual-embed-sdk --out visual-embed-sdk.d.ts --main lib/src/index.d.ts","bundle-dts":"dts-bundle --name ../../dist/visual-embed-sdk --main lib/src/index.d.ts --outputAsModuleFolder=true","bundle-dts-react":"dts-bundle --name ../../../dist/visual-embed-sdk-react --main lib/src/react/index.d.ts --outputAsModuleFolder=true","bundle-dts-react-full":"dts-bundle --name ../../../dist/visual-embed-sdk-react-full --main lib/src/react/all-types-export.d.ts --outputAsModuleFolder=true",build:"rollup -c",watch:"rollup -cw","docs-cmd":"node scripts/gatsby-commands.js",docgen:"typedoc --tsconfig tsconfig.json --theme typedoc-theme","test-sdk":"jest -c jest.config.sdk.js --runInBand","test-docs":"jest -c jest.config.docs.js",test:"npm run test-sdk && npm run test-docs",posttest:"cat ./coverage/sdk/lcov.info | coveralls","is-publish-allowed":"node scripts/is-publish-allowed.js",prepublishOnly:"npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build","check-size":"npm run build && size-limit","publish-dev":"npm publish --tag dev","publish-prod":"npm publish --tag latest"};var peerDependencies={react:"> 16.8.0","react-dom":"> 16.8.0"};var dependencies={algoliasearch:"^4.10.5",classnames:"^2.3.1",dompurify:"^2.3.4","eslint-plugin-comment-length":"^0.9.2","eslint-plugin-jsdoc":"^40.1.0",eventemitter3:"^4.0.7","gatsby-plugin-vercel":"^1.0.3","html-react-parser":"^1.4.12",lodash:"^4.17.21","mixpanel-browser":"^2.45.0","ts-deepmerge":"^6.0.2",tslib:"^2.5.3","use-deep-compare-effect":"^1.8.1"};var devDependencies={"@mdx-js/mdx":"^1.6.22","@mdx-js/react":"^1.6.22","@react-icons/all-files":"^4.1.0","@rollup/plugin-commonjs":"^18.0.0","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^11.2.1","@rollup/plugin-replace":"^5.0.2","@size-limit/preset-big-lib":"^8.2.6","@testing-library/dom":"^7.31.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^11.2.7","@testing-library/user-event":"^13.1.8","@types/jest":"^22.2.3","@types/mixpanel-browser":"^2.35.6","@types/react-test-renderer":"^17.0.1","@typescript-eslint/eslint-plugin":"^4.6.0","@typescript-eslint/parser":"^4.6.0",asciidoctor:"^2.2.1","babel-jest":"^26.6.3","babel-preset-gatsby":"^1.10.0","command-line-args":"^5.1.1",coveralls:"^3.1.0","current-git-branch":"^1.1.0","dts-bundle":"^0.7.3",eslint:"^7.12.1","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.15.0","eslint-import-resolver-typescript":"^2.3.0","eslint-plugin-import":"^2.22.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react-hooks":"^4.2.0","fs-extra":"^10.0.0",gatsby:"3.13.1","gatsby-plugin-algolia":"^0.22.2","gatsby-plugin-catch-links":"^3.1.0","gatsby-plugin-env-variables":"^2.1.0","gatsby-plugin-intl":"^0.3.3","gatsby-plugin-manifest":"^3.2.0","gatsby-plugin-output":"^0.1.3","gatsby-plugin-sass":"6.7.0","gatsby-plugin-sitemap":"^4.10.0","gatsby-source-filesystem":"3.1.0","gatsby-transformer-asciidoc":"2.1.0","gatsby-transformer-rehype":"2.0.0","gh-pages":"^3.1.0","highlight.js":"^10.6.0","html-to-text":"^8.0.0","identity-obj-proxy":"^3.0.0","istanbul-merge":"^1.1.1",jest:"^26.6.3","jest-puppeteer":"^4.4.0",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","react-resize-detector":"^6.6.0","react-test-renderer":"^17.0.2","react-use-flexsearch":"^0.1.1",rollup:"2.30.0","rollup-plugin-typescript2":"0.27.3","ts-jest":"^26.5.5","ts-loader":"8.0.4",typedoc:"0.21.6","typedoc-plugin-toc-group":"thoughtspot/typedoc-plugin-toc-group",typescript:"^4.9.4","url-search-params-polyfill":"^8.1.0",util:"^0.12.4"};var author="ThoughtSpot";var email="support@thoughtspot.com";var license="ThoughtSpot Development Tools End User License Agreement";var directories={lib:"lib"};var repository={type:"git",url:"git+https://github.com/thoughtspot/visual-embed-sdk.git"};var publishConfig={registry:"https://registry.npmjs.org"};var keywords=["thoughtspot","everywhere","embed","sdk","analytics"];var bugs={url:"https://github.com/thoughtspot/visual-embed-sdk/issues"};var homepage="https://github.com/thoughtspot/visual-embed-sdk#readme";var globals={window:{}};var pkgInfo = {name:name,version:version,description:description,module:module,main:main,types:types,files:files,exports:exports$1,typesVersions:typesVersions,"size-limit":[{path:"dist/tsembed.js",limit:"40 kB"}],scripts:scripts,peerDependencies:peerDependencies,dependencies:dependencies,devDependencies:devDependencies,author:author,email:email,license:license,directories:directories,repository:repository,publishConfig:publishConfig,keywords:keywords,bugs:bugs,homepage:homepage,globals:globals};
+    var name="@thoughtspot/visual-embed-sdk";var version="1.24.0-preRender.1";var description="ThoughtSpot Embed SDK";var module="lib/src/index.js";var main="dist/tsembed.js";var types="lib/src/index.d.ts";var files=["dist/**","lib/**","src/**","cjs/**"];var exports$1={".":{"import":"./lib/src/index.js",require:"./cjs/src/index.js",types:"./lib/src/index.d.ts"},"./react":{"import":"./lib/src/react/all-types-export.js",require:"./cjs/src/react/all-types-export.js",types:"./lib/src/react/all-types-export.d.ts"},"./lib/src/react":{"import":"./lib/src/react/all-types-export.js",require:"./cjs/src/react/all-types-export.js",types:"./lib/src/react/all-types-export.d.ts"}};var typesVersions={"*":{react:["./lib/src/react/all-types-export.d.ts"]}};var scripts={lint:"eslint 'src/**'","lint:fix":"eslint 'src/**/*.*' --fix",tsc:"tsc -p . --incremental false; tsc -p . --incremental false --module commonjs --outDir cjs",start:"gatsby develop","build:gatsby":"npm run clean:gatsby && gatsby build --prefix-paths","build:gatsby:noprefix":"npm run clean:gatsby && gatsby build","serve:gatsby":"gatsby serve","clean:gatsby":"gatsby clean","build-and-publish":"npm run build:gatsby && npm run publish","bundle-dts-file":"dts-bundle --name @thoughtspot/visual-embed-sdk --out visual-embed-sdk.d.ts --main lib/src/index.d.ts","bundle-dts":"dts-bundle --name ../../dist/visual-embed-sdk --main lib/src/index.d.ts --outputAsModuleFolder=true","bundle-dts-react":"dts-bundle --name ../../../dist/visual-embed-sdk-react --main lib/src/react/index.d.ts --outputAsModuleFolder=true","bundle-dts-react-full":"dts-bundle --name ../../../dist/visual-embed-sdk-react-full --main lib/src/react/all-types-export.d.ts --outputAsModuleFolder=true",build:"rollup -c",watch:"rollup -cw","docs-cmd":"node scripts/gatsby-commands.js",docgen:"typedoc --tsconfig tsconfig.json --theme typedoc-theme","test-sdk":"jest -c jest.config.sdk.js --runInBand","test-docs":"jest -c jest.config.docs.js",test:"npm run test-sdk && npm run test-docs",posttest:"cat ./coverage/sdk/lcov.info | coveralls","is-publish-allowed":"node scripts/is-publish-allowed.js",prepublishOnly:"npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build","check-size":"npm run build && size-limit","publish-dev":"npm publish --tag dev","publish-prod":"npm publish --tag latest"};var peerDependencies={react:"> 16.8.0","react-dom":"> 16.8.0"};var dependencies={algoliasearch:"^4.10.5",classnames:"^2.3.1",dompurify:"^2.3.4","eslint-plugin-comment-length":"^0.9.2","eslint-plugin-jsdoc":"^40.1.0",eventemitter3:"^4.0.7","gatsby-plugin-vercel":"^1.0.3","html-react-parser":"^1.4.12",lodash:"^4.17.21","mixpanel-browser":"^2.45.0","ts-deepmerge":"^6.0.2",tslib:"^2.5.3","use-deep-compare-effect":"^1.8.1"};var devDependencies={"@mdx-js/mdx":"^1.6.22","@mdx-js/react":"^1.6.22","@react-icons/all-files":"^4.1.0","@rollup/plugin-commonjs":"^18.0.0","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^11.2.1","@rollup/plugin-replace":"^5.0.2","@size-limit/preset-big-lib":"^8.2.6","@testing-library/dom":"^7.31.0","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^11.2.7","@testing-library/user-event":"^13.1.8","@types/jest":"^22.2.3","@types/mixpanel-browser":"^2.35.6","@types/react-test-renderer":"^17.0.1","@typescript-eslint/eslint-plugin":"^4.6.0","@typescript-eslint/parser":"^4.6.0",asciidoctor:"^2.2.1","babel-jest":"^26.6.3","babel-preset-gatsby":"^1.10.0","command-line-args":"^5.1.1",coveralls:"^3.1.0","current-git-branch":"^1.1.0","dts-bundle":"^0.7.3",eslint:"^7.12.1","eslint-config-airbnb-base":"^14.2.0","eslint-config-prettier":"^6.15.0","eslint-import-resolver-typescript":"^2.3.0","eslint-plugin-import":"^2.22.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react-hooks":"^4.2.0","fs-extra":"^10.0.0",gatsby:"3.13.1","gatsby-plugin-algolia":"^0.22.2","gatsby-plugin-catch-links":"^3.1.0","gatsby-plugin-env-variables":"^2.1.0","gatsby-plugin-intl":"^0.3.3","gatsby-plugin-manifest":"^3.2.0","gatsby-plugin-output":"^0.1.3","gatsby-plugin-sass":"6.7.0","gatsby-plugin-sitemap":"^4.10.0","gatsby-source-filesystem":"3.1.0","gatsby-transformer-asciidoc":"2.1.0","gatsby-transformer-rehype":"2.0.0","gh-pages":"^3.1.0","highlight.js":"^10.6.0","html-to-text":"^8.0.0","identity-obj-proxy":"^3.0.0","istanbul-merge":"^1.1.1",jest:"^26.6.3","jest-fetch-mock":"^3.0.3",jsdom:"^17.0.0","node-sass":"^8.0.0",prettier:"2.1.2",react:"^16.14.0","react-dom":"^16.14.0","react-resizable":"^1.11.0","react-resize-detector":"^6.6.0","react-test-renderer":"^17.0.2","react-use-flexsearch":"^0.1.1",rollup:"2.30.0","rollup-plugin-typescript2":"0.27.3","ts-jest":"^26.5.5","ts-loader":"8.0.4",typedoc:"0.21.6","typedoc-plugin-toc-group":"thoughtspot/typedoc-plugin-toc-group",typescript:"^4.9.4","url-search-params-polyfill":"^8.1.0",util:"^0.12.4"};var author="ThoughtSpot";var email="support@thoughtspot.com";var license="ThoughtSpot Development Tools End User License Agreement";var directories={lib:"lib"};var repository={type:"git",url:"git+https://github.com/thoughtspot/visual-embed-sdk.git"};var publishConfig={registry:"https://registry.npmjs.org"};var keywords=["thoughtspot","everywhere","embed","sdk","analytics"];var bugs={url:"https://github.com/thoughtspot/visual-embed-sdk/issues"};var homepage="https://github.com/thoughtspot/visual-embed-sdk#readme";var globals={window:{}};var pkgInfo = {name:name,version:version,description:description,module:module,main:main,types:types,files:files,exports:exports$1,typesVersions:typesVersions,"size-limit":[{path:"dist/tsembed.js",limit:"40 kB"}],scripts:scripts,peerDependencies:peerDependencies,dependencies:dependencies,devDependencies:devDependencies,author:author,email:email,license:license,directories:directories,repository:repository,publishConfig:publishConfig,keywords:keywords,bugs:bugs,homepage:homepage,globals:globals};
 
     /**
      * Copyright (c) 2022
@@ -11184,6 +11539,7 @@
     class TsEmbed {
         constructor(domSelector, viewConfig) {
             this.isAppInitialized = false;
+            this.embedComponentType = 'TsEmbed';
             /**
              * Should we encode URL Query Params using base64 encoding which thoughtspot
              * will generate for embedding. This provides additional security to
@@ -11193,6 +11549,7 @@
              */
             this.shouldEncodeUrlQueryParams = false;
             this.defaultHiddenActions = [exports.Action.ReportError];
+            this.subscribedListeners = {};
             /**
              * Send Custom style as part of payload of APP_INIT
              *
@@ -11215,6 +11572,7 @@
                             ? getRuntimeFilters(this.viewConfig.runtimeFilters)
                             : null,
                         hiddenHomepageModules: this.viewConfig.hiddenHomepageModules || [],
+                        reorderedHomepageModules: this.viewConfig.reorderedHomepageModules || [],
                         hostConfig: this.embedConfig.hostConfig,
                         hiddenHomeLeftNavItems: ((_a = this.viewConfig) === null || _a === void 0 ? void 0 : _a.hiddenHomeLeftNavItems)
                             ? (_b = this.viewConfig) === null || _b === void 0 ? void 0 : _b.hiddenHomeLeftNavItems
@@ -11264,6 +11622,7 @@
             this.registerAppInit();
             uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
                 ...viewConfig,
+                embedComponentType: this.embedComponentType,
             });
         }
         /**
@@ -11332,23 +11691,37 @@
          * and executes the registered callbacks accordingly.
          */
         subscribeToEvents() {
-            window.addEventListener('message', (event) => {
+            this.unsubscribeToEvents();
+            const messageEventListener = (event) => {
                 const eventType = this.getEventType(event);
                 const eventPort = this.getEventPort(event);
                 const eventData = this.formatEventData(event, eventType);
                 if (event.source === this.iFrame.contentWindow) {
                     this.executeCallbacks(eventType, processEventData(eventType, eventData, this.thoughtSpotHost, this.el), eventPort);
                 }
-            });
-            window.addEventListener('online', (e) => {
+            };
+            window.addEventListener('message', messageEventListener);
+            const onlineEventListener = (e) => {
                 this.trigger(exports.HostEvent.Reload);
-            });
-            window.addEventListener('offline', (e) => {
+            };
+            window.addEventListener('online', onlineEventListener);
+            const offlineEventListener = (e) => {
                 const offlineWarning = 'Network not Detected. Embed is offline. Please reconnect and refresh';
                 this.executeCallbacks(exports.EmbedEvent.Error, {
                     offlineWarning,
                 });
                 console.warn(offlineWarning);
+            };
+            window.addEventListener('offline', offlineEventListener);
+            this.subscribedListeners = {
+                message: messageEventListener,
+                online: onlineEventListener,
+                offline: offlineEventListener,
+            };
+        }
+        unsubscribeToEvents() {
+            Object.keys(this.subscribedListeners).forEach((key) => {
+                window.removeEventListener(key, this.subscribedListeners[key]);
             });
         }
         /**
@@ -11520,14 +11893,22 @@
             iFrame.name = 'ThoughtSpot Embedded Analytics';
             return iFrame;
         }
+        handleInsertionIntoDOM(child, showPreRenderByDefault = false) {
+            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.
          */
-        async renderIFrame(url) {
+        async renderIFrame(url, showPreRenderByDefault = false) {
             if (this.isError) {
                 return null;
             }
@@ -11547,12 +11928,7 @@
                 uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
                 return (_a = getAuthPromise()) === null || _a === void 0 ? void 0 : _a.then((isLoggedIn) => {
                     if (!isLoggedIn) {
-                        if (this.isPreRendered) {
-                            this.insertIntoDOMForPreRender(this.embedConfig.loginFailedMessage);
-                        }
-                        else {
-                            this.insertIntoDOM(this.embedConfig.loginFailedMessage);
-                        }
+                        this.handleInsertionIntoDOM(this.embedConfig.loginFailedMessage, showPreRenderByDefault);
                         return;
                     }
                     this.iFrame = this.iFrame || this.createIframeEl(url);
@@ -11574,12 +11950,7 @@
                     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) => {
@@ -11592,12 +11963,7 @@
                     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);
                 });
             });
@@ -11611,40 +11977,46 @@
         }
         createPreRenderWrapper(child) {
             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;
         }
-        isPreRenderAvailable() {
+        connectPreRendered() {
             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;
+            }
+            return this.isPreRenderAvailable();
         }
-        insertIntoDOMForPreRender(child) {
+        isPreRenderAvailable() {
+            return this.isPreRendered;
+        }
+        insertIntoDOMForPreRender(child, showPreRenderByDefault = false) {
             let childNode;
             if (typeof child === 'string') {
                 const divChildNode = document.createElement('div');
@@ -11655,8 +12027,13 @@
                 childNode = child;
             }
             const preRenderWrapper = this.createPreRenderWrapper(childNode);
+            if (showPreRenderByDefault) {
+                this.showPreRender();
+            }
+            else {
+                this.hidePreRender();
+            }
             document.body.appendChild(preRenderWrapper);
-            this.hidePreRender();
         }
         hidePreRender() {
             if (!this.isPreRenderAvailable()) {
@@ -11673,28 +12050,33 @@
                 left: '0',
             });
             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();
         }
         showPreRender() {
             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();
         }
         syncPreRenderStyle() {
             if (!this.el) {
@@ -11921,8 +12303,10 @@
         }
         /**
          * Creates the preRender shell
+         *
+         * @param showPreRenderByDefault
          */
-        preRender() {
+        preRender(showPreRenderByDefault = false) {
             this.isPreRendered = true;
             return this;
         }
@@ -11961,6 +12345,7 @@
             var _a;
             try {
                 (_a = this.insertedDomEl) === null || _a === void 0 ? void 0 : _a.parentNode.removeChild(this.insertedDomEl);
+                this.unsubscribeToEvents();
             }
             catch (e) {
                 console.log('Error destroying TS Embed', e);
@@ -11998,9 +12383,10 @@
          * Render the app in an iframe and set up event handlers
          *
          * @param iframeSrc
+         * @param showPreRenderByDefault - if true the preRender will be shown by default
          */
-        renderV1Embed(iframeSrc) {
-            return this.renderIFrame(iframeSrc);
+        renderV1Embed(iframeSrc, showPreRenderByDefault = false) {
+            return this.renderIFrame(iframeSrc, showPreRenderByDefault);
         }
         getRootIframeSrc() {
             const queryParams = this.getEmbedParams();
@@ -12087,6 +12473,7 @@
         constructor(domSelector, viewConfig) {
             super(domSelector, viewConfig);
             this.defaultHeight = '100%';
+            this.embedComponentType = 'AppEmbed';
             /**
              * Set the iframe height as per the computed height received
              * from the ThoughtSpot app.
@@ -12237,11 +12624,17 @@
          *
          * @param renderOptions An object containing the page ID
          * to be embedded.
+         * @param showPreRenderByDefault
          */
-        render() {
+        render(showPreRenderByDefault = false) {
             super.render();
             const src = this.getIFrameSrc();
-            this.renderV1Embed(src);
+            this.renderV1Embed(src, showPreRenderByDefault);
+            return this;
+        }
+        preRender(showPreRenderByDefault = false) {
+            super.preRender(showPreRenderByDefault);
+            this.render(showPreRenderByDefault);
             return this;
         }
     }
@@ -12276,6 +12669,7 @@
         constructor(domSelector, viewConfig) {
             super(domSelector, viewConfig);
             this.defaultHeight = 500;
+            this.embedComponentType = 'LiveboardEmbed';
             /**
              * Set the iframe height as per the computed height received
              * from the ThoughtSpot app.
@@ -12397,15 +12791,15 @@
          * @param renderOptions An object specifying the Liveboard ID,
          * visualization ID and the runtime filters.
          */
-        render() {
+        render(showPreRenderByDefault = false) {
             super.render();
             const src = this.getIFrameSrc();
-            this.renderV1Embed(src);
+            this.renderV1Embed(src, showPreRenderByDefault);
             return this;
         }
-        preRender() {
-            super.preRender();
-            this.render();
+        preRender(showPreRenderByDefault = false) {
+            super.preRender(showPreRenderByDefault);
+            this.render(showPreRenderByDefault);
             return this;
         }
         navigateToLiveboard(liveboardId, vizId, activeTabId) {
@@ -12450,6 +12844,7 @@
     class SearchEmbed extends TsEmbed {
         constructor(domSelector, viewConfig) {
             super(domSelector);
+            this.embedComponentType = 'SearchEmbed';
             this.viewConfig = viewConfig;
         }
         /**
@@ -12530,12 +12925,14 @@
         }
         /**
          * Render the embedded ThoughtSpot search
+         *
+         * @param showPreRenderByDefault
          */
-        render() {
+        render(showPreRenderByDefault = false) {
             super.render();
             const { answerId } = this.viewConfig;
             const src = this.getIFrameSrc(answerId);
-            this.renderIFrame(src);
+            this.renderIFrame(src, showPreRenderByDefault);
             getAuthPromise().then(() => {
                 if (checkReleaseVersionInBeta(getReleaseVersion(), getEmbedConfig().suppressSearchEmbedBetaWarning)) {
                     alert(ERROR_MESSAGE.SEARCHEMBED_BETA_WRANING_MESSAGE);
@@ -12543,6 +12940,11 @@
             });
             return this;
         }
+        preRender(showPreRenderByDefault = false) {
+            super.preRender(showPreRenderByDefault);
+            this.render(showPreRenderByDefault);
+            return this;
+        }
     }
 
     /**
@@ -12554,6 +12956,7 @@
     class SearchBarEmbed extends TsEmbed {
         constructor(domSelector, viewConfig) {
             super(domSelector);
+            this.embedComponentType = 'SearchBarEmbed';
             this.viewConfig = viewConfig;
         }
         /**
@@ -12632,6 +13035,7 @@
         // eslint-disable-next-line no-useless-constructor
         constructor(domSelector, viewConfig) {
             super(domSelector, viewConfig);
+            this.embedComponentType = 'SageEmbed';
         }
         /**
          * Constructs a map of parameters to be passed on to the
@@ -12683,16 +13087,23 @@
         /**
          * Render the embedded ThoughtSpot Sage
          *
+         * @param showPreRenderByDefault
          * @returns {SageEmbed} Eureka/Sage embed
          */
-        render() {
+        render(showPreRenderByDefault = false) {
             super.render();
             const src = this.getIFrameSrc();
-            this.renderV1Embed(src);
+            this.renderV1Embed(src, showPreRenderByDefault);
+            return this;
+        }
+        preRender(showPreRenderByDefault = false) {
+            super.preRender(showPreRenderByDefault);
+            this.render(showPreRenderByDefault);
             return this;
         }
     }
 
+    exports.AnswerService = AnswerService;
     exports.AppEmbed = AppEmbed;
     exports.LiveboardEmbed = LiveboardEmbed;
     exports.PinboardEmbed = PinboardEmbed;