feat: timeline mouse + keyboard navigation & interaction

CHANGELOG.md

@@ -9,25 +9,47 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- **⚡ Performance**: Improved performance to handle huge Apex debug logs; Zoom + pan are **7X faster** with smoother motion; Adaptive level-of-detail bucketing reveals richer timeline detail as you zoom while keeping the view clean and fast.
+  - **Visual Display**: Dynamic labels on Timeline events for faster log scanning; Time axis auto-spaces markers intelligently and more naturally as you zoom; Search + highlight dims non-matches for fast scanning.
+
 - ⚡ **Timeline**: A brand new **experimental** timeline Flame Chart built for massive logs and up to **7X faster**. ([#446] [#251] [#92] [#564])
-  - Toggle the legacy timeline anytime via **Settings -> Apex Log Analyzer -> Timeline -> Legacy**.
-  - Improved performance to handle huge Apex debug logs.
-  - Dynamic labels on Timeline events for faster log scanning.
-  - Zoom + pan are **7X faster** with smoother motion.
-  - Time axis auto-spaces markers intelligently and more naturally as you zoom.
-  - Search + highlight dims non-matches for fast scanning.
-  - 18 curated timeline themes plus the default theme has been improved for better contrast and readability.
-  - Add your own multiple custom themes via **Settings -> Apex Log Analyzer -> Timeline -> Custom Themes**.
-  - Fast theme switching via **Command Palette**: **Log: Timeline Theme** or **Settings -> Apex Log Analyzer -> Timeline -> Active Theme**.
-  - Adaptive level-of-detail bucketing reveals richer timeline detail as you zoom while keeping keeping the view clean and fast.
+  - **⚡ Performance**: Improved performance to handle huge Apex debug logs.
+    - Zoom + pan are **7X faster** with smoother motion.
+  - **Visual Display**:
+    - Adaptive level-of-detail bucketing reveals richer timeline detail as you zoom while keeping the view clean and fast.
+    - Dynamic labels on Timeline events for faster log scanning.
+    - Time axis auto-spaces markers intelligently and more naturally as you zoom.
+    - Search + highlight dims non-matches for fast scanning.
+  - **🎨 Themes**:
+    - 18 curated timeline themes plus the default theme has been improved for better contrast and readability.
+    - Add your own multiple custom themes via **Settings -> Apex Log Analyzer -> Timeline -> Custom Themes**.
+    - Fast theme switching via **Command Palette**: **Log: Timeline Theme** or **Settings -> Apex Log Analyzer -> Timeline -> Active Theme**.
+  - **Keyboard and Mouse Navigation**: Comprehensive interaction controls for the timeline. ([#573] [#366] [#353] [#296] [#295])
+    - **View Control**:
+      - **Zoom**: Scroll wheel (mouse-anchored), or `W`/`S`/`+`/`-` keys.
+      - **Horizontal Pan**: `Alt/Option+Scroll`, trackpad swipe, `A`/`D` keys, or click and drag.
+      - **Vertical Pan**: `Shift+Scroll` or `Shift+W`/`Shift+S` to pan through stack depth.
+      - **Reset Zoom**: Press `Home` or `0` to reset zoom and fit all content.
+    - **Frame Control**:
+      - **Frame Selection**: Click to select and highlight a frame without navigating away.
+      - **Frame Navigation**: Arrow keys traverse the call stack (Up=child, Down=parent, Left/Right=siblings).
+      - **Focus/Zoom to Frame**: Double-click or press `Enter`/`Z` to zoom and fit the selected frame.
+    - **Navigation & Actions**:
+      - **Jump to Call Tree**: Press `J` or `Cmd/Ctrl+Click` to navigate to the frame in the Call Tree.
+      - **Context Menu**: Right-click for Go to Source, Copy Name, Copy Details, and Copy Call Stack.
+      - **Copy**: `Cmd/Ctrl+C` copies the selected frame name.
+      - **Marker Navigation**: Click markers to select; arrow Left/Right to navigate between markers.
+      - **Clear Selection**: Press `Escape` to deselect the current frame or marker.
+  - **Legacy Support**: Toggle the legacy timeline anytime via **Settings -> Apex Log Analyzer -> Timeline -> Legacy**.
 
 ### Changed
 
 - 🎯 **Call Tree Go To**: Go-to links in call tree now navigate to method definition instead of where method was called from ([#632] [#200])
+- 🔍 **Search Navigation**: `Shift+Enter` navigates to the previous search result; hold `Enter` to continuously navigate.
 - ⚡ **Log Parsing**: Improved performance ([#552])
 - ✨ **Duration Formatting**: Human-readable duration formatting in tooltips (30000 ms -> 30s and 0.01 ms -> 10 µs) ([#671])
 - 🎯 **Number Precision**: Total and Self Time column precision changed to 2 decimal places for improved readability ([#671])
-- 🎨 Navigation Bar: Redesigned to better match VS Code’s look and feel ([#694])
+- 🎨 **Navigation Bar**: Redesigned to better match VS Code’s look and feel ([#694])
 
 ## [1.18.1] 2025-07-09
 
@@ -419,6 +441,11 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 
 <!-- Unreleased -->
 
+[#295]: https://github.com/certinia/debug-log-analyzer/issues/295
+[#296]: https://github.com/certinia/debug-log-analyzer/issues/296
+[#353]: https://github.com/certinia/debug-log-analyzer/issues/353
+[#366]: https://github.com/certinia/debug-log-analyzer/issues/366
+[#573]: https://github.com/certinia/debug-log-analyzer/issues/573
 [#564]: https://github.com/certinia/debug-log-analyzer/issues/564
 [#92]: https://github.com/certinia/debug-log-analyzer/issues/92
 [#694]: https://github.com/certinia/debug-log-analyzer/issues/694

README.md

@@ -85,9 +85,14 @@ Use `Log: Retrieve Apex Log And Show Analysis` from the Command Palette.
 
 The Flame Chart view shows a timeline of the Salesforce Apex log execution — including methods, SOQL queries, DML operations, workflows, flows, and more.
 
-- **Zoom & Pan** – Navigate your logs down to 0.001 ms with precision zoom.
+- **⚡ Fast** – Blazing-fast zoom, pan, and rendering even on massive logs (500k+ lines).
+- **🎯 Frame Selection & Navigation** – Click to select frames, use arrow keys to navigate the call stack, double-click or press `Enter` to zoom and focus.
+- **Zoom & Pan** – Navigate your logs down to 0.001 ms with precision zoom. `W`/`S` keys or scroll wheel for zoom; `A`/`D` keys or drag for pan.
+- **Dynamic Labels** – Instantly see method names on timeline events for faster scanning.
+- **19 Curated Themes** – Choose from beautiful, optimized color themes or create your own via Settings.
+- **Smart Interaction** – Right-click for context actions; `Cmd/Ctrl+Click` to jump directly to the Call Tree; `Cmd/Ctrl+C` to copy frame names.
 - **Tooltips** – Hover for duration, event name, SOQL/DML/Exception counts, SOQL/DML rows, and more.
-- **Click to Navigate** – Click any event to instantly view it in the interactive Call Tree.
+- **Adaptive Detail** – Level-of-detail bucketing reveals richer detail as you zoom while keeping performance snappy.
 - **Stacked by Time** – See how execution time is distributed across nested method calls and system events.
 
 ![Flame Chart](https://raw.githubusercontent.com/certinia/debug-log-analyzer/main/lana/assets/v1.18/lana-timeline.png)

lana-docs-site/docs/docs/features/timeline.md

@@ -31,18 +31,75 @@ To revert to the legacy timeline, navigate to **Settings → Apex Log Analyzer 
 
 ### Zoom + Pan
 
-- **Scroll up and down** with the mouse to zoom in and out to an accuracy of 0.001ms. Time markers are shown with a ms time value and white line (e.g., 9600.001 ms).
-- When zooming, the mouse pointer position is kept on screen.
-- **Scroll left and right** on the mouse to move the timeline left or right when zoomed.
-- **Click and drag** to move the timeline around both in the x and y direction when zoomed.
+| Action           | Mouse                                          | Keyboard               |
+| ---------------- | ---------------------------------------------- | ---------------------- |
+| Zoom In/Out      | Scroll wheel (mouse-anchored)                  | `W` / `S` or `+` / `-` |
+| Pan Horizontally | `Alt/Option` + Scroll, Trackpad swipe, or Drag | `A` / `D`              |
+| Pan Vertically   | `Shift` + Scroll or Drag                       | `Shift+W` / `Shift+S`  |
+| Reset Zoom       | —                                              | `Home` or `0`          |
+
+- When zooming, the mouse pointer position is kept on screen (mouse-anchored zoom).
+- Trackpad users can swipe left/right for natural horizontal panning.
+- Time markers are shown with a ms time value (e.g., 9600.001 ms).
+
+### Frame Selection
+
+Click on any event to **select** and highlight it. Selection enables keyboard navigation through the call stack.
+
+| Action              | Mouse             | Keyboard                     |
+| ------------------- | ----------------- | ---------------------------- |
+| Select Frame        | Click             | —                            |
+| Clear Selection     | Click empty space | `Escape`                     |
+| Navigate to Parent  | —                 | `Arrow Down`                 |
+| Navigate to Child   | —                 | `Arrow Up`                   |
+| Navigate to Sibling | —                 | `Arrow Left` / `Arrow Right` |
+| Focus/Zoom to Frame | Double-click      | `Enter` or `Z`               |
+
+:::tip Arrow Key Behavior
+When no frame is selected, arrow keys pan the viewport. When a frame is selected, arrow keys navigate the call stack. Hold `Shift` to always pan.
+:::
 
 ### Go to Call Tree
 
-Clicking an event in the Timeline will navigate to and select that event in the Call Tree.
+| Action            | Mouse              | Keyboard |
+| ----------------- | ------------------ | -------- |
+| Jump to Call Tree | `Cmd/Ctrl` + Click | `J`      |
+| Show Context Menu | Right-click        | —        |
+
+Use `J` or `Cmd/Ctrl+Click` to navigate to the selected frame in the Call Tree. Right-click opens a context menu with additional actions.
+
+### Context Menu
+
+Right-click on any frame to access:
+
+- **Show in Call Tree** (`J`) — Navigate to the frame in the Call Tree
+- **Go to Source** — Jump to the source method in your project (when available)
+- **Zoom to Frame** (`Z`) — Zoom and center the selected frame
+- **Copy Name** (`Cmd/Ctrl+C`) — Copy the frame name to clipboard
+- **Copy Details** — Copy tooltip information
+- **Copy Call Stack** — Copy the full call stack
+
+Right-click on empty space shows **Reset Zoom** (`0`).
+
+### Markers
+
+Log issue markers (truncation, errors, etc.) can be selected and navigated:
+
+| Action            | Mouse              | Keyboard                                            |
+| ----------------- | ------------------ | --------------------------------------------------- |
+| Select Marker     | Click              | —                                                   |
+| Navigate Markers  | —                  | `Arrow Left` / `Arrow Right` (when marker selected) |
+| Jump to Call Tree | `Cmd/Ctrl` + Click | `J`                                                 |
 
 ### Search + Highlight
 
-The timeline supports search functionality that greys out non-matching events, making it easier to find specific matches visually.
+The timeline supports search functionality that dims non-matching events, making it easier to find specific matches visually.
+
+| Action                | Keyboard                      |
+| --------------------- | ----------------------------- |
+| Next Match            | `Enter`                       |
+| Previous Match        | `Shift+Enter`                 |
+| Continuous Navigation | Hold `Enter` or `Shift+Enter` |
 
 ## Tooltip
 
@@ -54,7 +111,7 @@ style={{
 }}
 loading="lazy"/>
 
-Hovering over an element displays detailed information about that event. Clicking on an item navigates to that row in the Call Tree.
+Hovering over an element displays detailed information about that event. Use `J` or `Cmd/Ctrl+Click` to navigate to the frame in the Call Tree.
 
 The tooltip provides the following information: