From 2fbc26bb36c79c9b86a8eb9818b85b1c52a16159 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Tue, 3 May 2022 21:24:20 +0200
Subject: Ispravio bug gde se graf nije prikazivao dok se strane ne resize-uje.

---
 .../_elements/form-model/form-model.component.html | 341 +++++++++++----------
 .../_elements/form-model/form-model.component.ts   |  14 +-
 2 files changed, 178 insertions(+), 177 deletions(-)

(limited to 'frontend/src/app/_elements/form-model')

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 e51c2cac..fa57ad46 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -1,219 +1,220 @@
-<div id="container">
-    <div class="ns-row">
+<div *ngIf="newModel">
+    <div id="container">
+        <div class="ns-row">
+
+            <div class="ns-col">
+                <mat-form-field class="example-full-width" appearance="fill" class="mat-fix">
+                    <mat-label>Naziv</mat-label>
+                    <input type="text" matInput [(ngModel)]="newModel.name">
+                </mat-form-field>
+            </div>
+            <div class="ns-col">
+                <mat-form-field appearance="fill" class="mat-fix">
+                    <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>
+                </mat-form-field>
+            </div>
+
+            <div class="break-1"></div>
+
+            <div class="ns-col">
+                <mat-form-field appearance="fill" class="mat-fix">
+                    <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>
+
+                </mat-form-field>
+            </div>
+            <div class="ns-col">
+                <mat-form-field appearance="fill" class="mat-fix">
+                    <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-select>
+                </mat-form-field>
+            </div>
+
+            <div class="break-2"></div>
+
+            <div class="ns-col">
+                <mat-form-field appearance="fill" class="mat-fix">
+                    <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="ns-col">
+                <mat-form-field appearance="fill" class="mat-fix">
+                    <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>
+                </mat-form-field>
+            </div>
+
+            <div class="break-1"></div>
+
+            <div class="ns-col">
+                <mat-form-field appearance="fill" class="mat-fix">
+                    <mat-label>Broj epoha</mat-label>
+                    <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000">
+                </mat-form-field>
+            </div>
+            <div class="ns-col">
+                <mat-form-field appearance="fill" class="mat-fix">
+                    <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="ns-col">
-            <mat-form-field class="example-full-width" appearance="fill" class="mat-fix">
-                <mat-label>Naziv</mat-label>
-                <input type="text" matInput [(ngModel)]="newModel.name">
-            </mat-form-field>
         </div>
-        <div class="ns-col">
-            <mat-form-field appearance="fill" class="mat-fix">
-                <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>
-            </mat-form-field>
+    </div>
+    <div>
+        <div class="ns-row" style="margin-top: 10px;">
+            <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;">
+
+                <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>
+            <div class="ns-col slider rounded text-offwhite justify-content-center align-items-center" style="border:1px solid var(--ns-primary);margin-left: 10px;">
+                <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox>
+            </div>
+
+
         </div>
+    </div>
 
-        <div class="break-1"></div>
+    <!--kraj unosa parametara-->
+    <hr>
+    <div class="m-2">
+        <app-graph [model]="newModel"></app-graph>
+    </div>
+    <div class="ns-row">
 
-        <div class="ns-col">
-            <mat-form-field appearance="fill" class="mat-fix">
-                <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>
+        <div class="ns-col" id="layers-control">
+            <div>Broj Skrivenih Slojeva</div>
+            <button class="btn-clear btn-icon bubble" (click)="addLayer()">
+            <mat-icon>add</mat-icon>
+        </button>
+            <div>{{newModel.hiddenLayers}}</div>
+            <button class="btn-clear btn-icon bubble" (click)="removeLayer()">
+            <mat-icon>remove</mat-icon>
+        </button>
 
-            </mat-form-field>
         </div>
+        <div class="break-1"></div>
         <div class="ns-col">
             <mat-form-field appearance="fill" class="mat-fix">
-                <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">
+                <mat-label>Aktivaciona funkcija svih slojeva</mat-label>
+
+                <mat-select [(ngModel)]="selectedActivation" (selectionChange)="changeAllActivation()">
+                    <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="break-2"></div>
-
         <div class="ns-col">
             <mat-form-field appearance="fill" class="mat-fix">
-                <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-label>Broj neurona svih slojeva</mat-label>
+                <input matInput type="number" min="1" max="18" [(ngModel)]="selectedNumberOfNeurons" (change)="changeAllNumberOfNeurons()">
             </mat-form-field>
         </div>
+        <div class="break-2"></div>
         <div class="ns-col">
             <mat-form-field appearance="fill" class="mat-fix">
-                <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">
+                <mat-label>Regularizacija svih slojeva</mat-label>
+                <mat-select [(ngModel)]="selectedRegularisation" (selectionChange)="changeAllRegularisation()">
+                    <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="break-1"></div>
-
         <div class="ns-col">
             <mat-form-field appearance="fill" class="mat-fix">
-                <mat-label>Broj epoha</mat-label>
-                <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000">
-            </mat-form-field>
-        </div>
-        <div class="ns-col">
-            <mat-form-field appearance="fill" class="mat-fix">
-                <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-label>Stopa regularizacije svih slojeva</mat-label>
+                <mat-select [(ngModel)]="selectedRegularisationRate" (selectionChange)="changeAllRegularisationRate()">
+                    <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>
-<div>
-    <div class="ns-row" style="margin-top: 10px;">
-        <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;">
-
-            <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>
-        <div class="ns-col slider rounded text-offwhite justify-content-center align-items-center" style="border:1px solid var(--ns-primary);margin-left: 10px;">
-                    <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox>
-        </div>
-        
 
     </div>
-</div>
-
-<!--kraj unosa parametara-->
-<hr>
-<div class="m-2">
-    <app-graph [model]="newModel" [inputColumns]="forExperiment?.inputColumns"></app-graph>
-</div>
-<div class="ns-row">
-
-    <div class="ns-col" id="layers-control">
-        <div>Broj Skrivenih Slojeva</div>
-        <button class="btn-clear btn-icon bubble" (click)="addLayer()">
-            <mat-icon>add</mat-icon>
-        </button>
-        <div>{{newModel.hiddenLayers}}</div>
-        <button class="btn-clear btn-icon bubble" (click)="removeLayer()">
-            <mat-icon>remove</mat-icon>
-        </button>
-
-    </div>
-    <div class="break-1"></div>
-    <div class="ns-col">
-        <mat-form-field appearance="fill" class="mat-fix">
-            <mat-label>Aktivaciona funkcija svih slojeva</mat-label>
-
-            <mat-select [(ngModel)]="selectedActivation" (selectionChange)="changeAllActivation()">
-                <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="ns-col">
-        <mat-form-field appearance="fill" class="mat-fix">
-            <mat-label>Broj neurona svih slojeva</mat-label>
-            <input matInput type="number" min="1" max="18" [(ngModel)]="selectedNumberOfNeurons" (change)="changeAllNumberOfNeurons()">
-        </mat-form-field>
-    </div>
-    <div class="break-2"></div>
-    <div class="ns-col">
-        <mat-form-field appearance="fill" class="mat-fix">
-            <mat-label>Regularizacija svih slojeva</mat-label>
-            <mat-select [(ngModel)]="selectedRegularisation" (selectionChange)="changeAllRegularisation()">
-                <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="ns-col">
-        <mat-form-field appearance="fill" class="mat-fix">
-            <mat-label>Stopa regularizacije svih slojeva</mat-label>
-            <mat-select [(ngModel)]="selectedRegularisationRate" (selectionChange)="changeAllRegularisationRate()">
-                <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>
 
-<!--kraj selectall**********************************************************************************-->
-<div id="layers">
+    <!--kraj selectall**********************************************************************************-->
+    <div id="layers">
 
-    <div class="layer" *ngFor="let item of newModel.layers; let i=index">
+        <div class="layer" *ngFor="let item of newModel.layers; let i=index">
 
 
-        <mat-form-field appearance="fill" class="mat-fix">
-            <mat-label>Aktivacija</mat-label>
-            <button matPrefix class="btn-clear center-center text-offwhite">        
+            <mat-form-field appearance="fill" class="mat-fix">
+                <mat-label>Aktivacija</mat-label>
+                <button matPrefix class="btn-clear center-center text-offwhite">        
                 <div>
                     #{{i+1}}
                 </div>
             </button>
-            <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 tm">
-            <div class="col-6" style="font-size: 13px;">Broj čvorova</div>
-            <button class="btn-clear btn-icon bubble" (click)="addNeuron(i)">
+                <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 tm">
+                <div class="col-6" style="font-size: 13px;">Broj čvorova</div>
+                <button class="btn-clear btn-icon bubble" (click)="addNeuron(i)">
                 <mat-icon>add</mat-icon>
             </button>
-            <div class="col-2 text-center">{{newModel.layers[i].neurons}}</div>
-            <button class="btn-clear btn-icon bubble" (click)="removeNeuron(i)">
+                <div class="col-2 text-center">{{newModel.layers[i].neurons}}</div>
+                <button class="btn-clear btn-icon bubble" (click)="removeNeuron(i)">
                 <mat-icon>remove</mat-icon>
             </button>
-        </div>
+            </div>
 
-        <mat-form-field appearance="fill" class="mat-fix">
-            <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" class="mat-fix">
-            <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>
+            <mat-form-field appearance="fill" class="mat-fix">
+                <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" class="mat-fix">
+                <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>
\ 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 d5c497aa..ef456547 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -13,13 +13,12 @@ import { MatSliderChange } from '@angular/material/slider';
 })
 export class FormModelComponent implements AfterViewInit {
   @ViewChild(GraphComponent) graph!: GraphComponent;
-  @Input() forExperiment?: Experiment;
+  @Input() forExperiment!: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
   testSetDistribution: number = 70;
   constructor() { }
 
-  ngAfterViewInit(): void {
-  }
+  ngAfterViewInit(): void { }
 
   selectFormControl = new FormControl('', Validators.required);
   nameFormControl = new FormControl('', [Validators.required, Validators.email]);
@@ -34,8 +33,7 @@ export class FormModelComponent implements AfterViewInit {
   selectRegularisationFormControl = new FormControl('', Validators.required);
   selectRRateFormControl = new FormControl('', Validators.required);
 
-  newModel: Model = new Model();
-  myModels?: Model[];
+  newModel!: Model;
 
   selectedModel?: Model;
 
@@ -57,7 +55,9 @@ export class FormModelComponent implements AfterViewInit {
   selectedMetrics = [];
   lossFunction: any = LossFunction;
 
-  showMyModels: boolean = true;
+  loadModel(model: Model) {
+    this.newModel = model;
+  }
 
   updateGraph() {
     //console.log(this.newModel.layers);
@@ -121,7 +121,6 @@ export class FormModelComponent implements AfterViewInit {
     }
   }
   changeAllRegularisationRate() {
-
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].regularisationRate = this.selectedRegularisationRate;
     }
@@ -132,6 +131,7 @@ export class FormModelComponent implements AfterViewInit {
       this.updateGraph();
     }
   }
+
   updateTestSet(event: MatSliderChange) {
     this.testSetDistribution = event.value!;
   }
-- 
cgit v1.2.3