Population based training UI

cmd/new-ui/v1beta1/main.go

@@ -59,6 +59,7 @@ func main() {
 
 	http.HandleFunc("/katib/fetch_hp_job_info/", kuh.FetchHPJobInfo)
 	http.HandleFunc("/katib/fetch_hp_job_trial_info/", kuh.FetchHPJobTrialInfo)
+	http.HandleFunc("/katib/fetch_hp_job_label_info/", kuh.FetchHPJobLabelInfo)
 	http.HandleFunc("/katib/fetch_nas_job_info/", kuh.FetchNASJobInfo)
 
 	http.HandleFunc("/katib/fetch_trial_templates/", kuh.FetchTrialTemplates)

pkg/new-ui/v1beta1/frontend/src/app/constants/algorithms-settings.const.ts

@@ -242,6 +242,29 @@ export const DartsSettings: AlgorithmSetting[] = [
   },
 ];
 
+export const PbtSettings: AlgorithmSetting[] = [
+  {
+    name: 'suggestion_trial_dir',
+    value: '/var/log/katib/checkpoints/',
+    type: AlgorithmSettingType.STRING,
+  },
+  {
+    name: 'n_population',
+    value: 40,
+    type: AlgorithmSettingType.INTEGER,
+  },
+  {
+    name: 'resample_probability',
+    value: null,
+    type: AlgorithmSettingType.FLOAT,
+  },
+  {
+    name: 'truncation_threshold',
+    value: 0.2,
+    type: AlgorithmSettingType.FLOAT,
+  },
+];
+
 export const EarlyStoppingSettings: AlgorithmSetting[] = [
   {
     name: 'min_trials_required',
@@ -271,4 +294,5 @@ export const AlgorithmSettingsMap: { [key: string]: AlgorithmSetting[] } = {
   [AlgorithmsEnum.SOBOL]: SOBOLSettings,
   [AlgorithmsEnum.ENAS]: ENASSettings,
   [AlgorithmsEnum.DARTS]: DartsSettings,
+  [AlgorithmsEnum.PBT]: PbtSettings,
 };

pkg/new-ui/v1beta1/frontend/src/app/constants/algorithms-types.const.ts

@@ -12,6 +12,7 @@ export const AlgorithmNames = {
   [AlgorithmsEnum.MULTIVARIATE_TPE]: 'Multivariate Tree of Parzen Estimators',
   [AlgorithmsEnum.CMAES]: 'Covariance Matrix Adaptation: Evolution Strategy',
   [AlgorithmsEnum.SOBOL]: 'Sobol Quasirandom Sequence',
+  [AlgorithmsEnum.PBT]: 'Population Based Training',
 };
 
 export const NasAlgorithmNames = {

pkg/new-ui/v1beta1/frontend/src/app/enumerations/algorithms.enum.ts

@@ -9,6 +9,7 @@ export enum AlgorithmsEnum {
   SOBOL = 'sobol',
   ENAS = 'enas',
   DARTS = 'darts',
+  PBT = 'pbt',
 }
 
 export enum EarlyStoppingAlgorithmsEnum {

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"
+          [labelCsv]="labelCsv"
+          [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;
+  labelCsv: 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
+      .getExperimentLabelInfo(this.name, this.namespace)
+      .subscribe(response => {
+        this.labelCsv = 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,22 @@
+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,21 @@
+<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;
+}