@thoughtspot/visual-embed-sdk 1.38.0-alpha.1 → 1.38.1

package/src/embed/search-bar.tsx

@@ -1,4 +1,4 @@
-import { DefaultAppInitData, Param, ViewConfig } from '../types';
+import { SearchLiveboardCommonViewConfig, BaseViewConfig, DefaultAppInitData, Param } from '../types';
 import { getQueryParamString } from '../utils';
 import { TsEmbed } from './ts-embed';
 import { SearchOptions } from './search';
@@ -6,27 +6,18 @@ import { SearchOptions } from './search';
 /**
  * @group Embed components
  */
-export interface SearchBarViewConfig
-    extends Omit<
-        ViewConfig,
-        | 'runtimeFilters'
-        | 'showAlerts'
-        | 'dataPanelV2'
-        | 'hiddenHomepageModules'
-        | 'hiddenHomeLeftNavItems'
-        | 'hiddenTabs'
-        | 'visibleTabs'
-        | 'reorderedHomepageModules'
-    > {
+export interface SearchBarViewConfig extends BaseViewConfig, SearchLiveboardCommonViewConfig {
     /**
      * The array of data source GUIDs to set on load.
      * Only a single data source is supported currently.
+     * 
+     * Supported embed types: `SearchBarEmbed`
      * @deprecated Use `dataSource` instead
      * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.1-sw
      * @example
      * ```js
      * const embed = new SearchBarEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... //other embed view config
      *    dataSources:['id-2345','id-2345'],
      * })
      * ```
@@ -34,11 +25,13 @@ export interface SearchBarViewConfig
     dataSources?: string[];
     /**
      * Pass the ID of the source to be selected.
+     * 
+     * Supported embed types: `SearchBarEmbed`
      * @version: SDK: 1.19.0, ThoughtSpot 9.0.0.cl, 9.0.1.sw
      * @example
      * ```js
      * const embed = new SearchBarEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... //other embed view config
      *    dataSource:'id-2345',
      * })
      * ```
@@ -46,11 +39,13 @@ export interface SearchBarViewConfig
     dataSource?: string;
     /**
      * Boolean to define if the last selected data source should be used
+     * 
+     * Supported embed types: `SearchBarEmbed`
      * @version: SDK: 1.24.0, ThoughtSpot 9.5.0.cl, 9.5.0.sw
      * @example
      * ```js
      * const embed = new SearchBarEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... //other embed view config
      *    useLastSelectedSources:false,
      * })
      * ```
@@ -66,11 +61,13 @@ export interface SearchBarViewConfig
      * If it is executed, the focus is placed on the results.
      * If it’s not executed, the focus is placed at the end of
      * the token string in the search bar.
+     * 
+     * Supported embed types: `SearchBarEmbed`
      * @version: SDK: 1.2.0 | ThoughtSpot: 9.4.0.sw
      * @example
      * ```js
      * const embed = new SearchBarEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... //other embed view config
      *    searchOptions: {
      *        searchTokenString: '[quantity purchased] [region]',
      *        executeSearch: true,
@@ -82,6 +79,8 @@ export interface SearchBarViewConfig
     /**
      * Exclude the search token string from the URL.
      * If set to true, the search token string is not appended to the URL.
+     * 
+     * Supported embed types: `SearchBarEmbed`
      * @version: SDK: 1.35.7 | ThoughtSpot: 10.8.0.cl
      * @example
      * ```js

package/src/embed/search.ts

@@ -11,8 +11,9 @@ import {
     DOMSelector,
     Param,
     Action,
-    ViewConfig,
+    SearchLiveboardCommonViewConfig,
     DefaultAppInitData,
+    BaseViewConfig,
 } from '../types';
 import {
     getQueryParamString,
@@ -68,22 +69,17 @@ export enum DataPanelCustomColumnGroupsAccordionState {
  * @group Embed components
  */
 export interface SearchViewConfig
-    extends Omit<
-        ViewConfig,
-        | 'hiddenHomepageModules'
-        | 'hiddenHomeLeftNavItems'
-        | 'hiddenTabs'
-        | 'visibleTabs'
-        | 'reorderedHomepageModules'
-    > {
+    extends SearchLiveboardCommonViewConfig, Omit<BaseViewConfig, 'primaryAction'> {
     /**
      * If set to true, the data sources panel is collapsed on load,
      * but can be expanded manually.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    collapseDataSources:true,
      * })
      * ```
@@ -92,11 +88,13 @@ export interface SearchViewConfig
     /**
      * If set to true, the data panel is collapsed on load,
      * but can be expanded manually.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.34.0 | ThoughtSpot: 10.3.0.cl
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    collapseDataPanel:true,
      * })
      * ```
@@ -104,11 +102,13 @@ export interface SearchViewConfig
     collapseDataPanel?: boolean;
     /**
      * Show or hide the data sources panel.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    hideDataSources:true,
      * })
      * ```
@@ -118,11 +118,13 @@ export interface SearchViewConfig
      * Show or hide the charts and tables in search answers.
      * This attribute can be used to create a custom visualization
      * using raw answer data.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    hideResults:true,
      * })
      * ```
@@ -130,11 +132,13 @@ export interface SearchViewConfig
     hideResults?: boolean;
     /**
      * If set to true, the Search Assist feature is enabled.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version SDK: 1.13.0 | ThoughtSpot: 8.5.0.cl, 8.8.1-sw
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    enableSearchAssist:true,
      * })
      * ```
@@ -143,11 +147,13 @@ export interface SearchViewConfig
     /**
      * If set to true, the tabular view is set as the default
      * format for presenting search data.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    forceTable:true,
      * })
      */
@@ -156,10 +162,12 @@ export interface SearchViewConfig
      * The array of data source GUIDs to set on load.
      * Only a single data source is supported currently.
      * @deprecated Use `dataSource` instead.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    dataSources:['id-234','id-456'],
      * })
      * ```
@@ -167,11 +175,13 @@ export interface SearchViewConfig
     dataSources?: string[];
     /**
      * The array of data source GUIDs to set on load.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.19.0
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    dataSource:'id-234',
      * })
      * ```
@@ -194,6 +204,8 @@ export interface SearchViewConfig
      * If it is executed, the focus is placed on the results.
      * If it’s not executed, the focus is placed at the end of
      * the token string in the search bar.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @example
      * ```js
      * searchOptions: {
@@ -206,6 +218,8 @@ export interface SearchViewConfig
     /**
      * Exclude the search token string from the URL.
      * If set to true, the search token string is not appended to the URL.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.35.7 | ThoughtSpot: 10.8.0.cl
      * @example
      * ```js
@@ -221,11 +235,13 @@ export interface SearchViewConfig
     excludeSearchTokenStringFromURL?: boolean;
     /**
      * The GUID of a saved answer to load initially.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    answerId:'sed-1234',
      * })
      * ```
@@ -234,11 +250,13 @@ export interface SearchViewConfig
     /**
      * If set to true, the search page will render without the Search Bar
      * The chart/table should still be visible.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.5.0.sw
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *    ... // other options
+     *    ... // other embed view config
      *    hideSearchBar:true,
      * })
      * ```
@@ -246,6 +264,8 @@ export interface SearchViewConfig
     hideSearchBar?: boolean;
     /**
      * Flag to set if last selected dataSource should be used
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.24.0
      */
     useLastSelectedSources?: boolean;
@@ -258,6 +278,8 @@ export interface SearchViewConfig
     collapseSearchBarInitially?: boolean;
     /**
      * Flag to enable onBeforeSearchExecute Embed Event
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version: SDK: 1.29.0 | Thoughtspot: 10.1.0.cl
      */
     isOnBeforeGetVizDataInterceptEnabled?: boolean;
@@ -268,12 +290,14 @@ export interface SearchViewConfig
      * - EXPAND_ALL: Expand all the accordion initially in data panel v2.
      * - COLLAPSE_ALL: Collapse all the accordions initially in data panel v2.
      * - EXPAND_FIRST: Expand the first accordion and collapse the rest.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version SDK: 1.32.0 | Thoughtspot: 10.0.0.cl
      * @default DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *   ... // other options
+     *   ... // other embed view config
      *   dataPanelCustomGroupsAccordionInitialState:
      *      DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
      * });
@@ -283,12 +307,14 @@ export interface SearchViewConfig
     /**
      * Flag to remove focus from search bar initially when user
      * lands on search embed page.
+     * 
+     * Supported embed types: `SearchEmbed`
      * @version SDK: 1.32.0 | Thoughtspot: 10.3.0.cl
      * @default true
      * @example
      * ```js
      * const embed = new SearchEmbed('#tsEmbed', {
-     *  ... // other options
+     *  ... // other embed view config
      * focusSearchBarOnRender: false,
      * });
      * ```

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

@@ -1993,13 +1993,13 @@ describe('Unit test case for ts embed', () => {
         });
 
         it('Should add contextMenuEnabledOnWhichClick flag to the iframe with right value', async () => {
-            const livebaordEmbed = new LiveboardEmbed(getRootEl(), {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
                 ...defaultViewConfig,
                 liveboardId,
                 contextMenuTrigger: ContextMenuTriggerOptions.RIGHT_CLICK,
             } as LiveboardViewConfig);
 
-            livebaordEmbed.render();
+            liveboardEmbed.render();
             await executeAfterWait(() => {
                 expectUrlMatchesWithParams(
                     getIFrameSrc(),
@@ -2031,13 +2031,13 @@ describe('Unit test case for ts embed', () => {
         });
 
         it('Should add contextMenuEnabledOnWhichClick flag to the iframe with both value', async () => {
-            const livebaordEmbed = new LiveboardEmbed(getRootEl(), {
+            const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
                 ...defaultViewConfig,
                 liveboardId,
                 contextMenuTrigger: ContextMenuTriggerOptions.BOTH_CLICKS,
             } as LiveboardViewConfig);
 
-            livebaordEmbed.render();
+            liveboardEmbed.render();
             await executeAfterWait(() => {
                 expectUrlMatchesWithParams(
                     getIFrameSrc(),
@@ -2706,4 +2706,52 @@ describe('Unit test case for ts embed', () => {
         );
       });
     });
+
+    describe('Fullscreen Change Handler', () => {
+        beforeEach(() => {
+            document.body.innerHTML = getDocumentBody();
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+                disableFullscreenPresentation: false,
+            });
+        });
+
+        test('should have setupFullscreenChangeHandler method', () => {
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            expect(typeof searchEmbed['setupFullscreenChangeHandler']).toBe('function');
+        });
+
+        test('should have removeFullscreenChangeHandler method', () => {
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            expect(typeof searchEmbed['removeFullscreenChangeHandler']).toBe('function');
+        });
+
+        test('should call setupFullscreenChangeHandler without errors', () => {
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            expect(() => {
+                searchEmbed['setupFullscreenChangeHandler']();
+            }).not.toThrow();
+        });
+
+        test('should call removeFullscreenChangeHandler without errors', () => {
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            expect(() => {
+                searchEmbed['removeFullscreenChangeHandler']();
+            }).not.toThrow();
+        });
+
+        test('should handle fullscreen change when feature flag is disabled', () => {
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+                disableFullscreenPresentation: true,
+            });
+            
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            expect(() => {
+                searchEmbed['setupFullscreenChangeHandler']();
+            }).not.toThrow();
+        });
+    });
 });

package/src/embed/ts-embed.ts

@@ -52,17 +52,13 @@ import {
     Param,
     EmbedConfig,
     MessageOptions,
-    MessagePayload,
     MessageCallbackObj,
-    ViewConfig,
-    FrameParams,
     ContextMenuTriggerOptions,
-    RuntimeFilter,
     DefaultAppInitData,
+    AllEmbedViewConfig as ViewConfig,
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 import { processEventData, processAuthFailure } from '../utils/processData';
-import { processTrigger } from '../utils/processTrigger';
 import pkgInfo from '../../package.json';
 import {
     getAuthPromise, renderInQueue, handleAuth, notifyAuthFailure,
@@ -132,7 +128,7 @@ export class TsEmbed {
         this.hostEventClient.setIframeElement(iFrame);
     }
 
-    protected viewConfig: ViewConfig;
+    protected viewConfig: ViewConfig & { visibleTabs?: string[], hiddenTabs?: string[], showAlerts?: boolean };
 
     protected embedConfig: EmbedConfig;
 
@@ -184,6 +180,11 @@ export class TsEmbed {
 
     protected isReadyForRenderPromise;
 
+    /**
+     * Handler for fullscreen change events
+     */
+    private fullscreenChangeHandler: (() => void) | null = null;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
         this.el = getDOMNode(domSelector);
         this.eventHandlerMap = new Map();
@@ -778,6 +779,9 @@ export class TsEmbed {
                                 }
                             });
                         }
+                        
+                        // Setup fullscreen change handler after iframe is loaded and ready
+                        this.setupFullscreenChangeHandler();
                     });
                     this.iFrame.addEventListener('error', () => {
                         nextInQueue();
@@ -1047,9 +1051,11 @@ export class TsEmbed {
         if (this.isRendered) {
             logger.warn('Please register event handlers before calling render');
         }
+        
         const callbacks = this.eventHandlerMap.get(messageType) || [];
         callbacks.push({ options, callback });
         this.eventHandlerMap.set(messageType, callbacks);
+        
         return this;
     }
 
@@ -1149,6 +1155,7 @@ export class TsEmbed {
         }
         await this.isReadyForRenderPromise;
         this.isRendered = true;
+        
         return this;
     }
 
@@ -1212,6 +1219,7 @@ export class TsEmbed {
      */
     public destroy(): void {
         try {
+            this.removeFullscreenChangeHandler();
             this.insertedDomEl?.parentNode.removeChild(this.insertedDomEl);
             this.unsubscribeToEvents();
         } catch (e) {
@@ -1315,6 +1323,11 @@ export class TsEmbed {
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();
+        
+        // Setup fullscreen change handler for prerendered components
+        if (this.iFrame) {
+            this.setupFullscreenChangeHandler();
+        }
 
         return this;
     }
@@ -1391,6 +1404,48 @@ export class TsEmbed {
         const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId ? { vizId } : {});
         return new AnswerService(session, null, this.embedConfig.thoughtSpotHost);
     }
+
+    /**
+     * Set up fullscreen change detection to automatically trigger ExitPresentMode
+     * when user exits fullscreen mode
+     */
+    private setupFullscreenChangeHandler() {
+        const embedConfig = getEmbedConfig();
+        const disableFullscreenPresentation = embedConfig?.disableFullscreenPresentation ?? true;
+        
+        if (disableFullscreenPresentation) {
+            return;
+        }
+
+        if (this.fullscreenChangeHandler) {
+            document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler);
+        }
+
+        this.fullscreenChangeHandler = () => {
+            const isFullscreen = !!document.fullscreenElement;
+            if (!isFullscreen) {
+                logger.info('Exited fullscreen mode - triggering ExitPresentMode');
+                // Only trigger if iframe is available and contentWindow is accessible
+                if (this.iFrame && this.iFrame.contentWindow) {
+                    this.trigger(HostEvent.ExitPresentMode);
+                } else {
+                    logger.debug('Skipping ExitPresentMode - iframe contentWindow not available');
+                }
+            }
+        };
+
+        document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
+    }
+
+    /**
+     * Remove fullscreen change handler
+     */
+    private removeFullscreenChangeHandler() {
+        if (this.fullscreenChangeHandler) {
+            document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler);
+            this.fullscreenChangeHandler = null;
+        }
+    }
 }
 
 /**

package/src/index.ts

@@ -15,6 +15,7 @@ import {
     HomePageSearchBarMode,
     PrimaryNavbarVersion,
     HomePage,
+    DataPanelCustomColumnGroupsAccordionState,
 } from './embed/app';
 import {
     init,
@@ -144,6 +145,7 @@ export {
     CustomActionPayload,
     UIPassthroughEvent,
     ListPageColumns,
+    DataPanelCustomColumnGroupsAccordionState,
 };
 
 export { resetCachedAuthToken } from './authToken';

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

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

package/src/react/index.tsx

@@ -12,12 +12,12 @@ import { LiveboardEmbed as _LiveboardEmbed, LiveboardViewConfig } from '../embed
 import { TsEmbed } from '../embed/ts-embed';
 import { SpotterAgentEmbed as _SpotterAgentEmbed, SpotterAgentEmbedViewConfig } from '../embed/bodyless-conversation';
 
-import { EmbedConfig, EmbedEvent, ViewConfig } from '../types';
+import { EmbedConfig, EmbedEvent, AllEmbedViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
 import { SpotterEmbed as _SpotterEmbed, SpotterEmbedViewConfig, ConversationEmbed as _ConversationEmbed, ConversationViewConfig } from '../embed/conversation';
 import { init } from '../embed/base';
 
-const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
+const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends AllEmbedViewConfig>(
     EmbedConstructor: T,
     // isPreRenderedComponent: Specifies whether the component being returned is
     // intended for preRendering. If set to true, the component will call the
@@ -362,7 +362,7 @@ export const SpotterEmbed = componentFactory<
 
 /**
  * React component for LLM based conversation BI.
- * @deprecated from SDK: 1.38.0 | ThoughtSpot: 10.10.0.cl
+ * @deprecated from SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
  * Use {@link SpotterEmbed} instead
  * @example
  * ```tsx

package/src/react/util.ts

@@ -1,13 +1,15 @@
-import { EmbedEvent, MessageCallback, ViewConfig } from '../types';
+import { EmbedEvent, MessageCallback, AllEmbedViewConfig } from '../types';
+
+interface EmbedViewConfig extends AllEmbedViewConfig, EmbedEventHandlers {}
 
 export type EmbedEventHandlers = { [key in keyof typeof EmbedEvent as `on${Capitalize<key>}`]?: MessageCallback };
 
-export interface EmbedProps extends ViewConfig, EmbedEventHandlers {
+export interface EmbedProps extends EmbedViewConfig {
     className?: string;
     style?: React.CSSProperties;
 }
 
-export interface ViewConfigAndListeners<T extends ViewConfig> {
+export interface ViewConfigAndListeners<T extends EmbedViewConfig> {
     viewConfig: T;
     listeners: { [key in EmbedEvent]?: MessageCallback };
 }
@@ -18,7 +20,7 @@ export interface ViewConfigAndListeners<T extends ViewConfig> {
  */
 export function getViewPropsAndListeners<
     T extends EmbedProps,
-    U extends ViewConfig>(props: T): ViewConfigAndListeners<U> {
+    U extends EmbedViewConfig>(props: T): ViewConfigAndListeners<U> {
     return Object.keys(props).reduce(
         (accu, key) => {
             if (key.startsWith('on')) {