@thoughtspot/visual-embed-sdk 1.20.0 → 1.20.2

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

@@ -17,9 +17,9 @@ declare module '@thoughtspot/visual-embed-sdk' {
     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';
-    import { AuthFailureType, AuthStatus, AuthEvent, getSessionInfo } from '@thoughtspot/visual-embed-sdk/auth';
-    import { AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, EmbedConfig, PrefetchFeatures } from '@thoughtspot/visual-embed-sdk/types';
-    export { init, logout, prefetch, getEmbedConfig as getInitConfig, getSessionInfo, SearchEmbed, SearchBarEmbed, PinboardEmbed, LiveboardEmbed, AppEmbed, AuthFailureType, AuthStatus, AuthEvent, Page, AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, EmbedConfig, SearchViewConfig, SearchBarViewConfig, LiveboardViewConfig, AppViewConfig, PrefetchFeatures, };
+    import { AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter, getSessionInfo } from '@thoughtspot/visual-embed-sdk/auth';
+    import { AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, EmbedConfig, PrefetchFeatures, FrameParams, DOMSelector, MessageOptions, MessageCallback, MessagePayload, CustomisationsInterface, CustomStyles, customCssInterface } from '@thoughtspot/visual-embed-sdk/types';
+    export { init, logout, prefetch, getEmbedConfig as getInitConfig, getSessionInfo, SearchEmbed, SearchBarEmbed, PinboardEmbed, LiveboardEmbed, AppEmbed, AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter, Page, AuthType, RuntimeFilter, RuntimeFilterOp, EmbedEvent, HostEvent, DataSourceVisualMode, Action, EmbedConfig, SearchViewConfig, SearchBarViewConfig, LiveboardViewConfig, AppViewConfig, PrefetchFeatures, FrameParams, DOMSelector, MessageOptions, MessageCallback, MessagePayload, CustomisationsInterface, CustomStyles, customCssInterface, };
 }
 
 declare module '@thoughtspot/visual-embed-sdk/embed/app' {
@@ -70,7 +70,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
     }
     /**
         * The view configuration for full app embedding.
-        * @Category App Embed
+        * @group Embed components
         */
     export interface AppViewConfig extends ViewConfig {
             /**
@@ -118,7 +118,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
     }
     /**
         * Embeds full ThoughtSpot experience in a host application.
-        * @Category App Embed
+        * @group Embed components
         */
     export class AppEmbed extends V1Embed {
             protected viewConfig: AppViewConfig;
@@ -143,18 +143,16 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
 }
 
 declare module '@thoughtspot/visual-embed-sdk/embed/base' {
+    import { EmbedConfig, PrefetchFeatures } from '@thoughtspot/visual-embed-sdk/types';
+    import { notifyAuthFailure, notifyAuthSDKSuccess, notifyAuthSuccess, notifyLogout, AuthEventEmitter } from '@thoughtspot/visual-embed-sdk/auth';
+    export let authPromise: Promise<boolean>;
     /**
-        * Copyright (c) 2022
-        *
-        * Base classes
+        * Gets the configuration embed was initialized with.
         *
-        * @summary Base classes
-        * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
+        * @returns {@link EmbedConfig} The configuration embed was initialized with.
+        * @version SDK: 1.19.0 | ThoughtSpot: *
+        * @group Global methods
         */
-    import EventEmitter from 'eventemitter3';
-    import { EmbedConfig, PrefetchFeatures } from '@thoughtspot/visual-embed-sdk/types';
-    import { notifyAuthFailure, notifyAuthSDKSuccess, notifyAuthSuccess, notifyLogout } from '@thoughtspot/visual-embed-sdk/auth';
-    export let authPromise: Promise<boolean>;
     export const getEmbedConfig: () => EmbedConfig;
     export const getAuthPromise: () => Promise<boolean>;
     export { notifyAuthFailure, notifyAuthSDKSuccess, notifyAuthSuccess, notifyLogout, };
@@ -167,19 +165,31 @@ declare module '@thoughtspot/visual-embed-sdk/embed/base' {
         * @param url The URL provided for prefetch
         * @param prefetchFeatures Specify features which needs to be prefetched.
         * @version SDK: 1.4.0 | ThoughtSpot: ts7.sep.cl, 7.2.1
+        * @group Global methods
         */
     export const prefetch: (url?: string, prefetchFeatures?: PrefetchFeatures[]) => void;
     /**
         * Initializes the Visual Embed SDK globally and perform
-        * authentication if applicable.
+        * authentication if applicable. This function needs to be called before any ThoughtSpot
+        * component like liveboard etc can be embedded. But need not wait for AuthEvent.SUCCESS
+        * to actually embed. That is handled internally.
         * @param embedConfig The configuration object containing ThoughtSpot host,
         * authentication mechanism and so on.
-        * example: authStatus = init(config);
-        * authStatus.on(AuthStatus.FAILURE, (reason) => { // do something here });
-        * @returns event emitter which emits events on authentication success, failure and logout. See {@link AuthStatus}
+        *
+        * @example
+        * ```js
+        *   const authStatus = init({
+        *     thoughtSpotHost: 'https://my.thoughtspot.cloud',
+        *     authType: AuthType.None,
+        *   });
+        *   authStatus.on(AuthStatus.FAILURE, (reason) => { // do something here });
+        * ```
+        *
+        * @returns {@link AuthEventEmitter} event emitter which emits events on authentication success, failure and logout. See {@link AuthStatus}
         * @version SDK: 1.0.0 | ThoughtSpot ts7.april.cl, 7.2.1
+        * @group Authentication / Init
         */
-    export const init: (embedConfig: EmbedConfig) => EventEmitter;
+    export const init: (embedConfig: EmbedConfig) => AuthEventEmitter;
     export function disableAutoLogin(): void;
     /**
         * Logs out from ThoughtSpot. This also sets the autoLogin flag to false, to prevent
@@ -191,6 +201,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/base' {
         * @param doNotDisableAutoLogin This flag when passed will not disable autoLogin
         * @returns Promise which resolves when logout completes.
         * @version SDK: 1.10.1 | ThoughtSpot: 8.2.0.cl, 8.4.1-sw
+        * @group Global methods
         */
     export const logout: (doNotDisableAutoLogin?: boolean) => Promise<boolean>;
     /**
@@ -216,7 +227,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/liveboard' {
     import { V1Embed } from '@thoughtspot/visual-embed-sdk/embed/ts-embed';
     /**
         * The configuration for the embedded Liveboard or visualization page view.
-        * @Category Liveboards and Charts
+        * @group Embed components
         */
     export interface LiveboardViewConfig extends ViewConfig {
             /**
@@ -282,8 +293,18 @@ declare module '@thoughtspot/visual-embed-sdk/embed/liveboard' {
             activeTabId?: string;
     }
     /**
-        * Embed a ThoughtSpot Liveboard or visualization
-        * @Category Liveboards and Charts
+        * Embed a ThoughtSpot Liveboard or a Thoughtspot visualization. When rendered it already
+        * waits for the authentication to complete, so no need to wait for AuthStatus.SUCCESS.
+        * @example
+        * ```js
+        * import { .. } from '@thoughtspot/visual-embed-sdk';
+        * init({ ... });
+        * const embed = new LiveboardEmbed("#container", {
+        *   liveboardId: <your-id-here>,
+        * // .. other params here.
+        * })
+        * ```
+        * @group Embed components
         */
     export class LiveboardEmbed extends V1Embed {
             protected viewConfig: LiveboardViewConfig;
@@ -337,7 +358,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/search' {
     /**
         * The configuration attributes for the embedded search view.
         *
-        * @Category Search Embed
+        * @group Embed components
         */
     export interface SearchViewConfig extends ViewConfig {
             /**
@@ -404,7 +425,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/search' {
     /**
         * Embed ThoughtSpot search
         *
-        * @Category Search Embed
+        * @group Embed components
         */
     export class SearchEmbed extends TsEmbed {
             /**
@@ -423,6 +444,9 @@ declare module '@thoughtspot/visual-embed-sdk/embed/search-bar' {
     import { ViewConfig } from '@thoughtspot/visual-embed-sdk/types';
     import { TsEmbed } from '@thoughtspot/visual-embed-sdk/embed/ts-embed';
     import { SearchOptions } from '@thoughtspot/visual-embed-sdk/embed/search';
+    /**
+        * @group Embed components
+        */
     export interface SearchBarViewConfig extends Omit<ViewConfig, 'runtimeFilters' | 'showAlerts'> {
             /**
                 * The array of data source GUIDs to set on load.
@@ -443,8 +467,8 @@ declare module '@thoughtspot/visual-embed-sdk/embed/search-bar' {
     /**
         * Embed ThoughtSpot search bar
         *
-        * @Category Search Embed
         * @version: SDK: 1.18.0 | ThoughtSpot: 8.10.0.cl, 9.0.1-sw
+        * @group Embed components
         */
     export class SearchBarEmbed extends TsEmbed {
             /**
@@ -474,12 +498,21 @@ declare module '@thoughtspot/visual-embed-sdk/auth' {
             BASIC_LOGIN: string;
             LOGOUT: string;
     };
+    /**
+        * Enum for auth failure types. This is the parameter passed to the listner
+        * of {@link AuthStatus.FAILURE}.
+        * @group Authentication / Init
+        */
     export enum AuthFailureType {
             SDK = "SDK",
             NO_COOKIE_ACCESS = "NO_COOKIE_ACCESS",
             EXPIRY = "EXPIRY",
             OTHER = "OTHER"
     }
+    /**
+        * Enum for auth status emitted by the emitter returned from {@link init}.
+        * @group Authentication / Init
+        */
     export enum AuthStatus {
             /**
                 * Emits when the SDK fails to authenticate
@@ -505,14 +538,38 @@ declare module '@thoughtspot/visual-embed-sdk/auth' {
                 */
             WAITING_FOR_POPUP = "WAITING_FOR_POPUP"
     }
+    /**
+        * Event emitter returned from {@link init}.
+        * @group Authentication / Init
+        */
+    export interface AuthEventEmitter {
+            /**
+                * Registed a listener on Auth failure.
+                * @param event
+                * @param listener
+                */
+            on(event: AuthStatus.FAILURE, listener: (failureType: AuthFailureType) => void): this;
+            on(event: AuthStatus.SDK_SUCCESS | AuthStatus.LOGOUT | AuthStatus.WAITING_FOR_POPUP, listener: () => void): this;
+            on(event: AuthStatus.SUCCESS, listener: (sessionInfo: any) => void): this;
+            /**
+                * Trigger an event on the emitter returned from init.
+                * @param {@link AuthEvent}
+                */
+            emit(event: AuthEvent): void;
+    }
+    /**
+        * Events which can be triggered on the emitter returned from {@link init}.
+        * @group Authentication / Init
+        */
     export enum AuthEvent {
             /**
-                * Manually trigger the SSO popup.
+                * Manually trigger the SSO popup. This is useful with
+                * authStatus: SAMLRedirect/OIDCRedicre and inPopup: true
                 */
             TRIGGER_SSO_POPUP = "TRIGGER_SSO_POPUP"
     }
-    export function getAuthEE(): EventEmitter;
-    export function setAuthEE(eventEmitter: EventEmitter): void;
+    export function getAuthEE(): EventEmitter<AuthStatus | AuthEvent>;
+    export function setAuthEE(eventEmitter: EventEmitter<AuthStatus | AuthEvent>): void;
     export function notifyAuthSDKSuccess(): void;
     export function notifyAuthSuccess(): void;
     export function notifyAuthFailure(failureType: AuthFailureType): void;
@@ -522,8 +579,9 @@ declare module '@thoughtspot/visual-embed-sdk/auth' {
         */
     export function getReleaseVersion(): string;
     /**
-        * Return a promise that resolves with the session info when authentication is
+        * Return a promise that resolves with the session information when authentication is
         * successful. And info is available.
+        * @group Global methods
         */
     export function getSessionInfo(): Promise<any>;
     export function initSession(sessionDetails: any): void;
@@ -565,6 +623,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
     /**
         * The authentication mechanism for allowing access to the
         * the embedded app
+        * @group Authentication / Init
         */
     export enum AuthType {
             /**
@@ -591,7 +650,47 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             SAML = "SSO_SAML",
             /**
                 * SSO using SAML
-                * Will make the host application redirect to the SAML Idp.
+                * Will make the host application redirect to the SAML Idp. Use this
+                * when the idp does not allow itself to be embedded.
+                *
+                * This redirects the host application to the SAML Idp. The host application
+                * will be redirected back to the ThoughtSpot app after authentication.
+                * @example
+                * ```js
+                * init({
+                *   // ...
+                *   authType: AuthType.SAMLRedirect,
+                *  });
+                * ```
+                *
+                * This opens the SAML Idp in a popup window. The popup is triggered
+                * when the user clicks the trigger button. The popup window will be
+                * closed automatically after authentication.
+                * @example
+                * ```js
+                * init({
+                *   // ...
+                *   authType: AuthType.SAMLRedirect,
+                *   authTriggerText: 'Login with SAML',
+                *   authTriggerContainer: '#embed-container',
+                *   inPopup: true,
+                * });
+                * ```
+                *
+                * Can also use event to trigger the popup flow. Works the same
+                * as above example.
+                * @example
+                * ```js
+                * const authEE = init({
+                *  // ...
+                *  authType: AuthType.SAMLRedirect,
+                *  inPopup: true,
+                * });
+                *
+                * someButtonOnYourPage.addEventListener('click', () => {
+                *  authEE.emit(AuthEvent.TRIGGER_SSO_POPUP);
+                * });
+                * ```
                 */
             SAMLRedirect = "SSO_SAML",
             /**
@@ -603,6 +702,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             /**
                 * SSO using OIDC
                 * Will make the host application redirect to the OIDC Idp.
+                * See code samples in {@link SAMLRedirect}.
                 */
             OIDCRedirect = "SSO_OIDC",
             /**
@@ -615,6 +715,18 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * Trusted authentication server, Use your own authentication server
                 * which returns a bearer token, generated using the secret_key obtained from
                 * ThoughtSpot.
+                *
+                * @example
+                * ```js
+                * init({
+                *  // ...
+                *  authType: AuthType.TrustedAuthToken,
+                *  getAuthToken: () => {
+                *    return fetch('https://my-backend.app/ts-token')
+                *      .then((response) => response.json())
+                *      .then((data) => data.token);
+                *  }
+                * ```
                 */
             TrustedAuthToken = "AuthServer",
             /**
@@ -633,7 +745,10 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             Basic = "Basic"
     }
     export type DOMSelector = string | HTMLElement;
-    interface customCssInterface {
+    /**
+        * inline customCSS within the {@link CustomisationsInterface}.
+        */
+    export interface customCssInterface {
             variables?: {
                     [variableName: string]: string;
             };
@@ -643,10 +758,38 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                     };
             };
     }
-    interface CustomStyles {
+    /**
+        * Styles within the {@link CustomisationsInterface}.
+        */
+    export interface CustomStyles {
             customCSSUrl?: string;
             customCSS?: customCssInterface;
     }
+    /**
+        * Configuration to define the customization on the Embedded
+        * Thoughtspot components.
+        *
+        * @example
+        * ```js
+        *  init({
+        *    // ...
+        *    customizations: {
+        *     style: {
+        *       customCSS: {
+        *         variables: {},
+        *         rules_UNSTABLE: {}
+        *       }
+        *     },
+        *     content: {
+        *      strings: {
+        *        'LIVEBOARDS': 'Dashboards'
+        *      }
+        *     },
+        *     iconSpriteUrl: 'https://my-custom-icon-sprite.svg'
+        *    }
+        *  })
+        * ```
+        */
     export interface CustomisationsInterface {
             style?: CustomStyles;
             content?: {
@@ -660,6 +803,8 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
         * It includes the ThoughtSpot hostname or IP address,
         * the type of authentication, and the authentication endpoint
         * if a trusted authentication server is used.
+        *
+        * @group Authentication / Init
         */
     export interface EmbedConfig {
             /**
@@ -820,6 +965,8 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
     }
     /**
         * Embedded iFrame configuration
+        *
+        * @group Embed components
         */
     export interface FrameParams {
             /**
@@ -830,6 +977,12 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * The height of the iFrame (unit is pixels if numeric).
                 */
             height?: number | string;
+            /**
+                * Set to 'lazy' to enable lazy loading of the embedded TS frame.
+                * This will defer loading of the frame until it comes into the
+                * viewport. This is useful for performance optimization.
+                */
+            loading?: 'lazy' | 'eager' | 'auto';
             /**
                 * This parameters will be passed on the iframe
                 * as is.
@@ -933,6 +1086,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
     }
     /**
         * MessagePayload: Embed event payload: message type, data and status (start/end)
+        * @group Events
         */
     export type MessagePayload = {
             type: string;
@@ -941,12 +1095,14 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
     };
     /**
         * MessageOptions: By Providing options, getting specific event start / end based on option
+        * @group Events
         */
     export type MessageOptions = {
             start?: boolean;
     };
     /**
         * MessageCallback: Embed event message callback
+        * @group Events
         */
     export type MessageCallback = (payload: MessagePayload, responder?: (data: any) => void) => void;
     /**
@@ -1042,6 +1198,10 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
     }
     /**
         * Event types emitted by the embedded ThoughtSpot application.
+        *
+        * To add an event listener use the corresponding
+        * {@link LiveboardEmbed.on} or {@link AppEmbed.on} or {@link SearchEmbed.on} method.
+        * @group Events
         */
     export enum EmbedEvent {
             /**
@@ -1206,6 +1366,12 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1-sw
                 */
             Download = "download",
+            /**
+                * Emitted when the download action is triggered on an answer
+                *
+                * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.4.0-sw
+                */
+            DownloadAsPng = "downloadAsPng",
             /**
                 * Emitted when the Download as PDF action is triggered on an answer
                 * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1-sw
@@ -1368,6 +1534,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
         *
         * To trigger an event use the corresponding
         * {@link LiveboardEmbed.trigger} or {@link AppEmbed.trigger} or {@link SearchEmbed.trigger} method.
+        * @group Events
         */
     export enum HostEvent {
             /**
@@ -1378,11 +1545,13 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * @param - searchQuery - The search query
                 * @param - execute - execute the existing / updated query
                 * @example
+                * ```js
                 * searchEmbed.trigger(HostEvent.Search, {
-                * searchQuery: "[sales] by [item type],
-                * "dataSourceIds: ["cd252e5c-b552-49a8-821d-3eadaa049cca"]
-                * "execute": true
+                *   searchQuery: "[sales] by [item type],
+                *   dataSourceIds: ["cd252e5c-b552-49a8-821d-3eadaa049cca"]
+                *   execute: true
                 * })
+                * ```
                 */
             Search = "search",
             /**
@@ -1391,10 +1560,14 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 *              eg. { selectedPoints: []}
                 * @param - columnGuid - a string guid of the column to drill by. This is optional,
                 *                     if not provided it will auto drill by the configured column.
-                * @example searchEmbed.trigger(HostEvent.DrillDown, {
-                * points: clickedPointData,
-                * autoDrillDown: true,
+                * @example
+                * ```js
+                * searchEmbed.trigger(HostEvent.DrillDown, {
+                *   points: clickedPointData,
+                *   autoDrillDown: true,
                 * })
+                * ```
+                *
                 * @version SDK: 1.5.0 | ThoughtSpot: ts7.oct.cl, 7.2.1
                 */
             DrillDown = "triggerDrillDown",
@@ -1433,7 +1606,10 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * Navigate to a specific page in App embed without any reload.
                 * This is the same as calling `appEmbed.navigateToPage(path, true)`
                 * @param - path - the path to navigate to (can be a number[1/-1] to go forward/back)
-                * @example appEmbed.navigateToPage(-1)
+                * @example
+                * ```js
+                * appEmbed.navigateToPage(-1)
+                * ```
                 * @version SDK: 1.12.0 | ThoughtSpot 8.4.0.cl, 8.4.1-sw
                 */
             Navigate = "Navigate",
@@ -1441,27 +1617,39 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * Opens the filter panel for a particular column.
                 * Works with Search embed.
                 * @param - { columnId: string, name: string, type: INT64/CHAR/DATE, dataType: ATTRIBUTE/MEASURE }
-                * @example searchEmbed.trigger(HostEvent.OpenFilter, { columnId: '123', name: 'column name', type: 'INT64', dataType: 'ATTRIBUTE' })
+                * @example
+                * ```js
+                * searchEmbed.trigger(HostEvent.OpenFilter, { columnId: '123', name: 'column name', type: 'INT64', dataType: 'ATTRIBUTE' })
+                * ```
                 * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
                 */
             OpenFilter = "openFilter",
             /**
                 * Adds the columns to the current Search.
                 * @param - { columnIds: string[] }
-                * @example searchEmbed.trigger(HostEvent.AddColumns, { columnIds: ['123', '456'] })
+                * @example
+                * ```js
+                * searchEmbed.trigger(HostEvent.AddColumns, { columnIds: ['123', '456'] })
+                * ```
                 * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
                 */
             AddColumns = "addColumns",
             /**
                 * Removes a column from the current Search.
                 * @param - { columnId: string }
-                * @example - searchEmbed.trigger(HostEvent.RemoveColumn, { columnId: '123' })
+                * @example
+                * ```js
+                * searchEmbed.trigger(HostEvent.RemoveColumn, { columnId: '123' })
+                * ```
                 * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
                 */
             RemoveColumn = "removeColumn",
             /**
                 * Gets the current pinboard content.
-                * @example liveboardEmbed.trigger(HostEvent.getExportRequestForCurrentPinboard)
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.getExportRequestForCurrentPinboard)
+                * ```
                 * @version SDK: 1.13.0 | ThoughtSpot: 8.5.0.cl, 8.8.1-sw
                 */
             getExportRequestForCurrentPinboard = "getExportRequestForCurrentPinboard",
@@ -1470,87 +1658,124 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * @param - incase of Liveboard embed, takes in an object with vizId as a key
                 * can be left empty for search and visualization embeds
                 * @example
+                * ```js
                 * liveboardEmbed.trigger(HostEvent.Pin, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
                 * vizEmbed.trigger(HostEvent.Pin)
                 * searchEmbed.trigger(HostEvent.Pin)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             Pin = "pin",
             /**
                 * Triggers the Show Liveboard details action on a Liveboard
-                * @example liveboardEmbed.trigger(HostEvent.LiveboardInfo)
+                * @example
+                * ```js
+                *  liveboardEmbed.trigger(HostEvent.LiveboardInfo)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             LiveboardInfo = "pinboardInfo",
             /**
                 * Triggers the Schedule action on a Liveboard
-                * @example liveboardEmbed.trigger(HostEvent.Schedule)
+                * @example
+                * ```js
+                *  liveboardEmbed.trigger(HostEvent.Schedule)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             Schedule = "subscription",
             /**
                 * Triggers the Manage schedule action on a Liveboard
-                * @example liveboardEmbed.trigger(HostEvent.ScheduleList)
+                * @example
+                * ```js
+                *  liveboardEmbed.trigger(HostEvent.ScheduleList)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             SchedulesList = "schedule-list",
             /**
                 * Triggers the Export TML action on a Liveboard
-                * @example liveboardEmbed.trigger(HostEvent.ExportTML)
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.ExportTML)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             ExportTML = "exportTSL",
             /**
                 * Triggers the Edit TML action on a Liveboard
-                * @example liveboardEmbed.trigger(HostEvent.EditTML)
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.EditTML)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             EditTML = "editTSL",
             /**
                 * Triggers the Update TML action on a Liveboard
-                * @example liveboardEmbed.trigger(HostEvent.UpdateTML)
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.UpdateTML)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             UpdateTML = "updateTSL",
             /**
                 * Triggers the Download PDF action on a Liveboard
-                * @example liveboardEmbed.trigger(HostEvent.DownloadAsPDF)
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.DownloadAsPDF)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             DownloadAsPdf = "downloadAsPdf",
             /**
                 * Triggers the Make a copy action on a Liveboard, search or visualization
                 * @example
+                * ```js
                 * liveboardEmbed.trigger(HostEvent.MakeACopy, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
                 * vizEmbed.trigger(HostEvent.MakeACopy)
                 * searchEmbed.trigger(HostEvent.MakeACopy)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             MakeACopy = "makeACopy",
             /**
                 * Triggers the Delete action on a Liveboard
-                * @example appEmbed.trigger(HostEvent.Remove)
+                * @example
+                * ```js
+                * appEmbed.trigger(HostEvent.Remove)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             Remove = "delete",
             /**
                 * Triggers the Explore action on a visualization
                 * @param - an object with vizId as a key
-                * @example liveboardEmbed.trigger(HostEvent.Explore, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.Explore, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             Explore = "explore",
             /**
                 * Triggers the Create alert action on a visualization
                 * @param - an object with vizId as a key
-                * @example liveboardEmbed.trigger(HostEvent.CreateMonitor {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.CreateMonitor {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             CreateMonitor = "createMonitor",
             /**
                 * Triggers the Manage alert action on a visualization
                 * @param - an object with vizId as a key
-                * @example liveboardEmbed.trigger(HostEvent.ManageMonitor, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.ManageMonitor, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             ManageMonitor = "manageMonitor",
@@ -1568,9 +1793,11 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * Triggers the Copy link action on a Liveboard or visualization
                 * @param - object - to trigger the action for a specfic visualization in Liveboard embed, pass in vizId as a key
                 * @example
+                * ```js
                 * liveboardEmbed.trigger(HostEvent.CopyLink)
                 * liveboardEmbed.trigger(HostEvent.CopyLink, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
                 * vizEmbed.trigger((HostEvent.CopyLink)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             CopyLink = "embedDocument",
@@ -1578,15 +1805,20 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * Triggers the Present action on a Liveboard or visualization
                 * @param - object - to trigger the action for a specfic visualization in Liveboard embed, pass in vizId as a key
                 * @example
+                * ```js
                 * liveboardEmbed.trigger(HostEvent.Present)
                 * liveboardEmbed.trigger(HostEvent.Present, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
                 * vizEmbed.trigger((HostEvent.Present)
+                * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
                 */
             Present = "present",
             /**
                 * Get TML for the current search.
-                * @example searchEmbed.trigger(HostEvent.GetTML)
+                * @example
+                * ```js
+                * searchEmbed.trigger(HostEvent.GetTML)
+                * ```
                 * @version SDK: 1.18.0 | ThoughtSpot: 8.10.0.cl, 9.0.1-sw
                 */
             GetTML = "getTML",
@@ -1814,6 +2046,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             ReplaySearch = "replaySearch",
             ShowUnderlyingData = "showUnderlyingData",
             Download = "download",
+            DownloadAsPng = "downloadAsPng",
             DownloadAsPdf = "downloadAsPdf",
             DownloadAsCsv = "downloadAsCSV",
             DownloadAsXlsx = "downloadAsXLSX",
@@ -1995,7 +2228,6 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             LEFT_CLICK = "left-click",
             RIGHT_CLICK = "right-click"
     }
-    export {};
 }
 
 declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
@@ -2106,6 +2338,20 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
                 * @param messageType The message type
                 * @param callback A callback as a function
                 * @param options The message options
+                * @example
+                * ```js
+                * tsEmbed.on(EmbedEvent.Error, (data) => {
+                *   console.error(data);
+                * });
+                * ```
+                * @example
+                * ```js
+                * tsEmbed.on(EmbedEvent.Save, (data) => {
+                *   console.log("Answer save clicked", data);
+                * }, {
+                *   start: true // This will trigger the callback on start of save
+                * });
+                * ```
                 */
             on(messageType: EmbedEvent, callback: MessageCallback, options?: MessageOptions): typeof TsEmbed.prototype;
             /**
@@ -2138,15 +2384,35 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
         * Base class for embedding v1 experience
         * Note: The v1 version of ThoughtSpot Blink works on the AngularJS stack
         * which is currently under migration to v2
+        *
+        * @inheritdoc
         */
     export class V1Embed extends TsEmbed {
             protected viewConfig: ViewConfig;
             constructor(domSelector: DOMSelector, viewConfig: ViewConfig);
             /**
-                * Render the app in an iframe and set up event handlers
+                * Render the ap    p in an iframe and set up event handlers
                 * @param iframeSrc
                 */
             protected renderV1Embed(iframeSrc: string): any;
+            /**
+                * @inheritdoc TsEmbed.on
+                *
+                * @example
+                * ```js
+                * tsEmbed.on(EmbedEvent.Error, (data) => {
+                *   console.error(data);
+                * });
+                * ```
+                * @example
+                * ```js
+                * tsEmbed.on(EmbedEvent.Save, (data) => {
+                *   console.log("Answer save clicked", data);
+                * }, {
+                *   start: true // This will trigger the callback on start of save
+                * });
+                * ```
+                */
             on(messageType: EmbedEvent, callback: MessageCallback, options?: MessageOptions): typeof TsEmbed.prototype;
     }
 }