@thoughtspot/visual-embed-sdk 1.33.0-dc.1 → 1.33.1-dc.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.33.0-dc.1",
+    "version": "1.33.1-dc.2",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -37,8 +37,8 @@
     },
     "size-limit": [
         {
-            "path": "lib/src/index.js",
-            "limit": "49 kB"
+            "path": "dist/es/index.js",
+            "limit": "30 kB"
         }
     ],
     "scripts": {
@@ -57,7 +57,7 @@
         "test": "npm run test-sdk",
         "posttest": "cat ./coverage/sdk/lcov.info | coveralls",
         "is-publish-allowed": "node scripts/is-publish-allowed.js",
-        "prepublishOnly": "npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build",
+        "prepublishOnly": "npm run is-publish-allowed && npm run test && npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build",
         "check-size": "npm run build && size-limit",
         "publish-dev": "npm publish --tag dc",
         "publish-prod": "npm publish --tag latest",
@@ -134,7 +134,7 @@
         "react-resize-detector": "^6.6.0",
         "react-test-renderer": "^17.0.2",
         "react-use-flexsearch": "^0.1.1",
-        "rollup": "2.30.0",
+        "rollup": "4.24.0",
         "rollup-plugin-typescript2": "0.27.3",
         "ts-jest": "^26.5.5",
         "ts-loader": "8.0.4",

package/src/embed/app.ts

@@ -346,19 +346,6 @@ export interface AppViewConfig extends Omit<ViewConfig, 'visibleTabs'> {
      * @deprecated Use {@link collapseSearchBar} instead
      */
     collapseSearchBarInitially?: boolean;
-    /**
-     * To enable custom column groups in data panel v2.
-     * @version SDK: 1.32.0 | Thoughtspot: 10.0.0.cl
-     * @default false
-     * @example
-     * ```js
-     * const embed = new AppEmbed('#embed', {
-     *   ... // other app view config
-     *   enableCustomColumnGroups: true,
-     * });
-     * ```
-     */
-    enableCustomColumnGroups?: boolean;
     /**
      * This controls the initial behaviour of custom column groups accordion.
      * It takes DataPanelCustomColumnGroupsAccordionState enum values as input.

package/src/embed/bodyless-conversation.ts

@@ -61,7 +61,7 @@ class ConversationMessage extends TsEmbed {
  * Create a conversation embed, which can be integrated inside
  * chatbots or other conversational interfaces.
  * @group Embed components
- * @version SDK: 1.34.0 | ThoughtSpot: 10.3.0.cl
+ * @version SDK: 1.33.1 | ThoughtSpot: 10.5.0.cl
  */
 export class BodylessConversation {
     private conversationService: ConversationService;

package/src/embed/conversation.spec.ts

@@ -40,7 +40,7 @@ describe('ConversationEmbed', () => {
         await conversationEmbed.render();
         expectUrlMatchesWithParams(
             getIFrameSrc(),
-            `http://${thoughtSpotHost}/v2/?${defaultParams}#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
         );
     });
 });

package/src/embed/conversation.ts

@@ -23,6 +23,21 @@ export interface ConversationViewConfig extends ViewConfig {
     searchOptions?: SearchOptions;
 }
 
+/**
+ * Embed ThoughtSpot AI Conversation.
+ * @group Embed components
+ * @example
+ * ```js
+ * const conversation = new ConversationEmbed('#tsEmbed', {
+ *   worksheetId: 'worksheetId',
+ *   searchOptions: {
+ *     searchQuery: 'searchQuery',
+ *   },
+ * });
+ * conversation.render();
+ * ```
+ * @version SDK: 1.33.1 | ThoughtSpot: 10.5.0.cl
+ */
 export class ConversationEmbed extends TsEmbed {
     constructor(container: HTMLElement, protected viewConfig: ConversationViewConfig) {
         super(container, viewConfig);
@@ -35,6 +50,7 @@ export class ConversationEmbed extends TsEmbed {
         } = this.viewConfig;
         const path = 'insights/conv-assist';
         const queryParams = this.getBaseQueryParams();
+        queryParams[Param.SpotterEnabled] = true;
 
         let query = '';
         const queryParamsString = getQueryParamString(queryParams, true);

package/src/embed/liveboard.ts

@@ -386,6 +386,7 @@ export class LiveboardEmbed extends V1Embed {
             enableAskSage,
             enable2ColumnLayout,
             dataPanelV2 = true,
+            enableCustomColumnGroups = false,
         } = this.viewConfig;
 
         const preventLiveboardFilterRemoval = this.viewConfig.preventLiveboardFilterRemoval
@@ -438,6 +439,7 @@ export class LiveboardEmbed extends V1Embed {
         params[Param.ShowLiveboardReverifyBanner] = showLiveboardReverifyBanner;
 
         params[Param.DataPanelV2Enabled] = dataPanelV2;
+        params[Param.EnableCustomColumnGroups] = enableCustomColumnGroups;
         const queryParams = getQueryParamString(params, true);
 
         return queryParams;

package/src/embed/search.ts

@@ -239,19 +239,6 @@ export interface SearchViewConfig
      * @deprecated Use {@link collapseSearchBar} instead
      */
     collapseSearchBarInitially?: boolean;
-    /**
-     * To enable custom column groups in data panel v2
-     * @version SDK: 1.32.0 | Thoughtspot: 10.0.0.cl
-     * @default false
-     * @example
-     * ```js
-     * const embed = new SearchEmbed('#tsEmbed', {
-     *   ... // other options
-     *   enableCustomColumnGroups: true,
-     * });
-     * ```
-     */
-    enableCustomColumnGroups?: boolean;
     /**
      * Flag to enable onBeforeSearchExecute Embed Event
      * @version: SDK: 1.29.0 | Thoughtspot: 10.1.0.cl

package/src/types.ts

@@ -585,7 +585,6 @@ export interface EmbedConfig {
 
     /**
      * This flag is used to disable showing the login failure page in the embedded app.
-     *
      * @version SDK 1.32.3 | Thoughtspot: *
      */
     disableLoginFailurePage?: boolean;
@@ -1054,6 +1053,19 @@ export interface ViewConfig {
      * ```
      */
     dataPanelV2?: boolean;
+    /**
+     * To enable custom column groups in data panel v2
+     * @version SDK: 1.32.0 | Thoughtspot: 10.0.0.cl
+     * @default false
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *   ... // other options
+     *   enableCustomColumnGroups: true,
+     * });
+     * ```
+     */
+    enableCustomColumnGroups?: boolean;
 }
 
 /**
@@ -1270,7 +1282,6 @@ export interface RuntimeParameter {
  * If you are using React components for embedding, you can register to any
  * events from the `EmbedEvent` list by using the `on<EventName>` convention.
  * For example,`onAlert`, `onCopyToClipboard` and so on.
- *
  *  @example
  * ```js
  * // ...
@@ -1287,7 +1298,6 @@ export interface RuntimeParameter {
  *     );
  * };
  * ```
- *
  * @group Events
  */
 // eslint-disable-next-line no-shadow
@@ -2162,7 +2172,6 @@ export enum EmbedEvent {
      *
      * Prerequisite: Set isOnBeforeGetVizDataInterceptEnabled : true
      * for this embed event to get emitted.
-     *
      * @param: payload
      * @param: responder
      * Contains elements that lets developers define whether ThoughtSpot
@@ -2173,9 +2182,7 @@ export enum EmbedEvent {
      *
      * error: Developers can customize the user facing message when execute is
      * set to false using the error parameter in responder
-     *
      * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
-     *
      * @example
      *```js
      * .on(EmbedEvent.OnBeforeGetVizDataIntercept,
@@ -2262,7 +2269,6 @@ export enum EmbedEvent {
  *
  * You can also attach an Embed event to a Host event to trigger
  * a specific action as shown in this example:
- *
  * @example
  * ```js
  *  const EmbeddedComponent = () => {
@@ -2280,7 +2286,6 @@ export enum EmbedEvent {
  *      );
  *  }
  * ```
- *
  * @group Events
  */
 // eslint-disable-next-line no-shadow
@@ -2582,28 +2587,23 @@ export enum HostEvent {
     /**
      * Trigger the **Make a copy** action on a Liveboard,
      * visualization, or Answer page.
-     *
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.MakeACopy)
      * ```
-     *
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.MakeACopy, {
      * vizId: '730496d6-6903-4601-937e-2c691821af3c'})
      * ```
-     *
      * @example
      * ```js
      * vizEmbed.trigger(HostEvent.MakeACopy)
      * ```
-     *
      * @example
      * ```js
      * searchEmbed.trigger(HostEvent.MakeACopy)
      * ```
-     *
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
     MakeACopy = 'makeACopy',
@@ -2629,7 +2629,6 @@ export enum HostEvent {
     /**
      * Trigger the **Create alert** action on a KPI chart
      * in a Liveboard or saved Answer.
-     *
      * @param - an object with `vizId` as a key
      * @example
      * ```js
@@ -2637,7 +2636,6 @@ export enum HostEvent {
      *  vizId: '730496d6-6903-4601-937e-2c691821af3c'
      * })
      * ```
-     *
      * @example
      * ```js
      * searchEmbed.trigger(HostEvent.CreateMonitor)
@@ -2648,7 +2646,6 @@ export enum HostEvent {
     /**
      * Trigger the **Manage alerts** action on a KPI chart
      * in a visualization or saved Answer.
-     *
      * @param - an object with `vizId` as a key
      * @example
      * ```js
@@ -2656,12 +2653,10 @@ export enum HostEvent {
      *  vizId: '730496d6-6903-4601-937e-2c691821af3c'
      * })
      * ```
-     *
      * @example
      * ```js
      * searchEmbed.trigger(HostEvent.ManageMonitor)
      * ```
-     *
      * @example
      * ```js
      * vizEmbed.trigger(HostEvent.ManageMonitor)
@@ -2991,7 +2986,6 @@ export enum HostEvent {
      *        }
      *    });
      * ```
-     *
      * @example
      *
      * ```js
@@ -3073,7 +3067,6 @@ export enum HostEvent {
     /**
      * Get the answer session for a Search or
      * Liveboard visualization.
-     *
      * @example
      * ```js
      * const {session} = await embed.trigger(
@@ -3081,12 +3074,10 @@ export enum HostEvent {
      *      vizId: '123', // For Liveboard Visualization.
      *  })
      * ```
-     *
      * @example
      * ```js
      * const {session} = await embed.trigger( HostEvent.GetAnswerSession )
      * ```
-     *
      * @version SDK: 1.26.0 | Thoughtspot: 9.10.0.cl
      */
     GetAnswerSession = 'getAnswerSession',
@@ -3261,6 +3252,7 @@ export enum Param {
     ShowLiveboardVerifiedBadge = 'showLiveboardVerifiedBadge',
     ShowLiveboardReverifyBanner = 'showLiveboardReverifyBanner',
     LiveboardHeaderV2 = 'isLiveboardHeaderV2Enabled',
+    SpotterEnabled = 'isSpotterExperienceEnabled',
 }
 
 /**
@@ -3816,7 +3808,6 @@ export enum Action {
     /**
      * @deprecated
      * Reports errors
-     *
      * @example
      * ```js
      * disabledActions: [Action.ReportError]
@@ -4046,14 +4037,12 @@ export enum Action {
      * ```js
      * disabledActions: [Action.RequestVerification]
      * ```
-     *
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     RequestVerification = 'requestVerification',
     /**
      *
-     * Allows users to mark a Liveboard as verified.
-     *
+     *Allows users to mark a Liveboard as verified.
      * @example
      * ```js
      * disabledActions: [Action.MarkAsVerified]
@@ -4064,7 +4053,6 @@ export enum Action {
     /**
      * The **Add Tab** action on a Liveboard.
      * Allows adding a new tab to a Liveboard view.
-     *
      * @example
      * ```js
      * disabledActions: [Action.AddTab]
@@ -4074,8 +4062,7 @@ export enum Action {
     AddTab = 'addTab',
     /**
      *
-     * Initiates contextual change analysis on KPI charts.
-     *
+     *Initiates contextual change analysis on KPI charts.
      * @example
      * ```js
      * disabledActions: [Action.EnableContextualChangeAnalysis]
@@ -4089,7 +4076,6 @@ export enum Action {
      * ```js
      * disabledActions: [Action.ShowSageQuery]
      * ```
-     *
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     ShowSageQuery = 'showSageQuery',
@@ -4104,8 +4090,7 @@ export enum Action {
     EditSageAnswer = 'editSageAnswer',
     /**
      *
-     * This action allows users to send feedback on AI-generated Answers.
-     *
+     *This action allows users to send feedback on AI-generated Answers.
      * @example
      * ```js
      * disabledActions: [Action.SageAnswerFeedback]
@@ -4184,7 +4169,6 @@ export enum Action {
      * hiddenAction: [Action.CreateLiveboard]
      * disabledActions: [Action.CreateLiveboard]
      * ```
-     *
      * @version SDK: 1.32.0 | Thoughtspot: 10.1.0.cl
      */
     CreateLiveboard = 'createLiveboard',
@@ -4291,7 +4275,6 @@ export enum Action {
 
     /**
      * The **Manage Tags** action on Homepage Favourite Module.
-     *
      * @example
      * ```js
      * disabledActions: [Action.ManageTags]

package/src/utils/graphql/answerService/answerService.spec.ts

@@ -165,6 +165,30 @@ describe('Answer service tests', () => {
         );
     });
 
+    test('fetchPNGBlob should call the right API', () => {
+        const answerService = createAnswerService();
+
+        const mockEmbedConfig = {
+            thougthspotHost: '/test',
+            authType: AuthType.TrustedAuthTokenCookieless,
+        };
+        jest.spyOn(embedConfigInstance, 'getEmbedConfig').mockReturnValueOnce(mockEmbedConfig);
+        jest.spyOn(authTokenInstance, 'getAuthenticationToken').mockReturnValueOnce(Promise.resolve('token'));
+        const mockTokenizedFetch = jest.spyOn(tokenizedFetch, 'tokenizedFetch');
+        answerService.fetchPNGBlob(undefined, true);
+
+        expect(mockTokenizedFetch).toHaveBeenCalledWith(`https://tshost/prism/download/answer/png?sessionId=${defaultSession.sessionId}&deviceScaleFactor=2&omitBackground=true&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data`, expect.objectContaining({}));
+
+        answerService.fetchPNGBlob('en-uk', true);
+        expect(mockTokenizedFetch).toHaveBeenCalledWith(`https://tshost/prism/download/answer/png?sessionId=${defaultSession.sessionId}&deviceScaleFactor=2&omitBackground=true&genNo=${defaultSession.genNo}&userLocale=en-uk&exportFileName=data`, expect.objectContaining({}));
+
+        answerService.fetchPNGBlob(undefined, false);
+        expect(mockTokenizedFetch).toHaveBeenCalledWith(`https://tshost/prism/download/answer/png?sessionId=${defaultSession.sessionId}&deviceScaleFactor=2&omitBackground=false&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data`, expect.objectContaining({}));
+
+        answerService.fetchPNGBlob(undefined, true, 3);
+        expect(mockTokenizedFetch).toHaveBeenCalledWith(`https://tshost/prism/download/answer/png?sessionId=${defaultSession.sessionId}&deviceScaleFactor=3&omitBackground=true&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data`, expect.objectContaining({}));
+    });
+
     test('getUnderlyingDataForPoint should call the right APIs', async () => {
         fetchMock.mockResponses(
             JSON.stringify({

package/src/utils/graphql/answerService/answerService.ts

@@ -227,7 +227,7 @@ export class AnswerService {
      * @param deviceScaleFactor The scale factor for the PNG
      * @return Response
      */
-    public async fetchPNGBlob(userLocale = 'en-us', includeInfo = false, omitBackground = false, deviceScaleFactor = 2): Promise<Response> {
+    public async fetchPNGBlob(userLocale = 'en-us', omitBackground = false, deviceScaleFactor = 2): Promise<Response> {
         const fetchUrl = this.getFetchPNGBlobUrl(
             userLocale,
             omitBackground,

package/src/utils/graphql/nlsService/nls-answer-service.ts

@@ -4,10 +4,15 @@ import { graphqlQuery } from '../graphql-request';
 import * as queries from './nls-answer-queries';
 
 /**
- *
+ * Get answer from natural language query
  * @param query string
  * @param worksheetId string
- * @returns answerService AnswerService
+ * @returns AnswerService and the suggestion response.
+ * @version SDK: 1.33.1 | ThoughtSpot: 10.3.0.cl
+ * @example
+ * ```js
+ * const { answer } = await getAnswerFromQuery('revenue', 'worksheetId');
+ * ```
  */
 export const getAnswerFromQuery = async (
     query: string,

package/src/utils/liveboardService/liveboardService.ts

@@ -3,6 +3,19 @@ import { AnswerService } from '../graphql/answerService/answerService';
 import { getEmbedConfig } from '../../embed/embedConfig';
 import { executeTML } from '../../embed/base';
 
+/**
+ * Create a liveboard with the given answers
+ * @param answers AnswerService[]
+ * @param name string
+ * @returns result Promise
+ * @version SDK: 1.33.1 | ThoughtSpot: *
+ * @example
+ * ```js
+ *   const lb = createLiveboardWithAnswers([
+ *      new AnswerService(session, null, 'tshost'),
+ *   ], "my-liveboard");
+ * ```
+ */
 export const createLiveboardWithAnswers = async (
     answers: AnswerService[],
     name: string,