Skip to content

Commit e2c1b8a

Browse files
lukecotterlukecotter
committed
Merge branch 'main' into feat-timeline-rename
2 parents 24caac2 + bfb9e46 commit e2c1b8a

8 files changed

Lines changed: 690 additions & 444 deletions

File tree

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

Lines changed: 127 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,133 @@ The new experimental timeline is up to **7X faster** than the legacy timeline, w
3131
To revert to the legacy timeline, navigate to **Settings → Apex Log Analyzer → Timeline → Legacy** and enable it.
3232
:::
3333

34+
## Navigation
35+
36+
### Zoom + Pan
37+
38+
| Action | Mouse | Keyboard |
39+
| ---------------- | ---------------------------------------------- | ---------------------- |
40+
| Zoom In/Out | Scroll wheel (mouse-anchored) | `W` / `S` or `+` / `-` |
41+
| Pan Horizontally | `Alt/Option` + Scroll, Trackpad swipe, or Drag | `A` / `D` |
42+
| Pan Vertically | `Shift` + Scroll or Drag | `Shift+W` / `Shift+S` |
43+
| Reset Zoom | — | `Home` or `0` |
44+
45+
- When zooming, the mouse pointer position is kept on screen (mouse-anchored zoom).
46+
- Trackpad users can swipe left/right for natural horizontal panning.
47+
- Time markers are shown with a ms time value (e.g., 9600.001 ms).
48+
49+
### Frame Selection
50+
51+
Click on any event to **select** and highlight it. Selection enables keyboard navigation through the call stack.
52+
53+
| Action | Mouse | Keyboard |
54+
| ------------------- | ----------------- | ---------------------------- |
55+
| Select Frame | Click | — |
56+
| Clear Selection | Click empty space | `Escape` |
57+
| Navigate to Parent | — | `Arrow Down` |
58+
| Navigate to Child | — | `Arrow Up` |
59+
| Navigate to Sibling | — | `Arrow Left` / `Arrow Right` |
60+
| Focus/Zoom to Frame | Double-click | `Enter` or `Z` |
61+
62+
:::tip Arrow Key Behavior
63+
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.
64+
:::
65+
66+
### Go to Call Tree
67+
68+
| Action | Mouse | Keyboard |
69+
| ----------------- | ------------------ | -------- |
70+
| Show in Call Tree | `Cmd/Ctrl` + Click | `J` |
71+
| Show Context Menu | Right-click | — |
72+
73+
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.
74+
75+
### Context Menu
76+
77+
Right-click on any frame to access:
78+
79+
- **Show in Call Tree** (`J`) — Navigate to the frame in the Call Tree
80+
- **Go to Source** — Jump to the source method in your project (when available)
81+
- **Zoom to Frame** (`Z`) — Zoom and center the selected frame
82+
- **Copy Name** (`Cmd/Ctrl+C`) — Copy the frame name to clipboard
83+
- **Copy Details** — Copy tooltip information
84+
- **Copy Call Stack** — Copy the full call stack
85+
86+
Right-click on empty space shows **Reset Zoom** (`0`).
87+
88+
### Markers
89+
90+
Log issue markers (truncation, errors, etc.) can be selected and navigated:
91+
92+
| Action | Mouse | Keyboard |
93+
| ----------------- | ------------------ | --------------------------------------------------- |
94+
| Select Marker | Click | — |
95+
| Navigate Markers | — | `Arrow Left` / `Arrow Right` (when marker selected) |
96+
| Jump to Call Tree | `Cmd/Ctrl` + Click | `J` |
97+
98+
### Search + Highlight
99+
100+
The timeline supports search functionality that dims non-matching events, making it easier to find specific matches visually.
101+
102+
| Action | Keyboard |
103+
| --------------------- | ----------------------------- |
104+
| Next Match | `Enter` |
105+
| Previous Match | `Shift+Enter` |
106+
| Continuous Navigation | Hold `Enter` or `Shift+Enter` |
107+
108+
### Measurement & Zoom Tools
109+
110+
#### Measure Range
111+
112+
Use `Shift+Drag` to measure the duration between any two points on the timeline. This is useful for precisely measuring the time span of specific operations or groups of events.
113+
114+
| Action | Mouse/Keyboard |
115+
| ------------------- | --------------------------------------------------- |
116+
| Create Measurement | `Shift+Drag` on timeline |
117+
| Resize Measurement | Drag the left or right edge of the measurement |
118+
| Zoom to Measurement | Double-click inside measurement, or click zoom icon |
119+
| Clear Measurement | `Escape` or click outside the measurement area |
120+
121+
The measurement overlay displays:
122+
123+
- The time duration of the selected range
124+
- A zoom icon to quickly zoom to fit the measured area
125+
126+
:::tip Resize Handles
127+
Hover near the edges of an existing measurement to see the resize cursor. Drag to adjust the measurement boundaries — edges can be dragged past each other to swap positions.
128+
:::
129+
130+
#### Area Zoom
131+
132+
Use `Alt/Option+Drag` to select a time range and instantly zoom to fit it. This provides a quick way to focus on a specific portion of the timeline.
133+
134+
| Action | Mouse/Keyboard |
135+
| --------- | ----------------------------- |
136+
| Area Zoom | `Alt/Option+Drag` on timeline |
137+
138+
Release the mouse button to zoom the viewport to fit the selected area exactly.
139+
140+
## Tooltip
141+
142+
<img
143+
src="https://raw.githubusercontent.com/certinia/debug-log-analyzer/main/lana/assets/v1.18/lana-timeline-tooltip.png"
144+
alt="Tooltip showing detailed event information including event name, description, timestamps, duration, and row counts"
145+
style={{
146+
width: '50%', height:'auto', maxWidth:'400px'
147+
}}
148+
loading="lazy"/>
149+
150+
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.
151+
152+
The tooltip provides the following information:
153+
154+
- **Event Name** - e.g., `METHOD_ENTRY`, `EXECUTION_STARTED`, `SOQL_EXECUTION_BEGIN`
155+
- **Event Description** - Additional information about the event such as method name or SOQL query executed
156+
- **Timestamp** - The start and end timestamp for the given event which can be cross-referenced in the log file
157+
- **Time** - Wall-clock time of day for the event (e.g., `14:30:05.122 → 14:30:06.625`). Only shown when wall-clock data is available in the log.
158+
- **Duration** - Made up of **Total Time** (time spent in that event and its children) and **Self Time** (time directly spent in that event)
159+
- **Rows** - Shows **Total Rows** (rows from that event and its children) and **Self Rows** (rows directly from that event)
160+
34161
## Minimap
35162

36163
The minimap gives you instant context of your entire log. Spot hotspots at a glance, jump anywhere with a click, and always know exactly where you are—all without scrolling.
@@ -152,112 +279,6 @@ Hovering over the metric strip displays a detailed breakdown showing:
152279

153280
Each row displays: color swatch, metric name, percentage, and used/limit values.
154281

155-
## Navigation
156-
157-
### Zoom + Pan
158-
159-
| Action | Mouse | Keyboard |
160-
| ---------------- | ---------------------------------------------- | ---------------------- |
161-
| Zoom In/Out | Scroll wheel (mouse-anchored) | `W` / `S` or `+` / `-` |
162-
| Pan Horizontally | `Alt/Option` + Scroll, Trackpad swipe, or Drag | `A` / `D` |
163-
| Pan Vertically | `Shift` + Scroll or Drag | `Shift+W` / `Shift+S` |
164-
| Reset Zoom | — | `Home` or `0` |
165-
166-
- When zooming, the mouse pointer position is kept on screen (mouse-anchored zoom).
167-
- Trackpad users can swipe left/right for natural horizontal panning.
168-
- Time markers are shown with a ms time value (e.g., 9600.001 ms).
169-
170-
### Frame Selection
171-
172-
Click on any event to **select** and highlight it. Selection enables keyboard navigation through the call stack.
173-
174-
| Action | Mouse | Keyboard |
175-
| ------------------- | ----------------- | ---------------------------- |
176-
| Select Frame | Click | — |
177-
| Clear Selection | Click empty space | `Escape` |
178-
| Navigate to Parent | — | `Arrow Down` |
179-
| Navigate to Child | — | `Arrow Up` |
180-
| Navigate to Sibling | — | `Arrow Left` / `Arrow Right` |
181-
| Focus/Zoom to Frame | Double-click | `Enter` or `Z` |
182-
183-
:::tip Arrow Key Behavior
184-
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.
185-
:::
186-
187-
### Go to Call Tree
188-
189-
| Action | Mouse | Keyboard |
190-
| ----------------- | ------------------ | -------- |
191-
| Show in Call Tree | `Cmd/Ctrl` + Click | `J` |
192-
| Show Context Menu | Right-click | — |
193-
194-
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.
195-
196-
### Context Menu
197-
198-
Right-click on any frame to access:
199-
200-
- **Show in Call Tree** (`J`) — Navigate to the frame in the Call Tree
201-
- **Go to Source** — Jump to the source method in your project (when available)
202-
- **Zoom to Frame** (`Z`) — Zoom and center the selected frame
203-
- **Copy Name** (`Cmd/Ctrl+C`) — Copy the frame name to clipboard
204-
- **Copy Details** — Copy tooltip information
205-
- **Copy Call Stack** — Copy the full call stack
206-
207-
Right-click on empty space shows **Reset Zoom** (`0`).
208-
209-
### Markers
210-
211-
Log issue markers (truncation, errors, etc.) can be selected and navigated:
212-
213-
| Action | Mouse | Keyboard |
214-
| ----------------- | ------------------ | --------------------------------------------------- |
215-
| Select Marker | Click | — |
216-
| Navigate Markers | — | `Arrow Left` / `Arrow Right` (when marker selected) |
217-
| Jump to Call Tree | `Cmd/Ctrl` + Click | `J` |
218-
219-
### Search + Highlight
220-
221-
The timeline supports search functionality that dims non-matching events, making it easier to find specific matches visually.
222-
223-
| Action | Keyboard |
224-
| --------------------- | ----------------------------- |
225-
| Next Match | `Enter` |
226-
| Previous Match | `Shift+Enter` |
227-
| Continuous Navigation | Hold `Enter` or `Shift+Enter` |
228-
229-
### Measurement & Zoom Tools
230-
231-
#### Measure Range
232-
233-
Use `Shift+Drag` to measure the duration between any two points on the timeline. This is useful for precisely measuring the time span of specific operations or groups of events.
234-
235-
| Action | Mouse/Keyboard |
236-
| ------------------- | --------------------------------------------------- |
237-
| Create Measurement | `Shift+Drag` on timeline |
238-
| Resize Measurement | Drag the left or right edge of the measurement |
239-
| Zoom to Measurement | Double-click inside measurement, or click zoom icon |
240-
| Clear Measurement | `Escape` or click outside the measurement area |
241-
242-
The measurement overlay displays:
243-
244-
- The time duration of the selected range
245-
- A zoom icon to quickly zoom to fit the measured area
246-
247-
:::tip Resize Handles
248-
Hover near the edges of an existing measurement to see the resize cursor. Drag to adjust the measurement boundaries — edges can be dragged past each other to swap positions.
249-
:::
250-
251-
#### Area Zoom
252-
253-
Use `Alt/Option+Drag` to select a time range and instantly zoom to fit it. This provides a quick way to focus on a specific portion of the timeline.
254-
255-
| Action | Mouse/Keyboard |
256-
| --------- | ----------------------------- |
257-
| Area Zoom | `Alt/Option+Drag` on timeline |
258-
259-
Release the mouse button to zoom the viewport to fit the selected area exactly.
260-
261282
## Wall-Clock Time
262283

263284
The timeline supports switching between two time display modes:
@@ -267,27 +288,6 @@ The timeline supports switching between two time display modes:
267288

268289
Click the clock icon button in the top-right corner of the timeline toolbar to toggle between modes.
269290

270-
## Tooltip
271-
272-
<img
273-
src="https://raw.githubusercontent.com/certinia/debug-log-analyzer/main/lana/assets/v1.18/lana-timeline-tooltip.png"
274-
alt="Tooltip showing detailed event information including event name, description, timestamps, duration, and row counts"
275-
style={{
276-
width: '50%', height:'auto', maxWidth:'400px'
277-
}}
278-
loading="lazy"/>
279-
280-
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.
281-
282-
The tooltip provides the following information:
283-
284-
- **Event Name** - e.g., `METHOD_ENTRY`, `EXECUTION_STARTED`, `SOQL_EXECUTION_BEGIN`
285-
- **Event Description** - Additional information about the event such as method name or SOQL query executed
286-
- **Timestamp** - The start and end timestamp for the given event which can be cross-referenced in the log file
287-
- **Time** - Wall-clock time of day for the event (e.g., `14:30:05.122 → 14:30:06.625`). Only shown when wall-clock data is available in the log.
288-
- **Duration** - Made up of **Total Time** (time spent in that event and its children) and **Self Time** (time directly spent in that event)
289-
- **Rows** - Shows **Total Rows** (rows from that event and its children) and **Self Rows** (rows directly from that event)
290-
291291
## Themes
292292

293293
The timeline supports multiple color themes for better visual clarity and personalization. The extension includes 19 built-in themes with improved contrast and readability.

‎log-viewer/src/features/timeline/optimised/FlameChart.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,13 @@ export class FlameChart<E extends EventNode = EventNode> {
307307
};
308308
this.axisRenderer = new MeshAxisRenderer(this.axisContainer, axisConfig);
309309
this.axisRenderer.setScreenSpaceContainer(this.uiContainer);
310+
if (editorColors) {
311+
this.axisRenderer.setColors(
312+
editorColors.lineNumberForeground,
313+
`#${editorColors.lineNumberForeground.toString(16).padStart(6, '0')}`,
314+
editorColors.widgetBackground,
315+
);
316+
}
310317
// No minimap offset needed - main timeline has its own canvas
311318
}
312319

0 commit comments

Comments
 (0)