Sync event timestamp with timegraph

packages/base/src/signal-manager.ts

@@ -4,29 +4,35 @@ export declare interface SignalManager {
 
     fireTooltipSignal(tooltip: { [key: string]: string }): void;
     fireThemeChangedSignal(theme: string): void;
+    fireSelectionChangedSignal(payload: { [key: string]: string }): void;
 
 }
 
 export const Signals = {
-    TRACE_OPENED : 'trace opened',
-    TRACE_CLOSED : 'trace closed',
+    TRACE_OPENED: 'trace opened',
+    TRACE_CLOSED: 'trace closed',
     EXPERIMENT_OPENED: 'experiment opened',
     EXPERIMENT_CLOSED: 'experiment closed',
     EXPERIMENT_SELECTED: 'experiment selected',
     TOOLTIP_UPDATED: 'tooltip updated',
-    THEME_CHANGED: 'theme changed'
+    THEME_CHANGED: 'theme changed',
+    SELECTION_CHANGED: 'selection changed'
 };
 
 export class SignalManager extends EventEmitter implements SignalManager {
 
     fireTooltipSignal(tooltip: { [key: string]: string; }): void {
-        this.emit(Signals.TOOLTIP_UPDATED, {tooltip});
+        this.emit(Signals.TOOLTIP_UPDATED, { tooltip });
     }
 
     fireThemeChangedSignal(theme: string) {
         this.emit(Signals.THEME_CHANGED, theme);
     }
 
+    fireSelectionChangedSignal(payload: { [key: string]: string; }): void {
+        this.emit(Signals.SELECTION_CHANGED, { payload });
+    }
+
 }
 
 let instance: SignalManager = new SignalManager();

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

@@ -2,9 +2,10 @@
 import { AbstractOutputComponent, AbstractOutputProps, AbstractOutputState } from './abstract-output-component';
 import * as React from 'react';
 import { AgGridReact } from 'ag-grid-react';
-import { ColDef, IDatasource, GridReadyEvent } from 'ag-grid-community';
+import { ColDef, IDatasource, GridReadyEvent, CellClickedEvent } from 'ag-grid-community';
 import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
 import { cloneDeep } from 'lodash';
+import { signalManager } from '@trace-viewer/base/lib/signal-manager';
 
 type TableOuputState = AbstractOutputState & {
     tableColumns: ColDef[];
@@ -64,11 +65,25 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                 onGridReady={this.onGridReady}
                 components={this.components}
                 enableColResize={true}
+                onCellClicked={this.onEventClick}
+                rowSelection='single'
             >
             </AgGridReact>
         </div>;
     }
 
+    private onEventClick(event: CellClickedEvent) {
+        const columns = event.columnApi.getAllColumns();
+        const timestampHeader = columns.find(column => column.getColDef().headerName === 'Timestamp ns');
+        if (timestampHeader) {
+            const timestamp = timestampHeader.getColDef().field;
+            const payload = {
+                'timestamp': (timestamp ? event.data[timestamp] : '')
+            };
+            signalManager().fireSelectionChangedSignal(payload);
+        }
+    }
+
     private async fetchTableLines(fetchIndex: number, linesToFetch: number) {
         const traceUUID = this.props.traceId;
         const tspClient = this.props.tspClient;

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

@@ -10,7 +10,7 @@ import { TimeGraphRowController } from 'timeline-chart/lib/time-graph-row-contro
 import { QueryHelper } from 'tsp-typescript-client/lib/models/query/query-helper';
 import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
 import { TimeGraphEntry } from 'tsp-typescript-client/lib/models/timegraph';
-import { signalManager } from '@trace-viewer/base/lib/signal-manager';
+import { signalManager, Signals } from '@trace-viewer/base/lib/signal-manager';
 import { AbstractOutputProps, AbstractOutputState } from './abstract-output-component';
 import { AbstractTreeOutputComponent } from './abstract-tree-output-component';
 import { StyleProvider } from './data-providers/style-provider';
@@ -37,6 +37,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private rowController: TimeGraphRowController;
     private chartLayer: TimeGraphChart;
     private vscrollLayer: TimeGraphVerticalScrollbar;
+    private chartCursors: TimeGraphChartCursors;
     private horizontalContainer: React.RefObject<HTMLDivElement>;
 
     private tspDataProvider: TspDataProvider;
@@ -69,7 +70,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         };
         this.chartLayer = new TimeGraphChart('timeGraphChart', providers, this.rowController);
         this.vscrollLayer = new TimeGraphVerticalScrollbar('timeGraphVerticalScrollbar', this.rowController);
-
+        this.chartCursors = new TimeGraphChartCursors('chart-cursors', this.chartLayer, this.rowController, { color: this.props.style.cursorColor });
         this.rowController.onVerticalOffsetChangedHandler(() => {
             if (this.treeRef.current) {
                 this.treeRef.current.scrollTop = this.rowController.verticalOffset;
@@ -87,6 +88,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             }
             this.onElementSelected(this.selectedElement);
         });
+        signalManager().on(Signals.SELECTION_CHANGED, ({ payload }) => this.onSelectionChanged(payload));
     }
 
     synchronizeTreeScroll(): void {
@@ -154,6 +156,19 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         this.setState({ collapsedNodes: newList });
     }
 
+    private onSelectionChanged(payload: { [key: string]: number }) {
+        const offset = this.props.viewRange.getOffset() || 0;
+        const timestamp = Number(payload['timestamp']);
+        if (!isNaN(timestamp)) {
+            const selectionRangeStart = timestamp - offset;
+            this.props.unitController.selectionRange = {
+                start: selectionRangeStart,
+                end: selectionRangeStart
+            };
+            this.chartCursors.maybeCenterCursor();
+        }
+    }
+
     renderTree(): React.ReactNode {
         // TODO Show header, when we can have entries in-line with timeline-chart
         return <EntryTree
@@ -185,8 +200,6 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
 
     private getChartContainer() {
         const grid = new TimeGraphChartGrid('timeGraphGrid', this.props.style.rowHeight, this.props.style.lineColor);
-
-        const cursors = new TimeGraphChartCursors('chart-cursors', this.chartLayer, this.rowController, { color: this.props.style.cursorColor });
         const selectionRange = new TimeGraphChartSelectionRange('chart-selection-range', { color: this.props.style.cursorColor });
         return <ReactTimeGraphContainer
             options={
@@ -202,7 +215,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             unitController={this.props.unitController}
             id='timegraph-chart'
             layer={[
-                grid, this.chartLayer, selectionRange, cursors
+                grid, this.chartLayer, selectionRange, this.chartCursors
             ]}
         >
         </ReactTimeGraphContainer>;