diff options
Diffstat (limited to 'frontend')
18 files changed, 177 insertions, 91 deletions
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 7ae5c4ab..4ff0a471 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -18,7 +18,7 @@ export default class Dataset extends FolderFile { public rowCount: number = 0, public nullRows: number = 0, public nullCols: number = 0, - public preview: string[][] = [[]] + public cMatrix: number[][] = [] ) { super(name, dateCreated, lastUpdated); } @@ -27,7 +27,6 @@ export default class Dataset extends FolderFile { export class ColumnInfo { constructor( public columnName: string = '', - public columnType: ColumnType, public isNumber: boolean = false, public numNulls: number = 0, public uniqueValues?: string[], @@ -39,16 +38,12 @@ export class ColumnInfo { public max?: number, public q1?: number, public q3?: number, - ) { + ) { /*if (isNumber) this.columnType = ColumnType.numerical; else this.columnType = ColumnType.categorical;*/ } - + } -export enum ColumnType { - categorical = "Kategorijski", - numerical = "Numerički" -}
\ No newline at end of file diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts index 31816c19..cff77535 100644 --- a/frontend/src/app/_data/Experiment.ts +++ b/frontend/src/app/_data/Experiment.ts @@ -14,11 +14,11 @@ export default class Experiment { public dateCreated: Date = new Date(), public lastUpdated: Date = new Date(), public modelIds: string[] = [], - - - + public columnTypes: ColumnType[] = [], public encodings: ColumnEncoding[] = []//[{columnName: "", columnEncoding: Encoding.Label}] ) { } + + _columnsSelected: boolean = false; } export enum NullValueOptions { @@ -44,11 +44,11 @@ export class NullValReplacer { export enum Encoding { Label = 'label', OneHot = 'onehot', - Ordinal = 'ordinal', + /*Ordinal = 'ordinal', Hashing = 'hashing', Binary = 'binary', BaseN = 'baseN' - /* + BackwardDifference = 'backward difference', CatBoost = 'cat boost', Count = 'count', @@ -66,9 +66,13 @@ export enum Encoding { } export class ColumnEncoding { - constructor ( + constructor( public columnName: string, public encoding: Encoding - ) - {} + ) { } +} + +export enum ColumnType { + categorical = "categorical", + numerical = "numerical" }
\ No newline at end of file diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 185e2257..526a8290 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -28,8 +28,10 @@ export default class Model extends FolderFile { // Test set settings public randomOrder: boolean = true, public randomTestSet: boolean = true, - public randomTestSetDistribution: number = 0.1 //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U + public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U + public isPublic: boolean = false, + public accessibleByLink: boolean = false ) { super(name, dateCreated, lastUpdated); } diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 543a0018..efc093d2 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -64,15 +64,15 @@ </tr> </thead> <tbody> - <tr *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <tr *ngFor="let row of dataset.cMatrix; let i = index"> <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}"> <div class="text-left"> - {{colInfo.columnName}} + {{dataset.columnInfo[i].columnName}} </div> </th> - <td *ngFor="let colInfo of dataset.columnInfo; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}"> + <td *ngFor="let corrVal of row; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}"> <div class="text-overflow"> - 0.1 + {{corrVal}} </div> </td> </tr> @@ -103,7 +103,7 @@ <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> <p class="verticalAlign text-left" style="font-size:13px;" *ngIf="!colInfo.isNumber">Kategorijski</p> <mat-form-field *ngIf="colInfo.isNumber"> - <mat-select matNativeControl [(value)]="colInfo.columnType" [disabled]="!columnsChecked[i]" (selectionChange)="columnTypeChanged(colInfo.columnName);"> + <mat-select matNativeControl [(value)]="this.experiment.columnTypes[i]" [disabled]="!columnsChecked[i]" (selectionChange)="columnTypeChanged(colInfo.columnName);"> <mat-option [value]="ColumnType.categorical">Kategorijski</mat-option> <mat-option [value]="ColumnType.numerical">Numerički</mat-option> </mat-select> @@ -113,14 +113,14 @@ <tr class="graphics-row"> <th class="no-pad">Grafik</th> <td class="no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'graphic-class' : !columnsChecked[i]}"> - <app-box-plot *ngIf="colInfo.columnType == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot> - <app-pie-chart *ngIf="colInfo.columnType == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart> + <app-box-plot *ngIf="this.experiment.columnTypes[i] == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot> + <app-pie-chart *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart> </td> </tr> <tr> <th class="border-bottom">Statistika</th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}" class="text-left"> - <span *ngIf="colInfo.columnType == ColumnType.numerical"> + <span *ngIf="this.experiment.columnTypes[i] == ColumnType.numerical"> Mean: {{colInfo.mean}}<br> Median: {{colInfo.median}}<br> Min: {{colInfo.min}}<br> @@ -128,7 +128,7 @@ Q1: {{colInfo.q1}}<br> Q3: {{colInfo.q3}}<br> </span> - <div class="text-overflow" *ngIf="colInfo.columnType == ColumnType.categorical && colInfo.uniqueValuesPercent"> + <div class="text-overflow" *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical && colInfo.uniqueValuesPercent"> <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:6; let i = index"> ({{(colInfo.uniqueValuesPercent[i] * 100).toFixed(2)}}%) {{uniqueValue}}<br> </span> @@ -186,7 +186,7 @@ </mat-menu> <mat-menu #replaceWith="matMenu"> - <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value]> + <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value] #enterAValue> <button [disabled]="getValue(colInfo.columnName) == ''" mat-menu-item value={{getValue(colInfo.columnName)}} (click)="MissValsReplaceClicked($event, colInfo.columnName, i)">Potvrdi unos</button> </mat-menu> </div> @@ -225,15 +225,24 @@ </div> <div class="break-1"></div> <div class="ns-col d-flex align-items-center justify-content-center"> - <button mat-button (click)="saveExperiment()" class="bottom-button text-offwhite rounded-bottom"> - <div class="f-row" style="justify-content: space-around;"> - <div>Potvrdi</div> - <div class="icon-double pt-1"> - <mat-icon>check</mat-icon> - <mat-icon>check</mat-icon> + <button *ngIf="experiment._id == ''" mat-button (click)="saveExperiment()" class="bottom-button text-offwhite rounded-bottom"> + <div class="f-row" style="justify-content: space-around; width: 100%;"> + <div>Sačuvaj</div> + <div class="icon-double pt-1"> + <mat-icon>check</mat-icon> + <mat-icon>check</mat-icon> + </div> </div> - </div> - </button> + </button> + <button *ngIf="experiment._id != ''" mat-button (click)="updateExperiment()" class="bottom-button text-offwhite rounded-bottom"> + <div class="f-row" style="justify-content: space-around; width: 100%;"> + <div>Sačuvaj izmene</div> + <div class="icon-double pt-1"> + <mat-icon>check</mat-icon> + <mat-icon>check</mat-icon> + </div> + </div> + </button> </div> </div> </div> diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index c3d4f206..c200e674 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -1,6 +1,6 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; -import Dataset, { ColumnType } from 'src/app/_data/Dataset'; -import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment'; +import Dataset from 'src/app/_data/Dataset'; +import Experiment, { ColumnEncoding, Encoding, ColumnType, NullValueOptions } from 'src/app/_data/Experiment'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component'; import { MatDialog } from '@angular/material/dialog'; @@ -10,6 +10,8 @@ import { CsvParseService } from 'src/app/_services/csv-parse.service'; import { ProblemType } from 'src/app/_data/Model'; import { ExperimentsService } from 'src/app/_services/experiments.service'; import { SaveExperimentDialogComponent } from 'src/app/_modals/save-experiment-dialog/save-experiment-dialog.component'; +import { AlertDialogComponent } from 'src/app/_modals/alert-dialog/alert-dialog.component'; +import Shared from 'src/app/Shared'; @Component({ selector: 'app-column-table', @@ -20,7 +22,6 @@ export class ColumnTableComponent implements AfterViewInit { @Input() dataset?: Dataset; @Input() experiment!: Experiment; - @ViewChildren("nullValMenu") nullValMenus!: ElementRef[]; @Output() okPressed: EventEmitter<string> = new EventEmitter(); @Output() columnTableChanged = new EventEmitter(); @@ -35,7 +36,7 @@ export class ColumnTableComponent implements AfterViewInit { columnsChecked: boolean[] = []; //niz svih kolona loaded: boolean = false; - + constructor(private datasetService: DatasetsService, private experimentService: ExperimentsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } @@ -44,15 +45,13 @@ export class ColumnTableComponent implements AfterViewInit { this.dataset = dataset; this.setColumnTypeInitial(); - + this.dataset.columnInfo.forEach(column => { this.columnsChecked.push(true); }); - - for (let i = 0; i < this.dataset?.columnInfo.length; i++) { - this.experiment.inputColumns.push(this.dataset.columnInfo[i].columnName); - } - this.experiment.outputColumn = this.experiment.inputColumns[0]; + + this.resetInputColumns(); + this.resetOutputColumn(); this.resetColumnEncodings(Encoding.Label); this.setDeleteRowsForMissingValTreatment(); @@ -70,17 +69,29 @@ export class ColumnTableComponent implements AfterViewInit { } ngAfterViewInit(): void { - + } setColumnTypeInitial() { if (this.dataset != undefined) { for (let i = 0; i < this.dataset.columnInfo.length; i++) { - this.dataset.columnInfo[i].columnType = (this.dataset.columnInfo[i].isNumber) ? ColumnType.numerical : ColumnType.categorical; + this.experiment.columnTypes[i] = (this.dataset.columnInfo[i].isNumber) ? ColumnType.numerical : ColumnType.categorical; } } } + resetInputColumns() { + if (this.dataset != undefined) { + this.experiment.inputColumns = []; + for (let i = 0; i < this.dataset?.columnInfo.length; i++) { + this.experiment.inputColumns.push(this.dataset.columnInfo[i].columnName); + } + } + } + resetOutputColumn() { + this.experiment.outputColumn = this.experiment.inputColumns[0]; + } + setDeleteRowsForMissingValTreatment() { if (this.experiment != undefined) { this.experiment.nullValues = NullValueOptions.DeleteRows; @@ -102,7 +113,7 @@ export class ColumnTableComponent implements AfterViewInit { columnTypeChanged(columnName: string) { if (this.experiment.outputColumn == columnName) this.changeOutputColumn(columnName); - else + else this.columnTableChangeDetected(); } @@ -129,14 +140,14 @@ export class ColumnTableComponent implements AfterViewInit { changeOutputColumn(columnName: string) { if (this.experiment != undefined && this.dataset != undefined) { - let column = this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.outputColumn)[0]; - if (column.columnType == ColumnType.numerical) { + let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn); + if (this.experiment.columnTypes[i] == ColumnType.numerical) { this.experiment.type = ProblemType.Regression; } else { - if (column.uniqueValues!.length == 2) + if (this.dataset.columnInfo[i].uniqueValues!.length == 2) this.experiment.type = ProblemType.BinaryClassification; - else + else this.experiment.type = ProblemType.MultiClassification; } this.columnTableChangeDetected(); @@ -188,7 +199,7 @@ export class ColumnTableComponent implements AfterViewInit { value: "" }); let numOfRowsToDelete = (this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.inputColumns[i])[0]).numNulls; - this.nullValOption[i] = "Obriši redove (" + numOfRowsToDelete + ")"; + this.nullValOption[i] = "Obriši redove (" + numOfRowsToDelete + ")"; } } this.columnTableChangeDetected(); @@ -212,13 +223,18 @@ export class ColumnTableComponent implements AfterViewInit { this.experiment.name = selectedName; //napravi odvojene dugmice za save i update -> za update nece da se otvara dijalog za ime this.experimentService.addExperiment(this.experiment).subscribe((response) => { - console.log(response); + this.experiment._id = response._id; this.okPressed.emit(); }); }); } - + openUpdateExperimentDialog() { + this.experimentService.updateExperiment(this.experiment).subscribe((response) => { + this.experiment = response; + Shared.openDialog("Izmena eksperimenta", "Uspešno ste izmenili podatke o eksperimentu."); + }); + } MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) { if (this.experiment != undefined && this.dataset != undefined) { @@ -272,6 +288,9 @@ export class ColumnTableComponent implements AfterViewInit { saveExperiment() { this.openSaveExperimentDialog(); } + updateExperiment() { + this.openUpdateExperimentDialog(); + } tabs = [ diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 2340ee8a..62324d62 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -152,6 +152,14 @@ display: none; } +.hover-show { + display: none; +} + +.list-item:hover>.hover-show { + display: initial; +} + .list-add { display: flex; flex-direction: row; diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 48b59dc8..bff066be 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -56,15 +56,15 @@ <div class="folder-inside bg-blur"> <div class="file-content" [ngClass]="{'form-hidden' : listView}"> <div class="file-bottom-buttons" *ngIf="selectedTab != TabType.NewFile"> - <button *ngIf="this.selectedFile && selectedTab == TabType.File" class="btn-clear file-button" (click)="deleteFile(this.selectedFile)"> + <button *ngIf="this.selectedFile && selectedTab == TabType.File" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)"> <mat-icon>delete</mat-icon> </button> <!-- <button class="btn-clear file-button"> <mat-icon>zoom_out_map</mat-icon> </button> --> </div> - <app-form-model [ngClass]="{'form-hidden': type != FolderType.Model}"></app-form-model> - <app-form-dataset [ngClass]="{'form-hidden': type != FolderType.Dataset}"></app-form-dataset> + <app-form-model [ngClass]="{'form-hidden': type != FolderType.Model}" [forExperiment]="forExperiment"></app-form-model> + <app-form-dataset [ngClass]="{'form-hidden': type != FolderType.Dataset}" [forExperiment]="forExperiment"></app-form-dataset> </div> <div [ngClass]="{'form-hidden' : !listView}" class="list-view"> <div *ngFor="let file of filteredFiles; let i = index" class="list-item force-link" (click)="selectFile(file)"> @@ -74,6 +74,12 @@ <div class="mx-2 hover-hide"> {{file.lastUpdated | date}} </div> + <div class="mx-2 hover-show" *ngIf="selectedTab !== TabType.PublicDatasets && selectedTab !== TabType.PublicModels"> + <button class="btn-clear file-button" (click)="deleteFile(file, $event)"> + <mat-icon>delete</mat-icon> + </button> + </div> + </div> <div class="list-add" [ngSwitch]="type"> <button mat-raised-button *ngSwitchCase="FolderType.Dataset" (click)="selectNewFile()">Dodaj {{privacy == Privacy.Public ? 'javni ' : ' '}}izvor podataka</button> diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 20ca1121..6ca0faa8 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -53,8 +53,9 @@ export class FolderComponent implements AfterViewInit { if (this.signalRService.hubConnection) { this.signalRService.hubConnection.on("NotifyDataset", (dName: string, dId: string) => { - this.refreshFiles(dId); - + if (this.type == FolderType.Dataset) { + this.refreshFiles(dId); + } }); } else { console.warn("Dataset-Load: No connection!"); @@ -98,8 +99,8 @@ export class FolderComponent implements AfterViewInit { this.newFileSelected = false; this.listView = false; this.selectedFileChanged.emit(this.selectedFile); - this.displayFile(); this.selectTab(TabType.File); + this.displayFile(); } createNewFile() { @@ -117,9 +118,13 @@ export class FolderComponent implements AfterViewInit { _initialized: boolean = false; refreshFiles(selectedDatasetId: string | null) { + this.files = [] + this.filteredFiles.length = 0; + this.folders[TabType.NewFile] = []; + this.folders[TabType.File] = []; this.tabsToShow.forEach(tab => { this.folders[tab] = []; - }) + }); this.datasetsService.getMyDatasets().subscribe((datasets) => { this.folders[TabType.MyDatasets] = datasets; @@ -137,7 +142,6 @@ export class FolderComponent implements AfterViewInit { }); this.modelsService.getMyModels().subscribe((models) => { - console.log(models); this.folders[TabType.MyModels] = models; }); @@ -164,8 +168,9 @@ export class FolderComponent implements AfterViewInit { switch (this.type) { case FolderType.Dataset: this.formDataset!.uploadDataset((dataset: Dataset) => { + this.newFile = undefined; Shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); - this.refreshFiles(dataset._id); + this.refreshFiles(null); }, () => { Shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); @@ -173,7 +178,7 @@ export class FolderComponent implements AfterViewInit { break; case FolderType.Model: this.modelsService.addModel(this.formModel.newModel).subscribe(model => { - this.formModel.newModel = model; + this.newFile = undefined; Shared.openDialog("Obaveštenje", "Uspešno ste dodali novu konfiguraciju neuronske mreže u kolekciju."); this.refreshFiles(null); // todo select model }, (err) => { @@ -205,8 +210,8 @@ export class FolderComponent implements AfterViewInit { filteredFiles: FolderFile[] = []; searchTermsChanged() { - if (!this.files) return; this.filteredFiles.length = 0; + if (!this.files) return; this.filteredFiles.push(...this.files.filter((file) => file.name.toLowerCase().includes(this.searchTerm.toLowerCase()))); /*if (this.selectedFile) { if (!this.filteredFiles.includes(this.selectedFile)) { @@ -226,17 +231,19 @@ export class FolderComponent implements AfterViewInit { this.listView = !this.listView; } - deleteFile(file: FolderFile) { - console.log('delete'); + deleteFile(file: FolderFile, event: Event) { + event.stopPropagation(); + //console.log('delete'); switch (this.type) { case FolderType.Dataset: this.datasetsService.deleteDataset(<Dataset>file).subscribe((response) => { - console.log(response); + this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); + this.refreshFiles(null); }); break; case FolderType.Model: this.modelsService.deleteModel(<Model>file).subscribe((response) => { - console.log(response); + this.refreshFiles(null); }); break; case FolderType.Experiment: diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index c0318012..96a5e1b6 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -108,7 +108,9 @@ </div> <div class="col-sm-9"> - <app-graph [model]="newModel"></app-graph> + <!-- {{forExperiment._columnsSelected}} --> + <app-graph [model]="newModel" *ngIf="forExperiment._columnsSelected" [inputColumns]="forExperiment.inputColumns"></app-graph> + <app-graph [model]="newModel" *ngIf="!forExperiment._columnsSelected" [inputColumns]="['Nisu odabrane ulazne kolone']"></app-graph> </div> </div> </div> diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 3c01bc5e..35753d40 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,8 +1,8 @@ <div #graphWrapper class="w-100 position-relative" style="height: 14rem;"> - <ng-container *ngFor="let layer of layers; let i = index"> + <!-- <ng-container *ngFor="let layer of layers; let i = index"> <div [ngClass]="{'inputs': i==0}" class="node-text" *ngFor="let node of layer; let j = index" [style.left.%]="node.x * 99.4" [style.top.%]="node.y * 100"> - {{ i == 0 ? (inputColumns ? inputColumns[j] : 'nepoznato') : (i > 0 && i + {{ i == 0 ? (inputColumns && inputColumns.length >= j ? inputColumns[j] : 'nepoznato') : (i > 0 && i < layers.length - 1 ? model!.layers[i-1].activationFunction : (i==layers.length - 1 ? 'out' : '')) }} </div> - </ng-container> + </ng-container> --> <canvas #graphCanvas></canvas> - </div>
\ No newline at end of file +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index c7f8d964..da2c7767 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -28,7 +28,7 @@ export class GraphComponent implements AfterViewInit { @Input() outputNodeColor: string = '#dfd7d7'; private ctx!: CanvasRenderingContext2D; - @Input() inputColumns?: string[] = ['Nije odabran eksperiment']; + @Input() inputColumns?: string[]; constructor() { } @@ -43,7 +43,7 @@ export class GraphComponent implements AfterViewInit { window.addEventListener('resize', () => { this.resize() }); this.update(); this.resize(); - console.log(this.layers); + //console.log(this.layers); } layers: Node[][] = []; diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts index 3840692a..6fd2f320 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.ts +++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts @@ -28,7 +28,7 @@ export class MetricViewComponent implements OnInit { myEpochs.push(epoch + 1); for (let key in metrics) { let value = metrics[key]; - console.log(key, ':::', value, epoch); + //console.log(key, ':::', value, epoch); if (key === 'accuracy') { myAcc.push(parseFloat(value)); } diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index d64530b9..5716c1e6 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -24,8 +24,8 @@ export class NotificationsComponent implements OnInit { this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { const existingNotification = this.notifications.find(x => x.id === mId) const progress = ((currentEpoch + 1) / totalEpochs); - console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); - console.log("stat:", stat); + //console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); + //console.log("stat:", stat); if (!existingNotification) this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); else { diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts index 7529b36b..7f476178 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.ts +++ b/frontend/src/app/_elements/playlist/playlist.component.ts @@ -44,6 +44,6 @@ export class PlaylistComponent implements OnInit { } }); - console.log(this.tableDatas); + //console.log(this.tableDatas); } } diff --git a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html index a0b5d771..bac73e0a 100644 --- a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html +++ b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html @@ -1,10 +1,11 @@ <h1 mat-dialog-title>Čuvanje eksperimenta</h1> <div mat-dialog-content> - <p>Unesite naziv eksperimenta:</p> + <span>Unesi naziv eksperimenta:</span> <mat-form-field> <input type="text" matInput [(ngModel)]="selectedName"> </mat-form-field> - <p>Da li ste sigurni u izbor?</p> + <br><br> + <p>Sačuvaj eksperiment:</p> </div> <div mat-dialog-actions> <button mat-button [mat-dialog-close]="selectedName" cdkFocusInitial>Da</button> diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index baae864e..2b32db81 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -32,17 +32,17 @@ </div> <div #steps id="step_2" class="step-content"> <div class="step-content-inside"> - <app-column-table (okPressed)="goToPage(2)" (columnTableChanged)="columnTableChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table> + <app-column-table (okPressed)="goToPage(2); experiment._columnsSelected = true;" (columnTableChanged)="columnTableChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table> </div> </div> <div #steps id="step_3" class="step-content"> <div class="step-content-inside"> - <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3)"></app-folder> + <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3); trainModel();" (selectedFileChanged)="setModel($event)"></app-folder> </div> </div> <div #steps id="step_4" class="step-content"> <div class="step-content-inside"> - <app-metric-view></app-metric-view> + <app-metric-view #metricView></app-metric-view> </div> </div> </div> diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 28552664..c4d6063c 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -10,6 +10,8 @@ import { ModelsService } from 'src/app/_services/models.service'; import Model from 'src/app/_data/Model'; import Dataset from 'src/app/_data/Dataset'; import { ColumnTableComponent } from 'src/app/_elements/column-table/column-table.component'; +import { SignalRService } from 'src/app/_services/signal-r.service'; +import { MetricViewComponent } from 'src/app/_elements/metric-view/metric-view.component'; @Component({ selector: 'app-experiment', @@ -26,11 +28,11 @@ export class ExperimentComponent implements AfterViewInit { experiment: Experiment; dataset?: Dataset; @ViewChild("folderDataset") folderDataset!: FolderComponent; - @ViewChild("folderModel") folderModel!: FolderComponent; @ViewChild(ColumnTableComponent) columnTable!: ColumnTableComponent; + @ViewChild("folderModel") folderModel!: FolderComponent; + @ViewChild("metricView") metricView!: MetricViewComponent; - - constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService) { + constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private signalRService: SignalRService) { this.experiment = new Experiment("exp1"); } @@ -43,7 +45,11 @@ export class ExperimentComponent implements AfterViewInit { } trainModel() { - this.modelsService.trainModel((<Model>this.folderModel.selectedFile)._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") }) + if (!this.modelToTrain) { + Shared.openDialog('Greška', 'Morate odabrati konfiguraciju neuronske mreže'); + } else { + this.modelsService.trainModel(this.modelToTrain._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") }); + } } stepHeight = this.calcStepHeight(); @@ -65,8 +71,23 @@ export class ExperimentComponent implements AfterViewInit { this.stepsContainer.nativeElement.addEventListener('scroll', (event: Event) => { Shared.emitBGScrollEvent(this.stepsContainer.nativeElement.scrollTop); }); + + if (this.signalRService.hubConnection) { + this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { + console.log(this.modelToTrain?._id, mId); + if (this.modelToTrain?._id == mId) { + stat = stat.replace(/'/g, '"'); + //console.log('JSON', this.trainingResult); + this.history.push(JSON.parse(stat)); + this.metricView.update(this.history); + } + }); + + } } + history: any[] = []; + updatePageIfScrolled() { if (this.scrolling) return; const currentPage = Math.round(this.stepsContainer.nativeElement.scrollTop / this.stepHeight) @@ -120,7 +141,7 @@ export class ExperimentComponent implements AfterViewInit { columnTableChangedEvent() { //sta se desi kad se nesto promeni u column-table komponenti... - console.log("promenio se column-table"); + //console.log("promenio se column-table"); } setDataset(dataset: FolderFile) { @@ -130,4 +151,11 @@ export class ExperimentComponent implements AfterViewInit { this.columnTable.loadDataset(this.dataset); } + + modelToTrain?: Model; + + setModel(model: FolderFile) { + const m = <Model>model; + this.modelToTrain = m; + } } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index d79e2781..fc888556 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -53,4 +53,9 @@ export class ModelsService { deleteModel(model: Model) { return this.http.delete(`${Configuration.settings.apiURL}/model/` + model.name, { headers: this.authService.authHeader(), responseType: "text" }); } + + getPublicModels(): Observable<Model[]> { + return this.http.get<Model[]>(`${Configuration.settings.apiURL}/model/publicmodels`, { headers: this.authService.authHeader() }); + } + } |