Update sidenav appearance

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/api/visualization-data-default-api.service.ts

@@ -25,7 +25,6 @@ export class VisualizationDataDefaultApi extends VisualizationDataApi {
    * Sends http request to retrieve all data for visualizations
    */
   getVisualizationData(trainingDefinitionId: number, featureType: string): Observable<VisualizationData> {
-      console.log(featureType)
     return this.http
       .get<VisualizationDataDTO>(
         this.configService.config.trainingServiceUrl + `visualizations/training-definition/${trainingDefinitionId}/${featureType}/clusters`

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/scatter-plot/scatter-plot.component.ts

@@ -43,7 +43,6 @@ export class ScatterPlotComponent implements OnChanges {
   }
 
   ngOnChanges(): void {
-    //console.log(this.visualizationData)
     if (this.visualizationData != undefined) {
       this.createScatter();
     }
@@ -156,7 +155,6 @@ export class ScatterPlotComponent implements OnChanges {
 
     let tooltip = this.tooltip;
 
-    console.log(this.gPlot.selectAll("dot"));
     // Add scatter
     this.dataPoints = this.gPlot.selectAll("dot")
         .data(this.data)
@@ -190,7 +188,6 @@ export class ScatterPlotComponent implements OnChanges {
               .duration(0)
               .style('opacity', 0);
         });
-    console.log(this.dataPoints);
   }
 
   // A function that updates the chart when the user zoom and thus new boundaries are available

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/visualizations.component.ts

@@ -48,12 +48,12 @@ export class VisualizationsComponent implements OnInit, OnChanges {
     lineService.subscribe((res) => {
       this.lineData$ = res;
     });
-    //if (this.selectedFeature == 0 || this.selectedFeature == 1) {
+    if (this.selectedFeature == 0 || this.selectedFeature == 1) {
       const scatterService = this.visualizationDataService.getData(this.trainingDefinitionId);
       scatterService.subscribe((res) => {
         this.visualizationData$ = res;
       });
-   // }
+    }
     if (this.selectedFeature == 2) {
       const radarService = this.visualizationDataService.getRadarData(this.trainingDefinitionId);
       radarService.subscribe((res) => {

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/services/visualizations-data-concrete.service.ts

@@ -27,7 +27,6 @@ export class VisualizationsDataConcreteService extends VisualizationsDataService
     }
 
     getData(trainingDefinitionId: number): Observable<VisualizationData> {
-        console.log(this._selectedFeature)
         switch (this._selectedFeature) {
             case Clusterables.WrongFlags:
                 return this.visualizationApi.getVisualizationData(trainingDefinitionId, "wrong-flags").pipe(

src/app/clustering/clustering-overview.component.css

@@ -8,6 +8,10 @@ button .nav-link {
     text-align: center;
 }
 
+button.opened {
+    color: #6138ca !important;
+}
+
 .mat-sidenav {
     padding: 15px;
 }
@@ -29,6 +33,11 @@ button .nav-link {
     height: 48px;
 }
 
+.mat-list-item .sub-item {
+    font-size: 13px;
+    color: #4a4a4a;
+}
+
 .mat-divider {
     margin: 10px 5px;
 }

src/app/clustering/clustering-overview.component.html

@@ -9,14 +9,18 @@
                    <div class="title">Visualizations</div>
                    <mat-divider></mat-divider>
                <button mat-button class="nav-link" (click)="isSubmenuOpen=!isSubmenuOpen">
-                   <span>Two features comparison</span></button>
+                   <span>Two features comparison </span>
+                   <mat-icon>{{!isSubmenuOpen ? "expand_more" : "expand_less"}}</mat-icon>
+               </button>
                 <div *ngIf="isSubmenuOpen">
-                    <button mat-button class="nav-link"
+                    <button mat-button class="nav-link sub-item"
+                            [ngClass]="{'opened' : selectedFeature == 0}"
                             (click)="selectedComponent=0;selectedFeature=0">
                         <span>Wrong flags per time played</span>
                     </button>
                     <br/>
-                    <button mat-button class="nav-link"
+                    <button mat-button class="nav-link sub-item"
+                            [ngClass]="{'opened' : selectedFeature == 1}"
                             (click)="selectedComponent=0;selectedFeature=1">
                         <span>Time spent after using a hint</span>
                     </button>
@@ -24,6 +28,7 @@
 
                 <div>
                     <button mat-button class="nav-link"
+                            [ngClass]="{'opened' : selectedFeature == 2}"
                             (click)="selectedComponent=2;selectedFeature=2">
                         <span>Behaviour correlation chart</span>
                     </button>
@@ -49,7 +54,7 @@
             </mat-sidenav>
 
            <!-- Main content -->
-           <mat-sidenav-content style="margin-left: 235px;">
+           <mat-sidenav-content style="margin-left: 255px;">
                <kypo-clustering-visualization
                         [selectedComponent]="selectedComponent"
                         [selectedFeature]="selectedFeature"

src/app/clustering/clustering-overview.component.ts

@@ -16,7 +16,7 @@ export class ClusteringOverviewComponent implements OnInit {
   numOfClusters:number = 6;
   trainingDefinitionId: number = 25;
   trainingInstanceId: number;
-  isSubmenuOpen: boolean;
+  isSubmenuOpen: boolean = true;
 
   constructor() { }
 

src/app/clustering/clustering.module.ts

@@ -9,6 +9,7 @@ import {MatButtonModule} from "@angular/material/button";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {MatInputModule} from "@angular/material/input";
 import {MatListModule} from "@angular/material/list";
+import {MatIconModule} from "@angular/material/icon";
 
 @NgModule({
   declarations: [
@@ -22,6 +23,7 @@ import {MatListModule} from "@angular/material/list";
     MatButtonModule,
     MatInputModule,
     MatListModule,
+    MatIconModule,
     ReactiveFormsModule,
     FormsModule
   ],