Let's Visualize a Workflow

As a member of the Frontend team here at Temporal, one of the things constantly on our minds is figuring out how to simplify the complexity of Temporal. Workflows can be very basic or incredibly complicated depending on the use case, but we knew we needed a way to visualize a Workflow in the UI that everyone could understand. Through collaboration with our amazing design colleagues and users, we have fulfilled this need with our new Timeline view. Whether you’re running your own cluster or using our Temporal Cloud service, you can begin using it right away.

The Timeline represents the flow of Events in time as your Workflow is executing. It could be a series of sequential Events, or many all at once. There could be large gaps of time between them, or milliseconds. Some could fail or terminate or retry, some could complete as expected. All of these details can be quickly understood from the Timeline at a glance.

Like the Compact view in the UI, we leverage Event Groups —a grouping of related Events— in the Timeline to show what's happening in a Workflow. For example, the three related Events of ActivityTaskScheduled, ActivityTaskStarted, and ActivityTaskCompleted produce a single Activity row that spans the duration of the activity. A tooltip is shown when hovering over the span to show the exact start and end times as well as the duration up to the millisecond. Single Events such as Markers and Signals show as points on the Timeline. The first row of the Timeline represents the Workflow Execution and provides a sense of the total Workflow duration.

The color of the span indicates its outcome, such as green for Completed and red for Failed. The position of the spans also gives a sense of parallelism of Events, showing what's happening at the same time.

We also show a retry icon with the current attempt number for Activities that are attempting to retry.

Navigating and Filtering the Timeline

We provide several options for finding exactly what you want in the Timeline. First is the ability to scroll vertically to view additional Events and horizontally to view across time. Second is the ability to zoom in and out with either a pinch gesture or by clicking the +/- buttons. We limit the level of zooming out so you don't get lost in the sea of time. If you ever want to return to the initial zoom level, just click the Fit button.

By using the Event Type filter in the Event History table, you can also filter what Events you want to see in the Timeline.

At any point, you can close the Timeline accordion to hide it from view. Your preference for keeping it open or closed will persist for that device.

How We Built It

The Timeline is built using the open-source library vis-timeline. We picked this library because it provides a lot of customization options as well as being highly performant for large numbers of Events. We customized it with our own HTML templates and styles to work with Svelte.

What's Next

Future improvements and ideas we are considering:

• Fullscreen support
• Multi-select Event Type filtering
• Grouping parallel Events
• Additional information in tooltips to provide more context on what is happening
• Include Parent Workflow Execution above Workflow Execution
• Linking to Events in the Event History table for a detailed view
• Additional Events such as Cancellation and Termination requests

Give it a try and let us know what you think! We love feedback and enjoy hearing from our user community on how we can improve.