<div class="l-wrapper">
    <cdk-virtual-scroll-viewport itemSize="20" style="width: 100%; height: 100%;">    
        <div class="l-timeline-bar" *cdkVirtualFor="let call of data; let i = index" [ngStyle]="getLineStyle(call)">
            <div class="clickable-bar" [class.l-timeline-bar-selected]="isSelectedRow(i)" [ngStyle]="getStyles(call)" (click)="onSelectCall(i, call)">
                <div class="l-timeline-bar-frame">
                    <span>
                        <span class="before"><i class="fas fa-arrows-alt-h"></i> <span class="startTime">{{getStartTime(call)}}</span>ms</span>
                        <span class="nameType" *ngIf="showApplicationName(call, i)">[{{call[keyIndex.applicationName]}}] / {{call[keyIndex.apiType]}} ({{call[keyIndex.end] - call[keyIndex.begin]}}ms)</span>
                        <span class="nameType" *ngIf="!showApplicationName(call, i)">/ {{call[keyIndex.apiType]}} ({{call[keyIndex.end] - call[keyIndex.begin]}}ms)</span>
                        <span class="after">( <i class="fas fa-arrows-alt-h"></i> <span class="startTime">{{getStartTime(call)}}</span>ms )</span>
                    </span>
                </div>
            </div>
        </div>
    </cdk-virtual-scroll-viewport>
</div>
