Ispravio graph da radi sa razlicitim brojem neurona za svaki sloj, uskladio sve korake na experiment strani, promenio stil navbara, dodao bottom dugmice u folder. Dodao responzivnost na nekim komponentama.

3 files changed, 266 insertions, 271 deletions

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 051e23fc..c0ae9365 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.css
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
@@ -1,52 +1,114 @@
-#container{
-    color:var(--offwhite);
+#container {
+    color: var(--offwhite);
 }
-mat-label{
+
+mat-label {
     color: var(--offwhite) !important;
 }
-select{
+
+select {
     color: var(--offwhite) !important;
 }
-mat-form-field{
+
+mat-form-field {
     color: var(--offwhite) !important;
     padding: 0;
+    margin: 5px;
+    font-size: 12px;
+    width: 100%;
 }
-hr{
-    color:var(--ns-primary) 100%;
-    margin-bottom: 30px;
-    height: 2px;
 
+hr {
+    color: var(--offwhite) !important;
+    margin-bottom: 30px;
+    ;
 }
-.row{
-    margin: 0;
-    padding: 0;
-}
-mat-icon{
-    color: var(--ns-primary);
-}
-#rowhn{
-    margin-bottom:-50px;
-    padding: 0;
-}
-.neuron{
-  
+
+.neuron {
     text-align: justify;
-    border: 1px solid  var(--ns-primary);
+    border: 1px solid white;
     border-radius: 5px;
     padding: 0;
-    color: white!important;
+    color: var(--offwhite) !important;
     background-color: var(--ns-bg-dark-100) !important;
     min-width: none;
     max-width: 12.5rem;
-   
 }
-mat-form-field{
-    font-size: 15px;
-}
-col-1{
+
+col-1 {
     text-align: center;
 }
-mat-icon{
-    margin-right: 5px;
-    margin-left: -7px;
+
+.row {
+    margin: 0;
+    padding: 0;
+}
+
+.ns-row {
+    width: 98%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+}
+
+.ns-col {
+    flex-grow: 1;
+    padding: 2px;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+::ng-deep .mat-form-field-wrapper {
+    margin-bottom: -1.85em;
+}
+
+.break-1,
+.break-2 {
+    height: 1px;
+    width: 100%;
+}
+
+@media screen and (min-width: 1200px) {
+    .break-1 {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 2175px) {
+    .break-2 {
+        display: none;
+    }
+}
+
+#layers-control {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+#layers {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-wrap: break-word;
+    overflow-y: hidden;
+    width: 100%;
+}
+
+.layer {
+    border: 1px solid var(--ns-primary);
+    border-radius: 4px;
+    margin: 5px;
+    padding: 3px;
+    width: 12rem;
+    height: 13rem;
+}
+
+.layer>mat-form-field {
+    margin-left: 0;
 }
\ No newline at end of file
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 6435b8d6..396d40c6 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -1,169 +1,153 @@
 <div id="container">
-    <div class="row">
-      <div class="col-sm">
-        <div class="row">
-          <mat-form-field class="example-full-width" appearance="fill">
-            <mat-label>Naziv</mat-label>
-            <input type="text" matInput [(ngModel)]="newModel.name">
-          </mat-form-field>
+    <div class="ns-row">
+
+        <div class="ns-col">
+            <mat-form-field class="example-full-width" appearance="fill">
+                <mat-label>Naziv</mat-label>
+                <input type="text" matInput [(ngModel)]="newModel.name">
+            </mat-form-field>
         </div>
-        <div class="row">
+        <div class="ns-col">
             <mat-form-field appearance="fill">
                 <mat-label>Tip problema</mat-label>
-                <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 [(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-form-field>
+
+            </mat-form-field>
         </div>
-      </div>
-      <div class="col-sm">
-        <div class="row">
+
+        <div class="break-1"></div>
+
+        <div class="ns-col">
             <mat-form-field appearance="fill">
                 <mat-label>Optimizacija</mat-label>
-                <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 [(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-form-field>
+
+            </mat-form-field>
         </div>
-        <div class="row">
-                  <mat-form-field appearance="fill">
+        <div class="ns-col">
+            <mat-form-field appearance="fill">
                 <mat-label>Funkcija troška</mat-label>
                 <mat-select [(ngModel)]="newModel.lossFunction">
-                    <mat-option
-                            *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </mat-option>
+                    <mat-option *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)" [value]="option">
+                        {{ optionName }}
+                    </mat-option>
                 </mat-select>
-               
-              </mat-form-field>
+
+            </mat-form-field>
         </div>
-      </div>
-      <div class="col-sm">
-        <div class="row">
-              
-              <mat-form-field appearance="fill">
-                  <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
-                  <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-form-field>
-          
+
+        <div class="break-2"></div>
+
+        <div class="ns-col">
+            <mat-form-field appearance="fill">
+                <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
+                <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-form-field>
         </div>
-        <div class="row">
-              <mat-form-field appearance="fill">
+        <div class="ns-col">
+            <mat-form-field appearance="fill">
                 <mat-label>Stopa učenja</mat-label>
-                <mat-select  [(ngModel)]="newModel.learningRate">
-                    <mat-option
-                            *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)"
-                            [value]="option">
-                            {{ optionName }}
-                        </mat-option>
+                <mat-select [(ngModel)]="newModel.learningRate">
+                    <mat-option *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option">
+                        {{ optionName }}
+                    </mat-option>
                 </mat-select>
-                
-              </mat-form-field>
-        </div>
-      </div>
-      <div class="col">
-        <div class="row">
-          <div class="col-7">Broj Epoha</div>
-          <mat-icon (click)="addEpoch()">add_circle</mat-icon>
-          <div class="col-1">{{newModel.epochs}}</div>
-          <mat-icon (click)="removeEpoch()">remove_circle</mat-icon>
+            </mat-form-field>
         </div>
-        <br>
-        <br>
-        <div class="row">
-          <div class="col-7">Broj Uzoraka Po Iteraciji</div>
-          <mat-icon (click)="addBatch()">add_circle</mat-icon>
-          <div class="col-1">{{newModel.batchSize}}</div>
-          <mat-icon (click)="removeBatch()">remove_circle</mat-icon>
+
+        <div class="break-1"></div>
+
+        <div class="ns-col">
+            <mat-form-field appearance="fill">
+                <mat-label>Broj epoha</mat-label>
+                <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000">
+            </mat-form-field>
         </div>
-      </div>
-    </div><!--kraj unosa parametara-->
-  <hr>
-    <div class="m-5">
-            <app-graph [model]="newModel" [inputCols]="newModel.inputColNum"></app-graph>
-            <div class="row" id="rowhn">
-                <div class="col-3"></div>
-                <div class="col-2">Broj Skrivenih Slojeva</div>
-                <div class="col-1"><mat-icon (click)="addLayer()" (ngModelChange)="updateGraph()">add_circle</mat-icon></div>
-                <div class="col-1">{{newModel.hiddenLayers}}</div>
-                <div class="col-1"><mat-icon (click)="removeLayer()" (ngModelChange)="updateGraph()">remove_circle</mat-icon></div>
-            </div>
-  </div>
-  <hr>
-  <div class="row" style="max-width:60rem ;">
-
-      <div class="col text-center" *ngFor="let item of numSequence(newModel.hiddenLayers); let i=index" >
-        {{item}}
-        <div class="neuron">
-          <div style="text-align: center;">
-            <label >Skriveni sloj {{i+1}}</label>
-          </div>
-          <div class="row" style="margin-bottom: -10px;">
+        <div class="ns-col">
             <mat-form-field appearance="fill">
-                <mat-label>Aktivaciona funkcija</mat-label>
-                <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" >
-                <div class="col-6" style="font-size: 13px;" >Broj čvorova</div>
-                <mat-icon (click)="addNeuron(i)">add_circle</mat-icon>
-                <div class="col-1">{{newModel.layers[i].neurons}}</div>
-                <mat-icon (click)="removeNeuron(i)">remove_circle</mat-icon>
-          
+                <mat-label>Broj uzoraka po iteraciji</mat-label>
+
+                <mat-select matNativeControl required [(value)]="newModel.batchSize">
+                    <mat-option *ngFor="let option of Object.keys(BatchSize); let optionName of Object.values(BatchSize)" [value]="option">{{option}}</mat-option>
+                </mat-select>
+            </mat-form-field>
         </div>
-              <div class='row' style="margin-bottom: -7px;">
-              <mat-form-field appearance="fill">
-                <mat-label>Regularizacija</mat-label>
-                <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 [(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>
+</div>
+
+
+<!--kraj unosa parametara-->
+<hr>
+<div class="m-2">
+    <app-graph [model]="newModel" [inputCols]="newModel.inputColNum"></app-graph>
+    <div id="layers-control">
+        <div>Broj Skrivenih Slojeva</div>
+        <button class="btn-clear btn-icon" (click)="addLayer()">
+            <mat-icon>add</mat-icon>
+        </button>
+        <div>{{newModel.hiddenLayers}}</div>
+        <button class="btn-clear btn-icon" (click)="removeLayer()">
+            <mat-icon>remove</mat-icon>
+        </button>
+    </div>
+</div>
+<hr>
+<div id="layers">
+
+    <div class="layer" *ngFor="let item of newModel.layers; let i=index">
+        <div class="text-center">
+            #{{i+1}}
+        </div>
+
+        <mat-form-field appearance="fill">
+            <mat-label>Aktivaciona funkcija</mat-label>
+            <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 class="d-flex flex-row align-items-center justify-content-center m-1">
+            <div class="col-6" style="font-size: 13px;">Broj čvorova</div>
+            <button class="btn-clear btn-icon" (click)="addNeuron(i)">
+                <mat-icon>add</mat-icon>
+            </button>
+            <div class="col-1">{{newModel.layers[i].neurons}}</div>
+            <button class="btn-clear btn-icon" (click)="removeNeuron(i)">
+                <mat-icon>remove</mat-icon>
+            </button>
         </div>
-        <br>
-      </div>
-      
-  </div>
\ No newline at end of file
+
+        <mat-form-field appearance="fill">
+            <mat-label>Regularizacija</mat-label>
+            <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>
+
+        <mat-form-field appearance="fill">
+            <mat-label>Stopa regularizacije</mat-label>
+            <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>
\ No newline at end of file
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 c3c73b3e..c29fd0bb 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -1,37 +1,36 @@
-import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import { Component, OnInit, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
 import Shared from 'src/app/Shared';
 import Experiment from 'src/app/_data/Experiment';
-import Model, {Layer, ActivationFunction, LossFunction,LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType ,Regularisation,RegularisationRate} from 'src/app/_data/Model';
+import Model, { Layer, ActivationFunction, LossFunction, LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType, Regularisation, RegularisationRate, BatchSize } from 'src/app/_data/Model';
 import { GraphComponent } from '../graph/graph.component';
-import {FormGroupDirective, NgForm} from '@angular/forms';
-import {ErrorStateMatcher} from '@angular/material/core';
+import { FormGroupDirective, NgForm } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+
 @Component({
   selector: 'app-form-model',
   templateUrl: './form-model.component.html',
   styleUrls: ['./form-model.component.css']
 })
-export class FormModelComponent implements OnInit {
+export class FormModelComponent implements AfterViewInit {
   @ViewChild(GraphComponent) graph!: GraphComponent;
   @Input() forExperiment?: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
 
-  constructor() { 
-  this.newModel.epochs=1;
-  this.newModel.batchSize=1;
-}
-  
-  ngOnInit(): void {
+  constructor() { }
+
+  ngAfterViewInit(): void {
   }
+
   selectFormControl = new FormControl('', Validators.required);
   nameFormControl = new FormControl('', [Validators.required, Validators.email]);
-  selectTypeFormControl=new FormControl('', Validators.required);
-  selectOptFormControl=new FormControl('', Validators.required);
-  selectLFFormControl=new FormControl('', Validators.required);
-  selectLRFormControl=new FormControl('', Validators.required);
-  selectEpochFormControl=new FormControl('', Validators.required);
-  selectAFFormControl=new FormControl('', Validators.required);
-  selectBSFormControl=new FormControl('', Validators.required);
+  selectTypeFormControl = new FormControl('', Validators.required);
+  selectOptFormControl = new FormControl('', Validators.required);
+  selectLFFormControl = new FormControl('', Validators.required);
+  selectLRFormControl = new FormControl('', Validators.required);
+  selectEpochFormControl = new FormControl('', Validators.required);
+  selectAFFormControl = new FormControl('', Validators.required);
+  selectBSFormControl = new FormControl('', Validators.required);
   selectActivationFormControl = new FormControl('', Validators.required);
   selectRegularisationFormControl = new FormControl('', Validators.required);
   selectRRateFormControl = new FormControl('', Validators.required);
@@ -43,92 +42,44 @@ export class FormModelComponent implements OnInit {
 
   ProblemType = ProblemType;
   ActivationFunction = ActivationFunction;
-  RegularisationRate=RegularisationRate;
-  Regularisation=Regularisation;
+  RegularisationRate = RegularisationRate;
+  Regularisation = Regularisation;
   metrics: any = Metrics;
   LossFunction = LossFunction;
   Optimizer = Optimizer;
+  BatchSize = BatchSize;
   Object = Object;
   document = document;
   shared = Shared;
-  LearningRate=LearningRate;
-  Layer=Layer;
-  
+  LearningRate = LearningRate;
+  Layer = Layer;
+
   term: string = "";
   selectedMetrics = [];
   lossFunction: any = LossFunction;
 
   showMyModels: boolean = true;
-  
-  hiddenLayers=[];
-  
- 
-
 
   updateGraph() {
+    console.log(this.newModel.layers);
     this.graph.update();
   }
-  removeLayer(){
-    if(this.newModel.hiddenLayers>1)
-    {
-      this.newModel.layers.splice(this.newModel.layers.length-1,1);
-      this.newModel.hiddenLayers-=1;
+
+  removeLayer() {
+    if (this.newModel.hiddenLayers > 1) {
+      this.newModel.layers.splice(this.newModel.layers.length - 1, 1);
+      this.newModel.hiddenLayers -= 1;
       this.updateGraph();
     }
   }
-  addLayer(){
-    if(this.newModel.hiddenLayers<12)
-    {
+  addLayer() {
+    if (this.newModel.hiddenLayers < 128) {
       this.newModel.layers.push(new Layer(this.newModel.layers.length));
 
-      this.newModel.hiddenLayers+=1;
+      this.newModel.hiddenLayers += 1;
       this.updateGraph();
     }
-  
-  }
-  removeBatch(){
-    if(this.newModel.batchSize>1)
-    {
-      this.newModel.batchSize=this.newModel.batchSize/2;
-    }
-    else
-    {
-      this.newModel.batchSize=this.newModel.batchSize;
-    }
-    
-  }
-  addBatch(){
-    if(this.newModel.batchSize<600)
-    {
-      this.newModel.batchSize=this.newModel.batchSize*2;
-    }
-    else
-    {
-      this.newModel.batchSize=this.newModel.batchSize;
-      
-    }
-  }
-  removeEpoch(){
-    if(this.newModel.epochs>1)
-    {
-      this.newModel.epochs=this.newModel.epochs-1;
-    }
-    else
-    {
-      this.newModel.epochs=this.newModel.epochs;
-    }
-    
-  }
-  addEpoch(){
-    if(this.newModel.epochs<100)
-    {
-      this.newModel.epochs=this.newModel.epochs+1;
-    }
-    else
-    {
-      this.newModel.epochs=this.newModel.epochs;
-      
-    }
+
   }
   /*
   setNeurons()
@@ -140,18 +91,16 @@ export class FormModelComponent implements OnInit {
   numSequence(n: number): Array<number> {
     return Array(n);
   }
-  
-  removeNeuron(index:number){
-    if(this.newModel.layers[index].neurons>1)
-    {
-      this.newModel.layers[index].neurons-=1;
+
+  removeNeuron(index: number) {
+    if (this.newModel.layers[index].neurons > 1) {
+      this.newModel.layers[index].neurons -= 1;
       this.updateGraph();
     }
   }
-  addNeuron(index:number){
-    if(this.newModel.layers[index].neurons<100)
-    {
-      this.newModel.layers[index].neurons+=1;
+  addNeuron(index: number) {
+    if (this.newModel.layers[index].neurons < 100) {
+      this.newModel.layers[index].neurons += 1;
       this.updateGraph();
     }
   }