<h2>Benchmarks</h2>
<p>Here you can add and run benchmarks. For each optimization you can add multiple benchmarks with different parameters.
  When you click on the row, you can see the details of each benchmark. When you click on "Run", you execute the
  benchmark.
  When the benchmarks are executed, you can check the checkbox in "Show on chart" column, then click "Compare selected"
  and see the comparison of the
  results.</p>
<table class="rounded">
  <tr>
    <td class="header">Name</td>
    <td class="header">Model</td>
    <td class="header">Mode</td>
    <td class="header">Precision</td>
    <td class="header">Dataset</td>
    <td class="header">Batch size</td>
    <td class="header">Cores per instance</td>
    <td class="header">Number of instances</td>
    <td class="header">Accuracy</td>
    <td class="header">Throughput</td>
    <td class="header">Status</td>
    <td class="header">Action</td>
    <td class="header">Show on chart</td>
  </tr>
  <tr [ngClass]="{'active': benchmark.id === activeBenchmarkId, 'pointer': true}" *ngFor="let benchmark of benchmarks"
    (click)="getBenchmarkDetails(benchmark.id)" matTooltip="Click to see details">
    <td class="cell">{{ benchmark.name }} </td>
    <td class="cell">{{ benchmark.model.name }} </td>
    <td class="cell">{{ benchmark.mode }} </td>
    <td class="cell">{{ benchmark.model.precision.name }}</td>
    <td class="cell">{{ benchmark.dataset.name }}</td>
    <td class="cell align-right">{{ benchmark.batch_size }}</td>
    <td class="cell align-right">{{ benchmark.cores_per_instance }}</td>
    <td class="cell align-right">{{ benchmark.number_of_instance }}</td>
    <td class="cell align-right">
      {{ (benchmark.result?.accuracy || benchmark.result?.accuracy === 0) ? benchmark.result?.accuracy + '%' : '' }}
    </td>
    <td class="cell align-right">
      {{ benchmark.result?.performance ? (benchmark.result?.performance | number: '1.2-2') + ' FPS' : '' }}
    </td>
    <td class="cell center" [matTooltip]="benchmark['status']">
      <img *ngIf="benchmark['status'] === 'success'" class="icon-button"
        src="./../../assets/010a-passed-completed-solid.svg">
      <img *ngIf="benchmark['status'] === 'error' || benchmark['status'] === 'failure'" class="icon-button"
        src="./../../assets/009a-close-solid.svg">
      <img *ngIf="benchmark['status'] === null" class="icon-button" src="./../../assets/005a-help-solid-gray.svg">
      <mat-spinner style="margin:0 auto;" mode="indeterminate" matTooltip="Benchmark is running"
        *ngIf="benchmark['status'] === 'wip'" [diameter]="30">
      </mat-spinner>
    </td>
    <td>
      <button mat-raised-button [matTooltip]="'Run this benchmark'" color="accent" class="action-btn"
        [disabled]="benchmark['status'] === 'wip'" (click)="$event.stopPropagation();executeBenchmark(benchmark.id)">
        <img src="./../../assets/088a-start-solid-white.svg">
        Run
      </button>
    </td>
    <td class="center">
      <mat-checkbox [(ngModel)]="comparison[benchmark.id]" (click)="$event.stopPropagation();"></mat-checkbox>
    </td>
  </tr>
</table>

<button mat-raised-button class="compare-btn" (click)="compare()">
  <img src="./../../assets/292-growth-increase.svg">
  Compare selected
</button>
<button mat-raised-button class="create-new-btn" (click)="addBenchmark()">
  <img src="./../../assets/008a-plus-solid-black.svg">
  Add new benchmark
</button>

<br>
<br>
<br>
<br>

<div class="container">
  <div class="item" *ngIf="showComparison">
    <button mat-button class="close-button" (click)="showComparison = false" matTooltip="Close">&#x2573;</button>
    <h2>Throughput comparison</h2>
    <p>
      <ngx-charts-bar-vertical-2d *ngIf="throughputData" [view]="view" [scheme]="customColor"
        [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis"
        [results]="throughputData">
      </ngx-charts-bar-vertical-2d>
    </p>
    <ngx-charts-legend class="chart-legend" [data]="throughputLegend" [title]="'Legend'" [colors]="throughputColors">
    </ngx-charts-legend>
  </div>

  <div class="item" *ngIf="showComparison">
    <button mat-button class="close-button" (click)="showComparison = false" matTooltip="Close">&#x2573;</button>
    <h2>Accuracy comparison</h2>
    <p>
      <ngx-charts-bar-vertical-2d *ngIf="accuracyData" [view]="view" [scheme]="customColor"
        [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis"
        [results]="accuracyData">
      </ngx-charts-bar-vertical-2d>
    </p>
    <ngx-charts-legend class="chart-legend" [data]="accuracyLegend" [title]="'Legend'" [colors]="accuracyColors">
    </ngx-charts-legend>
  </div>
</div>

<ng-container *ngIf="benchmarkDetails">
  <div class="container">
    <div class="item">
      <h2>Results</h2>
      <table class="comparison-table" *ngIf="benchmarkDetails.result">
        <tr>
          <td class="cell">
            <p class="big-number">
              {{ benchmarkDetails.result.accuracy !== null ? benchmarkDetails.result.accuracy + '%' : '-' }}
            </p>
            <p class="label">
              Accuracy
            </p>
          </td>
          <td class="cell">
            <p class="big-number">
              {{ benchmarkDetails.result.performance ? (benchmarkDetails.result.performance | number: '1.1-1') + ' FPS'
              : '-' }}
            </p>
            <p class="label">
              Performance
            </p>
          </td>
          <td class="cell">
            <p class="big-number">
              {{benchmarkDetails.duration ? benchmarkDetails.duration + ' s' : '-' }}
            </p>
            <p class="label">
              Duration
            </p>
          </td>
        </tr>
      </table>
      <p *ngIf="!benchmarkDetails.result">
        Run benchmark to get accuracy and performance results.
      </p>
    </div>

    <div class="item">
      <h2>Dataset</h2>
      <table class="rounded">
        <ng-container *ngFor="let detail of benchmarkDetails['dataset'] | keyvalue">
          <tr *ngIf="detail.value && !detail.key.includes('id')">
            <th>{{ detail.key | modelList }}</th>
            <td *ngIf="typeOf(detail.value) === 'string' || typeOf(detail.value) === 'number'">
              {{ detail.value }}
            </td>
            <td *ngIf="typeOf(detail.value) === 'object' && detail.value">
              {{ detail.value | json }}
            </td>
          </tr>
        </ng-container>
        <tr>
          <th>batch size</th>
          <td>{{ benchmarkDetails['batch_size'] }}</td>
        </tr>
        <tr>
          <th>iterations</th>
          <td>{{ benchmarkDetails['iterations'] }}</td>
        </tr>
        <tr>
          <th>sampling size</th>
          <td>{{ benchmarkDetails['sampling_size'] }}</td>
        </tr>
      </table>
    </div>

    <div class="item">
      <h2>Model</h2>
      <table class="rounded">
        <ng-container *ngFor="let detail of benchmarkDetails['model'] | keyvalue">
          <tr *ngIf="detail.value && !detail.key.includes('id') && !detail.key.includes('supports')">
            <th>{{ detail.key | modelList }}</th>
            <td class="wrap" *ngIf="typeOf(detail.value) === 'string' || typeOf(detail.value) === 'number'">
              {{ detail.value }}
            </td>
            <td *ngIf="typeOf(detail.value) === 'object' && detail.value">
              {{ detail.value.name ?? (detail.value | json) }}
            </td>
            <td>
              <img *ngIf="detail.key.includes('path')" class="icon-button right"
                src="./../../assets/146a-copy-solid.svg" matTooltip="Copy path to clipboard" matTooltipPosition="after"
                (click)="copyToClipboard(detail.value)">
            </td>
          </tr>
        </ng-container>
      </table>
    </div>

    <div class="item" *ngIf="benchmarkDetails['log_path']">
      <h2>Other</h2>
      <table class="rounded">
        <tr>
          <th>created at</th>
          <td>{{ benchmarkDetails['created_at'] }}</td>
        </tr>
        <tr>
          <th>last run at</th>
          <td>{{ benchmarkDetails['last_run_at'] }}</td>
        </tr>
        <tr>
          <th>config path</th>
          <td class="pointer">
            <a *ngIf="benchmarkDetails['config_path']" class="file-button"
              href="{{ apiBaseUrl }}api/benchmark/config.yaml?id={{ benchmarkDetails.id }}&token={{ token }}"
              target="_blank">
              Show config</a>
          </td>
        </tr>
        <tr>
          <th>log path</th>
          <td class="pointer">
            <a *ngIf="benchmarkDetails['log_path']" class="file-button"
              href="{{ apiBaseUrl }}api/benchmark/output.log?id={{ benchmarkDetails.id}}&token={{ token }}"
              target="_blank">
              Show output</a>
          </td>
        </tr>
        <tr>
          <th>execution command</th>
          <td class="pointer" (click)="copyToClipboard(benchmarkDetails['execution_command'])"
            [matTooltip]="'Copy execution command to clipboard'">
            {{ benchmarkDetails['execution_command'] }}
          </td>
        </tr>
      </table>
    </div>
  </div>
</ng-container>