@thoughtspot/visual-embed-sdk 1.24.0-preRender.5 → 1.24.0-preRender.7

package/src/embed/ts-embed.ts

@@ -7,7 +7,8 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 
-import _ from 'lodash';
+import isEqual from 'lodash/isEqual';
+
 import {
     getEncodedQueryParamsString,
     getCssDimension,
@@ -22,6 +23,7 @@ import {
     getRuntimeParameters,
     setStyleProperties,
     removeStyleProperties,
+    isUndefined,
 } from '../utils';
 import {
     getThoughtSpotHost,
@@ -99,7 +101,7 @@ export class TsEmbed {
     /**
      * The key to store the embed instance in the DOM node
      */
-    protected embedNodeKey = '__tsEmbed'
+    protected embedNodeKey = '__tsEmbed';
 
     protected isAppInitialized = false;
 
@@ -260,7 +262,10 @@ export class TsEmbed {
             if (event.source === this.iFrame.contentWindow) {
                 this.executeCallbacks(
                     eventType,
-                    processEventData(eventType, eventData, this.thoughtSpotHost, this.el),
+                    processEventData(eventType,
+                        eventData,
+                        this.thoughtSpotHost,
+                        this.isPreRendered ? this.preRenderWrapper : this.el),
                     eventPort,
                 );
             }
@@ -419,9 +424,6 @@ export class TsEmbed {
             contextMenuTrigger,
             linkOverride,
             insertInToSlide,
-            hideLiveboardHeader,
-            showLiveboardDescription,
-            showLiveboardTitle,
         } = this.viewConfig;
 
         if (Array.isArray(visibleActions) && Array.isArray(hiddenActions)) {
@@ -489,15 +491,6 @@ export class TsEmbed {
         if (insertInToSlide) {
             queryParams[Param.ShowInsertToSlide] = insertInToSlide;
         }
-        if (hideLiveboardHeader) {
-            queryParams[Param.HideLiveboardHeader] = hideLiveboardHeader;
-        }
-        if (showLiveboardDescription) {
-            queryParams[Param.ShowLiveboardDescription] = showLiveboardDescription;
-        }
-        if (showLiveboardTitle) {
-            queryParams[Param.ShowLiveboardTitle] = showLiveboardTitle;
-        }
 
         return queryParams;
     }
@@ -648,10 +641,6 @@ export class TsEmbed {
     }
 
     protected createPreRenderWrapper(): HTMLDivElement {
-        if (!this.viewConfig.preRenderId) {
-            throw new Error('PreRender id is required to create PreRender wrapper');
-        }
-
         const preRenderIds = this.getPreRenderIds();
 
         document.getElementById(preRenderIds.wrapper)?.remove();
@@ -1063,20 +1052,31 @@ export class TsEmbed {
         // Override in subclass
     }
 
-    private validatePreRenderProps = (viewConfig : ViewConfig) => {
-        const preRenderAllowedKeys = ['preRenderId', 'vizId', 'liveboardId', ...Object.keys(EmbedEvent)];
+    private validatePreRenderViewConfig = (viewConfig: ViewConfig) => {
+        const preRenderAllowedKeys = [
+            'preRenderId',
+            'vizId',
+            'liveboardId',
+        ];
         const preRenderedObject = this.insertedDomEl?.[this.embedNodeKey] as TsEmbed;
         if (!preRenderedObject) return;
         if (viewConfig.preRenderId) {
-            const allOtherKeys = Object.keys(viewConfig)
-                .filter((key) => !preRenderAllowedKeys.includes(key));
+            const allOtherKeys = Object.keys(viewConfig).filter(
+                (key) => !preRenderAllowedKeys.includes(key) && !key.startsWith('on'),
+            );
 
             allOtherKeys.forEach((key) => {
-                if (!_.isEqual(viewConfig[key], preRenderedObject.viewConfig[key])) {
+                if (
+                    !isUndefined(viewConfig[key])
+                    && !isEqual(viewConfig[key], preRenderedObject.viewConfig[key])
+                ) {
                     console.warn(
-                        `${this.embedComponentType} pre-rendered with ${key} as \`${JSON.stringify(viewConfig[key])}\` but a `
-                      + `different value is set in the Embed component as \`${JSON.stringify(preRenderedObject.viewConfig?.[key]?.toString())}\`. `
-                      + 'The new value is ignored.',
+                        `${this.embedComponentType} was pre-rendered with `
+                        + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+                        + `but a different value "${JSON.stringify(viewConfig[key])}" `
+                        + 'was passed to the Embed component. '
+                        + 'The new value provided is ignored, the value provided during '
+                        + 'preRender is used.',
                     );
                 }
             });
@@ -1090,6 +1090,10 @@ export class TsEmbed {
      * element.
      */
     public showPreRender(): void {
+        if (!this.viewConfig.preRenderId) {
+            console.error('PreRender id is required for preRender');
+            return;
+        }
         if (!this.isPreRenderAvailable()) {
             const isAvailable = this.connectPreRendered();
 
@@ -1098,23 +1102,24 @@ export class TsEmbed {
                 this.preRender(true);
                 return;
             }
-            this.validatePreRenderProps(this.viewConfig);
+            this.validatePreRenderViewConfig(this.viewConfig);
         }
 
         if (this.el) {
             this.syncPreRenderStyle();
-
-            this.resizeObserver = new ResizeObserver((entries) => {
-                entries.forEach((entry) => {
-                    if (entry.contentRect && entry.target === this.el) {
-                        setStyleProperties(this.preRenderWrapper, {
-                            width: `${entry.contentRect.width}px`,
-                            height: `${entry.contentRect.height}px`,
-                        });
-                    }
+            if (!this.viewConfig.doNotTrackPreRenderSize) {
+                this.resizeObserver = new ResizeObserver((entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.contentRect && entry.target === this.el) {
+                            setStyleProperties(this.preRenderWrapper, {
+                                width: `${entry.contentRect.width}px`,
+                                height: `${entry.contentRect.height}px`,
+                            });
+                        }
+                    });
                 });
-            });
-            this.resizeObserver.observe(this.el);
+                this.resizeObserver.observe(this.el);
+            }
         }
 
         this.beforePrerenderVisible();
@@ -1134,8 +1139,9 @@ export class TsEmbed {
      * is not defined or not found.
      */
     public syncPreRenderStyle(): void {
-        if (!this.el) {
-            throw new Error('Embed element is not defined');
+        if (!this.isPreRenderAvailable() || !this.el) {
+            console.error('PreRender should be called before using syncPreRenderStyle');
+            return;
         }
         const elBoundingClient = this.el.getBoundingClientRect();
 
@@ -1155,7 +1161,7 @@ export class TsEmbed {
         if (!this.isPreRenderAvailable()) {
             // if the embed component is not preRendered , nothing to hide
             console.warn(
-                'Warning: You should call PreRender before hiding it using hidePreRender.',
+                'PreRender should be called before hiding it using hidePreRender.',
             );
             return;
         }
@@ -1219,13 +1225,17 @@ export class V1Embed extends TsEmbed {
     protected getRootIframeSrc(): string {
         const queryParams = this.getEmbedParams();
         let queryString = queryParams;
+        const { runtimeParameters = [] } = this.viewConfig;
+        if (runtimeParameters?.length > 0) {
+            const parameterQuery = getRuntimeParameters(runtimeParameters);
+            queryString = [parameterQuery, queryParams].filter(Boolean).join('&');
+        }
+
         if (!this.viewConfig.excludeRuntimeFiltersfromURL) {
             const runtimeFilters = this.viewConfig.runtimeFilters;
-            const runtimeParameters = this.viewConfig.runtimeParameters;
 
-            const parameterQuery = getRuntimeParameters(runtimeParameters || []);
             const filterQuery = getFilterQuery(runtimeFilters || []);
-            queryString = [parameterQuery, filterQuery, queryParams].filter(Boolean).join('&');
+            queryString = [filterQuery, queryString].filter(Boolean).join('&');
         }
         return this.getV1EmbedBasePath(queryString);
     }

package/src/index.ts

@@ -39,6 +39,7 @@ import {
     CustomStyles,
     customCssInterface,
     ContextMenuTriggerOptions,
+    RuntimeParameter,
 } from './types';
 import { CustomCssVariables } from './css-variables';
 import { SageEmbed, SageViewConfig } from './embed/sage';
@@ -93,4 +94,5 @@ export {
     CustomStyles,
     customCssInterface,
     CustomCssVariables,
+    RuntimeParameter,
 };

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

@@ -48,4 +48,5 @@ export {
     CustomStyles,
     customCssInterface,
     CustomCssVariables,
+    RuntimeParameter,
 } from '../index';

package/src/react/index.tsx

@@ -13,6 +13,10 @@ import { EmbedProps, getViewPropsAndListeners } from './util';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
     EmbedConstructor: T,
+    // isPreRenderedComponent: Specifies whether the component being returned is
+    // intended for preRendering. If set to true, the component will call the
+    // Embed.preRender() method instead of the usual render method, and it will
+    // not be destroyed when the component is unmounted.
     isPreRenderedComponent = false,
 ) => React.forwardRef<InstanceType<T>, U>(
     (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
@@ -21,6 +25,42 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
         const { viewConfig, listeners } = getViewPropsAndListeners<Omit<U, 'className'>, V>(
             embedProps,
         );
+
+        const handleDestroy = (tsEmbed: InstanceType<T>) => {
+            // do not destroy if it is a preRender component
+            if (isPreRenderedComponent) return;
+
+            // if component is connected to a preRendered component
+            if (props.preRenderId) {
+                tsEmbed.hidePreRender();
+                return;
+            }
+
+            tsEmbed.destroy();
+        };
+
+        const handlePreRenderRendering = (tsEmbed : InstanceType<T>) => {
+            tsEmbed.preRender();
+        };
+
+        const handleDefaultRendering = (tsEmbed : InstanceType<T>) => {
+            // if component is connected to a preRendered component
+            if (props.preRenderId) {
+                tsEmbed.showPreRender();
+                return;
+            }
+
+            tsEmbed.render();
+        };
+
+        const handleRendering = (tsEmbed : InstanceType<T>) => {
+            if (isPreRenderedComponent) {
+                handlePreRenderRendering(tsEmbed);
+                return;
+            }
+            handleDefaultRendering(tsEmbed);
+        };
+
         useDeepCompareEffect(() => {
             const tsEmbed = new EmbedConstructor(
                     ref!.current,
@@ -37,23 +77,13 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
             Object.keys(listeners).forEach((eventName) => {
                 tsEmbed.on(eventName as EmbedEvent, listeners[eventName as EmbedEvent]);
             });
-            if (isPreRenderedComponent) {
-                tsEmbed.preRender();
-            } else if (props.preRenderId) {
-                tsEmbed.showPreRender();
-            } else {
-                tsEmbed.render();
-            }
-
+            handleRendering(tsEmbed);
             if (forwardedRef) {
                 // eslint-disable-next-line no-param-reassign
                 forwardedRef.current = tsEmbed;
             }
             return () => {
-                if (!isPreRenderedComponent) {
-                    if (props.preRenderId) tsEmbed.hidePreRender();
-                    else tsEmbed.destroy();
-                }
+                handleDestroy(tsEmbed);
             };
         }, [viewConfig, listeners]);
 
@@ -81,6 +111,18 @@ interface PreRenderProps {
     * });
     * embed.showPreRender();
     * ```
+    *
+    * Use PreRendered react component for pre rendering embed components.
+    * @example
+    * ```tsx
+    * function LandingPageComponent() {
+    *  return <PreRenderedLiveboardEmbed preRenderId="someId" liveboardId="libId" />
+    * }
+    * ```
+    * function MyComponent() {
+    *  return <LiveboardEmbed preRenderId="someId" liveboardId="libId" />
+    * }
+    * ```
     * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
     */
   preRenderId: string;

package/src/types.ts

@@ -641,16 +641,19 @@ export interface ViewConfig {
      * visualization, or Liveboard.
      */
     runtimeFilters?: RuntimeFilter[];
-    /**
-     * The list of parameter override to apply to a search answer,
-     * visualization, or Liveboard.
-     */
+   /**
+    * The list of parameter override to apply to a search answer,
+    * visualization, or Liveboard.
+    *
+    * @version SDK : 1.25.0 | Thoughtspot: 9.2.0.cl, 9.5.0.sw
+    */
     runtimeParameters?: RuntimeParameter[];
+   /**
     /**
-     * The locale/language to use for the embedded view.
-     *
-     * @version SDK: 1.9.4 | ThoughtSpot 8.1.0.cl, 8.4.1.sw
-     */
+    * The locale/language to use for the embedded view.
+    *
+    * @version SDK: 1.9.4 | ThoughtSpot 8.1.0.cl, 8.4.1.sw
+    */
     locale?: string;
     /**
      * This is an object (key/val) of override flags which will be applied
@@ -712,27 +715,6 @@ export interface ViewConfig {
      * @hidden
      */
     excludeRuntimeFiltersfromURL?: boolean;
-    /**
-     * Boolean to hide liveboard header
-     *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
-     * @default false
-     */
-    hideLiveboardHeader?: boolean;
-    /**
-     * Boolean to show liveboard title
-     *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
-     * @default false
-     */
-    showLiveboardTitle?: boolean;
-    /**
-     * Boolean to show liveboard description
-     *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
-     * @default false
-     */
-    showLiveboardDescription?: boolean;
     /**
      * The list of tab IDs to hide from the embedded.
      * This Tabs will be hidden from their respective LBs.
@@ -810,23 +792,23 @@ export interface ViewConfig {
     preRenderId?: string;
 
     /**
-     * Determines whether the PreRender component should dynamically track the size
+     * Determines whether the PreRender component should not dynamically track the size
      * of its embedding element and adjust its own size accordingly.
      * Enabling this option allows the PreRender component to automatically adapt
      * its dimensions based on changes to the size of the embedding element.
      *
      * @type {boolean}
-     * @default true
+     * @default false
      * @example
-     * // Enable tracking PreRender size in the configuration
+     * // Disable tracking PreRender size in the configuration
      * const config = {
-     *   trackPreRenderSize: true,
+     *   doNotTrackPreRenderSize: true,
      * };
      *
      * // Instantiate an object with the configuration
      * const myComponent = new MyComponent(config);
      */
-    trackPreRenderSize?: boolean;
+    doNotTrackPreRenderSize?: boolean;
 }
 
 /**
@@ -1548,11 +1530,11 @@ export enum HostEvent {
      * @param - execute - executes the existing / updated query
      * @example
      * ```js
-     * searchEmbed.trigger(HostEvent.Search, {
-     *   searchQuery: "[sales] by [item type],
-     *   dataSources: ["cd252e5c-b552-49a8-821d-3eadaa049cca"]
-     *   execute: true
-     * })
+     * searchembed.trigger(HostEvent.Search, {
+         searchQuery: "[sales] by [item type]",
+         dataSources: ["cd252e5c-b552-49a8-821d-3eadaa049cca"],
+         execute: true
+       });
      * ```
      */
     Search = 'search',
@@ -2311,6 +2293,7 @@ export enum Param {
     DisableWorksheetChange = 'disableWorksheetChange',
     HideEurekaResults = 'hideEurekaResults',
     HideEurekaSuggestions = 'hideEurekaSuggestions',
+    HideAutocompleteSuggestions = 'hideAutocompleteSuggestions',
     HideLiveboardHeader = 'hideLiveboardHeader',
     ShowLiveboardDescription = 'showLiveboardDescription',
     ShowLiveboardTitle = 'showLiveboardTitle',
@@ -2323,6 +2306,10 @@ export enum Param {
     HideHomepageLeftNav = 'hideHomepageLeftNav',
     ModularHomeExperienceEnabled = 'modularHomeExperience',
     PendoTrackingKey = 'additionalPendoKey',
+    LiveboardHeaderSticky = 'isLiveboardHeaderSticky',
+    IsProductTour = 'isProductTour',
+    HideSearchBarTitle = 'hideSearchBarTitle',
+    HideSageAnswerHeader = 'hideSageAnswerHeader',
 }
 
 /**
@@ -3162,6 +3149,16 @@ export enum Action {
      *  @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     PersonalisedViewsDropdown = 'personalisedViewsDropdown',
+    /**
+     * Action ID for Liveboard Users ( Recently Visited / social proof )
+     *
+     *  @example
+     * ```js
+     * disabledActions: [Action.LiveboardUsers]
+     * ```
+     *  @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
+     */
+    LiveboardUsers = 'liveboardUsers',
 }
 
 export interface AnswerServiceType {

package/src/utils/graphql/answerService/answerService.spec.ts

@@ -113,7 +113,7 @@ describe('Answer service tests', () => {
         const answerService = createAnswerService();
         answerService.fetchCSVBlob(undefined, true);
         expect(fetchMock).toHaveBeenCalledWith(
-            `https://tshost/prism/download/answer/csv?sessionId=${defaultSession.sessionId}&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data&omitInfo=true`,
+            `https://tshost/prism/download/answer/csv?sessionId=${defaultSession.sessionId}&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data&hideCsvHeader=false`,
             expect.objectContaining({}),
         );
     });

package/src/utils/graphql/answerService/answerService.ts

@@ -98,13 +98,11 @@ export class AnswerService {
      *
      * @param userLocale
      * @param omitInfo Omit the download Info on top of the CSV
+     * @param includeInfo
      * @returns Response
      */
-    public async fetchCSVBlob(userLocale = 'en-us', omitInfo = false): Promise<Response> {
-        if (omitInfo) {
-            console.warn('omitInfo not supported yet.');
-        }
-        const fetchUrl = `${this.thoughtSpotHost}/prism/download/answer/csv?sessionId=${this.session.sessionId}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data&omitInfo=${omitInfo}`;
+    public async fetchCSVBlob(userLocale = 'en-us', includeInfo = false): Promise<Response> {
+        const fetchUrl = `${this.thoughtSpotHost}/prism/download/answer/csv?sessionId=${this.session.sessionId}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data&hideCsvHeader=${!includeInfo}`;
         return fetch(fetchUrl, {
             credentials: 'include',
         });

package/src/utils/graphql/sourceService.ts

@@ -66,6 +66,9 @@ export async function getSourceDetail(
     });
 
     const souceDetails = details[0];
-    sourceDetailCache.set(sourceId, souceDetails);
+    if (details) {
+        sourceDetailCache.set(sourceId, souceDetails);
+    }
+
     return souceDetails;
 }

package/src/utils.spec.ts

@@ -9,6 +9,7 @@ import {
     getRuntimeParameters,
     removeStyleProperties,
     setStyleProperties,
+    isUndefined,
 } from './utils';
 import { RuntimeFilterOp } from './types';
 
@@ -30,6 +31,19 @@ describe('unit test for utils', () => {
         ).toBe('bar=baz');
     });
 
+    test('getFilterQuery should encode URL params', () => {
+        expect(getFilterQuery([])).toBe(null);
+
+        expect(
+            getFilterQuery([
+                {
+                    columnName: 'foo+foo',
+                    operator: RuntimeFilterOp.NE,
+                    values: ['bar+'],
+                },
+            ]),
+        ).toBe('col1=foo%2Bfoo&op1=NE&val1=bar%2B');
+    });
     test('getFilterQuery', () => {
         expect(getFilterQuery([])).toBe(null);
 
@@ -179,7 +193,6 @@ describe('unit test for utils', () => {
         it('should remove specified style properties from an HTML element', () => {
             const element = document.createElement('div');
 
-            // Set initial styles for testing
             element.style.backgroundColor = 'blue';
             element.style.fontSize = '14px';
 
@@ -187,8 +200,8 @@ describe('unit test for utils', () => {
 
             removeStyleProperties(element, propertiesToRemove);
 
-            expect(element.style.backgroundColor).toBe(''); // Check that the property is removed
-            expect(element.style.fontSize).toBe(''); // Check that the property is removed
+            expect(element.style.backgroundColor).toBe('');
+            expect(element.style.fontSize).toBe('');
         });
 
         it('should handle undefined param', () => {
@@ -200,18 +213,15 @@ describe('unit test for utils', () => {
         it('should handle removing non-existent style properties', () => {
             const element = document.createElement('div');
 
-            // Set initial styles for testing
             element.style.backgroundColor = 'blue';
             element.style.fontSize = '14px';
 
             const propertiesToRemove = ['color', 'border'];
 
-            // Removing non-existent properties should not throw an error and
-            // should not change existing styles
             removeStyleProperties(element, propertiesToRemove);
 
-            expect(element.style.backgroundColor).toBe('blue'); // Style should remain unchanged
-            expect(element.style.fontSize).toBe('14px'); // Style should remain unchanged
+            expect(element.style.backgroundColor).toBe('blue');
+            expect(element.style.fontSize).toBe('14px');
         });
     });
 
@@ -237,4 +247,9 @@ describe('unit test for utils', () => {
             }).not.toThrow();
         });
     });
+
+    test('isUndefined', () => {
+        expect(isUndefined(undefined)).toBe(true);
+        expect(isUndefined({})).toBe(false);
+    });
 });

package/src/utils.ts

@@ -31,9 +31,9 @@ export const getFilterQuery = (runtimeFilters: RuntimeFilter[]): string => {
         const filters = runtimeFilters.map((filter, valueIndex) => {
             const index = valueIndex + 1;
             const filterExpr = [];
-            filterExpr.push(`col${index}=${filter.columnName}`);
+            filterExpr.push(`col${index}=${encodeURIComponent(filter.columnName)}`);
             filterExpr.push(`op${index}=${filter.operator}`);
-            filterExpr.push(filter.values.map((value) => `val${index}=${value}`).join('&'));
+            filterExpr.push(filter.values.map((value) => `val${index}=${encodeURIComponent(value)}`).join('&'));
 
             return filterExpr.join('&');
         });
@@ -315,3 +315,5 @@ export const removeStyleProperties = (element: HTMLElement, styleProperties: str
         element.style.removeProperty(styleProperty);
     });
 };
+
+export const isUndefined = (value: any): boolean => value === undefined;