@thoughtspot/visual-embed-sdk 1.21.0-alpha.0 → 1.21.0-alpha.2

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

@@ -187,7 +187,9 @@ declare module '@thoughtspot/visual-embed-sdk/embed/base' {
     export const prefetch: (url?: string, prefetchFeatures?: PrefetchFeatures[]) => void;
     /**
         * Initializes the Visual Embed SDK globally and perform
-        * authentication if applicable.
+        * authentication if applicable. This function needs to be called before any ThoughtSpot
+        * component like liveboard etc can be embedded. But need not wait for AuthEvent.SUCCESS
+        * to actually embed. That is handled internally.
         *
         * @param embedConfig The configuration object containing ThoughtSpot host,
         * authentication mechanism and so on.
@@ -326,8 +328,18 @@ declare module '@thoughtspot/visual-embed-sdk/embed/liveboard' {
             activeTabId?: string;
     }
     /**
-        * Embed a ThoughtSpot Liveboard or visualization
+        * Embed a ThoughtSpot Liveboard or a Thoughtspot visualization. When rendered it already
+        * waits for the authentication to complete, so no need to wait for AuthStatus.SUCCESS.
         *
+        * @example
+        * ```js
+        * import { .. } from '@thoughtspot/visual-embed-sdk';
+        * init({ ... });
+        * const embed = new LiveboardEmbed("#container", {
+        *   liveboardId: <your-id-here>,
+        * // .. other params here.
+        * })
+        * ```
         * @group Embed components
         */
     export class LiveboardEmbed extends V1Embed {
@@ -535,6 +547,12 @@ declare module '@thoughtspot/visual-embed-sdk/auth' {
             BASIC_LOGIN: string;
             LOGOUT: string;
     };
+    interface sessionInfoInterface {
+            userGUID: any;
+            isPublicUser: any;
+            mixpanelToken: any;
+            [key: string]: any;
+    }
     /**
         * Enum for auth failure types. This is the parameter passed to the listner
         * of {@link AuthStatus.FAILURE}.
@@ -647,6 +665,8 @@ declare module '@thoughtspot/visual-embed-sdk/auth' {
         *
         */
     export function notifyLogout(): void;
+    export const initSession: (sessionDetails: sessionInfoInterface) => void;
+    export const getSessionDetails: (sessionInfoResp: any) => sessionInfoInterface;
     /**
         * Return releaseVersion if available
         */
@@ -657,12 +677,7 @@ declare module '@thoughtspot/visual-embed-sdk/auth' {
         *
         * @group Global methods
         */
-    export function getSessionInfo(): Promise<any>;
-    /**
-        *
-        * @param sessionDetails
-        */
-    export function initSession(sessionDetails: any): void;
+    export function getSessionInfo(): Promise<sessionInfoInterface>;
     export const getAuthenticaionToken: (embedConfig: EmbedConfig) => Promise<any>;
     /**
         * Perform token based authentication
@@ -699,6 +714,7 @@ declare module '@thoughtspot/visual-embed-sdk/auth' {
         * Check if we are authenticated to the ThoughtSpot cluster
         */
     export const isAuthenticated: () => boolean;
+    export {};
 }
 
 declare module '@thoughtspot/visual-embed-sdk/types' {
@@ -738,16 +754,47 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             SAML = "SSO_SAML",
             /**
                 * SSO using SAML
-                * Will make the host application redirect to the SAML Idp.
+                * Will make the host application redirect to the SAML Idp. Use this
+                * when the idp does not allow itself to be embedded.
+                *
+                * This redirects the host application to the SAML Idp. The host application
+                * will be redirected back to the ThoughtSpot app after authentication.
                 *
                 * @example
                 * ```js
                 * init({
                 *   // ...
                 *   authType: AuthType.SAMLRedirect,
+                *  });
+                * ```
+                *
+                * This opens the SAML Idp in a popup window. The popup is triggered
+                * when the user clicks the trigger button. The popup window will be
+                * closed automatically after authentication.
+                * @example
+                * ```js
+                * init({
+                *   // ...
+                *   authType: AuthType.SAMLRedirect,
                 *   authTriggerText: 'Login with SAML',
                 *   authTriggerContainer: '#embed-container',
-                *  });
+                *   inPopup: true,
+                * });
+                * ```
+                *
+                * Can also use event to trigger the popup flow. Works the same
+                * as above example.
+                * @example
+                * ```js
+                * const authEE = init({
+                *  // ...
+                *  authType: AuthType.SAMLRedirect,
+                *  inPopup: true,
+                * });
+                *
+                * someButtonOnYourPage.addEventListener('click', () => {
+                *  authEE.emit(AuthEvent.TRIGGER_SSO_POPUP);
+                * });
                 * ```
                 */
             SAMLRedirect = "SSO_SAML",
@@ -761,6 +808,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             /**
                 * SSO using OIDC
                 * Will make the host application redirect to the OIDC Idp.
+                * See code samples in {@link SAMLRedirect}.
                 */
             OIDCRedirect = "SSO_OIDC",
             /**
@@ -1336,18 +1384,17 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             Load = "load",
             /**
                 * Data pertaining to answer or Liveboard is received
-                *
-                * @returns data - The answer or Liveboard data
+                * @return data - The answer or Liveboard data
+                * @important
                 */
             Data = "data",
             /**
-                * Search/answer/Liveboard filters have been applied/updated
-                *
+                * Search/answer/Liveboard filters have been applied/updated by the user.
                 * @hidden
                 */
             FiltersChanged = "filtersChanged",
             /**
-                * Search query has been updated
+                * Search query has been updated by the user.
                 */
             QueryChanged = "queryChanged",
             /**
@@ -1379,17 +1426,29 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             CustomAction = "customAction",
             /**
-                * A double click has been triggered on table/chart
-                *
-                * @returns ContextMenuInputPoints - data point that is double clicked
+                * Listen to double clicks on a visualization
+                * @return ContextMenuInputPoints - data point that is double clicked
                 * @version SDK: 1.5.0 | ThoughtSpot: ts7.oct.cl, 7.2.1
                 */
             VizPointDoubleClick = "vizPointDoubleClick",
             /**
-                * A click has been triggered on table/chart
+                * Listen to clicks on a visualization in a liveboard or Search result.
                 *
-                * @returns ContextMenuInputPoints - data point that is clicked
+                * @example
+                * ```js
+                * embed.on(ThoughtSpotEmbed.Event.VizPointClick, (data) => {
+                *   console.log(
+                *    data.vizId, // viz id
+                *    data.clickedPoint.selectedAttributes[0].value,
+                *    data.clickedPoint.selectedAttributes[0].column.name,
+                *    data.clickedPoint.selectedMeasures[0].value,
+                *    data.clickedPoint.selectedMeasures[0].column.name,
+                *   )
+                * });
+                * ```
+                * @return {vizId, clickedPoint} - metadata about point that is clicked
                 * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1-sw
+                * @important
                 */
             VizPointClick = "vizPointClick",
             /**
@@ -1504,6 +1563,12 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1-sw
                 */
             Download = "download",
+            /**
+                * Emitted when the download action is triggered on an answer
+                *
+                * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.4.0-sw
+                */
+            DownloadAsPng = "downloadAsPng",
             /**
                 * Emitted when the Download as PDF action is triggered on an answer
                 *
@@ -1687,8 +1752,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             CrossFilterChanged = "cross-filter-changed",
             /**
-                * Emitted when a user right clicks on chart or table
-                *
+                * Emitted when a user right clicks on a visualization (chart or table)
                 * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
                 */
             VizPointRightClick = "vizPointRightClick",
@@ -1777,10 +1841,11 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * @param - {@link RuntimeFilter}[] an array of {@link RuntimeFilter} Types.
                 * @example
                 * liveboardEmbed.trigger(HostEvent.UpdateRuntimeFilters, [
-                * {columnName: "state",operator: RuntimeFilterOp.EQ,values: ["michigan"]},
-                * {columnName: "item type",operator: RuntimeFilterOp.EQ,values:
-                * ["Jackets"]} ])
+                *   {columnName: "state",operator: RuntimeFilterOp.EQ,values: ["michigan"]},
+                *   {columnName: "item type",operator: RuntimeFilterOp.EQ,values: ["Jackets"]}
+                * ])
                 * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl, 8.4.1-sw
+                * @important
                 */
             UpdateRuntimeFilters = "UpdateRuntimeFilters",
             /**
@@ -2032,9 +2097,14 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 *
                 * @example
                 * ```js
-                * searchEmbed.trigger(HostEvent.GetTML)
+                * searchEmbed.trigger(HostEvent.GetTML).then((tml) => {
+                *   console.log(
+                *      tml.search_query // TML representation of the search query
+                *   );
+                * })
                 * ```
-                * @version SDK: 1.18.0 | ThoughtSpot: 8.10.0.cl
+                * @version SDK: 1.18.0 | ThoughtSpot: 8.10.0.cl, 9.0.1-sw
+                * @important
                 */
             GetTML = "getTML",
             /**
@@ -2083,12 +2153,29 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * '730496d6-6903-4601-937e-2c691821af3c'})
                 * vizEmbed.trigger(HostEvent.Download)
                 * searchEmbed.trigger(HostEvent.Download)
+                * @deprecated from SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.4.1-sw, Please use DownloadAsPng
                 * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
                 */
-            Download = "download",
+            Download = "downloadAsPng",
+            /**
+                * Triggers the Download action on visualization or search when Displaymode is Chart
+                *
+                * @example
+                * ```js
+                * liveboardEmbed.trigger(HostEvent.DownloadAsPng,
+                * {vizId:'730496d6-6903-4601-937e-2c691821af3c'})
+                * ```
+                * ```js
+                * vizEmbed.trigger(HostEvent.DownloadAsPng)
+                * ```
+                * ```js
+                * searchEmbed.trigger(HostEvent.DownloadAsPng)
+                * ```
+                * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.4.1-sw
+                */
+            DownloadAsPng = "downloadAsPng",
             /**
-                * Triggers the downloadAsCSV action on visualization or search when Displaymode is
-                * Table
+                * Triggers the downloadAsCSV action on visualization or search
                 *
                 * @example
                 * liveboardEmbed.trigger(HostEvent.DownloadAsCsv, {vizId:
@@ -2099,8 +2186,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             DownloadAsCsv = "downloadAsCSV",
             /**
-                * Triggers the downloadAsXLSX action on visualization or search when Displaymode is
-                * Table
+                * Triggers the downloadAsXLSX action on visualization or search
                 *
                 * @example
                 * liveboardEmbed.trigger(HostEvent.DownloadAsXlsx, {vizId:
@@ -2287,6 +2373,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             ReplaySearch = "replaySearch",
             ShowUnderlyingData = "showUnderlyingData",
             Download = "download",
+            DownloadAsPng = "downloadAsPng",
             DownloadAsPdf = "downloadAsPdf",
             DownloadAsCsv = "downloadAsCSV",
             DownloadAsXlsx = "downloadAsXLSX",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.21.0-alpha.0",
+    "version": "1.21.0-alpha.2",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",

package/src/auth.spec.ts

@@ -1,6 +1,7 @@
 import * as authInstance from './auth';
 import * as authService from './utils/authService';
 import * as checkReleaseVersionInBetaInstance from './utils';
+import * as mixPanelService from './mixpanel-service';
 import { AuthType, EmbedEvent } from './types';
 import { executeAfterWait } from './test/test-utils';
 
@@ -91,6 +92,9 @@ export const embedConfig: any = {
 
 const originalWindow = window;
 export const mockSessionInfo = {
+    userGUID: '1234',
+    mixpanelToken: 'abc123',
+    isPublicUser: false,
     sessionId: '6588e7d9-710c-453e-a7b4-535fb3a8cbb2',
     genNo: 3,
     acSession: {
@@ -110,6 +114,7 @@ describe('Unit test for auth', () => {
     });
 
     test('when session info giving response', async () => {
+        jest.spyOn(mixPanelService, 'initMixpanel').mockImplementation(() => Promise.resolve());
         authInstance.initSession(mockSessionInfo);
         const sessionInfo = await authInstance.getSessionInfo();
         expect(sessionInfo).toStrictEqual(mockSessionInfo);
@@ -138,11 +143,17 @@ describe('Unit test for auth', () => {
     });
 
     test('doTokenAuth: when user is loggedIn', async () => {
-        jest.spyOn(authService, 'fetchSessionInfoService').mockImplementation(async () => ({
-            json: () => mockSessionInfo,
-            status: 200,
-        }));
-        await authInstance.doTokenAuth(embedConfig.doTokenAuthSuccess('authToken'));
+        jest.spyOn(authService, 'fetchSessionInfoService').mockImplementation(
+            async () => ({
+                json: () => mockSessionInfo,
+                status: 200,
+            }),
+        );
+        jest.spyOn(authInstance, 'getSessionDetails').mockReturnValue(mockSessionInfo);
+        jest.spyOn(authInstance, 'initSession').mockReturnValue(null);
+        await authInstance.doTokenAuth(
+            embedConfig.doTokenAuthSuccess('authToken'),
+        );
         expect(authService.fetchSessionInfoService).toBeCalled();
         expect(authInstance.loggedInStatus).toBe(true);
     });
@@ -260,14 +271,24 @@ describe('Unit test for auth', () => {
         });
 
         it('when user is loggedIn', async () => {
-            spyOn(checkReleaseVersionInBetaInstance, 'checkReleaseVersionInBeta');
-            jest.spyOn(authService, 'fetchSessionInfoService').mockImplementation(async () => ({
+            spyOn(
+                checkReleaseVersionInBetaInstance,
+                'checkReleaseVersionInBeta',
+            );
+            jest.spyOn(authInstance, 'getSessionDetails').mockReturnValue(mockSessionInfo);
+            jest.spyOn(authInstance, 'initSession').mockReturnValue(null);
+            jest.spyOn(
+                authService,
+                'fetchSessionInfoService',
+            ).mockImplementation(async () => ({
                 json: () => mockSessionInfo,
                 status: 200,
             }));
             await authInstance.doBasicAuth(embedConfig.doBasicAuth);
             expect(authService.fetchSessionInfoService).toBeCalled();
             expect(authInstance.loggedInStatus).toBe(true);
+            expect(authInstance.getSessionDetails).toBeCalled();
+            expect(authInstance.initSession).toBeCalled();
         });
 
         it('when user is not loggedIn', async () => {
@@ -304,6 +325,8 @@ describe('Unit test for auth', () => {
                 json: () => mockSessionInfo,
                 status: 200,
             }));
+            jest.spyOn(authInstance, 'getSessionDetails').mockReturnValue(mockSessionInfo);
+            jest.spyOn(authInstance, 'initSession').mockReturnValue(null);
             await authInstance.doSamlAuth(embedConfig.doSamlAuth);
             expect(authService.fetchSessionInfoService).toBeCalled();
             expect(window.location.hash).toBe('');
@@ -340,7 +363,14 @@ describe('Unit test for auth', () => {
             });
             spyOn(authInstance, 'samlCompletionPromise');
             global.window.open = jest.fn();
-            jest.spyOn(authService, 'fetchSessionInfoService').mockImplementation(() => Promise.reject());
+            jest.spyOn(authService, 'fetchSessionInfoService')
+                .mockImplementationOnce(() => Promise.reject())
+                .mockImplementationOnce(async () => ({
+                    json: () => mockSessionInfo,
+                    status: 200,
+                }));
+            jest.spyOn(authInstance, 'getSessionDetails').mockReturnValue(mockSessionInfo);
+            jest.spyOn(authInstance, 'initSession').mockReturnValue(null);
             expect(await authInstance.samlCompletionPromise).not.toBe(null);
             expect(
                 await authInstance.doSamlAuth({
@@ -351,6 +381,8 @@ describe('Unit test for auth', () => {
             window.postMessage({ type: EmbedEvent.SAMLComplete }, '*');
             await authInstance.samlCompletionPromise;
             expect(authService.fetchSessionInfoService).toBeCalled();
+            expect(authInstance.getSessionDetails).toBeCalled();
+            expect(authInstance.initSession).toBeCalled();
         });
     });
 

package/src/auth.ts

@@ -1,4 +1,5 @@
 import EventEmitter from 'eventemitter3';
+import _ from 'lodash';
 import { initMixpanel } from './mixpanel-service';
 import {
     AuthType, DOMSelector, EmbedConfig, EmbedEvent, Param,
@@ -20,9 +21,9 @@ export let loggedInStatus = false;
 export let samlAuthWindow: Window = null;
 // eslint-disable-next-line import/no-mutable-exports
 export let samlCompletionPromise: Promise<void> = null;
-let sessionInfo: any = null;
-let sessionInfoResolver: (value: any) => void = null;
-const sessionInfoPromise = new Promise((resolve) => {
+let sessionInfo: sessionInfoInterface = null;
+let sessionInfoResolver: (value: sessionInfoInterface) => void = null;
+const sessionInfoPromise = new Promise((resolve:(value: sessionInfoInterface) => void) => {
     sessionInfoResolver = resolve;
 });
 let releaseVersion = '';
@@ -38,6 +39,13 @@ export const EndPoints = {
     LOGOUT: '/callosum/v1/session/logout',
 };
 
+interface sessionInfoInterface {
+    userGUID: any;
+    isPublicUser: any;
+    mixpanelToken: any;
+    [key:string]:any;
+}
+
 /**
  * Enum for auth failure types. This is the parameter passed to the listner
  * of {@link AuthStatus.FAILURE}.
@@ -196,6 +204,28 @@ export function notifyLogout(): void {
     authEE.emit(AuthStatus.LOGOUT);
 }
 
+export const initSession = (sessionDetails: sessionInfoInterface) => {
+    if (_.isNull(sessionInfo)) {
+        sessionInfo = sessionDetails;
+        initMixpanel(sessionInfo);
+        sessionInfoResolver(sessionInfo);
+    }
+};
+
+export const getSessionDetails = (sessionInfoResp: any):sessionInfoInterface => {
+    const devMixpanelToken = sessionInfoResp.configInfo.mixpanelConfig.devSdkKey;
+    const prodMixpanelToken = sessionInfoResp.configInfo.mixpanelConfig.prodSdkKey;
+    const mixpanelToken = sessionInfoResp.configInfo.mixpanelConfig.production
+        ? prodMixpanelToken
+        : devMixpanelToken;
+    return {
+        userGUID: sessionInfoResp.userGUID,
+        mixpanelToken,
+        isPublicUser: sessionInfoResp.configInfo.isPublicUser,
+        ...sessionInfoResp,
+    };
+};
+
 /**
  * Check if we are logged into the ThoughtSpot cluster
  *
@@ -207,6 +237,9 @@ async function isLoggedIn(thoughtSpotHost: string): Promise<boolean> {
     try {
         response = await fetchSessionInfoService(authVerificationUrl);
         const sessionInfoResp = await response.json();
+        const sessionDetails = getSessionDetails(sessionInfoResp);
+        // Store user session details from session info
+        initSession(sessionDetails);
         releaseVersion = sessionInfoResp.releaseVersion;
     } catch (e) {
         return false;
@@ -227,20 +260,10 @@ export function getReleaseVersion() {
  *
  * @group Global methods
  */
-export function getSessionInfo(): Promise<any> {
+export function getSessionInfo(): Promise<sessionInfoInterface> {
     return sessionInfoPromise;
 }
 
-/**
- *
- * @param sessionDetails
- */
-export function initSession(sessionDetails: any) {
-    sessionInfo = sessionDetails;
-    initMixpanel(sessionInfo);
-    sessionInfoResolver(sessionInfo);
-}
-
 const DUPLICATE_TOKEN_ERR = 'Duplicate token, please issue a new token every time getAuthToken callback is called.'
     + 'See https://developers.thoughtspot.com/docs/?pageid=embed-auth#trusted-auth-embed for more details.';
 let prevAuthToken: string = null;
@@ -425,8 +448,12 @@ const doSSOAuth = async (embedConfig: EmbedConfig, ssoEndPoint: string): Promise
 
     const ssoURL = `${thoughtSpotHost}${ssoEndPoint}`;
     if (embedConfig.inPopup) {
-        await samlPopupFlow(ssoURL, embedConfig.authTriggerContainer, embedConfig.authTriggerText);
-        loggedInStatus = true;
+        await samlPopupFlow(
+            ssoURL,
+            embedConfig.authTriggerContainer,
+            embedConfig.authTriggerText,
+        );
+        loggedInStatus = await isLoggedIn(thoughtSpotHost);
         return;
     }
 

package/src/embed/base.ts

@@ -142,7 +142,9 @@ function backwardCompat(embedConfig: EmbedConfig): EmbedConfig {
 
 /**
  * Initializes the Visual Embed SDK globally and perform
- * authentication if applicable.
+ * authentication if applicable. This function needs to be called before any ThoughtSpot
+ * component like liveboard etc can be embedded. But need not wait for AuthEvent.SUCCESS
+ * to actually embed. That is handled internally.
  *
  * @param embedConfig The configuration object containing ThoughtSpot host,
  * authentication mechanism and so on.
@@ -232,7 +234,7 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>):
         return renderQueue;
     }
     // Sending an empty function to keep it consistent with the above usage.
-    return fn(() => {}); // eslint-disable-line @typescript-eslint/no-empty-function
+    return fn(() => { }); // eslint-disable-line @typescript-eslint/no-empty-function
 };
 
 // For testing purposes only

package/src/embed/liveboard.ts

@@ -102,8 +102,18 @@ export interface LiveboardViewConfig extends ViewConfig {
 }
 
 /**
- * Embed a ThoughtSpot Liveboard or visualization
+ * Embed a ThoughtSpot Liveboard or a Thoughtspot visualization. When rendered it already
+ * waits for the authentication to complete, so no need to wait for AuthStatus.SUCCESS.
  *
+ * @example
+ * ```js
+ * import { .. } from '@thoughtspot/visual-embed-sdk';
+ * init({ ... });
+ * const embed = new LiveboardEmbed("#container", {
+ *   liveboardId: <your-id-here>,
+ * // .. other params here.
+ * })
+ * ```
  * @group Embed components
  */
 export class LiveboardEmbed extends V1Embed {

package/src/embed/ts-embed.ts

@@ -383,7 +383,8 @@ export class TsEmbed {
             queryParams[Param.ContextMenuTrigger] = false;
         }
 
-        const spriteUrl = customizations?.iconSpriteUrl;
+        const spriteUrl = customizations?.iconSpriteUrl
+            || this.embedConfig.customizations?.iconSpriteUrl;
         if (spriteUrl) {
             queryParams[Param.IconSpriteUrl] = spriteUrl.replace('https://', '');
         }

package/src/react/index.tsx

@@ -79,6 +79,21 @@ export const AppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConf
 
 interface LiveboardProps extends EmbedProps, LiveboardViewConfig {}
 
+/**
+ * React component for Liveboard embed.
+ *
+ * @example
+ * ```tsx
+ * function Liveboard() {
+ *  return <LiveboardEmbed
+ *      liveboardId="liveboardId"
+ *      fullHeight={true} {/* default false *\/}
+ *      onLiveboardRendered={() => console.log('Liveboard rendered')}
+ *      vizId="vizId" {/* if doing viz embed *\/}
+ *  />
+ * }
+ * ```
+ */
 export const LiveboardEmbed = componentFactory<
     typeof _LiveboardEmbed,
     LiveboardProps,