From 17f8d66738329045cb52b35c870b3bce012a60b9 Mon Sep 17 00:00:00 2001
From: Ludek <13610612+ludeknovy@users.noreply.github.com>
Date: Wed, 26 May 2021 18:41:06 +0200
Subject: [PATCH] label focus (#156)

---
 src/app/analyze-chart.service.spec.ts         | 12 +++++
 src/app/analyze-chart.service.ts              | 24 +++++++++
 .../control-panel/control-panel.component.css | 23 +-------
 .../control-panel/control-panel.component.ts  |  2 +-
 .../analyze-charts.component.html             |  2 +-
 .../analyze-charts.component.ts               | 33 ++++++++----
 .../item-detail/item-detail.component.html    |  4 +-
 src/app/item-detail/item-detail.component.ts  |  9 +++-
 .../performance-analysis.component.css        |  2 +-
 .../performance-analysis.component.html       |  4 +-
 .../performance-analysis.component.ts         | 22 +++++---
 .../request-stats-compare.component.css       |  4 +-
 .../request-stats-compare.component.html      |  9 +++-
 .../request-stats-compare.component.ts        | 53 ++++++++++++-------
 src/app/shared-styles.css                     |  8 +--
 src/app/top-panel/top-panel.component.html    | 29 +++++-----
 src/app/top-panel/top-panel.component.scss    |  8 +--
 src/app/top-panel/top-panel.component.ts      |  4 +-
 18 files changed, 160 insertions(+), 92 deletions(-)
 create mode 100644 src/app/analyze-chart.service.spec.ts
 create mode 100644 src/app/analyze-chart.service.ts

diff --git a/src/app/analyze-chart.service.spec.ts b/src/app/analyze-chart.service.spec.ts
new file mode 100644
index 00000000..7298a81c
--- /dev/null
+++ b/src/app/analyze-chart.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AnalyzeChartService } from './analyze-chart.service';
+
+describe('AnalyzeChartService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AnalyzeChartService = TestBed.get(AnalyzeChartService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/analyze-chart.service.ts b/src/app/analyze-chart.service.ts
new file mode 100644
index 00000000..bdf20039
--- /dev/null
+++ b/src/app/analyze-chart.service.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject, Subject} from 'rxjs';
+import {Metrics} from './item-detail/metrics';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnalyzeChartService {
+
+  public subject = new Subject<any>();
+  private dataSource = new BehaviorSubject<AnalyzeChartData>(null);
+  currentData = this.dataSource.asObservable();
+
+  constructor() { }
+
+  changeMessage(data: AnalyzeChartData) {
+    this.dataSource.next(data);
+  }
+}
+
+interface AnalyzeChartData {
+  metrics?: Metrics[];
+  label: string;
+}
diff --git a/src/app/control-panel/control-panel.component.css b/src/app/control-panel/control-panel.component.css
index 0f80ebad..242544f0 100644
--- a/src/app/control-panel/control-panel.component.css
+++ b/src/app/control-panel/control-panel.component.css
@@ -1,29 +1,10 @@
 #top-panel {
-  margin-left: 195px;
-  margin-right: 195px;
+  margin-left: 10px;
+  margin-right: 10px;
   margin-top: 20px;
   border-radius: 0.2rem;
 }
 
-@media (max-width: 1550px) {
-  #top-panel {
-    margin-left: 95px;
-    margin-right: 85px;
-  }
-}
-@media (max-width: 1350px) {
-  #top-panel {
-    margin-left: 45px;
-    margin-right: 35px;
-  }
-}
-@media (max-width: 1150px) {
-  #top-panel {
-    margin-left: 12px;
-    margin-right: 30px;
-  }
-}
-
 .navbar-toggler {
   border: none;
 }
diff --git a/src/app/control-panel/control-panel.component.ts b/src/app/control-panel/control-panel.component.ts
index 39edbc7c..a73dec4a 100644
--- a/src/app/control-panel/control-panel.component.ts
+++ b/src/app/control-panel/control-panel.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-control-panel',
   templateUrl: './control-panel.component.html',
-  styleUrls: ['./control-panel.component.css']
+  styleUrls: ['./control-panel.component.css', '../shared-styles.css']
 })
 export class ControlPanelComponent {
 
diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.html b/src/app/item-detail/analyze-charts/analyze-charts.component.html
index 9081a2ba..738dc439 100644
--- a/src/app/item-detail/analyze-charts/analyze-charts.component.html
+++ b/src/app/item-detail/analyze-charts/analyze-charts.component.html
@@ -9,7 +9,7 @@ <h6 class="card-header bg-transparent">
     </span>
   </h6>
   <div class="card-body">
-    <div class="chart">
+    <div class="chart" id="analyzeChartAnchor">
       <highcharts-chart [Highcharts]="Highcharts" [options]="customChartsOptions" [(update)]="updateLabelChartFlag" [oneToOne]="true"
 
         style="width: 100%; height: 350px; display: block;"></highcharts-chart>
diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.ts b/src/app/item-detail/analyze-charts/analyze-charts.component.ts
index 845796be..1d8f664e 100644
--- a/src/app/item-detail/analyze-charts/analyze-charts.component.ts
+++ b/src/app/item-detail/analyze-charts/analyze-charts.component.ts
@@ -2,13 +2,14 @@ import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'
 import { customChartSettings } from 'src/app/graphs/item-detail';
 import * as Highcharts from 'highcharts';
 import { ItemsApiService } from 'src/app/items-api.service';
+import {AnalyzeChartService} from '../../analyze-chart.service';
 
 @Component({
   selector: 'app-analyze-charts',
   templateUrl: './analyze-charts.component.html',
   styleUrls: ['./analyze-charts.component.css', '../item-detail.component.scss']
 })
-export class AnalyzeChartsComponent implements OnInit, OnChanges {
+export class AnalyzeChartsComponent implements OnInit {
 
   @Input() params: { projectName: string, scenarioName: string, id: string };
   @Input() chartLines: ChartLines;
@@ -30,7 +31,8 @@ export class AnalyzeChartsComponent implements OnInit, OnChanges {
   preloadedSeries;
 
   constructor(
-    private itemApiService: ItemsApiService
+    private itemApiService: ItemsApiService,
+    private analyzeChartService: AnalyzeChartService
   ) {
   }
 
@@ -44,14 +46,27 @@ export class AnalyzeChartsComponent implements OnInit, OnChanges {
       this.updateChart(_);
       this.preloadedSeries = _;
     });
-  }
+    this.analyzeChartService.currentData.subscribe(data => {
+      let chartLines;
+      if (data) {
+        const { label, metrics } = data;
+        if (metrics && metrics.length > 0) {
+          chartLines = metrics.map(_ => ({ name: label, metric: _ }));
+        } else  {
+          // add all available lines
+          const labelLines = [];
+          this.chartLines.labels.forEach((value, key) => {
+            const labelFound = value.find((_) => _.name === data.label);
+            if (labelFound) {
+              labelLines.push({ name: data.label, metric: key });
+            }
+          });
+          chartLines = labelLines;
+        }
+        this.updateChart(chartLines);
+      }
+    });
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.showPerformanceAnalysisLines && changes.showPerformanceAnalysisLines.currentValue) {
-      const { label, metrics } = changes.showPerformanceAnalysisLines.currentValue;
-      const chartLines = metrics.map(_ => ({ name: label, metric: _ }));
-      this.updateChart(chartLines);
-    }
   }
 
   chartUpdated(event: [{ name: string, metric: string }]) {
diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
index 77056ebf..65f99e20 100644
--- a/src/app/item-detail/item-detail.component.html
+++ b/src/app/item-detail/item-detail.component.html
@@ -64,7 +64,7 @@
 
       <div class="row" *ngIf="itemData.analysisEnabled">
         <div class="col">
-          <app-performance-analysis [itemData]="itemData" [labelsChartLines]="chartLines.labels" (overallChartChange)="toggleThroughputBand($event)" (analyzeChartChange)="focusOnLabel($event)">
+          <app-performance-analysis [itemData]="itemData" [labelsChartLines]="chartLines.labels" (overallChartChange)="toggleThroughputBand($event)">
           </app-performance-analysis>
         </div>
 
@@ -349,7 +349,7 @@ <h6 class="card-header bg-transparent">SUT Statistics <span class="compare">
     </div>
     <div class="row" *ngIf="itemData">
       <div class="col">
-        <app-request-stats-compare [itemData]="itemData" [isAnonymous]="isAnonymous" [params]="itemParams" [externalSearchTerm]="externalSearchTerm"></app-request-stats-compare>
+        <app-request-stats-compare [itemData]="itemData" [isAnonymous]="isAnonymous" [params]="itemParams"></app-request-stats-compare>
       </div>
     </div>
   </div>
diff --git a/src/app/item-detail/item-detail.component.ts b/src/app/item-detail/item-detail.component.ts
index 2a589823..414115ff 100644
--- a/src/app/item-detail/item-detail.component.ts
+++ b/src/app/item-detail/item-detail.component.ts
@@ -24,6 +24,7 @@ import { bytesToMbps, roundNumberTwoDecimals } from './calculations';
 import { logScaleButton } from '../graphs/log-scale-button';
 import { ItemStatusValue } from './item-detail.model';
 import {Metrics} from './metrics';
+import {AnalyzeChartService} from '../analyze-chart.service';
 
 @Component({
   selector: 'app-item-detail',
@@ -70,7 +71,8 @@ export class ItemDetailComponent implements OnInit {
     private itemsService: ItemsApiService,
     private spinner: NgxSpinnerService,
     private sharedMainBarService: SharedMainBarService,
-    private toastr: ToastrService
+    private toastr: ToastrService,
+    private analyzeChartService: AnalyzeChartService
   ) {
     this.Math = Math;
   }
@@ -107,6 +109,11 @@ export class ItemDetailComponent implements OnInit {
         this.generateCharts();
         this.spinner.hide();
       });
+    this.analyzeChartService.currentData.subscribe(data => {
+      if (data) {
+        this.activeId = 2;
+      }
+    });
   }
 
   private getChartLines() {
diff --git a/src/app/item-detail/performance-analysis/performance-analysis.component.css b/src/app/item-detail/performance-analysis/performance-analysis.component.css
index 50fe544d..a59a7043 100644
--- a/src/app/item-detail/performance-analysis/performance-analysis.component.css
+++ b/src/app/item-detail/performance-analysis/performance-analysis.component.css
@@ -4,5 +4,5 @@
 
 .perf-analysis-table {
   margin-top: 10px;
-  line-height: 0.3rem;
+  line-height: 0.4rem;
 }
diff --git a/src/app/item-detail/performance-analysis/performance-analysis.component.html b/src/app/item-detail/performance-analysis/performance-analysis.component.html
index daec7ea3..959b5434 100644
--- a/src/app/item-detail/performance-analysis/performance-analysis.component.html
+++ b/src/app/item-detail/performance-analysis/performance-analysis.component.html
@@ -35,7 +35,7 @@ <h6 class="overview-body perf-analysis">Performance Analysis</h6>
               </thead>
               <tbody>
                 <tr class="d-flex" *ngFor="let _ of mf.data">
-                  <td class="border-0 col-4">{{_.label}} <a class="jtl-a-primary" *ngIf="_.hasChartLines" (click)="showOnePercResponseTimeInChart(_.label)"><i class="fas fa-search-plus fa-lg"></i></a></td>
+                  <td class="border-0 col-4">{{_.label}} <a class="jtl-a-primary" *ngIf="_.hasChartLines" (click)="showOnePercResponseTimeInChart(_.label, 'analyzeChartAnchor')"><i class="fas fa-search-location fa-lg"></i></a></td>
                   <td class="border-0 col-3">{{_.onePerc}}</td>
                   <td class="border-0 col-3">{{_.p99}}</td>
                   <td class="border-0 col-2">{{_.avgResponseTime}}</td>
@@ -74,7 +74,7 @@ <h6 class="overview-body perf-analysis">Performance Analysis</h6>
             </thead>
             <tbody>
               <tr class="d-flex" *ngFor="let _ of mf.data">
-                <td class="border-0 col-4">{{_.label}} <a class="jtl-a-primary" *ngIf="_.hasChartLines" (click)="showSteadyResponseTimeInChart(_.label)"><i class="fas fa-search-plus fa-lg"></i></a></td>
+                <td class="border-0 col-4">{{_.label}} <a class="jtl-a-primary" *ngIf="_.hasChartLines" (click)="showSteadyResponseTimeInChart(_.label, 'analyzeChartAnchor')"><i class="fas fa-search-location fa-lg"></i></a></td>
                 <td class="border-0 col-3">{{_.variability}}</td>
                 <td class="border-0 col-3">{{_.minResponseTime}}</td>
                 <td class="border-0 col-2">{{_.avgResponseTime}}</td>
diff --git a/src/app/item-detail/performance-analysis/performance-analysis.component.ts b/src/app/item-detail/performance-analysis/performance-analysis.component.ts
index 75550ce8..db1717f3 100644
--- a/src/app/item-detail/performance-analysis/performance-analysis.component.ts
+++ b/src/app/item-detail/performance-analysis/performance-analysis.component.ts
@@ -1,6 +1,8 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {Metrics} from '../metrics';
+import {AnalyzeChartService} from '../../analyze-chart.service';
+import {DOCUMENT} from '@angular/common';
 
 @Component({
   selector: 'app-performance-analysis',
@@ -19,7 +21,6 @@ export class PerformanceAnalysisComponent implements OnInit {
   @Input() itemData;
   @Input() labelsChartLines;
   @Output() overallChartChange = new EventEmitter<{}>();
-  @Output() analyzeChartChange = new EventEmitter<{}>();
 
 
   perfAnalysis = {
@@ -44,7 +45,7 @@ export class PerformanceAnalysisComponent implements OnInit {
   foldedBottom = 'closed';
   Math: any;
 
-  constructor() {
+  constructor(private analyzeChartService: AnalyzeChartService) {
     this.Math = Math;
 
   }
@@ -157,18 +158,25 @@ export class PerformanceAnalysisComponent implements OnInit {
 
   }
 
-  showSteadyResponseTimeInChart(label: string) {
+  showSteadyResponseTimeInChart(label: string, anchorElement: string) {
     this.showLabelInChart([Metrics.ResponseTimeAvg, Metrics.ResponseTimeMin], label);
-
+    const el = document.getElementById(anchorElement);
+    setTimeout(() => {
+      el.scrollIntoView({behavior: 'smooth'});
+    });
   }
 
-  showOnePercResponseTimeInChart(label: string) {
+  showOnePercResponseTimeInChart(label: string, anchorElement: string) {
     this.showLabelInChart([Metrics.ResponseTimeAvg, Metrics.ResponseTimeP99], label);
+    const el = document.getElementById(anchorElement);
+    setTimeout(() => {
+      el.scrollIntoView({behavior: 'smooth'});
+    });
   }
 
 
   private showLabelInChart(metrics: Metrics[], label: string) {
-    this.analyzeChartChange.emit({ label, metrics });
+    this.analyzeChartService.changeMessage({ metrics, label });
   }
 
   private hasLabelChart(metrics: Metrics[], label: string) {
diff --git a/src/app/item-detail/request-stats-compare/request-stats-compare.component.css b/src/app/item-detail/request-stats-compare/request-stats-compare.component.css
index 8b137891..5e38bc04 100644
--- a/src/app/item-detail/request-stats-compare/request-stats-compare.component.css
+++ b/src/app/item-detail/request-stats-compare/request-stats-compare.component.css
@@ -1 +1,3 @@
-
+.label-focus {
+  margin-left: 5px;
+}
diff --git a/src/app/item-detail/request-stats-compare/request-stats-compare.component.html b/src/app/item-detail/request-stats-compare/request-stats-compare.component.html
index ffa910ea..f1f86119 100644
--- a/src/app/item-detail/request-stats-compare/request-stats-compare.component.html
+++ b/src/app/item-detail/request-stats-compare/request-stats-compare.component.html
@@ -36,6 +36,9 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
       </div>
       <input class="form-control" id="label-filter" type="search" placeholder="label"
         (keyup)='search($event.target.value)' [value]="externalSearchTerm">
+      <button type="button" class="btn bg-transparent jtl-no-glow" style="margin-left: -40px; z-index: 100;" (click)="clearSearch()">
+        <i class="fa fa-times"></i></button>
+
     </div>
     <div class="labels-detail table-responsive">
       <table class="table" [mfData]="labelsData" #mf="mfDataTable">
@@ -72,7 +75,7 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
               <mfDefaultSorter by="bytes">mbps</mfDefaultSorter>
             </th>
             <th scope="col" class="hd jtl-head-color">
-              <mfDefaultSorter by="errorRate">error rate</mfDefaultSorter>
+              <mfDefaultSorter by="errorRate">errors</mfDefaultSorter>
             </th>
             <th scope="col" class="hd jtl-head-color">
             </th>
@@ -82,7 +85,7 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
         </thead>
         <tbody>
           <tr *ngFor="let _ of mf.data">
-            <td>{{_.label}}</td>
+            <td>{{_.label}} </td>
             <td>{{_.samples}}</td>
             <td><span [className]="comparedData ? _.avgResponseTime > 0 ? 'value-positive' : 'value-negative' : ''">{{_.avgResponseTime}}</span></td>
             <td><span [className]="comparedData ? _.minResponseTime > 0 ? 'value-positive' : 'value-negative' : ''">{{_.minResponseTime}}</span></td>
@@ -107,6 +110,8 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
               <app-label-trend *ngIf="!isAnonymous"
                 [trendInput]="{ environment: itemData.environment, labelName: _.label }" [params]="params">
               </app-label-trend>
+
+              <a class="jtl-a-primary label-focus" (click)="focusLabel(_.label)"><i class="fas fa-search-location fa-sm"></i></a>
             </td>
           </tr>
         </tbody>
diff --git a/src/app/item-detail/request-stats-compare/request-stats-compare.component.ts b/src/app/item-detail/request-stats-compare/request-stats-compare.component.ts
index 63bb4730..6cc9d344 100644
--- a/src/app/item-detail/request-stats-compare/request-stats-compare.component.ts
+++ b/src/app/item-detail/request-stats-compare/request-stats-compare.component.ts
@@ -1,17 +1,17 @@
-import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
-import {ToastrService} from 'ngx-toastr';
-import {ItemsApiService} from 'src/app/items-api.service';
-import {ItemParams} from 'src/app/scenario/item-controls/item-controls.model';
-import {bytesToMbps, roundNumberTwoDecimals} from '../calculations';
+import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { ItemParams } from 'src/app/scenario/item-controls/item-controls.model';
+import { bytesToMbps, roundNumberTwoDecimals } from '../calculations';
+import { AnalyzeChartService } from '../../analyze-chart.service';
+import { ItemsApiService } from 'src/app/items-api.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-request-stats-compare',
   templateUrl: './request-stats-compare.component.html',
   styleUrls: ['./request-stats-compare.component.css', '../item-detail.component.scss']
 })
-export class RequestStatsCompareComponent implements OnInit, OnChanges {
+export class RequestStatsCompareComponent implements OnInit, OnDestroy {
 
-  @Input() externalSearchTerm: string;
   @Input() itemData;
   @Input() isAnonymous: boolean;
   @Input() params: ItemParams;
@@ -19,27 +19,31 @@ export class RequestStatsCompareComponent implements OnInit, OnChanges {
   comparingData;
   comparedData;
   comparedDataMs;
-  compareMode = false;
   labelsData;
   comparisonWarning = [];
   comparedMetadata;
   comparisonMs = true;
-  unitDesc = 'ms';
+  externalSearchTerm = '';
 
   constructor(
     private itemsService: ItemsApiService,
-    private toastr: ToastrService
+    private toastr: ToastrService,
+    private analyzeChartService: AnalyzeChartService
   ) {
   }
 
   ngOnInit() {
     this.labelsData = this.itemData.statistics;
+    this.analyzeChartService.currentData.subscribe(data => {
+      if (data && data.label) {
+        this.search(data.label);
+        this.externalSearchTerm = data.label;
+      }
+    });
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.externalSearchTerm) {
-      this.search(changes.externalSearchTerm.currentValue);
-    }
+  ngOnDestroy() {
+    this.analyzeChartService.changeMessage(null);
   }
 
   resetStatsData() {
@@ -59,10 +63,16 @@ export class RequestStatsCompareComponent implements OnInit, OnChanges {
     }
   }
 
+  clearSearch() {
+    const dataToFilter = this.comparedData || this.itemData.statistics;
+    this.labelsData = dataToFilter;
+    this.externalSearchTerm = '';
+  }
+
   itemToCompare(data) {
     this.resetStatsData();
     this.comparingData = data;
-    this.comparedMetadata = {id: data.id, maxVu: data.maxVu};
+    this.comparedMetadata = { id: data.id, maxVu: data.maxVu };
     if (data.maxVu !== this.itemData.overview.maxVu) {
       this.comparisonWarning.push(`VU do differ ${this.itemData.overview.maxVu} vs. ${data.maxVu}`);
     }
@@ -115,11 +125,11 @@ export class RequestStatsCompareComponent implements OnInit, OnChanges {
       this.params.projectName,
       this.params.scenarioName,
       id).subscribe(_ => this.itemToCompare({
-      statistics: _.statistics,
-      maxVu: _.overview.maxVu,
-      environment: _.environment,
-      id
-    }));
+        statistics: _.statistics,
+        maxVu: _.overview.maxVu,
+        environment: _.environment,
+        id
+      }));
   }
 
   showComparisonWarnings() {
@@ -194,4 +204,7 @@ export class RequestStatsCompareComponent implements OnInit, OnChanges {
     return '%';
   }
 
+  focusLabel(label: string) {
+    this.analyzeChartService.changeMessage({ label });
+  }
 }
diff --git a/src/app/shared-styles.css b/src/app/shared-styles.css
index b27e6bf6..46dc1973 100644
--- a/src/app/shared-styles.css
+++ b/src/app/shared-styles.css
@@ -1,14 +1,14 @@
 @media (min-width: 1550px) {
   .content-container  {
-    padding-left: 200px;
-    padding-right: 200px;
+    padding-left: 110px;
+    padding-right: 110px;
   }
 }
 
 @media (max-width: 1550px) {
   .content-container  {
-    padding-left: 100px;
-    padding-right: 100px;
+    padding-left: 70px;
+    padding-right: 70px;
   }
 }
 
diff --git a/src/app/top-panel/top-panel.component.html b/src/app/top-panel/top-panel.component.html
index 5c6d4482..9efcccd5 100644
--- a/src/app/top-panel/top-panel.component.html
+++ b/src/app/top-panel/top-panel.component.html
@@ -13,33 +13,34 @@
         <div ngbDropdown class="d-inline-block">
           <button class="btn text-white" id="dropdownBasic1" ngbDropdownToggle>{{selectedProject || "Project"}}</button>
           <div class="drop-area drop-area-left dropdowncustom-area dropdown-static" ngbDropdownMenu
-            aria-labelledby="dropdownBasic1" *ngIf="projectsState$ | async; let projects">
-              <a *ngFor="let _ of projects" ngbDropdownItem class="btn btn-block text-left text-white" routerLink="/project/{{_.projectName}}/scenarios"
-                routerLinkActive="active" (click)="changeSelectedProject(_.projectName)">{{_.projectName}}</a>
-              <app-add-project [topMenu]="true">New Project</app-add-project>
+               aria-labelledby="dropdownBasic1" *ngIf="projectsState$ | async; let projects">
+            <a *ngFor="let _ of projects" ngbDropdownItem class="btn btn-block text-left text-white"
+               routerLink="/project/{{_.projectName}}/scenarios"
+               routerLinkActive="active" (click)="changeSelectedProject(_.projectName)">{{_.projectName}}</a>
+            <app-add-project [topMenu]="true">New Project</app-add-project>
           </div>
         </div>
       </li>
     </ul>
-  <div>
-    <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" ngbDropdown class="d-inline-block">
-      <button class="btn text-white" id="dropdownSettings" ngbDropdownToggle> <i class="fas fa-user"></i> {{username}}
-      </button>
-      <div class="drop-area drop-area-left dropdowncustom-area dropdown-dynamic" ngbDropdownMenu
-        aria-labelledby="dropdownSettings">
+    <div>
+      <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" ngbDropdown class="d-inline-block">
+        <button class="btn text-white" id="dropdownSettings" ngbDropdownToggle><i class="fas fa-user"></i> {{username}}
+        </button>
+        <div class="drop-area drop-area-left dropdowncustom-area dropdown-dynamic" ngbDropdownMenu
+             aria-labelledby="dropdownSettings">
           <a ngbDropdownItem class="btn btn-block text-left text-white" [routerLink]="['/administration/projects']"><i
-              class="fas fa-cog icon"></i>Administrate</a>
+            class="fas fa-cog icon"></i>Administrate</a>
 
           <a ngbDropdownItem class="btn btn-block text-left text-white" href="/api-docs" target="_blank"><i
-              class="far fa-question-circle icon"></i>Api docs</a>
+            class="far fa-question-circle icon"></i>Api docs</a>
 
           <a ngbDropdownItem class="btn btn-block text-left text-white" [routerLink]="['/login']"><i
-              class="fas fa-sign-out-alt icon"></i>
+            class="fas fa-sign-out-alt icon"></i>
             Logout</a>
+        </div>
       </div>
     </div>
   </div>
-  </div>
 </nav>
 
 <router-outlet></router-outlet>
diff --git a/src/app/top-panel/top-panel.component.scss b/src/app/top-panel/top-panel.component.scss
index dec85313..7f1c86e3 100644
--- a/src/app/top-panel/top-panel.component.scss
+++ b/src/app/top-panel/top-panel.component.scss
@@ -1,13 +1,13 @@
 
 .top-bar {
-  padding-left: 210px;
-  padding-right: 210px;
+  padding-left: 120px;
+  padding-right: 120px;
 }
 
 @media (max-width: 1550px) {
   .top-bar {
-    padding-left: 110px;
-    padding-right: 110px;
+    padding-left: 80px;
+    padding-right: 80px;
   }
 }
 
diff --git a/src/app/top-panel/top-panel.component.ts b/src/app/top-panel/top-panel.component.ts
index 4805cdc2..feaa71f0 100644
--- a/src/app/top-panel/top-panel.component.ts
+++ b/src/app/top-panel/top-panel.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ProjectService } from '../project.service';
 import { ProjectsListing } from '../project-api.service.model';
 import { Observable } from 'rxjs';
@@ -9,7 +9,7 @@ import { ChangeDetectorRef } from '@angular/core';
 @Component({
   selector: 'app-top-panel',
   templateUrl: './top-panel.component.html',
-  styleUrls: ['./top-panel.component.scss']
+  styleUrls: ['./top-panel.component.scss', '../shared-styles.css']
 })
 export class TopPanelComponent implements OnInit {