@thoughtspot/visual-embed-sdk 1.24.0-alpha.6 → 1.24.0-dev

package/src/embed/ts-embed.ts

@@ -18,6 +18,9 @@ import {
     getDOMNode,
     getFilterQuery,
     getQueryParamString,
+    getRuntimeParameters,
+    setStyleProperties,
+    removeStyleProperties,
 } from '../utils';
 import {
     getThoughtSpotHost,
@@ -272,11 +275,14 @@ export class TsEmbed {
             data: {
                 customisations: getCustomisations(this.embedConfig, this.viewConfig),
                 authToken,
-                runtimeFilterParams: getRuntimeFilters(this.viewConfig.runtimeFilters),
+                runtimeFilterParams: this.viewConfig.excludeRuntimeFiltersfromURL
+                    ? getRuntimeFilters(this.viewConfig.runtimeFilters)
+                    : null,
                 hiddenHomepageModules: this.viewConfig.hiddenHomepageModules || [],
                 hostConfig: this.embedConfig.hostConfig,
                 hiddenHomeLeftNavItems: this.viewConfig?.hiddenHomeLeftNavItems
-                    ? this.viewConfig?.hiddenHomeLeftNavItems : [],
+                    ? this.viewConfig?.hiddenHomeLeftNavItems
+                    : [],
             },
         });
     };
@@ -305,12 +311,8 @@ export class TsEmbed {
      * Register APP_INIT event and sendback init payload
      */
     private registerAppInit = () => {
-        this.on(
-            EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true,
-        );
-        this.on(
-            EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true,
-        );
+        this.on(EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
+        this.on(EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
     };
 
     /**
@@ -510,8 +512,7 @@ export class TsEmbed {
         iFrame.allow = 'clipboard-read; clipboard-write';
 
         const {
-            height: frameHeight,
-            width: frameWidth, ...restParams
+            height: frameHeight, width: frameWidth, ...restParams
         } = this.viewConfig.frameParams || {};
         const width = getCssDimension(frameWidth || DEFAULT_EMBED_WIDTH);
         const height = getCssDimension(frameHeight || DEFAULT_EMBED_HEIGHT);
@@ -556,7 +557,11 @@ export class TsEmbed {
             return getAuthPromise()
                 ?.then((isLoggedIn: boolean) => {
                     if (!isLoggedIn) {
-                        this.insertIntoDOM(this.embedConfig.loginFailedMessage);
+                        if (this.isPreRendered) {
+                            this.insertIntoDOMForPreRender(this.embedConfig.loginFailedMessage);
+                        } else {
+                            this.insertIntoDOM(this.embedConfig.loginFailedMessage);
+                        }
                         return;
                     }
 
@@ -579,7 +584,11 @@ export class TsEmbed {
                     this.iFrame.addEventListener('error', () => {
                         nextInQueue();
                     });
-                    this.insertIntoDOM(this.iFrame);
+                    if (this.isPreRendered) {
+                        this.insertIntoDOMForPreRender(this.iFrame);
+                    } else {
+                        this.insertIntoDOM(this.iFrame);
+                    }
                     const prefetchIframe = document.querySelectorAll('.prefetchIframe');
                     if (prefetchIframe.length) {
                         prefetchIframe.forEach((el) => {
@@ -593,12 +602,150 @@ export class TsEmbed {
                     uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_FAILED, {
                         error: JSON.stringify(error),
                     });
-                    this.insertIntoDOM(this.embedConfig.loginFailedMessage);
+                    if (this.isPreRendered) {
+                        this.insertIntoDOMForPreRender(this.embedConfig.loginFailedMessage);
+                    } else {
+                        this.insertIntoDOM(this.embedConfig.loginFailedMessage);
+                    }
                     this.handleError(error);
                 });
         });
     }
 
+    public getPreRenderIds() {
+        return {
+            wrapper: `tsEmbed-pre-render-wrapper-${this.viewConfig.preRenderId}`,
+            shield: `tsEmbed-pre-render-shield-${this.viewConfig.preRenderId}`,
+            child: `tsEmbed-pre-render-child-${this.viewConfig.preRenderId}`,
+        };
+    }
+
+    protected createPreRenderWrapper(child: HTMLElement): HTMLDivElement {
+        if (!this.viewConfig.preRenderId) {
+            throw new Error('Pre render id is required');
+        }
+
+        const preRenderIds = this.getPreRenderIds();
+
+        const stalePreRenderWrapper = document.getElementById(preRenderIds.wrapper);
+        if (stalePreRenderWrapper) {
+            console.log('Found stale wrapper , removing');
+            stalePreRenderWrapper.remove();
+        }
+
+        const preRenderWrapper = document.createElement('div');
+        preRenderWrapper.id = preRenderIds.wrapper;
+        setStyleProperties(preRenderWrapper, { position: 'absolute', width: '100vw', height: '100vh' });
+
+        const preRenderShield = document.createElement('div');
+        preRenderShield.id = preRenderIds.shield;
+        setStyleProperties(preRenderShield, { position: 'absolute', width: '100%', height: '100%' });
+
+        child.id = preRenderIds.child;
+
+        preRenderWrapper.appendChild(child);
+        preRenderWrapper.appendChild(preRenderShield);
+
+        this.preRenderWrapper = preRenderWrapper;
+        this.preRenderShield = preRenderShield;
+        this.preRenderChild = child;
+
+        return preRenderWrapper;
+    }
+
+    protected preRenderWrapper: HTMLElement;
+
+    protected preRenderShield: HTMLElement;
+
+    protected preRenderChild: HTMLElement;
+
+    protected isPreRenderAvailable(): boolean {
+        const preRenderIds = this.getPreRenderIds();
+        this.preRenderWrapper = this.preRenderWrapper
+            || document.getElementById(preRenderIds.wrapper);
+        this.preRenderShield = this.preRenderShield
+            || document.getElementById(preRenderIds.shield);
+        this.preRenderChild = this.preRenderChild
+            || document.getElementById(preRenderIds.child);
+
+        return !!this.preRenderWrapper && !!this.preRenderShield
+            && !!this.preRenderChild;
+    }
+
+    protected insertIntoDOMForPreRender(child: string | HTMLElement): void {
+        let childNode: HTMLElement;
+        if (typeof child === 'string') {
+            const divChildNode = document.createElement('div');
+            divChildNode.innerHTML = child;
+            childNode = divChildNode;
+        } else {
+            childNode = child;
+        }
+
+        const preRenderWrapper = this.createPreRenderWrapper(childNode);
+
+        document.body.appendChild(preRenderWrapper);
+
+        this.hidePreRender();
+    }
+
+    public hidePreRender(): void {
+        if (!this.isPreRenderAvailable()) {
+            // if the embed component is not preRendered , nothing to hide
+            console.log('No preRender found, not hiding ');
+            return;
+        }
+
+        setStyleProperties(this.preRenderWrapper, {
+            opacity: '0',
+            pointerEvents: 'none',
+            zIndex: '-1000',
+            position: 'absolute ',
+            top: '0',
+            left: '0',
+        });
+
+        const childBoundingRect = this.preRenderChild.getBoundingClientRect();
+
+        setStyleProperties(this.preRenderShield, {
+            opacity: '0',
+            pointerEvents: 'none',
+            zIndex: '1',
+            width: `${childBoundingRect.width}px`,
+            height: `${childBoundingRect.height}px`,
+            position: 'absolute',
+            top: '0',
+            left: '0',
+        });
+    }
+
+    public showPreRender() {
+        if (!this.isPreRenderAvailable()) {
+            // if the Embed component is nor preRendered , Render it now and
+            // show it (hide is defalt behaviour)
+            console.log('No preRender found, creating new ');
+            this.render();
+            return;
+        }
+
+        this.syncPreRenderStyle();
+
+        removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
+
+        setStyleProperties(this.preRenderShield, { zIndex: '-1' });
+    }
+
+    public syncPreRenderStyle() {
+        if (!this.el) {
+            throw new Error('Embed element is not defined');
+        }
+        const elBoundingClient = this.el.getBoundingClientRect();
+
+        setStyleProperties(this.preRenderWrapper, {
+            top: `${elBoundingClient.y}px`, left: `${elBoundingClient.x}px`, width: `${elBoundingClient.width}px`, height: `${elBoundingClient.height}px`,
+        });
+    }
+
     protected insertIntoDOM(child: string | Node): void {
         if (this.viewConfig.insertAsSibling) {
             if (typeof child === 'string') {
@@ -830,6 +977,16 @@ export class TsEmbed {
         return this;
     }
 
+    private isPreRendered: boolean;
+
+    /**
+     * Creates the preRender shell
+     */
+    public preRender(): TsEmbed {
+        this.isPreRendered = true;
+        return this;
+    }
+
     /**
      * Get the Post Url Params for THOUGHTSPOT from the current
      * host app URL.
@@ -920,8 +1077,11 @@ export class V1Embed extends TsEmbed {
         let queryString = queryParams;
         if (!this.viewConfig.excludeRuntimeFiltersfromURL) {
             const runtimeFilters = this.viewConfig.runtimeFilters;
+            const runtimeParameters = this.viewConfig.runtimeParameters;
+
+            const parameterQuery = getRuntimeParameters(runtimeParameters || []);
             const filterQuery = getFilterQuery(runtimeFilters || []);
-            queryString = [filterQuery, queryParams].filter(Boolean).join('&');
+            queryString = [parameterQuery, filterQuery, queryParams].filter(Boolean).join('&');
         }
         return this.getV1EmbedBasePath(queryString);
     }

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

@@ -5,6 +5,7 @@ export {
     AppEmbed,
     SageEmbed,
     useEmbedRef,
+    PreRenderedLiveboardEmbed,
 } from './index';
 
 export {

package/src/react/index.tsx

@@ -13,6 +13,7 @@ import { EmbedProps, getViewPropsAndListeners } from './util';
 
 const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
     EmbedConstructor: T,
+    isPreRenderedComponent = false,
 ) => React.forwardRef<InstanceType<T>, U>(
     (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
         const ref = React.useRef<HTMLDivElement>(null);
@@ -42,13 +43,24 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
                     listeners[eventName as EmbedEvent],
                 );
             });
-            tsEmbed.render();
+
+            if (isPreRenderedComponent) {
+                tsEmbed.preRender();
+            } else if (props.preRenderId) {
+                tsEmbed.showPreRender();
+            } else {
+                tsEmbed.render();
+            }
+
             if (forwardedRef) {
                 // eslint-disable-next-line no-param-reassign
                 forwardedRef.current = tsEmbed;
             }
             return () => {
-                tsEmbed.destroy();
+                if (!isPreRenderedComponent) {
+                    if (props.preRenderId) tsEmbed.hidePreRender();
+                    else tsEmbed.destroy();
+                }
             };
         }, [viewConfig, listeners]);
 
@@ -166,13 +178,12 @@ interface SageEmbedProps extends EmbedProps, SageViewConfig { }
  * }
  * ```
  */
-export const SageEmbed = componentFactory<
-    typeof _SageEmbed,
-    SageEmbedProps,
-    SageViewConfig
->(_SageEmbed);
+export const SageEmbed = componentFactory<typeof _SageEmbed, SageEmbedProps, SageViewConfig>(
+    _SageEmbed,
+);
 
-type EmbedComponent = typeof SearchEmbed
+type EmbedComponent =
+    | typeof SearchEmbed
     | typeof AppEmbed
     | typeof LiveboardEmbed
     | typeof SearchBarEmbed
@@ -200,6 +211,12 @@ export function useEmbedRef<T extends EmbedComponent>():
     return React.useRef<React.ComponentRef<T>>(null);
 }
 
+export const PreRenderedLiveboardEmbed = componentFactory<
+    typeof _LiveboardEmbed,
+    LiveboardProps,
+    LiveboardViewConfig
+>(_LiveboardEmbed, true);
+
 export {
     LiveboardViewConfig,
     SearchViewConfig,

package/src/types.ts

@@ -520,7 +520,7 @@ export interface EmbedConfig {
         hostUserGuid: string;
         hostClusterId: string;
         hostClusterName: string;
-    }
+    };
 
     /**
      * Pendo API key to enable Pendo tracking to your own subscription, the key
@@ -532,7 +532,7 @@ export interface EmbedConfig {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LayoutConfig { }
+export interface LayoutConfig {}
 
 /**
  * Embedded iFrame configuration
@@ -640,6 +640,11 @@ export interface ViewConfig {
      * visualization, or Liveboard.
      */
     runtimeFilters?: RuntimeFilter[];
+    /**
+     * The list of parameter override to apply to a search answer,
+     * visualization, or Liveboard.
+     */
+    runtimeParameters?: RuntimeParameter[];
     /**
      * The locale/language to use for the embedded view.
      *
@@ -747,6 +752,7 @@ export interface ViewConfig {
     /**
      * Hide the home page modules
      * eg: hiddenHomepageModules = [HomepageModule.MyLibrary]
+     *
      * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
      */
     hiddenHomepageModules?: HomepageModule[];
@@ -774,9 +780,15 @@ export interface ViewConfig {
      * There are 8 home nav list items, we will send those item as list
      * which we want to hide for TSE.
      * eg: hiddenHomeLeftNavItems = [HomeLeftNavItem.Home] to hide home.
+     *
      * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
      */
     hiddenHomeLeftNavItems?: HomeLeftNavItem[];
+    /**
+     * TBD
+     */
+
+    preRenderId?: string;
 }
 
 /**
@@ -952,6 +964,20 @@ export interface RuntimeFilter {
      */
     values: (number | boolean | string)[];
 }
+/**
+ * A filter that can be applied to ThoughtSpot answers, Liveboards, or
+ * visualizations at runtime.
+ */
+export interface RuntimeParameter {
+    /**
+     * The name of the runtime parameter to filter on (case-sensitive)
+     */
+    name: string;
+    /**
+     * Values
+     */
+    value: number | boolean | string;
+}
 
 /**
  * Event types emitted by the embedded ThoughtSpot application.
@@ -1378,21 +1404,21 @@ export enum EmbedEvent {
      */
     InsertIntoSlide = 'insertInToSlide',
     /**
+     * @hidden
      * Emitted when a user changes any filter on a Liveboard.
-     *
      * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
      */
     FilterChanged = 'filterChanged',
     /**
      *  Emitted when a user click on Go button in Sage Embed
      *
-     * @version SDK : 1.27.0 | Thoughtspot: 9.7.0.cl
+     * @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     SageEmbedQuery = 'sageEmbedQuery',
     /**
      * Emitten when a user select data source in Sage Embed
      *
-     * @version SDK : 1.27.0 | Thoughtspot: 9.7.0.cl
+     * @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     SageWorksheetUpdated = 'sageWorksheetUpdated',
     /**
@@ -1401,6 +1427,51 @@ export enum EmbedEvent {
      * @version SDK : 1.27.0 | Thoughtspot: 9.8.0.cl
      */
     UpdateConnection = 'updateConnection',
+    /**
+     * Emitted when name, status (private or public) or filter values of a
+     * PersonalisedView is updated.
+     *
+     * @returns viewName: string
+     * @returns viewId: string
+     * @returns liveboardId: string
+     * @returns isPublic: boolean
+     * @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
+     */
+    UpdatePersonalisedView = 'updatePersonalisedView',
+    /**
+     * Emitted when a PersonalisedView is saved.
+     *
+     * @returns viewName: string
+     * @returns viewId: string
+     * @returns liveboardId: string
+     * @returns isPublic: boolean
+     * @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
+     */
+    SavePersonalisedView = 'savePersonalisedView',
+    /**
+     * Emitted when a Liveboard is reset.
+     *
+     * @returns viewName: string
+     * @returns viewId: string
+     * @returns liveboardId: string
+     * @returns isPublic: boolean
+     * @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
+     */
+    ResetLiveboard = 'resetLiveboard',
+    /**
+     * Emitted when a PersonalisedView is deleted.
+     *
+     * @returns views: string[]
+     * @returns liveboardId: string
+     * @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
+     */
+    DeletePersonalisedView = 'deletePersonalisedView',
+    /**
+     * Emitten when a user creates a new worksheet
+     *
+     * @version SDK : 1.27.0 | Thoughtspot: 9.8.0.cl
+     */
+    CreateWorksheet = 'createWorksheet',
 }
 
 /**
@@ -2045,16 +2116,16 @@ export enum HostEvent {
      */
     ResetSearch = 'resetSearch',
     /**
+     * @hidden
      * Gets the currents visible and runtime filters applied on a Liveboard
-     *
      * @example
      * liveboardEmbed.trigger(HostEvent.GetFilters)
      * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
      */
     GetFilters = 'getFilters',
     /**
+     * @hidden
      * Updates the visible filters on the Liveboard.
-     *
      * @param - filter: filter object containing column name and filter operation and values
      * @example
      *
@@ -2710,15 +2781,15 @@ export enum Action {
      * ```
      */
     RequestAccess = 'requestAccess',
-   /**
-    * The **Query visualizer** and **Query SQL** buttons in Query details panel
-    * of the Answer page
-    *
-    * @example
-    * ```js
-    * disabledActions: [Action.QueryDetailsButtons]
-    * ```
-    */
+    /**
+     * The **Query visualizer** and **Query SQL** buttons in Query details panel
+     * of the Answer page
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.QueryDetailsButtons]
+     * ```
+     */
     QueryDetailsButtons = 'queryDetailsButtons',
     /**
      * The **Delete** action for Answers.
@@ -3043,6 +3114,16 @@ export enum Action {
      * ```
      */
     ManageMonitor = 'ManageMonitor',
+    /**
+     * Action ID for Liveboard Personalised Views dropdown
+     *
+     *  @example
+     * ```js
+     * disabledActions: [Action.PersonalisedViewsDropdown]
+     * ```
+     *  @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl
+     */
+    PersonalisedViewsDropdown = 'personalisedViewsDropdown',
 }
 
 export interface SessionInterface {

package/src/utils.spec.ts

@@ -10,6 +10,7 @@ import {
     appendToUrlHash,
     getRedirectUrl,
     checkReleaseVersionInBeta,
+    getRuntimeParameters,
 } from './utils';
 import { RuntimeFilterOp } from './types';
 
@@ -65,6 +66,36 @@ describe('unit test for utils', () => {
             'col1=foo&op1=EQ&val1=42&col2=bar&op2=BW_INC&val2=1&val2=10&col3=baz&op3=CONTAINS&val3=abc',
         );
     });
+    test('getParameterOverride', () => {
+        expect(getRuntimeParameters([])).toBe(null);
+
+        expect(
+            getRuntimeParameters([
+                {
+                    name: 'foo',
+                    value: 'bar',
+                },
+            ]),
+        ).toBe('param1=foo&paramVal1=bar');
+
+        const params = [
+            {
+                name: 'foo',
+                value: 42,
+            },
+            {
+                name: 'bar',
+                value: 'abc',
+            },
+            {
+                name: 'baz',
+                value: true,
+            },
+        ];
+        expect(getRuntimeParameters(params)).toBe(
+            'param1=foo&paramVal1=42&param2=bar&paramVal2=abc&param3=baz&paramVal3=true',
+        );
+    });
 
     test('getCssDimension', () => {
         expect(getCssDimension(100)).toBe('100px');

package/src/utils.ts

@@ -15,6 +15,7 @@ import {
     CustomisationsInterface,
     DOMSelector,
     ViewConfig,
+    RuntimeParameter,
 } from './types';
 
 /**
@@ -43,6 +44,28 @@ export const getFilterQuery = (runtimeFilters: RuntimeFilter[]): string => {
     return null;
 };
 
+/**
+ * Construct a runtime parameter override query string from the given option.
+ *
+ * @param runtimeParameters
+ */
+export const getRuntimeParameters = (runtimeParameters: RuntimeParameter[]): string => {
+    if (runtimeParameters && runtimeParameters.length) {
+        const params = runtimeParameters.map((param, valueIndex) => {
+            const index = valueIndex + 1;
+            const filterExpr = [];
+            filterExpr.push(`param${index}=${encodeURIComponent(param.name)}`);
+            filterExpr.push(`paramVal${index}=${encodeURIComponent(param.value)}`);
+
+            return filterExpr.join('&');
+        });
+
+        return `${params.join('&')}`;
+    }
+
+    return null;
+};
+
 /**
  * Convert a value to a string representation to be sent as a query
  * parameter to the ThoughtSpot app.
@@ -225,3 +248,23 @@ export function getDOMNode(domSelector: DOMSelector): HTMLElement {
 }
 
 export const deepMerge = (target: any, source: any) => merge(target, source);
+
+export const setStyleProperties = (
+    element: HTMLElement,
+    styleProperties: Partial<CSSStyleDeclaration>,
+): void => {
+    if (!element || !styleProperties) return;
+    Object.keys(styleProperties).forEach((styleProperty) => {
+        element.style[styleProperty] = styleProperties[styleProperty].toString();
+    });
+};
+
+export const removeStyleProperties = (
+    element: HTMLElement,
+    styleProperties: string[],
+): void => {
+    if (!element || !styleProperties) return;
+    styleProperties.forEach((styleProperty) => {
+        element.style.removeProperty(styleProperty);
+    });
+};