@thoughtspot/visual-embed-sdk 1.28.0-preRender → 1.28.0

package/src/embed/liveboard.ts

@@ -11,16 +11,9 @@
 
 import { ERROR_MESSAGE } from '../errors';
 import {
-    EmbedEvent,
-    MessagePayload,
-    Param,
-    RuntimeFilter,
-    DOMSelector,
-    HostEvent,
-    ViewConfig,
+    DOMSelector, EmbedEvent, HostEvent, MessagePayload, Param, ViewConfig,
 } from '../types';
 import { getQueryParamString, isUndefined } from '../utils';
-import { getAuthPromise } from './base';
 import { V1Embed } from './ts-embed';
 
 /**
@@ -28,12 +21,29 @@ import { V1Embed } from './ts-embed';
  *
  * @group Embed components
  */
-export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageModules' | 'hiddenHomeLeftNavItems' | 'reorderedHomepageModules'> {
+export interface LiveboardViewConfig
+    extends Omit<
+        ViewConfig,
+        'hiddenHomepageModules' | 'hiddenHomeLeftNavItems' | 'reorderedHomepageModules'
+    > {
     /**
      * If set to true, the embedded object container dynamically resizes
      * according to the height of the Liveboard.
+     * **Note**:  Using fullHeight loads all visualizations on the
+     * Liveboard simultaneously, which results in multiple warehouse
+     * queries and potentially a longer wait for the topmost
+     * visualizations to display on the screen.
+     * Setting `fullHeight` to `false` fetches visualizations
+     * incrementally as users scroll the page to view the charts and tables.
      *
      * @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 7.2.1
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   ... // other liveboard view config
+     *  fullHeight: true,
+     * });
+     * ```
      */
     fullHeight?: boolean;
     /**
@@ -43,10 +53,26 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      *
      * @version SDK: 1.5.0 | ThoughtSpot: ts7.oct.cl, 7.2.1
      * @default 500
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   ... // other liveboard view config
+     *   fullHeight: true,
+     *   defaultHeight: 600,
+     * });
+     * ```
      */
     defaultHeight?: number;
     /**
      * @Deprecated If set to true, the context menu in visualizations will be enabled.
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#tsEmbed', {
+     *    ... // other options
+     *    enableVizTransformations:true,
+     * })
+     * ```
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
      */
     enableVizTransformations?: boolean;
     /**
@@ -54,6 +80,12 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      * Use either liveboardId or pinboardId to reference the Liveboard to embed.
      *
      * @version SDK: 1.3.0 | ThoughtSpot ts7.aug.cl, 7.2.1
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    liveboardId:id of liveboard,
+     * })
      */
     liveboardId?: string;
     /**
@@ -64,6 +96,15 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
     pinboardId?: string;
     /**
      * The visualization within the Liveboard to display.
+     *
+     * @version SDK: 1.9.1 | ThoughtSpot: 8.1.0.cl, 8.4.1-sw
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    vizId:'430496d6-6903-4601-937e-2c691821af3c',
+     * })
+     * ```
      */
     vizId?: string;
     /**
@@ -71,6 +112,13 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      * Liveboard page will be read-only (no X buttons)
      *
      * @version SDK: 1.3.0 | ThoughtSpot ts7.aug.cl, 7.2.1.sw
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    preventLiveboardFilterRemoval:true,
+     * })
+     * ```
      */
     preventLiveboardFilterRemoval?: boolean;
     /**
@@ -79,6 +127,15 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      * event.
      *
      * @version SDK: 1.9.1 | ThoughtSpot: 8.1.0.cl, 8.4.1-sw
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    visibleVizs: [
+     *       '430496d6-6903-4601-937e-2c691821af3c',
+     *       'f547ec54-2a37-4516-a222-2b06719af726'
+     *     ]
+     * })
      */
     visibleVizs?: string[];
     /**
@@ -92,12 +149,26 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      * new Liveboard experience mode.
      *
      * @version SDK: 1.14.0 | ThoughtSpot: 8.6.0.cl, 8.8.1-sw
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    liveboardV2:true,
+     * })
+     * ```
      */
     liveboardV2?: boolean;
     /**
      * Set a Liveboard tab as an active tab.
      * Specify the tab ID.
      *
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#tsEmbed', {
+     *    ... // other options
+     *    activeTabId:'id-1234',
+     * })
+     * ```
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
      */
     activeTabId?: string;
@@ -105,6 +176,13 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      * Show or hide the tab panel of the embedded Liveboard.
      *
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl, 9.8.0.sw
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    hideTabPanel:true,
+     * })
+     * ```
      */
     hideTabPanel?: boolean;
     /**
@@ -112,20 +190,41 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      *
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      * @default false
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   ... // other liveboard view config
+     *   hideLiveboardHeader:true,
+     * });
+     * ```
      */
     hideLiveboardHeader?: boolean;
     /**
      * Show or hide the Liveboard title.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      * @default false
+     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    showLiveboardTitle:true,
+     * })
+     * ```
      */
     showLiveboardTitle?: boolean;
     /**
      * Show or hide the Liveboard description.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      * @default false
+     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    showLiveboardDescription:true,
+     * })
+     * ```
      */
     showLiveboardDescription?: boolean;
     /**
@@ -146,8 +245,15 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
     /**
      * enable or disable ask sage
      *
-     * @version SDK: 1.29.0 | Thoughtspot: 9.12.0.cl
      * @default false
+     * @version SDK: 1.29.0 | Thoughtspot: 9.12.0.cl
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    enableAskSage:true,
+     * })
+     * ```
      */
     enableAskSage?: boolean;
 }
@@ -362,11 +468,11 @@ export class LiveboardEmbed extends V1Embed {
      * @param renderOptions An object specifying the Liveboard ID,
      * visualization ID and the runtime filters.
      */
-    public render(): LiveboardEmbed {
+    public async render(): Promise<LiveboardEmbed> {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src);
+        await this.renderV1Embed(src);
 
         return this;
     }
@@ -389,4 +495,4 @@ export class LiveboardEmbed extends V1Embed {
 /**
  * @hidden
  */
-export class PinboardEmbed extends LiveboardEmbed { }
+export class PinboardEmbed extends LiveboardEmbed {}

package/src/embed/pinboard.spec.ts

@@ -169,6 +169,7 @@ describe('Pinboard/viz embed tests', () => {
                     values: [1000],
                 },
             ],
+            excludeRuntimeFiltersfromURL: false,
         } as LiveboardViewConfig);
         pinboardEmbed.render();
         await executeAfterWait(() => {
@@ -179,7 +180,7 @@ describe('Pinboard/viz embed tests', () => {
         });
     });
 
-    test('should not apply runtime filters if excludeRuntimeFiltersfromURL is true', async () => {
+    test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is true', async () => {
         const pinboardEmbed = new PinboardEmbed(getRootEl(), {
             ...defaultViewConfig,
             pinboardId,
@@ -202,6 +203,28 @@ describe('Pinboard/viz embed tests', () => {
         });
     });
 
+    test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is undefined', async () => {
+        const liveboardEmbed = new PinboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            pinboardId,
+            vizId,
+            runtimeFilters: [
+                {
+                    columnName: 'sales',
+                    operator: RuntimeFilterOp.EQ,
+                    values: [1000],
+                },
+            ],
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}${prefixParamsVizEmbed}#/embed/viz/${pinboardId}/${vizId}`,
+            );
+        });
+    });
+
     test('should register event handler to adjust iframe height', async () => {
         const pinboardEmbed = new PinboardEmbed(getRootEl(), {
             ...defaultViewConfig,

package/src/embed/sage.ts

@@ -237,11 +237,11 @@ export class SageEmbed extends V1Embed {
      *
      * @returns {SageEmbed} Eureka/Sage embed
      */
-    public render(): SageEmbed {
+    public async render(): Promise<SageEmbed> {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src);
+        await this.renderV1Embed(src);
 
         return this;
     }

package/src/embed/search-bar.tsx

@@ -23,18 +23,44 @@ export interface SearchBarViewConfig
      * Only a single data source is supported currently.
      *
      * @deprecated Use `dataSource` instead
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.1-sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchBarEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSources:['id-2345','id-2345'],
+     * })
+     * ```
      */
     dataSources?: string[];
     /**
-     * The array of data source GUIDs to set on load.
+     * Pass the ID of the source to be selected.
      *
      * @version: SDK: 1.19.0, ThoughtSpot 9.0.0.cl, 9.0.1.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchBarEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSource:'id-2345',
+     * })
+     * ```
      */
     dataSource?: string;
     /**
      * Boolean to define if the last selected data source should be used
      *
      * @version: SDK: 1.24.0, ThoughtSpot 9.5.0.cl, 9.5.0.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchBarEmbed('#tsEmbed', {
+     *    ... // other options
+     *    useLastSelectedSources:false,
+     * })
+     * ```
      */
     useLastSelectedSources?: boolean;
     /**
@@ -48,12 +74,17 @@ export interface SearchBarViewConfig
      * If it’s not executed, the focus is placed at the end of
      * the token string in the search bar.
      *
+     * @version: SDK: 1.2.0 | ThoughtSpot: 9.4.0.sw
+     *
      * @example
      * ```js
-     * searchOptions: {
-     *    searchTokenString: '[quantity purchased] [region]',
-     *    executeSearch: true,
-     * }
+     * const embed = new SearchBarEmbed('#tsEmbed', {
+     *    ... // other options
+     *    searchOptions: {
+     *        searchTokenString: '[quantity purchased] [region]',
+     *        executeSearch: true,
+     *    }
+     * })
      * ```
      */
     searchOptions?: SearchOptions;
@@ -130,11 +161,11 @@ export class SearchBarEmbed extends TsEmbed {
     /**
      * Render the embedded ThoughtSpot search
      */
-    public render(): SearchBarEmbed {
+    public async render(): Promise<SearchBarEmbed> {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderIFrame(src);
+        await this.renderIFrame(src);
         return this;
     }
 }

package/src/embed/search.spec.ts

@@ -178,6 +178,7 @@ describe('Search embed tests', () => {
                     values: ['berkeley'],
                 },
             ],
+            excludeRuntimeFiltersfromURL: false,
         });
         searchEmbed.render();
         await executeAfterWait(() => {
@@ -188,7 +189,7 @@ describe('Search embed tests', () => {
         });
     });
 
-    test('should not add runtime filters if excludeRuntimeFiltersfromURL is true', async () => {
+    test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is true', async () => {
         const dataSources = ['data-source-1'];
         const searchOptions = {
             searchTokenString: '[commit date][revenue]',
@@ -216,6 +217,33 @@ describe('Search embed tests', () => {
         });
     });
 
+    test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is undefined', async () => {
+        const dataSources = ['data-source-1'];
+        const searchOptions = {
+            searchTokenString: '[commit date][revenue]',
+        };
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            hideDataSources: true,
+            dataSources,
+            searchOptions,
+            runtimeFilters: [
+                {
+                    columnName: 'city',
+                    operator: RuntimeFilterOp.EQ,
+                    values: ['berkeley'],
+                },
+            ],
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&searchTokenString=%5Bcommit%20date%5D%5Brevenue%5D&dataSourceMode=hide&useLastSelectedSources=false${prefixParams}#/embed/answer`,
+            );
+        });
+    });
+
     test('Should add dataSource', async () => {
         const dataSource = 'data-source-1';
         const searchOptions = {

package/src/embed/search.ts

@@ -7,20 +7,20 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 
+import { getReleaseVersion } from '../auth';
+import { ERROR_MESSAGE } from '../errors';
 import {
-    DataSourceVisualMode, DOMSelector, Param, Action, ViewConfig,
+    Action, DOMSelector, DataSourceVisualMode, Param, ViewConfig,
 } from '../types';
 import {
-    getQueryParamString,
     checkReleaseVersionInBeta,
     getFilterQuery,
+    getQueryParamString,
     getRuntimeParameters,
 } from '../utils';
-import { TsEmbed } from './ts-embed';
-import { ERROR_MESSAGE } from '../errors';
 import { getAuthPromise } from './base';
-import { getReleaseVersion } from '../auth';
 import { getEmbedConfig } from './embedConfig';
+import { TsEmbed } from './ts-embed';
 
 /**
  * Configuration for search options.
@@ -57,27 +57,73 @@ export interface SearchViewConfig
     /**
      * If set to true, the data sources panel is collapsed on load,
      * but can be expanded manually.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    collapseDataSources:true,
+     * })
+     * ```
      */
     collapseDataSources?: boolean;
     /**
      * Show or hide the data sources panel.
+     *
+     * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideDataSources:true,
+     * })
+     * ```
      */
     hideDataSources?: boolean;
     /**
      * Show or hide the charts and tables in search answers.
      * This attribute can be used to create a custom visualization
      * using raw answer data.
+     *
+     * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideResults:true,
+     * })
+     * ```
      */
     hideResults?: boolean;
+    /**
+     * If set to true, expands all the data sources panel.
+     */
+    expandAllDataSource?: boolean;
     /**
      * If set to true, the Search Assist feature is enabled.
      *
      * @version SDK: 1.13.0 | ThoughtSpot: 8.5.0.cl, 8.8.1-sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    enableSearchAssist:true,
+     * })
+     * ```
      */
     enableSearchAssist?: boolean;
     /**
      * If set to true, the tabular view is set as the default
      * format for presenting search data.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    forceTable:true,
+     * })
      */
     forceTable?: boolean;
     /**
@@ -85,12 +131,26 @@ export interface SearchViewConfig
      * Only a single data source is supported currently.
      *
      * @deprecated Use `dataSource` instead.
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSources:['id-234','id-456'],
+     * })
+     * ```
      */
     dataSources?: string[];
     /**
      * The array of data source GUIDs to set on load.
      *
      * @version: SDK: 1.19.0
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSource:'id-234',
+     * })
+     * ```
      */
     dataSource?: string;
     /**
@@ -123,6 +183,15 @@ export interface SearchViewConfig
     searchOptions?: SearchOptions;
     /**
      * The GUID of a saved answer to load initially.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    answerId:'sed-1234',
+     * })
+     * ```
      */
     answerId?: string;
     /**
@@ -130,6 +199,13 @@ export interface SearchViewConfig
      * The chart/table should still be visible.
      *
      * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.5.0.sw
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideSearchBar:true,
+     * })
+     * ```
      */
     hideSearchBar?: boolean;
     /**
@@ -137,6 +213,13 @@ export interface SearchViewConfig
      *
      * @default false
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataPanelV2:false,
+     * })
+     * ```
      */
     dataPanelV2?: boolean;
     /**
@@ -190,13 +273,14 @@ export class SearchEmbed extends TsEmbed {
     protected getEmbedParams(): string {
         const {
             hideResults,
+            expandAllDataSource,
             enableSearchAssist,
             forceTable,
             searchOptions,
             runtimeFilters,
             dataSource,
             dataSources,
-            excludeRuntimeFiltersfromURL,
+            excludeRuntimeFiltersfromURL = true,
             hideSearchBar,
             dataPanelV2 = false,
             useLastSelectedSources = false,
@@ -281,18 +365,18 @@ export class SearchEmbed extends TsEmbed {
     /**
      * Render the embedded ThoughtSpot search
      */
-    public render(): SearchEmbed {
+    public async render(): Promise<SearchEmbed> {
         super.render();
         const { answerId } = this.viewConfig;
 
         const src = this.getIFrameSrc();
-        this.renderIFrame(src);
+        await this.renderIFrame(src);
         getAuthPromise().then(() => {
             if (
                 checkReleaseVersionInBeta(
                     getReleaseVersion(),
                     getEmbedConfig().suppressSearchEmbedBetaWarning
-                    || getEmbedConfig().suppressErrorAlerts,
+                        || getEmbedConfig().suppressErrorAlerts,
                 )
             ) {
                 alert(ERROR_MESSAGE.SEARCHEMBED_BETA_WRANING_MESSAGE);

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

@@ -0,0 +1,39 @@
+import {
+    init, AuthType, LiveboardEmbed, HostEvent,
+} from '../index';
+import {
+    executeAfterWait,
+    getDocumentBody,
+    getIFrameEl,
+    getRootEl,
+} from '../test/test-utils';
+
+describe('Trigger', () => {
+    beforeEach(() => {
+        document.body.innerHTML = getDocumentBody();
+    });
+    test('should trigger the event', async (done) => {
+        init({
+            thoughtSpotHost: 'https://tshost',
+            authType: AuthType.None,
+        });
+        const lb = new LiveboardEmbed(getRootEl(), {
+            frameParams: {
+                width: '100%',
+                height: '100%',
+            },
+            liveboardId: '123',
+        });
+        const val = await lb.render();
+        const iframe = getIFrameEl();
+        jest.spyOn(iframe.contentWindow, 'postMessage');
+        executeAfterWait(() => {
+            lb.trigger(HostEvent.DownloadAsCsv, { vizId: 'testId' });
+            expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(expect.objectContaining({
+                type: HostEvent.DownloadAsCsv,
+                data: { vizId: 'testId' },
+            }), 'https://tshost', expect.anything());
+            done();
+        });
+    });
+});