@thoughtspot/visual-embed-sdk 1.10.0-alpha.2 → 1.10.0

package/CHANGELOG.md

@@ -8,14 +8,26 @@ This project follows Semantic Versioning.
 ### New Features
 - Events for all actions on Search Embed
 
+## 1.9.5 (04-06-2022)
+
+### New Features
+- `locale` param to set Locale/language for the embedded view.
+
+
+## 1.9.4 (04-06-2022)
+
+### Fixed
+- [React] `className` should be forwarded to the iframe container div.
+
+
 ## 1.9.3 (03-22-2022)
 
-### New Features 
+### New Features
 - `disableLoginRedirect` option in `EmbedConfig`
 
 ## 1.9.2 (03-17-2022)
 
-### New Features 
+### New Features
 - Ability to trigger events on React components
   - Added new `useEmbedRef` hook, check README for usage.
 

package/README.md

@@ -4,7 +4,7 @@
 
 <br/>
 
-# ThoughtSpot Visual Embed SDK [![Coverage Status](https://coveralls.io/repos/github/ts-blink/embed-sdk/badge.svg?branch=main)](https://coveralls.io/github/ts-blink/embed-sdk?branch=main) ![npm (scoped with tag)](https://img.shields.io/npm/v/@thoughtspot/visual-embed-sdk) [![](https://data.jsdelivr.com/v1/package/npm/@thoughtspot/visual-embed-sdk/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@thoughtspot/visual-embed-sdk)
+# ThoughtSpot Visual Embed SDK <br/> [![Coverage Status](https://coveralls.io/repos/github/ts-blink/embed-sdk/badge.svg?branch=main)](https://coveralls.io/github/ts-blink/embed-sdk?branch=main) ![npm (scoped with tag)](https://img.shields.io/npm/v/@thoughtspot/visual-embed-sdk) [![](https://data.jsdelivr.com/v1/package/npm/@thoughtspot/visual-embed-sdk/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@thoughtspot/visual-embed-sdk) ![npm](https://img.shields.io/npm/dm/@thoughtspot/visual-embed-sdk?label=npm%20downloads&style=flat-square)
 
 SDK to embed ThoughtSpot into your web apps.
 
@@ -25,6 +25,8 @@ The SDK is written in TypeScript and is also provided both as ES Module (ESM) an
 ```js
 // ESM via NPM
 import * as TsEmbedSDK from '@thoughtspot/visual-embed-sdk';
+// OR
+import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk';
 
 // NPM <script>
 <script src="https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.js"></script>;
@@ -41,7 +43,8 @@ import {
 
 ## Live Playground
 
-Visit our [code playground](https://try-everywhere.thoughtspot.cloud/v2/#/everywhere).
+Visit our [code playground](https://try-everywhere.thoughtspot.cloud/v2/#/everywhere). <br/><br/>
+Start a [free trial](https://www.thoughtspot.com/trial?tsref=trialtse) on your own data.
 
 <br/>
 
@@ -132,10 +135,26 @@ const appEmbed = new AppEmbed(document.getElementById('ts-embed'), {
 appEmbed.render();
 ```
 
+### Triggering and Listening to events
+```js
+// NPM
+import { LiveboardEmbed, Page, AuthType, init, EmbedEvent, HostEvent } from '@thoughtspot/visual-embed-sdk';
+
+// .. Do init and create a liveboardEmbed object as above.
+
+liveboardEmbed.render();
+
+liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => {
+    liveboardEmbed.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
+});
+```
+
 ## React Components
 
 All the above flavors of embedding are also provided as React components for your convenience.
 The constructor options are passed as props and the event listeners can be attached using `on<EventName>` convention.
+<br/><br/>
+Checkout a comprehensive working demo [here](https://codesandbox.io/s/github/ashubham/big-react-demo)
 
 ### Search Component
 
@@ -166,7 +185,7 @@ const MyComponent = ({ dataSources }) => {
 };
 ```
 
-### Triggering events on React components
+### Triggering events on React components (> version 1.9.2)
 
 ```jsx
 import { HostEvent } from '@thoughtspot/visual-embed-sdk';

package/dist/src/embed/app.d.ts

@@ -37,7 +37,11 @@ export declare enum Page {
     /**
      * Data management page
      */
-    Data = "data"
+    Data = "data",
+    /**
+     * SpotIQ listing page
+     */
+    SpotIQ = "spotiq"
 }
 /**
  * The view configuration for full app embedding.
@@ -114,10 +118,12 @@ export declare class AppEmbed extends V1Embed {
     /**
      * Navigate to particular page for app embed. eg:answers/pinboards/home
      * This is used for embedding answers, pinboards, visualizations and full application only.
-     * @param path The string, set to iframe src and navigate to new page
+     * @param path string | number The string, set to iframe src and navigate to new page
      * eg: appEmbed.navigateToPage('pinboards')
+     * When used with `noReload` this can also be a number like 1/-1 to go forward/back.
+     * @param noReload boolean Trigger the navigation without reloading the page (version: 1.12.0 | 8.4.0.cl)
      */
-    navigateToPage(path: string): void;
+    navigateToPage(path: string | number, noReload?: boolean): void;
     /**
      * Renders the embedded application pages in the ThoughtSpot app.
      * @param renderOptions An object containing the page ID

package/dist/src/embed/search.d.ts

@@ -44,6 +44,10 @@ export interface SearchViewConfig extends ViewConfig {
      * 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.
      */

package/dist/src/embed/ts-embed.d.ts

@@ -6,7 +6,7 @@
  * @summary Base classes
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
-import { DOMSelector, HostEvent, EmbedEvent, MessageCallback, Action, RuntimeFilter, EmbedConfig } from '../types';
+import { DOMSelector, HostEvent, EmbedEvent, MessageCallback, Action, RuntimeFilter, EmbedConfig, MessageOptions } from '../types';
 /**
  * Global prefix for all Thoughtspot postHash Params.
  */
@@ -71,15 +71,28 @@ export interface ViewConfig {
      * @version 1.6.0 or later
      */
     visibleActions?: Action[];
+    /**
+     * Show alert messages and toast messages in the embedded view.
+     * @version 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    showAlerts?: boolean;
     /**
      * The list of runtime filters to apply to a search answer,
      * visualization, or Liveboard.
      */
     runtimeFilters?: RuntimeFilter[];
+    /**
+     * The locale/language to use for the embedded view.
+     * @version 1.9.4 or later
+     */
+    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.
+     * 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.
      * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     additionalFlags?: {
@@ -236,9 +249,10 @@ export declare class TsEmbed {
      * sends an event of a particular message type to the host application.
      *
      * @param messageType The message type
-     * @param callback A callback function
+     * @param callback A callback as a function
+     * @param options The message options
      */
-    on(messageType: EmbedEvent, callback: MessageCallback): typeof TsEmbed.prototype;
+    on(messageType: EmbedEvent, callback: MessageCallback, options?: MessageOptions): typeof TsEmbed.prototype;
     /**
      * Triggers an event on specific Port registered against
      * for the EmbedEvent
@@ -279,5 +293,5 @@ export declare class V1Embed extends TsEmbed {
      * @param iframeSrc
      */
     protected renderV1Embed(iframeSrc: string): void;
-    on(messageType: EmbedEvent, callback: MessageCallback): typeof TsEmbed.prototype;
+    on(messageType: EmbedEvent, callback: MessageCallback, options?: MessageOptions): typeof TsEmbed.prototype;
 }

package/dist/src/types.d.ts

@@ -140,11 +140,31 @@ export interface EmbedConfig {
      */
     customCssUrl?: string;
 }
+/**
+ * MessagePayload: Embed event payload: message type, data and status (start/end)
+ */
 export declare type MessagePayload = {
     type: string;
     data: any;
+    status?: string;
+};
+/**
+ * MessageOptions: By Providing options, getting specific event start / end based on option
+ */
+export declare type MessageOptions = {
+    start?: boolean;
 };
+/**
+ * MessageCallback: Embed event message callback
+ */
 export declare type MessageCallback = (payload: MessagePayload, responder?: (data: any) => void) => void;
+/**
+ * MessageCallbackObj: contains message options & callback function
+ */
+export declare type MessageCallbackObj = {
+    options: MessageOptions;
+    callback: MessageCallback;
+};
 export declare type GenericCallbackFn = (...args: any[]) => any;
 export declare type QueryParams = {
     [key: string]: string;
@@ -292,6 +312,12 @@ export declare enum EmbedEvent {
      * @version 1.5.0 or later
      */
     VizPointDoubleClick = "vizPointDoubleClick",
+    /**
+     * A click has been triggered on table/chart
+     * @return ContextMenuInputPoints - data point that is clicked
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    VizPointClick = "vizPointClick",
     /**
      * An error has occurred.
      * @return error - An error object or message
@@ -356,7 +382,108 @@ export declare enum EmbedEvent {
      * rendered liveboard
      * @version 1.9.1 or later
      */
-    LiveboardRendered = "PinboardRendered"
+    LiveboardRendered = "PinboardRendered",
+    /**
+     * This can be used to register an event listener which
+     * is triggered on all events.
+     * @version SDK: 1.10.0 | ThoughtSpot: any
+     */
+    ALL = "*",
+    /**
+     * Emitted when answer is saved in the app
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    Save = "save",
+    /**
+     * Emitted when the download action is triggered on an answer
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    Download = "download",
+    /**
+     * Emitted when the Download as PDF action is triggered on an answer
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    DownloadAsPdf = "downloadAsPdf",
+    /**
+     * Emitted when the Download as CSV action is triggered on an answer
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    DownloadAsCsv = "downloadAsCsv",
+    /**
+     * Emitted when the Download as XLSX action is triggered on an answer
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    DownloadAsXlsx = "downloadAsXlsx",
+    /**
+     * Emitted when an answer is deleted in the app
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    AnswerDelete = "answerDelete",
+    /**
+     * Emitted when an answer is pinned to a Liveboard
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    Pin = "pin",
+    /**
+     * Emitted when SpotIQ analysis is triggered
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    SpotIQAnalyze = "spotIQAnalyze",
+    /**
+     * Emitted when a user shares an object with another user or group
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    Share = "share",
+    /**
+     * Emitted when a user clicks the Include action to include a specific value or data on a chart or table
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    DrillInclude = "context-menu-item-include",
+    /**
+     * Emitted when a user clicks the Exclude action to exclude a specific value or data on a chart or table
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    DrillExclude = "context-menu-item-exclude",
+    /**
+     * Emitted when copied column value on the app
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    CopyToClipboard = "context-menu-item-copy-to-clipboard",
+    /**
+     * Emitted when a user clicks the Update TML action
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    UpdateTML = "updateTSL",
+    /**
+     * Emitted when a user clicks the Edit TML action
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    EditTML = "editTSL",
+    /**
+     * Emitted when ExportTML trigger in answer on the app
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    ExportTML = "exportTSL",
+    /**
+     * Emitted when an answer is saved as a view
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    SaveAsView = "saveAsView",
+    /**
+     * Emitted when copy of existing answer on the app
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    CopyAEdit = "copyAEdit",
+    /**
+     * Emitted when a user clicks Show underlying data on an answe
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    ShowUnderlyingData = "showUnderlyingData",
+    /**
+     * Emitted when an answer is switched to a chart or table view
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    AnswerChartSwitcher = "answerChartSwitcher"
 }
 /**
  * Event types that can be triggered by the host application
@@ -404,7 +531,14 @@ export declare enum HostEvent {
      * @param - {@link RuntimeFilter}[] an array of {@link RuntimeFilter} Types.
      * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
-    UpdateRuntimeFilters = "UpdateRuntimeFilters"
+    UpdateRuntimeFilters = "UpdateRuntimeFilters",
+    /**
+     * Navigate to a specific page in App embed without any reload.
+     * This is the same as calling `appEmbed.navigateToPage(path, true)`
+     * @param path - the path to navigate to (can be a number[1/-1] to go forward/back)
+     * @version SDK: 1.12.0 | ThoughtSpot: 8.4.0.cl
+     */
+    Navigate = "Navigate"
 }
 /**
  * The different visual modes that the data sources panel within
@@ -456,7 +590,9 @@ export declare enum Param {
     CustomCSSUrl = "customCssUrl",
     DisableLoginRedirect = "disableLoginRedirect",
     visibleVizs = "pinboardVisibleVizs",
-    LiveboardV2Enabled = "isPinboardV2Enabled"
+    LiveboardV2Enabled = "isPinboardV2Enabled",
+    ShowAlerts = "showAlerts",
+    Locale = "locale"
 }
 /**
  * The list of actions that can be performed on visual ThoughtSpot

package/dist/src/utils.d.ts

@@ -34,6 +34,10 @@ export declare const getCssDimension: (value: number | string) => string;
 export declare const appendToUrlHash: (url: string, stringToAppend: string) => string;
 export declare const getEncodedQueryParamsString: (queryString: string) => string;
 export declare const getOffsetTop: (element: any) => any;
+export declare const embedEventStatus: {
+    START: string;
+    END: string;
+};
 export declare const setAttributes: (element: HTMLElement, attributes: {
     [key: string]: string | number | boolean;
 }) => void;