@thoughtspot/visual-embed-sdk 1.47.1 → 1.47.3

package/src/embed/search.ts

@@ -15,6 +15,7 @@ import {
     SearchLiveboardCommonViewConfig,
     DefaultAppInitData,
     BaseViewConfig,
+    VisualizationOverrides,
 } from '../types';
 import {
     getQueryParamString,
@@ -317,6 +318,27 @@ export interface SearchViewConfig
      * ```
      */
     focusSearchBarOnRender?: boolean;
+    /**
+     * Enable or disable Muze chart phase 1 GA
+     *
+     * Supported embed types: `SearchEmbed`
+     * @version SDK: 1.49.0 | ThoughtSpot Cloud: 26.6.0.cl
+     * @default false
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other embed view config
+     *    newChartsLibrary: true,
+     * })
+     * ```
+     */
+    newChartsLibrary?: boolean;
+
+    /**
+     * Visual overrides to customize the chart or table properties.
+     * @version SDK: 1.49.0 | ThoughtSpot: 26.6.0.cl
+     */
+    visualOverrides?: VisualizationOverrides;
 }
 
 export const HiddenActionItemByDefaultForSearchEmbed = [
@@ -329,6 +351,9 @@ export const HiddenActionItemByDefaultForSearchEmbed = [
 
 export interface SearchAppInitData extends DefaultAppInitData {
     searchOptions?: SearchOptions;
+    embedParams?: {
+        visualOverridesParams?: VisualizationOverrides | null;
+    };
 }
 
 /**
@@ -380,7 +405,19 @@ export class SearchEmbed extends TsEmbed {
 
     protected async getAppInitData(): Promise<SearchAppInitData> {
         const defaultAppInitData = await super.getAppInitData();
-        return { ...defaultAppInitData, ...this.getSearchInitData() };
+        const result: SearchAppInitData = {
+            ...defaultAppInitData,
+            ...this.getSearchInitData(),
+        };
+
+        if (this.viewConfig.visualOverrides) {
+            result.embedParams = {
+                ...((defaultAppInitData as any).embedParams || {}),
+                visualOverridesParams: this.viewConfig.visualOverrides,
+            };
+        }
+
+        return result;
     }
 
     protected getEmbedParamsObject() {
@@ -405,6 +442,7 @@ export class SearchEmbed extends TsEmbed {
             excludeSearchTokenStringFromURL,
             collapseSearchBar = true,
             isThisPeriodInDateFiltersEnabled,
+            newChartsLibrary,
         } = this.viewConfig;
         const queryParams = this.getBaseQueryParams();
 
@@ -451,6 +489,10 @@ export class SearchEmbed extends TsEmbed {
             queryParams[Param.IsThisPeriodInDateFiltersEnabled] = isThisPeriodInDateFiltersEnabled;
         }
 
+        if (newChartsLibrary !== undefined) {
+            queryParams[Param.EnableNewChartLibrary] = newChartsLibrary;
+        }
+
         queryParams[Param.DataPanelV2Enabled] = dataPanelV2;
         queryParams[Param.DataSourceMode] = this.getDataSourceMode();
 

package/src/embed/spotter-utils.spec.ts

@@ -53,4 +53,56 @@ describe('buildSpotterSidebarAppInitData', () => {
         }));
         expect(result.embedParams?.spotterSidebarConfig?.spotterDocumentationUrl).toBeUndefined();
     });
+
+    it('returns base with visualOverridesParams when only visualOverrides is provided', () => {
+        const visualOverrides = {
+            chart: {
+                legend: { show: true, position: 'bottom' as const },
+            },
+        };
+        const result = buildSpotterSidebarAppInitData(base, {
+            visualOverrides,
+        }, noopError);
+        expect(result).toEqual({
+            ...base,
+            embedParams: { visualOverridesParams: visualOverrides },
+        });
+    });
+
+    it('includes visualOverridesParams with spotterSidebarConfig', () => {
+        const visualOverrides = {
+            table: {
+                display: { tableTheme: 'ZEBRA' },
+            },
+        };
+        const result = buildSpotterSidebarAppInitData(base, {
+            spotterSidebarConfig: { enablePastConversationsSidebar: true },
+            visualOverrides,
+        }, noopError);
+        expect(result.embedParams?.spotterSidebarConfig?.enablePastConversationsSidebar).toBe(true);
+        expect(result.embedParams?.visualOverridesParams).toEqual(visualOverrides);
+    });
+
+    it('includes visualOverridesParams with standalone enablePastConversationsSidebar flag', () => {
+        const visualOverrides = {
+            chart: {
+                legend: { show: false },
+            },
+        };
+        const result = buildSpotterSidebarAppInitData(base, {
+            enablePastConversationsSidebar: true,
+            visualOverrides,
+        }, noopError);
+        expect(result.embedParams?.spotterSidebarConfig?.enablePastConversationsSidebar).toBe(true);
+        expect(result.embedParams?.visualOverridesParams).toEqual(visualOverrides);
+    });
+
+    it('does not include visualOverridesParams when it is undefined', () => {
+        const result = buildSpotterSidebarAppInitData(base, {
+            spotterSidebarConfig: { enablePastConversationsSidebar: true },
+            visualOverrides: undefined,
+        }, noopError);
+        expect(result.embedParams?.visualOverridesParams).toBeUndefined();
+        expect(result.embedParams?.spotterSidebarConfig?.enablePastConversationsSidebar).toBe(true);
+    });
 });

package/src/embed/spotter-utils.ts

@@ -2,6 +2,7 @@ import { DefaultAppInitData, ErrorDetailsTypes, EmbedErrorCodes } from '../types
 import { validateHttpUrl } from '../utils';
 import { ERROR_MESSAGE } from '../errors';
 import type { SpotterSidebarViewConfig } from './conversation';
+import type { VisualizationOverrides } from '../types';
 
 /**
  * Resolves enablePastConversationsSidebar with
@@ -22,10 +23,16 @@ export function buildSpotterSidebarAppInitData<T extends DefaultAppInitData>(
     viewConfig: {
         spotterSidebarConfig?: SpotterSidebarViewConfig;
         enablePastConversationsSidebar?: boolean;
+        visualOverrides?: VisualizationOverrides;
     },
     handleError: (err: any) => void,
-): T & { embedParams?: { spotterSidebarConfig?: SpotterSidebarViewConfig } } {
-    const { spotterSidebarConfig, enablePastConversationsSidebar } = viewConfig;
+): T & {
+    embedParams?: {
+        spotterSidebarConfig?: SpotterSidebarViewConfig;
+        visualOverridesParams?: VisualizationOverrides | null;
+    };
+} {
+    const { spotterSidebarConfig, enablePastConversationsSidebar, visualOverrides } = viewConfig;
 
     const resolvedEnablePastConversations = resolveEnablePastConversationsSidebar({
         spotterSidebarConfigValue: spotterSidebarConfig?.enablePastConversationsSidebar,
@@ -33,7 +40,15 @@ export function buildSpotterSidebarAppInitData<T extends DefaultAppInitData>(
     });
 
     const hasConfig = spotterSidebarConfig || resolvedEnablePastConversations !== undefined;
-    if (!hasConfig) return defaultAppInitData;
+    if (!hasConfig) {
+        if (visualOverrides === undefined) {
+            return defaultAppInitData;
+        }
+        return {
+            ...defaultAppInitData,
+            embedParams: { visualOverridesParams: visualOverrides },
+        };
+    }
 
     const resolvedSidebarConfig: SpotterSidebarViewConfig = {
         ...spotterSidebarConfig,
@@ -60,6 +75,7 @@ export function buildSpotterSidebarAppInitData<T extends DefaultAppInitData>(
         embedParams: {
             ...((defaultAppInitData as any).embedParams || {}),
             spotterSidebarConfig: resolvedSidebarConfig,
+            ...(visualOverrides !== undefined ? { visualOverridesParams: visualOverrides } : {}),
         },
     };
 }

package/src/embed/ts-embed.spec.ts

@@ -4504,4 +4504,189 @@ describe('ShowPreRender with UpdateEmbedParams', () => {
         expect(iframe.allow).toContain('clipboard-read');
         expect(iframe.allow).toContain('clipboard-write');
     });
+
+    describe('shouldSkipEvent', () => {
+        beforeAll(() => {
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+            });
+        });
+
+        // Matches the structure produced by createValidationError / embedErrorDetails
+        const makeNestedValidationData = (message = 'invalid payload') => ({
+            type: EmbedEvent.Error,
+            data: {
+                errorType: 'VALIDATION_ERROR',
+                message,
+                code: EmbedErrorCodes.HOST_EVENT_VALIDATION,
+                error: message,
+            },
+        });
+
+        // Matches the flat structure where errorType sits at the top level of data
+        const makeFlatValidationData = (message = 'invalid payload') => ({
+            errorType: EmbedErrorCodes.HOST_EVENT_VALIDATION,
+            message,
+            code: EmbedErrorCodes.HOST_EVENT_VALIDATION,
+        });
+
+        const makeEmbed = (viewConfig: Partial<SearchViewConfig>) => {
+            const embed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                ...viewConfig,
+            });
+            return embed;
+        };
+
+        test('skips Error event and logs warning when useHostEventsV2 is true and shouldBypassPayloadValidation is true', () => {
+            jest.spyOn(logger, 'warn');
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: true });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeNestedValidationData());
+
+            expect(errorHandler).not.toHaveBeenCalled();
+            expect(logger.warn).toHaveBeenCalledWith(
+                'Host Event Validation failed: invalid payload',
+            );
+        });
+
+        test('skips Error event when errorType is resolved from data.data.code (nested format)', () => {
+            jest.spyOn(logger, 'warn');
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: true });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeNestedValidationData('nested error'));
+
+            expect(errorHandler).not.toHaveBeenCalled();
+            expect(logger.warn).toHaveBeenCalledWith(
+                'Host Event Validation failed: nested error',
+            );
+        });
+
+        test('skips Error event when errorType is resolved from data.errorType (flat format)', () => {
+            jest.spyOn(logger, 'warn');
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: true });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeFlatValidationData());
+
+            expect(errorHandler).not.toHaveBeenCalled();
+        });
+
+        test('delivers Error event to handler when useHostEventsV2 is true and shouldBypassPayloadValidation is undefined', () => {
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: undefined });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeNestedValidationData());
+
+            expect(errorHandler).toHaveBeenCalled();
+        });
+
+        test('delivers Error event to handler when useHostEventsV2 is true and shouldBypassPayloadValidation is false', () => {
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: false });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeNestedValidationData());
+
+            expect(errorHandler).toHaveBeenCalled();
+        });
+
+        test('skips Error event when useHostEventsV2 is false regardless of shouldBypassPayloadValidation', () => {
+            jest.spyOn(logger, 'warn');
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: false, shouldBypassPayloadValidation: undefined });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeNestedValidationData());
+
+            expect(errorHandler).not.toHaveBeenCalled();
+            expect(logger.warn).toHaveBeenCalledWith(
+                'Host Event Validation failed: invalid payload',
+            );
+        });
+
+        test('logs warning with undefined message when flat format has no nested data', () => {
+            jest.spyOn(logger, 'warn');
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: true });
+            embed.on(EmbedEvent.Error, jest.fn());
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeFlatValidationData());
+
+            expect(logger.warn).toHaveBeenCalledWith('Host Event Validation failed: undefined');
+        });
+
+        test('skips Error event when useHostEventsV2 is false and shouldBypassPayloadValidation is true', () => {
+            jest.spyOn(logger, 'warn');
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: false, shouldBypassPayloadValidation: true });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeNestedValidationData());
+
+            expect(errorHandler).not.toHaveBeenCalled();
+            expect(logger.warn).toHaveBeenCalledWith('Host Event Validation failed: invalid payload');
+        });
+
+        test('skips via handleError when shouldBypassPayloadValidation is true', () => {
+            jest.spyOn(logger, 'warn');
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: true });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).handleError({
+                type: EmbedEvent.Error,
+                data: {
+                    errorType: 'VALIDATION_ERROR',
+                    message: 'bad payload',
+                    code: EmbedErrorCodes.HOST_EVENT_VALIDATION,
+                    error: 'bad payload',
+                },
+            });
+
+            expect(errorHandler).not.toHaveBeenCalled();
+            expect(logger.warn).toHaveBeenCalledWith('Host Event Validation failed: bad payload');
+        });
+
+        test('delivers Error event to EmbedEvent.ALL handler when not skipped', () => {
+            const allHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: false });
+            embed.on(EmbedEvent.ALL, allHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, makeNestedValidationData());
+
+            expect(allHandler).toHaveBeenCalled();
+        });
+
+        test('does not skip non-Error events even with HOST_EVENT_VALIDATION error code', () => {
+            const customActionHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: false });
+            embed.on(EmbedEvent.CustomAction, customActionHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.CustomAction, {
+                data: { code: EmbedErrorCodes.HOST_EVENT_VALIDATION },
+            });
+
+            expect(customActionHandler).toHaveBeenCalled();
+        });
+
+        test('does not skip Error events with unrelated error codes', () => {
+            const errorHandler = jest.fn();
+            const embed = makeEmbed({ useHostEventsV2: true, shouldBypassPayloadValidation: false });
+            embed.on(EmbedEvent.Error, errorHandler);
+
+            (embed as any).executeCallbacks(EmbedEvent.Error, {
+                errorType: 'SOME_OTHER_ERROR',
+                message: 'something else failed',
+            });
+
+            expect(errorHandler).toHaveBeenCalled();
+        });
+    });
 });

package/src/embed/ts-embed.ts

@@ -67,7 +67,7 @@ import {
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 import { processEventData, processAuthFailure } from '../utils/processData';
-import pkgInfo from '../../package.json';
+import { version } from '../../package.json';
 import {
     getAuthPromise, renderInQueue, handleAuth, notifyAuthFailure,
     getInitPromise,
@@ -80,8 +80,6 @@ import { getPreauthInfo } from '../utils/sessionInfoService';
 import { HostEventClient } from './hostEventClient/host-event-client';
 import { getInterceptInitData, handleInterceptEvent, processApiInterceptResponse, processLegacyInterceptResponse } from '../api-intercept';
 
-const { version } = pkgInfo;
-
 /**
  * Global prefix for all ThoughtSpot postHash Params.
  */
@@ -1151,6 +1149,18 @@ export class TsEmbed {
         }
     }
 
+    private shouldSkipEvent(eventType: EmbedEvent, data: any): boolean {                                                                                                         
+        const errorType = data?.errorType ?? data?.data?.code;                                                                                                              
+        if (                                                                                                                                                                     
+            eventType === EmbedEvent.Error
+            && errorType === EmbedErrorCodes.HOST_EVENT_VALIDATION                                                                                                                  
+            && (!getHostEventsConfig(this.viewConfig).useHostEventsV2 || getHostEventsConfig(this.viewConfig).shouldBypassPayloadValidation)                                                                                                                                
+        ) {
+            logger.warn(`Host Event Validation failed: ${data?.data?.message}`);
+            return true;                                                                                                                                                         
+        }           
+        return false;
+    }                                                                                                                                                                            
     /**
      * Executes all registered event handlers for a particular event type
      * @param eventType The event type
@@ -1162,6 +1172,7 @@ export class TsEmbed {
         data: any,
         eventPort?: MessagePort | void,
     ): void {
+        if (this.shouldSkipEvent(eventType, data)) return;
         const eventHandlers = this.eventHandlerMap.get(eventType) || [];
         const allHandlers = this.eventHandlerMap.get(EmbedEvent.ALL) || [];
         const callbacks = [...eventHandlers, ...allHandlers];
@@ -1541,6 +1552,21 @@ export class TsEmbed {
         });
     }
 
+    /**
+     * Generates the event name for a "Subscribed" embed event.
+     *
+     * This helper appends the "Subscribed" suffix to a given host or action event,
+     * allowing you to listen for subscription lifecycle events in a consistent format.
+     *
+     * @param eventName - The host or action event to generate the subscribed event name for.
+     * @returns The formatted event name (e.g., "Save Subscribed").
+     * 
+     * @version SDK: 1.47.2 | ThoughtSpot: 26.3.0.cl
+     */
+    public subscribedEvent(eventName: HostEvent | Action): string {
+        return `${eventName} ${EmbedEvent.Subscribed}`;
+    }
+
     /**
      * Creates the preRender shell
      * @param showPreRenderByDefault - Show the preRender after render, hidden by default

package/src/index.ts

@@ -71,6 +71,14 @@ import {
     ErrorDetailsTypes,
     ContextType,
     AutoMCPFrameRendererViewConfig,
+    LegendPosition,
+    BackgroundFormatType,
+    ConditionalFormattingComparisonType,
+    ConditionalFormattingOperator,
+    DataLabelFilterOperator,
+    TableTheme,
+    TableContentDensity,
+    VisualizationOverrides,
 } from './types';
 import { CustomCssVariables } from './css-variables';
 import { AnswerService, SessionInterface, UnderlyingDataPoint } from './utils/graphql/answerService/answerService';
@@ -165,6 +173,14 @@ export {
     EmbedErrorDetailsEvent,
     ErrorDetailsTypes,
     AutoMCPFrameRendererViewConfig,
+    VisualizationOverrides,
+    LegendPosition,
+    BackgroundFormatType,
+    ConditionalFormattingComparisonType,
+    ConditionalFormattingOperator,
+    DataLabelFilterOperator,
+    TableTheme,
+    TableContentDensity,
 };
 
 export { resetCachedAuthToken } from './authToken';

package/src/mixpanel-service.spec.ts

@@ -8,6 +8,7 @@ import {
 import { AuthType } from './types';
 import { SessionInfo } from './utils/sessionInfoService';
 import { logger } from './utils/logger';
+import { version } from '../package.json';
 
 const config = {
     thoughtSpotHost: 'https://10.87.89.232',
@@ -60,6 +61,7 @@ describe('Unit test for mixpanel', () => {
             clusterName: sessionInfo.clusterName,
             releaseVersion: sessionInfo.releaseVersion,
             hostAppUrl: 'localhost',
+            sdkVersion: version,
         });
         expect(mixpanel.identify).not.toHaveBeenCalledWith(sessionInfo.userGUID);
     });

package/src/mixpanel-service.ts

@@ -2,6 +2,7 @@ import * as mixpanel from 'mixpanel-browser';
 import { logger } from './utils/logger';
 import { SessionInfo } from './utils/sessionInfoService';
 import { ERROR_MESSAGE } from './errors';
+import { version } from '../package.json';
 
 export const EndPoints = {
     CONFIG: '/callosum/v1/system/config',
@@ -80,6 +81,7 @@ export function initMixpanel(sessionInfo: SessionInfo): void {
                 clusterName: sessionInfo.clusterName,
                 releaseVersion: sessionInfo.releaseVersion,
                 hostAppUrl: window?.location?.host || '',
+                sdkVersion: version,
             });
             isMixpanelInitialized = true;
             emptyQueue();

package/src/test/test-utils.ts

@@ -1,6 +1,6 @@
 import { has } from 'lodash';
 import { version } from '../../package.json';
-import { Action, AuthType } from '../types';
+import { Action, AuthType, EmbedEvent } from '../types';
 
 /**
  Initialises fetch to the global object
@@ -166,3 +166,35 @@ export const mockSessionInfo = {
         genNo: 5,
     },
 };
+
+export const testVisualOverridesInEmbed = async (
+    embed: any,
+    visualOverrides: any,
+) => {
+    const mockEmbedEventPayload = {
+        type: EmbedEvent.APP_INIT,
+        data: {},
+    };
+
+    embed.render();
+
+    const mockPort: any = {
+        postMessage: jest.fn(),
+    };
+
+    await executeAfterWait(() => {
+        const iframe = getIFrameEl();
+        postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+    });
+
+    await executeAfterWait(() => {
+        expect(mockPort.postMessage).toHaveBeenCalledWith({
+            type: EmbedEvent.APP_INIT,
+            data: expect.objectContaining({
+                embedParams: expect.objectContaining({
+                    visualOverridesParams: visualOverrides,
+                }),
+            }),
+        });
+    });
+};