@thoughtspot/visual-embed-sdk
Version:
ThoughtSpot Embed SDK
1,629 lines (1,589 loc) • 155 kB
text/typescript
/**
* Copyright (c) 2023
*
* TypeScript type definitions for ThoughtSpot Visual Embed SDK
* @summary Type definitions for Embed SDK
* @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
*/
import { CustomCssVariables } from './css-variables';
import type { SessionInterface } from './utils/graphql/answerService/answerService';
/**
* The authentication mechanism for allowing access to the
* the embedded app
* @group Authentication / Init
*/
// eslint-disable-next-line no-shadow
export enum AuthType {
/**
* No authentication on the SDK. Pass-through to the embedded App. Alias for
* `Passthrough`.
* @example
* ```js
* init({
* // ...
* authType: AuthType.None,
* });
* ```
*/
None = 'None',
/**
* Passthrough SSO to the embedded application within the iframe. Requires least
* configuration, but may not be supported by all IDPs. This will behave like `None`
* if SSO is not configured on ThoughtSpot.
*
* To use this:
* Your SAML or OpenID provider must allow iframe redirects.
* For example, if you are using Okta as IdP, you can enable iframe embedding.
* @example
* ```js
* init({
* // ...
* authType: AuthType.EmbeddedSSO,
* });
* ```
* @version: SDK: 1.15.0 | ThoughtSpot: 8.8.0.cl
*/
EmbeddedSSO = 'EmbeddedSSO',
/**
* SSO using SAML
* @deprecated Use {@link SAMLRedirect} instead
* @hidden
*/
SSO = 'SSO_SAML',
/**
* SSO using SAML
* @deprecated Use {@link SAMLRedirect} instead
* @hidden
*/
SAML = 'SSO_SAML',
/**
* SSO using SAML
* Makes the host application redirect to the SAML IdP. Use this
* if your IdP does not allow itself to be embedded.
*
* This redirects the host application to the SAML IdP. The host application
* will be redirected back to the ThoughtSpot app after authentication.
* @example
* ```js
* init({
* // ...
* authType: AuthType.SAMLRedirect,
* });
* ```
*
* This opens the SAML IdP in a popup window. The popup is triggered
* when the user clicks the trigger button. The popup window will be
* closed automatically after authentication.
* @example
* ```js
* init({
* // ...
* authType: AuthType.SAMLRedirect,
* authTriggerText: 'Login with SAML',
* authTriggerContainer: '#embed-container',
* inPopup: true,
* });
* ```
*
* Can also use the event to trigger the popup flow. Works the same
* as the above example.
* @example
* ```js
* const authEE = init({
* // ...
* authType: AuthType.SAMLRedirect,
* inPopup: true,
* });
*
* someButtonOnYourPage.addEventListener('click', () => {
* authEE.emit(AuthEvent.TRIGGER_SSO_POPUP);
* });
* ```
*/
SAMLRedirect = 'SSO_SAML',
/**
* SSO using OIDC
* @hidden
* @deprecated Use {@link OIDCRedirect} instead
*/
OIDC = 'SSO_OIDC',
/**
* SSO using OIDC
* Will make the host application redirect to the OIDC IdP.
* See code samples in {@link SAMLRedirect}.
*/
OIDCRedirect = 'SSO_OIDC',
/**
* Trusted authentication server
* @hidden
* @deprecated Use {@link TrustedAuth} instead
*/
AuthServer = 'AuthServer',
/**
* Trusted authentication server. Use your own authentication server
* which returns a bearer token, generated using the `secret_key` obtained
* from ThoughtSpot.
* @example
* ```js
* init({
* // ...
* authType: AuthType.TrustedAuthToken,
* getAuthToken: () => {
* return fetch('https://my-backend.app/ts-token')
* .then((response) => response.json())
* .then((data) => data.token);
* }
* });
* ```
*/
TrustedAuthToken = 'AuthServer',
/**
* Trusted authentication server Cookieless, Use your own authentication
* server which returns a bearer token, generated using the `secret_key`
* obtained from ThoughtSpot. This uses a cookieless authentication
* approach, recommended to bypass the third-party cookie-blocking restriction
* implemented by some browsers.
* @example
* ```js
* init({
* // ...
* authType: AuthType.TrustedAuthTokenCookieless,
* getAuthToken: () => {
* return fetch('https://my-backend.app/ts-token')
* .then((response) => response.json())
* .then((data) => data.token);
* }
* ```
* @version SDK: 1.22.0| ThoughtSpot: 9.3.0.cl, 9.5.1.sw
*/
TrustedAuthTokenCookieless = 'AuthServerCookieless',
/**
* Use the ThoughtSpot login API to authenticate to the cluster directly.
*
* Warning: This feature is primarily intended for developer testing. It is
* strongly advised not to use this authentication method in production.
*/
Basic = 'Basic',
}
/**
*
* This option does not apply to the classic homepage experience.
* To access the updated modular homepage,
* set `modularHomeExperience` to `true`
* (available as Early Access feature in 9.12.5.cl).
*
*/
export enum HomeLeftNavItem {
/**
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
SearchData = 'search-data',
/**
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
Home = 'insights-home',
/**
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
Liveboards = 'liveboards',
/**
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
Answers = 'answers',
/**
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
MonitorSubscription = 'monitor-alerts',
/**
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl
*/
SpotIQAnalysis = 'spotiq-analysis',
/**
* @version SDK: 1.34.0| ThoughtSpot: 10.3.0.cl
*/
LiveboardSchedules = 'liveboard-schedules'
}
export type DOMSelector = string | HTMLElement;
/**
* inline customCSS within the {@link CustomisationsInterface}.
* Use {@link CustomCssVariables} or css rules.
*/
export interface customCssInterface {
/**
* The custom css variables, which can be set.
* The variables are available in the {@link CustomCssVariables}
* interface. For more information, see
* link:https://developers.thoughtspot.com/docs/css-variables-reference[CSS variable reference].
*/
variables?: CustomCssVariables;
/**
* Can be used to define a custom font face
* like:
* @example
* ```js
* rules_UNSTABLE?: {
* "@font-face": {
* "font-family": "custom-font",
* "src": url("/path/")
* };
* };
* ```
*
* Also, custom css rules outside of variables.
* @example
* ```js
* rules_UNSTABLE?: {
* ".thoughtspot_class_name": {
* "border-radius": "10px",
* margin: "20px"
* };
* };
* ```
*/
// eslint-disable-next-line camelcase
rules_UNSTABLE?: {
[selector: string]: {
[declaration: string]: string;
};
};
}
/**
* Styles within the {@link CustomisationsInterface}.
*/
export interface CustomStyles {
customCSSUrl?: string;
customCSS?: customCssInterface;
}
/**
* Configuration to define the customization on the Embedded
* ThoughtSpot components.
* You can customize styles, text strings, and icons.
* For more information, see https://developers.thoughtspot.com/docs/custom-css.
* @example
* ```js
* init({
* // ...
* customizations: {
* style: {
* customCSS: {
* variables: {},
* rules_UNSTABLE: {}
* }
* },
* content: {
* strings: {
* 'LIVEBOARDS': 'Dashboards',
* 'ANSWERS': 'Visualizations',
* 'Edit': 'Modify',
* 'Show underlying data': 'Show source data',
* 'SpotIQ': 'Insights',
* 'Monitor': 'Alerts',
* }
* },
* iconSpriteUrl: 'https://my-custom-icon-sprite.svg'
* }
* })
* ```
*/
export interface CustomisationsInterface {
style?: CustomStyles;
content?: {
/**
* @version SDK: 1.26.0 | 9.7.0.cl
*/
strings?: Record<string, any>;
[key: string]: any;
};
iconSpriteUrl?: string;
}
/**
* The configuration object for embedding ThoughtSpot content.
* It includes the ThoughtSpot hostname or IP address,
* the type of authentication, and the authentication endpoint
* if a trusted authentication server is used.
* @group Authentication / Init
*/
export interface EmbedConfig {
/**
* The ThoughtSpot cluster hostname or IP address.
*/
thoughtSpotHost: string;
/**
* The authentication mechanism to use.
*/
authType: AuthType;
/**
* [AuthServer] The trusted authentication endpoint to use to get the
* authentication token. A `GET` request is made to the
* authentication API endpoint, which returns the token
* as a plaintext response. For trusted authentication,
* the `authEndpoint` or `getAuthToken` attribute is required.
*/
authEndpoint?: string;
/**
* [AuthServer] A function that invokes the trusted authentication endpoint
* and returns a Promise that resolves to the `auth token` string.
* For trusted authentication, the `authEndpoint` or `getAuthToken`
* attribute is required.
*
* It is advisable to fetch a new token inside this method and not
* reuse the old issued token. When auth expires this method is
* called again and if it is called with an older token, the authentication
* will not succeed.
*/
getAuthToken?: () => Promise<string>;
/**
* [AuthServer / Basic] The user name of the ThoughtSpot user. This
* attribute is required for trusted authentication.
*/
username?: string;
/**
* [Basic] The ThoughtSpot login password corresponding to the username
*
* Warning: This feature is primarily intended for developer testing. It is
* strongly advised not to use this authentication method in production.
*/
password?: string;
/**
* [SSO] For SSO Authentication, if `noRedirect` is set to true, it will
* open the SAML auth flow in a popup, instead of redirecting the browser in
* place.
* @default false
* @deprecated
*/
noRedirect?: boolean;
/**
* [SSO] For SSO Authentication, if `inPopup` is set to true, it will open
* the SAML auth flow in a popup, instead of redirecting the browser in place.
*
* Need to use this with `authTriggerContainer`. Or manually trigger
* the `AuthEvent.TRIGGER_SSO_POPUP` event on a user interaction.
* @default false
* @version SDK: 1.18.0
*/
inPopup?: boolean;
/**
* [SSO] For SSO Authentication, one can supply an optional path param;
* This will be the path on the host origin where the SAML flow will be
* terminated.
*
* Eg: "/dashboard", "#/foo" [Do not include the host]
* @version SDK: 1.10.2 | ThoughtSpot 8.2.0.cl, 8.4.1.sw
*/
redirectPath?: string;
/** @internal */
basepath?: string;
/**
* Boolean to define if the query parameters in the ThoughtSpot URL
* should be encoded in base64. This provides additional security to
* ThoughtSpot clusters against cross-site scripting attacks.
* @default false
*/
shouldEncodeUrlQueryParams?: boolean;
/**
* Suppress cookie access alert when third-party cookies are blocked by the
* user's browser. Third-party cookie blocking is the default behaviour on
* some web browsers like Safari. If you set this attribute to `true`,
* you are encouraged to handle `noCookieAccess` event, to show your own treatment
* in this case.
* @default false
*/
suppressNoCookieAccessAlert?: boolean;
/**
* Ignore the cookie access alert when third-party cookies are blocked by the
* user's browser. If you set this to `true`, the embedded iframe behaviour
* persists even in the case of a non-logged-in user.
* @default false
*/
ignoreNoCookieAccess?: boolean;
/**
* Re-login a user with the previous login options
* when a user session expires.
* @default false
*/
autoLogin?: boolean;
/**
* Disable redirection to the login page when the embedded session expires
* This flag is typically used alongside the combination of authentication modes such
* as {@link AuthType.AuthServer} and auto-login behavior {@link
* EmbedConfig.autoLogin}
* @version SDK: 1.9.3 | ThoughtSpot: 8.1.0.cl, 8.4.1.sw
* @default false
*/
disableLoginRedirect?: boolean;
/**
* This message is displayed in the embedded view when a user login fails.
* @version SDK: 1.10.1 | ThoughtSpot: 8.2.0.cl, 8.4.1.sw
*/
loginFailedMessage?: string;
/**
* Calls the prefetch method internally when set to `true`
* @default false
*/
callPrefetch?: boolean;
/**
* When there are multiple objects embedded, queue the rendering of embedded objects
* to start after the previous embed's render is complete. This helps improve
* performance by decreasing the load on the browser.
* @Version SDK: 1.5.0 | ThoughtSpot: ts7.oct.cl, 7.2.1
* @default false
*/
queueMultiRenders?: boolean;
/**
* [AuthServer|Basic] Detect if third-party party cookies are enabled by doing an
* additional call. This is slower and should be avoided. Listen to the
* `NO_COOKIE_ACCESS` event to handle the situation.
*
* This is slightly slower than letting the browser handle the cookie check, as it
* involves an extra network call.
* @version SDK: 1.10.4 | ThoughtSpot: 8.2.0.cl, 8.4.1.sw
*/
detectCookieAccessSlow?: boolean;
/**
* Hide the `beta` alert warning message for SearchEmbed.
* @version SDK: 1.12.0 | ThoughtSpot: 8.4.0.cl, 8.4.1.sw*
*/
suppressSearchEmbedBetaWarning?: boolean;
/**
* Hide `beta` alert warning message for SageEmbed.
*
*/
suppressSageEmbedBetaWarning?: boolean;
/**
* Custom style params for embed Config.
* @version SDK: 1.17.0 | ThoughtSpot: 8.9.0.cl, 9.0.1.sw
*/
customizations?: CustomisationsInterface;
/**
* For `inPopup` SAMLRedirect or OIDCRedirect authentication, we need a
* button that the user can click to trigger the flow.
* This attribute sets a containing element for that button.
* @example
* ```js
* init({
* authType: AuthType.SAMLRedirect,
* inPopup: true,
* authTriggerContainer: '#auth-trigger-container'
* })
* ```
* @version SDK: 1.17.0 | ThoughtSpot: 8.9.0.cl, 9.0.1.sw
*/
authTriggerContainer?: string | HTMLElement;
/**
* Specify that we want to use the `AuthEvent.TRIGGER_SSO_POPUP` event to trigger
* SAML popup. This is useful when you want to trigger the popup on a custom user
* action.
*
*/
useEventForSAMLPopup?: boolean;
/**
* Text to show in the button which triggers the popup auth flow.
* Default: `Authorize`.
* @version SDK: 1.17.0 | ThoughtSpot: 8.9.0.cl, 9.0.1.sw
*/
authTriggerText?: string;
/**
* Prevent users from accessing the full application or ThoughtSpot application pages
* access to the embedded application users
* outside of the iframe.
* @default true
* @version SDK: 1.22.0 | ThoughtSpot: 9.3.0.cl, 9.5.1.sw
*/
blockNonEmbedFullAppAccess?: boolean;
/**
* Host config in case embedded app is inside TS app itself
* @hidden
*/
hostConfig?: {
hostUserGuid: string;
hostClusterId: string;
hostClusterName: string;
};
/**
* Pendo API key to enable Pendo tracking to your own subscription, the key
* is added as an additional key to the embed, as per this link:https://support.pendo.io/hc/en-us/articles/360032201951-Send-data-to-multiple-subscriptions[document].
* @version SDK: 1.27.0 | ThoughtSpot: 9.8.0.cl
*/
pendoTrackingKey?: string;
/**
* If passed as true all alerts will be suppressed in the embedded app.
* @version SDK: 1.26.2 | ThoughtSpot: *
*/
suppressErrorAlerts?: boolean;
/**
* Suppress or show specific types of logs in the console output.
* For example, `LogLevel.ERROR` shows only Visual Embed SDK and
* ThoughtSpot application errors and suppresses
* other logs such as warnings, information alerts,
* and debug messages in the console output.
*
* @default LogLevel.ERROR
* @example
* ```js
* init({
* ...embedConfig,
* logLevel: LogLevel.SILENT
* })
* ```
* @version SDK: 1.26.7 | ThoughtSpot: 9.10.0.cl
*/
logLevel?: LogLevel;
/**
* Disables the Mixpanel tracking from the SDK.
* @version SDK: 1.27.9
*/
disableSDKTracking?: boolean;
/**
* Overrides default/user preferred locale for date formatting
* @version SDK: 1.28.4 | ThoughtSpot: 10.0.0.cl, 9.5.0.sw
*/
dateFormatLocale?: string;
/**
* Overrides default/user preferred locale for number formatting
* @version SDK: 1.28.4 | ThoughtSpot: 10.0.0.cl, 9.5.0.sw
*/
numberFormatLocale?: string;
/**
* Format to be used for currency when currency format is set to infer from browser
* @version SDK: 1.28.4 | ThoughtSpot: 10.0.0.cl, 9.5.0.sw
*/
currencyFormat?: string;
/**
* This flag is used to disable the token verification in the SDK.
* Enabling this flag will also disable the caching of the token.
* @hidden
* @example
* ```js
* init({
* ...embedConfig,
* disableTokenVerification : true
* })
* ```
* @version SDK: 1.28.5 | ThoughtSpot: 9.10.0.cl, 10.1.0.sw
*/
disableTokenVerification?: boolean;
/**
* This flag is used to disable showing the login failure page in the embedded app.
* @version SDK 1.32.3 | ThoughtSpot: 10.1.0.cl, 10.1.0.sw
*/
disableLoginFailurePage?: boolean;
/**
* This is an object (key/val) of override flags which will be applied
* to the internal embedded object. This can be used to add any
* URL flag.
* Warning: This option is for advanced use only and is used internally
* to control embed behavior in non-regular ways. We do not publish the
* list of supported keys and values associated with each.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* additionalFlags: {
* flag1: 'value1',
* flag2: 'value2'
* }
* });
* ```
* @version SDK: 1.33.5 | ThoughtSpot: *
*/
additionalFlags?: { [key: string]: string | number | boolean };
/**
* This is an object (key/val) for customVariables being
* used by the third party tool's script.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* customVariablesForThirdPartyTools: {
* key1: 'value1',
* key2: 'value2'
* }
* });
* ```
* @version SDK 1.37.0 | ThoughtSpot: 10.7.0.cl
*/
customVariablesForThirdPartyTools?: Record< string, any >;
disablePreauthCache?: boolean;
}
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface LayoutConfig {}
/**
* Embedded iframe configuration
* @group Embed components
*/
export interface FrameParams {
/**
* The width of the iframe (unit is pixels if numeric).
*/
width?: number | string;
/**
* The height of the iframe (unit is pixels if numeric).
*/
height?: number | string;
/**
* Set to 'lazy' to enable lazy loading of the embedded TS frame.
* This will defer loading of the frame until it comes into the
* viewport. This is useful for performance optimization.
*/
loading?: 'lazy' | 'eager' | 'auto';
/**
* This parameters will be passed on the iframe
* as is.
*/
[key: string]: string | number | boolean | undefined;
}
/**
* The configuration object for an embedded view.
*/
export interface ViewConfig {
/**
* @hidden
*/
layoutConfig?: LayoutConfig;
/**
* The width and height dimensions to render an embedded
* object inside your app. Specify the values in pixels or percentage.
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 7.2.1
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* frameParams: {
* width: '500px' | '50%',
* height: '400px' | '60%',
* },
* });
* ```
*/
frameParams?: FrameParams;
/**
* @hidden
*/
theme?: string;
/**
* @hidden
*/
// eslint-disable-next-line camelcase
styleSheet__unstable?: string;
/**
* The list of actions to disable from the primary menu, more menu
* (...), and the contextual menu. These actions will be disabled
* for the user.
* Use this to disable actions.
* @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1.sw
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* disabledActions: [Action.Download, Action.Save]
* });
* ```
*/
disabledActions?: Action[];
/**
* The tooltip to display for disabled actions.
* @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1.sw
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* disabledActions: [Action.Download, Action.Save]
* disabledActionReason: "Reason for disabling",
* });
* ```
*/
disabledActionReason?: string;
/**
* The list of actions to hide from the embedded.
* This actions will be hidden from the user.
* Use this to hide an action.
* @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1.sw
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* hiddenActions: [Action.Download, Action.Export]
* });
* ```
* @important
*/
hiddenActions?: Action[];
/**
* The list of actions to display from the primary menu, more menu
* (...), and the contextual menu. These will be only actions that
* are visible to the user.
* Use this to hide all actions except the ones you want to show.
*
* Use either this or hiddenActions.
* @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1.sw
* @important
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* visibleActions: [Action.Download, Action.Export]
* });
* ```
*/
visibleActions?: Action[];
/**
* Show alert messages and toast messages in the embedded
* view in full app embed.
* @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
* @example
* ```js
* const embed = new AppEmbed('#embed-container', {
* ... // other options
* showAlerts:true,
* })
* ```
*/
showAlerts?: boolean;
/**
* The list of runtime filters to apply to a search Answer,
* visualization, or Liveboard.
* @version SDK: 1.9.4 | ThoughtSpot 8.1.0.cl, 8.4.1.sw
* @example
* ```js
* const embed = new LiveboardEmbed('#embed-container', {
* ... // other options
* runtimeFilters: [
* {
* columnName: 'value',
* operator: RuntimeFilterOp.EQ,
* values: ['string' | 123 | true],
* },
* ],
* })
* ```
*/
runtimeFilters?: RuntimeFilter[];
/**
* The list of parameter override to apply to a search Answer,
* visualization, or Liveboard.
* @version SDK : 1.25.0 | ThoughtSpot: 9.2.0.cl, 9.5.0.sw
* @example
* ```js
* const embed = new LiveboardEmbed('#embed-container', {
* ... // other options
* runtimeParameters: [
* {
* name: 'value',
* value: 'string' | 123 | true,
* },
* ],
* })
* ```
*/
runtimeParameters?: RuntimeParameter[];
/**
* The locale settings to apply to the embedded view.
* @version SDK: 1.9.4 | ThoughtSpot 8.1.0.cl, 8.4.1.sw
* @example
* ```js
* const embed = new LiveboardEmbed('#embed-container', {
* ... // other options
* locale:'en',
* })
* ```
*/
locale?: string;
/**
* This is an object (key/val) of override flags which will be applied
* to the internal embedded object. This can be used to add any
* URL flag.
* If the same flags are passed in init, they will be overriden by the values here.
* Warning: This option is for advanced use only and is used internally
* to control embed behavior in non-regular ways. We do not publish the
* list of supported keys and values associated with each.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* additionalFlags: {
* flag1: 'value1',
* flag2: 'value2'
* }
* });
* ```
* @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl, 8.4.1.sw
*/
additionalFlags?: { [key: string]: string | number | boolean };
/**
* Dynamic CSSUrl and customCSS to be injected in the loaded application.
* You would also need to set `style-src` in the CSP settings.
* @version SDK: 1.17.2 | ThoughtSpot: 8.4.1.sw, 8.4.0.cl
* @default ''
*/
customizations?: CustomisationsInterface;
/**
* Insert as a sibling of the target container, instead of appending to a
* child inside it.
* @version SDK: 1.2.0 | ThoughtSpot: 9.0.0.cl, 9.0.0.sw
* @example
* ```js
* const embed = new LiveboardEmbed('#embed-container', {
* ... // other options
* insertAsSibling:true,
* })
* ```
*/
insertAsSibling?: boolean;
/**
* flag to set ContextMenu Trigger to either left or right click.
* @example
* ```js
* const embed = new LiveboardEmbed('#tsEmbed', {
* ... // other options
* contextMenuTrigger:ContextMenuTriggerOptions.LEFT_CLICK || RIGHT_CLICK,
* })
* ```
* @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
*/
contextMenuTrigger?: ContextMenuTriggerOptions;
/**
* Flag to override the *Open Link in New Tab* context menu option.
* @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
* @example
* ```js
* const embed = new LiveboardEmbed('#embed-container', {
* ... // other options
* linkOverride:false,
* })
* ```
*/
linkOverride?: boolean;
/**
* flag to enable insert into slides action
* @hidden
* @private
*/
insertInToSlide?: boolean;
/**
* Use a pre-rendered iframe from a pool of pre-rendered iframes
* if available and matches the configuration.
* @version SDK: 1.22.0
* @hidden
*
* See [docs]() on how to create a prerender pool.
*/
usePrerenderedIfAvailable?: boolean;
/**
* Boolean to exclude runtimeFilters in the URL
* By default it is true, this flag removes runtime filters from the URL
* when set to false, runtime filters will be included in the URL.
*
* Irrespective of this flag, runtime filters ( if passed ) will be applied to the
* embedded view.
* @default false
* @version SDK: 1.24.0 | ThoughtSpot: 9.5.0.cl
*/
excludeRuntimeFiltersfromURL?: boolean;
/**
* The list of tab IDs to hide from the embedded.
* This Tabs will be hidden from their respective LBs.
* Use this to hide an tabID.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* hiddenTabs: [
* '430496d6-6903-4601-937e-2c691821af3c',
* 'f547ec54-2a37-4516-a222-2b06719af726']
* });
* ```
* @version SDK: 1.26.0 | ThoughtSpot: 9.7.0.cl, 10.1.0.sw
*/
hiddenTabs?: string[];
/**
* Hide the home page modules
* For example: hiddenHomepageModules = [HomepageModule.MyLibrary]
*
* **Note**: This option does not apply to the classic homepage.
* To access the updated modular homepage, set
* `modularHomeExperience` to `true` (available as Early Access feature in 9.12.5.cl).
* @version SDK: 1.28.0 | ThoughtSpot: 9.12.5.cl, 10.1.0.sw
* @example
* ```js
* const embed = new AppEmbed('#tsEmbed', {
* ... // other options
* hiddenHomepageModules : [HomepageModule.Favorite,HomepageModule.Learning],
* })
* ```
*/
hiddenHomepageModules?: HomepageModule[];
/**
* reordering the home page modules
* eg: reorderedHomepageModules = [HomepageModule.MyLibrary, HomepageModule.Watchlist]
*
* **Note**: This option does not apply to the classic homepage.
* To access the updated modular homepage, set
* `modularHomeExperience` to `true` (available as Early Access feature in 9.12.5.cl).
* @version SDK: 1.28.0| ThoughtSpot: 9.12.5.cl, 10.1.0.sw
* @example
* ```js
* const embed = new AppEmbed('#tsEmbed', {
* ... // other options
* reorderedHomepageModules:[HomepageModule.Favorite,HomepageModule.MyLibrary]
* })
* ```
*/
reorderedHomepageModules?: HomepageModule[];
/**
* The list of tab IDs to show in the embedded Liveboard.
* Only the tabs specified in the array will be shown in the Liveboard.
*
* Use either `visibleTabs` or `hiddenTabs`.
* @version SDK: 1.26.0 | ThoughtSpot: 9.7.0.cl, 10.1.0.sw
* @example
* ```js
* const embed = new LiveboardEmbed('#embed-container', {
* ... // other options
* visibleTabs: [
* '430496d6-6903-4601-937e-2c691821af3c',
* 'f547ec54-2a37-4516-a222-2b06719af726'
* ]
* })
* ```
*/
visibleTabs?: string[];
/**
* homepageLeftNavItems : Show or hide the left navigation bar items.
* There are 8 eight home navigation list items.
* To hide these items, specify the string in the array.
* @example
* ```js
* const embed = new AppEmbed('#tsEmbed', {
* ... // other options
* hiddenHomeLeftNavItems : [HomeLeftNavItem.Home,HomeLeftNavItem.Answers],
* })
* ```
*
* **Note**: This option does not apply to the classic homepage.
* To access the updated modular homepage, set
* `modularHomeExperience` to `true` (available as Early Access feature in 9.12.5.cl).
* @version SDK: 1.28.0 | ThoughtSpot: 9.12.5.cl, 10.1.0.sw
*/
hiddenHomeLeftNavItems?: HomeLeftNavItem[];
/**
* PreRender id to be used for PreRendering the embed.
* Use PreRender to render the embed in the background and then
* show or hide the rendered embed using showPreRender or hidePreRender respectively.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other liveboard view config
* preRenderId: "preRenderId-123"
* });
* embed.showPreRender();
* ```
* @version SDK: 1.25.0 | ThoughtSpot: 9.6.0.cl, 9.8.0.sw
*/
preRenderId?: string;
/**
* Determines if the PreRender component should dynamically track the size
* of its embedding element and adjust its own size accordingly.
* Enabling this option allows the PreRender component to automatically adapt
* its dimensions based on changes to the size of the embedding element.
* @type {boolean}
* @default false
* @version SDK: 1.24.0 | ThoughtSpot:9.4.0.cl, 9.4.0.sw
* @example
* ```js
* // Disable tracking PreRender size in the configuration
* const config = {
* doNotTrackPreRenderSize: true,
* };
*
* // Instantiate an object with the configuration
* const myComponent = new MyComponent(config);
* ```
*/
doNotTrackPreRenderSize?: boolean;
/**
* For internal tracking of the embed component type.
* @hidden
*/
embedComponentType?: string;
/**
* Boolean to exclude runtimeParameters from the URL
* when set to true, this flag removes runtime parameters from the URL.
*
* Irrespective of this flag, runtime filters ( if passed ) will be applied to the
* embedded view.
* @default false
* @version SDK: 1.29.0 | ThoughtSpot: 10.1.0.cl
*/
excludeRuntimeParametersfromURL?: boolean;
/**
* Enable the V2 shell. This can provide performance benefits
* due to a lighterweight shell.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* liveboardId: '123',
* enableV2Shell_experimental: true
* });
* ```
* @version SDK: 1.31.2 | ThoughtSpot: 10.0.0.cl
*/
// eslint-disable-next-line camelcase
enableV2Shell_experimental?: boolean;
/**
* To set the initial state of the search bar in case of saved Answers.
* @default true
* @version SDK: 1.34.0 | ThoughtSpot: 10.3.0.cl
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* liveboardId: '123',
* collapseSearchBar: true
* });
*/
collapseSearchBar?: boolean;
/**
* This flag can be used to disable links inside the embedded app,
* and disable redirection of links in a new tab.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* disableRedirectionLinksInNewTab: true
* });
* ```
* @version SDK: 1.32.1 | ThoughtSpot: 10.3.0.cl
*/
disableRedirectionLinksInNewTab?: boolean;
/**
* Flag to control Data panel experience
* @default false
* @version SDK: 1.34.0 | ThoughtSpot Cloud: 10.3.0.cl
* @example
* ```js
* const embed = new AppEmbed('#tsEmbed', {
* ... // other options
* dataPanelV2: true,
* })
* ```
*/
dataPanelV2?: boolean;
/**
* To enable custom column groups in data panel v2
* @version SDK: 1.32.0 | ThoughtSpot: 10.0.0.cl, 10.1.0.sw
* @default false
* @example
* ```js
* const embed = new SearchEmbed('#tsEmbed', {
* ... // other options
* enableCustomColumnGroups: true,
* });
* ```
*/
enableCustomColumnGroups?: boolean;
/**
* Overrides an Org context for embedding application users.
* This parameter allows a user authenticated to one Org to view the
* objects from another Org.
* The `overrideOrgId` setting is honoured only if the
* Per Org URL feature is enabled on your ThoughtSpot instance.
* @example
* ```js
* const embed = new LiveboardEmbed('#embed', {
* ... // other options
* overrideOrgId: 142536
* });
* ```
* @version SDK: 1.35.0 | ThoughtSpot: 10.5.0.cl
*/
overrideOrgId?: number;
}
/**
* MessagePayload: Embed event payload: message type, data and status (start/end)
* @group Events
*/
export type MessagePayload = {
/* type: message type eg: 'save' */
type: string;
/* data: message payload data eg: { answerId: '123' } */
data: any;
/* status: message payload status - start or end */
status?: string;
};
/**
* MessageOptions: By providing options, getting specific event start / end based on
* option
* @group Events
*/
export type MessageOptions = {
/**
* A boolean value indicating that start status events of this type
* will be dispatched.
*/
start?: boolean;
};
/**
* MessageCallback: Embed event message callback
* @group Events
*/
export type MessageCallback = (
/* payload: Message payload contains type, data, and status */
payload: MessagePayload,
/**
* responder: Message callback function triggered when embed event
* initiated
*/
responder?: (data: any) => void,
) => void;
/**
* MessageCallbackObj: contains message options & callback function
*/
export type MessageCallbackObj = {
/**
* options: It contains start, a boolean value indicating that start
* status events of this type will be dispatched
*/
/* callback: Embed event message callback */
options: MessageOptions;
callback: MessageCallback;
};
export type GenericCallbackFn = (...args: any[]) => any;
export type QueryParams = {
[key: string]: string | boolean | number;
};
/**
* A map of the supported runtime filter operations
*/
// eslint-disable-next-line no-shadow
export enum RuntimeFilterOp {
/**
* Equals
*/
EQ = 'EQ',
/**
* Does not equal
*/
NE = 'NE',
/**
* Less than
*/
LT = 'LT',
/**
* Less than or equal to
*/
LE = 'LE',
/**
* Greater than
*/
GT = 'GT',
/**
* Greater than or equal to
*/
GE = 'GE',
/**
* Contains
*/
CONTAINS = 'CONTAINS',
/**
* Begins with
*/
BEGINS_WITH = 'BEGINS_WITH',
/**
* Ends with
*/
ENDS_WITH = 'ENDS_WITH',
/**
* Between, inclusive of higher value
*/
BW_INC_MAX = 'BW_INC_MAX',
/**
* Between, inclusive of lower value
*/
BW_INC_MIN = 'BW_INC_MIN',
/**
* Between, inclusive of both higher and lower value
*/
BW_INC = 'BW_INC',
/**
* Between, non-inclusive
*/
BW = 'BW',
/**
* Is included in this list of values
*/
IN = 'IN',
/**
* Is not included in this list of values
*/
NOT_IN = 'NOT_IN',
}
/**
* Home page module that can be hidden.
* **Note**: This option does not apply to the classic homepage.
* To access the updated modular homepage, set
* `modularHomeExperience` to `true` (available as Early Access feature in 9.12.5.cl).
* @version SDK: 1.28.0 | ThoughtSpot: 9.12.5.cl, 10.1.0.sw
*/
// eslint-disable-next-line no-shadow
export enum HomepageModule {
/**
* Search bar
*/
Search = 'SEARCH',
/**
* kPI watchlist module
*/
Watchlist = 'WATCHLIST',
/**
* favorite objects
*/
Favorite = 'FAVORITE',
/**
* List of answers and Liveboards
*/
MyLibrary = 'MY_LIBRARY',
/**
* Trending list
*/
Trending = 'TRENDING',
/**
* Learning videos
*/
Learning = 'LEARNING',
}
/**
* A filter that can be applied to ThoughtSpot answers, Liveboards, or
* visualizations at runtime.
*/
export interface RuntimeFilter {
/**
* The name of the column to filter on (case-sensitive)
*/
columnName: string;
/**
* The operator to apply
*/
operator: RuntimeFilterOp;
/**
* The list of operands. Some operators like EQ, LE accept
* a single operand, whereas other operators like BW and IN accept multiple
* operands.
*/
values: (number | boolean | string | bigint)[];
}
/**
* A filter that can be applied to ThoughtSpot Answers, Liveboards, or
* visualizations at runtime.
*/
export interface RuntimeParameter {
/**
* The name of the runtime parameter to filter on (case-sensitive)
*/
name: string;
/**
* Values
*/
value: number | boolean | string;
}
/**
* Event types emitted by the embedded ThoughtSpot application.
*
* To add an event listener use the corresponding
* {@link LiveboardEmbed.on} or {@link AppEmbed.on} or {@link SearchEmbed.on} method.
* @example
* ```js
* import { EmbedEvent } from '@thoughtspot/visual-embed-sdk';
* // Or
* // const { EmbedEvent } = window.tsembed;
*
* // create the liveboard embed.
*
* liveboardEmbed.on(EmbedEvent.Drilldown, (drilldown) => {
* console.log('Drilldown event', drilldown);
* }));
* ```
*
* 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
* // ...
* const MyComponent = ({ dataSources }) => {
* const onLoad = () => {
* console.log(EmbedEvent.Load, {});
* };
*
* return (
* <SearchEmbed
* dataSources={dataSources}
* onLoad = {logEvent("Load")}
* />
* );
* };
* ```
* @group Events
*/
// eslint-disable-next-line no-shadow
export enum EmbedEvent {
/**
* Rendering has initialized.
* @example
*```js
* liveboardEmbed.on(EmbedEvent.Init, showLoader)
* //show a loader
* function showLoader() {
* document.getElementById("loader");
* }
*```
* @returns timestamp - The timestamp when the event was generated.
*/
Init = 'init',
/**
* Authentication has either succeeded or failed.
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 8.4.1.sw
* @example
*```js
* appEmbed.on(EmbedEvent.AuthInit, payload => {
* console.log('AuthInit', payload);
* })
*```
* @returns isLoggedIn - A Boolean specifying whether authentication was successful.
*/
AuthInit = 'authInit',
/**
* The embed object container has loaded.
* @returns timestamp - The timestamp when the event was generated.
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 8.4.1.sw
* @example
*```js
* liveboardEmbed.on(EmbedEvent.Load, hideLoader)
* //hide loader
* function hideLoader() {
* document.getElementById("loader");
* }
*```
*/
Load = 'load',
/**
* Data pertaining to an Answer or Liveboard is received.
* The event payload includes the raw data of the object.
* @return data - Answer of Liveboard data
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 8.4.1.sw
* @example
*```js
* liveboardEmbed.on(EmbedEvent.Data, payload => {
* console.log('data', payload);
* })
*```
* @important
*/
Data = 'data',
/**
* Search query has been updated by the user.
* @version SDK: 1.4.0 | ThoughtSpot: ts7.sep.cl, 8.4.1.sw
* @example
*```js
* searchEmbed.on(EmbedEvent.QueryChanged, payload => console.log('data', payload))
*```
*/
QueryChanged = 'queryChanged',
/**
* A drill-down operation has been performed.
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 8.4.1.sw
* @returns additionalFilters - Any additional filters applied
* @returns drillDownColumns - The columns on which drill down was performed
* @returns nonFilteredColumns - The columns that were not filtered
* @example
*```js
* searchEmbed.on(EmbedEvent.DrillDown, {
* points: {
* clickedPoint,
* selectedPoints: selectedPoint
* },
* autoDrillDown: true,
* })
*```
* In this example, `VizPointDoubleClick` event is used for
* triggering the `DrillDown` event when an area or specific
* data point on a table or chart is double-clicked.
* @example
*```js
* searchEmbed.on(EmbedEvent.VizPointDoubleClick, (payload) => {
* console.log(payload);
* const clickedPoint = payload.data.clickedPoint;
* const selectedPoint = payload.data.selectedPoints;
* console.log('>>> called', clickedPoint);
* embed.trigger(HostEvent.DrillDown, {
* points: {
* clickedPoint,
* selectedPoints: selectedPoint
* },
* autoDrillDown: true,
* })
* })
*```
*/
Drilldown = 'drillDown',
/**
* One or more data sources have been selected.
* @returns dataSourceIds - the list of data sources
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 8.4.1.sw
* @example
* ```js
* searchEmbed.on(EmbedEvent.DataSourceSelected, payload => {
* console.log('DataSourceSelected', payload);
* })
* ```
*/
DataSourceSelected = 'dataSourceSelected',
/**
* One or more data columns have been selected.
* @returns columnIds - the list of columns
* @version SDK: 1.10.0 | ThoughtSpot: 8.2.0.cl, 8.4.1.sw
* @example
* ```js
* appEmbed.on(EmbedEvent.AddRemoveColumns, payload => {
* console.log('AddRemoveColumns', payload);
* })
* ```
*/
AddRemoveColumns = 'addRemoveColumns',
/**
* A custom action has been triggered.
* @returns actionId - ID of the custom action
* @returns payload {@link CustomActionPayload} - Response payload with the
* Answer or Liveboard data
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 8.4.1.sw
* @example
* ```js
* appEmbed.on(EmbedEvent.customAction, payload => {
* const data = payload.data;
* if (data.id === 'insert Custom Action ID here') {
* console.log('Custom Action event:', data.embedAnswerData);
* }
* })
* ```
*/
CustomAction = 'customAction',
/**
* Listen to double click actions on a visualization.
* @return ContextMenuInputPoints - Data point that is double-clicked
* @version SDK: 1.5.0 | ThoughtSpot: ts7.oct.cl, 7.2.1
* @example
* ```js
* livebaordEmbed.on(EmbedEvent.VizPointDoubleClick, payload => {
* console.log('VizPointDoubleClick', payload);
* })
* ```
*/
VizPointDoubleClick = 'vizPointDoubleClick',
/**
* Listen to clicks on a visualization in a Liveboard or Search result.
* @return viz, clickedPoint - metadata about the point that is clicked
* @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
* @important
* @example
* ```js
* embed.on(EmbedEvent.VizPointClick, ({data}) => {
* console.log(
* data.vizId, // viz id
* data.clickedPoint.selectedAttributes[0].value,
* data.clickedPoint.selectedAttributes[0].column.name,
* data.clickedPoint.selectedMeasures[0].value,
* data.clickedPoint.selectedMeasures[0].column.name,
* )
* });
* ```
*/
VizPointClick = 'vizPointClick',
/**
* 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 https://developers.thoughtspot.com/docs/events-app-integration#errorType
* @returns error - An error object or message
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 8.4.1.sw
* @example
* ```js
* // 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',
/**
* The embedded object has sent an alert.
* @returns alert - An alert object
* @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 8.4.1.sw
* @example
* ```js
* searchEmbed.on(EmbedEvent.Alert)
* ```
*/
Alert = 'alert',
/**
* The ThoughtSpot authentication session has expired.
* @version SDK: 1.4.0 | ThoughtSpot: ts7.sep.cl, 8.4.1.sw
* @example
*```js
* appEmbed.on(EmbedEvent.AuthExpire, showAuthExpired)
* //show auth expired banner
* function showAuthExpired() {
* document.getElementById("authExpiredBanner");
* }
*```
*/
AuthExpire = 'ThoughtspotAuthExpired',
/**
* ThoughtSpot failed to validate the auth session.
* @hidden
*/
AuthFailure = 'ThoughtspotAuthFailure',
/**
* ThoughtSpot failed to re validate the auth session.
* @hidden
*/
IdleSessionTimeout = 'IdleSessionTimeout',
/**
* ThoughtSpot failed to validate the auth session.
* @hidden
*/
AuthLogout = 'ThoughtspotAuthLogout',
/**
* The height of the embedded Liveboard or visualization has been computed.
* @returns data - The height of the embedded Liveboard or visualization
* @hidden
*/
EmbedHeight = 'EMBED_HEIGHT',
/**
* The center of visible iframe viewport is calculated.
* @returns data - The center of the visible Iframe viewport.
* @hidden
*/
EmbedIframeCenter = 'EmbedIframeCenter',
/**
* Emitted when the **Get Data** action is initiated.
* Applicable to `SearchBarEmbed` only.
* @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1.sw
* @example
*```js
* searchbarEmbed.on(EmbedEvent.GetDataClick)
* .then(data