@thoughtspot/visual-embed-sdk 1.36.3 → 1.36.5

package/src/embed/ts-embed.ts

@@ -66,6 +66,8 @@ import { processTrigger } from '../utils/processTrigger';
 import pkgInfo from '../../package.json';
 import {
     getAuthPromise, renderInQueue, handleAuth, notifyAuthFailure,
+    getInitPromise,
+    getIsInitCalled,
 } from './base';
 import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
@@ -180,15 +182,10 @@ export class TsEmbed {
 
     protected hostEventClient: HostEventClient;
 
+    protected isReadyForRenderPromise;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
         this.el = getDOMNode(domSelector);
-        // TODO: handle error
-        this.embedConfig = getEmbedConfig();
-        if (!this.embedConfig.authTriggerContainer && !this.embedConfig.useEventForSAMLPopup) {
-            this.embedConfig.authTriggerContainer = domSelector;
-        }
-        this.thoughtSpotHost = getThoughtSpotHost(this.embedConfig);
-        this.thoughtSpotV2Base = getV2BasePath(this.embedConfig);
         this.eventHandlerMap = new Map();
         this.isError = false;
         this.viewConfig = {
@@ -196,12 +193,22 @@ export class TsEmbed {
             excludeRuntimeParametersfromURL: false,
             ...viewConfig,
         };
-        this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
         this.registerAppInit();
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
         this.hostEventClient = new HostEventClient(this.iFrame);
+
+        this.isReadyForRenderPromise = getInitPromise().then(async () => {
+            const embedConfig = getEmbedConfig();
+            this.embedConfig = embedConfig;
+            if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
+                this.embedConfig.authTriggerContainer = domSelector;
+            }
+            this.thoughtSpotHost = getThoughtSpotHost(embedConfig);
+            this.thoughtSpotV2Base = getV2BasePath(embedConfig);
+            this.shouldEncodeUrlQueryParams = embedConfig.shouldEncodeUrlQueryParams;
+        });
     }
 
     /**
@@ -723,6 +730,7 @@ export class TsEmbed {
             });
 
             uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
+
             return getAuthPromise()
                 ?.then((isLoggedIn: boolean) => {
                     if (!isLoggedIn) {
@@ -1119,8 +1127,11 @@ export class TsEmbed {
      * @param args
      */
     public async render(): Promise<TsEmbed> {
+        if (!getIsInitCalled()) {
+            logger.error(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
+        }
+        await this.isReadyForRenderPromise;
         this.isRendered = true;
-
         return this;
     }
 
@@ -1129,22 +1140,21 @@ export class TsEmbed {
     }
 
     protected handleRenderForPrerender() {
-        this.render();
+        return this.render();
     }
 
     /**
      * Creates the preRender shell
      * @param showPreRenderByDefault - Show the preRender after render, hidden by default
      */
-    public preRender(showPreRenderByDefault = false): TsEmbed {
+    public async preRender(showPreRenderByDefault = false): Promise<TsEmbed> {
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
         }
         this.isPreRendered = true;
         this.showPreRenderByDefault = showPreRenderByDefault;
-        this.handleRenderForPrerender();
-        return this;
+        return this.handleRenderForPrerender();
     }
 
     /**
@@ -1204,6 +1214,11 @@ export class TsEmbed {
      * @returns
      */
     public async prerenderGeneric(): Promise<any> {
+        if (!getIsInitCalled()) {
+            logger.error(ERROR_MESSAGE.RENDER_CALLED_BEFORE_INIT);
+        }
+        await this.isReadyForRenderPromise;
+
         const prerenderFrameSrc = this.getRootIframeSrc();
         this.isRendered = true;
         return this.renderIFrame(prerenderFrameSrc);
@@ -1246,18 +1261,17 @@ export class TsEmbed {
      * Also, synchronizes the style of the PreRender component with the embedding
      * element.
      */
-    public showPreRender(): void {
+    public async showPreRender(): Promise<TsEmbed> {
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
-            return;
+            return this;
         }
         if (!this.isPreRenderAvailable()) {
             const isAvailable = this.connectPreRendered();
 
             if (!isAvailable) {
                 // if the Embed component is not preRendered , Render it now and
-                this.preRender(true);
-                return;
+                return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
         }
@@ -1284,6 +1298,8 @@ export class TsEmbed {
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();
+
+        return this;
     }
 
     /**

package/src/errors.ts

@@ -16,4 +16,5 @@ export const ERROR_MESSAGE = {
     CSP_VIOLATION_ALERT: 'CSP violation detected. Please check the console errors for more details.',
     CSP_FRAME_HOST_VIOLATION_LOG_MESSAGE: 'Please set up CSP correctly for the application to start working. For more information, see https://developers.thoughtspot.com/docs/security-settings#csp-viz-embed-hosts. \n If the issue persists, refer to https://developers.thoughtspot.com/docs/security-settings#csp-viz-embed-hosts',
     MISSING_REPORTING_OBSERVER: 'ReportingObserver not supported',
+    RENDER_CALLED_BEFORE_INIT: 'Looks like render was called before calling init, the render won\'t start until init is called.\nFor more info check\n1. https://developers.thoughtspot.com/docs/Function_init#_init\n2.https://developers.thoughtspot.com/docs/getting-started#initSdk',
 };

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

@@ -12,6 +12,7 @@ export {
     ConversationEmbed,
     PreRenderedConversationEmbed,
     useEmbedRef,
+    useInit,
 } from './index';
 
 export {

package/src/react/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import { AuthEventEmitter } from '../auth';
 import { deepMerge } from '../utils';
 import { SearchBarEmbed as _SearchBarEmbed, SearchBarViewConfig } from '../embed/search-bar';
 import { SageEmbed as _SageEmbed, SageViewConfig } from '../embed/sage';
@@ -8,9 +9,10 @@ import { AppEmbed as _AppEmbed, AppViewConfig } from '../embed/app';
 import { LiveboardEmbed as _LiveboardEmbed, LiveboardViewConfig } from '../embed/liveboard';
 import { TsEmbed } from '../embed/ts-embed';
 
-import { EmbedEvent, ViewConfig } from '../types';
+import { EmbedConfig, EmbedEvent, ViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
 import { ConversationEmbed as _ConversationEmbed, ConversationViewConfig } from '../embed/conversation';
+import { init } from '../embed/base';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
     EmbedConstructor: T,
@@ -404,6 +406,29 @@ export function useEmbedRef<T extends EmbedComponent>():
     return React.useRef<React.ComponentRef<T>>(null);
 }
 
+/**
+ *
+ * @param config - EmbedConfig
+ * @returns AuthEventEmitter
+ * @example
+ * ```
+ * function Component() {
+ *  const authEE = useInit({ ...initConfig });
+ *  return <LiveboardEmbed ref={ref} liveboardId={<id>} />
+ * }
+ * ```
+ * @version SDK: 1.36.2 | ThoughtSpot: *
+ */
+export function useInit(config: EmbedConfig) {
+    const ref = useRef<AuthEventEmitter | null>(null);
+    useDeepCompareEffect(() => {
+        const authEE = init(config);
+        ref.current = authEE;
+    }, [config]);
+
+    return ref;
+}
+
 export {
     LiveboardViewConfig,
     SearchViewConfig,

package/src/types.ts

@@ -1402,8 +1402,9 @@ export enum EmbedEvent {
      */
     Load = 'load',
     /**
-     * Data pertaining to an Answer or Liveboard is received
-     * @return data - The Answer or Liveboard data
+     * 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
@@ -2309,17 +2310,39 @@ export enum EmbedEvent {
      */
     ParameterChanged = 'parameterChanged',
     /**
-     * Emitted when the table viz renders.
-     * You can use this event as a hook to trigger
-     * other events on the rendered table viz data.
+     * Emits when a table visualization is rendered in
+     * the ThoughtSpot embedded app.
+     * You can also use this event as a hook to trigger host events
+     * such as `HostEvent.TransformTableVizData` on the table visualization.
+     * The event payload contains the data used in the rendered table.
+     * You can extract the relevant data from the payload
+     * stored in `payload.data.data.columnDataLite`.
+     * `columnDataLite` is a multidimensional array that contains
+     * data values for each column, which was used in the query to
+     * generate the table visualization. To find and modify specific cell data,
+     * you can either loop through the array or directly access a cell if
+     * you know its position and data index.
+     * In the following code sample, the first cell in the first column
+     * (`columnDataLite[0].dataValue[0]`) is set to `new fob`.
+     * Note that any changes made to the data in the payload will only update the
+     * visual presentation and do not affect the underlying data.
+     * To persist data value modifications after a reload or during chart
+     * interactions such as drill down, ensure that the modified
+     * payload in the `columnDataLite` is passed on to
+     * `HostEvent.TransformTableVizData` and trigger an update to
+     * the table visualization.
+     * If the Row-Level Security (RLS) rules are applied on the
+     * Worksheet or Model, exercise caution when changing column
+     * or table cell values to maintain data security.
+     *
      * @example
      * ```js
      * searchEmbed.on(EmbedEvent.TableVizRendered, (payload) => {
-     *       console.log(payload);
-     *       const columnDataLite = payload.data.data.columnDataLite;
-     *       columnDataLite[0].dataValue[0]="new fob";
-     *       console.log('>>> new Data', columnDataLite);
-     *       searchEmbed.trigger(HostEvent.TransformTableVizData, columnDataLite);
+     *      console.log(payload);
+     *      const columnDataLite = payload.data.data.columnDataLite;
+     *      columnDataLite[0].dataValue[0]="new fob";
+     *      console.log('>>> new Data', columnDataLite);
+     *      searchEmbed.trigger(HostEvent.TransformTableVizData, columnDataLite);
      * })
      * ```
      * @version SDK: 1.35.12 | ThoughtSpot: 10.7.0.cl
@@ -3358,19 +3381,20 @@ export enum HostEvent {
      */
     UIPassthrough = 'UiPassthrough',
     /**
-     * Triggers the table viz rerender with the updated data.
+     * Triggers the table visualization re-render with the updated data.
      * Includes the following properties:
-     * @param - columnDataLite - an array of object containing data
-     * transformed from data picked from TableVizRendered event.
-     * For example, { columnDataLite: []}
+     * @param - `columnDataLite` - an array of object containing the
+     * data value modifications retrieved from the `EmbedEvent.TableVizRendered`
+     * payload.For example, { columnDataLite: []}`.
+     *
      * @example
      * ```js
      * searchEmbed.on(EmbedEvent.TableVizRendered, (payload) => {
-     *       console.log(payload);
-     *       const columnDataLite = payload.data.data.columnDataLite;
-     *       columnDataLite[0].dataValue[0]="new fob";
-     *       console.log('>>> new Data', columnDataLite);
-     *       searchEmbed.trigger(HostEvent.TransformTableVizData, columnDataLite);
+     *      console.log(payload);
+     *      const columnDataLite = payload.data.data.columnDataLite;
+     *      columnDataLite[0].dataValue[0]="new fob";
+     *      console.log('>>> new Data', columnDataLite);
+     *      searchEmbed.trigger(HostEvent.TransformTableVizData, columnDataLite);
      * })
      * ```
      * @version SDK: 1.35.12 | ThoughtSpot: 10.7.0.cl

package/src/utils/with-resolvers-polyfill.ts

@@ -0,0 +1,11 @@
+if (typeof (Promise as any).withResolvers === 'undefined') {
+    (Promise as any).withResolvers = () => {
+        let resolve;
+        let reject;
+        const promise = new Promise((res, rej) => {
+            resolve = res;
+            reject = rej;
+        });
+        return { promise, resolve, reject };
+    };
+}

package/src/utils.ts

@@ -342,17 +342,48 @@ const sdkWindowKey = '_tsEmbedSDK' as any;
  * Stores a value in the global `window` object under the `_tsEmbedSDK` namespace.
  * @param key - The key under which the value will be stored.
  * @param value - The value to store.
+ * @param options - Additional options.
+ * @param options.ignoreIfAlreadyExists - Does not set if value for key is set.
+ *
+ * @returns The stored value.
+ *
+ * @version SDK: 1.36.2 | ThoughtSpot: *
  */
-export const storeValueInWindow = (key: string, value: any) => {
+export function storeValueInWindow<T>(
+    key: string,
+    value: T,
+    options: { ignoreIfAlreadyExists?: boolean } = {},
+): T {
     if (!window[sdkWindowKey]) {
         (window as any)[sdkWindowKey] = {};
     }
-    window[sdkWindowKey][key as any] = value;
-};
+
+    if (options.ignoreIfAlreadyExists && key in (window as any)[sdkWindowKey]) {
+        return (window as any)[sdkWindowKey][key];
+    }
+
+    (window as any)[sdkWindowKey][key] = value;
+    return value;
+}
 
 /**
  * Retrieves a stored value from the global `window` object under the `_tsEmbedSDK` namespace.
  * @param key - The key whose value needs to be retrieved.
  * @returns The stored value or `undefined` if the key is not found.
  */
-export const getValueFromWindow = (key: string): any => window?.[sdkWindowKey]?.[key as any];
+export const getValueFromWindow = <T = any>
+    (key: string): T => (window as any)?.[sdkWindowKey]?.[key];
+
+/**
+ * Resets the key if it exists in the `window` object under the `_tsEmbedSDK` key.
+ * Returns true if the key was reset, false otherwise.
+ * @param key - Key to reset
+ * @returns - boolean indicating if the key was reset
+ */
+export function resetValueFromWindow(key: string): boolean {
+    if (key in window[sdkWindowKey]) {
+        delete (window as any)[sdkWindowKey][key];
+        return true;
+    }
+    return false;
+}