Select chart components when selecting an event with keyboard in table

When using the keyboard to select an event, broadcast the event details to other charts to select corresponding chart component. Add support for arrow up/down key selection of events in the events table. When extending the selection, only the last selected event will be used to broadcast the selection (multi-line selection). Make sure that the properties view is updated with the last event selection. Signed-off-by: Bernd Hufmann <bernd.hufmann@ericsson.com>
eclipse-cdt-cloud · Jun 14, 2022 · 3598713 · 3598713
1 parent 076c577
commit 3598713
Showing 1 changed file with 31 additions and 6 deletions.
diff --git a/packages/react-components/src/components/table-output-component.tsx b/packages/react-components/src/components/table-output-component.tsx
@@ -221,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;
@@ -231,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]);
@@ -252,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) {
@@ -280,15 +280,13 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                             this.endTimestamp = BigInt(nextRow.data[this.timestampCol]);
                         }
                     }
-                    this.handleRowSelectionChange();
 
                 } else if (keyEvent.code === 'Space') {
                     this.selectEndIndex = rowIndex;
                     if (currTimestamp) {
                         this.endTimestamp = BigInt(currTimestamp);
                     }
                     this.selectRows();
-                    this.handleRowSelectionChange();
                 }
             } else if (keyEvent.code === 'Space') {
                 gridApi.deselectAll();
@@ -297,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);
         }
     }