Skip to content

Commit

Permalink
expand analysis dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@salmma
salmma committed Jul 11, 2024
1 parent 75fd156 commit 789da87
Show file tree
Hide file tree
Showing 4 changed files with 412 additions and 30 deletions.
6 changes: 6 additions & 0 deletions src/app/components/algorithms/algorithm.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -89,6 +92,9 @@ import { CompareVersionDialogComponent } from './dialogs/compare-version-dialog.
MatSortModule,
QcAtlasUiFeatureToggleModule,
MatBadgeModule,
MatCheckboxModule,
MatExpansionModule,
MatSliderModule,
],
exports: [
AlgorithmListComponent,
Expand Down
142 changes: 126 additions & 16 deletions src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
30 changes: 30 additions & 0 deletions src/app/components/algorithms/dialogs/add-new-analysis-dialog.component.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
Loading

0 comments on commit 789da87

Please sign in to comment.