From bcdb3e4708400505308e5bfe5c8321443e5bfecf Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Wed, 4 Dec 2019 11:47:20 +0000
Subject: [PATCH] [MonitorDashboard]: Sidebar: add activeItem and subItem to
 check which element is active

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57805 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../sidebar/sideBar.component.html            |  12 +-
 .../sidebar/sideBar.component.ts              |  12 +-
 src/app/monitor/monitor.component.html        |   5 +-
 src/app/monitor/monitor.component.ts          | 544 +++++++++---------
 src/app/utils/entities/sidebar.ts             |   8 +-
 5 files changed, 293 insertions(+), 288 deletions(-)

diff --git a/src/app/library/sharedComponents/sidebar/sideBar.component.html b/src/app/library/sharedComponents/sidebar/sideBar.component.html
index d28e6a3..65d9631 100644
--- a/src/app/library/sharedComponents/sidebar/sideBar.component.html
+++ b/src/app/library/sharedComponents/sidebar/sideBar.component.html
@@ -1,9 +1,5 @@
 <aside id="sidebar_main">
   <div *ngIf= "showHeader" class="sidebar_main_header">
-    <div *ngIf="name" class="uk-padding-small">
-      <div class="uk-text-bold">{{name}}</div>
-      <div>Monitor Dashboard</div>
-    </div>
     <div *ngIf="header" class="uk-padding-small">
       <img *ngIf="header.logoUrl" [src]="header.logoUrl">
       <div class="uk-text-bold uk-margin-top">{{header.name}}</div>
@@ -13,11 +9,11 @@
   <div class="menu_section uk-margin-top">
     <ul>
       <ng-template ngFor [ngForOf]="items" let-item let-i="index">
-        <li [class.current_section]="isTheActiveMenu(item.route)"
+        <li [class.current_section]="isTheActiveMenuItem(item)"
             [class.act_section]="item.open"
             [title]="item.name"
             [class.submenu_trigger]="item.items.length > 1">
-          <a *ngIf="item.items.length <= 1 && item.route" [routerLink]="item.route">
+          <a *ngIf="item.items.length <= 1 && item.route" [routerLink]="!isTheActiveMenuItem(item)?item.route:null">
             <span *ngIf="item.icon" class="menu_icon"><i class="material-icons">{{item.icon}}</i></span>
             <span class="menu_title">{{item.name}}</span>
           </a>
@@ -28,8 +24,8 @@
             </a>
             <ul [style.display]="(item.open?'block':'none')">
               <ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
-                <li *ngIf="subItem.route" [class.act_item]="isTheActiveMenu(subItem.route)">
-                  <a [routerLink]="subItem.route">
+                <li *ngIf="subItem.route" [class.act_item]="isTheActiveMenuItem(subItem, true)">
+                  <a [routerLink]="!isTheActiveMenuItem(subItem, true)?subItem.route:null">
                     <span *ngIf="subItem.icon" class="menu_icon"><i class="material-icons">{{subItem.icon}}</i></span>
                     <span class="menu_title">{{subItem.name}}</span>
                   </a>
diff --git a/src/app/library/sharedComponents/sidebar/sideBar.component.ts b/src/app/library/sharedComponents/sidebar/sideBar.component.ts
index 8599ca0..202f03c 100644
--- a/src/app/library/sharedComponents/sidebar/sideBar.component.ts
+++ b/src/app/library/sharedComponents/sidebar/sideBar.component.ts
@@ -8,10 +8,10 @@ import {Header, Item} from "../../../utils/entities/sidebar";
 })
 export class SideBarComponent implements OnInit {
   @Input() items: Item[] = [];
-  // TODO remove it
-  @Input() name = null;
   @Input() header: Header = null;
   @Input() showHeader: boolean = true;
+  @Input() activeItem: string = '';
+  @Input() activeSubItem: string = '';
 
   constructor(private router: Router) {
   }
@@ -19,11 +19,9 @@ export class SideBarComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  private getCurrentRoute(): string {
-    return this.router.url.split('?')[0];
-  }
 
-  isTheActiveMenu(route: string): boolean {
-    return this.getCurrentRoute().indexOf(route) !== -1;
+  isTheActiveMenuItem(item: Item, subItem = false): boolean {
+    return  (!subItem && this.activeItem === item.id) ||
+        (subItem && this.activeSubItem === item.id);
   }
 }
diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index bb40c01..03fdfd0 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -72,8 +72,9 @@
         </div>
       </nav>
     </div>
-    <dashboard-sidebar *ngIf="sideBar && stakeholder" [items]="sideBar.items" [name]="stakeholder.index_name"
-                       [showHeader]=false
+    <dashboard-sidebar *ngIf="sideBar && stakeholder" [items]="sideBar.items"
+                       [activeItem]="activeCategory?activeCategory.alias:null"
+                       [activeSubItem]="activeSubCategory?activeSubCategory.alias:null" [showHeader]=false
     ></dashboard-sidebar>
     <div *ngIf="activeSubCategory"
          id="page_content" click-outside-or-esc targetId="page_content" [escClose]="false"
diff --git a/src/app/monitor/monitor.component.ts b/src/app/monitor/monitor.component.ts
index bb50774..afb75e4 100644
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@@ -20,279 +20,291 @@ import {LayoutService} from "../library/sharedComponents/sidebar/layout.service"
 import {FormBuilder, FormControl} from "@angular/forms";
 
 @Component({
-  selector: 'monitor',
-  templateUrl: 'monitor.component.html',
+    selector: 'monitor',
+    templateUrl: 'monitor.component.html',
 })
 export class MonitorComponent implements OnInit, OnDestroy {
-  public piwiksub: any;
-  public pageContents = null;
-  public divContents = null;
-  public status: number;
-  public loading: boolean = true;
-  public indicatorUtils: IndicatorUtils = new IndicatorUtils();
-  public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
-  public activeTopic: Topic = null;
-  public activeCategory: Category = null;
-  public activeSubCategory: SubCategory = null;
-  public sideBar: Sidebar = null;
-  public errorCodes: ErrorCodes;
-  public stakeholder: Stakeholder;
-  public numberResults: Map<number, number> = new Map<number, number>();
-  public chartsActiveType: Map<number, IndicatorPath> = new Map<number, IndicatorPath>();
-  private errorMessages: ErrorMessagesComponent;
-  properties: EnvProperties;
-  fundingL0;
-  startYear;
-  endYear;
+    public piwiksub: any;
+    public pageContents = null;
+    public divContents = null;
+    public status: number;
+    public loading: boolean = true;
+    public indicatorUtils: IndicatorUtils = new IndicatorUtils();
+    public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
+    public activeTopic: Topic = null;
+    public activeCategory: Category = null;
+    public activeSubCategory: SubCategory = null;
+    public sideBar: Sidebar = null;
+    public errorCodes: ErrorCodes;
+    public stakeholder: Stakeholder;
+    public numberResults: Map<number, number> = new Map<number, number>();
+    public chartsActiveType: Map<number, IndicatorPath> = new Map<number, IndicatorPath>();
+    private errorMessages: ErrorMessagesComponent;
+    properties: EnvProperties;
+    fundingL0;
+    startYear;
+    endYear;
 
-  public keyword:FormControl;
+    public keyword: FormControl;
 
-  constructor(
-    private route: ActivatedRoute,
-    private _router: Router,
-    private _meta: Meta,
-    private _title: Title,
-    private _piwikService: PiwikService,
-    private helper: HelperService,
-    private stakeholderService: StakeholderService,
-    private statisticsService: StatisticsService,
-    private layoutService: LayoutService,
-    private seoService: SEOService,
-    private cdr: ChangeDetectorRef,
-    private sanitizer: DomSanitizer, private _fb: FormBuilder) {
-      this.errorCodes = new ErrorCodes();
-      this.errorMessages = new ErrorMessagesComponent();
-      this.status = this.errorCodes.LOADING;
-  }
+    constructor(
+        private route: ActivatedRoute,
+        private _router: Router,
+        private _meta: Meta,
+        private _title: Title,
+        private _piwikService: PiwikService,
+        private helper: HelperService,
+        private stakeholderService: StakeholderService,
+        private statisticsService: StatisticsService,
+        private layoutService: LayoutService,
+        private seoService: SEOService,
+        private cdr: ChangeDetectorRef,
+        private sanitizer: DomSanitizer, private _fb: FormBuilder) {
+        this.errorCodes = new ErrorCodes();
+        this.errorMessages = new ErrorMessagesComponent();
+        this.status = this.errorCodes.LOADING;
+    }
 
-  public ngOnInit() {
-    this.keyword = this._fb.control('');
-    this.keyword.valueChanges.subscribe(value=>{
-      console.log("KEyword Changed!");
-      //TODO do a real action
-    });
-    this.layoutService.setHasSidebar(false);
-    this.layoutService.setHasHeader(false);
-    this.route.data
-      .subscribe((data: { envSpecific: EnvProperties }) => {
-        this.route.params.subscribe(params => {
-          this.properties = data.envSpecific;
-          var url = data.envSpecific.baseLink + this._router.url;
-          if (!this.stakeholder || this.stakeholder.index_id !== params['stakeholder']) {
-            this.status = this.errorCodes.LOADING;
-            this.numberResults = new Map<number, number>();
-            this.chartsActiveType = new Map<number, IndicatorPath>();
-            // this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
-            let stakeholder:Stakeholder = null;
-            if(params['stakeholder']=="fwf"){
-              stakeholder = new Stakeholder("fwf", "funder", "fwf_________::FWF","Austrian Science Fund (FWF)","FWF",
-              false,"fwf",true,true, null);
-              stakeholder = this.stakeholderUtils.
-              createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);
-              stakeholder.logoUrl = "./assets/fwf.png";
-            }else if(params['stakeholder']=="arc"){
-              stakeholder = new Stakeholder("arc","funder","arc_________::ARC",
-                "Australian Research Council (ARC)","ARC",
-                false,"arc",true,true, null);
-              stakeholder = this.stakeholderUtils.
-              createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);
-              stakeholder.logoUrl = "./assets/arc1.gif";
-            }else{
-              stakeholder = new Stakeholder("ec","funder","ec__________::EC",
-                "European Commission","EC",
-                false,"ec",true,true, null);
-              stakeholder = this.stakeholderUtils.
-              createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);
-              stakeholder.logoUrl = "./assets/ec.png";
-            }
+    public ngOnInit() {
+        this.keyword = this._fb.control('');
+        this.keyword.valueChanges.subscribe(value => {
+            console.log("KEyword Changed!");
+            //TODO do a real action
+        });
+        this.layoutService.setHasSidebar(false);
+        this.layoutService.setHasHeader(false);
+        this.route.data
+            .subscribe((data: { envSpecific: EnvProperties }) => {
+                this.route.params.subscribe(params => {
+                    this.properties = data.envSpecific;
+                    var url = data.envSpecific.baseLink + this._router.url;
+                    if (!this.stakeholder || this.stakeholder.index_id !== params['stakeholder']) {
+                        this.status = this.errorCodes.LOADING;
+                        this.numberResults = new Map<number, number>();
+                        this.chartsActiveType = new Map<number, IndicatorPath>();
+                        // this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
+                        let stakeholder: Stakeholder = null;
+                        if (params['stakeholder'] == "fwf") {
+                            stakeholder = new Stakeholder("fwf", "funder", "fwf_________::FWF", "Austrian Science Fund (FWF)", "FWF",
+                                false, "fwf", true, true, null);
+                            stakeholder = this.stakeholderUtils.createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);
+                            stakeholder.logoUrl = "./assets/fwf.png";
+                        } else if (params['stakeholder'] == "arc") {
+                            stakeholder = new Stakeholder("arc", "funder", "arc_________::ARC",
+                                "Australian Research Council (ARC)", "ARC",
+                                false, "arc", true, true, null);
+                            stakeholder = this.stakeholderUtils.createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);
+                            stakeholder.logoUrl = "./assets/arc1.gif";
+                        } else {
+                            stakeholder = new Stakeholder("ec", "funder", "ec__________::EC",
+                                "European Commission", "EC",
+                                false, "ec", true, true, null);
+                            stakeholder = this.stakeholderUtils.createFunderFromDefaultProfile(stakeholder, StakeholderCreator.createFunderDefaultProfile().topics);
+                            stakeholder.logoUrl = "./assets/ec.png";
+                        }
+                        if (stakeholder) {
+                            this.stakeholder = stakeholder;
+                            this.seoService.createLinkForCanonicalURL(url, false);
+                            this._meta.updateTag({content: url}, "property='og:url'");
+                            var description = "Monitor Dashboard | " + this.stakeholder.index_name;
+                            var title = "Monitor Dashboard | " + this.stakeholder.index_shortName;
+                            this._meta.updateTag({content: description}, "name='description'");
+                            this._meta.updateTag({content: description}, "property='og:description'");
+                            this._meta.updateTag({content: title}, "property='og:title'");
+                            this._title.setTitle(title);
+                            if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+                                this.piwiksub = this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe();
+                            }
+                            //this.getDivContents();
+                            this.getPageContents();
+                            this.status = this.errorCodes.DONE;
+                            this.setView(params);
+                        }
+                        // }, error => {
+                        //   this.navigateToError();
+                        // })
+                    } else {
+                        this.setView(params);
+                    }
+                });
+            });
+    }
 
-              if(stakeholder) {
-                this.stakeholder = stakeholder;
-                this.seoService.createLinkForCanonicalURL(url, false);
-                this._meta.updateTag({content: url}, "property='og:url'");
-                var description = "Monitor Dashboard | " + this.stakeholder.index_name;
-                var title = "Monitor Dashboard | " + this.stakeholder.index_shortName;
-                this._meta.updateTag({content: description}, "name='description'");
-                this._meta.updateTag({content: description}, "property='og:description'");
-                this._meta.updateTag({content: title}, "property='og:title'");
-                this._title.setTitle(title);
-                if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
-                  this.piwiksub = this._piwikService.trackView(this.properties, title, this.properties.piwikSiteId).subscribe();
+    public get open() {
+        return this.layoutService.open;
+    }
+
+    public toggleOpen(event = null) {
+        if (!event) {
+            this.layoutService.setOpen(!this.open);
+        } else if (event && event['value'] === true) {
+            this.layoutService.setOpen(false);
+        }
+    }
+
+    private getPageContents() {
+        this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
+            this.pageContents = contents;
+        })
+    }
+
+    private getDivContents() {
+        this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
+            this.divContents = contents;
+        })
+    }
+
+    private setView(params: Params) {
+        if (params && params['topic']) {
+            this.activeTopic = this.stakeholder.topics.
+            find(topic => topic.alias === decodeURIComponent(params['topic']) && topic.isPublic && topic.isActive);
+            if (this.activeTopic) {
+                if (params['category']) {
+                    this.activeCategory = this.activeTopic.categories.find(category =>
+                        (category.alias === params['category']) && category.isPublic && category.isActive);
+                } else {
+                    this.activeCategory = this.activeTopic.categories.
+                    find(category => category.isPublic && category.isActive);
+                    if (this.activeCategory) {
+                      this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>
+                          subCategory.isPublic && subCategory.isActive);
+                      if (this.activeSubCategory) {
+                        this.setSideBar();
+                        this.setIndicators();
+                      } else {
+                        this.navigateToError();
+                      }
+                    } else {
+                        this.navigateToError();
+                    }
+                    return;
+                }
+                if (this.activeCategory) {
+                    if (params['subCategory']) {
+                        this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>
+                            (subCategory.alias === params['subCategory'] && subCategory.isPublic && subCategory.isActive));
+                    } else {
+                        this.activeSubCategory = this.activeCategory.subCategories.find(subCategory =>
+                            subCategory.isPublic && subCategory.isActive);
+                    }
+                    if (this.activeSubCategory) {
+                        this.setSideBar();
+                        this.setIndicators();
+                    } else {
+                       this.navigateToError();
+                    }
+                  return;
                 }
-                //this.getDivContents();
-                this.getPageContents();
-                this.status = this.errorCodes.DONE;
-                this.setView(params);
-              }
-            // }, error => {
-            //   this.navigateToError();
-            // })
-          } else {
-            this.setView(params);
-          }
-        });
-      });
-  }
-
-  public get open() {
-    return this.layoutService.open;
-  }
-
-  public toggleOpen(event = null) {
-    if(!event) {
-      this.layoutService.setOpen(!this.open);
-    } else if(event && event['value'] === true) {
-      this.layoutService.setOpen(false);
-    }
-  }
-
-  private getPageContents() {
-    this.helper.getPageHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
-      this.pageContents = contents;
-    })
-  }
-
-  private getDivContents() {
-    this.helper.getDivHelpContents(this._router.url, this.properties, 'monitor').subscribe(contents => {
-      this.divContents = contents;
-    })
-  }
-
-  private setView(params: Params) {
-    if (params && params['topic']) {
-      this.activeTopic = this.stakeholder.topics.filter(topic => topic.alias === decodeURIComponent(params['topic']))[0];
-      if (this.activeTopic) {
-        if (params['category']) {
-          this.activeCategory = this.activeTopic.categories.filter(category =>
-            (category.alias === params['category']) && category.isPublic && category.isActive)[0];
-        } else {
-          let category: Category = this.activeTopic.categories[0];
-          if(category) {
-            this.navigateTo(this.stakeholder.alias, this.activeTopic.alias, category.alias);
-          } else {
-            this.navigateToError();
-          }
-          return;
-        }
-        if (this.activeCategory) {
-          if (params['subCategory']) {
-            this.activeSubCategory = this.activeCategory.subCategories.filter(subCategory =>
-              (subCategory.alias === params['subCategory'] && subCategory.isPublic && subCategory.isActive))[0];
-          } else {
-            this.activeSubCategory = this.activeCategory.subCategories.filter(subCategory =>
-              !subCategory.alias && subCategory.isPublic && subCategory.isActive)[0];
-          }
-          if (this.activeSubCategory) {
-            this.setSideBar();
-            this.setIndicators();
-            return;
-          } else {
-            let subCategory: SubCategory = this.activeCategory.subCategories.filter(subCategory =>
-              subCategory.isPublic && subCategory.isActive)[0];
-            this.navigateTo(this.stakeholder.alias, this.activeTopic.alias, this.activeCategory.alias, subCategory.alias);
-            return;
-          }
-        }
-      }
-      this.navigateToError();
-    } else {
-      let topic: Topic = this.stakeholder.topics[0];
-      let category: Category = topic.categories.filter(category => category.isPublic && category.isActive)[0];
-      if(topic && category) {
-        this.navigateTo(this.stakeholder.alias, topic.alias, category.alias);
-      } else {
-        this.navigateToError();
-      }
-    }
-  }
-
-  private setSideBar() {
-    let items: Item[] = [];
-    this.activeTopic.categories.forEach(category => {
-      if (category.isPublic && category.isActive) {
-        let subItems: Item[] = [];
-        category.subCategories.forEach(subCategory => {
-          if (subCategory.alias != null && subCategory.isPublic && subCategory.isActive) {
-            subItems.push(new Item(subCategory.name, (
-              '/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias + '/' + subCategory.alias),
-              null, null, false));
-          }
-        });
-        const open = this.activeCategory.alias === category.alias;
-        items.push(new Item(category.name, (
-          '/' +  this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias),
-          subItems, null, open));
-      }
-    });
-    this.sideBar = new Sidebar(items, null);
-  }
-
-  private setIndicators() {
-    let urls: Map<string, number[]> = new Map<string, number[]>();
-    this.activeSubCategory.numbers.forEach((number, index) => {
-      if (number.isActive && number.isPublic) {
-        let url = number.indicatorPaths[0].url;
-        //add fundingLevel0 filter in the query
-        if(this.fundingL0 && number.indicatorPaths[0].filters.get("fundingL0")){
-          url = url + number.indicatorPaths[0].filters.get("fundingL0").replace(ChartHelper.prefix+'fundingL0'+ChartHelper.suffix,encodeURIComponent(this.fundingL0));
-        }
-        const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
-        const indexes = urls.get(pair) ? urls.get(pair) : [];
-        indexes.push(index);
-        urls.set(pair, indexes);
-      }
-    });
-    urls.forEach((indexes, pair) => {
-      pair = JSON.parse(pair);
-      this.statisticsService.getNumbers(pair[0], pair[1]).subscribe(response => {
-        indexes.forEach(index => {
-          let result = JSON.parse(JSON.stringify(response));
-          this.activeSubCategory.numbers[index].indicatorPaths[0].jsonPath.forEach(jsonPath => {
-            if (result) {
-              result = result[jsonPath];
             }
-          });
-          this.numberResults.set(index, result);
-        });
-      })
-    });
-    this.activeSubCategory.charts.forEach((chart, index) => {
-      if (chart.indicatorPaths.length > 0) {
-        chart.indicatorPaths[0].safeResourceUrl = this.getUrlByStakeHolder(chart.indicatorPaths[0]);
-        this.chartsActiveType.set(index, chart.indicatorPaths[0]);
-      }
-    });
-    this.cdr.detectChanges();
-  }
-
-  public getUrlByStakeHolder(indicatorPath: IndicatorPath) {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(
-      this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath, this.fundingL0, this.startYear, this.endYear)));
-  }
-
-  public setActiveChart(index, type: string) {
-    let activeChart = this.activeSubCategory.charts[index].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0];
-    activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart);
-    this.chartsActiveType.set(index, activeChart);
-  }
-
-  private navigateToError() {
-    this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});
-  }
-
-  public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) {
-    let url = stakeholder + '/' + topic + ((category) ? ('/'
-      + category) : '') + ((subcategory) ? ('/' + subcategory) : '');
-    return this._router.navigate([url]);
-  }
-
-  public quote(param: string): string {
-    return StringUtils.quote(param);
-  }
-
-  public ngOnDestroy() {
-    if (this.piwiksub) {
-      this.piwiksub.unsubscribe();
+            this.navigateToError();
+        } else {
+            this.activeTopic = this.stakeholder.topics.find(topic => topic.isPublic && topic.isActive);
+            if(this.activeTopic) {
+              this.activeCategory = this.activeTopic.categories.find(category => category.isPublic && category.isActive);
+              if (this.activeCategory) {
+                this.activeSubCategory = this.activeCategory.subCategories.find(subCategory => subCategory.isPublic && subCategory.isActive);
+                if (this.activeSubCategory) {
+                  this.setSideBar();
+                  this.setIndicators();
+                } else {
+                  this.navigateToError();
+                }
+              } else {
+                this.navigateToError();
+              }
+            } else {
+              this.navigateToError();
+            }
+        }
+    }
+
+    private setSideBar() {
+        let items: Item[] = [];
+        this.activeTopic.categories.forEach(category => {
+            if (category.isPublic && category.isActive) {
+                let subItems: Item[] = [];
+                category.subCategories.forEach(subCategory => {
+                    if (subCategory.isPublic && subCategory.isActive) {
+                        subItems.push(new Item(subCategory.alias, subCategory.name, (
+                            '/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias + '/' + subCategory.alias),
+                            null, null, false));
+                    }
+                });
+                const open = this.activeCategory.alias === category.alias;
+                items.push(new Item(category.alias, category.name, (
+                    '/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias),
+                    subItems, null, open));
+            }
+        });
+        this.sideBar = new Sidebar(items, null);
+    }
+
+    private setIndicators() {
+        let urls: Map<string, number[]> = new Map<string, number[]>();
+        this.activeSubCategory.numbers.forEach((number, index) => {
+            if (number.isActive && number.isPublic) {
+                let url = number.indicatorPaths[0].url;
+                //add fundingLevel0 filter in the query
+                if (this.fundingL0 && number.indicatorPaths[0].filters.get("fundingL0")) {
+                    url = url + number.indicatorPaths[0].filters.get("fundingL0").replace(ChartHelper.prefix + 'fundingL0' + ChartHelper.suffix, encodeURIComponent(this.fundingL0));
+                }
+                const pair = JSON.stringify([number.indicatorPaths[0].source, url]);
+                const indexes = urls.get(pair) ? urls.get(pair) : [];
+                indexes.push(index);
+                urls.set(pair, indexes);
+            }
+        });
+        urls.forEach((indexes, pair) => {
+            pair = JSON.parse(pair);
+            this.statisticsService.getNumbers(pair[0], pair[1]).subscribe(response => {
+                indexes.forEach(index => {
+                    let result = JSON.parse(JSON.stringify(response));
+                    this.activeSubCategory.numbers[index].indicatorPaths[0].jsonPath.forEach(jsonPath => {
+                        if (result) {
+                            result = result[jsonPath];
+                        }
+                    });
+                    this.numberResults.set(index, result);
+                });
+            })
+        });
+        this.activeSubCategory.charts.forEach((chart, index) => {
+            if (chart.indicatorPaths.length > 0) {
+                chart.indicatorPaths[0].safeResourceUrl = this.getUrlByStakeHolder(chart.indicatorPaths[0]);
+                this.chartsActiveType.set(index, chart.indicatorPaths[0]);
+            }
+        });
+        this.cdr.detectChanges();
+    }
+
+    public getUrlByStakeHolder(indicatorPath: IndicatorPath) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(
+            this.statisticsService.getChartUrl(indicatorPath.source, this.indicatorUtils.getFullUrl(indicatorPath, this.fundingL0, this.startYear, this.endYear)));
+    }
+
+    public setActiveChart(index, type: string) {
+        let activeChart = this.activeSubCategory.charts[index].indicatorPaths.filter(indicatorPath => indicatorPath.type === type)[0];
+        activeChart.safeResourceUrl = this.getUrlByStakeHolder(activeChart);
+        this.chartsActiveType.set(index, activeChart);
+    }
+
+    private navigateToError() {
+        this._router.navigate(['/error'], {queryParams: {'page': this._router.url}});
+    }
+
+    public navigateTo(stakeholder: string, topic: string, category: string = null, subcategory: string = null) {
+        let url = stakeholder + '/' + topic + ((category) ? ('/'
+            + category) : '') + ((subcategory) ? ('/' + subcategory) : '');
+        return this._router.navigate([url]);
+    }
+
+    public quote(param: string): string {
+        return StringUtils.quote(param);
+    }
+
+    public ngOnDestroy() {
+        if (this.piwiksub) {
+            this.piwiksub.unsubscribe();
+        }
     }
-  }
 }
diff --git a/src/app/utils/entities/sidebar.ts b/src/app/utils/entities/sidebar.ts
index 7a377cb..56cba38 100644
--- a/src/app/utils/entities/sidebar.ts
+++ b/src/app/utils/entities/sidebar.ts
@@ -1,5 +1,3 @@
-import {ElementRef, TemplateRef} from "@angular/core";
-
 export class Header {
   name: string;
   dashboard: string;
@@ -13,20 +11,20 @@ export class Header {
 }
 
 export class Item {
+  id: string;
   name: string;
   route: string;
   items: Item[];
   icon: string;
   open: boolean;
-  action: TemplateRef<ElementRef>;
 
-  constructor(name: string, route: string, items: Item[], icon, open: boolean, action: TemplateRef<ElementRef> = null) {
+  constructor(id: string, name: string, route: string, items: Item[], icon, open: boolean) {
+    this.id = id;
     this.name = name;
     this.route = route;
     this.items = items;
     this.icon = icon;
     this.open = open;
-    this.action = action;
   }
 }