diff options
23 files changed, 196 insertions, 108 deletions
diff --git a/backend/api/api/Models/Predictor.cs b/backend/api/api/Models/Predictor.cs index bfe95a0f..5a7b5eda 100644 --- a/backend/api/api/Models/Predictor.cs +++ b/backend/api/api/Models/Predictor.cs @@ -18,15 +18,25 @@ namespace api.Models public string experimentId { get; set; } public string modelId { get; set; } public string h5FileId { get; set; } - public Metric[] metrics { get; set; } - public Metric[] finalMetrics { get; set; } - } - public class Metric + //public Metric[] metrics { get; set; } + + public float[] metricsLoss { get; set; } + public float[] metricsValLoss { get; set; } + public float[] metricsAcc { get; set; } + public float[] metricsValAcc { get; set; } + public float[] metricsMae { get; set; } + public float[] metricsValMae { get; set; } + public float[] metricsMse { get; set; } + public float[] metricsValMse { get; set; } + //public Metric[] finalMetrics { get; set; } + } + + /*public class Metric { string Name { get; set; } string JsonValue { get; set; } - } - + }*/ + }
\ No newline at end of file diff --git a/backend/api/api/Program.cs b/backend/api/api/Program.cs index cf64d58d..5977e843 100644 --- a/backend/api/api/Program.cs +++ b/backend/api/api/Program.cs @@ -37,7 +37,7 @@ builder.Services.AddScoped<IFileService, FileService>(); builder.Services.AddScoped<IJwtToken, JwtToken>(); builder.Services.AddScoped<IExperimentService, ExperimentService>(); builder.Services.AddHostedService<TempFileService>(); -builder.Services.AddHostedService<FillAnEmptyDb>(); +//builder.Services.AddHostedService<FillAnEmptyDb>(); //Ml Api Ip Filter builder.Services.AddScoped<MlApiCheckActionFilter>(container => diff --git a/backend/api/api/appsettings.json b/backend/api/api/appsettings.json index 44d63ac3..b502efeb 100644 --- a/backend/api/api/appsettings.json +++ b/backend/api/api/appsettings.json @@ -16,22 +16,26 @@ "UserStoreDatabaseSettings": { /* LocalHost*/ - /*"ConnectionString": "mongodb://127.0.0.1:27017/", + "ConnectionString": "mongodb://127.0.0.1:27017/", "DatabaseName": "si_project", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment"*/ + "ExperimentCollectionName": "Experiment" + /* "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", + + "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", + 529394dd526811e059dfb5f8f76597ffd90b2fea "DatabaseName": "si_db", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" + "ExperimentCollectionName": "Experiment" */ } }
\ No newline at end of file diff --git a/backend/microservice/api/controller.py b/backend/microservice/api/controller.py index 6f483008..c82634a2 100644 --- a/backend/microservice/api/controller.py +++ b/backend/microservice/api/controller.py @@ -69,15 +69,26 @@ def train(): #dataset, paramsModel, paramsExperiment, callback) - filepath,result,finalMetrics= newmlservice.train(data, paramsModel, paramsExperiment,paramsDataset, train_callback) + filepath,histMetrics= newmlservice.train(data, paramsModel, paramsExperiment,paramsDataset, train_callback) """ f = request.json['filepath'] dataset = pd.read_csv(f) filepath,result=newmlservice.train(dataset,request.json['model'],train_callback) print(result) """ - - + #m = [] + #for attribute, value in result.items(): + #m.append(histMetrics(attribute,str(value)).__dict__) + ''' + m = [] + for attribute, value in result.items(): + m.append({"Name" : attribute, "JsonValue" : value})) + + print("**************************************************************") + print(m) + + print("**************************************************************") + ''' url = config.api_url + "/file/h5" files = {'file': open(filepath, 'rb')} r=requests.post(url, files=files,data={"uploaderId":paramsExperiment['uploaderId']}) @@ -92,15 +103,21 @@ def train(): "experimentId" : paramsExperiment["_id"], "modelId" : paramsModel["_id"], "h5FileId" : fileId, - "metrics" : result, - "finalMetrics":finalMetrics + "metricsLoss":histMetrics[0], + "metricsValLoss":histMetrics[1], + "metricsAcc":histMetrics[2], + "metricsValAcc":histMetrics[3], + "metricsMae":histMetrics[4], + "metricsValMae":histMetrics[5], + "metricsMse":histMetrics[6], + "metricsValMse":histMetrics[7] } #print(predictor) - + url = config.api_url + "/Predictor/add" r = requests.post(url, json=predictor).text - print(r) + #print(r) return r @app.route('/predict', methods = ['POST']) diff --git a/backend/microservice/api/newmlservice.py b/backend/microservice/api/newmlservice.py index 427111a7..85be0c2f 100644 --- a/backend/microservice/api/newmlservice.py +++ b/backend/microservice/api/newmlservice.py @@ -303,7 +303,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): ###OPTIMIZATORI print(paramsModel['optimizer']) if(paramsModel['optimizer']=='Adam'): - opt=tf.keras.optimizers.Adam(learning_rate=3) + opt=tf.keras.optimizers.Adam(learning_rate=float(paramsModel['learningRate'])) elif(paramsModel['optimizer']=='Adadelta'): opt=tf.keras.optimizers.Adadelta(learning_rate=float(paramsModel['learningRate'])) @@ -370,7 +370,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): - classifier.compile(loss =paramsModel["lossFunction"] , optimizer =opt, metrics = ['mae','mse']) + classifier.compile(loss =paramsModel["lossFunction"] , optimizer =opt, metrics = ['accuracy','mae','mse']) history=classifier.fit( x=x_train, y=y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id']),validation_data=(x_val, y_val)) @@ -383,9 +383,9 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): scores = classifier.evaluate(x_test, y_test) #print("\n%s: %.2f%%" % (classifier.metrics_names[1], scores[1]*100)) - + ''' classifier.save(filepath, save_format='h5') - metrics={} + macro_averaged_precision=sm.precision_score(y_test, y_pred, average = 'macro') micro_averaged_precision=sm.precision_score(y_test, y_pred, average = 'micro') macro_averaged_recall=sm.recall_score(y_test, y_pred, average = 'macro') @@ -401,12 +401,12 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): {"Name":"macro_averaged_f1","JsonValue": str(macro_averaged_f1)}, {"Name":"micro_averaged_f1", "JsonValue": str(micro_averaged_f1)} ] - + ''' #vizuelizacija u python-u #from ann_visualizer.visualize import ann_viz; #ann_viz(classifier, title="My neural network") - return filepath,hist,metrics + return filepath,[hist['loss'],hist['val_loss'],hist['accuracy'],hist['val_accuracy'],hist['mae'],hist['val_mae'],hist['mse'],hist['val_mse']] elif(problem_type=='binarni-klasifikacioni'): #print('*************************************************************************binarni') @@ -444,6 +444,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): history=classifier.fit( x=x_train, y=y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id']),validation_data=(x_val, y_val)) hist=history.history + y_pred=classifier.predict(x_test) y_pred=(y_pred>=0.5).astype('int') @@ -452,7 +453,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): # ann_viz(classifier, title="My neural network") classifier.save(filepath, save_format='h5') - + """ accuracy = float(sm.accuracy_score(y_test,y_pred)) precision = float(sm.precision_score(y_test,y_pred)) recall = float(sm.recall_score(y_test,y_pred)) @@ -461,22 +462,9 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): f1 = float(sm.f1_score(y_test,y_pred)) fpr, tpr, _ = sm.roc_curve(y_test,y_pred) logloss = float(sm.log_loss(y_test, y_pred)) - metrics= [ - {"Name":"accuracy" ,"JsonValue": str(accuracy)}, - {"Name":"precision","JsonValue": str(precision)}, - {"Name":"recall" , "JsonValue":str(recall)}, - {"Name":"specificity" ,"JsonValue":str(specificity)}, - {"Name":"f1" ,"JsonValue": str(f1)}, - {"Name":"tn" , "JsonValue":str(tn)}, - {"Name":"fp" , "JsonValue":str(fp)}, - {"Name":"fn" , "JsonValue":str(fn)}, - {"Name":"tp" , "JsonValue":str(tp)}, - {"Name":"fpr" ,"JsonValue": str(fpr.tolist())}, - {"Name":"tpr" , "JsonValue":str(tpr.tolist())}, - {"Name":"logloss" , "JsonValue":str(logloss)} - ] + """ - return filepath,hist,metrics + return filepath,[hist['loss'],hist['val_loss'],hist['accuracy'],hist['val_accuracy'],hist['mae'],hist['val_mae'],hist['mse'],hist['val_mse']] elif(problem_type=='regresioni'): reg=paramsModel['layers'][0]['regularisation'] @@ -514,15 +502,15 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): history=classifier.fit( x=x_train, y=y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id']),validation_data=(x_val, y_val)) hist=history.history - print() + y_pred=classifier.predict(x_test) #print(classifier.evaluate(x_test, y_test)) classifier.save(filepath, save_format='h5') - metrics={} + ''' mse = float(sm.mean_squared_error(y_test,y_pred)) - metrics.append + mae = float(sm.mean_absolute_error(y_test,y_pred)) mape = float(sm.mean_absolute_percentage_error(y_test,y_pred)) rmse = float(np.sqrt(sm.mean_squared_error(y_test,y_pred))) @@ -533,6 +521,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): n = 40 k = 2 adj_r2 = float(1 - ((1-r2)*(n-1)/(n-k-1))) + metrics= [ {"Name":"mse","JsonValue":str(mse)}, @@ -543,8 +532,8 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): {"Name":"r2","JsonValue":str( r2)}, {"Name":"adj_r2","JsonValue":str(adj_r2)} ] - - return filepath,hist,metrics + ''' + return filepath,[hist['loss'],hist['val_loss'],[],[],hist['mae'],hist['val_mae'],hist['mse'],hist['val_mse']] def roc_auc_score_multiclass(actual_class, pred_class, average = "macro"): diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 8fc36a31..f527dc7f 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -117,8 +117,8 @@ export enum ActivationFunctionOutputLayer export enum LossFunction { // binary classification loss functions BinaryCrossEntropy = 'binary_crossentropy', - SquaredHingeLoss = 'squared_hinge_loss', - HingeLoss = 'hinge_loss', + SquaredHingeLoss = 'squared_hinge', + HingeLoss = 'hinge', // multi-class classification loss functions CategoricalCrossEntropy = 'categorical_crossentropy', SparseCategoricalCrossEntropy = 'sparse_categorical_crossentropy', diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts index c839a635..8de4cd17 100644 --- a/frontend/src/app/_data/Predictor.ts +++ b/frontend/src/app/_data/Predictor.ts @@ -13,8 +13,16 @@ export default class Predictor extends FolderFile { public experimentId: string = "", public modelId: string = "", public h5FileId: string = "", - public metrics: Metric[] = [], - public finalMetrics: Metric[] = [] + public metricsLoss:number[]=[], + public metricsValLoss:number []=[], + public metricsAcc:number[]=[], + public metricsValAcc: number[]=[], + public metricsMae :number []=[], + public metricsValMae :number []=[], + public metricsMse : number[]=[], + public metricsValMse : number[]=[], + //public metrics: Metric[] = [], + //public finalMetrics: Metric[] = [] ) { super(name, dateCreated, dateCreated); } diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts index bf5e3fd6..07976da3 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -28,10 +28,28 @@ export class BoxPlotComponent implements AfterViewInit { updateChart(min: number, max: number, q1: number, q3: number, median: number) { if (this.myChart) { this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]] - this.myChart.update(); + this.myChart?.update(); } + /*this.boxplotData.datasets = [{ + data: [[min, q1, median, q3, max]], + }]*/ + }; + /* + updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){ + //console.log(this.uniqueValues, this.uniqueValuesPercent); + this.pieChartData.datasets = [{ + label: "%", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"], + data: uniqueValuesPercent, + }]; + this.pieChartData.labels = uniqueValues + console.log(this.uniqueValues, this.uniqueValuesPercent); + this.myChart?.update() + }; + */ + @ViewChild('boxplot') chartRef!: ElementRef; constructor() { //this.updateChart(); diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts index cba5252a..9264e41c 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts @@ -58,10 +58,6 @@ export class PieChartComponent implements AfterViewInit { data: data , options: { - /*title: { - display: true, - text: 'Predicted world population (millions) in 2050' - }*/ plugins:{ legend: { display: false diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index f7f07e62..311773f7 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -22,7 +22,7 @@ table.fixed td { table.fixed th { overflow: hidden; - max-width: 120px; + max-width: 250px; min-width: 120px; vertical-align: middle; background-color: var(--ns-primary-50); 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 31c32dfd..e6a781be 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -35,7 +35,7 @@ </thead> <tbody> <tr *ngFor="let row of tableData; let i = index"> - <th>#{{i}}</th> + <th>#{{((this.begin/10)+1)*10-10+i+1}}</th> <td *ngFor="let col of row; let j = index" [ngClass]="{'text-disabled' : !columnsChecked[j]}"> <div class="text-overflow"> {{col}} @@ -200,7 +200,7 @@ </mat-menu> </div> <div *ngIf="colInfo.numNulls == 0" class="text-left"> - Nema null vrednosti. + Nema nedostajućih vrednosti. </div> </td> </tr> @@ -217,7 +217,7 @@ <div class="ns-col rounded"> <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100"> <mat-label>Izlazna kolona</mat-label> - <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeProblemType()"> + <mat-select [(value)]="experiment.outputColumn" (selectionChange)="outputColumnChanged()"> <mat-option *ngFor="let inputColumn of experiment.inputColumns" [value]="inputColumn">{{inputColumn}}</mat-option> <mat-option *ngIf="experiment.inputColumns.length == 0" value="-">-</mat-option> </mat-select> 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 ad78feaf..694b1a83 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -131,6 +131,7 @@ export class ColumnTableComponent implements AfterViewInit { } else { this.dataset = dataset; + this.experimentChanged.emit(); this.columnsChecked = []; this.dataset.columnInfo.forEach(column => { if (this.experiment.inputColumns.find(x => x == column.columnName) != undefined) @@ -157,9 +158,6 @@ export class ColumnTableComponent implements AfterViewInit { this.resetPagging(); this.loadData(); this.loaded = true; - - this.updateCharts(); - this.updatePieChart(); } loadData(){ @@ -249,6 +247,19 @@ export class ColumnTableComponent implements AfterViewInit { } } + outputColumnChanged() { + let outputColReplacer = this.experiment.nullValuesReplacers.find(x => x.column == this.experiment.outputColumn); + let index = this.experiment.nullValuesReplacers.findIndex(x => x.column == this.experiment.outputColumn); + if (outputColReplacer != undefined) { + outputColReplacer.option = NullValueOptions.DeleteRows; + + let numOfRowsToDelete = (this.dataset!.columnInfo.filter(x => x.columnName == this.experiment.outputColumn)[0]).numNulls; + this.nullValOption[index] = "Obriši redove (" + numOfRowsToDelete + ")"; + } + + this.changeProblemType(); + } + changeProblemType() { if (this.experiment != undefined && this.dataset != undefined) { let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn); @@ -300,14 +311,26 @@ export class ColumnTableComponent implements AfterViewInit { if (selectedMissingValuesOption == NullValueOptions.DeleteColumns) { this.experiment.nullValues = NullValueOptions.DeleteColumns; + + let outputColReplacer = this.experiment.nullValuesReplacers.find(x => x.column == this.experiment.outputColumn); + this.experiment.nullValuesReplacers = []; for (let i = 0; i < this.experiment.inputColumns.length; i++) { - this.experiment.nullValuesReplacers.push({ //ovo zakomentarisano - column: this.experiment.inputColumns[i], - option: NullValueOptions.DeleteColumns, - value: "" - }); - this.nullValOption[i] = "Obriši kolonu"; + if (this.experiment.inputColumns[i] != this.experiment.outputColumn) { + this.experiment.nullValuesReplacers.push({ //ovo zakomentarisano + column: this.experiment.inputColumns[i], + option: NullValueOptions.DeleteColumns, + value: "" + }); + this.nullValOption[i] = "Obriši kolonu"; + } + else { + if (outputColReplacer != undefined) { + this.experiment.nullValuesReplacers.push(outputColReplacer); + let numOfRowsToDelete = (this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.inputColumns[i])[0]).numNulls; + this.nullValOption[i] = (outputColReplacer.option == NullValueOptions.DeleteRows) ? "Obriši redove (" + numOfRowsToDelete + ")" : "Popuni sa " + outputColReplacer.value + ""; + } + } } //obrisi kolone koje sadrze nedostajuce vrednosti iz input kolona /*for (let i = 0; i < this.dataset.columnInfo.length; i++) { @@ -336,7 +359,8 @@ export class ColumnTableComponent implements AfterViewInit { } openMissingValuesDialog() { const dialogRef = this.dialog.open(MissingvaluesDialogComponent, { - width: '500px' + width: '500px', + panelClass: 'custom-modalbox' }); dialogRef.afterClosed().subscribe(selectedMissingValuesOption => { if (selectedMissingValuesOption != undefined) diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 2b7892a3..97c13299 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -184,7 +184,7 @@ .file-bottom-buttons { position: absolute; - bottom: 15px; + bottom: 5px; right: 4%; display: flex; flex-direction: row-reverse; diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html index 2d7e4d86..84793260 100644 --- a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html @@ -1,9 +1,9 @@ - - - <h2 mat-dialog-title >{{data.title}}</h2> - <div mat-dialog-content class="mt-4 text-offwhite" > - {{data.message}} - </div> - <div mat-dialog-actions class="d-flex justify-content-center mt-4"> +<h2 mat-dialog-title>{{data.title}}</h2> +<div mat-dialog-content class="mt-4 text-offwhite"> + <form (keydown)="withEnterKey($event)"> + {{data.message}} + </form> +</div> +<div mat-dialog-actions class="d-flex justify-content-center mt-4"> <button mat-raised-button cdkFocusInitial (click)="onOkClick()" color="basic">OK</button> - </div>
\ No newline at end of file +</div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts index e15f3c6f..7558b527 100644 --- a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts @@ -20,9 +20,11 @@ export class AlertDialogComponent { //public dialog: MatDialog ) {} + withEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.onOkClick(); + } onOkClick(): void { this.dialogRef.close(); } - - } diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html index 08c1f26b..fed8f8d7 100644 --- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html @@ -1,15 +1,17 @@ <h2 mat-dialog-title class="text-center">Enkodiranje svih kolona</h2> <div mat-dialog-content class="mt-5 mb-4"> <p>Sve izabrane kolone biće enkodirane metodom:</p> - <form (keydown)="withEnterKey($event)"> - <mat-form-field> - <mat-select matNativeControl [(value)]="selectedEncodingType" cdkFocusInitial> - <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option"> - {{ optionName }} - </mat-option> - </mat-select> - </mat-form-field> - </form> + <div class="d-flex justify-content-center"> + <form (keydown)="withEnterKey($event)"> + <mat-form-field> + <mat-select matNativeControl [(value)]="selectedEncodingType" cdkFocusInitial> + <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> + </form> + </div> </div> <div mat-dialog-actions class="justify-content-center"> <button id="btnYes" mat-stroked-button color="basic" (click)="onYesClick()">Potvrdi</button> diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css index e99a1e1e..64d7bd21 100644 --- a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css +++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css @@ -5,4 +5,8 @@ #btnNo { color: gray; +} + +::ng-deep.mat-dialog-content { + overflow: visible; }
\ No newline at end of file diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html index 06e74093..77e7be42 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html @@ -1,8 +1,10 @@ <h2 mat-dialog-title class="text-muted">{{data.title}}</h2> <div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);"> - {{data.message}} + <form (keydown)="withEnterKey($event)"> + {{data.message}} + </form> </div> <div mat-dialog-actions class="d-flex justify-content-center mt-4"> - <button mat-button cdkFocusInitial (click)="onYesClick()" style="background-color: lightgray;">Da</button> - <button mat-button cdkFocusInitial (click)="onNoClick()" style="background-color: lightgray;">Ne</button> + <button mat-button cdkFocusInitial (click)="onYesClick()" style="background-color: lightgray;">Da</button> + <button mat-button cdkFocusInitial (click)="onNoClick()" style="background-color: lightgray;">Ne</button> </div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.ts b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.ts index de1cdd4f..a7db1e7f 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.ts +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.ts @@ -24,10 +24,13 @@ export class YesNoDialogComponent { onNoClick(): void { this.dialogRef.close(); } - onYesClick():void{ + + withEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.onYesClick(); + } + onYesClick():void { this.data.yesFunction(); this.dialogRef.close(); } - - } diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 2298ae48..59e004e9 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -48,6 +48,7 @@ mat-stepper { flex-direction: row; justify-content: center; align-items: center; + /*margin-bottom: 100px;*/ } .step-content-inside { @@ -66,4 +67,11 @@ mat-stepper { .text-overflow { overflow-wrap: break-word; + width: 170px; + display: inline-block; + text-align: left; +} + +.text-overflow-experiment-name { + overflow-wrap: break-word; }
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 8f462f86..17a6539d 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -2,10 +2,10 @@ <div class="d-flex flex-colum align-items-center sidenav"> <div> <div class="ekspName " style="width: 250px;"> - <div class="text-overflow" *ngIf="experiment.name=='exp1'" style="width: 250px;"> + <div class="text-overflow-experiment-name" *ngIf="experiment.name=='exp1'" style="width: 250px;"> Novi Eksperiment </div> - <div class="text-overflow" *ngIf="experiment.name!='exp1'" style="width: 250px;"> + <div class="text-overflow-experiment-name" *ngIf="experiment.name!='exp1'" style="width: 250px;"> {{experiment.name}} </div> @@ -14,37 +14,37 @@ <mat-step [completed]="this.step1"> <!--editable="false"--> <ng-template matStepLabel> - <span class="label" *ngIf="dataset==undefined">Izvor podataka </span> - <span class="label addedElement" *ngIf="dataset!=undefined">{{dataset.name}}</span> + <span class="label text-overflow" *ngIf="dataset==undefined">Izvor podataka </span> + <span class="label addedElement text-overflow" *ngIf="dataset!=undefined">{{dataset.name}}</span> </ng-template> <ng-template matStepContent> - <p class="text-left">Izaberite izvor podataka</p> + <p class="text-left text-overflow">Izaberite izvor podataka</p> </ng-template> </mat-step> <mat-step [completed]="experiment._id!=''"> <ng-template matStepLabel> - <span class="label addedElement" *ngIf="experiment._id!=''">Predvideti:{{experiment.outputColumn}}</span> + <span class="label addedElement text-overflow" *ngIf="experiment._id!=''">Predvideti:{{experiment.outputColumn}}</span> <span *ngIf="!this.step1" class="align-middle"><mat-icon>lock</mat-icon></span> - <span class="label" *ngIf="experiment._id==''">Odabir kolona </span> + <span class="label text-overflow" *ngIf="experiment._id==''">Odabir kolona </span> </ng-template> <ng-template matStepContent> - <p class="text-left">Pripremite podatke i izaberite izlazne kolone</p> + <p class="text-left text-overflow">Pripremite podatke i izaberite izlazne kolone</p> </ng-template> </mat-step> <mat-step [completed]="this.step3"> <ng-template matStepLabel> <span *ngIf="experiment._id==''" class="align-middle"><mat-icon>lock</mat-icon></span> - <span class="label addedElement" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span> - <span class="label" *ngIf="modelToTrain==undefined">Treniranje</span> + <span class="label addedElement text-overflow" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span> + <span class="label text-overflow" *ngIf="modelToTrain==undefined">Treniranje</span> </ng-template> - <p class="text-left">Odaberite parametre i trenirajte model</p> + <p class="text-left text-overflow">Odaberite parametre i trenirajte model</p> </mat-step> <mat-step [completed]="this.step4"> <ng-template matStepLabel> <span *ngIf="!this.step3" class="align-middle"><mat-icon>lock</mat-icon></span> - <span class="label">Pregled rezultata<br> treniranja</span> + <span class="label text-overflow align-middle">Pregled rezultata<br> treniranja</span> </ng-template> - <p class="text-left">Pregledajte tok treniranja i<br> grafički prikaz rezultata</p> + <p class="text-left text-overflow">Pregledajte tok treniranja i<br> grafički prikaz rezultata</p> </mat-step> </mat-stepper> </div> diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 161c619a..ee269f65 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -57,7 +57,7 @@ export class ExperimentComponent implements AfterViewInit, OnInit { this.dataset = response; this.folderDataset.forExperiment = this.experiment; this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju - + //this.predictorsService.getPredictor(predictorId!).subscribe((response) => { let predictor = response; //this.modelsService.getModelById(predictor.modelId).subscribe((response) => { diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 8c60a666..56442842 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -18,7 +18,8 @@ const routes: Routes = [ { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } }, { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } }, { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } }, - { path: 'test', component: TestComponent, data: { title: 'Test' } } + { path: 'test', component: TestComponent, data: { title: 'Test' } }, + { path: '**', redirectTo: '' } ]; @NgModule({ |