Call Flow Diagram

Overview

Here is an example of the SIP3 Call Flow Diagram which allows to analyze a call as a sequence diagram. It’s the key feature of a Call Details Widget.

The diagram visualizes cryptic information about the call and represents it as a combination of call events between participants.

Events

Both SIP Events and Media Events are placed in chronological order.

Keep in mind, that each Media Event stay in place on scroll between its start and finish timestamp in the call.

SIP Events

Each SIP Event has short info about its method and timestamp. If you hover a SIP Event, all sip events, that belongs to the same transaction highlights.

The more detailed info is shown on event click and looks like this:

Each SIP Event timestamp is clickable and cycles through Absolute, Delta and Relative time on each mouse click.

There is another way to change timestamps settings from call flow sidebar menu, and it’s discussed later in this manual.

Media Events

Each Media Event has info about its codecs and r-factor value.

The Media Quality Widget is shown on event click.

Zoom Controls

The Call Flow interface has zoom controls. Plus and minus buttons allow zooming in and zooming out respectively.

You could control zoom level with Ctrl + scroll (with Touchpad or Mouse Wheel).

Call Flow Sidebar

Also, the Call Flow interface has sidebar, where all main controls live.

The Call Flow sidebar has a Display settings and Time settings control.

All settings and controls are going to be placed inside the call flow sidebar. Follow us on twitter to keep up to date with latest and greatest additions to the controls of the call flow diagram.

Display settings

The Display Settings control allow selecting different legs. It affects which legs are shown on the call flow diagram and which legs are exported as a PNG and PCAP from the Export … to … dropdown. Also, the control shows info about leg’s participants on hover.

Selection logic

Action	Result
Single click on any leg	Only this leg is selected.
Single click on a selected leg	Selection resets. All legs are selected.
Ctrl click on a non-selected leg	All previously selected legs and this one is selected.
Ctrl click on a selected leg	Legs is deselected. All previously selected legs, except this one is selected.

Action

Result

Single click on any leg

Only this leg is selected.

Single click on a selected leg

Selection resets. All legs are selected.

Ctrl click on a non-selected leg

All previously selected legs and this one is selected.

Ctrl click on a selected leg

Legs is deselected. All previously selected legs, except this one is selected.

Time settings

The Time Settings control allow changing timestamps type of all events, except the first and the last one.

Time setting	Explanation
Absolute time	A timestamps displays the "real" time.
Delta time	A timestamp of any given event displays the time from previous event.
Relative time	A timestamp of any given event displays time from the first event.

Time setting

Explanation

Absolute time

A timestamps displays the "real" time.

Delta time

A timestamp of any given event displays the time from previous event.

Relative time

A timestamp of any given event displays time from the first event.