@thoughtspot/visual-embed-sdk 1.40.1-alpha.2 → 1.41.0-pre-render-1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.40.1-alpha.2",
+    "version": "1.41.0-pre-render-1",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -38,7 +38,7 @@
     "size-limit": [
         {
             "path": "dist/tsembed.es.js",
-            "limit": "31 kB"
+            "limit": "32 kB"
         }
     ],
     "scripts": {
@@ -85,7 +85,7 @@
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^11.2.1",
         "@rollup/plugin-replace": "^5.0.2",
-        "@size-limit/preset-big-lib": "^8.2.6",
+        "@size-limit/preset-big-lib": "^11.2.0",
         "@testing-library/dom": "^7.31.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
@@ -96,6 +96,7 @@
         "@types/react-test-renderer": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^8.28.0",
         "@typescript-eslint/parser": "^8.28.0",
+        "ajv": "^8.17.1",
         "asciidoctor": "^2.2.1",
         "babel-jest": "^26.6.3",
         "babel-preset-gatsby": "^1.10.0",
@@ -120,7 +121,7 @@
         "highlight.js": "^10.6.0",
         "html-to-text": "^8.0.0",
         "identity-obj-proxy": "^3.0.0",
-        "istanbul-merge": "^1.1.1",
+        "istanbul-merge": "^2.0.0",
         "jest": "^26.6.3",
         "jest-fetch-mock": "^3.0.3",
         "jsdom": "^17.0.0",

package/src/css-variables.ts

@@ -472,4 +472,399 @@ export interface CustomCssVariables {
      * Background color of checkbox.
      */
     '--ts-var-checkbox-background-color'?: string;
-  }
+
+    /**
+     * Height of the tiles in the Liveboard.
+     */
+    '--ts-var-viz-tile-height'?: string;
+
+    /**
+     * Background color of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-background'?: string;
+
+    /**
+     * Font color of the title of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-title-color'?: string;
+
+    /**
+     * Font size of the title of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-title-fontsize'?: string;
+
+    /**
+     * Background color of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-background'?: string;
+
+    /**
+     * Font size of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-fontsize'?: string;
+
+    /**
+     * Font color of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-font-color'?: string;
+
+    /**
+     * Border color of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-border-color'?: string;
+
+    /**
+     * Background color of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-background'?: string;
+
+    /**
+     * Border radius of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-border-radius'?: string;
+
+    /**
+     * Padding of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-padding'?: string;
+
+    /**
+     * Background color of the table header in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-table-header-background'?: string;
+
+    /**
+     * Padding of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-padding'?: string;
+
+    /**
+     * Padding of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-padding'?: string;
+
+    /**
+     * Font size of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-size'?: string;
+
+    /**
+     * Font weight of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-weight'?: string;
+
+    /**
+     * Font size of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-size'?: string;
+
+    /**
+     * Font weight of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-weight'?: string;
+
+    /**
+     * Font size of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-size'?: string;
+
+    /**
+     * Font weight of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-weight'?: string;
+
+    /**
+     * Border of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-border'?: string;
+
+    /**
+     * Padding of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-padding'?: string;
+
+    /**
+     * Padding of the answer viz in the Liveboard.
+     */
+    '--ts-var-liveboard-answer-viz-padding'?: string;
+
+    /**
+     * Background color of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-background'?: string;
+
+    /**
+     * Border color of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-border-color'?: string;
+
+    /**
+     * Font color of the heading of the note title in the Liveboard.
+     */
+    '--ts-var-liveboard-notetitle-heading-font-color'?: string;
+
+    /**
+     * Font color of the body of the note title in the Liveboard.
+     */
+    '--ts-var-liveboard-notetitle-body-font-color'?: string;
+
+    /**
+     * Font color of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-color'?: string;
+
+    /**
+     * Font color of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-color'?: string;
+
+    /**
+     * Font color of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-color'?: string;
+
+    /**
+     * Background color of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-background'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard.
+     */
+    '--ts-var-liveboard-chip-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard.
+     */
+    '--ts-var-liveboard-chip-color'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard on hover.
+     */
+    '--ts-var-liveboard-chip--hover-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard on hover.
+     */
+    '--ts-var-liveboard-chip--hover-color'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard on active.
+     */
+    '--ts-var-liveboard-chip--active-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard on active.
+     */
+    '--ts-var-liveboard-chip--active-color'?: string;
+
+    /**
+     * Width of the side panel in the Liveboard.
+     */
+    '--ts-var-side-panel-width'?: string;
+
+    /**
+     * Background color of the edit bar in the Liveboard.
+     */
+    '--ts-var-liveboard-edit-bar-background'?: string;
+
+    /**
+     * Breakpoint for the dual column layout in the Liveboard.
+     */
+    '--ts-var-liveboard-dual-column-breakpoint'?: string;
+
+    /**
+     * Breakpoint for the single column layout in the Liveboard.
+     */
+    '--ts-var-liveboard-single-column-breakpoint'?: string;
+
+    /**
+     * Background color of the cross filter layout in the Liveboard.
+     */
+    '--ts-var-liveboard-cross-filter-layout-background'?: string;
+
+    /**
+     * Border color of the active tab in the Liveboard.
+     */
+    '--ts-var-liveboard-tab-active-border-color'?: string;
+
+    /**
+     * Font color of the hover tab in the Liveboard.
+     */
+    '--ts-var-liveboard-tab-hover-color'?: string;
+
+    /**
+     * Font size of the title of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-title-fontsize'?: string;
+
+    /**
+     * Font weight of the title of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-title-fontweight'?: string;
+
+    /**
+     * Font weight of the description of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-description-font-weight'?: string;
+
+    /**
+     * Opacity of the description of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-description-opacity'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard.
+     */
+    '--ts-var-parameter-chip-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard.
+     */
+    '--ts-var-parameter-chip-text-color'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard on hover.
+     */
+    '--ts-var-parameter-chip-hover-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard on hover.
+     */
+    '--ts-var-parameter-chip-hover-text-color'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard on active.
+     */
+    '--ts-var-parameter-chip-active-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard on active.
+     */
+    '--ts-var-parameter-chip-active-text-color'?: string;
+
+    /**
+     * Background color of the action button in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-action-button-background'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-action-button-font-color'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header on hover.
+     */
+    '--ts-var-liveboard-header-action-button-hover-color'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header on active.
+     */
+    '--ts-var-liveboard-header-action-button-active-color'?: string;
+
+    /**
+     * Background color of the badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-background'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-font-color'?: string;
+
+    /**
+     * Background color of the modified badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-modified-background'?: string;
+
+    /**
+     * Font color of the modified badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-modified-font-color'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header on hover.
+     */
+    '--ts-var-liveboard-header-badge-hover-color'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header on active.
+     */
+    '--ts-var-liveboard-header-badge-active-color'?: string;
+
+    /**
+     * Font color of the hero text in the KPI widget.
+     */
+    '--ts-var-kpi-hero-color'?: string;
+
+    /**
+     * Font color of the comparison text in the KPI widget.
+     */
+    '--ts-var-kpi-comparison-color'?: string;
+
+    /**
+     * Font color of the analyze text in the KPI widget.
+     */
+    '--ts-var-kpi-analyze-text-color'?: string;
+
+    /**
+     * Font color of the legend title in the heatmap chart.
+     */
+    '--ts-var-chart-heatmap-legend-title-color'?: string;
+
+    /**
+     * Font color of the legend label in the heatmap chart.
+     */
+    '--ts-var-chart-heatmap-legend-label-color'?: string;
+
+    /**
+     * Font color of the legend title in the treemap chart.
+     */
+    '--ts-var-chart-treemap-legend-title-color'?: string;
+
+    /**
+     * Font color of the legend label in the treemap chart.
+     */
+    '--ts-var-chart-treemap-legend-label-color'?: string;
+
+    /**
+     * Color of the positive change in the KPI.
+     */
+    '--ts-var-kpi-positive-change-color'?: string;
+
+    /**
+     * Color of the negative change in the KPI.
+     */
+    '--ts-var-kpi-negative-change-color'?: string;
+ 
+    /**
+     * Background color of the change analysis insights.
+     */
+    '--ts-var-change-analysis-insights-background'?: string;
+
+    /**
+     * Background color of the forecasting card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-forecasting-card-background'?: string;
+
+    /**
+     * Background color of the outlier card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-outlier-card-background'?: string;
+
+    /**
+     * Background color of the trend card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-trend-card-background'?: string;
+    
+    /**
+     * Background color of the crosscorrelation card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-crosscorrelation-card-background'?: string;
+    
+    /**
+     * Background color of the summary header in the CCA modal.
+     */
+    '--ts-var-cca-modal-summary-header-background'?: string;
+  }

package/src/embed/app.spec.ts

@@ -593,9 +593,10 @@ describe('App embed tests', () => {
         });
     });
 
-    test('Should add navigationVersion=v3 & modularHomeExperience=false when primaryNavbarVersion is Sliding to the iframe src', async () => {
+    test('Should add navigationVersion=v3 & modularHomeExperience=true when primaryNavbarVersion is Sliding to the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
+            // Not included the homePage v2 config under discoveryExperience.
             discoveryExperience: {
                 primaryNavbarVersion: PrimaryNavbarVersion.Sliding,
             },
@@ -605,7 +606,21 @@ describe('App embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=true&navigationVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add navigationVersion=v2 when primaryNavbarVersion is not added to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v2${defaultParams}${defaultParamsPost}#/home`,
             );
         });
     });

package/src/embed/app.ts

@@ -740,10 +740,18 @@ export class AppEmbed extends V1Embed {
             params[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
         }
 
+        // Set navigation to v2 by default to avoid problems like the app
+        // switcher (9-dot menu) not showing when v3 navigation is turned on
+        // at the cluster level.
+        // To use v3 navigation, we must manually set the discoveryExperience
+        // settings.
+        params[Param.NavigationVersion] = 'v2';
         if (discoveryExperience) {
             // primaryNavbarVersion v3 will enabled the new left navigation
             if (discoveryExperience.primaryNavbarVersion === PrimaryNavbarVersion.Sliding) {
                 params[Param.NavigationVersion] = discoveryExperience.primaryNavbarVersion;
+                // Enable the modularHomeExperience when Sliding is enabled.
+                params[Param.ModularHomeExperienceEnabled] = true;
             }
 
             // homePage v2 will enable the modular home page

package/src/embed/bodyless-conversation.ts

@@ -41,7 +41,6 @@ export class ConversationMessage extends TsEmbed {
 
     protected getEmbedParamsObject() {
         const queryParams = this.getBaseQueryParams();
-
         queryParams[Param.HideActions] = [...(queryParams[Param.HideActions] ?? [])];
         queryParams[Param.isSpotterAgentEmbed] = true;
         return queryParams;

package/src/embed/conversation.spec.ts

@@ -1,10 +1,8 @@
-import {
-    SpotterEmbed,
-    SpotterEmbedViewConfig,
-} from './conversation';
+import { SpotterEmbed, SpotterEmbedViewConfig, ConversationEmbed } from './conversation';
+import { TsEmbed } from './ts-embed';
 import * as authInstance from '../auth';
 import { Action, init } from '../index';
-import { AuthType, Param } from '../types';
+import { AuthType, Param, RuntimeFilterOp } from '../types';
 import {
     getDocumentBody,
     getIFrameSrc,
@@ -180,4 +178,132 @@ describe('ConversationEmbed', () => {
             `http://${thoughtSpotHost}/v2/?${defaultParams}&${Param.DisableActions}=[%22${Action.InConversationTraining}%22]&${Param.DisableActionReason}=${disabledReason}&isSpotterExperienceEnabled=true&enableDataPanelV2=true#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
         );
     });
+
+    it('should render the conversation embed with runtime filters', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            runtimeFilters: [
+                {
+                    columnName: 'revenue',
+                    operator: RuntimeFilterOp.EQ,
+                    values: [1000],
+                },
+            ],
+        };
+
+        const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&col1=revenue&op1=EQ&val1=1000#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+
+    it('should render the conversation embed with runtime parameters', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            runtimeParameters: [
+                {
+                    name: 'Date Range',
+                    value: '30',
+                },
+            ],
+        };
+
+        const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&param1=Date%20Range&paramVal1=30#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+
+    it('should render the conversation embed with runtime parameters excluded from URL', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            runtimeParameters: [
+                {
+                    name: 'Date Range',
+                    value: '30',
+                },
+                {
+                    name: 'Region',
+                    value: 'North America',
+                },
+            ],
+            excludeRuntimeParametersfromURL: true,
+        };
+
+        const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+
+    it('should render the conversation embed with both runtime filters and parameters', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            runtimeParameters: [
+                {
+                    name: 'Date Range',
+                    value: '30',
+                },
+            ],
+            runtimeFilters: [
+                {
+                    columnName: 'revenue',
+                    operator: RuntimeFilterOp.EQ,
+                    values: [1000],
+                },
+            ],
+            excludeRuntimeParametersfromURL: false,
+            excludeRuntimeFiltersfromURL: false,
+        };
+
+        const conversationEmbed = new SpotterEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&col1=revenue&op1=EQ&val1=1000&param1=Date%20Range&paramVal1=30#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
+
+    it('should ensure deprecated ConversationEmbed class maintains same functionality as SpotterEmbed', async () => {
+        const viewConfig: SpotterEmbedViewConfig = {
+            worksheetId: 'worksheetId',
+            searchOptions: {
+                searchQuery: 'searchQuery',
+            },
+            runtimeParameters: [
+                {
+                    name: 'Date Range',
+                    value: '30',
+                },
+            ],
+        };
+
+        // Test with deprecated class
+        const conversationEmbed = new ConversationEmbed(getRootEl(), viewConfig);
+        await conversationEmbed.render();
+
+        // Verify it generates the same URL structure as SpotterEmbed
+        expectUrlMatchesWithParams(
+            getIFrameSrc(),
+            `http://${thoughtSpotHost}/v2/?${defaultParams}&isSpotterExperienceEnabled=true&param1=Date%20Range&paramVal1=30#/embed/insights/conv-assist?worksheet=worksheetId&query=searchQuery`,
+        );
+    });
 });