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

4 files changed, 19 insertions, 12 deletions

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 0d770fc1..55c802e9 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -122,7 +122,8 @@
 
             <div class="ns-col">
                 <!-- {{forExperiment._columnsSelected}} -->
-                <app-graph [model]="newModel" [inputColumns]="getInputColumns()"></app-graph>
+
+                <app-graph [model]="newModel" [inputColumns]="getInputColumns()" [outputColumn]="(this.forExperiment!=undefined)?this.forExperiment.outputColumn:''"></app-graph>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_elements/graph/graph.component.css b/frontend/src/app/_elements/graph/graph.component.css
index 456a8df1..f8604125 100644
--- a/frontend/src/app/_elements/graph/graph.component.css
+++ b/frontend/src/app/_elements/graph/graph.component.css
@@ -10,11 +10,14 @@
     /*border: 1px solid red;*/
     transform: translate(-50%, -50%);
 }
-
-.node-text:not(.inputs) {
+.output{
+    font-weight: bold;
+    color: var(--offwhite);
+}
+.node-text:not(.output) {
     color: transparent;
 }
 
-.node-text:not(.inputs):hover {
+.node-text:not(.output):hover {
     color: var(--offwhite);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html
index 411e8b53..2ba42eba 100644
--- a/frontend/src/app/_elements/graph/graph.component.html
+++ b/frontend/src/app/_elements/graph/graph.component.html
@@ -1,8 +1,10 @@
 <div #graphWrapper class="position-relative" style="height: 14rem; width: 100%;">
-    <!-- <ng-container *ngFor="let layer of layers; let i = index">
-        <div [ngClass]="{'inputs': i==0}" class="node-text" *ngFor="let node of layer; let j = index" [style.left.%]="node.x * 99.4" [style.top.%]="node.y * 100">
-            {{ i == 0 ? (inputColumns && inputColumns.length >= j ? inputColumns[j] : 'nepoznato') : (i > 0 && i
-            < layers.length - 1 ? model!.layers[i-1].activationFunction : (i==layers.length - 1 ? 'out' : '')) }} </div>
-    </ng-container> -->
+    <div *ngIf="outputColumn!='' && inputColumns!=[]">
+        <ng-container *ngFor="let layer of layers; let i = index">
+            <div [ngClass]="{'inputs': i==0,'output':i==layers.length-1}"  class="node-text" *ngFor="let node of layer; let j = index" [style.left.%]="node.x * 100" [style.top.%]="(i!=layers.length-1)?node.y * 100:node.y*70">
+                {{ i == 0 ? (inputColumns && inputColumns.length >= j ? inputColumns[j] : 'nepoznato') : (i > 0 && i
+                < layers.length - 1 ? model!.layers[i-1].activationFunction : (i==layers.length - 1 ? "      "+outputColumn : '')) }} </div>
+        </ng-container>
+    </div>
     <canvas #graphCanvas></canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts
index 04be9f04..f14e54e7 100644
--- a/frontend/src/app/_elements/graph/graph.component.ts
+++ b/frontend/src/app/_elements/graph/graph.component.ts
@@ -28,7 +28,8 @@ export class GraphComponent implements AfterViewInit {
   @Input() outputNodeColor: string = '#dfd7d7';
 
   private ctx!: CanvasRenderingContext2D;
-  @Input() inputColumns?: string[];
+  @Input() inputColumns?: string[]=[];
+  @Input() outputColumn?:string="";
 
   constructor() { }
 
@@ -81,7 +82,7 @@ export class GraphComponent implements AfterViewInit {
     this.layers.push([new Node(outX, outY, this.outputNodeColor)])
     this.draw();
   }
-
+  
   draw() {
     this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);