From 28039a3b419d0447af2ea36f985b4618d1584785 Mon Sep 17 00:00:00 2001
From: williamsyang-work <william.yang@ericsson.com>
Date: Tue, 19 Jul 2022 18:20:36 +0200
Subject: [PATCH] Zoom into selection range using z

Allows user to press z to zoom to current selection.
Adds relevant information to keyboard shortcut menu.

Signed-off-by: Will Yang <william.yang@ericsson.com>
---
 .../src/components/trace-context-component.tsx        | 11 +++++++++++
 .../time-graph-navigation-shortcuts-table.tsx         |  6 ++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/react-components/src/components/trace-context-component.tsx b/packages/react-components/src/components/trace-context-component.tsx
index e8921b257..d6ad8df02 100644
--- a/packages/react-components/src/components/trace-context-component.tsx
+++ b/packages/react-components/src/components/trace-context-component.tsx
@@ -434,6 +434,10 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
                 this.zoomButton(false);
                 break;
             }
+            case 'z': {
+                this.zoomToSelected();
+                break;
+            }
         }
     }
 
@@ -458,6 +462,13 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
         }
     }
 
+    private zoomToSelected(): void {
+        const newZoom = this.unitController.selectionRange;
+        if (newZoom) {
+            this.unitController.viewRange = newZoom;
+        }
+    }
+
     private renderOutputs() {
         this.generateGridLayout();
         const chartWidth = Math.max(0, this.state.style.width - this.state.style.chartOffset);
diff --git a/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/time-graph-navigation-shortcuts-table.tsx b/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/time-graph-navigation-shortcuts-table.tsx
index 5cb8819ac..ce0e429d0 100644
--- a/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/time-graph-navigation-shortcuts-table.tsx
+++ b/theia-extensions/viewer-prototype/src/browser/trace-explorer/trace-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/time-graph-navigation-shortcuts-table.tsx
@@ -45,6 +45,12 @@ export class TimeGraphShortcutsTable extends React.Component {
                                     <span className='monaco-keybinding-key'><i className='fa fa-arrow-down' /></span>
                                 </td>
                             </tr>
+                            <tr>
+                                <td>Zoom to selected</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'>Z</span>
+                                </td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>