@thoughtspot/visual-embed-sdk 1.32.0-alpha.1 → 1.33.0-alpha.1

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

@@ -282,7 +282,13 @@ declare module '@thoughtspot/visual-embed-sdk/embed/app' {
                 * Flag to control Data panel experience
                 * @default false
                 * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
-                * @hidden
+                * @example
+                * ```js
+                * const embed = new AppEmbed('#tsEmbed', {
+                *    ... // other options
+                *    dataPanelV2: true,
+                * })
+                * ```
                 */
             dataPanelV2?: boolean;
             /**
@@ -838,6 +844,29 @@ declare module '@thoughtspot/visual-embed-sdk/embed/liveboard' {
                 * ```
                 */
             enable2ColumnLayout?: boolean;
+            /**
+                * Show a preview image of the visualization before the visualization loads.
+                * Only works for visualizations embeds with a viz id.
+                *
+                * Also, viz snashot should be enabled in the ThoughtSpot instance.
+                * Contact ThoughtSpot support to enable this feature.
+                *
+                * Since, this will show preview images, be careful that it may show
+                * undesired data to the user when using row level security.
+                *
+                * @example
+                * ```js
+                * const embed = new LiveboardEmbed('#embed-container', {
+                *   liveboardId: 'liveboard-id',
+                *   vizId: 'viz-id',
+                *   showPreviewLoader: true,
+                * });
+                * embed.render();
+                * ```
+                *
+                * @version SDK: 1.32.0 | ThoughtSpot: 10.0.0.cl
+                */
+            showPreviewLoader?: boolean;
     }
     /**
         * Embed a ThoughtSpot Liveboard or visualization. When rendered it already
@@ -1135,6 +1164,20 @@ declare module '@thoughtspot/visual-embed-sdk/embed/search' {
                 * ```
                 */
             dataPanelCustomGroupsAccordionInitialState?: DataPanelCustomColumnGroupsAccordionState;
+            /**
+                * Flag to remove focus from search bar initially when user
+                * lands on search embed page.
+                * @version SDK: 1.32.0 | Thoughtspot: 10.3.0.cl
+                * @default true
+                * @example
+                * ```js
+                * const embed = new SearchEmbed('#tsEmbed', {
+                *  ... // other options
+                * focusSearchBarOnRender: false,
+                * });
+                * ```
+                */
+            focusSearchBarOnRender?: boolean;
     }
     export const HiddenActionItemByDefaultForSearchEmbed: Action[];
     /**
@@ -2464,6 +2507,19 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * @version SDK: 1.29.0 | ThoughtSpot: 10.1.0.cl
                 */
             excludeRuntimeParametersfromURL?: boolean;
+            /**
+                * Enable the V2 shell. This can provide performance benefits
+                * due to a lighterweight shell.
+                * @example
+                * ```js
+                * const embed = new LiveboardEmbed('#embed', {
+                *   liveboardId: '123',
+                *   enableV2Shell_experimental: true
+                * });
+                * ```
+                * @version SDK: 1.31.2 | ThoughtSpot: 10.0.0.cl
+                */
+            enableV2Shell_experimental?: boolean;
     }
     /**
         * MessagePayload: Embed event payload: message type, data and status (start/end)
@@ -2715,11 +2771,6 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * @important
                 */
             Data = "data",
-            /**
-                * Search/Answer/Liveboard filters have been applied/updated by the user.
-                * @hidden
-                */
-            FiltersChanged = "filtersChanged",
             /**
                 * Search query has been updated by the user.
                 * @version SDK: 1.4.0 | ThoughtSpot: ts7.sep.cl, 8.4.1.sw
@@ -4515,7 +4566,8 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             CurrencyFormat = "currencyFormat",
             Enable2ColumnLayout = "enable2ColumnLayout",
             IsFullAppEmbed = "isFullAppEmbed",
-            IsOnBeforeGetVizDataInterceptEnabled = "isOnBeforeGetVizDataInterceptEnabled"
+            IsOnBeforeGetVizDataInterceptEnabled = "isOnBeforeGetVizDataInterceptEnabled",
+            FocusSearchBarOnRender = "focusSearchBarOnRender"
     }
     /**
         * ThoughtSpot application pages include actions and menu commands
@@ -5337,7 +5389,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * disabledActions: [Action.ManageMonitor]
                 * ```
                 */
-            ManageMonitor = "ManageMonitor",
+            ManageMonitor = "manageMonitor",
             /**
                 * Action ID for Liveboard Personalised Views dropdown
                 *  @example
@@ -5380,8 +5432,9 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * ```js
                 * hiddenAction: [Action.CreateLiveboard]
                 * disabledActions: [Action.CreateLiveboard]
+                * ```
                 *
-                * @version SDK: 1.31.1 | Thoughtspot: 10.1.0.cl
+                * @version SDK: 1.32.0 | Thoughtspot: 10.1.0.cl
                 */
             CreateLiveboard = "CreateLiveboard",
             /**
@@ -6337,7 +6390,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
             /**
                 * The DOM node where the ThoughtSpot app is to be embedded.
                 */
-            protected el: Element;
+            protected el: HTMLElement;
             /**
                 * The key to store the embed instance in the DOM node
                 */
@@ -6591,6 +6644,12 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
                 * ```
                 */
             on(messageType: EmbedEvent, callback: MessageCallback, options?: MessageOptions): typeof TsEmbed.prototype;
+            /**
+                * Only for testing purposes.
+                *
+                * @hidden
+                */
+            test__executeCallbacks: (eventType: EmbedEvent, data: any, eventPort?: void | MessagePort) => void;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.32.0-alpha.1",
+    "version": "1.33.0-alpha.1",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -38,7 +38,7 @@
     "size-limit": [
         {
             "path": "dist/tsembed.js",
-            "limit": "46 kB"
+            "limit": "48 kB"
         }
     ],
     "scripts": {
@@ -67,7 +67,8 @@
         "prepublishOnly": "npm run is-publish-allowed && npm run test && npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build",
         "check-size": "npm run build && size-limit",
         "publish-dev": "npm publish --tag dev",
-        "publish-prod": "npm publish --tag latest"
+        "publish-prod": "npm publish --tag latest",
+        "dev": "vite -c vite.local.config.ts"
     },
     "peerDependencies": {
         "react": "> 16.8.0",
@@ -157,7 +158,8 @@
         "typedoc-plugin-toc-group": "thoughtspot/typedoc-plugin-toc-group",
         "typescript": "^4.9.4",
         "url-search-params-polyfill": "^8.1.0",
-        "util": "^0.12.4"
+        "util": "^0.12.4",
+        "vite": "^5.3.4"
     },
     "author": "ThoughtSpot",
     "email": "support@thoughtspot.com",

package/src/embed/app.ts

@@ -264,7 +264,13 @@ export interface AppViewConfig extends Omit<ViewConfig, 'visibleTabs'> {
      * Flag to control Data panel experience
      * @default false
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
-     * @hidden
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataPanelV2: true,
+     * })
+     * ```
      */
     dataPanelV2?: boolean;
     /**
@@ -445,7 +451,6 @@ export class AppEmbed extends V1Embed {
             isOnBeforeGetVizDataInterceptEnabled = false,
             /* eslint-disable-next-line max-len */
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
-
         } = this.viewConfig;
 
         let params = {};
@@ -490,7 +495,9 @@ export class AppEmbed extends V1Embed {
 
         if (isOnBeforeGetVizDataInterceptEnabled) {
             /* eslint-disable-next-line max-len */
-            params[Param.IsOnBeforeGetVizDataInterceptEnabled] = isOnBeforeGetVizDataInterceptEnabled;
+            params[
+                Param.IsOnBeforeGetVizDataInterceptEnabled
+            ] = isOnBeforeGetVizDataInterceptEnabled;
         }
 
         params[Param.DataPanelV2Enabled] = dataPanelV2;
@@ -504,7 +511,9 @@ export class AppEmbed extends V1Embed {
             === DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST
         ) {
             /* eslint-disable-next-line max-len */
-            params[Param.DataPanelCustomGroupsAccordionInitialState] = dataPanelCustomGroupsAccordionInitialState;
+            params[
+                Param.DataPanelCustomGroupsAccordionInitialState
+            ] = dataPanelCustomGroupsAccordionInitialState;
         } else {
             /* eslint-disable-next-line max-len */
             params[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;

package/src/embed/liveboard.spec.ts

@@ -24,6 +24,7 @@ import {
 import * as tsEmbed from './ts-embed';
 import * as processTriggerInstance from '../utils/processTrigger';
 import * as auth from '../auth';
+import * as previewService from '../utils/graphql/preview-service';
 
 const defaultViewConfig = {
     frameParams: {
@@ -553,6 +554,39 @@ describe('Liveboard/viz embed tests', () => {
             });
         });
 
+        test('Show preview loader should not show the loader if not viz embed or showPreviewLoader is false', async () => {
+            const libEmbed = new LiveboardEmbed(getRootEl(), {
+                liveboardId: '1234',
+            });
+            await libEmbed.render();
+            await executeAfterWait(() => {
+                expect(getRootEl().innerHTML).not.toContain('ts-viz-preview-loader');
+            });
+        });
+
+        test('Show preview loader should show the loader if viz embed and showPreviewLoader is true', async () => {
+            jest.spyOn(previewService, 'getPreview').mockResolvedValue({
+                vizContent: '<div id=test>test</div>',
+            });
+            const libEmbed = new LiveboardEmbed(getRootEl(), {
+                liveboardId: '1234',
+                vizId: '5678',
+                showPreviewLoader: true,
+            });
+            await libEmbed.render();
+            expect(previewService.getPreview).toHaveBeenCalledWith('http://tshost', '5678', '1234');
+            await executeAfterWait(() => {
+                expect(getRootEl().style.position).toEqual('relative');
+                expect(getRootEl().innerHTML).toContain('<div class="ts-viz-preview-loader">');
+                expect(getRootEl().innerHTML).toContain('<div id="test">test</div>');
+            });
+
+            libEmbed.test__executeCallbacks(EmbedEvent.Data, {});
+            await executeAfterWait(() => {
+                expect(getRootEl().innerHTML).not.toContain('ts-viz-preview-loader');
+            });
+        });
+
         test('it should navigateToLiveboard with liveboard id is not passed', async (done) => {
             mockMessageChannel();
             const consoleSpy = jest.spyOn(console, 'error');

package/src/embed/liveboard.ts

@@ -8,6 +8,7 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 
+import { getPreview } from '../utils/graphql/preview-service';
 import { ERROR_MESSAGE } from '../errors';
 import {
     EmbedEvent,
@@ -21,6 +22,7 @@ import {
 import { getQueryParamString, isUndefined } from '../utils';
 import { getAuthPromise } from './base';
 import { V1Embed } from './ts-embed';
+import { addPreviewStylesIfNotPresent } from '../utils/global-styles';
 
 /**
  * The configuration for the embedded Liveboard or visualization page view.
@@ -259,6 +261,29 @@ export interface LiveboardViewConfig
      * ```
      */
     enable2ColumnLayout?: boolean;
+    /**
+     * Show a preview image of the visualization before the visualization loads.
+     * Only works for visualizations embeds with a viz id.
+     *
+     * Also, viz snashot should be enabled in the ThoughtSpot instance.
+     * Contact ThoughtSpot support to enable this feature.
+     *
+     * Since, this will show preview images, be careful that it may show
+     * undesired data to the user when using row level security.
+     *
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *   liveboardId: 'liveboard-id',
+     *   vizId: 'viz-id',
+     *   showPreviewLoader: true,
+     * });
+     * embed.render();
+     * ```
+     *
+     * @version SDK: 1.32.0 | ThoughtSpot: 10.0.0.cl
+     */
+    showPreviewLoader?: boolean;
 }
 
 /**
@@ -431,6 +456,40 @@ export class LiveboardEmbed extends V1Embed {
         }
     }
 
+    private async showPreviewLoader() {
+        if (!this.viewConfig.showPreviewLoader || !this.viewConfig.vizId) {
+            return;
+        }
+
+        try {
+            const preview = await getPreview(
+                this.thoughtSpotHost,
+                this.viewConfig.vizId,
+                this.viewConfig.liveboardId,
+            );
+
+            if (!preview.vizContent) {
+                return;
+            }
+            addPreviewStylesIfNotPresent();
+
+            const div = document.createElement('div');
+            div.innerHTML = `
+                <div class=ts-viz-preview-loader>
+                    ${preview.vizContent}
+                </div>
+                `;
+            const previewDiv = div.firstElementChild as HTMLElement;
+            this.el.appendChild(previewDiv);
+            this.el.style.position = 'relative';
+            this.on(EmbedEvent.Data, () => {
+                previewDiv.remove();
+            });
+        } catch (error) {
+            console.error('Error fetching preview', error);
+        }
+    }
+
     protected beforePrerenderVisible(): void {
         const embedObj = this.insertedDomEl?.[this.embedNodeKey] as LiveboardEmbed;
 
@@ -480,6 +539,7 @@ export class LiveboardEmbed extends V1Embed {
 
         const src = this.getIFrameSrc();
         await this.renderV1Embed(src);
+        this.showPreviewLoader();
 
         return this;
     }
@@ -502,4 +562,4 @@ export class LiveboardEmbed extends V1Embed {
 /**
  * @hidden
  */
-export class PinboardEmbed extends LiveboardEmbed {}
+export class PinboardEmbed extends LiveboardEmbed { }

package/src/embed/search.spec.ts

@@ -166,6 +166,23 @@ describe('Search embed tests', () => {
         });
     });
 
+    test('should remove focus from search bar', async () => {
+        const dataSources = ['data-source-1'];
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            hideDataSources: true,
+            dataSources,
+            focusSearchBarOnRender: false,
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParams}&dataSources=[%22data-source-1%22]&dataSourceMode=hide&useLastSelectedSources=false&focusSearchBarOnRender=false${prefixParams}#/embed/answer`,
+            );
+        });
+    });
+
     test('should add runtime filters', async () => {
         const dataSources = ['data-source-1'];
         const searchOptions = {

package/src/embed/search.ts

@@ -275,6 +275,20 @@ export interface SearchViewConfig
      * ```
      */
     dataPanelCustomGroupsAccordionInitialState?: DataPanelCustomColumnGroupsAccordionState;
+    /**
+     * Flag to remove focus from search bar initially when user
+     * lands on search embed page.
+     * @version SDK: 1.32.0 | Thoughtspot: 10.3.0.cl
+     * @default true
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *  ... // other options
+     * focusSearchBarOnRender: false,
+     * });
+     * ```
+     */
+    focusSearchBarOnRender?: boolean;
 }
 
 export const HiddenActionItemByDefaultForSearchEmbed = [
@@ -335,6 +349,7 @@ export class SearchEmbed extends TsEmbed {
             isOnBeforeGetVizDataInterceptEnabled = false,
             /* eslint-disable-next-line max-len */
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
+            focusSearchBarOnRender = true,
             excludeRuntimeParametersfromURL,
         } = this.viewConfig;
         const queryParams = this.getBaseQueryParams();
@@ -378,6 +393,10 @@ export class SearchEmbed extends TsEmbed {
             queryParams[Param.IsOnBeforeGetVizDataInterceptEnabled] = isOnBeforeGetVizDataInterceptEnabled;
         }
 
+        if (!focusSearchBarOnRender) {
+            queryParams[Param.FocusSearchBarOnRender] = focusSearchBarOnRender;
+        }
+
         queryParams[Param.DataPanelV2Enabled] = dataPanelV2;
         queryParams[Param.DataSourceMode] = this.getDataSourceMode();
 

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

@@ -1108,17 +1108,32 @@ describe('Unit test case for ts embed', () => {
     });
 
     describe('V1Embed ', () => {
+        beforeEach(() => {
+            jest.spyOn(config, 'getThoughtSpotHost').mockImplementation(() => 'http://tshost');
+        });
+
         test('when isRendered is true than isError will be true', () => {
-            spyOn(logger, 'error');
+            spyOn(logger, 'warn');
             const viEmbedIns = new tsEmbedInstance.V1Embed(getRootEl(), defaultViewConfig);
             expect(viEmbedIns['isError']).toBe(false);
             viEmbedIns.render();
             viEmbedIns.on(EmbedEvent.CustomAction, jest.fn()).render();
-            expect(viEmbedIns['isError']).toBe(true);
-            expect(logger.error).toHaveBeenCalledWith(
+            expect(logger.warn).toHaveBeenCalledWith(
                 'Please register event handlers before calling render',
             );
         });
+
+        test('Generates the correct url for V1Embed when V2 shell is enabled', async () => {
+            const v1Embed = new LiveboardEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                liveboardId: '123',
+                enableV2Shell_experimental: true,
+            });
+            await v1Embed.render();
+            await executeAfterWait(() => {
+                expect(getIFrameSrc()).toContain('/v2/?');
+            });
+        });
     });
 
     describe('Navigate to Page API', () => {

package/src/embed/ts-embed.ts

@@ -93,7 +93,7 @@ export class TsEmbed {
     /**
      * The DOM node where the ThoughtSpot app is to be embedded.
      */
-    protected el: Element;
+    protected el: HTMLElement;
 
     /**
      * The key to store the embed instance in the DOM node
@@ -369,7 +369,7 @@ export class TsEmbed {
      * @param query
      */
     protected getEmbedBasePath(query: string): string {
-        let queryString = query;
+        let queryString = (query.startsWith('?')) ? query : `?${query}`;
         if (this.shouldEncodeUrlQueryParams) {
             queryString = `?base64UrlEncodedFlags=${getEncodedQueryParamsString(
                 queryString.substr(1),
@@ -902,7 +902,7 @@ export class TsEmbed {
             isRegisteredBySDK,
         });
         if (this.isRendered) {
-            this.handleError('Please register event handlers before calling render');
+            logger.warn('Please register event handlers before calling render');
         }
         const callbacks = this.eventHandlerMap.get(messageType) || [];
         callbacks.push({ options, callback });
@@ -1258,7 +1258,9 @@ export class V1Embed extends TsEmbed {
             const filterQuery = getFilterQuery(runtimeFilters || []);
             queryString = [filterQuery, queryString].filter(Boolean).join('&');
         }
-        return this.getV1EmbedBasePath(queryString);
+        return (this.viewConfig.enableV2Shell_experimental)
+            ? this.getEmbedBasePath(queryString)
+            : this.getV1EmbedBasePath(queryString);
     }
 
     /**
@@ -1286,4 +1288,12 @@ export class V1Embed extends TsEmbed {
         const eventType = this.getCompatibleEventType(messageType);
         return super.on(eventType, callback, options);
     }
+
+    /**
+     * Only for testing purposes.
+     *
+     * @hidden
+     */
+    // eslint-disable-next-line camelcase
+    public test__executeCallbacks = this.executeCallbacks;
 }

package/src/types.ts

@@ -998,6 +998,20 @@ export interface ViewConfig {
      * @version SDK: 1.29.0 | ThoughtSpot: 10.1.0.cl
      */
     excludeRuntimeParametersfromURL?: boolean;
+    /**
+     * Enable the V2 shell. This can provide performance benefits
+     * due to a lighterweight shell.
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   liveboardId: '123',
+     *   enableV2Shell_experimental: true
+     * });
+     * ```
+     * @version SDK: 1.31.2 | ThoughtSpot: 10.0.0.cl
+     */
+    // eslint-disable-next-line camelcase
+    enableV2Shell_experimental?: boolean;
 }
 
 /**
@@ -1266,11 +1280,6 @@ export enum EmbedEvent {
      * @important
      */
     Data = 'data',
-    /**
-     * Search/Answer/Liveboard filters have been applied/updated by the user.
-     * @hidden
-     */
-    FiltersChanged = 'filtersChanged',
     /**
      * Search query has been updated by the user.
      * @version SDK: 1.4.0 | ThoughtSpot: ts7.sep.cl, 8.4.1.sw
@@ -2100,19 +2109,19 @@ export enum EmbedEvent {
      *```
      * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
      */
-     OnBeforeGetVizDataIntercept = 'onBeforeGetVizDataIntercept',
-     /**
-      * Emitted when parameter changes in an answer
-      * or liveboard
-      *
-      * ```js
-      * liveboardEmbed.on(EmbedEvent.ParameterChanged, (payload) => {
-      *     console.log('payload', payload);
-      * })
-      *```
-      * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
-      */
-     ParameterChanged = 'parameterChanged'
+    OnBeforeGetVizDataIntercept = 'onBeforeGetVizDataIntercept',
+    /**
+     * Emitted when parameter changes in an answer
+     * or liveboard
+     *
+     * ```js
+     * liveboardEmbed.on(EmbedEvent.ParameterChanged, (payload) => {
+     *     console.log('payload', payload);
+     * })
+     *```
+     * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
+     */
+    ParameterChanged = 'parameterChanged',
 }
 
 /**
@@ -3074,6 +3083,7 @@ export enum Param {
     Enable2ColumnLayout = 'enable2ColumnLayout',
     IsFullAppEmbed = 'isFullAppEmbed',
     IsOnBeforeGetVizDataInterceptEnabled = 'isOnBeforeGetVizDataInterceptEnabled',
+    FocusSearchBarOnRender = 'focusSearchBarOnRender',
 }
 
 /**
@@ -3898,7 +3908,7 @@ export enum Action {
      * disabledActions: [Action.ManageMonitor]
      * ```
      */
-    ManageMonitor = 'ManageMonitor',
+    ManageMonitor = 'manageMonitor',
     /**
      * Action ID for Liveboard Personalised Views dropdown
      *  @example
@@ -3943,8 +3953,9 @@ export enum Action {
      * ```js
      * hiddenAction: [Action.CreateLiveboard]
      * disabledActions: [Action.CreateLiveboard]
+     * ```
      *
-     * @version SDK: 1.31.1 | Thoughtspot: 10.1.0.cl
+     * @version SDK: 1.32.0 | Thoughtspot: 10.1.0.cl
      */
     CreateLiveboard = 'CreateLiveboard',
 

package/src/utils/global-styles.ts

@@ -0,0 +1,40 @@
+export const addPreviewStylesIfNotPresent = () => {
+    const styleEl = document.getElementById('ts-preview-style');
+    if (styleEl) {
+        return;
+    }
+
+    const previewStyles = `
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.0.2/styles/ag-grid.min.css">
+        <style id="ts-preview-style">
+           .ts-viz-preview-loader {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background: linear-gradient(-45deg, #eee 40%, #fafafa 50%, #eee 60%);
+                background-size: 300%;
+                background-position-x: 100%;
+                animation: shimmer 1s infinite linear;
+                z-index: 999;
+                filter: grayscale(0.2);
+           }
+
+           @keyframes shimmer {
+                to {
+                    background-position-x: 0%
+                }
+           }
+
+           .ts-viz-preview-loader .table-module__fullContainer {
+                width: 100%;
+                height: 100%;
+           }
+        </style>
+    `;
+    document.head.insertAdjacentHTML('beforeend', previewStyles);
+};

package/src/utils/graphql/answerService/answer-queries.ts

@@ -94,6 +94,15 @@ export const getAnswer = `
                         }
                     }
                 }
+                metadata {
+                    author
+                    authorId
+                    createdAt
+                    isDiscoverable
+                    isHidden
+                    modifiedAt
+                    tags
+                }
                 visualizations {
                     ... on TableViz {
                         columns {