@thoughtspot/ts-chart-sdk 0.0.1-alpha.8 → 0.0.1-alpha.9

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

@@ -5,13 +5,20 @@
  *
  * Copyright: ThoughtSpot Inc. 2023
  */
+
 import _ from 'lodash';
 import {
+    AxisMenuActionHandler,
     ChartToTSEvent,
     ChartToTSEventsPayloadMap,
+    ContextMenuActionHandler,
+    CustomAction,
     ErrorType,
+    OpenAxisMenuEventPayload,
+    OpenContextMenuEventPayload,
 } from '../types/chart-to-ts-event.types';
 import {
+    AppConfig,
     ChartConfig,
     ChartModel,
     ValidationResponse,
@@ -19,8 +26,10 @@ import {
 } from '../types/common.types';
 import { ChartConfigEditorDefinition } from '../types/configurator.types';
 import {
+    AxisMenuCustomActionPayload,
     ChartConfigValidateEventPayload,
     ChartModelUpdateEventPayload,
+    ContextMenuCustomActionPayload,
     DataUpdateEventPayload,
     GetDataQueryPayload,
     GetDataQueryResponsePayload,
@@ -149,6 +158,13 @@ export class CustomChartContext {
      */
     private chartModel: ChartModel = {} as any;
 
+    /**
+     * App Config object. This contains the app state like locale and timezones.
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private appConfig: AppConfig = {};
+
     /**
      * Chart Props Object to define the workflow of the application
      *
@@ -185,6 +201,22 @@ export class CustomChartContext {
      */
     private triggerInitResolve: () => void = _.noop;
 
+    /**
+     * Stores the callbacks of context menu custom action based on custom action id
+     *
+     * @returns {@link ContextMenuActionHandler}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private contextMenuActionHandler: ContextMenuActionHandler = {};
+
+    /**
+     * Stores the callbacks of axis menu custom action based on custom action id
+     *
+     * @returns {@link AxisMenuActionHandler}
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    private axisMenuActionHandler: AxisMenuActionHandler = {};
+
     /**
      * Constructor to only accept context props as payload
      *
@@ -284,6 +316,107 @@ export class CustomChartContext {
      */
     public getChartModel = (): ChartModel => this.chartModel;
 
+    /**
+     * Getter for the chart model object
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    public getAppConfig = (): AppConfig => this.appConfig;
+
+    /**
+     * Function to store the context menu custom action callback mapped with action id
+     * @param  {[OpenContextMenuEventPayload]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    public contextMenuCustomActionPreProcessor(
+        eventPayload: [OpenContextMenuEventPayload],
+    ): [OpenContextMenuEventPayload] {
+        // clear out the stored custom events callback for context menu
+        this.contextMenuActionHandler = {};
+        if (_.isEmpty(eventPayload?.[0]?.customActions)) {
+            return eventPayload;
+        }
+        eventPayload?.[0]?.customActions?.forEach((action: CustomAction) => {
+            this.contextMenuActionHandler[action.id] = action.onClick;
+        });
+        const processedCustomActions = eventPayload[0]?.customActions?.map(
+            (action: CustomAction) => {
+                return {
+                    id: action.id,
+                    label: action.label,
+                    icon: action.icon,
+                };
+            },
+        );
+        const processedPayload: [OpenContextMenuEventPayload] = [
+            {
+                ...eventPayload[0],
+                customActions: processedCustomActions as CustomAction[],
+            },
+        ];
+        return processedPayload;
+    }
+
+    /**
+     * Function to store the axis menu custom action callback mapped with action id
+     * @param  {[OpenAxisMenuEventPayload]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    public axisMenuCustomActionPreProcessor(
+        eventPayload: [OpenAxisMenuEventPayload],
+    ): [OpenAxisMenuEventPayload] {
+        // clear out the stored custom events callback for axis menu
+        this.axisMenuActionHandler = {};
+        if (_.isEmpty(eventPayload?.[0]?.customActions)) {
+            return eventPayload;
+        }
+        eventPayload[0].customActions?.forEach((action: CustomAction) => {
+            this.axisMenuActionHandler[action.id] = action.onClick;
+        });
+        const processedCustomActions = eventPayload?.[0].customActions?.map(
+            (action: CustomAction) => {
+                return {
+                    id: action.id,
+                    label: action.label,
+                    icon: action.icon,
+                };
+            },
+        );
+        const processedPayload: [OpenAxisMenuEventPayload] = [
+            {
+                ...eventPayload[0],
+                customActions: processedCustomActions as CustomAction[],
+            },
+        ];
+        return processedPayload;
+    }
+
+    /**
+     * Function to process the event payload based on event type
+     * @param  {ChartToTSEventsPayloadMap[T]} eventPayload Event payload bound
+     *          to the type of the event
+     * @returns payload
+     */
+    private eventPayloadPreProcessor<T extends keyof ChartToTSEventsPayloadMap>(
+        eventType: T,
+        eventPayload: ChartToTSEventsPayloadMap[T],
+    ): ChartToTSEventsPayloadMap[T] {
+        switch (eventType) {
+            case ChartToTSEvent.OpenContextMenu:
+                return this.contextMenuCustomActionPreProcessor(
+                    eventPayload as [OpenContextMenuEventPayload],
+                ) as ChartToTSEventsPayloadMap[T];
+            case ChartToTSEvent.OpenAxisMenu:
+                return this.axisMenuCustomActionPreProcessor(
+                    eventPayload as [OpenAxisMenuEventPayload],
+                ) as ChartToTSEventsPayloadMap[T];
+            default:
+                return eventPayload;
+        }
+    }
+
     /**
      * Function to emit Chart to TS Events to the TS application.
 
@@ -302,10 +435,14 @@ export class CustomChartContext {
             );
             return Promise.reject(new Error('Context not initialized'));
         }
+        const processedPayload = this.eventPayloadPreProcessor(
+            eventType,
+            eventPayload,
+        );
         return PostMessageEventBridge.postMessageToHostApp(
             this.componentId,
             this.hostUrl,
-            eventPayload?.[0] ?? null,
+            processedPayload?.[0] ?? null,
             eventType,
         );
     }
@@ -447,6 +584,94 @@ export class CustomChartContext {
             this.chartContextProps.renderChart(this);
         });
 
+        /**
+         * This event is triggered when the custom context action is triggered from TS app
+         */
+        this.onInternal(
+            TSToChartEvent.ContextMenuActionClick,
+            (
+                payload: ContextMenuCustomActionPayload,
+            ): {
+                isValid: boolean;
+                error?: unknown;
+            } => {
+                try {
+                    const {
+                        id: customActionCallback,
+                        clickedPoint,
+                        selectedPoints,
+                        event,
+                    } = payload.customAction;
+                    const customActionCallbackArgs = {
+                        id: customActionCallback,
+                        clickedPoint,
+                        selectedPoints,
+                        event,
+                    };
+                    this.contextMenuActionHandler[customActionCallback](
+                        customActionCallbackArgs,
+                    );
+                    return {
+                        isValid: true,
+                    };
+                } catch (error: unknown) {
+                    console.log(
+                        'ContextMenuCustomAction: payload recieved:',
+                        payload,
+                        'CustomActionCallbackStore:',
+                        this.axisMenuActionHandler,
+                    );
+                    return {
+                        isValid: false,
+                        error,
+                    };
+                }
+            },
+        );
+
+        /**
+         * This event is triggered when the custom axis action is triggered from TS app
+         */
+        this.onInternal(
+            TSToChartEvent.AxisMenuActionClick,
+            (
+                payload: AxisMenuCustomActionPayload,
+            ): {
+                isValid: boolean;
+                error?: unknown;
+            } => {
+                try {
+                    const {
+                        id: customActionCallback,
+                        columnIds,
+                        event,
+                    } = payload.customAction;
+                    const customActionCallbackArgs = {
+                        id: customActionCallback,
+                        columnIds,
+                        event,
+                    };
+                    this.axisMenuActionHandler[customActionCallback](
+                        customActionCallbackArgs,
+                    );
+                    return {
+                        isValid: true,
+                    };
+                } catch (error: unknown) {
+                    console.log(
+                        'AxisMenuCustomAction: payload recieved:',
+                        payload,
+                        'CustomActionCallbackStore:',
+                        this.axisMenuActionHandler,
+                    );
+                    return {
+                        isValid: false,
+                        error,
+                    };
+                }
+            },
+        );
+
         // Register External Events
         // These events are readable by the developer
 
@@ -517,6 +742,7 @@ export class CustomChartContext {
         this.componentId = payload.componentId;
         this.hostUrl = payload.hostUrl;
         this.chartModel = payload.chartModel;
+        this.appConfig = payload.appConfig ?? {};
 
         return this.publishChartContextPropsToHost();
     };

package/src/types/chart-to-ts-event.types.ts

@@ -1,5 +1,9 @@
 import { VisualProps } from './common.types';
-import { Query } from './ts-to-chart-event.types';
+import {
+    CustomAxisMenuAction,
+    CustomContextMenuAction,
+    Query,
+} from './ts-to-chart-event.types';
 
 /**
  *
@@ -339,3 +343,19 @@ export interface OpenAxisMenuEventPayload {
      * */
     customActions?: AxisMenuCustomAction[];
 }
+
+/**
+ *
+ * @group Custom action callback mapping with action id/ Context Menu
+ */
+export interface ContextMenuActionHandler {
+    [key: string]: (args: CustomContextMenuAction) => void;
+}
+
+/**
+ *
+ * @group Custom action callback mapping with action id/ Axis Menu
+ */
+export interface AxisMenuActionHandler {
+    [key: string]: (args: CustomAxisMenuAction) => void;
+}

package/src/types/common.types.ts

@@ -160,6 +160,9 @@ export type VisualProps = JSON;
 type CustomStylingConfig = any;
 
 export interface AppConfig {
+    /**
+     * @hidden
+     */
     styleConfig?: CustomStylingConfig;
 
     appOptions?: {
@@ -177,8 +180,19 @@ export interface AppConfig {
         sessionTimezone: string;
     };
 
+    /**
+     * App url for the custom chart application where the chart app is hosted.
+     * This helps the chart developer to access app artifacts relative to this url.
+     * There can be different build systems that developers may have used and different ways
+     * to host the same. This helps in resolving the same.
+     */
+    appUrl?: string;
+
     // Idea: we might be able to map this to data and ask user to read data in a
     // certain way the transformations for point during context menu operations
     // need to be explored
+    /**
+     * @hidden
+     */
     customCalendarConfig?: any; // this is to initialize custom calendar service
 }

package/src/types/ts-to-chart-event.types.ts

@@ -1,4 +1,5 @@
 import { ChartColumn } from './answer-column.types';
+import { Point } from './chart-to-ts-event.types';
 import {
     AppConfig,
     ChartConfig,
@@ -57,6 +58,16 @@ export enum TSToChartEvent {
      * @version SDK: 0.1 | ThoughtSpot:
      */
     VisualPropsUpdate = 'VisualPropsUpdate',
+    /**
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+
+    ContextMenuActionClick = 'ContextMenuActionClick',
+
+    /**
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    AxisMenuActionClick = 'AxisMenuActionClick',
 }
 
 /**
@@ -104,6 +115,14 @@ export interface TSToChartInternalEventsPayloadMap {
     ) => ValidationResponse;
 
     [TSToChartEvent.TriggerRenderChart]: () => void;
+
+    [TSToChartEvent.ContextMenuActionClick]: (
+        payload: ContextMenuCustomActionPayload,
+    ) => void;
+
+    [TSToChartEvent.AxisMenuActionClick]: (
+        payload: AxisMenuCustomActionPayload,
+    ) => void;
 }
 
 /**
@@ -261,3 +280,54 @@ export interface ChartConfigValidateEventPayload {
      */
     chartConfig: ChartConfig[];
 }
+
+/**
+ * Custom action dispatched by context menu of the chart
+ *
+ * @group ThoughtSpot to Chart Events
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export interface CustomContextMenuAction {
+    id: string;
+    clickedPoint: Point;
+    selectedPoints?: Point[];
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>;
+}
+
+/**
+ *
+ * @group ThoughtSpot to Chart Events
+ */
+export interface ContextMenuCustomActionPayload {
+    /**
+     * Dispatched custom action from context menu
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    customAction: CustomContextMenuAction;
+}
+
+/**
+ * Custom action dispatched by axis menu of the chart
+ *
+ * @group ThoughtSpot to Chart Events
+ * @version SDK: 0.1 | ThoughtSpot:
+ */
+export interface CustomAxisMenuAction {
+    id: string;
+    columnIds: string[];
+    event: Pick<PointerEvent, 'clientX' | 'clientY'>;
+}
+
+/**
+ *
+ * @group ThoughtSpot to Chart Events
+ */
+export interface AxisMenuCustomActionPayload {
+    /**
+     * Dispatched custom action from context menu
+     *
+     * @version SDK: 0.1 | ThoughtSpot:
+     */
+    customAction: CustomAxisMenuAction;
+}