From 789da8743b15b15cd7a48691d68cdbec49b27dea Mon Sep 17 00:00:00 2001
From: Marie Salm <marie.salm@iaas.uni-stuttgart.de>
Date: Thu, 11 Jul 2024 12:10:05 +0200
Subject: [PATCH] expand analysis dialog

---
 .../components/algorithms/algorithm.module.ts |   6 +
 .../add-new-analysis-dialog.component.html    | 142 ++++++++--
 .../add-new-analysis-dialog.component.scss    |  30 ++
 .../add-new-analysis-dialog.component.ts      | 264 +++++++++++++++++-
 4 files changed, 412 insertions(+), 30 deletions(-)

diff --git a/src/app/components/algorithms/algorithm.module.ts b/src/app/components/algorithms/algorithm.module.ts
index d6826c04..1a97b6fc 100644
--- a/src/app/components/algorithms/algorithm.module.ts
+++ b/src/app/components/algorithms/algorithm.module.ts
@@ -20,6 +20,9 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { BrowserModule } from '@angular/platform-browser';
 import { MatSortModule } from '@angular/material/sort';
 import { MatBadgeModule } from '@angular/material/badge';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatSliderModule } from '@angular/material/slider';
 import { NavigationBreadcrumbModule } from '../generics/navigation-breadcrumb/navigation-breadcrumb.module';
 import { GenericsModule } from '../generics/generics.module';
 import { ComputeResourcePropertyModule } from '../compute-resource-property/compute-resource-property.module';
@@ -89,6 +92,9 @@ import { CompareVersionDialogComponent } from './dialogs/compare-version-dialog.
     MatSortModule,
     QcAtlasUiFeatureToggleModule,
     MatBadgeModule,
+    MatCheckboxModule,
+    MatExpansionModule,
+    MatSliderModule,
   ],
   exports: [
     AlgorithmListComponent,
diff --git a/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.html b/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.html
index 377fd06e..acfc6956 100644
--- a/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.html
+++ b/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.html
@@ -2,6 +2,7 @@
     <h1 mat-dialog-title>{{data.title}}</h1>
     <div mat-dialog-content>
         <form [formGroup]="addNewAnalysisForm">
+            <span>Define parameters:</span><br>
             <div formArrayName="params">
                 <div *ngFor="let param of parameters; let i = index" [formGroupName]="i">
                     <mat-form-field class="input-field">
@@ -16,25 +17,134 @@ <h1 mat-dialog-title>{{data.title}}</h1>
                 </div>
             </div>
 
-            <mat-form-field class="input-field">
-                <mat-label>Cloud Service</mat-label>
-                <mat-select
-                        formControlName="cloudService"
-                >
-                    <mat-option *ngFor="let cs of cloudServices" [value]="cs.name">
-                        {{ cs.name }}
-                    </mat-option>
-                </mat-select>
+            <span>Select vendor:</span><br>
+            <mat-checkbox color="primary" [checked]="ibmqEnabled"
+                          (change)="setIbmqEnabled($event.checked)">IBMQ
+            </mat-checkbox>
+            <mat-form-field class="input-field" *ngIf="ibmqEnabled">
+                <mat-label>IBMQ Token</mat-label>
+                <input type="password" id="ibmqToken" formControlName="ibmqToken" matInput>
             </mat-form-field>
-
-            <mat-form-field class="input-field" [hidden]="true">
-                <mat-label>Number of shots (for later execution)</mat-label>
-                <input matInput pattern="[0-9]+" formControlName="shotCount"/>
+            <br>
+            <mat-checkbox color="primary" [checked]="ionqEnabled"
+                          (change)="setIonqEnabled($event.checked)">IonQ
+            </mat-checkbox>
+            <mat-form-field class="input-field" *ngIf="ionqEnabled">
+                <mat-label>IonQ Token</mat-label>
+                <input type="password" id="ionqToken" formControlName="ionqToken" matInput>
+            </mat-form-field>
+            <br>
+            <mat-checkbox color="primary" [checked]="awsEnabled"
+                          (change)="setAwsEnabled($event.checked)">AWS Braket
+            </mat-checkbox>
+            <mat-form-field class="input-field" *ngIf="awsEnabled">
+                <mat-label>AWS Access Key</mat-label>
+                <input type="password" id="awsToken" formControlName="awsToken" matInput>
             </mat-form-field>
+            <mat-form-field class="input-field" *ngIf="awsEnabled">
+                <mat-label>AWS Secret Key</mat-label>
+                <input type="password" id="awsSecretToken" formControlName="awsSecretToken" matInput>
+            </mat-form-field>
+            <br>
+            <span>Select preferences:</span><br>
+            <mat-checkbox color="primary" [checked]="shortWaitingTimeEnabled"
+                          (change)="setWaitingTimeEnabled($event.checked)">Short Waiting Time
+            </mat-checkbox>
+            <mat-checkbox color="primary" [checked]="stableExecutionResultsEnabled"
+                          (change)="setStableExecutionResultsEnabled($event.checked)">Precise Execution
+                Results
+            </mat-checkbox>
+            <mat-expansion-panel *ngIf="stableExecutionResultsEnabled"
+                                 (opened)="advancedSettingsOpen = true"
+                                 (closed)="advancedSettingsOpen = false"
+                                 class="advancedSettings">
+
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        Advanced settings
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+
+                <mat-form-field class="input-field">
+                    <mat-label>Prediction Algorithm to estimate Execution Result Precision</mat-label>
+                    <mat-select formControlName="predictionAlgorithm"
+                                (selectionChange)="setPredictionAlgorithm($event.value)">
+                        <mat-option [value]="'extra_trees_regressor'">Extra Trees Regressor</mat-option>
+                        <mat-option [value]="'gradient_boosting_regressor'">Gradient Boostig Regressor</mat-option>
+                        <mat-option [value]="'random_forest_regressor'">Random Forest Regressor</mat-option>
+                        <mat-option [value]="'decision_tree_regressor'">Decision Tree Regressor</mat-option>
+                        <mat-option [value]="'hist_gradient_boosting_regressor'">Hist Gradient Boosting Regressor
+                        </mat-option>
+                        <mat-option [value]="'nu_svr'">Nu SVR</mat-option>
+                        <mat-option [value]="'k_neighbors_regressor'">K Neighbors Regressor</mat-option>
+                        <mat-option [value]="'theil_sen_regressor'">Theil Sen Regressor</mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field class="input-field">
+                    <mat-label>Meta Optimizer</mat-label>
+                    <mat-select formControlName="metaOptimizer"
+                                (selectionChange)="setMetaOptimizer($event.value)">
+                        <mat-option [value]="'ada_boost_regressor'">Ada Boost Regressor</mat-option>
+                        <mat-option [value]="'bagging_regressor'">Bagging Regressor</mat-option>
+                        <mat-option [value]="'none'">-</mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </mat-expansion-panel>
+            <br *ngIf="shortWaitingTimeEnabled && stableExecutionResultsEnabled">
+            <span *ngIf="shortWaitingTimeEnabled && stableExecutionResultsEnabled">Select Importance Ratio:</span>
+            <br>
+            <div *ngIf="shortWaitingTimeEnabled && stableExecutionResultsEnabled" class="center">
+                <span class="aligned-with-slider">Short Waiting</span>
+                <mat-slider
+                        color="primary"
+                        formControlName="queueImportanceRatio"
+                        class="lift-slider"
+                        thumbLabel
+                        [displayWith]="formatLabel"
+                        tickInterval="10"
+                        step="10"
+                        min="0"
+                        max="100"
+                        aria-label="units"
+                        (change)="setQueueImportanceRatio($event)"
+                >
+                </mat-slider>
+                <span class="aligned-with-slider">Precise Results</span>
+            </div>
+
+
+            <div *ngIf="shortWaitingTimeEnabled || stableExecutionResultsEnabled">
+                <span>Select the number of compilation results:</span><br>
+                <div *ngIf="!disableDefiningMaximumNumberOfCircuits">
+                    <mat-form-field class="input-field">
+                        <input
+                                matInput
+                                type="number"
+                                min="1"
+                                [placeholder]="'Maximum number of compilation results'"
+                                formControlName="maxNumberOfCompiledCircuits"
+                                [ngModel]="maxNumberOfCompiledCircuitsDialog"
+                                (ngModelChange)="setMaxNumberOfCompiledCircuits($event)"
+                                [disabled]="disableDefiningMaximumNumberOfCircuits"
+                        />
+                    </mat-form-field>
+                </div>
+                <mat-checkbox color="primary" [checked]="disableDefiningMaximumNumberOfCircuits"
+                              (change)="setMaximumNumberofCompilationResultsSelected($event.checked)">Or compute <b>all</b> possible compilation results
+                </mat-checkbox>
+            </div>
 
-            <mat-form-field class="input-field">
-                <mat-label>Your Token</mat-label>
-                <input matInput formControlName="token"/>
+            <br>
+            <mat-label>Select SDKs to be used for compilation:</mat-label>
+            <mat-form-field appearance="none" class="input-field">
+                <input matInput [hidden]="true">
+                <mat-checkbox *ngFor="let compiler of compilers.controls; index as i" class="example-margin"
+                              formArrayName="compilers"
+                              [checked]="checkIfCompilerSelected(compiler.value)"
+                              (change)="updateCompilerSelection(compiler.value, $event.checked)"
+                              color="primary">
+                    {{compiler.value}}
+                </mat-checkbox>
             </mat-form-field>
         </form>
     </div>
diff --git a/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.scss b/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.scss
index e69de29b..32f1ad90 100644
--- a/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.scss
+++ b/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.scss
@@ -0,0 +1,30 @@
+::ng-deep .mat-checkbox-label {
+  padding-right: 10px;
+}
+
+.aligned-with-slider{
+  position: relative;
+  margin-top: 5px;
+  margin-left: 5px; /* optional */
+}
+
+.center{
+  display: flex;
+  justify-content: center;
+}
+
+.lift-slider{
+  bottom: 7px;
+}
+
+::ng-deep .mat-slider-wrapper {
+
+  .mat-slider-thumb-container {
+    .mat-slider-thumb-label {
+      width: 40px;
+      height: 40px;
+      top: -55px;
+      right: -23px;
+    }
+  }
+}
diff --git a/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.ts b/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.ts
index aa55f833..60306d3a 100644
--- a/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.ts
+++ b/src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.ts
@@ -6,6 +6,7 @@ import {
 } from '@angular/material/dialog';
 import {
   AbstractControl,
+  FormArray,
   FormBuilder,
   FormControl,
   FormGroup,
@@ -15,6 +16,7 @@ import { ParameterDto } from 'api-nisq/models/parameter-dto';
 import { CloudServiceDto } from 'api-atlas/models/cloud-service-dto';
 import { ExecutionEnvironmentsService } from 'api-atlas/services/execution-environments.service';
 import { NisqAnalyzerService } from '../nisq-analyzer/nisq-analyzer.service';
+import { UtilService } from '../../../util/util.service';
 
 @Component({
   selector: 'app-add-new-analysis-dialog',
@@ -23,8 +25,22 @@ import { NisqAnalyzerService } from '../nisq-analyzer/nisq-analyzer.service';
 })
 export class AddNewAnalysisDialogComponent implements OnInit {
   addNewAnalysisForm: FormGroup;
+  selectedVendors: string[] = [];
   cloudServices: CloudServiceDto[];
   parameters: ParameterDto[];
+  selectedCompilers: string[] = [];
+
+  ibmqEnabled = true;
+  ionqEnabled = false;
+  awsEnabled = false;
+  shortWaitingTimeEnabled = true;
+  stableExecutionResultsEnabled = true;
+  predictionAlgorithmInDialog = 'extra_trees_regressor';
+  metaOptimizerInDialog = 'none';
+  advancedSettingsOpen: boolean;
+  queueImportanceRatioDialog = 0;
+  maxNumberOfCompiledCircuitsDialog = 6;
+  disableDefiningMaximumNumberOfCircuits = false;
 
   constructor(
     public dialogRef: MatDialogRef<AddNewAnalysisDialogComponent>,
@@ -32,19 +48,60 @@ export class AddNewAnalysisDialogComponent implements OnInit {
     public dialog: MatDialog,
     private formBuilder: FormBuilder,
     private executionEnvironmentsService: ExecutionEnvironmentsService,
-    private nisqAnalyzerService: NisqAnalyzerService
+    private nisqAnalyzerService: NisqAnalyzerService,
+    private utilService: UtilService
   ) {}
 
   get params(): AbstractControl | null {
     return this.addNewAnalysisForm.get('params');
   }
 
-  get cloudService(): AbstractControl | null {
-    return this.addNewAnalysisForm.get('cloudService');
+  get vendors(): FormArray | null {
+    return this.addNewAnalysisForm.get('vendors') as FormArray;
+  }
+
+  get ibmqToken(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('ibmqToken');
+  }
+
+  get ionqToken(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('ionqToken');
+  }
+
+  get awsToken(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('awsToken');
+  }
+
+  get awsSecretToken(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('awsSecretToken');
+  }
+
+  get compilers(): FormArray {
+    return this.addNewAnalysisForm.get('compilers') as FormArray;
+  }
+
+  get shortWaitingTime(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('shortWaitingTime');
+  }
+
+  get stableExecutionResults(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('stableExecutionResults');
+  }
+
+  get predictionAlgorithm(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('predictionAlgorithm');
+  }
+
+  get metaOptimizer(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('metaOptimizer');
   }
 
-  get token(): AbstractControl | null {
-    return this.addNewAnalysisForm.get('token');
+  get maxNumberOfCompiledCircuits(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('maxNumberOfCompiledCircuits');
+  }
+
+  get queueImportanceRatio(): AbstractControl | null {
+    return this.addNewAnalysisForm.get('queueImportanceRatio');
   }
 
   ngOnInit(): void {
@@ -63,20 +120,69 @@ export class AddNewAnalysisDialogComponent implements OnInit {
             })
           )
         ),
-        cloudService: new FormControl(this.data.cloudService, [
+        vendors: new FormArray([]),
+        ibmqToken: new FormControl(this.data.ibmqToken),
+        ionqToken: new FormControl(this.data.ionqToken),
+        awsToken: new FormControl(this.data.awsToken),
+        awsSecretToken: new FormControl(this.data.awsSecretToken),
+        compilers: new FormArray([]),
+        maxNumberOfCompiledCircuits: new FormControl(
+          this.data.maxNumberOfCompiledCircuits,
+          [
+            // eslint-disable-next-line @typescript-eslint/unbound-method
+            Validators.required,
+          ]
+        ),
+        predictionAlgorithm: new FormControl(this.data.predictionAlgorithm, [
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          Validators.required,
+        ]),
+        metaOptimizer: new FormControl(this.data.metaOptimizer, [
           // eslint-disable-next-line @typescript-eslint/unbound-method
           Validators.required,
         ]),
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        shotCount: [''],
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        token: new FormControl(this.data.token),
+        queueImportanceRatio: new FormControl(this.data.queueImportanceRatio, [
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          Validators.required,
+        ]),
+        shortWaitingTime: new FormControl(this.data.shortWaitingTime, [
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          Validators.required,
+        ]),
+        stableExecutionResults: new FormControl(
+          this.data.stableExecutionResults,
+          [
+            // eslint-disable-next-line @typescript-eslint/unbound-method
+            Validators.required,
+          ]
+        ),
       });
 
+      this.selectedVendors = ['ibmq'];
+      for (const vendor of this.selectedVendors) {
+        this.vendors.push(new FormControl(vendor));
+      }
+      this.setCompilerOptions(this.selectedVendors);
+      this.predictionAlgorithm.setValue('extra_trees_regressor');
+      this.metaOptimizer.setValue('none');
+      this.maxNumberOfCompiledCircuits.setValue(6);
+      this.stableExecutionResults.setValue(true);
+      this.shortWaitingTime.setValue(true);
+
       this.dialogRef.beforeClosed().subscribe(() => {
         this.data.params = this.params.value;
-        this.data.cloudService = this.cloudService.value;
-        this.data.token = this.token.value;
+        this.data.vendors = this.selectedVendors;
+        this.data.selectedCompilers = this.selectedCompilers;
+        this.data.maxNumberOfCompiledCircuits = this.maxNumberOfCompiledCircuitsDialog;
+        this.data.metaOptimizer = this.metaOptimizerInDialog;
+        this.data.predictionAlgorithm = this.predictionAlgorithmInDialog;
+        this.data.queueImportanceRatio = this.queueImportanceRatioDialog;
+        this.data.shortWaitingTime = this.shortWaitingTimeEnabled;
+        this.data.stableExecutionResults = this.stableExecutionResultsEnabled;
+        this.data.ibmqToken = this.ibmqToken.value;
+        this.data.ionqToken = this.ionqToken.value;
+        this.data.awsToken = this.awsToken.value;
+        this.data.awsSecretToken = this.awsSecretToken.value;
       });
     });
   }
@@ -96,12 +202,142 @@ export class AddNewAnalysisDialogComponent implements OnInit {
   onNoClick(): void {
     this.dialogRef.close();
   }
+
+  updateCompilerSelection(compilerName: string, allowed: boolean): void {
+    if (allowed && !this.selectedCompilers.includes(compilerName)) {
+      this.selectedCompilers.push(compilerName);
+    } else {
+      this.selectedCompilers = this.selectedCompilers.filter(
+        (item) => item !== compilerName
+      );
+    }
+    if (this.selectedCompilers.length < 1) {
+      this.utilService.callSnackBar('Select at least  one compiler');
+    }
+  }
+
+  checkIfCompilerSelected(compilerName: string): boolean {
+    return this.selectedCompilers.includes(compilerName);
+  }
+
+  checkIfCompilersAndProvidersPresent(): boolean {
+    if (this.selectedCompilers.length > 0 && this.selectedVendors.length > 0) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  setCompilerOptions(vendors: string[]): void {
+    const setOfAllAvailableCompilers = new Set<string>();
+    for (const vendor of vendors) {
+      this.nisqAnalyzerService
+        .getCompilers(vendor)
+        .subscribe((availableCompilers) => {
+          for (const availableCompiler of availableCompilers) {
+            setOfAllAvailableCompilers.add(availableCompiler);
+          }
+          setOfAllAvailableCompilers.forEach((compiler) => {
+            if (!this.selectedCompilers.includes(compiler)) {
+              this.selectedCompilers.push(compiler);
+            }
+          });
+          this.compilers.clear();
+          for (const compiler of setOfAllAvailableCompilers) {
+            this.compilers.push(new FormControl(compiler));
+          }
+        });
+    }
+  }
+
+  setIbmqEnabled(enabled: boolean): void {
+    this.ibmqEnabled = enabled;
+    if (enabled) {
+      this.selectedVendors.push('ibmq');
+    } else {
+      this.selectedVendors = this.selectedVendors.filter(
+        (item) => item !== 'ibmq'
+      );
+    }
+  }
+
+  setIonqEnabled(enabled: boolean): void {
+    this.ionqEnabled = enabled;
+    if (enabled) {
+      this.selectedVendors.push('ionq');
+    } else {
+      this.selectedVendors = this.selectedVendors.filter(
+        (item) => item !== 'ionq'
+      );
+    }
+  }
+
+  setAwsEnabled(enabled: boolean): void {
+    this.awsEnabled = enabled;
+    if (enabled) {
+      this.selectedVendors.push('aws');
+    } else {
+      this.selectedVendors = this.selectedVendors.filter(
+        (item) => item !== 'aws'
+      );
+    }
+  }
+
+  setWaitingTimeEnabled(enabled: boolean): void {
+    this.shortWaitingTimeEnabled = enabled;
+  }
+
+  setStableExecutionResultsEnabled(enabled: boolean): void {
+    this.stableExecutionResultsEnabled = enabled;
+  }
+
+  setMaximumNumberofCompilationResultsSelected(enabled: boolean): void {
+    this.disableDefiningMaximumNumberOfCircuits = enabled;
+    if (enabled) {
+      this.maxNumberOfCompiledCircuitsDialog = 0;
+    } else {
+      this.maxNumberOfCompiledCircuitsDialog = 5;
+    }
+  }
+
+  setPredictionAlgorithm(predictionAlgorithm: string): void {
+    this.predictionAlgorithmInDialog = predictionAlgorithm;
+  }
+
+  setMetaOptimizer(metaOptimizer: string): void {
+    this.metaOptimizerInDialog = metaOptimizer;
+  }
+
+  setMaxNumberOfCompiledCircuits(event): void {
+    this.maxNumberOfCompiledCircuitsDialog = event;
+  }
+
+  setQueueImportanceRatio(event): void {
+    this.queueImportanceRatioDialog = event.value / 100;
+  }
+
+  formatLabel(value: number): number | string {
+    if (value >= 0) {
+      return Math.round(value) + ':' + Math.round(100 - value);
+    }
+    return value;
+  }
 }
 
 export interface DialogData {
   title: string;
   params: string;
-  cloudService: string;
-  token: string;
   algo: string;
+  vendors: string[];
+  selectedCompilers: string[];
+  predictionAlgorithm: string;
+  metaOptimizer: string;
+  queueImportanceRatio: number;
+  maxNumberOfCompiledCircuits: number;
+  stableExecutionResults: boolean;
+  shortWaitingTime: boolean;
+  ibmqToken: string;
+  ionqToken: string;
+  awsToken: string;
+  awsSecretToken: string;
 }