feat: add pbt tab to experiment view to enable more suitable inspection of HP sweep

Author: a9p

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.html

@@ -60,6 +60,13 @@
           [experimentJson]="experimentDetails"
         ></app-experiment-yaml>
       </mat-tab>
+      <mat-tab label="PBT">
+        <app-experiment-pbt-tab
+          [experiment]="experimentDetails"
+          [annotationsCsv]="annotationsCsv"
+          [experimentTrialsCsv]="experimentTrialsCsv"
+        ></app-experiment-pbt-tab>
+      </mat-tab>
     </mat-tab-group>
   </div>
 </ng-template>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.component.ts

@@ -30,6 +30,7 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
   columns: string[] = [];
   details: string[][] = [];
   experimentTrialsCsv: string;
+  annotationsCsv: string;
   hoveredTrial: number;
   experimentDetails: ExperimentK8s;
   showGraph: boolean;
@@ -94,6 +95,11 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
         this.details = this.parseTrialsDetails(data.details);
         this.showGraph = true;
       });
+    this.backendService
+      .getExperimentAnnotationsInfo(this.name, this.namespace)
+      .subscribe(response => {
+        this.annotationsCsv = response;
+      });
     this.backendService
       .getExperiment(this.name, this.namespace)
       .subscribe((response: ExperimentK8s) => {

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/experiment-details.module.ts

@@ -16,6 +16,7 @@ import { ExperimentOverviewModule } from './overview/experiment-overview.module'
 import { ExperimentDetailsTabModule } from './details/experiment-details-tab.module';
 import { TrialsGraphModule } from './trials-graph/trials-graph.module';
 import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
+import { PbtTabModule } from './pbt/pbt-tab-loader.module';
 
 @NgModule({
   declarations: [ExperimentDetailsComponent],
@@ -33,6 +34,7 @@ import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
     MatProgressSpinnerModule,
     ExperimentYamlModule,
     TitleActionsToolbarModule,
+    PbtTabModule,
   ],
   exports: [ExperimentDetailsComponent],
 })

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/pbt/pbt-tab-loader.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { PbtTabComponent } from './pbt-tab.component';
+
+@NgModule({
+  declarations: [PbtTabComponent],
+  imports: [CommonModule, FormsModule, MatFormFieldModule, MatSelectModule, MatCheckboxModule],
+  exports: [PbtTabComponent],
+})
+export class PbtTabModule {}

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/pbt/pbt-tab.component.html

@@ -0,0 +1,18 @@
+<div class="pbt-wrapper">
+
+  <div class="pbt-options-wrapper">
+    <mat-form-field appearance="fill" class="pbt-option">
+      <mat-label>Y-Axis</mat-label>
+      <mat-select [(ngModel)]="selectedName" (ngModelChange)="onDropdownChange()">
+        <mat-option *ngFor="let name of selectableNames" [value]="name">
+          {{name}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <mat-checkbox [(ngModel)]="displayTrace" (ngModelChange)="onTraceChange()">Display Seed Traces</mat-checkbox>
+  </div>
+
+  <div #pbtGraph id="pbt-graph" class="d3-tab-graph"></div>
+
+</div>

pkg/new-ui/v1beta1/frontend/src/app/pages/experiment-details/pbt/pbt-tab.component.scss

@@ -0,0 +1,48 @@
+:host {
+  display: block;
+}
+
+.pbt-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.pbt-options-wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.pbt-option {
+  margin: 10px
+}
+
+.d3-tab-graph {
+  width: 400px;
+  text-align: center;
+
+  @media (min-width: 768px) {
+    width: 700px;
+  }
+
+  @media (min-width: 1024px) {
+    width: 1000px;
+  }
+
+  @media (min-width: 1400px) {
+    width: 1300px;
+  }
+
+  @media (min-width: 1650px) {
+    width: 1600px;
+  }
+
+  @media (min-width: 2000px) {
+    width: 1900px;
+  }
+
+  height: 600px;
+}