[Monitor Dashboard|Trunk]

Apply initial changes according to the latest mocks Filters: hide filter icon when filter panel is open show an overlay film when at least one active filter cannot be applied to a chart when a filter is already applied by default to a chart (with multiple queries) with different value --> change the chart color to one with lower opacity git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59183 d315682c-612b-4755-9ff5-7f18f6832af3
2020-07-28 14:57:17 +00:00 · 2020-07-28 14:57:17 +00:00 · 1c08f50c75
parent 4592f0760c
commit 1c08f50c75
7 changed files with 4282 additions and 70 deletions
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@ -45,7 +45,6 @@
  </div>
  <dashboard-sidebar *ngIf="stakeholder && isFrontPage" [items]="sideBarItems"
                     [activeItem]="activeTopic?activeTopic.alias:null" [showHeader]=true
-                     headerName="Monitor"
                     [searchLink]="(properties.showContent)?properties.searchLinkToResults:null"
                     [searchParams]="createSearchParameters()"
                     [headerUrl]="properties.baseLink"
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@ -1,12 +1,10 @@
 <ng-template #selected_filters_pills let-margin="margin">
 <!--  <div class="uk-grid uk-grid-small uk-text-small" uk-grid>-->
    <span *ngIf="periodFilter.selectedFromAndToValues.length > 0"  class="uk-grid-margin" >
-        <span  class="selectedFilterLabel"  [class.uk-margin-small-left]="margin" title="Remove {{periodFilter.selectedFromAndToValues}}">
-          <a (click)="clearPeriodFilter()" [class]="((loading)?'  uk-disabled':'  ')+' uk-link-text '"> <i
-            class=" material-icons"></i>
-
+        <a (click)="clearPeriodFilter()" [class]="((loading)?'  uk-disabled':'  ')+' uk-link-text '"> <span  class="selectedFilterLabel"  [class.uk-margin-small-left]="margin" title="Remove {{periodFilter.selectedFromAndToValues}}">
+          <i class=" material-icons"></i>
          <span class="uk-margin-small-left">{{periodFilter.selectedFromAndToValues}}</span>
-        </a></span>
+        </span></a>
    </span>
    <ng-container *ngFor="let filter of filters ">
      <ng-container *ngIf="filter.countSelectedValues > 0">
@ -43,37 +41,44 @@
 <div id="page_content">
      <div  class="uk-navbar-container uk-sticky uk-sticky-fixed" style="top: 70px; position:
      fixed; width: 100%">
-      <nav class=" ">
-        <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
-          <ul *ngIf="activeTopic && activeTopic.categories.length > 1"
-              class="categoriesTabs uk-tab uk-padding uk-padding-remove-bottom uk-padding-remove-left uk-margin-remove">
-            <ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
-              <li *ngIf="isPublicOrIsMember(category.isPublic) && category.isActive" [class.uk-active]="category.alias === activeCategory.alias">
-                <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
-                   class="uk-margin-remove-bottom uk-h4"
-                ><span>{{category.name}}</span></a>
+        <div class="uk-margin-large-left">
+        <nav class=" ">
+          <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
+            <ul *ngIf="activeTopic && activeTopic.categories.length > 1"
+                class="categoriesTabs uk-tab  ">
+              <ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
+                <li *ngIf="isPublicOrIsMember(category.isPublic) && category.isActive" [class.uk-active]="category.alias === activeCategory.alias">
+                  <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
+                     class="uk-margin-remove-bottom uk-h4"
+                  ><span>{{category.name}}</span></a>
+                </li>
+              </ng-template>
+            </ul>
+          </div>
+        </nav>
+          <ul *ngIf="activeCategory && activeCategory.subCategories.length > 1"
+              class="uk-subnav uk-subnav-pill subCategoriesTabs ">
+            <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
+              <li *ngIf="isPublicOrIsMember(subCategory.isPublic) && subCategory.isActive"
+                  [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
+                <a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
+                   class="uk-margin-remove-bottom uk-h3"
+                ><span>{{subCategory.name}}</span></a>
              </li>
            </ng-template>
          </ul>
+          <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom">
+            <span class="uk-grid-margin">Filters: </span>
+            <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
+          </div>
        </div>
-      </nav>
    </div>
-    <div id="page_content_inner" class="uk-margin-large-top">
+    <div id="page_content_inner" class="uk-margin-large-top" [style.padding-top.px]="(24+
+    (activeCategory &&
+    activeCategory.subCategories.length > 1?40:0)+(activeTopic &&
+    activeTopic.categories.length > 1?20:0)+(countSelectedFilters()
+    > 0?40:0))">
      <div class="uk-margin-top">
-        <ul *ngIf="activeCategory && activeCategory.subCategories.length > 1" class="uk-tab subCategoriesTabs">
-          <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
-            <li *ngIf="isPublicOrIsMember(subCategory.isPublic) && subCategory.isActive"
-                [ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
-              <a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
-                 class="uk-margin-remove-bottom uk-h3"
-              ><span>{{subCategory.name}}</span></a>
-            </li>
-          </ng-template>
-        </ul>
-        <div *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small">
-          <span class="uk-grid-margin">Filters: </span>
-          <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
-        </div>
        <div *ngIf="privateStakeholder">
          <div class="uk-text-center uk-height-medium">
            <div class="uk-h3 "><i>
@ -126,9 +131,12 @@
                   [class.uk-width-1-5@m]="indicator.width === 'small'"
                   [class.uk-width-1-3@m]="indicator.width === 'medium'"
                   [class.uk-width-1-2]="indicator.width === 'large'" class=" uk-margin-bottom">
-                <div class="md-card" [attr.uk-tooltip]="indicator.description">
+                <div class="md-card" [attr.uk-tooltip]="indicator.description"
+                     [class.uk-disabled]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()"
+                     [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
                  <div class="md-card-content">
-<!--                    <div>Filtered: {{indicator.indicatorPaths[0].filteredApplied}}</div>-->
+                    <!--<div>Filtered: {{indicator.indicatorPaths[0].filtersApplied}} out of
+                      {{countSelectedFilters()}}</div>-->
                    <h2 *ngIf="numberResults.get(i + '-' + j)" class="">
                      <span>{{numberResults.get(i + '-' + j) | number}}</span>
                    </h2>
@ -155,7 +163,13 @@
                  <h4 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom ">
                    <div>{{indicator.name + " "}}</div>
                  </h4>
-                  <div class="md-card"><!--[attr.uk-tooltip]="indicator.description">-->
+                  <div class="md-card"
+                       [class.uk-disabled]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
+                       [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()"
+                  ><!--[
+                       attr
+                       .uk-tooltip]="indicator
+                  .description">-->
                    <div class="md-card-content uk-text-center">
                      <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
                        <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
@ -165,7 +179,8 @@
                          {{indicatorPath.type}}
                        </button>
                      </div>
-<!--                      <div>Filtered: {{chartsActiveType.get(i + '-' + j).filteredApplied}}</div>-->
+                      <!--<div>Filtered: {{chartsActiveType.get(i + '-' + j).filtersApplied}}  out of
+                        {{countSelectedFilters()}}</div>-->
                      <iframe *ngIf="chartsActiveType.get(i + '-' + j).source !== 'image'"
                              [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
                              class="uk-width-1-1 uk-height-medium"></iframe>
@ -191,7 +206,8 @@
  </div>
 <div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="filters_switcher"
     [class.switcher_active]="filterToggle">
-    <div id="style_switcher_toggle" (click)="filterToggle= !filterToggle">
+    <div id="style_switcher_toggle" (click)="filterToggle= !filterToggle"
+         [style.display]="(filterToggle?'none':'inherit')">
      <i class="  uk-text-muted">
        <svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
             viewBox="0 0 24 24"
@ -215,7 +231,8 @@
      <div class="uk-grid uk-grid-small uk-text-small" uk-grid>
        <ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:false}"></ng-container>
      </div>
-
+      <div class="uk-margin-small-top"><i  class="uk-text-muted uk-text-small"> If any of the filters cannot be
+        applied to a chart, it will appear faded.</i></div>
      <ul class="uk-list uk-list-divider  uk-margin-medium">
        <li>
          <range-filter   [filter]="periodFilter" yearMin="2000" yearMax="2020" [mandatoryRange]="true"
--- a/src/app/monitor/monitor.component.ts
+++ b/src/app/monitor/monitor.component.ts
@ -52,7 +52,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
  public routerHelper: RouterHelper = new RouterHelper();
  filters:Filter[] = [];
  queryParams = {};
-  periodFilter:RangeFilter = { title: "Period",  filterId: "year", originalFilterIdFrom: null, originalFilterIdTo: null, selectedFromValue: null, selectedToValue: null, selectedFromAndToValues: ""};
+  periodFilter:RangeFilter = { title: "Time range",  filterId: "year", originalFilterIdFrom: null, originalFilterIdTo: null, selectedFromValue: null, selectedToValue: null, selectedFromAndToValues: ""};
  privateStakeholder = false;
  public keyword: FormControl;
  constructor(
@ -220,7 +220,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
  countSelectedFilters():number{
    let count = 0;
    if(this.periodFilter.selectedFromAndToValues.length > 0){
-      count++;
+      count+=2;
    }
    for(let filter of this.filters) {
      count +=filter.countSelectedValues;
@ -244,6 +244,7 @@ export class MonitorComponent implements OnInit, OnDestroy {
  }

  private setView(params: Params) {
+    this.loading = false;
    if (params['topic']) {
      this.activeTopic = this.stakeholder.topics.find(topic => topic.alias === decodeURIComponent(params['topic']) && this.isPublicOrIsMember(topic.isPublic) && topic.isActive);
      if (this.activeTopic) {
--- a/src/app/utils/indicator-utils.ts
+++ b/src/app/utils/indicator-utils.ts
@ -297,7 +297,7 @@ export class IndicatorUtils {
    return indicatorPath.url + encodeURIComponent(replacedUrl);
  }
  public getFullUrlWithFilters(stakeholder:Stakeholder, indicatorPath: IndicatorPath, fundingL0: string = null, startYear: string = null, endYear: string = null, isNumber:boolean=false): string {
-    indicatorPath.filteredApplied = false;
+    indicatorPath.filtersApplied = 0;
    let replacedUrl = indicatorPath.chartObject?indicatorPath.chartObject:indicatorPath.url;
    if (indicatorPath.parameters) {
      Object.keys(indicatorPath.parameters).forEach(key => {
@ -325,21 +325,21 @@ export class IndicatorUtils {
      if(indicatorPath.source == "stats-tool" && indicatorPath.chartObject) {
        let filterResults = this.addFilter(replacedUrl, 'fundingL0', fundingL0);
        replacedUrl = filterResults.url;
-        indicatorPath.filteredApplied = indicatorPath.filteredApplied|| filterResults.filteredApplied;
+        indicatorPath.filtersApplied += filterResults.filtersApplied;
      }
    }
    if (startYear) {
      if(indicatorPath.source == "stats-tool" && indicatorPath.chartObject) {
        let filterResults =  this.addFilter(replacedUrl, 'start_year', startYear);
        replacedUrl = filterResults.url;
-        indicatorPath.filteredApplied = indicatorPath.filteredApplied|| filterResults.filteredApplied;
+        indicatorPath.filtersApplied += filterResults.filtersApplied;
      }
    }
    if (endYear ) {
      if(indicatorPath.source == "stats-tool" && indicatorPath.chartObject) {
        let filterResults = this.addFilter(replacedUrl, 'end_year', endYear);
        replacedUrl = filterResults.url;
-        indicatorPath.filteredApplied = indicatorPath.filteredApplied|| filterResults.filteredApplied;
+        indicatorPath.filtersApplied += filterResults.filtersApplied;
      }
    }

@ -360,11 +360,12 @@ export class IndicatorUtils {
  private  addFilter(replacedUrl, filterType:FilterType, filterValue){
    let newJsonObject = JSON.parse(replacedUrl);
    let filterApplied:boolean = false;
+    let queryIndex = 0;
    for (let queries of this.getQueryObjectName(newJsonObject)?newJsonObject[this.getDescriptionObjectName(newJsonObject)][this.getQueryObjectName(newJsonObject)]:newJsonObject[this.getDescriptionObjectName(newJsonObject)]) {

      if(queries["query"]["name"] && !queries["query"]["select"]){

-        if(queries["query"]["name"].indexOf("monitor.")==-1 ){
+        if(queries["query"]["name"].indexOf("monitor.")==-1 || !queries["query"]["parameters"]){
          continue;
        }
        filterApplied = true;
@ -423,19 +424,39 @@ export class IndicatorUtils {
        queries["query"]["filters"] = [];
      }
      let field = queries["query"]["select"][0]["field"];
-      // console.debug("Field is"+field)
      let filterString =  IndicatorFilterUtils.getFilter(field,filterType);
      if(filterString){
-        filterApplied = true;
        let filter = JSON.parse(filterString);
-        let filterposition = IndicatorFilterUtils.filterIndexOf(filter,queries["query"]["filters"]);
+        let filterposition = IndicatorFilterUtils.filterIndexOf(filter,queries["query"]["filters"])
        if(filterposition){
-          queries["query"]["filters"][filterposition.filter][filterposition.groupFilter] = filter['groupFilters'][0]["values"][0].replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue);
+          if(queries["query"]["filters"][filterposition.filter]['groupFilters'][filterposition.groupFilter]["values"][0] != filter['groupFilters'][0]["values"][0].replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue)){
+            //change filter value
+            // queries["query"]["filters"][filterposition.filter]['groupFilters'][filterposition.groupFilter]["values"][0] = filter['groupFilters'][0]["values"][0].replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue);
+            //add user filter value
+            // queries["query"]["filters"].push(JSON.parse(filterString.replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue)));
+            // update colors
+            //if noit a pie, map and chart has more than one query
+            //
+            if(!newJsonObject.hasOwnProperty("mapDescription") && queries["type"]!="pie" && (this.getQueryObjectName(newJsonObject)?newJsonObject[this.getDescriptionObjectName(newJsonObject)][this.getQueryObjectName(newJsonObject)].length:newJsonObject[this.getDescriptionObjectName(newJsonObject)].length) >1) {
+              let activeColors = ["#7CB5EC", "#434348", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"];
+              let inActiveColors = ["#E4EFFB", "#D8D8D9", "#8bbc21", "#910000", "#1aadce", "#492970", "#f28f43", "#77a1e5", "#c42525", "#a6c96a"];
+              if (!newJsonObject[this.getDescriptionObjectName(newJsonObject)]["colors"]) {
+                newJsonObject[this.getDescriptionObjectName(newJsonObject)]["colors"] = activeColors;
+              }
+              newJsonObject[this.getDescriptionObjectName(newJsonObject)]["colors"][queryIndex] = inActiveColors[queryIndex];
+              filterApplied = true;
+            }
+          }else{
+            filterApplied = true;
+          }
+        }else {
+          queries["query"]["filters"].push(JSON.parse(filterString.replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue)));
+          filterApplied = true;
        }
-        queries["query"]["filters"].push(JSON.parse(filterString.replace(ChartHelper.prefix + filterType + ChartHelper.suffix, filterValue)));
      }
+      queryIndex++;
    }
-    return  { "url":JSON.stringify(newJsonObject), "filteredApplied":filterApplied};
+    return  { "url":JSON.stringify(newJsonObject), "filtersApplied":(filterApplied)?1:0};
  }

  generateIndicatorByForm(form: any, indicatorPaths: IndicatorPath[], type:IndicatorType, addParameters:boolean = true ): Indicator {
--- a/src/assets/monitor-custom.css
+++ b/src/assets/monitor-custom.css
@ -1,5 +1,5 @@
 :root {
-    --portal-main-color: #8DCA26;
+    --portal-main-color: #4686E5; /*#8DCA26;*/
    --portal-main-contrast: white;
    --portal-dark-color: #7c9144;

@ -7,7 +7,7 @@

    --explore-portal-color: #D95F2D;
    --provide-portal-color: #37C7E9;
-    --monitor-portal-color: #9ABB55;
+    --monitor-portal-color: #8DCA26;
    --connect-portal-color: #EBB13E;
    --develop-portal-color: #DA65AB;

@ -82,15 +82,16 @@
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover,
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a:hover
 {
-    background-color: var(--portal-main-color)  !important;
+    /*background-color: var(--portal-main-color)  !important;*/
 }
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_title,.stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover  .menu_title,  .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover  .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons,
 .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon svg *
 /*, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a > .menu_icon svg **/
 /*.stakeholderPage #sidebar_main .menu_section > ul > li:hover > a > .menu_icon .material-icons*/
 {
-    color: white !important;
-    fill: white !important;
+    /*color: white !important;*/
+    /*fill: white !important;*/
+    color: var(--portal-main-color) !important;
    font-weight: 700;
 }

@ -98,7 +99,8 @@
    max-height: calc(var(--header-height) - 30px);
 }
 .stakeholderPage .uk-tab > li.uk-active > a,.stakeholderPage .uk-tab > li > a:focus, .stakeholderPage .uk-tab > li > a:hover {
-    border-bottom-color: var(--portal-main-color) !important;
+    /*border-bottom-color: var(--portal-main-color) !important;*/
+    border: 0px !important;
    color: var(--portal-main-color) !important
 }
 .stakeholderPage #style_switcher {
@ -106,19 +108,19 @@
 }

 .stakeholderPage .uk-navbar-container{
-    box-shadow: 0px 1px 3px #0000004D;
+    /*box-shadow: 0px 1px 3px #0000004D;*/

 }
-
+/*
 .stakeholderPage #sidebar_main{
    background-color: #F0F4F2;
-}
+}*/
 .stakeholderPage .categoriesTabs >li a{
-    font-size: 16px;
+    font-size: 14px;
    text-transform: capitalize;
 }
 .stakeholderPage .subCategoriesTabs >li a{
-    font-size: 14px;
+    font-size: 13px;
    text-transform: capitalize;
 }
 .stakeholderPage .categoriesTabs > li.uk-active a, .stakeholderPage .subCategoriesTabs > li.uk-active a{
@ -192,6 +194,91 @@ bottom a:not(.license), bottom a > :not(svg) {
    overflow: hidden;
 }

-.stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul > li .menu_mini_title, .dashboard:not(.sidebar_mini) #sidebar_main .menu_section > ul > li .menu_mini_title{
+.stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul > li .menu_mini_title, .stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul:not(.searchLink) > li .menu_icon, .dashboard .sidebar_main_swipe:not(.stakeholderPage):not(.sidebar_mini) #sidebar_main .menu_section > ul > li .menu_mini_title{
    display: none;
 }
+.stakeholderPage #sidebar_main .menu_section > ul > li {
+    transition: 0.70s;
+    -webkit-transition: 0.70s;
+    -moz-transition: 0.70s;
+    -ms-transition: 0.70s;
+    -o-transition: 0.70s;
+    display: block;
+    text-align: center;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.stakeholderPage #sidebar_main .menu_section > ul > li > a {
+    display: inherit !important;
+    text-align: center;
+}
+.stakeholderPage #sidebar_main .menu_section > ul > li.current_section {
+    width: 100%;
+    height: 100%;
+    transition: 0.70s;
+    -webkit-transition: 0.70s;
+    -moz-transition: 0.70s;
+    -ms-transition: 0.70s;
+    -o-transition: 0.70s;
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    margin: 80px 0px;
+}
+.sidebar_mini #sidebar_main .menu_section > ul > li.current_section{
+    transform: rotate(0deg);
+    width: inherit;
+    height: inherit;
+
+    margin: 0px 0px;
+}
+
+.uk-subnav-pill.subCategoriesTabs > li > a{
+    border: 1px solid #1a1a1a;
+    color:  #1a1a1a;
+    border-radius: 40px;
+    background-color: white;
+    opacity: 0.5 ;
+    /*background: var(--portal-main-color) !important;*/
+    /*color: var(--portal-main-contrast) !important;*/
+
+}
+
+
+.uk-subnav-pill.subCategoriesTabs > li.uk-active > a{
+    color: white;
+    border: 1px solid var(--portal-main-color);
+    background-color: var(--portal-main-color);
+    opacity: 1 ;
+}
+
+.uk-tab.categoriesTabs::before {
+    border-bottom: none !important;
+}
+
+
+.stakeholderPage #style_switcher {
+    box-shadow: none;
+    border: 1px solid var(--monitor-portal-color);
+}
+
+.stakeholderPage #sidebar_main {
+    border-right: 1px solid var(--monitor-portal-color);
+}
+
+.stakeholderPage .md-card.uk-disabled, .stakeholderPage .md-card.semiFiltered{
+    opacity: 0.5;
+}
+.stakeholderPage .md-card.semiFiltered > * > .highcharts-series-group{
+    opacity: 0.5;
+}
+.stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul.searchLink {
+    bottom: 65px;
+    right:0;
+    left:0;
+    position:fixed;
+}
+
--- a/src/assets/monitor-shapes-bg.svg
+++ b/src/assets/monitor-shapes-bg.svg
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@ -88,13 +88,13 @@ html .dashboard {
 }

 .dashboard .sidebar_main_active #hide_controls {
-  background: #F0F4F2;
+  /*background: #F0F4F2;*/
  /*border-top: 1px solid rgba(0,0,0,.30);*/
  width: 319px;
  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  border-right: 1px solid rgba(0,0,0,.12);
+  /*border-right: 1px solid rgba(0,0,0,.12);*/
 }

@media only screen and (max-width: 767px) {
@ -543,7 +543,7 @@ body.dashboard {
  background-color: white;
 }
 .dashboard #sidebar_main{
-  background-color: #F0F4F2;
+  /*background-color: #F0F4F2;*/
 }

 .dashboard .md-card {
@ -559,12 +559,12 @@ body.dashboard {
 }

 .selectedFilterLabel {
-  background: var(--portal-main-color) !important;
-  color: var(--portal-main-contrast) !important;
+  /*background: var(--portal-main-color) !important;*/
+  color: #424242 !important;
  padding: 6px 10px !important;
-  border-radius: 25px !important;
+  border-radius: 5px !important;
 }
-
+/*
 .selectedFilterLabel:hover {
  background: var(--portal-dark-color) !important;
 }
@ -575,7 +575,7 @@ body.dashboard {

 .selectedFilterLabel .material-icons{
  color: var(--portal-main-contrast) !important;
-}
+}*/

 #style_switcher_toggle{
  left: -36px !important;