src/app/experiments/experiments.component.ts
| selector | app-experiments |
| styleUrls | ./experiments.component.css |
| templateUrl | ./experiments.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(snackBar: MatSnackBar)
|
||||||
|
Parameters :
|
| experimentConfigurationService | |
Type : ExperimentConfigurationService
|
|
| experimentService | |
Type : ExperimentService
|
|
| infoService | |
Type : InfoService
|
|
| objectiveService | |
Type : ObjectiveService
|
|
| download | |
Type : EventEmitter<any>
|
|
| convertToCSV | ||||||
convertToCSV(objArray, headerList)
|
||||||
|
Parameters :
Returns :
string
|
| downloadFile | ||||||||||||
downloadFile(data, filename: string)
|
||||||||||||
|
Parameters :
Returns :
void
|
| downloadInfo | ||||
downloadInfo(experiment)
|
||||
|
Parameters :
Returns :
void
|
| getExecution | ||||
getExecution(exec)
|
||||
|
Parameters :
Returns :
any
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| showInfo | ||||
showInfo(experiment)
|
||||
|
Parameters :
Returns :
void
|
| columnsToDisplay |
Type : []
|
Default value : ['id', 'name', 'algorithm', 'createdAt']
|
| expandedElement |
Type : any | null
|
| experiments |
Type : []
|
Default value : []
|
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {animate, state, style, transition, trigger} from "@angular/animations";
import {OptimizationService} from "../services/optimization.service";
import {MatSnackBar} from "@angular/material/snack-bar";
import {ExperimentService} from "../services/experiment.service";
import {ExperimentConfigurationService} from "../services/experiment-configuration.service";
import {ObjectiveService} from "../services/objective.service";
import {InfoService} from "../services/info.service";
import {map} from "rxjs/operators";
@Component({
selector: 'app-experiments',
templateUrl: './experiments.component.html',
animations: [
trigger('detailExpand', [
state('collapsed', style({height: '0px', minHeight: '0'})),
state('expanded', style({height: '*'})),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
styleUrls: ['./experiments.component.css']
})
export class ExperimentsComponent implements OnInit {
experiments = [];
@Output() download: EventEmitter<any> = new EventEmitter<any>();
@Input() experimentService: ExperimentService;
@Input() objectiveService: ObjectiveService;
@Input() infoService: InfoService;
@Input() experimentConfigurationService: ExperimentConfigurationService;
columnsToDisplay = ['id', 'name', 'algorithm', 'createdAt'];
expandedElement: any | null;
constructor(private snackBar: MatSnackBar) {
}
ngOnInit() {
this.experimentService.getAll().subscribe(experiments => {
this.experiments = experiments.values;
});
OptimizationService.onOptimizationInfo.asObservable().subscribe(value => {
if (value && value.status === "COMPLETE") {
this.experimentService.getAll().subscribe(experiments => {
this.experiments = experiments.values;
});
}
});
}
getExecution(exec) {
return exec != null ? exec.id : null;
}
showInfo(experiment) {
experiment.experimentConfiguration = this.experimentConfigurationService.findByExperiment(experiment.id);
experiment.objective = this.objectiveService.findByExperiment(experiment.id);
experiment.info = this.infoService.findByExperiment(experiment.id).pipe(map(v => {
let values = [];
let lastExecution = null;
let executionId = -1;
for (let value of v.values) {
if (lastExecution != this.getExecution(value.execution)) {
executionId++;
}
values[executionId] = values[executionId] || [];
values[executionId].push(value);
lastExecution = this.getExecution(value.execution);
}
v.values = values;
return v;
}));
}
downloadInfo(experiment) {
this.infoService.findByExperiment(experiment.id).subscribe(info => {
var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(info));
var downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute("href", dataStr);
downloadAnchorNode.setAttribute("download", experiment.id + ".info.json");
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
})
}
downloadFile(data, filename = 'data') {
let csvData = this.convertToCSV(data, ['name', 'age', 'average', 'approved', 'description']);
let blob = new Blob(['\ufeff' + csvData], {type: 'text/csv;charset=utf-8;'});
let dwldLink = document.createElement("a");
let url = URL.createObjectURL(blob);
let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
if (isSafariBrowser) { //if Safari open in new window to save file with random filename.
dwldLink.setAttribute("target", "_blank");
}
dwldLink.setAttribute("href", url);
dwldLink.setAttribute("download", filename + ".csv");
dwldLink.style.visibility = "hidden";
document.body.appendChild(dwldLink);
dwldLink.click();
document.body.removeChild(dwldLink);
}
convertToCSV(objArray, headerList) {
let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
let str = '';
let row = 'S.No,';
for (let index in headerList) {
row += headerList[index] + ',';
}
row = row.slice(0, -1);
str += row + '\r\n';
for (let i = 0; i < array.length; i++) {
let line = (i + 1) + '';
for (let index in headerList) {
let head = headerList[index];
line += ',' + array[i][head];
}
str += line + '\r\n';
}
return str;
}
}
<opla-grid-list>
<opla-grid-title style="width: 100%">
<table mat-table
[dataSource]="experiments" multiTemplateDataRows
class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
<th mat-header-cell *matHeaderCellDef> {{column | titlecase}}</th>
<td mat-cell *matCellDef="let element" style="border: 0"> {{element[column]}} </td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element;" [attr.colspan]="columnsToDisplay.length">
<div [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" style="overflow: hidden">
<div class="table-column-element-detail">
<div class="table-column-element-diagram">
<div class="example-element-position"> {{element.id}} </div>
<div class="table-column-element-symbol"> {{element.name}} </div>
<div class="example-element-name"> {{element.algorithm}} </div>
<div class="example-element-weight"> {{element.createdAt}} </div>
</div>
<div class="table-column-element-description">
<button mat-icon-button color="primary" aria-label="Download PLA alternatives"
(click)="download.emit(element.hash)">
<mat-icon>get_app</mat-icon>
</button>
<button mat-icon-button color="primary" aria-label="Download Info Json" (click)="downloadInfo(element)">
<mat-icon>description</mat-icon>
</button>
<br>
<div class="pla-info"
*ngFor="let experimentConfiguration of (element.experimentConfiguration | async)?.values">
<div>
Number of Runs: {{experimentConfiguration.numberOfRuns}}
</div>
<div>
Max Evaluations: {{experimentConfiguration.maxEvaluations}}
</div>
<div>
Crossover Probability: {{experimentConfiguration.crossoverProb}}
</div>
<div>
Mutation Probability: {{experimentConfiguration.mutationProb}}
</div>
<div>
Objective Functions: {{experimentConfiguration.objectives}}
</div>
<div>
Mutation Operators: {{experimentConfiguration.mutationOperators | replaceall:'Mutation':''}}
</div>
<div>
Population Size: {{experimentConfiguration.populationSize}}
</div>
<br>
</div>
</div>
</div>
<div>
<h2>Solutions:</h2>
<div *ngFor="let executions of (element.info | async)?.values; let i = index">
<div *ngIf="executions[0].execution"><h3>Execution {{i + 1}}</h3></div>
<div *ngIf="!executions[0].execution"><h3>Non-dominated solutions after {{i}} executions</h3></div>
<opla-grid-list>
<opla-grid-tile *ngFor="let info of executions; let j = index" style="max-width: 250px; margin-bottom: 10px;">
<mat-card>
<mat-card-content>
<span [matBadge]="info.isAll ? '*' : null"
matBadgeOverlap="false"> {{info.name | replaceall:'INFO_':''}} </span>
<br><br>
<b>Nr. Packages:</b> {{info.numberOfPackages || 0}}<br>
<b>Nr. Classes:</b> {{info.numberOfClasses || 0}}<br>
<b>Nr. Variabilities:</b> {{info.numberOfVariabilities || 0}}<br>
<b>Nr. Interfaces:</b> {{info.numberOfInterfaces || 0}}<br>
<b>Nr. Dependencies:</b> {{info.numberOfDependencies || 0}}<br>
<b>Nr. Abstractions:</b> {{info.numberOfAbstractions || 0}}<br>
<b>Nr. Generalizations:</b> {{info.numberOfGeneralizations || 0}}<br>
<b>Nr. Associations:</b> {{info.numberOfAssociations || 0}}<br>
<b>User Evaluation:</b> {{info.userEvaluation || 0}}<br>
<b>Freezed Elements:</b> {{info.freezedElements}}<br>
<b>Objective Values:</b> {{info.objectives}}<br>
</mat-card-content>
</mat-card>
</opla-grid-tile>
</opla-grid-list>
<br>
<!-- <div>-->
<!-- </div>-->
</div>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay; "
class="element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element; showInfo(element);">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
</opla-grid-title>
</opla-grid-list>
./experiments.component.css
.pla-info > div {
border-bottom: 1px dashed #e8e8e8;
padding: 5px;
}