@thoughtspot/ts-chart-sdk 0.0.2-alpha.2 → 0.0.2-alpha.21

package/src/main/custom-chart-context.ts

@@ -21,10 +21,14 @@ import {
     AppConfig,
     ChartConfig,
     ChartModel,
+    SuccessValidationResponse,
     ValidationResponse,
     VisualProps,
 } from '../types/common.types';
-import { ChartConfigEditorDefinition } from '../types/configurator.types';
+import {
+    ChartConfigEditorDefinition,
+    ConfigEditorDefinitionSetter,
+} from '../types/configurator.types';
 import {
     AxisMenuCustomActionPayload,
     ChartConfigValidateEventPayload,
@@ -42,16 +46,113 @@ import {
     VisualPropsUpdateEventPayload,
     VisualPropsValidateEventPayload,
 } from '../types/ts-to-chart-event.types';
-import { VisualPropEditorDefinition } from '../types/visual-prop.types';
+import {
+    VisualEditorDefinitionSetter,
+    VisualPropEditorDefinition,
+} from '../types/visual-prop.types';
 import {
     globalThis,
     initMessageListener,
     postMessageToHostApp,
 } from './post-message-event-bridge';
 
+/**
+ * Configuration for allowing or disallowing specific TS UI features.
+ *
+ * @fileoverview
+ * This configuration defines the ability to toggle specific features such as
+ * column number formatting, conditional formatting, and measure names/values.
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
 export type AllowedConfigurations = {
-    allowColumnNumberFormatting: boolean;
-    allowColumnConditionalFormatting: boolean;
+    /**
+     * Allows column-level number formatting.
+     *
+     * @default false
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    allowColumnNumberFormatting?: boolean;
+
+    /**
+     * Allows conditional formatting at the column level.
+     * This allows users to apply rules that visually highlight or differentiate data.
+     *
+     * @default false
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    allowColumnConditionalFormatting?: boolean;
+
+    /**
+     * Enables measure_name and measure_values in the chart configuration.
+     *
+     * @default false
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    allowMeasureNamesAndValues?: boolean;
+};
+
+/**
+ * Configuration parameters for setting chart-specific options.
+ *
+ * @fileoverview
+ * This configuration includes settings for controlling measure name/value columns
+ * and batch size limits for data processing.
+ *
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export type ChartConfigParameters = {
+    /**
+     * Configurations related to measure name and value columns.
+     * These parameters allow for enabling/disabling and aliasing the columns
+     * used to represent measure names and values.
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    measureNameValueColumns?: {
+        /**
+         * Enables or disables the measure_name column.
+         *
+         * @default false
+         * @version SDK: 0.1 | ThoughtSpot:
+         */
+        enableMeasureNameColumn?: boolean;
+
+        /**
+         * Enables or disables the measure_value column.
+         *
+         * @default false
+         * @version SDK: 0.1 | ThoughtSpot:
+         */
+        enableMeasureValueColumn?: boolean;
+
+        /**
+         * Alias for the measure_name column.
+         * This allows users to define a custom name for the measure_name column.
+         *
+         * @default 'Measure Name'
+         * @version SDK: 0.1 | ThoughtSpot:
+         */
+        measureNameColumnAlias?: string;
+
+        /**
+         * Alias for the measure_value column.
+         * This allows users to define a custom name for the measure_value column.
+         *
+         * @default 'Measure Value'
+         * @version SDK: 0.1 | ThoughtSpot:
+         */
+        measureValueColumnAlias?: string;
+    };
+
+    /**
+     * Limit on the batch size for data processing.
+     * This sets an upper limit on how much data can be processed in a single batch.
+     *
+     * @default 20000
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    batchSizeLimit?: number;
 };
 
 export type CustomChartContextProps = {
@@ -108,6 +209,7 @@ export type CustomChartContextProps = {
     validateVisualProps?: (
         updatedVisualProps: VisualProps,
         chartModel: ChartModel,
+        activeColumnId?: string,
     ) => ValidationResponse;
 
     /**
@@ -116,7 +218,9 @@ export type CustomChartContextProps = {
      *
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    chartConfigEditorDefinition?: ChartConfigEditorDefinition[];
+    chartConfigEditorDefinition?:
+        | ConfigEditorDefinitionSetter
+        | ChartConfigEditorDefinition[];
 
     /**
      * Definition to help edit/customize the visual properties from chart settings editor
@@ -127,12 +231,31 @@ export type CustomChartContextProps = {
      * @returns {@link VisualPropEditorDefinition}
      * @version SDK: 0.1 | ThoughtSpot:
      */
-    visualPropEditorDefinition?: VisualPropEditorDefinition;
+    visualPropEditorDefinition?:
+        | VisualEditorDefinitionSetter
+        | VisualPropEditorDefinition;
 
-    // Whether user wants thoughtspot default number and conditional formatting
+    /**
+     * Optional configuration to toggle native TS UI configurations, such as column number formatting
+     * and conditional formatting.
+     *
+     * @type {AllowedConfigurations}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
     allowedConfigurations?: AllowedConfigurations;
+    /**
+     * Optional parameters for configuring specific chart-related features, such as measure name and value columns.
+     *
+     * @type {ChartConfigParameters}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    chartConfigParameters?: ChartConfigParameters;
 };
 
+export type ValidationFunctions =
+    | CustomChartContextProps['validateVisualProps']
+    | CustomChartContextProps['validateConfig'];
+
 /**
  * Default configuration options for all the chart context properties
  */
@@ -143,6 +266,16 @@ const DEFAULT_CHART_CONTEXT_PROPS: Partial<CustomChartContextProps> = {
     allowedConfigurations: {
         allowColumnNumberFormatting: false,
         allowColumnConditionalFormatting: false,
+        allowMeasureNamesAndValues: false,
+    },
+    chartConfigParameters: {
+        measureNameValueColumns: {
+            enableMeasureNameColumn: false,
+            enableMeasureValueColumn: false,
+            measureNameColumnAlias: 'Measure Name',
+            measureValueColumnAlias: 'Measure Values',
+        },
+        batchSizeLimit: 20000,
     },
 };
 
@@ -252,6 +385,9 @@ export class CustomChartContext {
         this.hasInitializedPromise = new Promise((resolve, reject) => {
             this.triggerInitResolve = resolve;
         });
+        // Not using this.emitEvent as the context is not yet completely
+        // initialized, thus short circuiting.
+        postMessageToHostApp('', '*', null, ChartToTSEvent.InitStart);
     }
 
     /**
@@ -379,6 +515,50 @@ export class CustomChartContext {
         return processedPayload;
     }
 
+    /**
+     * Funtions return the chart config editor definition
+     * @param {ChartConfig[]} currentChartConfig
+     * @param {VisualProps}
+     * @returns {ChartConfigEditorDefinition[]}
+     */
+    private getChartConfigEditorDefinition = (
+        currentState: Partial<ChartModel> = {},
+    ) => {
+        if (_.isFunction(this.chartContextProps.chartConfigEditorDefinition)) {
+            return this.chartContextProps.chartConfigEditorDefinition(
+                {
+                    ...this.chartModel,
+                    ...currentState,
+                },
+                this,
+            );
+        }
+        return this.chartContextProps.chartConfigEditorDefinition;
+    };
+
+    /**
+     * Funtions returns the visual prop editor definition
+     * @param {ChartConfig[]} currentChartConfig
+     * @param {VisualProps}
+     * @returns {VisualPropEditorDefinition}
+     */
+    private getVisualPropEditorDefinition = (
+        activeColumnId?: string,
+        currentState: Partial<ChartModel> = {},
+    ) => {
+        if (_.isFunction(this.chartContextProps.visualPropEditorDefinition)) {
+            return this.chartContextProps.visualPropEditorDefinition(
+                {
+                    ...this.chartModel,
+                    ...currentState,
+                },
+                this,
+                activeColumnId,
+            );
+        }
+        return this.chartContextProps.visualPropEditorDefinition;
+    };
+
     /**
      * Function to store the axis menu custom action callback mapped with action id
      * @param  {[OpenAxisMenuEventPayload]} eventPayload Event payload bound
@@ -438,6 +618,26 @@ export class CustomChartContext {
         }
     }
 
+    private validationsResponseProcessor(
+        currentValidationState: Partial<ChartModel>,
+        validationResponse: ValidationResponse,
+        activeColumnId?: string,
+    ) {
+        const visualPropEditorDefinition = this.getVisualPropEditorDefinition(
+            activeColumnId,
+            currentValidationState,
+        );
+        const chartConfigEditorDefinition = this.getChartConfigEditorDefinition(
+            currentValidationState,
+        );
+
+        return {
+            ...validationResponse,
+            visualPropEditorDefinition,
+            chartConfigEditorDefinition,
+        };
+    }
+
     /**
      * Function to emit Chart to TS Events to the TS application.
 
@@ -495,7 +695,7 @@ export class CustomChartContext {
         const messageResponse = this.executeEventListenerCBs(data);
 
         // respond back to parent to confirm/ack the receipt
-        return messageResponse;
+        return messageResponse || {};
     };
 
     /**
@@ -530,13 +730,29 @@ export class CustomChartContext {
          */
         this.onInternal(
             TSToChartEvent.VisualPropsValidate,
-            (payload: VisualPropsValidateEventPayload): ValidationResponse => {
+            (
+                payload: VisualPropsValidateEventPayload,
+            ):
+                | (ValidationResponse & SuccessValidationResponse)
+                | ValidationResponse => {
                 if (this.chartContextProps.validateVisualProps) {
                     const validationResponse =
                         this.chartContextProps.validateVisualProps(
                             payload.visualProps,
                             this.chartModel,
+                            payload?.activeColumnId,
+                        );
+                    if (validationResponse.isValid) {
+                        const currentVisualState = {
+                            visualProps: payload.visualProps,
+                        };
+                        const activeColumnId = payload?.activeColumnId;
+                        return this.validationsResponseProcessor(
+                            currentVisualState,
+                            validationResponse,
+                            activeColumnId,
                         );
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -551,13 +767,29 @@ export class CustomChartContext {
          */
         this.onInternal(
             TSToChartEvent.ChartConfigValidate,
-            (payload: ChartConfigValidateEventPayload): ValidationResponse => {
+            (
+                payload: ChartConfigValidateEventPayload,
+            ):
+                | (ValidationResponse & SuccessValidationResponse)
+                | ValidationResponse => {
                 if (this.chartContextProps.validateConfig) {
                     const validationResponse =
                         this.chartContextProps.validateConfig(
                             payload.chartConfig,
                             this.chartModel,
                         );
+                    if (validationResponse.isValid) {
+                        const currentConfigState = {
+                            config: {
+                                ...this.chartModel.config,
+                                chartConfig: payload.chartConfig,
+                            },
+                        };
+                        return this.validationsResponseProcessor(
+                            currentConfigState,
+                            validationResponse,
+                        );
+                    }
                     return validationResponse;
                 }
                 // this will never be true
@@ -789,11 +1021,13 @@ export class CustomChartContext {
                 isConfigValid: isValid,
                 defaultChartConfig,
                 chartConfigEditorDefinition:
-                    this.chartContextProps.chartConfigEditorDefinition,
+                    this.getChartConfigEditorDefinition(),
                 visualPropEditorDefinition:
-                    this.chartContextProps.visualPropEditorDefinition,
+                    this.getVisualPropEditorDefinition(),
                 allowedConfigurations:
                     this.chartContextProps.allowedConfigurations,
+                chartConfigParameters:
+                    this.chartContextProps.chartConfigParameters,
             };
         };
 

package/src/main/post-message-event-bridge.ts

@@ -53,7 +53,7 @@ const postMessageToHostApp = async (
         TIMEOUT_THRESHOLD,
         'ChartContext: postMessage operation timed out.',
     );
-    if (resp.hasError) {
+    if (resp?.hasError) {
         throw new Error(resp.error);
     }
     return resp;

package/src/main/util.spec.ts

@@ -0,0 +1,41 @@
+import { timeout } from './util';
+
+describe('timeout function', () => {
+    jest.useFakeTimers();
+
+    it('should resolve with the original promise result if it completes before timeout', async () => {
+        const promise = Promise.resolve('success');
+        const result = timeout(promise, 1000);
+
+        await expect(result).resolves.toBe('success');
+    });
+
+    it('should reject with a timeout error if the promise takes too long', async () => {
+        const promise = new Promise((resolve) => {
+            setTimeout(resolve, 2000);
+        });
+        const result = timeout(promise, 1000);
+
+        jest.advanceTimersByTime(1000);
+
+        await expect(result).rejects.toThrow('Operation timed out.');
+    });
+
+    it('should use the custom error message when provided', async () => {
+        const promise = new Promise((resolve) => {
+            setTimeout(resolve, 2000);
+        });
+        const result = timeout(promise, 1000, 'Custom timeout message');
+
+        jest.advanceTimersByTime(1000);
+
+        await expect(result).rejects.toThrow('Custom timeout message');
+    });
+
+    it('should reject with the original promise error if it rejects before timeout', async () => {
+        const promise = Promise.reject(new Error('Original error'));
+        const result = timeout(promise, 1000);
+
+        await expect(result).rejects.toThrow('Original error');
+    });
+});

package/src/react/use-custom-chart-context.spec.tsx

@@ -3,6 +3,7 @@ import { renderHook } from '@testing-library/react-hooks';
 import React from 'react';
 import * as PostMessageEventBridge from '../main/post-message-event-bridge';
 import { mockInitializeContextPayload } from '../test/test-utils';
+import { ColumnType } from '../types/answer-column.types';
 import { ChartToTSEvent } from '../types/chart-to-ts-event.types';
 import { TSToChartEvent } from '../types/ts-to-chart-event.types';
 import { contextChartProps } from './mocks/custom-chart-context-mock';
@@ -12,7 +13,10 @@ describe('useChartContext initialization', () => {
     let eventProcessor: any;
     let mockInitMessage;
     let mockPostMessageToHost;
-    const mockedChartModel = { columns: [], config: {} };
+    const mockedChartModel = {
+        columns: [{ type: ColumnType.MEASURE }, { type: ColumnType.ATTRIBUTE }],
+        config: {},
+    };
     beforeEach(() => {
         mockInitMessage = jest.spyOn(
             PostMessageEventBridge,
@@ -67,6 +71,66 @@ describe('useChartContext initialization', () => {
         });
     });
 
+    test('should trigger getDataQuery and fetch correct query response', async () => {
+        // Render the hook with the custom chart context props
+        const { result, waitFor } = renderHook(() =>
+            useChartContext(contextChartProps),
+        );
+
+        // Assert that the context is not initialized initially
+        expect(result.current.hasInitialized).toBe(false);
+        expect(result.current.chartModel).toBeUndefined();
+        await eventProcessor({
+            payload: {
+                componentId: 'COMPONENT_ID',
+                hostUrl: 'https://some.chart.app',
+                chartModel: mockedChartModel,
+            },
+            eventType: TSToChartEvent.Initialize,
+        });
+        const response = await eventProcessor({
+            payload: {
+                config: [
+                    {
+                        key: 'column',
+                        dimensions: [
+                            {
+                                key: 'x',
+                                columns: [mockedChartModel.columns[0]],
+                            },
+                            {
+                                key: 'y',
+                                columns: [mockedChartModel.columns[1]],
+                            },
+                        ],
+                    },
+                ],
+            },
+            eventType: TSToChartEvent.GetDataQuery,
+            source: 'ts-host-app',
+        });
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.TriggerRenderChart,
+            source: 'ts-host-app',
+        });
+        await eventProcessor({
+            payload: {},
+            eventType: TSToChartEvent.InitializeComplete,
+            source: 'ts-host-app',
+        });
+
+        await waitFor(() => {
+            expect(response.queries[0].queryColumns[0]).toBe(
+                mockedChartModel.columns[0],
+            );
+            expect(response.queries[0].queryColumns[1]).toBe(
+                mockedChartModel.columns[1],
+            );
+            expect(result.current.hasInitialized).toBeTruthy();
+        });
+    });
+
     test('should make sure hasInitialized to remain false when context initialization failed', async () => {
         jest.mock('../main/custom-chart-context', () => ({
             CustomChartContext: jest.fn().mockImplementation(() => ({
@@ -76,7 +140,6 @@ describe('useChartContext initialization', () => {
                 emitEvent: jest.fn(),
                 on: jest.fn(),
                 getChartModel: jest.fn(),
-                renderChart: jest.fn(),
                 destroy: jest.fn(),
             })),
         }));
@@ -173,7 +236,6 @@ describe('useChartContext emit', () => {
         });
         const promise = result.current.emitRenderStart();
         await expect(promise).rejects.toThrow('Context not initialized');
-        expect(mockPostMessageToHost).not.toHaveBeenCalled();
     });
 });
 

package/src/test/test-conditional-formatting-utils.ts

@@ -0,0 +1,95 @@
+/**
+ * @file: Test Conditional Formatting Utils
+ *
+ * @author Yashvardhan Nehra <yashvardhan.nehra@thoughtspot.com>
+ *
+ * Copyright: ThoughtSpot Inc. 2023
+ */
+import {
+    BackgroundFormatTypes,
+    ConditionalFormattingComparisonTypes,
+    ConditionalMetric,
+    Operators,
+} from '../types/conditional-formatting.types';
+
+/**
+ * Creates a metric operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the metric (e.g., LessThan, GreaterThan).
+ * @param lhsColumnId - (Optional) The ID of the left-hand side column.
+ * @param rhsColumnId - (Optional) The ID of the right-hand side column.
+ * @param comparisonParameterId - (Optional) The ID of the comparison parameter.
+ * @param comparisonType - The type of comparison to use (default is ValueBased).
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createMetricOperator = (
+    operator: Operators,
+    lhsColumnId?: string,
+    rhsColumnId?: string,
+    comparisonParameterId?: string,
+    comparisonType = ConditionalFormattingComparisonTypes.ValueBased,
+): ConditionalMetric => {
+    return {
+        solidBackgroundAttrs: {
+            color: '#000',
+        },
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        operator,
+        value: '200',
+        plotAsBand: false,
+        comparisonParameterId,
+        comparisonType,
+        lhsColumnId,
+        rhsColumnId,
+    };
+};
+
+/**
+ * Creates a between metric operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the metric (e.g., IsBetween).
+ * @param min - The minimum value for the range (default is 100).
+ * @param max - The maximum value for the range (default is 200).
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createBetweenMetricOperator = (
+    operator: Operators,
+    min = 100,
+    max = 200,
+): ConditionalMetric => {
+    return {
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        solidBackgroundAttrs: {
+            color: '#000',
+        },
+        operator,
+        rangeValues: {
+            min,
+            max,
+        },
+        plotAsBand: false,
+        lhsColumnId: undefined,
+        rhsColumnId: undefined,
+        comparisonParameterId: undefined,
+        comparisonType: ConditionalFormattingComparisonTypes.ValueBased,
+    };
+};
+
+/**
+ * Creates an attribute operator for conditional formatting.
+ *
+ * @param operator - The operator to use for the attribute (e.g., Is, IsNot).
+ * @param comparisonType - (Optional) The type of comparison to use.
+ * @returns A ConditionalMetric object configured with the specified parameters.
+ */
+export const createAttributeOperator = (
+    operator: Operators,
+    comparisonType?: ConditionalFormattingComparisonTypes,
+): ConditionalMetric => {
+    return {
+        backgroundFormatType: 'SOLID' as BackgroundFormatTypes,
+        operator,
+        value: 'check attribute',
+        comparisonType,
+    };
+};