@thoughtspot/visual-embed-sdk 1.27.8 → 1.28.0-alpha.2

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 {
-    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.
@@ -69,10 +69,6 @@ export interface SearchViewConfig
      * using raw answer data.
      */
     hideResults?: boolean;
-    /**
-     * If set to true, expands all the data sources panel.
-     */
-    expandAllDataSource?: boolean;
     /**
      * If set to true, the Search Assist feature is enabled.
      *
@@ -194,7 +190,6 @@ export class SearchEmbed extends TsEmbed {
     protected getEmbedParams(): string {
         const {
             hideResults,
-            expandAllDataSource,
             enableSearchAssist,
             forceTable,
             searchOptions,
@@ -297,7 +292,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,38 +1,38 @@
 /* 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 {
-    defaultParamsForPinboardEmbed,
+    Action, HomeLeftNavItem, RuntimeFilter, RuntimeFilterOp, HomepageModule,
+} from '../types';
+import {
     executeAfterWait,
-    expectUrlMatchesWithParams,
     getDocumentBody,
     getIFrameEl,
     getIFrameSrc,
     getRootEl,
-    mockMessageChannel,
     postMessageToParent,
+    defaultParamsForPinboardEmbed,
     waitFor,
+    expectUrlMatchesWithParams,
+    mockMessageChannel,
 } 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: {
@@ -615,10 +615,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(),
@@ -675,10 +672,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 = {

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;
@@ -517,7 +520,7 @@ export class TsEmbed {
             : `?${queryString}`;
         let host = this.thoughtSpotHost;
         if (!isUndefined(this.embedConfig.enableReactShell)) {
-            host = (this.embedConfig.enableReactShell as boolean) ? '/v2' : '/v1';
+            host = this.embedConfig.enableReactShell as boolean ? '/v2' : '/v1';
         }
         const path = `${host}/${queryParams}#`;
         return path;
@@ -679,7 +682,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);
 

package/src/index.ts

@@ -46,11 +46,14 @@ import {
     ContextMenuTriggerOptions,
     RuntimeParameter,
     LogLevel,
+    VizPoint,
+    CustomActionPayload,
 } from './types';
 import { CustomCssVariables } from './css-variables';
 import { SageEmbed, SageViewConfig } from './embed/sage';
-import { AnswerService } from './utils/graphql/answerService/answerService';
+import { AnswerService, SessionInterface, UnderlyingDataPoint } from './utils/graphql/answerService/answerService';
 import { getEmbedConfig } from './embed/embedConfig';
+import { uploadMixpanelEvent, MIXPANEL_EVENT } from './mixpanel-service';
 
 export {
     init,
@@ -74,6 +77,8 @@ export {
     AuthEventEmitter,
     AnswerService,
     // types
+    SessionInterface,
+    UnderlyingDataPoint,
     Page,
     AuthType,
     RuntimeFilter,
@@ -103,4 +108,8 @@ export {
     CustomCssVariables,
     RuntimeParameter,
     LogLevel,
+    uploadMixpanelEvent,
+    MIXPANEL_EVENT,
+    VizPoint,
+    CustomActionPayload,
 };

package/src/mixpanel-service.ts

@@ -18,6 +18,7 @@ export const MIXPANEL_EVENT = {
     VISUAL_SDK_ON: 'visual-sdk-on',
     VISUAL_SDK_IFRAME_LOAD_PERFORMANCE: 'visual-sdk-iframe-load-performance',
     VISUAL_SDK_EMBED_CREATE: 'visual-sdk-embed-create',
+    VERCEL_INTEGRATION_COMPLETED: 'vercel-integration-completed',
 };
 
 let isMixpanelInitialized = false;

package/src/react/all-types-export.ts

@@ -18,6 +18,7 @@ export {
     prefetch,
     getInitConfig,
     getSessionInfo,
+    uploadMixpanelEvent,
     PinboardEmbed,
     AuthFailureType,
     AuthStatus,

package/src/react/index.spec.tsx

@@ -199,35 +199,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', () => {

package/src/types.ts

@@ -145,6 +145,7 @@ export enum AuthType {
      *      .then((response) => response.json())
      *      .then((data) => data.token);
      *  }
+     * });
      * ```
      */
     TrustedAuthToken = 'AuthServer',
@@ -470,7 +471,6 @@ export interface EmbedConfig {
      * @version SDK: 1.12.0 | ThoughtSpot: 8.4.0.cl, 8.4.1.sw*
      */
     suppressSearchEmbedBetaWarning?: boolean;
-
     /**
      * Hide `beta` alert warning message for SageEmbed.
      *
@@ -565,7 +565,7 @@ export interface EmbedConfig {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LayoutConfig {}
+export interface LayoutConfig { }
 
 /**
  * Embedded iframe configuration
@@ -767,14 +767,14 @@ export interface ViewConfig {
      * Hide the home page modules
      * eg: hiddenHomepageModules = [HomepageModule.MyLibrary]
      *
-     * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
+     * @version SDK: 1.27.0 | Thoughtspot: 9.12.0.cl
      */
     hiddenHomepageModules?: HomepageModule[];
     /**
      * reordering the home page modules
      * eg: reorderedHomepageModules = [HomepageModule.MyLibrary, HomepageModule.Watchlist]
      *
-     * @version SDK: 1.28.0 | Thoughtspot: 9.9.0.cl
+     * @version SDK: 1.28.0 | Thoughtspot: 9.12.0.cl
      */
     reorderedHomepageModules?: HomepageModule[];
     /**
@@ -801,7 +801,7 @@ export interface ViewConfig {
      * hiddenHomeLeftNavItems = [HomeLeftNavItem.Home]
      * ```
      *
-     * @version SDK: 1.27.0 | Thoughtspot: 9.10.0.cl
+     * @version SDK: 1.27.0 | Thoughtspot: 9.12.0.cl
      */
     hiddenHomeLeftNavItems?: HomeLeftNavItem[];
     /**
@@ -1191,7 +1191,8 @@ export enum EmbedEvent {
      * A custom action has been triggered.
      *
      * @returns actionId - ID of the custom action
-     * @returns data - Response payload with the Answer or Liveboard data
+     * @returns payload {@link CustomActionPayload} - Response payload with the
+     * Answer or Liveboard data
      * @example
      * ```js
      * appEmbed.on(EmbedEvent.customAction, payload => {
@@ -1211,7 +1212,7 @@ export enum EmbedEvent {
      * @example
      * ```js
      * livebaordEmbed.on(EmbedEvent.VizPointDoubleClick, payload => {
-     *      console.log('VizPointDoubleClick', payload)
+     *      console.log('VizPointDoubleClick', payload);
      * })
      * ```
      */
@@ -1237,15 +1238,40 @@ export enum EmbedEvent {
      */
     VizPointClick = 'vizPointClick',
     /**
-     * An error has occurred.
+     * An error has occurred. This event is fired for the following error types:
+     *
+     *  `API` - API call failure error.
+     *
+     *  `FULLSCREEN` - Error when presenting a Liveboard or visualization in full screen mode.
+     *
+     *  `SINGLE_VALUE_FILTER` - Error due to multiple values in the single value filter.
+     *
+     *  `NON_EXIST_FILTER` - Error due to a non-existent filter.
      *
+     *  `INVALID_DATE_VALUE` - Invalid date value error.
+     *
+     *  `INVALID_OPERATOR` - Use of invalid operator during filter application.
+     *
+     *  For more information, see [Developer Documentation](https://developers.thoughtspot.com/docs/events-app-integration#errorType)
      * @returns error - An error object or message
      * @example
      * ```js
-     * SearchEmbed.on(EmbedEvent.Error, showErrorMsg)
-     * //show error messaage
-     *  function showErrorMsg() {
-     *    document.getElementById("error");
+     * // API error
+     * SearchEmbed.on(EmbedEvent.Error, (error) => {
+     *   console.log(error);
+     *  // { type: "Error", data: { errorType: "API", error: { message: '...', error: '...' } } }
+     * });
+     * ```
+     * @example
+     * ```js
+     * // Fullscreen error (Errors during presenting of a liveboard)
+     * LiveboardEmbed.on(EmbedEvent.Error, (error) => {
+     *   console.log(error);
+     *   // { type: "Error", data: { errorType: "FULLSCREEN", error: {
+     *   //   message: "Fullscreen API is not enabled",
+     *   //   stack: "..."
+     *   // } }}
+     * })
      * ```
      */
     Error = 'Error',
@@ -1955,7 +1981,7 @@ export enum EmbedEvent {
     /**
      * Emitted when a LB/viz is renamed
      *
-     * @version SDK : 1.28.0 | ThoughtSpot: 9.11.0.cl
+     * @version SDK : 1.28.0 | ThoughtSpot: 9.10.5.cl
      */
     Rename = 'rename',
 }
@@ -2630,7 +2656,7 @@ export enum HostEvent {
      */
     ResetSearch = 'resetSearch',
     /**
-     * @hidden
+     *
      * Get the currents visible and runtime filters applied on a Liveboard
      * @example
      * liveboardEmbed.trigger(HostEvent.GetFilters)
@@ -2638,7 +2664,7 @@ export enum HostEvent {
      */
     GetFilters = 'getFilters',
     /**
-     * @hidden
+     *
      * Update the visible filters on the Liveboard.
      * @param - filter: filter object containing column name and filter operation and values
      * @example
@@ -3736,15 +3762,15 @@ export interface ColumnValue {
         [key: string]: any;
     };
     value:
-        | string
-        | number
-        | boolean
-        | {
-              v: {
-                  s: number;
-                  e: number;
-              };
-          };
+    | string
+    | number
+    | boolean
+    | {
+        v: {
+            s: number;
+            e: number;
+        };
+    };
 }
 
 export interface VizPoint {
@@ -3752,6 +3778,9 @@ export interface VizPoint {
     selectedMeasures: ColumnValue[];
 }
 
+/**
+ * @group Events
+ */
 export interface CustomActionPayload {
     contextMenuPoints?: {
         clickedPoint: VizPoint;

package/src/utils/authService/authService.spec.ts

@@ -1,11 +1,11 @@
 import {
-    EndPoints,
-    fetchAuthPostService,
-    fetchAuthService,
+    fetchSessionInfoService,
     fetchAuthTokenService,
+    fetchAuthService,
     fetchBasicAuthService,
-    fetchSessionInfoService,
+    fetchAuthPostService,
     verifyTokenService,
+    EndPoints,
 } from '.';
 import { logger } from '../logger';
 

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

@@ -17,7 +17,7 @@ export enum OperationType {
     GetTableWithHeadlineData = 'GetTableWithHeadlineData',
 }
 
-interface UnderlyingDataPoint {
+export interface UnderlyingDataPoint {
     columnId: string;
     dataValue: any;
 }
@@ -41,6 +41,14 @@ interface UnderlyingDataPoint {
  * @group Events
  */
 export class AnswerService {
+    /**
+     * Should not need to be called directly.
+     *
+     * @param session
+     * @param answer
+     * @param thoughtSpotHost
+     * @param selectedPoints
+     */
     constructor(
         private session: SessionInterface,
         private answer: any,
@@ -50,6 +58,10 @@ export class AnswerService {
         this.session = removeTypename(session);
     }
 
+    /**
+     * Get the details about the source used in the answer.
+     * This can be used to get the list of all columns in the data source for example.
+     */
     public async getSourceDetail() {
         const sourceId = this.answer.sources[0].header.guid;
         return getSourceDetail(
@@ -58,6 +70,12 @@ export class AnswerService {
         );
     }
 
+    /**
+     * Remove columnIds and return updated answer session.
+     *
+     * @param columnIds
+     * @returns
+     */
     public async removeColumns(columnIds: string[]) {
         return this.executeQuery(
             queries.removeColumns,
@@ -67,6 +85,12 @@ export class AnswerService {
         );
     }
 
+    /**
+     * Add columnIds and return updated answer session.
+     *
+     * @param columnIds
+     * @returns
+     */
     public async addColumns(columnIds: string[]) {
         return this.executeQuery(
             queries.addColumns,
@@ -76,6 +100,13 @@ export class AnswerService {
         );
     }
 
+    /**
+     * Fetch data from the answer.
+     *
+     * @param offset
+     * @param size
+     * @returns
+     */
     public async fetchData(offset = 0, size = 1000) {
         const { answer } = await this.executeQuery(
             queries.getAnswerData,
@@ -98,6 +129,8 @@ export class AnswerService {
     }
 
     /**
+     * Fetch the data for the answer as a CSV blob. This might be
+     * quicker for larger data.
      *
      * @param userLocale
      * @param includeInfo Include the CSV header in the output
@@ -110,12 +143,22 @@ export class AnswerService {
         });
     }
 
+    /**
+     * Just get the internal URL for this answer's data
+     * as a CSV blob.
+     *
+     * @param userLocale
+     * @param includeInfo
+     * @returns
+     */
     public getFetchCSVBlobUrl(userLocale = 'en-us', includeInfo = false): string {
         return `${this.thoughtSpotHost}/prism/download/answer/csv?sessionId=${this.session.sessionId}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data&hideCsvHeader=${!includeInfo}`;
     }
 
     /**
      * Get underlying data given a point and the output column names.
+     * In case of a context menu action, the selectedPoints are
+     * automatically passed.
      *
      * @param outputColumnNames
      * @param selectedPoints
@@ -179,6 +222,13 @@ export class AnswerService {
         return unaggAnswerSession;
     }
 
+    /**
+     * Execute a custom graphql query in the context of the answer.
+     *
+     * @param query graphql query
+     * @param variables graphql variables
+     * @returns
+     */
     public async executeQuery(query: string, variables: any): Promise<any> {
         const data = await graphqlQuery({
             query,
@@ -194,6 +244,11 @@ export class AnswerService {
         return data;
     }
 
+    /**
+     * Get the internal session details for the answer.
+     *
+     * @returns
+     */
     public getSession() {
         return this.session;
     }