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

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

@@ -101,10 +101,10 @@ export const getAnswer = `
                     isDiscoverable
                     isHidden
                     modifiedAt
-                    tags
                 }
                 visualizations {
                     ... on TableViz {
+                        id
                         columns {
                             column {
                                 id
@@ -116,6 +116,9 @@ export const getAnswer = `
                             }
                         }
                     }
+                    ... on ChartViz {
+                        id
+                    }
                 }
             }
         }
@@ -164,3 +167,32 @@ export const addVizToLiveboard = `
         }
     }
 `;
+
+export const getSQLQuery = `
+    mutation GetSQLQuery($session: BachSessionIdInput!) {
+        Answer__getQuery(session: $session) {
+            ${bachSessionId}
+            sql
+        }
+    }
+`;
+
+export const getAnswerTML = `
+mutation GetUnsavedAnswerTML($session: BachSessionIdInput!, $exportDependencies: Boolean, $formatType:  EDocFormatType, $exportPermissions: Boolean, $exportFqn: Boolean) {
+  UnsavedAnswer_getTML(
+    session: $session
+    exportDependencies: $exportDependencies
+    formatType: $formatType
+    exportPermissions: $exportPermissions
+    exportFqn: $exportFqn
+  ) {
+    zipFile
+    object {
+      edoc
+      name
+      type
+      __typename
+    }
+    __typename
+  }
+}`;

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

@@ -3,7 +3,9 @@ import { AuthType, RuntimeFilterOp, VizPoint } from '../../../types';
 import { AnswerService } from './answerService';
 import {
     getAnswerData, removeColumns, addFilter, addColumns,
+    getSQLQuery,
 } from './answer-queries';
+import * as queries from './answer-queries';
 import * as authTokenInstance from '../../../authToken';
 import * as tokenizedFetch from '../../../tokenizedFetch';
 import * as embedConfigInstance from '../../../embed/embedConfig';
@@ -34,6 +36,23 @@ describe('Answer service tests', () => {
     beforeEach(() => {
         fetchMock.resetMocks();
     });
+
+    test('should call executeQuery with correct parameters to add columns', async () => {
+        const service = createAnswerService();
+        const executeQuerySpy = jest.spyOn(service, 'executeQuery').mockResolvedValue({
+            id: { genNo: 2 },
+
+        });
+
+        const columnIds = ['col1', 'col2'];
+        const result = await service.addColumns(columnIds);
+
+        expect(executeQuerySpy).toHaveBeenCalledWith(queries.addColumns, {
+            columns: columnIds.map((colId) => ({ logicalColumnId: colId })),
+        });
+        expect(result.id.genNo).toBe(2);
+    });
+
     test('Execute query should execute the supplied graphql on the session', async () => {
         fetchMock.mockResponseOnce(JSON.stringify({
             data: {
@@ -404,4 +423,116 @@ describe('Answer service tests', () => {
             }),
         );
     });
+
+    test('Get SQL query should call the right API', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            data: {
+                Answer__getQuery: {
+                    id: {},
+                    sql: 'SELECT * FROM table',
+                },
+            },
+        }));
+        const answerService = createAnswerService();
+        const sql = await answerService.getSQLQuery();
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=GetSQLQuery',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'GetSQLQuery',
+                    query: getSQLQuery,
+                    variables: {
+                        session: defaultSession,
+                    },
+                }),
+            }),
+        );
+        expect(sql).toBe('SELECT * FROM table');
+    });
+
+    test('Add displayed Viz should call the right API', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            data: {
+                Answer__addDisplayedViz: {
+                    id: {
+                        genNo: 2,
+                    },
+                },
+            },
+        }));
+        const answer = {
+            displayMode: 'CHART_MODE',
+            visualizations: [{
+                id: 'table1',
+                __typename: 'TableViz',
+            }, {
+                id: 'chart1',
+                __typename: 'ChartViz',
+            }],
+        };
+        const answerService = createAnswerService(answer);
+        await answerService.addDisplayedVizToLiveboard('lbId');
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=AddVizToLiveboard',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'AddVizToLiveboard',
+                    query: queries.addVizToLiveboard,
+                    variables: {
+                        session: defaultSession,
+                        liveboardId: 'lbId',
+                        vizId: 'chart1',
+                    },
+                }),
+            }),
+        );
+
+        answer.displayMode = 'TABLE_MODE';
+        const answerService2 = createAnswerService(answer);
+        await answerService2.addDisplayedVizToLiveboard('lbId');
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=AddVizToLiveboard',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'AddVizToLiveboard',
+                    query: queries.addVizToLiveboard,
+                    variables: {
+                        session: defaultSession,
+                        liveboardId: 'lbId',
+                        vizId: 'table1',
+                    },
+                }),
+            }),
+        );
+    });
+
+    test('GetTML should call the right API', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            data: {
+                UnsavedAnswer_getTML: {
+                    object: [{
+                        edoc: `answer: 
+                            id: bar`,
+                    }],
+                },
+            },
+        }));
+        const answerService = createAnswerService();
+        answerService.setTMLOverride({ name: 'name' });
+        const { answer } = await answerService.getTML();
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=GetUnsavedAnswerTML',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'GetUnsavedAnswerTML',
+                    query: queries.getAnswerTML,
+                    variables: {
+                        session: defaultSession,
+                    },
+                }),
+            }),
+        );
+        expect(answer.name).toBe('name');
+        expect(answer.id).toBe('bar');
+    });
 });

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

@@ -1,3 +1,4 @@
+// import YAML from 'yaml';
 import { tokenizedFetch } from '../../../tokenizedFetch';
 import type {
     ColumnValue, RuntimeFilter, RuntimeFilterOp, VizPoint,
@@ -54,6 +55,8 @@ export interface UnderlyingDataPoint {
 export class AnswerService {
     private answer: Promise<any>;
 
+    private tmlOverride = {};
+
     /**
      * Should not need to be called directly.
      * @param session
@@ -68,14 +71,7 @@ export class AnswerService {
         private selectedPoints?: VizPoint[],
     ) {
         this.session = removeTypename(session);
-        if (!answer) {
-            this.answer = this.executeQuery(
-                queries.getAnswer,
-                {},
-            ).then((data) => data?.answer);
-        } else {
-            this.answer = answer;
-        }
+        this.answer = answer;
     }
 
     /**
@@ -83,7 +79,7 @@ export class AnswerService {
      * This can be used to get the list of all columns in the data source for example.
      */
     public async getSourceDetail() {
-        const sourceId = (await this.answer).sources[0].header.guid;
+        const sourceId = (await this.getAnswer()).sources[0].header.guid;
         return getSourceDetail(
             this.thoughtSpotHost,
             sourceId,
@@ -173,6 +169,14 @@ export class AnswerService {
         );
     }
 
+    public async getSQLQuery(): Promise<string> {
+        const { sql } = await this.executeQuery(
+            queries.getSQLQuery,
+            {},
+        );
+        return sql;
+    }
+
     /**
      * Fetch data from the answer.
      * @param offset
@@ -214,6 +218,26 @@ export class AnswerService {
         });
     }
 
+    /**
+     * Fetch the data for the answer as a PNG blob. This might be
+     * quicker for larger data.
+     * @param userLocale
+     * @param includeInfo
+     * @param omitBackground Omit the background in the PNG
+     * @param deviceScaleFactor The scale factor for the PNG
+     * @return Response
+     */
+    public async fetchPNGBlob(userLocale = 'en-us', includeInfo = false, omitBackground = false, deviceScaleFactor = 2): Promise<Response> {
+        const fetchUrl = this.getFetchPNGBlobUrl(
+            userLocale,
+            omitBackground,
+            deviceScaleFactor,
+        );
+        return tokenizedFetch(fetchUrl, {
+            credentials: 'include',
+        });
+    }
+
     /**
      * Just get the internal URL for this answer's data
      * as a CSV blob.
@@ -225,6 +249,17 @@ export class AnswerService {
         return `${this.thoughtSpotHost}/prism/download/answer/csv?sessionId=${this.session.sessionId}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data&hideCsvHeader=${!includeInfo}`;
     }
 
+    /**
+     * Just get the internal URL for this answer's data
+     * as a PNG blob.
+     * @param userLocale
+     * @param omitBackground
+     * @param deviceScaleFactor
+     */
+    public getFetchPNGBlobUrl(userLocale = 'en-us', omitBackground = false, deviceScaleFactor = 2): string {
+        return `${this.thoughtSpotHost}/prism/download/answer/png?sessionId=${this.session.sessionId}&deviceScaleFactor=${deviceScaleFactor}&omitBackground=${omitBackground}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data`;
+    }
+
     /**
      * Get underlying data given a point and the output column names.
      * In case of a context menu action, the selectedPoints are
@@ -320,9 +355,48 @@ export class AnswerService {
         return this.session;
     }
 
-    public getAnswer() {
+    public async getAnswer() {
+        if (this.answer) {
+            return this.answer;
+        }
+        this.answer = this.executeQuery(
+            queries.getAnswer,
+            {},
+        ).then((data) => data?.answer);
         return this.answer;
     }
+
+    public async getTML(): Promise<any> {
+        const { object } = await this.executeQuery(
+            queries.getAnswerTML,
+            {},
+        );
+        const edoc = object[0].edoc;
+        const YAML = await import('yaml');
+        const parsedDoc = YAML.parse(edoc);
+        return {
+            answer: {
+                ...parsedDoc.answer,
+                ...this.tmlOverride,
+            },
+        };
+    }
+
+    public async addDisplayedVizToLiveboard(liveboardId: string) {
+        const { displayMode, visualizations } = await this.getAnswer();
+        const viz = getDisplayedViz(visualizations, displayMode);
+        return this.executeQuery(
+            queries.addVizToLiveboard,
+            {
+                liveboardId,
+                vizId: viz.id,
+            },
+        );
+    }
+
+    public setTMLOverride(override: any) {
+        this.tmlOverride = override;
+    }
 }
 
 /**
@@ -388,3 +462,21 @@ function getSelectedPointsForUnderlyingDataQuery(
     });
     return underlyingDataPoint;
 }
+
+/**
+ *
+ * @param visualizations
+ * @param displayMode
+ */
+function getDisplayedViz(visualizations: any[], displayMode: string) {
+    if (displayMode === 'CHART_MODE') {
+        return visualizations.find(
+            // eslint-disable-next-line no-underscore-dangle
+            (viz: any) => viz.__typename === 'ChartViz',
+        );
+    }
+    return visualizations.find(
+        // eslint-disable-next-line no-underscore-dangle
+        (viz: any) => viz.__typename === 'TableViz',
+    );
+}

package/src/utils/graphql/graphql-request.spec.ts

@@ -0,0 +1,51 @@
+import 'jest-fetch-mock';
+import { getSourceDetail } from './sourceService';
+import * as tokenizedFetchUtil from '../../tokenizedFetch';
+import { graphqlQuery } from './graphql-request';
+
+const getSourceDetailQuery = `
+    query GetSourceDetail($ids: [GUID!]!) {
+        getSourceDetailById(ids: $ids, type: LOGICAL_TABLE) {
+            id
+            name
+        }
+    }  
+`;
+
+const thoughtSpotHost = 'TSHOST';
+
+describe('graphQl tests', () => {
+    test('should call tokenizedFetch with correct parameters when graphqlQuery is called', async () => {
+        jest.spyOn(tokenizedFetchUtil, 'tokenizedFetch').mockResolvedValue({
+            json: jest.fn().mockResolvedValue({
+                data: {},
+            }),
+        });
+
+        const details = await graphqlQuery({
+            query: getSourceDetailQuery,
+            variables: {
+                ids: [2],
+            },
+            thoughtSpotHost,
+        });
+
+        expect(tokenizedFetchUtil.tokenizedFetch).toBeCalledWith('TSHOST/prism/?op=GetSourceDetail', {
+            body: '{"operationName":"GetSourceDetail","query":"\\n    query GetSourceDetail($ids: [GUID!]!) {\\n        getSourceDetailById(ids: $ids, type: LOGICAL_TABLE) {\\n            id\\n            name\\n        }\\n    }  \\n","variables":{"ids":[2]}}',
+            credentials: 'include',
+            headers: {
+                accept: '*/*', 'accept-language': 'en-us', 'content-type': 'application/json;charset=UTF-8', 'x-requested-by': 'ThoughtSpot',
+            },
+            method: 'POST',
+        });
+
+        const details2 = await graphqlQuery({
+            query: getSourceDetailQuery,
+            variables: {
+                ids: [2],
+            },
+            thoughtSpotHost,
+            isCompositeQuery: true,
+        });
+    });
+});

package/src/utils/graphql/graphql-request.ts

@@ -19,7 +19,7 @@ export async function graphqlQuery({
     variables: any,
     thoughtSpotHost: string,
     isCompositeQuery?: boolean
-}) {
+}): Promise<any> {
     const operationName = getOperationNameFromQuery(query);
     try {
         const response = await tokenizedFetch(`${thoughtSpotHost}/prism/?op=${operationName}`, {