<h2>Optimizations</h2>
<p>Here you can create optimized models. You can see all of them in the table below.
  When you click on the row, you can see the details of each optimization.
  When you click "Run" you can run tuning of given optimization.</p>
<table class="rounded">
  <tr>
    <td class="header">Optimization name</td>
    <td class="header">Optimization type</td>
    <td class="header">Precision</td>
    <td class="header">Dataset</td>
    <td class="header">Size</td>
    <td class="header">Created at</td>
    <td class="header">Last run</td>
    <td class="header">Duration</td>
    <td class="header">Status</td>
    <td class="header">Action</td>
  </tr>
  <tr [ngClass]="{'active': optimization.id === activeOptimizationId, 'pointer': true}"
    *ngFor="let optimization of optimizations" (click)="getOptimizationDetails(optimization.id)"
    matTooltip="Click to see details">
    <td class="cell">{{ optimization.name }}</td>
    <td class="cell">{{ optimization.optimization_type.name }}</td>
    <td class="cell">{{ optimization.precision.name }}</td>
    <td class="cell">{{ optimization.dataset.name }}</td>
    <td class="cell">{{ optimization.optimized_model?.size }} {{ optimization.duration ? 'MB' : null }}</td>
    <td class="cell">{{ optimization.created_at }}</td>
    <td class="cell">{{ optimization.last_run_at }}</td>
    <td class="cell">{{ optimization.duration }} {{ optimization.duration ? 's' : null }} </td>
    <td class="cell center" [matTooltip]="optimization['status']">
      <img *ngIf="optimization['status'] === 'success'" class="icon-button"
        src="./../../assets/010a-passed-completed-solid.svg">
      <img *ngIf="optimization['status'] === 'error' || optimization['status'] === 'failure'" class="icon-button"
        src="./../../assets/009a-close-solid.svg">
      <img *ngIf="optimization['status'] === null" class="icon-button" src="./../../assets/005a-help-solid-gray.svg">
      <mat-spinner style="margin:0 auto;" mode="indeterminate" matTooltip="Configuration is running"
        *ngIf="optimization['status'] === 'wip'" [diameter]="30">
      </mat-spinner>
    </td>
    <td class="center"><button mat-raised-button [matTooltip]="'Run tuning of this configuration'" color="accent"
        class="action-btn" [disabled]="optimization['status'] === 'wip'" (click)="executeOptimization(optimization.id)">
        <img src="./../../assets/088a-start-solid-white.svg">
        Run
      </button></td>
  </tr>
</table>

<button mat-raised-button class="create-new-btn" (click)="$event.stopPropagation();addOptimization()">
  <img src="./../../assets/008a-plus-solid-black.svg">
  Add new optimization
</button>

<br />
<br />
<br />
<br />

<ng-container *ngIf="optimizationDetails">
  <div class="container">
    <div class="item" *ngIf="optimizationDetails['tuning_details']">
      <h2>Tuning details</h2>
      <table class="rounded">
        <tr>
          <th>batch size</th>
          <td>{{ optimizationDetails['batch_size'] }}</td>
        </tr>
        <tr>
          <th>sampling size</th>
          <td>{{ optimizationDetails['sampling_size'] }}</td>
        </tr>
        <tr *ngFor="let detail of optimizationDetails['tuning_details'] | keyvalue">
          <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>
      </table>
    </div>

    <div class="item" *ngIf="optimizationDetails['optimized_model']">
      <h2>Model</h2>
      <table class="rounded">
        <ng-container *ngFor="let detail of optimizationDetails['optimized_model'] | keyvalue">
          <tr *ngIf="detail.value && !detail.key.includes('id')">
            <th>{{ detail.key | modelList }}</th>
            <td class="wrap" *ngIf="typeOf(detail.value) === 'string' || typeOf(detail.value) === 'number'">
              {{ detail.value }} {{ detail.key === 'size' ? 'MB' : null }}
            </td>
            <td *ngIf="typeOf(detail.value) === 'object' && detail.value">
              {{ detail.value.name ?? (detail.value | json) }}
            </td>
          </tr>
        </ng-container>
      </table>
    </div>
  </div>

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

  <ng-container *ngIf="historyData['data'] 
    && historyData['data']['last_tune_accuracy'] 
    && historyData['data']['history']
    && historyData['data']['history'].length > 1">
    <div class="item">
      <h2>Accuracy - tuning history</h2>
      <p>
        <ngx-charts-line-chart class="inline" (window:resize)="onResize()" [view]="viewLine" [scheme]="colorScheme"
          [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis"
          [yScaleMin]="yScaleMin" [yScaleMax]="yScaleMax" [results]="historyData['accuracy']"
          [xAxisTickFormatting]="axisFormat" [referenceLines]="accuracyReferenceLines" [showRefLines]="true"
          [showRefLabels]="true">
        </ngx-charts-line-chart>
      </p>
    </div>

    <div class="item">
      <h2>Duration - tuning history</h2>
      <p *ngIf="historyData['data']['baseline_performance']">
        <ngx-charts-line-chart class="inline" (window:resize)="onResize()" [view]="viewLine" [scheme]="colorScheme"
          [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxis]="xAxis" [yAxis]="yAxis"
          [results]="historyData['performance']" [xAxisTickFormatting]="axisFormat" [yAxisLabel]="'[ms]'">
        </ngx-charts-line-chart>
      </p>
    </div>
  </ng-container>
</ng-container>