From 3ebc2db07887e25de7dd203f6b7a03c8e58766f5 Mon Sep 17 00:00:00 2001
From: Rodrigo Pinto <rodrigo.pinto@calian.ca>
Date: Fri, 6 May 2022 11:15:45 -0400
Subject: [PATCH] Select chart components from a selection in the events table

Select corresponding chart components from the events table.

Clicking on a line in the events table will cause a chart like "Thread
Status" to scroll vertically to the row which has the element that
corresponds to the clicked event.

For each line in the timegraph tree, parse the metadata in the
TimeGraphEntry received from the server and try to find matches with the
key / values pairs of the clicked event. It will select the entry which
has the most matches.

When extending the selection, only the last selected event will be
used to broadcast the selection (multi-line selection).

This PR requires the following pull requests:
https://git.eclipse.org/r/c/tracecompass.incubator/org.eclipse.tracecompass.incubator/+/193246
https://github.com/eclipse-cdt-cloud/tsp-typescript-client/pull/63
https://github.com/eclipse-cdt-cloud/timeline-chart/pull/204

The corresponding Trace Server Protocol (TSP) update:
https://github.com/eclipse-cdt-cloud/trace-server-protocol/pull/83

Signed-off-by: Rodrigo Pinto <rodrigo.pinto@calian.ca>
Signed-off-by: Bernd Hufmann <bernd.hufmann@ericsson.com>
---
 .../src/components/table-output-component.tsx | 14 +--
 .../components/timegraph-output-component.tsx | 98 ++++++++++++++++++-
 .../components/utils/filter-tree/utils.tsx    |  5 +
 3 files changed, 109 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/src/components/table-output-component.tsx b/packages/react-components/src/components/table-output-component.tsx
index 4d81ab4ac..c96082566 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) {
@@ -392,11 +394,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);
diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
index bcab35887..72a214aaf 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);
@@ -285,6 +288,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 +309,46 @@ 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 clicked 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 line clicked in the Events Table
+     * @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, value]) => {
+                        if (typeof (payload.load) !== 'string') {
+                            const val = payload.load[key];
+                            if (val !== undefined) {
+                                const num = Number(val);
+                                if ((num !== undefined && num === value[0]) || (val === value[0])) {
+                                    cnt++;
+                                }
+                            }
+                        }
+                    });
+                    if (cnt > max) {
+                        max = cnt;
+                        element = el;
+                    }
+                }
+            });
+
+        }
+        return element;
+    }
+
     private getMarkersLayerHeight() {
         const rowHeight = 20;
         const scrollbarHeight = 10;
@@ -533,6 +589,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 +877,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);
+};