<div [hidden]="!hasHostOpTables">
  <div class="mat-headline">Host-vs-TPU step analysis</div>
  <table>
    <tr>
      <td>
        Op:
        <mat-form-field>
          <mat-select (selectionChange)="updateHostOpSelection($event.value)">
            <mat-option *ngFor="let opChoice of allHostOpChoices" [value]="opChoice">
              {{ opChoice }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </td>
      <td>
        Hostname:
        <mat-form-field>
          <mat-select (selectionChange)="updateHostnameSelection($event.value)">
            <mat-option *ngFor="let hostnameChoice of allHostnameChoices" [value]="hostnameChoice">
              {{ hostnameChoice }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </td>
      <td>
        Core:
        <mat-form-field>
          <mat-select (selectionChange)="updateCoreSelection($event.value)">
            <mat-option *ngFor="let coreChoice of allCoreChoices" [value]="coreChoice">
              {{ coreChoice }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </td>
    </tr>
  </table>
  <chart chartType="ScatterChart" [dataInfo]="dataInfo" [hidden]="!showChart"></chart>
  <mat-divider></mat-divider>
</div>
