Select chart components from the events table

[Rodrigoplp-work]

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.

Only works if the events contains matching information about start time,
PID, TID or unique process name.

This PR requires the following pull requests:

• Incubator PR
• tsp-typescript-client PR

2022-05-06.17-16-14.mp4

Signed-off-by: Rodrigo Pinto rodrigo.pinto@calian.ca

[bhufmann]

Thanks for the contribution. It was fun to see this useful feature getting shape. I have request for change in the search algorithm for the row.

[bhufmann]

The entry start time in not relevant in most cases not matching the selected event time. So, you can remove it.

[Rodrigoplp-work]

Done.

[bhufmann]

So, your trying to match the Content column with the metadata. However, the idea of the this feature was to match the metadata with the columns of the event in the table, where the key is the header name and value the content of the cell. So, what you need to do is find the most intersecting row, i.e. most number of matching key/value pairs from metadata and event header/cell pairs. To test I tried to implement it with the following code:

    private doHandleSelectionChangedSignal(payload: { [key: string]: string }) {
        const offset = this.props.viewRange.getOffset() || BigInt(0);
        const startTimestamp = payload['startTimestamp'];
        const endTimestamp = payload['endTimestamp'];
        if (startTimestamp !== undefined && endTimestamp !== undefined) {
            const selectionRangeStart = BigInt(startTimestamp) - offset;
            const selectionRangeEnd = BigInt(endTimestamp) - offset;
            const foundElement = this.findElement(payload);
            // Scroll vertically
            if (foundElement) {
                const rowIndex = this.state.dataRows.findIndex(d => d.id === foundElement.id);
                if (this.timeGraphTreeRef.current) {
                    this.timeGraphTreeRef.current.scrollTop = 20 * rowIndex;
                }
                // Select row
                const row = this.state.dataRows.find(d => d.id === foundElement.id);
                if (row) {
                    this.chartLayer.selectRow(row);
                    // TODO select state at row/starttime
                }
            }
            // Scroll horizontally
            this.props.unitController.selectionRange = {
                start: selectionRangeStart,
                end: selectionRangeEnd
            };
            this.chartCursors.maybeCenterCursor();
        }
    }

    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).some(([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;
    }

The is probably a better way to implement the search algorithm findElement with some stream and lambdas and some javascript magic which you are more familiar that me. Feel free to reimplement the findElement method.

I tested my code with the Thread Status and Resources view.

[Rodrigoplp-work]

Thank you for the clarification and suggestions!
I tried a reducer in place of the forEach in findElement, but the solution was not much shorter than yours, just more abstract. So I preferred to kept your solution with a few minor adjustments, and cleaned up unused code.

[bhufmann]

you accidentally removed this import

[Rodrigoplp-work]

True. Fixed.

[bhufmann]

This actually doesn't work. this.state.dataRows contains the visible row components and the row component id is not equal to the corresponding tree entry id. Also, when that particular element is under a collapsed node then it is also not part of the dataRows.

Right now, the code base doesn't have an API that would ensure visibility based on tree entry ID. That will have to been done to be able to support this vertical scrolling.

[Rodrigoplp-work]

Ok.

[bhufmann]

This PR is moved to #760.