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:

Ctrl/Cmd + click on event opens all messages for selected SIP transaction

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.

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. All Legs are grouped by leg type:

SIP
Media
DTMF

The selection affects which legs are shown on the call flow diagram and which legs are exported as a PNG and PCAP from the Export dropdown. Also, the control shows info about leg’s Call ID on hover.

Call Flow Sidebar Display Settings Control

Selection Logic

Action	Result
Single click on a selected leg	Leg is deselected.
Single click on a non-selected leg	Leg is selected.
Single click on a selected group	All legs of this group are deselected.
Single click on a partially selected group	All legs of this group are selected.
Single click on a non-selected group	All legs of this group are selected.
Ctrl/Cmd + click on a leg	Only this leg is selected. All other will be deselected.
Ctrl/Cmd + click on a group	Only legs of this group are selected. All other will be deselected.

Action

Result

Single click on a selected leg

Leg is deselected.

Single click on a non-selected leg

Leg is selected.

Single click on a selected group

All legs of this group are deselected.

Single click on a partially selected group

All legs of this group are selected.

Single click on a non-selected group

All legs of this group are selected.

Ctrl/Cmd + click on a leg

Only this leg is selected. All other will be deselected.

Ctrl/Cmd + click on a group

Only legs of this group are selected. All other will be deselected.

If no leg will be selected, previous selection choice will be applied.

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.