@thoughtspot/visual-embed-sdk 1.28.5 → 1.29.0-addfilter.1

package/src/embed/search.ts

@@ -7,20 +7,24 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 
-import { getReleaseVersion } from '../auth';
-import { ERROR_MESSAGE } from '../errors';
 import {
-    Action, DOMSelector, DataSourceVisualMode, Param, ViewConfig,
+    DataSourceVisualMode,
+    DOMSelector,
+    Param,
+    Action,
+    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.
@@ -40,6 +44,25 @@ export interface SearchOptions {
     executeSearch?: boolean;
 }
 
+/**
+ * Define the initial state os column custom group accordions
+ * in data panel v2.
+ */
+export enum DataPanelCustomColumnGroupsAccordionState {
+    /**
+     * Expand all the accordion initially in data panel v2.
+     */
+    EXPAND_ALL = 'EXPAND_ALL',
+    /**
+     * Collapse all the accordions initially in data panel v2.
+     */
+    COLLAPSE_ALL = 'COLLAPSE_ALL',
+    /**
+     * Expand the first accordion and collapse the rest.
+     */
+    EXPAND_FIRST = 'EXPAND_FIRST',
+}
+
 /**
  * The configuration attributes for the embedded search view.
  *
@@ -59,6 +82,7 @@ export interface SearchViewConfig
      * but can be expanded manually.
      *
      * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     *
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
@@ -72,6 +96,7 @@ export interface SearchViewConfig
      * Show or hide the data sources panel.
      *
      * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
+     *
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
@@ -87,6 +112,7 @@ export interface SearchViewConfig
      * using raw answer data.
      *
      * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
+     *
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
@@ -96,14 +122,11 @@ export interface SearchViewConfig
      * ```
      */
     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', {
@@ -118,6 +141,7 @@ export interface SearchViewConfig
      * format for presenting search data.
      *
      * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     *
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
@@ -131,6 +155,7 @@ export interface SearchViewConfig
      * Only a single data source is supported currently.
      *
      * @deprecated Use `dataSource` instead.
+     *
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
@@ -144,6 +169,7 @@ export interface SearchViewConfig
      * The array of data source GUIDs to set on load.
      *
      * @version: SDK: 1.19.0
+     *
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
@@ -185,6 +211,7 @@ export interface SearchViewConfig
      * 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', {
@@ -199,6 +226,7 @@ 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', {
@@ -213,6 +241,7 @@ export interface SearchViewConfig
      *
      * @default false
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     *
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
@@ -250,6 +279,33 @@ export interface SearchViewConfig
      * ```
      */
     enableCustomColumnGroups?: boolean;
+    /**
+     * Flag to enable onBeforeSearchExecute Embed Event
+     *
+     * @version: SDK: 1.29.0 | Thoughtspot: 10.1.0.cl
+     */
+    isOnBeforeGetVizDataInterceptEnabled?: boolean;
+    /**
+     * This controls the initial behaviour of custom column groups accordion.
+     * It takes DataPanelCustomColumnGroupsAccordionState enum values as input.
+     * List of different enum values:-
+     * - EXPAND_ALL: Expand all the accordion initially in data panel v2.
+     * - COLLAPSE_ALL: Collapse all the accordions initially in data panel v2.
+     * - EXPAND_FIRST: Expand the first accordion and collapse the rest.
+     *
+     * @version SDK: 1.32.0 | Thoughtspot: 10.0.0.cl
+     * @default DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *   ... // other options
+     *   dataPanelCustomGroupsAccordionInitialState:
+     *      DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
+     * });
+     * ```
+     */
+    dataPanelCustomGroupsAccordionInitialState?: DataPanelCustomColumnGroupsAccordionState;
 }
 
 export const HiddenActionItemByDefaultForSearchEmbed = [
@@ -295,7 +351,6 @@ export class SearchEmbed extends TsEmbed {
     protected getEmbedParams(): string {
         const {
             hideResults,
-            expandAllDataSource,
             enableSearchAssist,
             forceTable,
             searchOptions,
@@ -309,6 +364,9 @@ export class SearchEmbed extends TsEmbed {
             runtimeParameters,
             collapseSearchBarInitially = false,
             enableCustomColumnGroups = false,
+            isOnBeforeGetVizDataInterceptEnabled = false,
+            /* eslint-disable-next-line max-len */
+            dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
         } = this.viewConfig;
         const queryParams = this.getBaseQueryParams();
 
@@ -346,6 +404,11 @@ export class SearchEmbed extends TsEmbed {
             queryParams[Param.HideSearchBar] = true;
         }
 
+        if (isOnBeforeGetVizDataInterceptEnabled) {
+            /* eslint-disable-next-line max-len */
+            queryParams[Param.IsOnBeforeGetVizDataInterceptEnabled] = isOnBeforeGetVizDataInterceptEnabled;
+        }
+
         queryParams[Param.DataPanelV2Enabled] = dataPanelV2;
         queryParams[Param.DataSourceMode] = this.getDataSourceMode();
 
@@ -357,6 +420,17 @@ export class SearchEmbed extends TsEmbed {
         queryParams[Param.searchEmbed] = true;
         queryParams[Param.CollapseSearchBarInitially] = collapseSearchBarInitially;
         queryParams[Param.EnableCustomColumnGroups] = enableCustomColumnGroups;
+        if (dataPanelCustomGroupsAccordionInitialState
+            === DataPanelCustomColumnGroupsAccordionState.COLLAPSE_ALL
+            || dataPanelCustomGroupsAccordionInitialState
+            === DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST
+        ) {
+            /* eslint-disable-next-line max-len */
+            queryParams[Param.DataPanelCustomGroupsAccordionInitialState] = dataPanelCustomGroupsAccordionInitialState;
+        } else {
+            /* eslint-disable-next-line max-len */
+            queryParams[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
+        }
         let query = '';
         const queryParamsString = getQueryParamString(queryParams, true);
         if (queryParamsString) {
@@ -402,7 +476,7 @@ export class SearchEmbed extends TsEmbed {
                 checkReleaseVersionInBeta(
                     getReleaseVersion(),
                     getEmbedConfig().suppressSearchEmbedBetaWarning
-                        || getEmbedConfig().suppressErrorAlerts,
+                    || getEmbedConfig().suppressErrorAlerts,
                 )
             ) {
                 alert(ERROR_MESSAGE.SEARCHEMBED_BETA_WRANING_MESSAGE);

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

@@ -1,39 +1,39 @@
 /* eslint-disable dot-notation */
-import * as authInstance from '../auth';
 import { resetCachedAuthToken } from '../authToken';
-import * as config from '../config';
 import {
-    AppEmbed,
     AuthType,
+    init,
     EmbedEvent,
-    LiveboardEmbed,
-    LiveboardViewConfig,
-    PinboardEmbed,
     SearchEmbed,
-    init,
+    PinboardEmbed,
+    LiveboardViewConfig,
+    AppEmbed,
+    LiveboardEmbed,
 } from '../index';
-import * as mixpanelInstance from '../mixpanel-service';
-import { MIXPANEL_EVENT } from '../mixpanel-service';
 import {
-    createRootEleForEmbed,
-    defaultParamsForPinboardEmbed,
+    Action, HomeLeftNavItem, RuntimeFilter, RuntimeFilterOp, HomepageModule, HostEvent,
+} from '../types';
+import {
     executeAfterWait,
-    expectUrlMatchesWithParams,
     getDocumentBody,
     getIFrameEl,
     getIFrameSrc,
     getRootEl,
-    mockMessageChannel,
     postMessageToParent,
+    defaultParamsForPinboardEmbed,
     waitFor,
+    expectUrlMatchesWithParams,
+    mockMessageChannel,
+    createRootEleForEmbed,
 } from '../test/test-utils';
-import {
-    Action, HomeLeftNavItem, HomepageModule, RuntimeFilter, RuntimeFilterOp,
-} from '../types';
+import * as config from '../config';
+import * as tsEmbedInstance from './ts-embed';
+import * as mixpanelInstance from '../mixpanel-service';
+import * as authInstance from '../auth';
+import * as baseInstance from './base';
+import { MIXPANEL_EVENT } from '../mixpanel-service';
 import * as authService from '../utils/authService/authService';
 import { logger } from '../utils/logger';
-import * as baseInstance from './base';
-import * as tsEmbedInstance from './ts-embed';
 
 const defaultViewConfig = {
     frameParams: {
@@ -417,10 +417,8 @@ describe('Unit test case for ts embed', () => {
                     authToken: '',
                     hostConfig: undefined,
                     runtimeFilterParams: null,
-                    hiddenHomeLeftNavItems: [
-                        HomeLeftNavItem.Home,
-                        HomeLeftNavItem.MonitorSubscription,
-                    ],
+                    hiddenHomeLeftNavItems:
+                        [HomeLeftNavItem.Home, HomeLeftNavItem.MonitorSubscription],
                     hiddenHomepageModules: [],
                     reorderedHomepageModules: [],
                 },
@@ -649,10 +647,7 @@ describe('Unit test case for ts embed', () => {
                 type: EmbedEvent.APP_INIT,
                 data: {},
             };
-            const searchEmbed = new SearchEmbed(getRootEl(), {
-                ...defaultViewConfig,
-                preRenderId: 'test',
-            });
+            const searchEmbed = new SearchEmbed(getRootEl(), { ...defaultViewConfig, preRenderId: 'test' });
             searchEmbed.preRender();
             const mockPort: any = {
                 postMessage: jest.fn(),
@@ -709,10 +704,7 @@ describe('Unit test case for ts embed', () => {
                 type: EmbedEvent.AuthExpire,
                 data: {},
             };
-            const searchEmbed = new SearchEmbed(getRootEl(), {
-                ...defaultViewConfig,
-                preRenderId: 'test',
-            });
+            const searchEmbed = new SearchEmbed(getRootEl(), { ...defaultViewConfig, preRenderId: 'test' });
             jest.spyOn(baseInstance, 'notifyAuthFailure');
             searchEmbed.preRender();
             const mockPort: any = {
@@ -1216,7 +1208,7 @@ describe('Unit test case for ts embed', () => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
-                    + `&foo=bar&baz=1&bool=true${defaultParamsPost}#/home`,
+                + `&foo=bar&baz=1&bool=true${defaultParamsPost}#/home`,
             );
         });
 
@@ -1232,7 +1224,7 @@ describe('Unit test case for ts embed', () => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
-                    + `&showAlerts=true${defaultParamsPost}#/home`,
+                + `&showAlerts=true${defaultParamsPost}#/home`,
             );
         });
         it('Sets the locale param', async () => {
@@ -1247,7 +1239,7 @@ describe('Unit test case for ts embed', () => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
-                    + `&locale=ja-JP${defaultParamsPost}#/home`,
+                + `&locale=ja-JP${defaultParamsPost}#/home`,
             );
         });
         it('Sets the iconSprite url', async () => {
@@ -1264,7 +1256,7 @@ describe('Unit test case for ts embed', () => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
-                    + `&iconSprite=iconSprite.com${defaultParamsPost}#/home`,
+                + `&iconSprite=iconSprite.com${defaultParamsPost}#/home`,
             );
         });
 

package/src/embed/ts-embed.ts

@@ -8,54 +8,57 @@
  */
 
 import isEqual from 'lodash/isEqual';
-import pkgInfo from '../../package.json';
-import { AuthFailureType } from '../auth';
+import { logger } from '../utils/logger';
 import { getAuthenticationToken } from '../authToken';
+import { AnswerService } from '../utils/graphql/answerService/answerService';
+import {
+    getEncodedQueryParamsString,
+    getCssDimension,
+    getOffsetTop,
+    embedEventStatus,
+    setAttributes,
+    getCustomisations,
+    getRuntimeFilters,
+    getDOMNode,
+    getFilterQuery,
+    getQueryParamString,
+    getRuntimeParameters,
+    setStyleProperties,
+    removeStyleProperties,
+    isUndefined,
+} from '../utils';
 import {
-    DEFAULT_EMBED_HEIGHT,
-    DEFAULT_EMBED_WIDTH,
-    URL_MAX_LENGTH,
     getThoughtSpotHost,
+    URL_MAX_LENGTH,
+    DEFAULT_EMBED_WIDTH,
+    DEFAULT_EMBED_HEIGHT,
     getV2BasePath,
 } from '../config';
-import { MIXPANEL_EVENT, uploadMixpanelEvent } from '../mixpanel-service';
 import {
-    Action,
     AuthType,
-    ContextMenuTriggerOptions,
     DOMSelector,
-    EmbedConfig,
-    EmbedEvent,
     HostEvent,
+    EmbedEvent,
     MessageCallback,
-    MessageCallbackObj,
-    MessageOptions,
+    Action,
     Param,
+    EmbedConfig,
+    MessageOptions,
+    MessagePayload,
+    MessageCallbackObj,
     ViewConfig,
+    FrameParams,
+    ContextMenuTriggerOptions,
+    RuntimeFilter,
 } from '../types';
-import {
-    embedEventStatus,
-    getCssDimension,
-    getCustomisations,
-    getDOMNode,
-    getEncodedQueryParamsString,
-    getFilterQuery,
-    getOffsetTop,
-    getQueryParamString,
-    getRuntimeFilters,
-    getRuntimeParameters,
-    isUndefined,
-    removeStyleProperties,
-    setAttributes,
-    setStyleProperties,
-} from '../utils';
-import { AnswerService } from '../utils/graphql/answerService/answerService';
-import { logger } from '../utils/logger';
-import { processAuthFailure, processEventData } from '../utils/processData';
+import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
+import { processEventData, processAuthFailure } from '../utils/processData';
 import { processTrigger } from '../utils/processTrigger';
+import pkgInfo from '../../package.json';
 import {
-    getAuthPromise, handleAuth, notifyAuthFailure, renderInQueue,
+    getAuthPromise, renderInQueue, handleAuth, notifyAuthFailure,
 } from './base';
+import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
 
 const { version } = pkgInfo;
@@ -562,7 +565,8 @@ export class TsEmbed {
 
         const {
             height: frameHeight,
-            width: frameWidth, ...restParams
+            width: frameWidth,
+            ...restParams
         } = this.viewConfig.frameParams || {};
         const width = getCssDimension(frameWidth || DEFAULT_EMBED_WIDTH);
         const height = getCssDimension(frameHeight || DEFAULT_EMBED_HEIGHT);
@@ -593,6 +597,7 @@ export class TsEmbed {
      * @param url - The URL of the embedded ThoughtSpot app.
      */
     protected async renderIFrame(url: string): Promise<any> {
+        console.log('here 7');
         if (this.isError) {
             return null;
         }
@@ -602,8 +607,10 @@ export class TsEmbed {
         if (url.length > URL_MAX_LENGTH) {
             // warn: The URL is too long
         }
+        console.log('here 8');
 
         return renderInQueue((nextInQueue) => {
+            console.log('here 6');
             const initTimestamp = Date.now();
 
             this.executeCallbacks(EmbedEvent.Init, {
@@ -616,6 +623,7 @@ export class TsEmbed {
             uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
             return getAuthPromise()
                 ?.then((isLoggedIn: boolean) => {
+                    console.log('here 9', isLoggedIn);
                     if (!isLoggedIn) {
                         this.handleInsertionIntoDOM(this.embedConfig.loginFailedMessage);
                         return;
@@ -640,7 +648,9 @@ export class TsEmbed {
                     this.iFrame.addEventListener('error', () => {
                         nextInQueue();
                     });
+                    console.log('here 10', this.iFrame);
                     this.handleInsertionIntoDOM(this.iFrame);
+                    console.log('here 11', document.body.innerHTML);
                     const prefetchIframe = document.querySelectorAll('.prefetchIframe');
                     if (prefetchIframe.length) {
                         prefetchIframe.forEach((el) => {
@@ -684,7 +694,7 @@ export class TsEmbed {
     protected connectPreRendered(): boolean {
         const preRenderIds = this.getPreRenderIds();
         this.preRenderWrapper = this.preRenderWrapper
-        || document.getElementById(preRenderIds.wrapper);
+            || document.getElementById(preRenderIds.wrapper);
 
         this.preRenderChild = this.preRenderChild || document.getElementById(preRenderIds.child);
 
@@ -1102,11 +1112,11 @@ export class TsEmbed {
                 ) {
                     logger.warn(
                         `${viewConfig.embedComponentType || 'Component'} was pre-rendered with `
-                            + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
-                            + `but a different value "${JSON.stringify(viewConfig[key])}" `
-                            + 'was passed to the Embed component. '
-                            + 'The new value provided is ignored, the value provided during '
-                            + 'preRender is used.',
+                        + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+                        + `but a different value "${JSON.stringify(viewConfig[key])}" `
+                        + 'was passed to the Embed component. '
+                        + 'The new value provided is ignored, the value provided during '
+                        + 'preRender is used.',
                     );
                 }
             });
@@ -1231,8 +1241,9 @@ export class TsEmbed {
      * @version SDK: 1.25.0 / ThoughtSpot 9.10.0
      */
     public async getAnswerService(vizId?: string): Promise<AnswerService> {
-        const { session, embedAnswerData } = await this.trigger(HostEvent.GetAnswerSession, vizId);
-        return new AnswerService(session, embedAnswerData, this.embedConfig.thoughtSpotHost);
+        const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId);
+
+        return new AnswerService(session, null, this.embedConfig.thoughtSpotHost);
     }
 }
 

package/src/react/index.spec.tsx

@@ -49,7 +49,7 @@ describe('React Components', () => {
                 ),
             ).toBe(true);
             expect(getIFrameSrc(container)).toBe(
-                `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=false&enableCustomColumnGroups=false#/embed/answer`,
+                `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=false&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
             );
         });
 
@@ -200,35 +200,6 @@ describe('React Components', () => {
             ).toBe(true);
             expect(containerSibling.querySelector('div')).toBe(null);
         });
-
-        it('Should have the correct container element', async () => {
-            const { container } = render(
-                <LiveboardEmbed liveboardId="abcd" className="def" />,
-            );
-
-            await waitFor(() => getIFrameEl(container));
-            expect(container.querySelector('div')).not.toBe(null);
-            expect(
-                container.querySelector('div').classList.contains('def'),
-            ).toBe(true);
-
-            const { container: containerSibling } = render(
-                <LiveboardEmbed
-                    liveboardId="abcd"
-                    className="def"
-                    insertAsSibling={true}
-                />,
-            );
-            await waitFor(() => getIFrameEl(containerSibling));
-            expect(containerSibling.querySelector('span')).not.toBe(null);
-            expect(containerSibling.querySelector('span').style.position).toBe(
-                'absolute',
-            );
-            expect(
-                getIFrameEl(containerSibling).classList.contains('def'),
-            ).toBe(true);
-            expect(containerSibling.querySelector('div')).toBe(null);
-        });
     });
 
     describe('SearchBarEmbed', () => {