@if (!hasFrames() && visualizing()) {
  <p class="info">There's no information to show.</p>
}

@if (hasFrames()) {
  <ng-recording-timeline-controls
    (exportProfile)="exportProfile.emit($event)"
    (filter)="setFilter($event)"
  />
  <ng-frame-selector [frames]="frames()" (selectFrames)="selectFrames.set($event.indexes)" />
}

@let frame = this.frame();

@if (hasFrames() && !frame) {
  <p class="info">Select a bar to preview a particular change detection cycle.</p>
} @else if (hasFrames() && frame) {
  <ng-visualizer-controls
    [record]="frame"
    [estimatedFrameRate]="currentFrameRate()"
    [(visualizationMode)]="visualizationMode"
    [(changeDetection)]="changeDetection"
  />
  <ng-recording-visualizer
    [visualizationMode]="visualizationMode()"
    [frame]="frame"
    [changeDetection]="changeDetection()"
  />
}