Add support for multi row select and context menu in Timegraph Component

changes made:
- Support for adding context menu via signals
- Support for making multiple selections in data tree of timegraph component
- Added Signals to notify context menu selection and multi row selections

This change will allow for a context menu to be added to the timegraph
component based on the outputDescriptor id via a signal. The component
also adds the ability to select multiple rows. The multi selections can
be passed with the item clicked signal payload as well as through a rowSelectionsChanged
signal. The end goal is to provide the timegraph views with the ability
to make multi-row selections and perform some actions with the selections.

Signed-off-by: Neel Gondalia [email protected]

packages/base/src/signals/context-menu-contributed-signal-payload.tsx

@@ -0,0 +1,41 @@
+/***************************************************************************************
+ * Copyright (c) 2023 BlackBerry Limited and contributors.
+ *
+ * Licensed under the MIT license. See LICENSE file in the project root for details.
+ ***************************************************************************************/
+import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
+
+export interface MenuItem {
+    id: string;
+    label: string;
+}
+
+export interface SubMenu {
+    label: string;
+    items: MenuItem[];
+    submenu: SubMenu | undefined;
+}
+
+export interface ContextMenu {
+    menuId: string,
+    submenus: SubMenu[];
+    items: MenuItem[];
+}
+
+export class ContextMenuContributedSignalPayload {
+    private outputDescriptor: OutputDescriptor;
+    private menu: ContextMenu;
+
+    constructor(outputDescriptor: OutputDescriptor, menuItems: ContextMenu) {
+        this.outputDescriptor = outputDescriptor;
+        this.menu = menuItems;
+    }
+
+    public getOutputDescriptor(): OutputDescriptor {
+        return this.outputDescriptor;
+    }
+
+    public getMenu(): ContextMenu {
+        return this.menu;
+    }
+}

packages/base/src/signals/context-menu-item-clicked-signal-payload.tsx

@@ -0,0 +1,29 @@
+/***************************************************************************************
+ * Copyright (c) 2023 BlackBerry Limited and contributors.
+ *
+ * Licensed under the MIT license. See LICENSE file in the project root for details.
+ ***************************************************************************************/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export class ContextMenuItemClickedSignalPayload {
+    private itemId: string;
+    private menuId: string;
+    private props: { [key: string]: any };
+
+    constructor(itemId: string, menuId: string, props: { [key: string]: any }) {
+        this.itemId = itemId;
+        this.menuId = menuId;
+        this.props = props;
+    }
+
+    public getMenuId(): string {
+        return this.menuId;
+    }
+
+    public getItemId(): string {
+        return this.itemId;
+    }
+
+    public getProps(): { [key: string]: any } {
+        return this.props;
+    }
+}

packages/base/src/signals/signal-manager.ts

@@ -5,6 +5,8 @@ import { Trace } from 'tsp-typescript-client/lib/models/trace';
 import { OpenedTracesUpdatedSignalPayload } from './opened-traces-updated-signal-payload';
 import { OutputAddedSignalPayload } from './output-added-signal-payload';
 import { TimeRangeUpdatePayload } from './time-range-data-signal-payloads';
+import { ContextMenuContributedSignalPayload } from './context-menu-contributed-signal-payload';
+import { ContextMenuItemClickedSignalPayload } from './context-menu-item-clicked-signal-payload';
 
 export declare interface SignalManager {
     fireTraceOpenedSignal(trace: Trace): void;
@@ -20,6 +22,7 @@ export declare interface SignalManager {
     fireThemeChangedSignal(theme: string): void;
     // TODO - Refactor or remove this signal.  Similar signal to fireRequestSelectionRangeChange
     fireSelectionChangedSignal(payload: { [key: string]: string }): void;
+    fireRowSelectionsChanged(payload: { traceId: string; outputDescriptor: OutputDescriptor; rowIds: number[] }): void;
     fireCloseTraceViewerTabSignal(traceUUID: string): void;
     fireTraceViewerTabActivatedSignal(experiment: Experiment): void;
     fireUpdateZoomSignal(hasZoomedIn: boolean): void;
@@ -41,6 +44,8 @@ export declare interface SignalManager {
     fireSelectionRangeUpdated(payload: TimeRangeUpdatePayload): void;
     fireViewRangeUpdated(payload: TimeRangeUpdatePayload): void;
     fireRequestSelectionRangeChange(payload: TimeRangeUpdatePayload): void;
+    fireContributeContextMenu(payload: ContextMenuContributedSignalPayload): void;
+    fireContextMenuItemClicked(payload: ContextMenuItemClickedSignalPayload): void;
 }
 
 export const Signals = {
@@ -57,6 +62,7 @@ export const Signals = {
     ITEM_PROPERTIES_UPDATED: 'item properties updated',
     THEME_CHANGED: 'theme changed',
     SELECTION_CHANGED: 'selection changed',
+    ROW_SELECTIONS_CHANGED: 'rows selected changed',
     CLOSE_TRACEVIEWERTAB: 'tab closed',
     TRACEVIEWERTAB_ACTIVATED: 'widget activated',
     UPDATE_ZOOM: 'update zoom',
@@ -75,7 +81,9 @@ export const Signals = {
     VIEW_RANGE_UPDATED: 'view range updated',
     SELECTION_RANGE_UPDATED: 'selection range updated',
     REQUEST_SELECTION_RANGE_CHANGE: 'change selection range',
-    OUTPUT_DATA_CHANGED: 'output data changed'
+    OUTPUT_DATA_CHANGED: 'output data changed',
+    CONTRIBUTE_CONTEXT_MENU: 'contribute context menu',
+    CONTEXT_MENU_ITEM_CLICKED: 'context menu item clicked',
 };
 
 export class SignalManager extends EventEmitter implements SignalManager {
@@ -97,6 +105,9 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireExperimentSelectedSignal(experiment: Experiment | undefined): void {
         this.emit(Signals.EXPERIMENT_SELECTED, experiment);
     }
+    fireRowSelectionsChanged(payload: { traceId: string; outputDescriptor: OutputDescriptor; rowIds: number[] }): void {
+        this.emit(Signals.ROW_SELECTIONS_CHANGED, payload);
+    }
     fireExperimentUpdatedSignal(experiment: Experiment): void {
         this.emit(Signals.EXPERIMENT_UPDATED, experiment);
     }
@@ -174,6 +185,12 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireRequestSelectionRangeChange(payload: TimeRangeUpdatePayload): void {
         this.emit(Signals.REQUEST_SELECTION_RANGE_CHANGE, payload);
     }
+    fireContributeContextMenu(payload: ContextMenuContributedSignalPayload): void {
+        this.emit(Signals.CONTRIBUTE_CONTEXT_MENU, payload);
+    }
+    fireContextMenuItemClicked(payload: ContextMenuItemClickedSignalPayload): void {
+        this.emit(Signals.CONTEXT_MENU_ITEM_CLICKED, payload);
+    }
 }
 
 let instance: SignalManager = new SignalManager();