@thoughtspot/visual-embed-sdk 1.23.1 → 1.23.3

package/src/embed/sage.spec.ts

@@ -41,4 +41,36 @@ describe('Sage  embed tests', () => {
             );
         });
     });
+    test('embed url include pre-seed dataSource and query', async () => {
+        const sageEmbed = new SageEmbed(getRootEl(), {
+            ...defaultConfig,
+            dataSource: 'worksheet-id',
+            searchOptions: {
+                searchQuery: 'test-query',
+            },
+        });
+        sageEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatch(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&hideEurekaResults=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=true&hideEurekaSuggestions=true&hideAction=%5B"reportError","save","pin","editACopy","saveAsView","updateTSL","editTSL","onDeleteAnswer","share"%5D#/embed/eureka?worksheet=worksheet-id&query=test-query`,
+            );
+        });
+    });
+    test('embed url include pre-seed execute flag with query', async () => {
+        const sageEmbed = new SageEmbed(getRootEl(), {
+            ...defaultConfig,
+            searchOptions: {
+                searchQuery: 'test-query',
+                executeSearch: true,
+            },
+        });
+        sageEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatch(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&hideEurekaResults=false&isSageEmbed=true&disableWorksheetChange=false&hideWorksheetSelector=true&hideEurekaSuggestions=true&hideAction=%5B"reportError","save","pin","editACopy","saveAsView","updateTSL","editTSL","onDeleteAnswer","share"%5D#/embed/eureka?query=test-query&executeSearch=true`,
+            );
+        });
+    });
 });

package/src/embed/sage.ts

@@ -13,6 +13,23 @@ import {
 import { getQueryParamString } from '../utils';
 import { V1Embed } from './ts-embed';
 
+/**
+ * Configuration for search options
+ */
+export interface SearchOptions {
+    /**
+     * The tml string to load the answer
+     */
+    searchQuery: string;
+    /**
+     * Boolean to determine if the search should be executed or not.
+     * if it is executed, put the focus on the results.
+     * if it’s not executed, put the focus in the search bar - at the end of
+     * the tokens
+     */
+    executeSearch?: boolean;
+}
+
 /**
  * The configuration attributes for the embedded Natural language search view. Based on
  * GPT and LLM.
@@ -22,7 +39,9 @@ import { V1Embed } from './ts-embed';
  */
 export interface SageViewConfig extends ViewConfig {
     /**
-     * If set to true, object results are shown.
+     * If set to true, a list of liveboard and answers related
+     * to the natural language search will be shown below the
+     * AI generated answer.
      */
     showObjectResults?: boolean;
     /**
@@ -34,7 +53,8 @@ export interface SageViewConfig extends ViewConfig {
      */
     hideWorksheetSelector?: boolean,
     /**
-     * If set to true, the object search suggestions are not shown
+     * If set to true, the search suggestions will contain existing
+     * liveboards and answers in addition with the autocomplete
      *
      */
     showObjectSuggestions?: boolean;
@@ -51,6 +71,11 @@ export interface SageViewConfig extends ViewConfig {
      * The data source GUID to set on load.
      */
     dataSource?: string;
+    /**
+     * Configuration for search options
+     */
+    searchOptions?: SearchOptions;
+
 }
 export const HiddenActionItemByDefaultForSageEmbed = [
     Action.Save,
@@ -102,7 +127,7 @@ export class SageEmbed extends V1Embed {
         params[Param.DisableWorksheetChange] = !!disableWorksheetChange;
         params[Param.HideWorksheetSelector] = !!hideWorksheetSelector;
         params[Param.HideEurekaSuggestions] = !showObjectSuggestions;
-        params[Param.HideSampleQuestions] = !hideSampleQuestions;
+        params[Param.HideSampleQuestions] = !!hideSampleQuestions;
         params[Param.HideActions] = [
             ...(params[Param.HideActions] ?? []),
             ...HiddenActionItemByDefaultForSageEmbed,
@@ -121,9 +146,17 @@ export class SageEmbed extends V1Embed {
         const path = 'eureka';
         const postHashObj = {};
         const tsPostHashParams = this.getThoughtSpotPostUrlParams();
+        const {
+            dataSource, searchOptions,
+        } = this.viewConfig;
 
-        if (this.viewConfig.searchQuery) postHashObj[Param.Query] = this.viewConfig.searchQuery;
-        if (this.viewConfig.dataSource) postHashObj[Param.WorksheetId] = this.viewConfig.dataSource;
+        if (dataSource) postHashObj[Param.WorksheetId] = dataSource;
+        if (searchOptions?.searchQuery) {
+            postHashObj[Param.Query] = searchOptions?.searchQuery;
+            if (searchOptions.executeSearch) {
+                postHashObj[Param.executeSearch] = true;
+            }
+        }
         let sagePostHashParams = new URLSearchParams(postHashObj).toString();
         if (sagePostHashParams) sagePostHashParams = `${tsPostHashParams ? '&' : '?'}${sagePostHashParams}`;
 

package/src/embed/search-bar.tsx

@@ -8,7 +8,7 @@ import { SearchOptions } from './search';
 /**
  * @group Embed components
  */
-export interface SearchBarViewConfig extends Omit<ViewConfig, 'runtimeFilters' | 'showAlerts'> {
+export interface SearchBarViewConfig extends Omit<ViewConfig, 'runtimeFilters' | 'showAlerts' | 'dataPanelV2'> {
     /**
      * The array of data source GUIDs to set on load.
      * Only a single dataSource supported currently.

package/src/embed/search.spec.ts

@@ -47,7 +47,7 @@ describe('Search embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&useLastSelectedSources=false${prefixParams}#/embed/answer`,
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&enableDataPanelV2=false&dataSourceMode=expand&useLastSelectedSources=false${prefixParams}#/embed/answer`,
             );
         });
     });
@@ -336,4 +336,18 @@ describe('Search embed tests', () => {
             );
         });
     });
+
+    test('should set enableDataPanelV2 to true if data panel v2 flag is true', async () => {
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            dataPanelV2: true,
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=true&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+            );
+        });
+    });
 });

package/src/embed/search.ts

@@ -109,6 +109,14 @@ export interface SearchViewConfig extends ViewConfig {
      * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
      */
     hideSearchBar?: boolean;
+    /**
+     * Flag to control Data panel experience
+     *
+     * @default false
+     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     * @hidden
+     */
+    dataPanelV2?: boolean;
 }
 
 export const HiddenActionItemByDefaultForSearchEmbed = [
@@ -162,6 +170,7 @@ export class SearchEmbed extends TsEmbed {
             dataSource,
             dataSources,
             excludeRuntimeFiltersfromURL,
+            dataPanelV2 = false,
         } = this.viewConfig;
         const queryParams = this.getBaseQueryParams();
 
@@ -195,6 +204,7 @@ export class SearchEmbed extends TsEmbed {
             queryParams[Param.ForceTable] = true;
         }
 
+        queryParams[Param.DataPanelV2Enabled] = dataPanelV2;
         queryParams[Param.DataSourceMode] = this.getDataSourceMode();
         queryParams[Param.UseLastSelectedDataSource] = false;
         queryParams[Param.searchEmbed] = true;

package/src/embed/ts-embed.ts

@@ -156,6 +156,9 @@ export class TsEmbed {
         this.viewConfig = viewConfig;
         this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
         this.registerAppInit();
+        uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
+            ...viewConfig,
+        });
     }
 
     /**
@@ -299,8 +302,12 @@ export class TsEmbed {
      * Register APP_INIT event and sendback init payload
      */
     private registerAppInit = () => {
-        this.on(EmbedEvent.APP_INIT, this.appInitCb);
-        this.on(EmbedEvent.AuthExpire, this.updateAuthToken);
+        this.on(
+            EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true,
+        );
+        this.on(
+            EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true,
+        );
     };
 
     /**
@@ -711,6 +718,8 @@ export class TsEmbed {
      * @param messageType The message type
      * @param callback A callback as a function
      * @param options The message options
+     * @param isSelf
+     * @param isRegisteredBySDK
      * @example
      * ```js
      * tsEmbed.on(EmbedEvent.Error, (data) => {
@@ -730,7 +739,11 @@ export class TsEmbed {
         messageType: EmbedEvent,
         callback: MessageCallback,
         options: MessageOptions = { start: false },
+        isRegisteredBySDK = false,
     ): typeof TsEmbed.prototype {
+        uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_ON}-${messageType}`, {
+            isRegisteredBySDK,
+        });
         if (this.isRendered) {
             this.handleError('Please register event handlers before calling render');
         }
@@ -929,7 +942,6 @@ export class V1Embed extends TsEmbed {
         options: MessageOptions = { start: false },
     ): typeof TsEmbed.prototype {
         const eventType = this.getCompatibleEventType(messageType);
-        uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_ON}-${messageType}`);
         return super.on(eventType, callback, options);
     }
 }

package/src/mixpanel-service.spec.ts

@@ -14,9 +14,10 @@ const config = {
 
 jest.mock('mixpanel-browser', () => ({
     __esModule: true,
-    init: jest.fn(),
+    init: jest.fn().mockReturnThis(),
     identify: jest.fn(),
     track: jest.fn(),
+    register_once: jest.fn(),
 }));
 
 describe('Unit test for mixpanel', () => {
@@ -30,7 +31,7 @@ describe('Unit test for mixpanel', () => {
             isPublicUser: false,
         };
         initMixpanel(sessionInfo);
-        expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken);
+        expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken, undefined, 'tsEmbed');
         expect(mixpanel.identify).toHaveBeenCalledWith(sessionInfo.userGUID);
 
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_CALLED_INIT, {
@@ -45,10 +46,18 @@ describe('Unit test for mixpanel', () => {
             mixpanelToken: 'newToken',
             isPublicUser: true,
             userGUID: 'newUser',
+            clusterId: 'newClusterId',
+            clusterName: 'newClusterName',
+            releaseVersion: 'newReleaseVersion',
         };
         initMixpanel(sessionInfo);
 
-        expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken);
+        expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken, undefined, 'tsEmbed');
+        expect(mixpanel.register_once).toHaveBeenCalledWith({
+            clusterId: sessionInfo.clusterId,
+            clusterName: sessionInfo.clusterName,
+            releaseVersion: sessionInfo.releaseVersion,
+        });
         expect(mixpanel.identify).not.toHaveBeenCalledWith(sessionInfo.userGUID);
     });
 

package/src/mixpanel-service.ts

@@ -6,6 +6,7 @@ export const EndPoints = {
 
 // Needed to avoid error in CJS builds on some bundlers.
 const mixpanelLib = mixpanel.default || mixpanel;
+let mixpanelInstance: mixpanel.Mixpanel;
 
 export const MIXPANEL_EVENT = {
     VISUAL_SDK_RENDER_START: 'visual-sdk-render-start',
@@ -15,6 +16,7 @@ export const MIXPANEL_EVENT = {
     VISUAL_SDK_TRIGGER: 'visual-sdk-trigger',
     VISUAL_SDK_ON: 'visual-sdk-on',
     VISUAL_SDK_IFRAME_LOAD_PERFORMANCE: 'visual-sdk-iframe-load-performance',
+    VISUAL_SDK_EMBED_CREATE: 'visual-sdk-embed-create',
 };
 
 let isMixpanelInitialized = false;
@@ -31,7 +33,7 @@ export function uploadMixpanelEvent(eventId: string, eventProps = {}): void {
         eventQueue.push({ eventId, eventProps });
         return;
     }
-    mixpanelLib.track(eventId, eventProps);
+    mixpanelInstance.track(eventId, eventProps);
 }
 
 /**
@@ -61,10 +63,15 @@ export function initMixpanel(sessionInfo: any): void {
     const token = sessionInfo.mixpanelToken;
     try {
         if (token) {
-            mixpanelLib.init(token);
+            mixpanelInstance = mixpanelLib.init(token, undefined, 'tsEmbed');
             if (!isPublicCluster) {
-                mixpanelLib.identify(sessionInfo.userGUID);
+                mixpanelInstance.identify(sessionInfo.userGUID);
             }
+            mixpanelInstance.register_once({
+                clusterId: sessionInfo.clusterId,
+                clusterName: sessionInfo.clusterName,
+                releaseVersion: sessionInfo.releaseVersion,
+            });
             isMixpanelInitialized = true;
             emptyQueue();
         }

package/src/react/index.spec.tsx

@@ -18,7 +18,9 @@ import {
     SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef, SearchBarEmbed,
 } from './index';
 import * as allExports from './index';
-import { AuthType, init } from '../index';
+import {
+    AuthType, init,
+} from '../index';
 
 import { version } from '../../package.json';
 
@@ -47,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]&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true#/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]&enableDataPanelV2=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true#/embed/answer`,
             );
         });
 
@@ -85,7 +87,7 @@ describe('React Components', () => {
         it('Should be able to trigger events on the embed using refs', async () => {
             mockMessageChannel();
             const TestComponent = () => {
-                const embedRef = useEmbedRef();
+                const embedRef = useEmbedRef<typeof LiveboardEmbed>();
                 const onLiveboardRendered = () => {
                     embedRef.current.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
                 };

package/src/react/index.tsx

@@ -13,33 +13,33 @@ import { EmbedProps, getViewPropsAndListeners } from './util';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
     EmbedConstructor: T,
-) => React.forwardRef<TsEmbed, U>(
-    (props: U, forwardedRef: React.MutableRefObject<TsEmbed>) => {
+) => React.forwardRef<InstanceType<T>, U>(
+    (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
         const ref = React.useRef<HTMLDivElement>(null);
         const { className, ...embedProps } = props;
         const { viewConfig, listeners } = getViewPropsAndListeners<
-                Omit<U, 'className'>,
-                V
-            >(embedProps);
+            Omit<U, 'className'>,
+            V
+        >(embedProps);
         useDeepCompareEffect(() => {
             const tsEmbed = new EmbedConstructor(
-                    ref!.current,
-                    deepMerge(
-                        {
-                            insertAsSibling: viewConfig.insertAsSibling,
-                            frameParams: {
-                                class: viewConfig.insertAsSibling
-                                    ? className || ''
-                                    : '',
-                            },
+                ref!.current,
+                deepMerge(
+                    {
+                        insertAsSibling: viewConfig.insertAsSibling,
+                        frameParams: {
+                            class: viewConfig.insertAsSibling
+                                ? className || ''
+                                : '',
                         },
-                        viewConfig,
-                    ),
-            );
+                    },
+                    viewConfig,
+                ),
+            ) as InstanceType<T>;
             Object.keys(listeners).forEach((eventName) => {
                 tsEmbed.on(
-                        eventName as EmbedEvent,
-                        listeners[eventName as EmbedEvent],
+                    eventName as EmbedEvent,
+                    listeners[eventName as EmbedEvent],
                 );
             });
             tsEmbed.render();
@@ -68,7 +68,7 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
     },
 );
 
-interface SearchProps extends EmbedProps, SearchViewConfig {}
+interface SearchProps extends EmbedProps, SearchViewConfig { }
 
 /**
  * React component for Search Embed.
@@ -87,7 +87,7 @@ export const SearchEmbed = componentFactory<typeof _SearchEmbed, SearchProps, Se
     _SearchEmbed,
 );
 
-interface AppProps extends EmbedProps, AppViewConfig {}
+interface AppProps extends EmbedProps, AppViewConfig { }
 
 /**
  * React component for Full app Embed.
@@ -105,7 +105,7 @@ interface AppProps extends EmbedProps, AppViewConfig {}
  */
 export const AppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConfig>(_AppEmbed);
 
-interface LiveboardProps extends EmbedProps, LiveboardViewConfig {}
+interface LiveboardProps extends EmbedProps, LiveboardViewConfig { }
 
 /**
  * React component for Liveboard embed.
@@ -130,7 +130,7 @@ export const LiveboardEmbed = componentFactory<
 
 export const PinboardEmbed = LiveboardEmbed;
 
-interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig {}
+interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig { }
 
 /**
  * React component for Search bar embed.
@@ -151,7 +151,7 @@ export const SearchBarEmbed = componentFactory<
     SearchBarViewConfig
 >(_SearchBarEmbed);
 
-interface SageEmbedProps extends EmbedProps, SageViewConfig {}
+interface SageEmbedProps extends EmbedProps, SageViewConfig { }
 
 /**
  * React component for LLM based search Sage embed.
@@ -172,6 +172,12 @@ export const SageEmbed = componentFactory<
     SageViewConfig
 >(_SageEmbed);
 
+type EmbedComponent = typeof SearchEmbed
+    | typeof AppEmbed
+    | typeof LiveboardEmbed
+    | typeof SearchBarEmbed
+    | typeof SageEmbed;
+
 /**
  * Get a reference to the embed component to trigger events on the component.
  *
@@ -187,9 +193,12 @@ export const SageEmbed = componentFactory<
  * return <LiveboardEmbed ref={ref} liveboardId={<id>} />
  * }
  * ```
- * @returns {React.MutableRefObject<TsEmbed>} ref
+ * @returns {React.MutableRefObject<T extends TsEmbed>} ref
  */
-export const useEmbedRef = (): React.MutableRefObject<TsEmbed> => React.useRef<TsEmbed>(null);
+export function useEmbedRef<T extends EmbedComponent>():
+    React.MutableRefObject<React.ComponentRef<T>> {
+    return React.useRef<React.ComponentRef<T>>(null);
+}
 
 export {
     LiveboardViewConfig,

package/src/types.ts

@@ -2037,6 +2037,20 @@ export enum HostEvent {
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     SetHiddenTabs = 'SetPinboardHiddenTabs',
+    /**
+     * Updates the search query for sage embed.
+     *
+     * @param - searchOptions: an object queryString and option to execute the query.
+     * @example
+     * ```js
+     * sageEmbed.trigger(HostEvent.UpdateSageQuery, {
+     *  queryString: 'revenue per year',
+     *  executeSearch: true,
+     * })
+     * ```
+     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     */
+    UpdateSageQuery = 'updateSageQuery',
 }
 
 /**
@@ -2095,6 +2109,7 @@ export enum Param {
     DisableLoginRedirect = 'disableLoginRedirect',
     visibleVizs = 'pinboardVisibleVizs',
     LiveboardV2Enabled = 'isPinboardV2Enabled',
+    DataPanelV2Enabled ='enableDataPanelV2',
     ShowAlerts = 'showAlerts',
     Locale = 'locale',
     CustomStyle = 'customStyle',
@@ -2123,8 +2138,8 @@ export enum Param {
     VisibleTabs = 'visibleTabs',
     HideTabPanel = 'hideTabPanel',
     HideSampleQuestions = 'hideSampleQuestions',
-    WorksheetId = 'worksheetId',
-    Query = 'query,'
+    WorksheetId = 'worksheet',
+    Query = 'query'
 }
 
 /**