@thoughtspot/visual-embed-sdk 1.23.2 → 1.23.3

package/lib/src/visual-embed-sdk.d.ts

@@ -280,11 +280,13 @@ declare module '@thoughtspot/visual-embed-sdk/embed/base' {
         */
     export const renderInQueue: (fn: (next?: (val?: any) => void) => Promise<any>) => Promise<any>;
     /**
+        * Imports TML representation of the metadata objects into ThoughtSpot.
         * @param data
         * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
         */
     export const executeTML: (data: executeTMLInput) => Promise<any>;
     /**
+        * Exports TML representation of the metadata objects from ThoughtSpot in JSON or YAML format.
         * @param data
         * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
         */
@@ -4259,6 +4261,8 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
                 * @param messageType The message type
                 * @param callback A callback as a function
                 * @param options The message options
+                * @param isSelf
+                * @param isRegisteredBySDK
                 * @example
                 * ```js
                 * tsEmbed.on(EmbedEvent.Error, (data) => {
@@ -4274,7 +4278,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
                 * });
                 * ```
                 */
-            on(messageType: EmbedEvent, callback: MessageCallback, options?: MessageOptions): typeof TsEmbed.prototype;
+            on(messageType: EmbedEvent, callback: MessageCallback, options?: MessageOptions, isRegisteredBySDK?: boolean): typeof TsEmbed.prototype;
             /**
                 * Removes an event listener for a particular event type.
                 *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.23.2",
+    "version": "1.23.3",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -35,13 +35,12 @@
             ]
         }
     },
-    "typesVersions": {
-        "*": {
-            "react": [
-                "./lib/src/react/index.d.ts"
-            ]
+    "size-limit": [
+        {
+          "path": "dist/tsembed.js",
+          "limit": "40 kB"
         }
-    },
+    ],
     "scripts": {
         "lint": "eslint 'src/**'",
         "lint:fix": "eslint 'src/**/*.*' --fix",
@@ -66,6 +65,7 @@
         "posttest": "cat ./coverage/sdk/lcov.info | coveralls",
         "is-publish-allowed": "node scripts/is-publish-allowed.js",
         "prepublishOnly": "npm run is-publish-allowed && npm run test && npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build",
+        "check-size": "npm run build && size-limit",
         "publish-dev": "npm publish --tag dev",
         "publish-prod": "npm publish --tag latest"
     },
@@ -96,6 +96,7 @@
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^11.2.1",
         "@rollup/plugin-replace": "^5.0.2",
+        "@size-limit/preset-big-lib": "^8.2.6",
         "@testing-library/dom": "^7.31.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",

package/src/auth.ts

@@ -22,7 +22,7 @@ export let samlAuthWindow: Window = null;
 export let samlCompletionPromise: Promise<void> = null;
 let sessionInfo: sessionInfoInterface = null;
 let sessionInfoResolver: (value: sessionInfoInterface) => void = null;
-const sessionInfoPromise = new Promise((resolve:(value: sessionInfoInterface) => void) => {
+const sessionInfoPromise = new Promise((resolve: (value: sessionInfoInterface) => void) => {
     sessionInfoResolver = resolve;
 });
 let releaseVersion = '';
@@ -44,7 +44,7 @@ interface sessionInfoInterface {
     userGUID: any;
     isPublicUser: any;
     mixpanelToken: any;
-    [key:string]:any;
+    [key: string]: any;
 }
 
 /**
@@ -213,7 +213,7 @@ export const initSession = (sessionDetails: sessionInfoInterface) => {
     }
 };
 
-export const getSessionDetails = (sessionInfoResp: any):sessionInfoInterface => {
+export const getSessionDetails = (sessionInfoResp: any): sessionInfoInterface => {
     const devMixpanelToken = sessionInfoResp.configInfo.mixpanelConfig.devSdkKey;
     const prodMixpanelToken = sessionInfoResp.configInfo.mixpanelConfig.prodSdkKey;
     const mixpanelToken = sessionInfoResp.configInfo.mixpanelConfig.production
@@ -223,6 +223,9 @@ export const getSessionDetails = (sessionInfoResp: any):sessionInfoInterface =>
         userGUID: sessionInfoResp.userGUID,
         mixpanelToken,
         isPublicUser: sessionInfoResp.configInfo.isPublicUser,
+        releaseVersion: sessionInfoResp.releaseVersion,
+        clusterId: sessionInfoResp.configInfo.selfClusterId,
+        clusterName: sessionInfoResp.configInfo.selfClusterName,
         ...sessionInfoResp,
     };
 };

package/src/embed/base.ts

@@ -44,13 +44,13 @@ export interface executeTMLInput {
 
 export interface exportTMLInput {
     metadata: {
-      identifier: string;
-      type?: 'LIVEBOARD' | 'ANSWER' | 'LOGICAL_TABLE' | 'CONNECTION';
+        identifier: string;
+        type?: 'LIVEBOARD' | 'ANSWER' | 'LOGICAL_TABLE' | 'CONNECTION';
     }[];
     export_associated?: boolean;
     export_fqn?: boolean;
     edoc_format?: 'YAML' | 'JSON';
-  }
+}
 
 export let authPromise: Promise<boolean>;
 /**
@@ -192,9 +192,9 @@ export const init = (embedConfig: EmbedConfig): AuthEventEmitter => {
     setAuthEE(authEE);
     handleAuth();
 
+    const { password, ...configToTrack } = config;
     uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_CALLED_INIT, {
-        authType: config.authType,
-        host: config.thoughtSpotHost,
+        ...configToTrack,
         usedCustomizationSheet: embedConfig.customizations?.style?.customCSSUrl != null,
         usedCustomizationVariables: embedConfig.customizations?.style?.customCSS?.variables != null,
         usedCustomizationRules:
@@ -257,6 +257,7 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>):
 };
 
 /**
+ * Imports TML representation of the metadata objects into ThoughtSpot.
  * @param data
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
  */
@@ -304,6 +305,7 @@ export const executeTML = async (data: executeTMLInput): Promise<any> => {
 };
 
 /**
+ * Exports TML representation of the metadata objects from ThoughtSpot in JSON or YAML format.
  * @param data
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
  */

package/src/embed/ts-embed.ts

@@ -156,6 +156,9 @@ export class TsEmbed {
         this.viewConfig = viewConfig;
         this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
         this.registerAppInit();
+        uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
+            ...viewConfig,
+        });
     }
 
     /**
@@ -299,8 +302,12 @@ export class TsEmbed {
      * Register APP_INIT event and sendback init payload
      */
     private registerAppInit = () => {
-        this.on(EmbedEvent.APP_INIT, this.appInitCb);
-        this.on(EmbedEvent.AuthExpire, this.updateAuthToken);
+        this.on(
+            EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true,
+        );
+        this.on(
+            EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true,
+        );
     };
 
     /**
@@ -711,6 +718,8 @@ export class TsEmbed {
      * @param messageType The message type
      * @param callback A callback as a function
      * @param options The message options
+     * @param isSelf
+     * @param isRegisteredBySDK
      * @example
      * ```js
      * tsEmbed.on(EmbedEvent.Error, (data) => {
@@ -730,7 +739,11 @@ export class TsEmbed {
         messageType: EmbedEvent,
         callback: MessageCallback,
         options: MessageOptions = { start: false },
+        isRegisteredBySDK = false,
     ): typeof TsEmbed.prototype {
+        uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_ON}-${messageType}`, {
+            isRegisteredBySDK,
+        });
         if (this.isRendered) {
             this.handleError('Please register event handlers before calling render');
         }
@@ -929,7 +942,6 @@ export class V1Embed extends TsEmbed {
         options: MessageOptions = { start: false },
     ): typeof TsEmbed.prototype {
         const eventType = this.getCompatibleEventType(messageType);
-        uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_ON}-${messageType}`);
         return super.on(eventType, callback, options);
     }
 }

package/src/mixpanel-service.spec.ts

@@ -14,9 +14,10 @@ const config = {
 
 jest.mock('mixpanel-browser', () => ({
     __esModule: true,
-    init: jest.fn(),
+    init: jest.fn().mockReturnThis(),
     identify: jest.fn(),
     track: jest.fn(),
+    register_once: jest.fn(),
 }));
 
 describe('Unit test for mixpanel', () => {
@@ -30,7 +31,7 @@ describe('Unit test for mixpanel', () => {
             isPublicUser: false,
         };
         initMixpanel(sessionInfo);
-        expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken);
+        expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken, undefined, 'tsEmbed');
         expect(mixpanel.identify).toHaveBeenCalledWith(sessionInfo.userGUID);
 
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_CALLED_INIT, {
@@ -45,10 +46,18 @@ describe('Unit test for mixpanel', () => {
             mixpanelToken: 'newToken',
             isPublicUser: true,
             userGUID: 'newUser',
+            clusterId: 'newClusterId',
+            clusterName: 'newClusterName',
+            releaseVersion: 'newReleaseVersion',
         };
         initMixpanel(sessionInfo);
 
-        expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken);
+        expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken, undefined, 'tsEmbed');
+        expect(mixpanel.register_once).toHaveBeenCalledWith({
+            clusterId: sessionInfo.clusterId,
+            clusterName: sessionInfo.clusterName,
+            releaseVersion: sessionInfo.releaseVersion,
+        });
         expect(mixpanel.identify).not.toHaveBeenCalledWith(sessionInfo.userGUID);
     });
 

package/src/mixpanel-service.ts

@@ -6,6 +6,7 @@ export const EndPoints = {
 
 // Needed to avoid error in CJS builds on some bundlers.
 const mixpanelLib = mixpanel.default || mixpanel;
+let mixpanelInstance: mixpanel.Mixpanel;
 
 export const MIXPANEL_EVENT = {
     VISUAL_SDK_RENDER_START: 'visual-sdk-render-start',
@@ -15,6 +16,7 @@ export const MIXPANEL_EVENT = {
     VISUAL_SDK_TRIGGER: 'visual-sdk-trigger',
     VISUAL_SDK_ON: 'visual-sdk-on',
     VISUAL_SDK_IFRAME_LOAD_PERFORMANCE: 'visual-sdk-iframe-load-performance',
+    VISUAL_SDK_EMBED_CREATE: 'visual-sdk-embed-create',
 };
 
 let isMixpanelInitialized = false;
@@ -31,7 +33,7 @@ export function uploadMixpanelEvent(eventId: string, eventProps = {}): void {
         eventQueue.push({ eventId, eventProps });
         return;
     }
-    mixpanelLib.track(eventId, eventProps);
+    mixpanelInstance.track(eventId, eventProps);
 }
 
 /**
@@ -61,10 +63,15 @@ export function initMixpanel(sessionInfo: any): void {
     const token = sessionInfo.mixpanelToken;
     try {
         if (token) {
-            mixpanelLib.init(token);
+            mixpanelInstance = mixpanelLib.init(token, undefined, 'tsEmbed');
             if (!isPublicCluster) {
-                mixpanelLib.identify(sessionInfo.userGUID);
+                mixpanelInstance.identify(sessionInfo.userGUID);
             }
+            mixpanelInstance.register_once({
+                clusterId: sessionInfo.clusterId,
+                clusterName: sessionInfo.clusterName,
+                releaseVersion: sessionInfo.releaseVersion,
+            });
             isMixpanelInitialized = true;
             emptyQueue();
         }

package/src/react/index.spec.tsx

@@ -18,7 +18,9 @@ import {
     SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef, SearchBarEmbed,
 } from './index';
 import * as allExports from './index';
-import { AuthType, init } from '../index';
+import {
+    AuthType, init,
+} from '../index';
 
 import { version } from '../../package.json';
 
@@ -85,7 +87,7 @@ describe('React Components', () => {
         it('Should be able to trigger events on the embed using refs', async () => {
             mockMessageChannel();
             const TestComponent = () => {
-                const embedRef = useEmbedRef();
+                const embedRef = useEmbedRef<typeof LiveboardEmbed>();
                 const onLiveboardRendered = () => {
                     embedRef.current.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
                 };

package/src/react/index.tsx

@@ -13,33 +13,33 @@ import { EmbedProps, getViewPropsAndListeners } from './util';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
     EmbedConstructor: T,
-) => React.forwardRef<TsEmbed, U>(
-    (props: U, forwardedRef: React.MutableRefObject<TsEmbed>) => {
+) => React.forwardRef<InstanceType<T>, U>(
+    (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
         const ref = React.useRef<HTMLDivElement>(null);
         const { className, ...embedProps } = props;
         const { viewConfig, listeners } = getViewPropsAndListeners<
-                Omit<U, 'className'>,
-                V
-            >(embedProps);
+            Omit<U, 'className'>,
+            V
+        >(embedProps);
         useDeepCompareEffect(() => {
             const tsEmbed = new EmbedConstructor(
-                    ref!.current,
-                    deepMerge(
-                        {
-                            insertAsSibling: viewConfig.insertAsSibling,
-                            frameParams: {
-                                class: viewConfig.insertAsSibling
-                                    ? className || ''
-                                    : '',
-                            },
+                ref!.current,
+                deepMerge(
+                    {
+                        insertAsSibling: viewConfig.insertAsSibling,
+                        frameParams: {
+                            class: viewConfig.insertAsSibling
+                                ? className || ''
+                                : '',
                         },
-                        viewConfig,
-                    ),
-            );
+                    },
+                    viewConfig,
+                ),
+            ) as InstanceType<T>;
             Object.keys(listeners).forEach((eventName) => {
                 tsEmbed.on(
-                        eventName as EmbedEvent,
-                        listeners[eventName as EmbedEvent],
+                    eventName as EmbedEvent,
+                    listeners[eventName as EmbedEvent],
                 );
             });
             tsEmbed.render();
@@ -68,7 +68,7 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
     },
 );
 
-interface SearchProps extends EmbedProps, SearchViewConfig {}
+interface SearchProps extends EmbedProps, SearchViewConfig { }
 
 /**
  * React component for Search Embed.
@@ -87,7 +87,7 @@ export const SearchEmbed = componentFactory<typeof _SearchEmbed, SearchProps, Se
     _SearchEmbed,
 );
 
-interface AppProps extends EmbedProps, AppViewConfig {}
+interface AppProps extends EmbedProps, AppViewConfig { }
 
 /**
  * React component for Full app Embed.
@@ -105,7 +105,7 @@ interface AppProps extends EmbedProps, AppViewConfig {}
  */
 export const AppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConfig>(_AppEmbed);
 
-interface LiveboardProps extends EmbedProps, LiveboardViewConfig {}
+interface LiveboardProps extends EmbedProps, LiveboardViewConfig { }
 
 /**
  * React component for Liveboard embed.
@@ -130,7 +130,7 @@ export const LiveboardEmbed = componentFactory<
 
 export const PinboardEmbed = LiveboardEmbed;
 
-interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig {}
+interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig { }
 
 /**
  * React component for Search bar embed.
@@ -151,7 +151,7 @@ export const SearchBarEmbed = componentFactory<
     SearchBarViewConfig
 >(_SearchBarEmbed);
 
-interface SageEmbedProps extends EmbedProps, SageViewConfig {}
+interface SageEmbedProps extends EmbedProps, SageViewConfig { }
 
 /**
  * React component for LLM based search Sage embed.
@@ -172,6 +172,12 @@ export const SageEmbed = componentFactory<
     SageViewConfig
 >(_SageEmbed);
 
+type EmbedComponent = typeof SearchEmbed
+    | typeof AppEmbed
+    | typeof LiveboardEmbed
+    | typeof SearchBarEmbed
+    | typeof SageEmbed;
+
 /**
  * Get a reference to the embed component to trigger events on the component.
  *
@@ -187,9 +193,12 @@ export const SageEmbed = componentFactory<
  * return <LiveboardEmbed ref={ref} liveboardId={<id>} />
  * }
  * ```
- * @returns {React.MutableRefObject<TsEmbed>} ref
+ * @returns {React.MutableRefObject<T extends TsEmbed>} ref
  */
-export const useEmbedRef = (): React.MutableRefObject<TsEmbed> => React.useRef<TsEmbed>(null);
+export function useEmbedRef<T extends EmbedComponent>():
+    React.MutableRefObject<React.ComponentRef<T>> {
+    return React.useRef<React.ComponentRef<T>>(null);
+}
 
 export {
     LiveboardViewConfig,