Fetch Annotation Categories based on Marker Set

Signed-off-by: muddana-satish <satish.muddana@ericsson.com>
eclipse-cdt-cloud · Oct 15, 2021 · c8921c0 · c8921c0
1 parent 1190269
commit c8921c0
Show file tree

Hide file tree

Showing 9 changed files with 294 additions and 114 deletions.
diff --git a/packages/base/src/signals/signal-manager.ts b/packages/base/src/signals/signal-manager.ts
@@ -18,8 +18,8 @@ export declare interface SignalManager {
     fireTraceViewerTabActivatedSignal(experiment: Experiment): void;
     fireUpdateZoomSignal(hasZoomedIn: boolean): void;
     fireResetZoomSignal(): void;
-    fireAnnotationFilterSignal(annotationMarkers?: string[]): void;
-    fireAnnotationsFetchedSignal(annotationCategories: string[]): void;
+    fireMarkerCategoriesFetchedSignal(): void;
+    fireMarkerSetsFetchedSignal(): void;
 }
 
 export const Signals = {
@@ -38,8 +38,8 @@ export const Signals = {
     TRACEVIEWERTAB_ACTIVATED: 'widget activated',
     UPDATE_ZOOM: 'update zoom',
     RESET_ZOOM: 'reset zoom',
-    ANNOTATION_MARKERS_FILTERED: 'filter marker category',
-    ANNOTATIONS_FETCHED: 'annotations fetched'
+    MARKER_CATEGORIES_FETCHED: 'marker categories fetched',
+    MARKERSETS_FETCHED: 'markersets fetched'
 };
 
 export class SignalManager extends EventEmitter implements SignalManager {
@@ -85,13 +85,12 @@ export class SignalManager extends EventEmitter implements SignalManager {
     fireResetZoomSignal(): void {
         this.emit(Signals.RESET_ZOOM);
     }
-    fireAnnotationFilterSignal(annotationMarkers?: string[]): void {
-        this.emit(Signals.ANNOTATION_MARKERS_FILTERED, annotationMarkers);
+    fireMarkerCategoriesFetchedSignal(): void {
+        this.emit(Signals.MARKER_CATEGORIES_FETCHED);
     }
-    fireAnnotationsFetchedSignal(annotationCategories: []): void {
-        this.emit(Signals.ANNOTATIONS_FETCHED, annotationCategories);
+    fireMarkerSetsFetchedSignal(): void {
+        this.emit(Signals.MARKERSETS_FETCHED);
     }
-
 }
 
 let instance: SignalManager = new SignalManager();
@@ -101,4 +100,3 @@ export const setSignalManagerInstance = (sm: SignalManager): void => {
 };
 
 export const signalManager = (): SignalManager => instance;
-
diff --git a/packages/react-components/src/components/abstract-output-component.tsx b/packages/react-components/src/components/abstract-output-component.tsx
@@ -19,6 +19,8 @@ export interface AbstractOutputProps {
     selectionRange: TimeRange | undefined;
     resolution?: number;
     outputDescriptor: OutputDescriptor;
+    markerCategories: string[] | undefined;
+    markerSetId: string;
     style: OutputComponentStyle;
     // WidthProvider (react-grid-layout version 0.16.7) has a bug.
     // Workaround for it needs width to be explicitly passed

diff --git a/packages/react-components/src/components/data-providers/tsp-data-provider.ts b/packages/react-components/src/components/data-providers/tsp-data-provider.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
 import { TimeGraphArrow, TimeGraphEntry, TimeGraphRow, TimeGraphState } from 'tsp-typescript-client/lib/models/timegraph';
 import { TimeGraphStateComponent } from 'timeline-chart/lib/components/time-graph-state';
@@ -45,9 +46,10 @@ export class TspDataProvider {
         totalTimeRange: TimeRange,
         viewRange?: TimelineChart.TimeGraphRange,
         nbTimes?: number,
-        annotationMarkers?: string[]): Promise<TimelineChart.TimeGraphModel> {
+        annotationMarkers?: string[],
+        markerSetId?: string): Promise<TimelineChart.TimeGraphModel> {
         this.timeGraphEntries = [...entries];
-        if (!this.timeGraphEntries.length) {
+        if (!this.timeGraphEntries.length || !viewRange || !nbTimes) {
             return {
                 id: 'model',
                 totalLength: this.totalRange,
@@ -59,15 +61,11 @@ export class TspDataProvider {
         }
 
         this.totalRange = totalTimeRange.getEnd() - totalTimeRange.getStart();
-        let fetchParameters = QueryHelper.selectionTimeQuery([],
-            ids, annotationMarkers !== undefined ? { 'requested_marker_categories': annotationMarkers } : {});
-        if (viewRange && nbTimes) {
-            const start = totalTimeRange.getStart() + viewRange.start;
-            const end = totalTimeRange.getStart() + viewRange.end;
-            fetchParameters = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(start, end, nbTimes),
-                ids, annotationMarkers !== undefined ? { 'requested_marker_categories': annotationMarkers } : {});
-        }
-        const tspClientResponse = await this.client.fetchTimeGraphStates(this.traceUUID, this.outputId, fetchParameters);
+
+        const start = totalTimeRange.getStart() + viewRange.start;
+        const end = totalTimeRange.getStart() + viewRange.end;
+        const timeGraphStateParams = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(start, end, nbTimes), ids);
+        const tspClientResponse = await this.client.fetchTimeGraphStates(this.traceUUID, this.outputId, timeGraphStateParams);
         const stateResponse = tspClientResponse.getModel();
         if (tspClientResponse.isOk() && stateResponse) {
             this.timeGraphRows = stateResponse.model.rows;
@@ -87,8 +85,19 @@ export class TspDataProvider {
             }
         });
 
+        const additionalProps: { [key: string]: any } = {};
+
+        if (annotationMarkers) {
+            additionalProps['requested_marker_categories'] = annotationMarkers;
+        }
+        if (markerSetId) {
+            additionalProps['requested_marker_set'] = markerSetId;
+        }
+
+        const annotationParams = QueryHelper.selectionTimeQuery(QueryHelper.splitRangeIntoEqualParts(start, end, nbTimes), ids, additionalProps);
+
         const annotations: Map<number, TimelineChart.TimeGraphAnnotation[]> = new Map();
-        const tspClientResponse2 = await this.client.fetchAnnotations(this.traceUUID, this.outputId, fetchParameters);
+        const tspClientResponse2 = await this.client.fetchAnnotations(this.traceUUID, this.outputId, annotationParams);
         const annotationsResponse = tspClientResponse2.getModel();
         const rangeEvents: TimelineChart.TimeGraphAnnotation[] = [];
 

diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -53,9 +53,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private styleMap = new Map<string, TimeGraphStateStyle>();
 
     private selectedElement: TimeGraphStateComponent | undefined;
-    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);
@@ -83,7 +81,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             rowStyleProvider: (row: TimelineChart.TimeGraphRowModel) => ({
                 backgroundColor: 0x979797,// 0xaaaaff,
                 backgroundOpacity: row.selected ? 0.1 : 0,
-                lineColor: this.props.backgroundTheme === 'light' ? 0xD3D3D3 : 0x3F4146 , // hasStates ? 0xdddddd : 0xaa4444, // row.data && row.data.hasStates
+                lineColor: this.props.backgroundTheme === 'light' ? 0xD3D3D3 : 0x3F4146, // hasStates ? 0xdddddd : 0xaa4444, // row.data && row.data.hasStates
                 lineThickness: 1, // hasStates ? 1 : 3 // row.data && row.data.hasStates
             })
         };
@@ -118,7 +116,6 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             }
         });
         signalManager().on(Signals.SELECTION_CHANGED, this.onSelectionChanged);
-        signalManager().on(Signals.ANNOTATION_MARKERS_FILTERED, this.onMarkerFilterChanged);
     }
 
     synchronizeTreeScroll(): void {
@@ -167,7 +164,9 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
 
     async componentDidUpdate(prevProps: TimegraphOutputProps, prevState: TimegraphOutputState): Promise<void> {
         if (prevState.outputStatus === ResponseStatus.RUNNING ||
-            this.state.collapsedNodes !== prevState.collapsedNodes) {
+            this.state.collapsedNodes !== prevState.collapsedNodes ||
+            prevProps.markerCategories !== this.props.markerCategories ||
+            prevProps.markerSetId !== this.props.markerSetId) {
             this.chartLayer.updateChart();
             this.arrowLayer.update();
             this.rangeEventsLayer.update();
@@ -218,12 +217,6 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         }
     }
 
-    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
         return <EntryTree
@@ -377,7 +370,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         const newRange: TimelineChart.TimeGraphRange = { start, end };
         const nbTimes = Math.ceil(Number(end - start) / resolution) + 1;
         const timeGraphData: TimelineChart.TimeGraphModel = await this.tspDataProvider.getData(orderedTreeIds, this.state.timegraphTree,
-            this.props.range, newRange, nbTimes, this.annotationMarkers);
+            this.props.range, newRange, nbTimes, this.props.markerCategories, this.props.markerSetId);
         this.arrowLayer.addArrows(timeGraphData.arrows);
         this.rangeEventsLayer.addRangeEvents(timeGraphData.rangeEvents);
 

diff --git a/packages/react-components/src/components/trace-context-component.tsx b/packages/react-components/src/components/trace-context-component.tsx
@@ -31,6 +31,8 @@ interface TraceContextProps {
     tspClient: TspClient;
     experiment: Experiment;
     outputs: OutputDescriptor[];
+    markerCategoriesMap: Map<string, string[]>;
+    markerSetId: string;
     onOutputRemove: (outputId: string) => void;
     // Introduce dependency on Theia maybe it should be just a callback
     messageManager: Messages.MessageManager;
@@ -127,9 +129,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
         this.tooltipComponent = React.createRef();
         this.traceContextContainer = React.createRef();
         this.initialize();
-        signalManager().on(Signals.THEME_CHANGED, this.onBackgroundThemeUpdated);
-        signalManager().on(Signals.UPDATE_ZOOM, this.onUpdateZoom);
-        signalManager().on(Signals.RESET_ZOOM, this.onResetZoom);
+        this.subscribeToEvents();
     }
 
     private updateBackgroundTheme(theme: string): void {
@@ -194,10 +194,20 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
     }
 
     componentWillUnmount(): void {
-        signalManager().off(Signals.THEME_CHANGED, this.onBackgroundThemeUpdated);
         this.props.messageManager.removeStatusMessage(this.INDEXING_STATUS_BAR_KEY);
         this.props.messageManager.removeStatusMessage(this.TIME_SELECTION_STATUS_BAR_KEY);
         this.props.removeResizeHandler(this.onResize);
+        this.unsubscribeToEvents();
+    }
+
+    private subscribeToEvents() {
+        signalManager().on(Signals.THEME_CHANGED, this.onBackgroundThemeUpdated);
+        signalManager().on(Signals.UPDATE_ZOOM, this.onUpdateZoom);
+        signalManager().on(Signals.RESET_ZOOM, this.onResetZoom);
+    }
+
+    private unsubscribeToEvents() {
+        signalManager().off(Signals.THEME_CHANGED, this.onBackgroundThemeUpdated);
         signalManager().off(Signals.UPDATE_ZOOM, this.onUpdateZoom);
         signalManager().off(Signals.RESET_ZOOM, this.onResetZoom);
     }
@@ -311,6 +321,8 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                         tooltipComponent: this.tooltipComponent.current,
                         traceId: this.state.experiment.UUID,
                         outputDescriptor: output,
+                        markerCategories: this.props.markerCategoriesMap.get(output.id),
+                        markerSetId: this.props.markerSetId,
                         range: this.state.currentRange,
                         nbEvents: this.state.experiment.nbEvents,
                         viewRange: this.state.currentViewRange,

diff --git a/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx b/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx
@@ -124,19 +124,6 @@ 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 ? annotationCategoriesResponse.model.annotationCategories : [];
-                signalManager().fireAnnotationsFetchedSignal(categoriesList);
-            }
-        }
     }
 
     protected doHandleContextMenuEvent(event: React.MouseEvent<HTMLDivElement>, output: OutputDescriptor | undefined): void {

diff --git a/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-commands.ts b/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-commands.ts
@@ -19,14 +19,21 @@ export namespace TraceViewerToolbarCommands {
         label: 'Reset',
         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 const FILTER: Command = {
+        id: 'trace.viewer.toolbar.filter',
+        label: 'Trace Viewer Toolbar Filter',
+        iconClass: 'fa fa-filter fa-lg',
+    };
+
+    export const MARKER_SETS: Command = {
+        id: 'trace.viewer.toolbar.markersets',
+        label: 'Markers',
+        iconClass: 'fa fa-bars fa-lg',
+    };
+}
 
-export namespace TraceViewerToolbarFilterMenus {
-    export const TOOLBAR_FILTER_MARKERS_MENU: MenuPath = ['trace-viewer-filter-markers-menu'];
+export namespace TraceViewerToolbarMenus {
+    export const MARKER_CATEGORIES_MENU: MenuPath = ['trace-viewer-marker-categories-menu'];
+    export const MARKER_SETS_MENU: MenuPath = ['trace-viewer-marker-sets-menu'];
 }