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) 2024 BlackBerry Limited and contributors.
+ *
+ * Licensed under the MIT license. See LICENSE file in the project root for details.
+ ***************************************************************************************/
+export interface MenuItem {
+    id: string;
+    label: string;
+    // Parent Menu that this item belongs to - undefined indicates root menu item
+    parentMenuId?: string;
+}
+
+export interface SubMenu {
+    id: string;
+    label: string;
+    items: MenuItem[];
+    submenu: SubMenu | undefined;
+}
+
+export interface ContextMenuItems {
+    submenus: SubMenu[];
+    items: MenuItem[];
+}
+
+export class ContextMenuContributedSignalPayload {
+    private outputDescriptorId: string;
+    private menuItems: ContextMenuItems;
+
+    constructor(descriptorId: string, menuItems: ContextMenuItems) {
+        this.outputDescriptorId = descriptorId;
+        this.menuItems = menuItems;
+    }
+
+    public getOutputDescriptorId(): string {
+        return this.outputDescriptorId;
+    }
+
+    public getMenuItems(): ContextMenuItems {
+        return this.menuItems;
+    }
+}

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

@@ -0,0 +1,35 @@
+/***************************************************************************************
+ * Copyright (c) 2024 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 outputDescriptorId: string;
+    private itemId: string;
+    private parentMenuId: string | undefined;
+    private props: { [key: string]: any };
+
+    constructor(descriptorId: string, itemId: string, props: { [key: string]: any }, parentMenuId?: string) {
+        this.outputDescriptorId = descriptorId;
+        this.itemId = itemId;
+        this.props = props;
+        this.parentMenuId = parentMenuId;
+    }
+
+    public getOutputDescriptorId(): string {
+        return this.outputDescriptorId;
+    }
+
+    public getItemId(): string {
+        return this.itemId;
+    }
+
+    public getProps(): { [key: string]: any } {
+        return this.props;
+    }
+
+    public getParentMenuId(): string | undefined {
+        return this.parentMenuId;
+    }
+}

packages/base/src/signals/row-selections-changed-signal-payload.tsx

@@ -0,0 +1,33 @@
+/***************************************************************************************
+ * Copyright (c) 2024 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 RowSelectionsChangedSignalPayload {
+    private traceId: string;
+    private outputDescriptorId: string;
+    private rows: { id: number; parentId?: number; metadata?: { [key: string]: any } }[];
+
+    constructor(
+        traceId: string,
+        descriptorId: string,
+        rows: { id: number; parentId?: number; metadata?: { [key: string]: any } }[]
+    ) {
+        this.outputDescriptorId = descriptorId;
+        this.traceId = traceId;
+        this.rows = rows;
+    }
+
+    public getOutputDescriptorId(): string {
+        return this.outputDescriptorId;
+    }
+
+    public getTraceId(): string {
+        return this.traceId;
+    }
+
+    public getRows(): { id: number; parentId?: number; metadata?: { [key: string]: any } }[] {
+        return this.rows;
+    }
+}

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

@@ -5,6 +5,9 @@ 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';
+import { RowSelectionsChangedSignalPayload } from './row-selections-changed-signal-payload';
 
 export declare interface SignalManager {
     fireTraceOpenedSignal(trace: Trace): void;
@@ -20,6 +23,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: RowSelectionsChangedSignalPayload): void;
     fireCloseTraceViewerTabSignal(traceUUID: string): void;
     fireTraceViewerTabActivatedSignal(experiment: Experiment): void;
     fireUpdateZoomSignal(hasZoomedIn: boolean): void;
@@ -41,6 +45,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 +63,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 +82,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 +106,10 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireExperimentSelectedSignal(experiment: Experiment | undefined): void {
         this.emit(Signals.EXPERIMENT_SELECTED, experiment);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fireRowSelectionsChanged(payload: RowSelectionsChangedSignalPayload): void {
+        this.emit(Signals.ROW_SELECTIONS_CHANGED, payload);
+    }
     fireExperimentUpdatedSignal(experiment: Experiment): void {
         this.emit(Signals.EXPERIMENT_UPDATED, experiment);
     }
@@ -174,6 +187,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();