@thoughtspot/visual-embed-sdk 1.35.3 → 1.35.4

package/src/embed/ts-embed.ts

@@ -9,6 +9,15 @@
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
+import {
+    HostEventRequest,
+    HostEventResponse,
+    TriggerPayload,
+    TriggerResponse,
+    UIPassthroughArrayResponse,
+    UIPassthroughEvent,
+    UIPassthroughRequest,
+} from './hostEventClient/contracts';
 import { logger } from '../utils/logger';
 import { getAuthenticationToken } from '../authToken';
 import { AnswerService } from '../utils/graphql/answerService/answerService';
@@ -62,6 +71,7 @@ import {
 import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
 import { ERROR_MESSAGE } from '../errors';
+import { HostEventClient } from './hostEventClient/host-event-client';
 
 const { version } = pkgInfo;
 
@@ -77,7 +87,7 @@ const TS_EMBED_ID = '_thoughtspot-embed';
  * We cannot rename v1 event types to maintain backward compatibility
  * @internal
  */
-const V1EventMap = {};
+const V1EventMap: Record<string, any> = {};
 
 /**
  * Base class for embedding v2 experience
@@ -111,6 +121,15 @@ export class TsEmbed {
      */
     protected iFrame: HTMLIFrameElement;
 
+    /**
+     * Setter for the iframe element
+     * @param {HTMLIFrameElement} iFrame HTMLIFrameElement
+     */
+    protected setIframeElement(iFrame: HTMLIFrameElement): void {
+        this.iFrame = iFrame;
+        this.hostEventClient.setIframeElement(iFrame);
+    }
+
     protected viewConfig: ViewConfig;
 
     protected embedConfig: EmbedConfig;
@@ -121,8 +140,8 @@ export class TsEmbed {
     protected thoughtSpotHost: string;
 
     /*
-     * This is the base to access ThoughtSpot V2.
-     */
+    * This is the base to access ThoughtSpot V2.
+    */
     protected thoughtSpotV2Base: string;
 
     /**
@@ -159,6 +178,8 @@ export class TsEmbed {
 
     private resizeObserver: ResizeObserver;
 
+    protected hostEventClient: HostEventClient;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
         this.el = getDOMNode(domSelector);
         // TODO: handle error
@@ -180,6 +201,7 @@ export class TsEmbed {
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
+        this.hostEventClient = new HostEventClient(this.iFrame);
     }
 
     /**
@@ -241,7 +263,7 @@ export class TsEmbed {
         return eventData;
     }
 
-    private subscribedListeners = {};
+    private subscribedListeners: Record<string, any> = {};
 
     /**
      * Adds a global event listener to window for "message" events.
@@ -609,7 +631,7 @@ export class TsEmbed {
             this.insertIntoDOM(child);
         }
         if (this.insertedDomEl instanceof Node) {
-            this.insertedDomEl[this.embedNodeKey] = this;
+            (this.insertedDomEl as any)[this.embedNodeKey] = this;
         }
     }
 
@@ -647,7 +669,7 @@ export class TsEmbed {
                         return;
                     }
 
-                    this.iFrame = this.iFrame || this.createIframeEl(url);
+                    this.setIframeElement(this.iFrame || this.createIframeEl(url));
                     this.iFrame.addEventListener('load', () => {
                         nextInQueue();
                         const loadTimestamp = Date.now();
@@ -717,7 +739,7 @@ export class TsEmbed {
         if (this.preRenderWrapper && this.preRenderChild) {
             this.isPreRendered = true;
             if (this.preRenderChild instanceof HTMLIFrameElement) {
-                this.iFrame = this.preRenderChild;
+                this.setIframeElement(this.preRenderChild);
             }
             this.insertedDomEl = this.preRenderWrapper;
             this.isRendered = true;
@@ -766,7 +788,7 @@ export class TsEmbed {
         this.preRenderWrapper = preRenderWrapper;
 
         if (preRenderChild instanceof HTMLIFrameElement) {
-            this.iFrame = preRenderChild;
+            this.setIframeElement(preRenderChild);
         }
         this.insertedDomEl = preRenderWrapper;
 
@@ -983,10 +1005,14 @@ export class TsEmbed {
 
     /**
      * Triggers an event to the embedded app
-     * @param messageType The event type
-     * @param data The payload to send with the message
+     * @param {HostEvent} messageType The event type
+     * @param {any} data The payload to send with the message
+     * @returns A promise that resolves with the response from the embedded app
      */
-    public trigger(messageType: HostEvent, data: any = {}): Promise<any> {
+    public async trigger<HostEventT extends HostEvent, PayloadT>(
+        messageType: HostEventT,
+        data?: TriggerPayload<PayloadT, HostEventT>,
+    ): Promise<TriggerResponse<PayloadT, HostEventT>> {
         uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
 
         if (!this.isRendered) {
@@ -998,7 +1024,23 @@ export class TsEmbed {
             this.handleError('Host event type is undefined');
             return null;
         }
-        return processTrigger(this.iFrame, messageType, this.thoughtSpotHost, data);
+
+        return this.hostEventClient.triggerHostEvent(messageType, data);
+    }
+
+    /**
+     * Triggers an event to the embedded app, skipping the UI flow.
+     * @param {UIPassthroughEvent} apiName - The name of the API to be triggered.
+     * @param {UIPassthroughRequest} parameters - The parameters to be passed to the API.
+     * @returns {Promise<UIPassthroughRequest>} - A promise that resolves with the response
+     * from the embedded app.
+     */
+    public async triggerUIPassThrough<UIPassthroughEventT extends UIPassthroughEvent>(
+        apiName: UIPassthroughEventT,
+        parameters: UIPassthroughRequest<UIPassthroughEventT>,
+    ): Promise<UIPassthroughArrayResponse<UIPassthroughEventT>> {
+        const response = this.hostEventClient.triggerUIPassthroughApi(apiName, parameters);
+        return response;
     }
 
     /**
@@ -1104,14 +1146,14 @@ export class TsEmbed {
 
     private validatePreRenderViewConfig = (viewConfig: ViewConfig) => {
         const preRenderAllowedKeys = ['preRenderId', 'vizId', 'liveboardId'];
-        const preRenderedObject = this.insertedDomEl?.[this.embedNodeKey] as TsEmbed;
+        const preRenderedObject = (this.insertedDomEl as any)?.[this.embedNodeKey] as TsEmbed;
         if (!preRenderedObject) return;
         if (viewConfig.preRenderId) {
             const allOtherKeys = Object.keys(viewConfig).filter(
                 (key) => !preRenderAllowedKeys.includes(key) && !key.startsWith('on'),
             );
 
-            allOtherKeys.forEach((key) => {
+            allOtherKeys.forEach((key: keyof ViewConfig) => {
                 if (
                     !isUndefined(viewConfig[key])
                     && !isEqual(viewConfig[key], preRenderedObject.viewConfig[key])
@@ -1240,12 +1282,11 @@ export class TsEmbed {
     /**
      * Returns the answerService which can be used to make arbitrary graphql calls on top
      * session.
-     * @param vizId [Optional] to get for a specific viz in case of a liveboard.
+     * @param vizId [Optional] to get for a specific viz in case of a Liveboard.
      * @version SDK: 1.25.0 / ThoughtSpot 9.10.0
      */
     public async getAnswerService(vizId?: string): Promise<AnswerService> {
         const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId ? { vizId } : {});
-
         return new AnswerService(session, null, this.embedConfig.thoughtSpotHost);
     }
 }

package/src/index.ts

@@ -61,6 +61,7 @@ import { uploadMixpanelEvent, MIXPANEL_EVENT } from './mixpanel-service';
 import { tokenizedFetch } from './tokenizedFetch';
 import { getAnswerFromQuery } from './utils/graphql/nlsService/nls-answer-service';
 import { createLiveboardWithAnswers } from './utils/liveboardService/liveboardService';
+import { UIPassthroughEvent } from './embed/hostEventClient/contracts';
 
 export {
     init,
@@ -127,6 +128,7 @@ export {
     HomePageSearchBarMode,
     VizPoint,
     CustomActionPayload,
+    UIPassthroughEvent,
 };
 
 export { resetCachedAuthToken } from './authToken';

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

@@ -51,4 +51,5 @@ export {
     CustomCssVariables,
     RuntimeParameter,
     resetCachedAuthToken,
+    UIPassthroughEvent,
 } from '../index';

package/src/types.ts

@@ -1088,8 +1088,12 @@ export interface ViewConfig {
      */
     enableCustomColumnGroups?: boolean;
     /**
-     * View content for another org directly without having to use the org switcher
-     * This flag is honoured if orgPerUrl feature is enabled for the ThoughtSpot cluster
+     * 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', {
@@ -1714,8 +1718,8 @@ export enum EmbedEvent {
      *
      * **Note**: This event is deprecated in v1.21.0.
      * To fire an event when a download action is initiated on a chart or table,
-     * use `EmbedEvent.DownloadAsPng`, `EmbedEvent.DownloadAsPDF`, `EmbedEvent.DownloadAsCSV`,
-     * or `EmbedEvent.DownloadAsXLSX`
+     * use `EmbedEvent.DownloadAsPng`, `EmbedEvent.DownloadAsPDF`,
+     * `EmbedEvent.DownloadAsCSV`, or `EmbedEvent.DownloadAsXLSX`
      * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
      * @example
      *```js
@@ -2365,7 +2369,7 @@ export enum HostEvent {
      * @param - autoDrillDown - Optional. If true, the drill down will be
      * done automatically on the most popular column.
      * @param - vizId [TS >= 9.8.0] - Optional. The GUID of the visualization to drill
-     * in case of a liveboard.
+     * in case of a Liveboard.
      * @example
      * ```js
      * searchEmbed.on(EmbedEvent.VizPointDoubleClick, (payload) => {
@@ -2452,26 +2456,26 @@ export enum HostEvent {
      */
     SetActiveTab = 'SetActiveTab',
     /**
-     * Update runtime filters applied on a Saved Answer or Liveboard. The
-     * runtime filters passed here are appended to the existing runtime
-     * filters.
+     * Updates the runtime filters applied on a Liveboard. The filter
+     * attributes passed with this event are appended to the existing runtime
+     * filters applied on a Liveboard.
+     *
      * Pass an array of runtime filters with the following attributes:
      *
-     * `columnName`
-     * _String_. The name of the column to filter on.
+     * `columnName` - _String_. The name of the column to filter on.
      *
-     * `operator`
-     * Runtime filter operator to apply. For information,
+     * `operator` - Runtime filter operator to apply. For more information,
      * see link:https://developers.thoughtspot.com/docs/?pageid=runtime-filters#rtOperator[Developer Documentation].
      *
-     * `values`
-     * List of operands. Some operators such as EQ, LE allow a single value, whereas
-     * operators such as BW and IN accept multiple operands.
+     * `values` - List of operands. Some operators such as EQ and LE allow a
+     * single value, whereas BW and IN accept multiple values.
+     *
+     * **Note**: `HostEvent.UpdateRuntimeFilters` is supported in `LiveboardEmbed`
+     * and `AppEmbed` only. In full application embedding, this event updates
+     * the runtime filters applied on the Liveboard and saved Answer objects.
      *
-     * **Note**: `HostEvent.UpdateRuntimeFilters` is not supported in
-     * Search embedding (SearchEmbed) and Natural Language Search
-     * embedding (SageEmbed).
      * @param - {@link RuntimeFilter}[] an array of {@link RuntimeFilter} Types.
+     *
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.UpdateRuntimeFilters, [
@@ -3170,7 +3174,7 @@ export enum HostEvent {
      */
     ResetLiveboardPersonalisedView = 'ResetLiveboardPersonalisedView',
     /**
-     * Triggers Update RuntimeParameters for answers and liveboard
+     * Triggers an event to Update Parameter values for Answers and Liveboard
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.UpdateParameters, [{
@@ -3192,13 +3196,23 @@ export enum HostEvent {
      */
     GetParameters = 'GetParameters',
     /**
-     * Triggers update of persoanlised view for a liveboard
+     * Triggers an event to update a persoanlised view of a Liveboard
      * ```js
      * liveboardEmbed.trigger(HostEvent.UpdatePersonalisedView, {viewId: '1234'})
      * ```
      * @version SDK: 1.36.0 | Thoughtspot: 10.6.0.cl
      */
     UpdatePersonalisedView = 'UpdatePersonalisedView',
+    /**
+     * Triggers the action to get the current view of the liveboard
+     * @version SDK: 1.36.0 | Thoughtspot: 10.6.0.cl
+     */
+    SaveAnswer = 'saveAnswer',
+    /**
+     * EmbedApi
+     * @hidden
+     */
+    UIPassthrough = 'UiPassthrough',
 }
 
 /**
@@ -4179,7 +4193,7 @@ export enum Action {
      */
     ModifySageAnswer = 'modifySageAnswer',
     /**
-     * The **Move to Tab** menu action on visualizations in liveboard edit mode.
+     * The **Move to Tab** menu action on visualizations in Liveboard edit mode.
      * Allows moving a visualization to a different tab.
      * @example
      * ```js
@@ -4234,7 +4248,8 @@ export enum Action {
     TML = 'tml',
 
     /**
-     * Action Id for CreateLiveboard for liveboard list page & Pin Modal
+     * Action ID for the create Liveboard option on the Liveboard list page
+     * and Pin modal
      * @example
      * ```js
      * hiddenAction: [Action.CreateLiveboard]