@thoughtspot/visual-embed-sdk 1.24.0-dev → 1.24.0-preRender.1

package/src/types.ts

@@ -8,6 +8,7 @@
  */
 
 import { CustomCssVariables } from './css-variables';
+import type { SessionInterface } from './utils/graphql/answerService/answerService';
 
 /**
  * The authentication mechanism for allowing access to the
@@ -532,7 +533,7 @@ export interface EmbedConfig {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LayoutConfig {}
+export interface LayoutConfig { }
 
 /**
  * Embedded iFrame configuration
@@ -756,6 +757,13 @@ export interface ViewConfig {
      * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
      */
     hiddenHomepageModules?: HomepageModule[];
+    /**
+     * reordering the home page modules
+     * eg: reorderedHomepageModules = [HomepageModule.MyLibrary, HomepageModule.Watchlist]
+     *
+     * @version SDK: 1.28.0 | Thoughtspot: 9.9.0.cl
+     */
+    reorderedHomepageModules?: HomepageModule[];
     /**
      * The list of tab IDs to show in the embedded.
      * Only this Tabs will be shown in their respective LBs.
@@ -785,9 +793,20 @@ export interface ViewConfig {
      */
     hiddenHomeLeftNavItems?: HomeLeftNavItem[];
     /**
-     * TBD
+     * PreRender id to be used for PreRendering the embed.
+     * Use PreRender to render the embed in the background and then
+     * show or hide the rendered embed using showPreRender or hidePreRender respectively.
+     *
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   ... // other liveboard view config
+     *   preRenderId: "preRenderId-123"
+     * });
+     * embed.showPreRender();
+     * ```
+     * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
-
     preRenderId?: string;
 }
 
@@ -921,27 +940,27 @@ export enum HomepageModule {
     /**
      * Search bar
      */
-    Search = 'search',
+    Search = 'SEARCH',
     /**
      * kPI watchlist module
      */
-    Watchlist = 'watchlist',
+    Watchlist = 'WATCHLIST',
     /**
      * favorite objects
      */
-    Favorite = 'favorite',
+    Favorite = 'FAVORITE',
     /**
      * List of answers and liveboards
      */
-    MyLibrary = 'mylibrary',
+    MyLibrary = 'MY_LIBRARY',
     /**
      * Trending list
      */
-    Trending = 'trending',
+    Trending = 'TRENDING',
     /**
      * Learning videos
      */
-    Learning = 'learning',
+    Learning = 'LEARNING',
 }
 
 /**
@@ -3126,18 +3145,6 @@ export enum Action {
     PersonalisedViewsDropdown = 'personalisedViewsDropdown',
 }
 
-export interface SessionInterface {
-    sessionId: string;
-    genNo: number;
-    acSession: { sessionId: string; genNo: number };
-}
-
-// eslint-disable-next-line no-shadow
-export enum OperationType {
-    GetChartWithData = 'GetChartWithData',
-    GetTableWithHeadlineData = 'GetTableWithHeadlineData',
-}
-
 export interface AnswerServiceType {
     getAnswer?: (offset: number, batchSize: number) => any;
 }
@@ -3156,3 +3163,39 @@ export enum ContextMenuTriggerOptions {
     LEFT_CLICK = 'left-click',
     RIGHT_CLICK = 'right-click',
 }
+
+export interface ColumnValue {
+    column: {
+        id: string,
+        name: string,
+        dataType: string,
+        [key: string]: any
+    },
+    value: string | number | boolean;
+}
+
+export interface VizPoint {
+    selectedAttributes: ColumnValue[],
+    selectedMeasures: ColumnValue[]
+}
+
+export interface CustomActionPayload {
+    contextMenuPoints?: {
+        clickedPoint: VizPoint
+        selectedPoints: VizPoint[]
+    };
+    embedAnswerData: {
+        name: string,
+        id: string,
+        sources: {
+            header: {
+                guid: string
+            }
+        },
+        columns: any[],
+        data: any[],
+        [key: string]: any
+    };
+    session: SessionInterface;
+    vizId?: string;
+}

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

@@ -0,0 +1,80 @@
+const bachSessionId = `
+id {
+    sessionId
+    genNo
+    acSession {
+        sessionId
+        genNo
+    }
+}
+`;
+
+export const getUnaggregatedAnswerSession = `
+mutation GetUnAggregatedAnswerSession($session: BachSessionIdInput!, $columns: [UserPointSelectionInput!]!) {
+    Answer__getUnaggregatedAnswer(session: $session, columns: $columns) {
+        ${bachSessionId}
+        answer {
+            visualizations {
+                ... on TableViz {
+                    columns {
+                        column {
+                            id
+                            name
+                            referencedColumns {
+                                guid
+                                displayName
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}  
+`;
+
+export const removeColumns = `
+mutation RemoveColumns($session: BachSessionIdInput!, $logicalColumnIds: [GUID!], $columnIds: [GUID!]) {
+    Answer__removeColumns(
+        session: $session
+        logicalColumnIds: $logicalColumnIds
+        columnIds: $columnIds
+        ) {
+            ${bachSessionId}
+    }
+}
+    `;
+
+export const addColumns = `
+    mutation AddColumns($session: BachSessionIdInput!, $columns: [AnswerColumnInfo!]!) {
+        Answer__addColumn(session: $session, columns: $columns) {
+            ${bachSessionId}
+        }
+    }
+    `;
+
+export const getAnswerData = `
+    query GetTableWithHeadlineData($session: BachSessionIdInput!, $deadline: Int!, $dataPaginationParams: DataPaginationParamsInput!) {
+        getAnswer(session: $session) {
+            ${bachSessionId}
+            answer {
+                id
+                visualizations {
+                    id
+                    ... on TableViz {
+                        columns {
+                            column {
+                                id
+                                name
+                                type
+                                aggregationType
+                                dataType
+                            }
+                        }
+                        data(deadline: $deadline, pagination: $dataPaginationParams)
+                    }          
+                }
+            }
+        }
+    }
+`;

package/src/utils/graphql/answerService/answerService.spec.ts

@@ -0,0 +1,231 @@
+import 'jest-fetch-mock';
+import { VizPoint } from 'src/types';
+import { AnswerService } from './answerService';
+import { getAnswerData, removeColumns } from './answer-queries';
+
+const defaultSession = {
+    sessionId: 'id',
+    genNo: 1,
+    acSession: {
+        sessionId: 'ac',
+        genNo: 0,
+    },
+};
+/**
+ *
+ * @param answer
+ * @param point
+ */
+function createAnswerService(answer = {}, point?: VizPoint[]) {
+    return new AnswerService(
+        defaultSession,
+        answer,
+        'https://tshost',
+        point,
+    );
+}
+
+describe('Answer service tests', () => {
+    beforeEach(() => {
+        fetchMock.resetMocks();
+    });
+    test('Execute query should execute the supplied graphql on the session', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            data: {
+                Bla: {
+                    id: {},
+                },
+            },
+        }));
+        const answerService = createAnswerService();
+        answerService.executeQuery(
+            'query Bla {}',
+            { a: 1 },
+        );
+        expect(fetchMock).toBeCalledWith('https://tshost/prism/?op=Bla', expect.objectContaining({
+            body: JSON.stringify({
+                operationName: 'Bla',
+                query: 'query Bla {}',
+                variables: {
+                    session: defaultSession,
+                    a: 1,
+                },
+            }),
+        }));
+    });
+
+    test('Should return error when failure', async () => {
+        fetchMock.mockRejectOnce(new Error('testError'));
+        const answerService = createAnswerService();
+        const data = await answerService.executeQuery(
+            'query Bla {}',
+            { a: 1 },
+        );
+        expect(data.message).toBe('testError');
+    });
+
+    test('fetchData should call the right graphql, and return data', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            data: {
+                getAnswer: {
+                    id: {},
+                    answer: {
+                        visualizations: [{
+                            columns: [{
+                                column: {
+                                    id: 'id1',
+                                },
+                            }],
+                            data: {
+                                foo: 1,
+                            },
+                        }],
+                    },
+                },
+            },
+        }));
+        const answerService = createAnswerService();
+        const data = await answerService.fetchData(20, 10);
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=GetTableWithHeadlineData',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'GetTableWithHeadlineData',
+                    query: getAnswerData,
+                    variables: {
+                        session: defaultSession,
+                        deadline: 0,
+                        dataPaginationParams: {
+                            isClientPaginated: true,
+                            offset: 20,
+                            size: 10,
+                        },
+                    },
+                }),
+            }),
+        );
+        expect(data.columns[0].column.id).toBe('id1');
+        expect(data.data.foo).toBe(1);
+    });
+
+    test('fetchCSVBlob should call the right API', async () => {
+        fetchMock.once('Bla');
+        const answerService = createAnswerService();
+        answerService.fetchCSVBlob(undefined, true);
+        expect(fetchMock).toHaveBeenCalledWith(
+            `https://tshost/prism/download/answer/csv?sessionId=${defaultSession.sessionId}&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data&omitInfo=true`,
+            expect.objectContaining({}),
+        );
+    });
+
+    test('getUnderlyingDataForPoint should call the right APIs', async () => {
+        fetchMock.mockResponses(
+            JSON.stringify({
+                data: {
+                    getSourceDetailById: [{
+                        columns: [{
+                            id: 'id1',
+                            name: 'col1',
+                        }, {
+                            id: 'id2',
+                            name: 'col2',
+                        }, {
+                            id: 'id3',
+                            name: 'col3',
+                        }],
+                    }],
+                },
+            }),
+            JSON.stringify({
+                data: {
+                    Answer__getUnaggregatedAnswer: {
+                        id: {
+                            ...defaultSession,
+                        },
+                        answer: {
+                            visualizations: [{
+                                columns: [{
+                                    column: {
+                                        id: 'oid1',
+                                        name: 'col1',
+                                        referencedColumns: [{
+                                            guid: 'id1',
+                                        }],
+                                    },
+                                }],
+                            }],
+                        },
+                    },
+                },
+            }),
+            JSON.stringify({
+                data: {
+                    Answer__addColumn: {
+                        id: {
+                            genNo: 2,
+                        },
+                    },
+                },
+            }),
+            JSON.stringify({
+                data: {
+                    Answer__removeColumns: {
+                        id: {
+                            genNo: 3,
+                        },
+                    },
+                },
+            }),
+        );
+        const answerService = createAnswerService({
+            sources: [{
+                header: {
+                    guid: 'source1',
+                },
+            }],
+        }, [{
+            selectedAttributes: [{
+                column: {
+                    id: 'oid1', // output column id
+                    name: 'col1',
+                    dataType: 'CHAR',
+                },
+                value: '1',
+            }, {
+                column: {
+                    id: 'oid3',
+                    name: 'col3',
+                    dataType: 'DATE',
+                },
+                value: 12345,
+            }],
+            selectedMeasures: [],
+        }]);
+        const underlying = await answerService.getUnderlyingDataForPoint(['col2']);
+        expect(fetchMock).toHaveBeenCalledTimes(4);
+        expect(underlying.getSession().genNo).toBe(3);
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=RemoveColumns',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'RemoveColumns',
+                    query: removeColumns,
+                    variables: {
+                        session: {
+                            ...defaultSession,
+                            genNo: 2,
+                        },
+                        logicalColumnIds: [
+                            'id1',
+                        ],
+                    },
+                }),
+            }),
+        );
+    });
+
+    test('getUnderlyingDataForPoint should throw when no point is selected', async () => {
+        const answerService = createAnswerService({}, null);
+        await expect(answerService.getUnderlyingDataForPoint(['col2'])).rejects.toThrow();
+    });
+});

package/src/utils/graphql/answerService/answerService.ts

@@ -0,0 +1,234 @@
+import type { ColumnValue, VizPoint } from '../../../types';
+import { deepMerge, removeTypename } from '../../../utils';
+import { graphqlQuery } from '../graphql-request';
+import { getSourceDetail } from '../sourceService';
+import * as queries from './answer-queries';
+
+export interface SessionInterface {
+    sessionId: string;
+    genNo: number;
+    acSession: { sessionId: string; genNo: number };
+}
+
+// eslint-disable-next-line no-shadow
+export enum OperationType {
+    GetChartWithData = 'GetChartWithData',
+    GetTableWithHeadlineData = 'GetTableWithHeadlineData',
+}
+
+interface UnderlyingDataPoint {
+    columnId: string;
+    dataValue: any;
+}
+
+/**
+ * Class representing the answer service provided with the
+ * custom action payload. This service could be used to run
+ * graphql queries in the context of the answer on which the
+ * custom action was triggered.
+ *
+ * @example
+ * ```js
+ *  embed.on(EmbedEvent.CustomAction, e => {
+ *     const underlying = await e.answerService.getUnderlyingDataForPoint([
+ *       'col name 1'
+ *     ]);
+ *     const data = await underlying.fetchData(0, 100);
+ *  })
+ * ```
+ * @version
+ * ThoughtSpot: 9.9.0.cl / SDK: 1.25.0
+ */
+export class AnswerService {
+    constructor(
+        private session: SessionInterface,
+        private answer: any,
+        private thoughtSpotHost: string,
+        private selectedPoints?: VizPoint[],
+    ) {
+        this.session = removeTypename(session);
+    }
+
+    public async getSourceDetail() {
+        const sourceId = this.answer.sources[0].header.guid;
+        return getSourceDetail(
+            this.thoughtSpotHost,
+            sourceId,
+        );
+    }
+
+    public async removeColumns(columnIds: string[]) {
+        return this.executeQuery(
+            queries.removeColumns,
+            {
+                logicalColumnIds: columnIds,
+            },
+        );
+    }
+
+    public async addColumns(columnIds: string[]) {
+        return this.executeQuery(
+            queries.addColumns,
+            {
+                columns: columnIds.map((colId) => ({ logicalColumnId: colId })),
+            },
+        );
+    }
+
+    public async fetchData(offset = 0, size = 1000) {
+        const { answer } = await this.executeQuery(
+            queries.getAnswerData,
+            {
+                deadline: 0,
+                dataPaginationParams: {
+                    isClientPaginated: true,
+                    offset,
+                    size,
+                },
+            },
+        );
+        const { columns, data } = answer.visualizations[0];
+        return {
+            columns,
+            data,
+        };
+    }
+
+    /**
+     *
+     * @param userLocale
+     * @param omitInfo Omit the download Info on top of the CSV
+     * @returns Response
+     */
+    public async fetchCSVBlob(userLocale = 'en-us', omitInfo = false): Promise<Response> {
+        if (omitInfo) {
+            console.warn('omitInfo not supported yet.');
+        }
+        const fetchUrl = `${this.thoughtSpotHost}/prism/download/answer/csv?sessionId=${this.session.sessionId}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data&omitInfo=${omitInfo}`;
+        return fetch(fetchUrl, {
+            credentials: 'include',
+        });
+    }
+
+    public async getUnderlyingDataForPoint(
+        outputColumnNames: string[],
+        selectedPoints?: UnderlyingDataPoint[],
+    ): Promise<AnswerService> {
+        if (!selectedPoints && !this.selectedPoints) {
+            throw new Error('Needs to be triggered in context of a point');
+        }
+
+        if (!selectedPoints) {
+            selectedPoints = getSelectedPointsForUnderlyingDataQuery(
+                this.selectedPoints,
+            );
+        }
+
+        const sourceDetail = await this.getSourceDetail();
+        const ouputColumnGuids = getGuidsFromColumnNames(sourceDetail, outputColumnNames);
+        const unAggAnswer = await graphqlQuery({
+            query: queries.getUnaggregatedAnswerSession,
+            variables: {
+                session: this.session,
+                columns: selectedPoints,
+            },
+            thoughtSpotHost: this.thoughtSpotHost,
+        });
+        const unaggAnswerSession = new AnswerService(
+            unAggAnswer.id,
+            unAggAnswer.answer,
+            this.thoughtSpotHost,
+        );
+        const currentColumns: Set<string> = new Set(
+            unAggAnswer.answer.visualizations[0].columns
+                .map(
+                    (c: any) => c.column.referencedColumns[0].guid,
+                ),
+        );
+
+        const columnsToAdd = [...ouputColumnGuids].filter((col) => !currentColumns.has(col));
+        if (columnsToAdd.length) {
+            await unaggAnswerSession.addColumns(columnsToAdd);
+        }
+
+        const columnsToRemove = [...currentColumns].filter((col) => !ouputColumnGuids.has(col));
+        if (columnsToRemove.length) {
+            await unaggAnswerSession.removeColumns(columnsToRemove);
+        }
+
+        return unaggAnswerSession;
+    }
+
+    public async executeQuery(query: string, variables: any): Promise<any> {
+        const data = await graphqlQuery({
+            query,
+            variables: {
+                session: this.session,
+                ...variables,
+            },
+            thoughtSpotHost: this.thoughtSpotHost,
+            isCompositeQuery: false,
+        });
+
+        this.session = deepMerge(this.session, data?.id || {}) as unknown as SessionInterface;
+        return data;
+    }
+
+    public getSession() {
+        return this.session;
+    }
+}
+
+/**
+ *
+ * @param sourceDetail
+ * @param colNames
+ */
+function getGuidsFromColumnNames(sourceDetail: any, colNames: string[]) {
+    const cols = sourceDetail.columns.reduce((colSet: any, col: any) => {
+        colSet[col.name] = col;
+        return colSet;
+    }, {});
+
+    return new Set(colNames.map((colName) => {
+        const col = cols[colName];
+        return col.id;
+    }));
+}
+
+/**
+ *
+ * @param selectedPoints
+ */
+function getSelectedPointsForUnderlyingDataQuery(
+    selectedPoints: VizPoint[],
+): UnderlyingDataPoint[] {
+    const underlyingDataPoint: UnderlyingDataPoint[] = [];
+    /**
+     *
+     * @param colVal
+     */
+    function addPointFromColVal(colVal: ColumnValue) {
+        const dataType = colVal.column.dataType;
+        const id = colVal.column.id;
+        let dataValue;
+        if (dataType === 'DATE') {
+            dataValue = [{
+                epochRange: {
+                    startEpoch: colVal.value,
+                },
+            }];
+        } else {
+            dataValue = [{ value: colVal.value }];
+        }
+        underlyingDataPoint.push({
+            columnId: colVal.column.id,
+            dataValue,
+        });
+    }
+
+    selectedPoints.forEach((p) => {
+        p.selectedAttributes.forEach(addPointFromColVal);
+    });
+    return underlyingDataPoint;
+}