WIP: Add Critical path configuration menu and critical path view

Note that code is hard-coded. A generic way is needed to configure
the menu and command-handler driven by the server.

Alternatively, this feature could be added in a third-party, trace
compass specific front-end extension(s) (i.e. Theia extension/Vscode
extension).

Signed-off-by: Bernd Hufmann <[email protected]>

Author: bhufmann

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

@@ -47,6 +47,7 @@ export declare interface SignalManager {
     fireRequestSelectionRangeChange(payload: TimeRangeUpdatePayload): void;
     fireContributeContextMenu(payload: ContextMenuContributedSignalPayload): void;
     fireContextMenuItemClicked(payload: ContextMenuItemClickedSignalPayload): void;
+    fireTraceContexModelUpdated(payload: { [key: string]: unknown }): void;
 }
 
 export const Signals = {
@@ -84,7 +85,8 @@ export const Signals = {
     REQUEST_SELECTION_RANGE_CHANGE: 'change selection range',
     OUTPUT_DATA_CHANGED: 'output data changed',
     CONTRIBUTE_CONTEXT_MENU: 'contribute context menu',
-    CONTEXT_MENU_ITEM_CLICKED: 'context menu item clicked'
+    CONTEXT_MENU_ITEM_CLICKED: 'context menu item clicked',
+    TRACE_MODEL_UPDATED: 'trace model updated'
 };
 
 export class SignalManager extends EventEmitter implements SignalManager {
@@ -193,6 +195,9 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireContextMenuItemClicked(payload: ContextMenuItemClickedSignalPayload): void {
         this.emit(Signals.CONTEXT_MENU_ITEM_CLICKED, payload);
     }
+    fireTraceContexModelUpdated(payload: { [key: string]: unknown }): void {
+        this.emit(Signals.TRACE_MODEL_UPDATED, payload);
+    }
 }
 
 let instance: SignalManager = new SignalManager();

packages/react-components/src/components/timegraph-output-component.tsx

@@ -104,6 +104,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         this.chartLayer.updateChart();
     }, 500);
 
+    private additonalParameters: { [key: string]: unknown } | undefined;
+
     constructor(props: TimegraphOutputProps) {
         super(props);
         this.state = {
@@ -260,6 +262,12 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         });
         this.waitAnalysisCompletion();
         this.subscribeToEvents();
+
+        /* Server-side context menus */
+        if (this.props.outputDescriptor) {
+            console.log('this.props.outputDescriptor');
+            this.registerServerSideMenus();
+        }
     }
 
     componentWillUnmount(): void {
@@ -273,13 +281,17 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         signalManager().on(Signals.OUTPUT_DATA_CHANGED, this.onOutputDataChanged);
         signalManager().on(Signals.THEME_CHANGED, this.onThemeChange);
         signalManager().on(Signals.SELECTION_CHANGED, this.onSelectionChanged);
+        signalManager().on(Signals.CONTEXT_MENU_ITEM_CLICKED, this._onContextMenuItemClicked);
+        signalManager().on(Signals.TRACE_MODEL_UPDATED, this.onModelUpdated);
     }
 
     protected unsubscribeToEvents(): void {
         signalManager().off(Signals.CONTRIBUTE_CONTEXT_MENU, this.onContextMenuContributed);
         signalManager().off(Signals.OUTPUT_DATA_CHANGED, this.onOutputDataChanged);
         signalManager().off(Signals.THEME_CHANGED, this.onThemeChange);
         signalManager().off(Signals.SELECTION_CHANGED, this.onSelectionChanged);
+        signalManager().off(Signals.CONTEXT_MENU_ITEM_CLICKED, this._onContextMenuItemClicked);
+        signalManager().off(Signals.TRACE_MODEL_UPDATED, this.onModelUpdated);
     }
 
     async fetchTree(): Promise<ResponseStatus> {
@@ -1482,4 +1494,44 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         );
         this.chartLayer.selectAndReveal(rowIndex);
     }
+
+    protected registerServerSideMenus(): void {
+        // TODO: create generic API to register server driven menus
+        const ctxMenu: ContextMenuItems = {
+            submenus: [],
+            items: [{ id: 'org.eclipse.tracecompass.follow.thread.id', label: 'Follow thread' }]
+        };
+        const pld: ContextMenuContributedSignalPayload = new ContextMenuContributedSignalPayload(
+            this.props.outputDescriptor.id,
+            ctxMenu
+        );
+        signalManager().fireContributeContextMenu(pld);
+    }
+
+    private _onContextMenuItemClicked = async (payload: ContextMenuItemClickedSignalPayload): Promise<void> => {
+        // handle item clicked payload and perform whatever function you need to based on the selection
+        // TODO: create generic API to execute command-handler for server driven actions
+        // For example, a pre-defined way to query additional query parameters that are passed to back-end calls (global filter)
+
+        if (payload?.getItemId() === 'org.eclipse.tracecompass.follow.thread.id') {
+            const items: { id: number; parentId?: number; metadata?: { [key: string]: unknown } }[] =
+                payload.getProps()['selectedRows'];
+            const item = items[0].id;
+            const parameters = QueryHelper.selectionQuery([item]);
+            const tspClientResponse = await this.props.tspClient.fetchTimeGraphTreeContext(
+                this.props.traceId,
+                this.props.outputDescriptor.id,
+                parameters
+            );
+            const model: { [key: string]: unknown } | undefined = tspClientResponse.getModel()?.model;
+            if (model) {
+                signalManager().fireTraceContexModelUpdated(model);
+            }
+        }
+    };
+
+    onModelUpdated = (model: { [key: string]: unknown }): void => {
+        // TODO add model as addtional parameters to back-end queries
+        this.additonalParameters = model;
+    };
 }

theia-extensions/viewer-prototype/src/browser/theia-rpc-tsp-proxy.ts

@@ -219,6 +219,23 @@ export class TheiaRpcTspProxy implements ITspClient {
         );
     }
 
+    /**
+     * Fetch Time Graph tree, Model is a key-value map
+     * @param expUUID Experiment UUID
+     * @param outputID Output ID
+     * @param parameters Query object
+     * @returns Time graph entry response with model is a key-value map
+     */
+    public async fetchTimeGraphTreeContext(
+        expUUID: string,
+        outputID: string,
+        parameters: Query
+    ): Promise<TspClientResponse<GenericResponse<{ [key: string]: unknown }>>> {
+        return this.toTspClientResponse<GenericResponse<{ [key: string]: unknown }>>(
+            await this.tspClient.fetchTimeGraphTreeContext(expUUID, outputID, parameters)
+        );
+    }
+
     /**
      * Fetch Time Graph states. Model extends TimeGraphModel
      * @param expUUID Experiment UUID