diff --git a/packages/react-components/src/components/table-output-component.tsx b/packages/react-components/src/components/table-output-component.tsx
index 670dc5fa6..c4b63dfb5 100644
--- a/packages/react-components/src/components/table-output-component.tsx
+++ b/packages/react-components/src/components/table-output-component.tsx
@@ -103,7 +103,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
     renderMainArea(): React.ReactNode {
         return <div id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'}
             tabIndex={-1}
-            onFocus={event=>this.checkFocus(event)}
+            onFocus={event => this.checkFocus(event)}
             className={this.props.backgroundTheme === 'light' ? 'ag-theme-balham' : 'ag-theme-balham-dark'}
             style={{ height: this.props.style.height, width: this.props.outputWidth }}>
             <AgGridReact
@@ -166,8 +166,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
         const mouseEvent = event.event as MouseEvent;
         const gridApi = event.api;
         const rowIndex = event.rowIndex;
-        const itemPropsObj = this.fetchItemProperties(columns, data);
-        signalManager().fireTooltipSignal(itemPropsObj);
+        const itemPropsObj: { [key: string]: string } | undefined = this.fetchItemProperties(columns, data);
 
         const currTimestamp = (this.timestampCol && data) ? data[this.timestampCol] : undefined;
         this.enableIndexSelection = true;
@@ -196,7 +195,10 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                 this.startTimestamp = this.endTimestamp = BigInt(currTimestamp);
             }
         }
-        this.handleRowSelectionChange();
+        // Notfiy selection changed
+        this.handleRowSelectionChange(itemPropsObj);
+        // Notfiy properties changed
+        signalManager().fireTooltipSignal(itemPropsObj);
     }
 
     private fetchItemProperties(columns: Column[], data: any) {
@@ -219,6 +221,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
         const currTimestamp = (this.timestampCol && event.data) ? event.data[this.timestampCol] : undefined;
 
         if (gridApi) {
+            let nextRow;
             const currentRow = gridApi.getRowNode(String(rowIndex));
 
             let isContiguous = true;
@@ -229,7 +232,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                         isContiguous = false;
                     }
 
-                    const nextRow = gridApi.getRowNode(String(rowIndex + 1));
+                    nextRow = gridApi.getRowNode(String(rowIndex + 1));
                     if (isContiguous === false) {
                         if (this.timestampCol && nextRow.data) {
                             this.startTimestamp = this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
@@ -250,13 +253,12 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                             this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
                         }
                     }
-                    this.handleRowSelectionChange();
                 } else if (keyEvent.code === 'ArrowUp') {
                     if (!currentRow.isSelected()) {
                         gridApi.deselectAll();
                         isContiguous = false;
                     }
-                    const nextRow = gridApi.getRowNode(String(rowIndex - 1));
+                    nextRow = gridApi.getRowNode(String(rowIndex - 1));
 
                     if (isContiguous === false) {
                         if (this.timestampCol && nextRow.data) {
@@ -278,7 +280,6 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                             this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
                         }
                     }
-                    this.handleRowSelectionChange();
 
                 } else if (keyEvent.code === 'Space') {
                     this.selectEndIndex = rowIndex;
@@ -286,7 +287,6 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                         this.endTimestamp = BigInt(currTimestamp);
                     }
                     this.selectRows();
-                    this.handleRowSelectionChange();
                 }
             } else if (keyEvent.code === 'Space') {
                 gridApi.deselectAll();
@@ -295,8 +295,35 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                 }
                 this.selectStartIndex = this.selectEndIndex = rowIndex;
                 this.startTimestamp = this.endTimestamp = BigInt(currTimestamp);
-                this.handleRowSelectionChange();
+            } else {
+                gridApi.deselectAll();
+                if (keyEvent.code === 'ArrowDown') {
+                    nextRow = gridApi.getRowNode(String(rowIndex + 1));
+                    if (this.timestampCol && nextRow.data) {
+                        this.startTimestamp = this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
+                    }
+                    this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
+                } else if (keyEvent.code === 'ArrowUp') {
+                    nextRow = gridApi.getRowNode(String(rowIndex - 1));
+                    if (this.timestampCol && nextRow.data) {
+                        this.startTimestamp = this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
+                    }
+                    this.selectStartIndex = this.selectEndIndex = nextRow.rowIndex;
+                }
+                if (nextRow && nextRow.id) {
+                    nextRow.setSelected(true);
+                }
+            }
+            let itemPropsObj;
+            const columns = event.columnApi.getAllColumns();
+            itemPropsObj = undefined;
+            if (nextRow && nextRow.data) {
+                itemPropsObj = this.fetchItemProperties(columns, nextRow.data);
             }
+            // Notfiy selection changed
+            this.handleRowSelectionChange(itemPropsObj);
+            // Notify properties changed
+            signalManager().fireTooltipSignal(itemPropsObj);
         }
     }
 
@@ -392,11 +419,11 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
         }
     }
 
-    private handleRowSelectionChange() {
+    private handleRowSelectionChange(load?: any | undefined) {
         if (this.timestampCol) {
             const startTimestamp = String(this.startTimestamp);
             const endTimestamp = String(this.endTimestamp);
-            const payload = { startTimestamp, endTimestamp };
+            const payload = { startTimestamp, endTimestamp, load };
             this.prevStartTimestamp = BigInt(startTimestamp);
             this.eventSignal = true;
             signalManager().fireSelectionChangedSignal(payload);
@@ -615,9 +642,16 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                     if (this.timestampCol) {
                         this.startTimestamp = this.endTimestamp = BigInt(rowNode.data[this.timestampCol]);
                     }
-                    this.handleRowSelectionChange();
-                    rowNode.setSelected(true);
+                    let itemPropsObj;
+                    if (this.columnApi) {
+                        itemPropsObj = this.fetchItemProperties(this.columnApi.getAllColumns(), rowNode.data);
+                    }
+                    // Notify selection changed
+                    this.handleRowSelectionChange(itemPropsObj);
+                    // Notify properties changed
+                    signalManager().fireTooltipSignal(itemPropsObj);
                     isFound = true;
+                    rowNode.setSelected(true);
                 }
             });
 
@@ -626,6 +660,8 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                 return;
             }
             // find match outside the cache
+            let syncData = undefined;
+
             if (currRowIndex >= 0) {
                 const data = await this.findMatchIndex(currRowIndex, direction);
                 if (data !== undefined) {
@@ -633,14 +669,21 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                     this.selectStartIndex = this.selectEndIndex = data.index;
                     if (this.timestampCol) {
                         this.startTimestamp = this.endTimestamp = BigInt(data.row[this.timestampCol]);
+                        syncData = data.row;
                     }
                 }
             }
 
             // apply new or previous selection
             if (this.selectStartIndex !== -1 && this.selectEndIndex !== -1) {
-                this.handleRowSelectionChange();
-                this.enableIndexSelection = true;
+                let itemPropsObj;
+                if (this.columnApi && syncData) {
+                    itemPropsObj = this.fetchItemProperties(this.columnApi.getAllColumns(), syncData);
+                }
+                // Notfiy selection changed
+                this.handleRowSelectionChange(itemPropsObj);
+                // Notfiy properties changed
+                signalManager().fireTooltipSignal(itemPropsObj);
                 this.selectRows();
             }
         }
@@ -674,7 +717,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
         columnApi.setColumnsVisible([column.field], !columnApi.getColumn(column).isVisible());
         const allCols = cloneDeep(this.state.tableColumns);
 
-        allCols.map( item => {
+        allCols.map(item => {
             if (item.field === column.field) {
                 item.hide = columnApi.getColumn(column).isVisible();
             }
@@ -693,7 +736,7 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
         const columns = this.columnApi.getAllGridColumns();
 
         return <React.Fragment>
-            <table style={{width: '100%'}}>
+            <table style={{ width: '100%' }}>
                 <tbody>
                     {columns.map((column, key) =>
                         <tr key={key}>
diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
index bcab35887..20dde9450 100644
--- a/packages/react-components/src/components/timegraph-output-component.tsx
+++ b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -22,7 +22,7 @@ import { TspDataProvider } from './data-providers/tsp-data-provider';
 import { ReactTimeGraphContainer } from './utils/timegraph-container-component';
 import { OutputElementStyle } from 'tsp-typescript-client/lib/models/styles';
 import { EntryTree } from './utils/filter-tree/entry-tree';
-import { listToTree, getAllExpandedNodeIds } from './utils/filter-tree/utils';
+import { listToTree, getAllExpandedNodeIds, getIndexOfNode } from './utils/filter-tree/utils';
 import hash from 'traceviewer-base/lib/utils/value-hash';
 import ColumnHeader from './utils/filter-tree/column-header';
 import { TimeGraphAnnotationComponent } from 'timeline-chart/lib/components/time-graph-annotation';
@@ -41,6 +41,7 @@ type TimegraphOutputState = AbstractOutputState & {
     collapsedNodes: number[];
     collapsedMarkerNodes: number[];
     columns: ColumnHeader[];
+    dataRows: TimelineChart.TimeGraphRowModel[];
 };
 
 export class TimegraphOutputComponent extends AbstractTreeOutputComponent<TimegraphOutputProps, TimegraphOutputState> {
@@ -65,6 +66,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
     private selectedElement: TimeGraphStateComponent | undefined;
     private selectedMarkerCategories: string[] | undefined = undefined;
     private onSelectionChanged = (payload: { [key: string]: string; }) => this.doHandleSelectionChangedSignal(payload);
+    private pendingSelection: TimeGraphEntry | undefined;
 
     constructor(props: TimegraphOutputProps) {
         super(props);
@@ -76,7 +78,8 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             collapsedNodes: [],
             columns: [],
             collapsedMarkerNodes: [],
-            optionsDropdownOpen: false
+            optionsDropdownOpen: false,
+            dataRows: []
         };
         this.selectedMarkerCategories = this.props.markerCategories;
         this.onToggleCollapse = this.onToggleCollapse.bind(this);
@@ -122,6 +125,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
 
         this.markersChartLayer = new TimeGraphChart('timeGraphChart', markersProvider, this.markerRowController);
         this.chartLayer.onSelectedStateChanged(model => {
+            this.pendingSelection = undefined;
             if (model) {
                 this.selectedElement = this.chartLayer.getStateById(model.id);
             } else {
@@ -285,6 +289,19 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         if (startTimestamp !== undefined && endTimestamp !== undefined) {
             const selectionRangeStart = BigInt(startTimestamp) - offset;
             const selectionRangeEnd = BigInt(endTimestamp) - offset;
+            const foundElement = this.findElement(payload);
+
+            // Scroll vertically
+            if (foundElement) {
+                // Expand parent
+                if (this.expandParents(foundElement)) {
+                    this.selectAndReveal(foundElement);
+                } else {
+                    this.pendingSelection = foundElement;
+                }
+            }
+
+            // Scroll horizontally
             this.props.unitController.selectionRange = {
                 start: selectionRangeStart,
                 end: selectionRangeEnd
@@ -293,6 +310,48 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         }
     }
 
+    /**
+     * For each line in the tree (this.state.timegraphTree), parse the metadata and try to find
+     * matches with the key / values pairs of the selected event.
+     * It counts the amount of metadata matches and returns the TimeGraphEntry with the greatest amount,
+     * which is the most likely result.
+     *
+     * @params payload
+     *      Object with information about the selected event.
+     * @return
+     *      Correspondent TimeGraphEntry from this.state.timegraphTree
+     */
+    private findElement(payload: { [key: string]: string | { [key: string]: string }}): TimeGraphEntry | undefined {
+        let element: TimeGraphEntry | undefined = undefined;
+        let max = 0;
+        if (payload && payload.load) {
+            this.state.timegraphTree.forEach(el => {
+                if (el.metadata) {
+                    let cnt = 0;
+                    Object.entries(el.metadata).forEach(([key, values]) => {
+                        if (typeof (payload.load) !== 'string') {
+                            const val = payload.load[key];
+                            if (val !== undefined) {
+                                const num = Number(val);
+                                // at least one value in array needs to match
+                                const result = values.find((value: string | number) => (num !== undefined && num === value) || (val === value));
+                                if (result !== undefined) {
+                                    cnt++;
+                                }
+                            }
+                        }
+                    });
+                    if (cnt > max) {
+                        max = cnt;
+                        element = el;
+                    }
+                }
+            });
+
+        }
+        return element;
+    }
+
     private getMarkersLayerHeight() {
         const rowHeight = 20;
         const scrollbarHeight = 10;
@@ -533,6 +592,14 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'handleSpinner')!.style.visibility = 'hidden';
         }
+        this.setState({ dataRows: timeGraphData.rows });
+
+        // Apply the pending selection here since the row provider had been called before this method.
+        if (this.pendingSelection) {
+            const foundElement = this.pendingSelection;
+            this.pendingSelection = undefined;
+            this.selectAndReveal(foundElement);
+        }
         return {
             rows: timeGraphData ? timeGraphData.rows : [],
             range: newRange,
@@ -813,4 +880,34 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         }
         return undefined;
     }
+
+    private expandParents(entry: TimeGraphEntry) {
+        let foundNode = this.state.timegraphTree.find(node => node.id === entry?.id);
+        if (foundNode) {
+            let parentId: number | undefined = foundNode.parentId;
+            const ids: number[] = [];
+            while (parentId && parentId >= 0) {
+                ids.push(parentId);
+                foundNode = this.state.timegraphTree.find(node => node.id === parentId);
+                parentId = foundNode?.parentId;
+            }
+
+            let newList = [...this.state.collapsedNodes];
+            ids.forEach(parentIds => {
+                const exist = this.state.collapsedNodes.find(expandId => expandId === parentIds);
+                if (exist !== undefined) {
+                     newList = newList.filter(collapsed => parentIds !== collapsed);
+                }
+            });
+            const retVal = newList.length === this.state.collapsedNodes.length;
+            this.setState({ collapsedNodes: newList }, this.updateTotalHeight);
+            return retVal;
+        }
+    }
+
+    private selectAndReveal(item: TimeGraphEntry) {
+        const rowIndex = getIndexOfNode(item.id, listToTree(this.state.timegraphTree, this.state.columns), this.state.collapsedNodes);
+        this.chartLayer.selectAndReveal(rowIndex);
+    }
+
 }
diff --git a/packages/react-components/src/components/utils/filter-tree/utils.tsx b/packages/react-components/src/components/utils/filter-tree/utils.tsx
index 348c13fad..30afdcfa1 100644
--- a/packages/react-components/src/components/utils/filter-tree/utils.tsx
+++ b/packages/react-components/src/components/utils/filter-tree/utils.tsx
@@ -57,3 +57,8 @@ export const getAllExpandedNodeIds = (nodes: TreeNode[],collapsedNodes: number[]
     });
     return visibleIds;
 };
+
+export const getIndexOfNode = (id: number, nodes: TreeNode[], collapsedNodes: number[]): number => {
+    const ids = getAllExpandedNodeIds(nodes, collapsedNodes);
+    return ids.findIndex(eId => eId === id);
+};