Timeline diagram#2887
Open
ramonsmits wants to merge 5 commits into
Open
Conversation
ramonsmits
force-pushed
the
feature/timeline-diagram
branch
from
754f91b to
344f8d1
Compare
Move canvas context from module-level singleton to function-local variable in measureLabelWidth to satisfy PR review checklist.
Member
Author
|
Regarding the checklist for: No module-level state is being introduced.Made a change in f712fd9: the measureCtx singleton (let measureCtx: CanvasRenderingContext2D | null = null) was module-level mutable state. Moved to a function-local const inside measureLabelWidth(). All reactive state lives in TimelineDiagramStore (Pinia). |
johnsimons
reviewed
Mar 29, 2026
Comment on lines
+94
to
+101
| <div class="toolbar-controls"> | ||
| <button class="toolbar-btn" :class="{ active: useUtc }" :title="useUtc ? 'Showing UTC time' : 'Showing local time'" @click="store.toggleUtc()"> | ||
| {{ useUtc ? "UTC" : "Local" }} | ||
| </button> | ||
| <button class="toolbar-btn" :class="{ active: showDeliveryTime }" title="Show delivery time (queue wait + network transit)" @click="store.toggleDeliveryTime()">Delivery time</button> | ||
| <button class="toolbar-btn" :class="{ active: showConnections }" title="Show connections between related messages" @click="store.toggleConnections()">Connections</button> | ||
| <button v-if="isZoomed" class="toolbar-btn" @click="store.resetZoom()">Reset zoom</button> | ||
| </div> |
Member
There was a problem hiding this comment.
@ramonsmits I think there are already patterns in the codebase about toolbar buttons.
It may be good to review these and make sure we are not creating another pattern here.
My instinct is to stick to the bootstrapper button; there's no need to come up with new CSS for these buttons.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new “Timeline” visualization for message conversations (trace-style view) as an alternative to the existing sequence diagram in the Message view.
Changes:
- Introduces a new Pinia store to build timeline state (bars/rows), manage zoom, and handle navigation/tooltip state.
- Adds a timeline model layer for building tree-structured rows and generating axis ticks/formatting helpers.
- Adds a set of Vue components to render the timeline (axis, endpoints/labels, bars, connections, minimap) and wires it into
MessageViewas a new tab.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Frontend/src/stores/TimelineDiagramStore.ts | New Pinia store managing timeline data, zoom, local preferences, tooltip, and navigation. |
| src/Frontend/src/resources/TimelineDiagram/TimelineModel.ts | New model utilities/types for transforming conversation messages into timeline rows/bars and tick generation. |
| src/Frontend/src/components/messages/TimelineDiagram/TimelineDiagram.vue | Main timeline view container: layout, toolbar, minimap, tooltip, wheel zoom integration. |
| src/Frontend/src/components/messages/TimelineDiagram/TimelineMinimap.vue | Minimap overview + drag-to-pan zoom window. |
| src/Frontend/src/components/messages/TimelineDiagram/TimelineEndpoints.vue | Renders row labels (type/endpoint) including tree guides and row click navigation. |
| src/Frontend/src/components/messages/TimelineDiagram/TimelineBars.vue | Renders delivery/processing bars and hover interactions/tooltip updates. |
| src/Frontend/src/components/messages/TimelineDiagram/TimelineConnections.vue | Renders dashed “related message” connector lines. |
| src/Frontend/src/components/messages/TimelineDiagram/TimelineAxis.vue | Renders top elapsed-time ticks and bottom wall-clock ticks/gridlines. |
| src/Frontend/src/components/messages/MessageView.vue | Adds the new “Timeline” tab to the message view. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Toolbar buttons now use Bootstrap btn/btn-secondary/btn-sm classes (matches SagaDiagram.vue convention) instead of custom .toolbar-btn. - Selection highlight now reacts to selectedId changes: drop the baked-in TimelineBar.isSelected flag and compute selection in consumers (TimelineBars, TimelineMinimap) against the store's selectedId getter. Fixes stale highlight when navigating between sibling messages within the same conversation. - TimelineMinimap clears document mousemove/mouseup listeners on unmount to avoid leaking handlers when the component is torn down mid-drag.
- TimelineModel: stop pushing the root's continuation flag into its children's continuations array. The extra entry caused the v-line for a not-last root to be drawn on top of the descendants' branch column, producing a double vertical line at the parent column. - TimelineDiagramStore: reset bars/rows/zoom/tooltip/highlight state when the watched conversation data becomes empty so a failed or cleared fetch doesn't leave stale UI behind. - Mark window.open() with noopener,noreferrer for the cross-tab navigation path. - Extract pickTickInterval helper shared by generateTimeTicks and generateWallClockTicks, with a whole-hour fallback so conversations longer than maxTicks hours don't produce an unbounded tick set. - Wrap localStorage access in safeGetItem/safeSetItem helpers so privacy/quota errors don't break the timeline (matches PlatformCapabilitiesStore/RemoteInstancesStore conventions). - Replace v-bind(MINIMAP_HEIGHT + 'px') with a literal height to avoid the prettier quote-style warning.
- CI's stricter TS pipeline rejected the default Message import as a value when it's used only as a type (TS1484). Mark it inline as a type-only import while keeping the enums (MessageStatus, MessageIntent) as value imports. - TimelineAxis.vue: collapse the ticks computed onto one line to satisfy prettier; lint was blocking the Windows job.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a timeline view as an alternative to the sequence diagram. This is based on the traces view of jaeger, application insights, zipkin, etc.
However, this nicely only shows the messages processing durations which is a nice highlevel view. It can show the queue time and also see how message are changed if needed.
It also has a tooltip showing a bit of message information. Messages are clickable and will navigate to that message.
Reviewer Checklist