@thoughtspot/visual-embed-sdk 1.53.0 → 1.53.2-beta

package/src/embed/liveboard.ts

@@ -8,6 +8,7 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 
+import isEqualWith from 'lodash/isEqualWith';
 import { getPreview } from '../utils/graphql/preview-service';
 import { ERROR_MESSAGE } from '../errors';
 import {
@@ -605,6 +606,14 @@ export interface LiveboardViewConfig
  * })
  * ```
  */
+/**
+ * A shallow copy without the keys whose value is `undefined`, so a key that was
+ * assigned `undefined` compares equal to one that was never set.
+ */
+const definedEntries = (config: Record<string, any> = {}): Record<string, any> => Object.fromEntries(
+    Object.entries(config).filter(([, value]) => value !== undefined),
+);
+
 export class LiveboardEmbed extends V1Embed {
     protected viewConfig: LiveboardViewConfig;
 
@@ -1004,17 +1013,19 @@ export class LiveboardEmbed extends V1Embed {
         super.beforePrerenderVisible();
 
         // Captured before showPreRender() hands the wrapper over to this
-        // instance. Itself means a hide/show, not a hand-over, so there is
-        // nothing stale to clear.
+        // instance. React builds a new instance per mount, so an equal config
+        // is a hide/show, not a hand-over: there is nothing stale to clear.
         const previous = this.getPreRenderObj<LiveboardEmbed>();
-        const showing = previous === this ? undefined : previous?.currentLiveboardState;
+        const previousRoute = this.isSameEmbedConfig(previous)
+            ? undefined
+            : previous?.currentLiveboardState;
 
         this.executeAfterEmbedContainerLoaded(async () => {
             // Without this the params callback suspends on its await and
             // Navigate goes out first, so the container loads with the previous
             // config's filters.
             await this.preRenderParamsApplied;
-            if (this.isShowingLiveboardRoute(showing)) {
+            if (this.isAlreadyOnSameRoute(previousRoute)) {
                 // Navigate to the route we are already on is a no-op, so the
                 // liveboard keeps its state. Home unmounts the container, which
                 // clears it.
@@ -1041,18 +1052,31 @@ export class LiveboardEmbed extends V1Embed {
         });
     }
 
+    // definedEntries drops undefined-valued keys: a shown instance carries
+    // vizId/activeTabId/etc as undefined, so a raw isEqual never matches again.
+    // Functions compare equal, since React passes a fresh closure per render.
+    private isSameEmbedConfig(previous?: LiveboardEmbed): boolean {
+        if (!previous) return false;
+        if (previous === this) return true;
+        return isEqualWith(
+            definedEntries(previous.viewConfig),
+            definedEntries(this.viewConfig),
+            (a, b) => (typeof a === 'function' && typeof b === 'function' ? true : undefined),
+        );
+    }
+
     // The whole route, not just the liveboard id: the path is built from the
     // viz, tab and view too, so a same-liveboard show onto another tab is a
     // real navigation.
-    private isShowingLiveboardRoute(showing?: LiveboardEmbed['currentLiveboardState']): boolean {
-        if (!showing?.liveboardId) return false;
+    private isAlreadyOnSameRoute(previousRoute?: LiveboardEmbed['currentLiveboardState']): boolean {
+        if (!previousRoute?.liveboardId) return false;
         const {
             liveboardId, vizId, activeTabId, personalizedViewId,
         } = this.viewConfig;
-        return showing.liveboardId === liveboardId
-            && showing.vizId === vizId
-            && showing.activeTabId === activeTabId
-            && showing.personalizedViewId === personalizedViewId;
+        return previousRoute.liveboardId === liveboardId
+            && previousRoute.vizId === vizId
+            && previousRoute.activeTabId === activeTabId
+            && previousRoute.personalizedViewId === personalizedViewId;
     }
 
     protected async handleRenderForPrerender(): Promise<TsEmbed> {

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

@@ -58,6 +58,26 @@ describe('buildSpotterSidebarAppInitData', () => {
             .toEqual(spotterChatPinConfig);
     });
 
+    it('lifts enableSpotterInstructionAndMoreSettings to the top level of embedParams', () => {
+        const result = buildSpotterSidebarAppInitData(base, {
+            spotterSidebarConfig: {
+                enablePastConversationsSidebar: true,
+                enableSpotterInstructionAndMoreSettings: false,
+            },
+        }, noopError);
+        expect(result.embedParams?.enableSpotterInstructionAndMoreSettings).toBe(false);
+        expect(result.embedParams?.spotterSidebarConfig).toEqual({
+            enablePastConversationsSidebar: true,
+        });
+    });
+
+    it('omits enableSpotterInstructionAndMoreSettings when it is not set', () => {
+        const result = buildSpotterSidebarAppInitData(base, {
+            spotterSidebarConfig: { enablePastConversationsSidebar: true },
+        }, noopError);
+        expect(result.embedParams).not.toHaveProperty('enableSpotterInstructionAndMoreSettings');
+    });
+
     it('promotes standalone flag into spotterSidebarConfig.enablePastConversationsSidebar', () => {
         const result = buildSpotterSidebarAppInitData(base, { enablePastConversationsSidebar: true }, noopError);
         expect(result.embedParams?.spotterSidebarConfig?.enablePastConversationsSidebar).toBe(true);

package/src/embed/spotter-utils.ts

@@ -36,6 +36,7 @@ export function buildSpotterSidebarAppInitData<T extends DefaultAppInitData>(
     embedParams?: {
         spotterSidebarConfig?: SpotterSidebarViewConfig;
         visualOverridesParams?: VisualizationOverrides | null;
+        enableSpotterInstructionAndMoreSettings?: boolean;
     };
 } {
     const { spotterSidebarConfig, enablePastConversationsSidebar, visualOverrides } = viewConfig;
@@ -56,8 +57,15 @@ export function buildSpotterSidebarAppInitData<T extends DefaultAppInitData>(
         };
     }
 
+    // The app reads enableSpotterInstructionAndMoreSettings from the top level
+    // of embedParams, so lift it out of the sidebar config.
+    const {
+        enableSpotterInstructionAndMoreSettings,
+        ...sidebarConfigRest
+    } = spotterSidebarConfig || {};
+
     const resolvedSidebarConfig: SpotterSidebarViewConfig = {
-        ...spotterSidebarConfig,
+        ...sidebarConfigRest,
         ...(resolvedEnablePastConversations !== undefined && {
             enablePastConversationsSidebar: resolvedEnablePastConversations,
         }),
@@ -81,6 +89,9 @@ export function buildSpotterSidebarAppInitData<T extends DefaultAppInitData>(
         embedParams: {
             ...((defaultAppInitData as any).embedParams || {}),
             spotterSidebarConfig: resolvedSidebarConfig,
+            ...(enableSpotterInstructionAndMoreSettings !== undefined
+                ? { enableSpotterInstructionAndMoreSettings }
+                : {}),
             ...(visualOverrides !== undefined ? { visualOverridesParams: visualOverrides } : {}),
         },
     };

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

@@ -2728,12 +2728,11 @@ describe('Unit test case for ts embed', () => {
                     contentRect: { height: 297, width: 987 },
                 },
             ]);
-
             expect(preRenderWrapper.style.height).toEqual(`${297}px`);
             expect(preRenderWrapper.style.width).toEqual(`${987}px`);
 
             expect(preRenderWrapper.style.opacity).toBe('');
-            expect(preRenderWrapper.style.pointerEvents).toBe('');
+            expect(preRenderWrapper.style.pointerEvents).toBe('auto');
             expect(preRenderWrapper.style.zIndex).toBe('');
 
             libEmbed.hidePreRender();
@@ -2770,7 +2769,7 @@ describe('Unit test case for ts embed', () => {
             const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
 
             expect(preRenderWrapper.style.opacity).toBe('');
-            expect(preRenderWrapper.style.pointerEvents).toBe('');
+            expect(preRenderWrapper.style.pointerEvents).toBe('auto');
             expect(preRenderWrapper.style.zIndex).toBe('');
         });
 
@@ -2943,6 +2942,216 @@ describe('Unit test case for ts embed', () => {
             (logger.debug as any).mockRestore();
         });
 
+        describe('position tracking (SCAL-338563)', () => {
+            /**
+             * A host app whose page scrolls in an inner element rather than the
+             * document — the shape both reported cases have. The placeholder's
+             * rect is driven off that element's scrollTop, the way a real
+             * layout would move it.
+             */
+            const mountInNestedScroller = () => {
+                createRootEleForEmbed();
+                const scroller = document.createElement('div');
+                scroller.id = 'inner-scroller';
+                document.body.appendChild(scroller);
+                scroller.appendChild(document.getElementById('tsEmbedDiv'));
+
+                let scrollTop = 0;
+                Object.defineProperty(scroller, 'scrollTop', {
+                    configurable: true,
+                    get: () => scrollTop,
+                    set: (value) => {
+                        scrollTop = value;
+                    },
+                });
+                scroller.getBoundingClientRect = () =>
+                    ({
+                        x: 0, y: 0, width: 800, height: 600,
+                        top: 0, left: 0, bottom: 600, right: 800,
+                    } as DOMRect);
+
+                const placeholderTopAtRest = 400;
+                const readPlaceholderTop = () => placeholderTopAtRest - scroller.scrollTop;
+
+                return { scroller, readPlaceholderTop };
+            };
+
+            const stubPlaceholderRect = (embed: any, readTop: () => number) => {
+                const placeholder = embed.getPreRenderPlaceHolderElement() as HTMLElement;
+                placeholder.getBoundingClientRect = () => {
+                    const top = readTop();
+                    return {
+                        x: 0, y: top, width: 800, height: 300,
+                        top, left: 0, bottom: top + 300, right: 800,
+                    } as DOMRect;
+                };
+                return placeholder;
+            };
+
+            it('should stop observing the placeholder once the frame is hidden', async () => {
+                const { scroller } = mountInNestedScroller();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'observer-stops-on-hide',
+                    liveboardId: 'myLiveboardId',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                // Size is the only thing the browser will not handle for us, so
+                // the observer is the one live resource a hide has to release.
+                const observer = (libEmbed as any).resizeObserver;
+                expect(observer).toBeDefined();
+                const disconnectSpy = jest.spyOn(observer, 'disconnect');
+
+                libEmbed.hidePreRender();
+
+                expect(disconnectSpy).toHaveBeenCalled();
+
+                disconnectSpy.mockRestore();
+                libEmbed.destroy();
+                scroller.remove();
+            });
+
+            it('should default the container to the host scrolling ancestor', async () => {
+                const { scroller } = mountInNestedScroller();
+                scroller.style.overflowY = 'auto';
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'auto-scroll-container',
+                    liveboardId: 'myLiveboardId',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                // In the scroller, so the browser moves it — no repositioning.
+                expect(wrapper.parentElement).toBe(scroller);
+                expect((libEmbed as any).preRenderContainerEl).toBe(scroller);
+
+                libEmbed.destroy();
+                scroller.remove();
+            });
+
+            it('should still use document.body when nothing scrolls', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'no-scroller-body',
+                    liveboardId: 'myLiveboardId',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                expect(wrapper.parentElement).toBe(document.body);
+
+                libEmbed.destroy();
+            });
+
+            it('should set pointer-events on show rather than dropping the property', async () => {
+                createRootEleForEmbed();
+                const container = document.createElement('div');
+                container.id = 'parking-root';
+                // Usual styling for a parking root: no swallowed clicks.
+                container.style.pointerEvents = 'none';
+                document.body.appendChild(container);
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'pointer-events-restored',
+                    liveboardId: 'myLiveboardId',
+                    preRenderContainer: '#parking-root',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                // Merely removing the property would leave the container's
+                // inherited `none` in force, and the frame dead to input.
+                expect(wrapper.style.pointerEvents).toBe('auto');
+
+                libEmbed.destroy();
+                container.remove();
+            });
+
+            it('should park a hidden wrapper out of the scrollable area', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'hidden-parked',
+                    liveboardId: 'myLiveboardId',
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+                await libEmbed.showPreRender();
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                expect(wrapper.style.transform).toBe('');
+
+                libEmbed.hidePreRender();
+                // Detached from every scroll container (fixed, resolves to the
+                // viewport), parked for the captured-fixed case, size
+                // preserved.
+                expect(wrapper.style.position).toBe('fixed');
+                expect(wrapper.style.transform).toBe('translateY(-100%)');
+                expect(wrapper.style.height).not.toBe('');
+
+                await libEmbed.showPreRender();
+                expect(wrapper.style.transform).toBe('');
+
+                libEmbed.destroy();
+            });
+
+            it('should not seed the placeholder with the unmeasured wrapper height', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'unmeasured-height',
+                    liveboardId: 'myLiveboardId',
+                    fullHeight: true,
+                    frameParams: { height: 420 },
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+
+                const wrapper = document.getElementById(libEmbed.getPreRenderIds().wrapper);
+                // createPreRenderWrapper() seeds 100vh, not a measurement.
+                expect(wrapper.style.height).toBe('100vh');
+
+                await libEmbed.showPreRender();
+
+                const placeholder = (libEmbed as any).getPreRenderPlaceHolderElement() as HTMLElement;
+                expect(placeholder.style.height).toBe('420px');
+
+                libEmbed.destroy();
+            });
+
+            it('should seed the placeholder with a height fullHeight has measured', async () => {
+                createRootEleForEmbed();
+
+                const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                    preRenderId: 'measured-height',
+                    liveboardId: 'myLiveboardId',
+                    fullHeight: true,
+                    frameParams: { height: 420 },
+                });
+                libEmbed.preRender();
+                await waitFor(() => !!getIFrameEl());
+
+                (libEmbed as any).setIFrameHeight(1180);
+                await libEmbed.showPreRender();
+
+                const placeholder = (libEmbed as any).getPreRenderPlaceHolderElement() as HTMLElement;
+                expect(placeholder.style.height).toBe('1180px');
+
+                libEmbed.destroy();
+            });
+        });
+
         describe('preRenderContainer', () => {
             it('should append preRenderWrapper to document.body when preRenderContainer is not set', async () => {
                 createRootEleForEmbed();
@@ -3216,21 +3425,16 @@ describe('Unit test case for ts embed', () => {
 
                 // Simulate React remounting the container: the old node (with
                 // our wrapper) is detached and a fresh node takes its place.
-                const removeSpy = jest.spyOn(oldContainer, 'removeEventListener');
                 oldContainer.remove();
                 const newContainer = document.createElement('div');
                 newContainer.id = 'remount-container';
                 document.body.appendChild(newContainer);
-                const addSpy = jest.spyOn(newContainer, 'addEventListener');
 
                 // A reposition (scroll/resize/re-show) heals the stale ref.
                 libEmbed.syncPreRenderStyle();
 
                 expect(newContainer.contains(wrapper)).toBe(true);
                 expect(oldContainer.contains(wrapper)).toBe(false);
-                // The scroll listener is migrated to the live container.
-                expect(removeSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
-                expect(addSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
 
                 libEmbed.destroy();
                 newContainer.remove();
@@ -7372,3 +7576,88 @@ describe('excludeConfigFromURL', () => {
         });
     });
 });
+
+describe('visual-sdk-embed-create does not upload runtime filter or parameter data', () => {
+    // Spied per test: an earlier suite calls jest.restoreAllMocks(), which
+    // would unwire a spy created at collection time.
+    let mockMixPanelEvent: jest.SpyInstance;
+
+    const runtimeFilters: RuntimeFilter[] = [
+        {
+            columnName: 'Patient SSN',
+            operator: RuntimeFilterOp.EQ,
+            values: ['123-45-6789'],
+        },
+    ];
+    const runtimeParameters: RuntimeParameter[] = [
+        {
+            name: 'Sales Region',
+            value: 'EMEA',
+        },
+    ];
+
+    beforeAll(() => {
+        init({
+            thoughtSpotHost: 'tshost',
+            authType: AuthType.None,
+        });
+    });
+
+    beforeEach(() => {
+        document.body.innerHTML = getDocumentBody();
+        mockMixPanelEvent = jest.spyOn(mixpanelInstance, 'uploadMixpanelEvent');
+    });
+
+    afterEach(() => {
+        mockMixPanelEvent.mockRestore();
+    });
+
+    const getEmbedCreateProps = () => {
+        const call = mockMixPanelEvent.mock.calls.find(
+            ([eventId]) => eventId === MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE,
+        );
+        expect(call).toBeDefined();
+        return call[1];
+    };
+
+    test('uploads the summary instead of the filters and parameters', () => {
+        new LiveboardEmbed(getRootEl(), {
+            liveboardId: 'lb-guid',
+            runtimeFilters,
+            runtimeParameters,
+        } as LiveboardViewConfig);
+
+        expect(getEmbedCreateProps()).toEqual(
+            expect.objectContaining({
+                liveboardId: 'lb-guid',
+                runtimeFilters: { count: 1, operators: ['EQ'] },
+                runtimeParameters: { count: 1, applicabilityLevels: [] },
+            }),
+        );
+    });
+
+    test('no column name, parameter name or operand reaches mixpanel', () => {
+        new LiveboardEmbed(getRootEl(), {
+            liveboardId: 'lb-guid',
+            runtimeFilters,
+            runtimeParameters,
+        } as LiveboardViewConfig);
+
+        const uploaded = JSON.stringify(getEmbedCreateProps());
+        ['Patient SSN', '123-45-6789', 'Sales Region', 'EMEA'].forEach((customerValue) => {
+            expect(uploaded).not.toContain(customerValue);
+        });
+    });
+
+    test('an embed with no runtime filters is unchanged', () => {
+        new LiveboardEmbed(getRootEl(), {
+            liveboardId: 'lb-guid',
+        } as LiveboardViewConfig);
+
+        const props = getEmbedCreateProps();
+        expect(props).toEqual({
+            liveboardId: 'lb-guid',
+            embedComponentType: 'LiveboardEmbed',
+        });
+    });
+});