Add support for marker filtering

Signed-off-by: Ankush Tyagi <ankush.tyagi@ericsson.com>

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

@@ -3,7 +3,6 @@ import { Experiment } from 'tsp-typescript-client/lib/models/experiment';
 import { Trace } from 'tsp-typescript-client/lib/models/trace';
 import { OpenedTracesUpdatedSignalPayload } from './opened-traces-updated-signal-payload';
 import { OutputAddedSignalPayload } from './output-added-signal-payload';
-
 export declare interface SignalManager {
     fireTraceOpenedSignal(trace: Trace): void;
     fireTraceClosedSignal(trace: Trace): void;
@@ -19,6 +18,8 @@ export declare interface SignalManager {
     fireTraceViewerTabActivatedSignal(experiment: Experiment): void;
     fireZoomTimeGraphSignal(hasZoomedIn: boolean): void;
     fireResetTimeGraphSignal(): void;
+    fireAnnotationFilterSignal(annotationMarkers?: string[]): void;
+    fireAnnotationsFetchedSignal(annotationCategories: string[]): void;
 }
 
 export const Signals = {
@@ -36,7 +37,9 @@ export const Signals = {
     CLOSE_TRACEVIEWERTAB: 'tab closed',
     TRACEVIEWERTAB_ACTIVATED: 'widget activated',
     TIMEGRAPH_ZOOMED: 'timegraph zoomed',
-    TIMEGRAPH_RESET: 'timegraph reset'
+    TIMEGRAPH_RESET: 'timegraph reset',
+    ANNOTATION_MARKERS_FILTERED: 'filter marker category',
+    ANNOTATIONS_FETCHED: 'annotations fetched'
 };
 
 export class SignalManager extends EventEmitter implements SignalManager {
@@ -62,7 +65,7 @@ export class SignalManager extends EventEmitter implements SignalManager {
         this.emit(Signals.OUTPUT_ADDED, payload);
     }
     fireTooltipSignal(tooltip?: { [key: string]: string; }): void {
-        this.emit(Signals.TOOLTIP_UPDATED, tooltip );
+        this.emit(Signals.TOOLTIP_UPDATED, tooltip);
     }
     fireThemeChangedSignal(theme: string): void {
         this.emit(Signals.THEME_CHANGED, theme);
@@ -82,6 +85,13 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireResetTimeGraphSignal(): void {
         this.emit(Signals.TIMEGRAPH_RESET);
     }
+    fireAnnotationFilterSignal(annotationMarkers?: string[]): void {
+        this.emit(Signals.ANNOTATION_MARKERS_FILTERED, annotationMarkers);
+    }
+    fireAnnotationsFetchedSignal(annotationCategories: []): void {
+        this.emit(Signals.ANNOTATIONS_FETCHED, annotationCategories);
+    }
+
 }
 
 let instance: SignalManager = new SignalManager();
@@ -91,3 +101,4 @@ export const setSignalManagerInstance = (sm: SignalManager): void => {
 };
 
 export const signalManager = (): SignalManager => instance;
+

packages/base/src/trace-manager.ts

@@ -4,7 +4,7 @@ import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
 import { Query } from 'tsp-typescript-client/lib/models/query/query';
 import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
 import { TspClientResponse } from 'tsp-typescript-client/lib/protocol/tsp-client-response';
-import { signalManager, Signals } from './signals/signal-manager';
+import { signalManager} from './signals/signal-manager';
 
 export class TraceManager {
 

packages/react-components/src/components/data-providers/tsp-data-provider.ts

@@ -32,8 +32,11 @@ export class TspDataProvider {
         this.totalRange = 0;
     }
 
-    async getData(ids: number[], entries: TimeGraphEntry[], totalTimeRange: TimeRange,
-        viewRange?: TimelineChart.TimeGraphRange, resolution?: number): Promise<TimelineChart.TimeGraphModel> {
+    async getData(ids: number[], entries: TimeGraphEntry[],
+        totalTimeRange: TimeRange,
+        viewRange?: TimelineChart.TimeGraphRange,
+        resolution?: number,
+        annotationMarkers?: string[]): Promise<TimelineChart.TimeGraphModel> {
         this.timeGraphEntries = [...entries];
         if (!this.timeGraphEntries.length) {
             return {
@@ -47,11 +50,13 @@ export class TspDataProvider {
         }
 
         this.totalRange = totalTimeRange.getEnd() - totalTimeRange.getstart();
-        let fetchParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(1332170682440133097, 1332170682540133097, 1120), ids);
+        let fetchParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(1332170682440133097, 1332170682540133097, 1120),
+            ids, annotationMarkers !== undefined ? { 'requested_marker_categories': annotationMarkers } : {});
         if (viewRange && resolution) {
             const start = totalTimeRange.getstart() + viewRange.start;
             const end = totalTimeRange.getstart() + viewRange.end;
-            fetchParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(Math.trunc(start), Math.trunc(end), resolution), ids);
+            fetchParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(Math.trunc(start), Math.trunc(end), resolution),
+                ids, annotationMarkers !== undefined ? { 'requested_marker_categories': annotationMarkers } : {});
         }
         const tspClientResponse = await this.client.fetchTimeGraphStates(this.traceUUID, this.outputId, fetchParameters);
         const stateResponse = tspClientResponse.getModel();
@@ -263,7 +268,7 @@ export class TspDataProvider {
             duration: element.model.range.end - element.model.range.start
         };
         const entryId = [element.row.model.id];
-        const parameters = QueryHelper.selectionTimeQuery([time], entryId, {[QueryHelper.REQUESTED_ELEMENT_KEY]: requestedElement});
+        const parameters = QueryHelper.selectionTimeQuery([time], entryId, { [QueryHelper.REQUESTED_ELEMENT_KEY]: requestedElement });
         const tooltipResponse = await this.client.fetchTimeGraphTooltip(
             this.traceUUID, this.outputId, parameters);
         return tooltipResponse.getModel()?.model;
@@ -280,7 +285,7 @@ export class TspDataProvider {
             entryId: element.row.model.id
         };
         const entryId = [element.row.model.id];
-        const parameters = QueryHelper.selectionTimeQuery([time], entryId, {[QueryHelper.REQUESTED_ELEMENT_KEY]: requestedElement});
+        const parameters = QueryHelper.selectionTimeQuery([time], entryId, { [QueryHelper.REQUESTED_ELEMENT_KEY]: requestedElement });
         const tooltipResponse = await this.client.fetchTimeGraphTooltip(
             this.traceUUID, this.outputId, parameters);
         return tooltipResponse.getModel()?.model;

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

@@ -54,9 +54,11 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
 
     private selectedElement: TimeGraphStateComponent | undefined;
 
-    private onSelectionChanged = (payload: { [key: string]: string; }) => this.doHandleSelectionChangedSignal(payload);
     private onTimeGraphZoomed = (hasZoomedIn: boolean) => this.doHandleTimeGraphZoomedSignal(hasZoomedIn);
     private onTimeGraphReset = () => this.doHandleTimeGraphResetSignal();
+    private annotationMarkers: string[] | undefined = undefined;
+    private onSelectionChanged = ( payload: { [key: string]: string; } ) => this.doHandleSelectionChangedSignal(payload);
+    private onMarkerFilterChanged = ( annotationMarkers: string[]) => this.doHandleMarkerFilterChangedSignal(annotationMarkers);
 
     constructor(props: TimegraphOutputProps) {
         super(props);
@@ -65,6 +67,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             timegraphTree: [],
             collapsedNodes: [],
             columns: []
+
         };
         this.onToggleCollapse = this.onToggleCollapse.bind(this);
         this.tspDataProvider = new TspDataProvider(this.props.tspClient, this.props.traceId, this.props.outputDescriptor.id);
@@ -115,6 +118,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         signalManager().on(Signals.SELECTION_CHANGED, this.onSelectionChanged);
         signalManager().on(Signals.TIMEGRAPH_ZOOMED, this.onTimeGraphZoomed);
         signalManager().on(Signals.TIMEGRAPH_RESET, this.onTimeGraphReset);
+        signalManager().on(Signals.ANNOTATION_MARKERS_FILTERED, this.onMarkerFilterChanged);
     }
 
     synchronizeTreeScroll(): void {
@@ -219,10 +223,14 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private doHandleTimeGraphZoomedSignal(hasZoomedIn: boolean) {
         this.chartLayer.adjustZoom(undefined, hasZoomedIn);
     }
-
     private doHandleTimeGraphResetSignal() {
         this.props.unitController.viewRange = { start: 0, end: this.props.unitController.absoluteRange };
     }
+    private doHandleMarkerFilterChangedSignal(annotationMarkers: string[]){
+        this.annotationMarkers = annotationMarkers;
+        this.chartLayer.updateChart();
+
+    }
 
     renderTree(): React.ReactNode {
         // TODO Show header, when we can have entries in-line with timeline-chart
@@ -377,7 +385,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         const newRange: TimelineChart.TimeGraphRange = { start, end };
         const newResolution: number = resolution * 0.8;
         const timeGraphData: TimelineChart.TimeGraphModel = await this.tspDataProvider.getData(orderedTreeIds, this.state.timegraphTree,
-            this.props.range, newRange, this.props.style.chartWidth);
+        this.props.range, newRange, this.props.style.chartWidth, this.annotationMarkers);
         this.arrowLayer.addArrows(timeGraphData.arrows);
         this.rangeEventsLayer.addRangeEvents(timeGraphData.rangeEvents);
 

packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx

@@ -124,6 +124,19 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
             signalManager().fireExperimentSelectedSignal(this._selectedExperiment);
             signalManager().fireOutputAddedSignal(new OutputAddedSignalPayload(outputs[index], this._selectedExperiment));
         }
+        this.fetchAnnotationCategories(outputs[index]);
+    }
+
+    private async fetchAnnotationCategories(output: OutputDescriptor) {
+        const tspClient = this.props.tspClientProvider.getTspClient();
+        if (this._selectedExperiment) {
+            const annotationCategories = await tspClient.fetchAnnotationsCategories(this._selectedExperiment?.UUID, output.id);
+            const annotationCategoriesResponse = annotationCategories.getModel();
+            if (annotationCategories.isOk() && annotationCategoriesResponse) {
+                const categoriesList = annotationCategoriesResponse.model.annotationCategories;
+                signalManager().fireAnnotationsFetchedSignal(categoriesList);
+            }
+        }
     }
 
     protected doHandleContextMenuEvent(event: React.MouseEvent<HTMLDivElement>, output: OutputDescriptor | undefined): void {
@@ -161,3 +174,4 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
         return outputDescriptors.filter(value => value.type !== 'DATA_TREE');
     }
 }
+

theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-commands.ts

@@ -1,4 +1,4 @@
-import { Command } from '@theia/core';
+import { Command, MenuPath } from '@theia/core';
 
 export namespace TraceViewerToolbarCommands {
 
@@ -20,3 +20,13 @@ export namespace TraceViewerToolbarCommands {
         iconClass: 'fa fa-home fa-lg',
     };
 }
+
+export const TRACE_VIEWER_TOOLBAR_COMMAND_FILTER: Command = {
+    id: 'trace.viewer.toolbar.filter',
+    label: 'Trace Viewer Toolbar Filter',
+    iconClass: 'fa fa-filter fa-lg',
+};
+
+export namespace TraceViewerToolbarFilterMenus {
+    export const TOOLBAR_FILTER_MARKERS_MENU: MenuPath = ['trace-viewer-filter-markers-menu'];
+}