Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into Redesign

9 files changed, 159 insertions, 106 deletions

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 094378f3..a3b86bdf 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -21,7 +21,7 @@ export default class Model {
         public metrics: string[] = [], // TODO add to add-model form
         public epochs: number = 5, // TODO add to add-model form
         public inputColNum:number=5,
-        public learningRate:number=0.01,
+        public learningRate:LearningRate=LearningRate.LR1,
         public layers:Layer[]=[new Layer()]
 
     ) { }
@@ -32,16 +32,41 @@ export class Layer{
         public activationFunction:ActivationFunction=ActivationFunction.Sigmoid,
         public neurons:number=1,
         public regularisation:Regularisation=Regularisation.L1,
-        public regularisationRate:number=0.01
+        public regularisationRate:RegularisationRate=RegularisationRate.RR1,
 
     )
     {}   
     
 }
+export enum LearningRate{
+    LR1='0.00001',
+    LR2='0.0001',
+    LR3='0.001',
+    LR4='0.003',
+    LR5='0.01',
+    LR6='0.03',
+    LR7='0.1',
+    LR8='0.3',
+    LR9='1',
+    LR10='3',
+    LR11='10',
+}
 export enum Regularisation{
     L1='l1',
     L2='l2'
 }
+export enum RegularisationRate{
+    RR1='0',
+    RR2='0.001',
+    RR3='0.003',
+    RR4='0.01',
+    RR5='0.03',
+    RR6='0.1',
+    RR7='0.3',
+    RR8='1',
+    RR9='3',
+    RR10='10',
+}
 export enum ProblemType {
     Regression = 'regresioni',
     BinaryClassification = 'binarni-klasifikacioni',
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 078e7176..45e83e83 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
@@ -16,33 +16,32 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
 })
 export class BoxPlotComponent implements AfterViewInit {
 
-  @Input()width: number = 800;
-  @Input()height: number = 450;
+  @Input()width: number = 600;
+  @Input()height: number = 800;
   
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
 
   boxplotData = {
     // define label tree
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-    datasets: [{
-    label: 'Dataset 1',
-    backgroundColor: 'rgba(255,0,0,0.5)',
-    borderColor: 'red',
-    borderWidth: 1,
-    outlierColor: '#999999',
-    padding: 10,
-    itemRadius: 0,
-    data: [
-    randomValues(100, 0, 100),
-    randomValues(100, 0, 20),
-    randomValues(100, 20, 70),
-    randomValues(100, 60, 100),
-    randomValues(40, 50, 100),
-    randomValues(100, 60, 120),
-    randomValues(100, 80, 100)
-    ]
-    }, {
+    labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
+      datasets: [{
+      label: 'Dataset 1',
+      backgroundColor: 'rgba(255,0,0,0.5)',
+      borderColor: 'red',
+      borderWidth: 1,
+      outlierColor: '#999999',
+      padding: 10,
+      itemRadius: 0,
+      data: [
+      randomValues(100, 0, 100),
+      /*randomValues(100, 0, 20),
+      randomValues(100, 20, 70),
+      randomValues(100, 60, 100),
+      randomValues(40, 50, 100),
+      randomValues(100, 60, 120),
+      randomValues(100, 80, 100)*/
+    ]}/*, {
     label: 'Dataset 2',
     backgroundColor: 'rgba(0,0,255,0.5)',
     borderColor: 'blue',
@@ -59,12 +58,29 @@ export class BoxPlotComponent implements AfterViewInit {
     randomValues(100, 20, 100),
     randomValues(100, 80, 100)
     ]
-    }]
+    }*/]
     };
   ngAfterViewInit(): void {
   const myChart = new Chart(this.chartRef.nativeElement, {
     type: "boxplot",
-    data: this.boxplotData
+    data: this.boxplotData,
+    options: {
+      /*title: {
+        display: true,
+        text: 'Predicted world population (millions) in 2050'
+      }*/
+      plugins:{   
+        legend: {
+          display: false
+                },
+             },
+             scales : {
+              y : {
+                  min: -50,
+                  max: 200
+              }
+          }
+    }
   });
 }
 
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 3f2dbfaf..248c9aa8 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
@@ -8,7 +8,7 @@ import {Chart} from 'chart.js';
 })
 export class PieChartComponent implements AfterViewInit {
 
-  @Input()width: number = 800;
+  @Input()width: number = 600;
   @Input()height: number = 450;
   
   @ViewChild('piechart') chartRef!: ElementRef;
@@ -25,12 +25,17 @@ export class PieChartComponent implements AfterViewInit {
         data: [2478,5267,734,784,433]
       }]
     },
-    /*options: {
-      title: {
+    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.html b/frontend/src/app/_elements/column-table/column-table.component.html
index 1a5a5e81..8551f710 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -23,9 +23,8 @@
         <tr>
             <th>Grafik</th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                <!-- <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot>
-                TODO: dodati [data]
-                <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart> -->
+                <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot>
+                <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart>
             </td>
         </tr>
         <tr>
@@ -48,8 +47,8 @@
                 </span>
             </td>
         </tr>
-        <tr>
-            <th class="brighter" (click)="openEncodingDialog()">Enkoding&nbsp;
+        <tr style="padding: 0">
+            <th class="brighter" (click)="openEncodingDialog()">Enkoding
                 <span class="material-icons-round">settings</span>
             </th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
@@ -99,24 +98,28 @@
 
             </td>
         </tr>
-        <tr *ngFor="let element of [1, 2]; let i = index">
-            <th *ngIf="i == 0" rowspan="2">Vrednosti</th>
+        <tr *ngFor="let row of tableData; let i = index">
+            <th *ngIf="i == 0" [attr.rowspan]="tableData!.length">Vrednosti</th>
+
 
-            <td *ngFor="let colInfo of dataset.columnInfo; let j = index">
-                <!--<app-datatable [data]=""></app-datatable>-->ok
+            <td *ngFor="let col of row; let j = index">
+                <div style="overflow: auto">
+                    {{col}}
+                </div>
             </td>
         </tr>
     </tbody>
 </table>
 
 <div class="container text-offwhite belowColumn">
-    <div class="row " >
+    <div class="row ">
         <div class="col-sm slider rounded">
             <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div>
-            <div class="text-center pt-0 mt-0">Trening<mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>Test</div>
-            
+            <div class="text-center pt-0 mt-0">Trening
+                <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>Test</div>
+
         </div>
-        
+
         <div class="col-sm-3 d-flex pt-3">
             <mat-form-field appearance="fill" style="width: 270px;">
                 <mat-label>Tip problema</mat-label>
@@ -128,7 +131,7 @@
             </mat-form-field>
         </div>
         <div class="col-sm-3 d-flex pt-3">
-            <mat-form-field appearance="fill" >
+            <mat-form-field appearance="fill">
                 <mat-label>Izlazna kolona</mat-label>
                 <mat-select>
                     <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option>
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 f3aedd1b..9cb038bc 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -8,6 +8,7 @@ import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dial
 import { MatSliderChange } from '@angular/material/slider';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { CsvParseService } from 'src/app/_services/csv-parse.service';
 
 @Component({
   selector: 'app-column-table',
@@ -24,9 +25,10 @@ export class ColumnTableComponent implements AfterViewInit {
   Encoding = Encoding;
   NullValueOptions = NullValueOptions;
   tableData?: any[][];
+  nesto = 10;
 
   testSetDistribution:number=70;
-  constructor(private datasetService: DatasetsService, public dialog: MatDialog) { 
+  constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { 
     //ovo mi nece trebati jer primam dataset iz druge komponente
   }
 
@@ -41,11 +43,17 @@ export class ColumnTableComponent implements AfterViewInit {
       this.resetColumnEncodings(Encoding.Label);
       this.setDeleteColumnsForMissingValTreatment();
 
-      /*this.tableData = this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => {
+      /*this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => {
         if (file) {
           //this.tableData = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
         }
       });*/
+      this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => {
+        if (response && this.dataset != undefined) {
+          this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter);
+          console.log(this.tableData);
+        }
+      });
     });
   }
 
diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css
index f4d085ea..051e23fc 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -12,8 +12,10 @@ mat-form-field{
     padding: 0;
 }
 hr{
-    color: var(--offwhite) !important;
-    margin-bottom: 30px;;
+    color:var(--ns-primary) 100%;
+    margin-bottom: 30px;
+    height: 2px;
+
 }
 .row{
     margin: 0;
@@ -29,7 +31,7 @@ mat-icon{
 .neuron{
   
     text-align: justify;
-    border: 1px solid white;
+    border: 1px solid  var(--ns-primary);
     border-radius: 5px;
     padding: 0;
     color: white!important;
@@ -39,7 +41,7 @@ mat-icon{
    
 }
 mat-form-field{
-    font-size: 12px;
+    font-size: 15px;
 }
 col-1{
     text-align: center;
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 ac5ca9ab..6435b8d6 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -4,28 +4,20 @@
         <div class="row">
           <mat-form-field class="example-full-width" appearance="fill">
             <mat-label>Naziv</mat-label>
-            <input type="text" matInput [formControl]="nameFormControl">
-            <mat-error *ngIf="nameFormControl.hasError('name') && !nameFormControl.hasError('required')">
-              Unesite naziv
-            </mat-error>
-            <mat-error *ngIf="nameFormControl.hasError('required')">
-              Naziv je <strong>obavezan</strong>
-            </mat-error>
+            <input type="text" matInput [(ngModel)]="newModel.name">
           </mat-form-field>
         </div>
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Tip problema</mat-label>
-                <mat-select matNativeControl required [formControl]="selectTypeFormControl">
+                <mat-select  [(ngModel)]="newModel.type">
                     <mat-option
                     *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
                     [value]="option">
                     {{ optionName }}
                 </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectTypeFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+                
               </mat-form-field>
         </div>
       </div>
@@ -33,31 +25,27 @@
         <div class="row">
             <mat-form-field appearance="fill">
                 <mat-label>Optimizacija</mat-label>
-                <mat-select matNativeControl required [formControl]="selectOptFormControl">
+                <mat-select  [(ngModel)]="newModel.optimizer">
                     <mat-option
                     *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
                     [value]="option">
                     {{ optionName }}
                 </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectOptFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+              
               </mat-form-field>
         </div>
         <div class="row">
                   <mat-form-field appearance="fill">
                 <mat-label>Funkcija troška</mat-label>
-                <mat-select matNativeControl required [formControl]="selectLFFormControl">
+                <mat-select [(ngModel)]="newModel.lossFunction">
                     <mat-option
-                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
                             [value]="option">
                             {{ optionName }}
                         </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectLFFormControl.hasError('required')">
-                  Obavezno polje
-                </mat-error>
+               
               </mat-form-field>
         </div>
       </div>
@@ -66,32 +54,28 @@
               
               <mat-form-field appearance="fill">
                   <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
-                  <mat-select matNativeControl required [formControl]="selectAFFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                  <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
                       <mat-option
                       *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
                       [value]="option">
                       {{ optionName }}
                   </mat-option>
                   </mat-select>
-                  <mat-error *ngIf="selectAFFormControl.hasError('required')">
-                      Obavezno polje
-                  </mat-error>
+            
                 </mat-form-field>
           
         </div>
         <div class="row">
               <mat-form-field appearance="fill">
-                <mat-label>Funkcija troška</mat-label>
-                <mat-select matNativeControl required [formControl]="selectLFFormControl">
+                <mat-label>Stopa učenja</mat-label>
+                <mat-select  [(ngModel)]="newModel.learningRate">
                     <mat-option
-                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                            *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)"
                             [value]="option">
                             {{ optionName }}
                         </mat-option>
                 </mat-select>
-                <mat-error *ngIf="selectLFFormControl.hasError('required')">
-                  Obavezno polje
-                </mat-error>
+                
               </mat-form-field>
         </div>
       </div>
@@ -130,19 +114,19 @@
         {{item}}
         <div class="neuron">
           <div style="text-align: center;">
-            <label >Skriveni sloj</label>
+            <label >Skriveni sloj {{i+1}}</label>
           </div>
           <div class="row" style="margin-bottom: -10px;">
             <mat-form-field appearance="fill">
                 <mat-label>Aktivaciona funkcija</mat-label>
-                <mat-select matNativeControl required [formControl]="selectActivationFormControl">
-                  <mat-option value="saab">Relu</mat-option>
-                  <mat-option value="mercedes">Sigmoid</mat-option>
-                  <mat-option value="audi">Softmax</mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectActivationFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+                <mat-select  [(ngModel)]="newModel.layers[i].activationFunction">
+                  <mat-option
+                          *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                          [value]="option">
+                          {{ optionName }}
+                      </mat-option>
+              </mat-select>
+                
               </mat-form-field>
             </div>
         <div class="row" >
@@ -155,26 +139,27 @@
               <div class='row' style="margin-bottom: -7px;">
               <mat-form-field appearance="fill">
                 <mat-label>Regularizacija</mat-label>
-                <mat-select matNativeControl required [formControl]="selectRegularisationFormControl">
-                  <mat-option value="l1">L1</mat-option>
-                  <mat-option value="l2">L2</mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectRegularisationFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+                <mat-select [(ngModel)]="newModel.layers[i].regularisation">
+                  <mat-option
+                          *ngFor="let option of Object.keys(Regularisation); let optionName of Object.values(Regularisation)"
+                          [value]="option">
+                          {{ optionName }}
+                      </mat-option>
+              </mat-select>
+                
               </mat-form-field>
               </div>
             <div class="row" style="margin-bottom: -7px;">
               <mat-form-field appearance="fill">
                 <mat-label>Stopa regularizacije</mat-label>
-                <mat-select matNativeControl required [formControl]="selectRRateFormControl">
-                  <mat-option value="saab">0.001</mat-option>
-                  <mat-option value="mercedes">0.01</mat-option>
-                  <mat-option value="audi">0.1</mat-option>
-                </mat-select>
-                <mat-error *ngIf="selectRRateFormControl.hasError('required')">
-                    Obavezno polje
-                </mat-error>
+                <mat-select [(ngModel)]="newModel.layers[i].regularisationRate">
+                  <mat-option
+                          *ngFor="let option of Object.keys(RegularisationRate); let optionName of Object.values(RegularisationRate)"
+                          [value]="option">
+                          {{ optionName }}
+                      </mat-option>
+              </mat-select>
+               
               </mat-form-field>
             </div>
         </div>
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts
index 40bc30ea..c3c73b3e 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angul
 import {FormControl, Validators} from '@angular/forms';
 import Shared from 'src/app/Shared';
 import Experiment from 'src/app/_data/Experiment';
-import Model, {Layer, ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
+import Model, {Layer, ActivationFunction, LossFunction,LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType ,Regularisation,RegularisationRate} from 'src/app/_data/Model';
 import { GraphComponent } from '../graph/graph.component';
 import {FormGroupDirective, NgForm} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
@@ -35,19 +35,25 @@ export class FormModelComponent implements OnInit {
   selectActivationFormControl = new FormControl('', Validators.required);
   selectRegularisationFormControl = new FormControl('', Validators.required);
   selectRRateFormControl = new FormControl('', Validators.required);
+
   newModel: Model = new Model();
   myModels?: Model[];
+
   selectedModel?: Model;
 
   ProblemType = ProblemType;
   ActivationFunction = ActivationFunction;
+  RegularisationRate=RegularisationRate;
+  Regularisation=Regularisation;
   metrics: any = Metrics;
   LossFunction = LossFunction;
   Optimizer = Optimizer;
   Object = Object;
   document = document;
   shared = Shared;
-
+  LearningRate=LearningRate;
+  Layer=Layer;
+  
   term: string = "";
   selectedMetrics = [];
   lossFunction: any = LossFunction;
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index ff96c39b..3b6e6b64 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -27,6 +27,9 @@ export class DatasetsService {
   getDatasetFile(fileId: any): any {
     return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' });
   }
+  getDatasetFilePartial(fileId: any, startRow: number, rowNum: number): Observable<any> {
+    return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}/${startRow}/${rowNum}`, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
 
   editDataset(dataset: Dataset): Observable<Dataset> {
     return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() });