From 3e90b38251d3be36f7408587ba2bb0abc2281e2e Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 5 Apr 2024 20:44:16 +0300
Subject: [PATCH] Fix monitor page with new multi indicator paths

---
 src/app/openaireLibrary                       |  2 +-
 src/app/shared/monitor/monitor.component.html | 35 +++++++++++--------
 src/app/shared/monitor/monitor.component.ts   |  1 -
 src/assets/openaire-theme                     |  2 +-
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary
index dc1679c..e91830f 160000
--- a/src/app/openaireLibrary
+++ b/src/app/openaireLibrary
@@ -1 +1 @@
-Subproject commit dc1679c56534a505836bc505c75adc3c7ac77fda
+Subproject commit e91830f2f8c1182c6e728f87a03af3a2932d816e
diff --git a/src/app/shared/monitor/monitor.component.html b/src/app/shared/monitor/monitor.component.html
index 135e4a8..2155941 100644
--- a/src/app/shared/monitor/monitor.component.html
+++ b/src/app/shared/monitor/monitor.component.html
@@ -115,34 +115,39 @@
                     <div *ngIf="getSectionDescription(chart)" class="uk-width-1-1 uk-margin-bottom">{{getSectionDescription(chart)}}</div>
                     <h6 *ngIf="chart.title && isMobile && !tabs" class="uk-width-1-1">{{getSectionTitle(chart)}}</h6>
                     <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
-                        <div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(activeChartSectionIndex + '-' + j)"
+                        <div *ngIf="hasPermission(indicator.visibility)"
                              [ngClass]="getChartClassBySize(indicator.width)">
                             <div class="uk-card uk-card-default uk-position-relative"
-                                 [class.semiFiltered]="chartsActiveType.get(activeChartSectionIndex + '-' + j).filtersApplied < countSelectedFilters()">
-                                <div class="uk-card-body uk-text-center uk-margin-small-bottom">
+                                 [class.semiFiltered]="getActiveIndicatorPath(indicator).filtersApplied < countSelectedFilters()">
+                                <div class="uk-card-body uk-margin-small-bottom">
                                     <h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
                                         {{indicator.name + " "}}
                                     </h6>
                                     <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
-                                        <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
-                                                class="uk-button"
-                                                (click)="setActiveChart(activeChartSectionIndex, j, indicatorPath.type)"
-                                                [class.uk-button-secondary]="chartsActiveType.get(activeChartSectionIndex + '-' + j).url === indicatorPath.url">
-                                            {{indicatorPath.type}}
-                                        </button>
+                                        <ul class="uk-subnav uk-subnav-pill uk-subnav-small">
+                                            <li *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
+                                                class="uk-flex uk-margin-small-top"
+                                                [class.uk-active]="(!indicator.activePath && i == 0) || indicator.activePath === i">
+                                                <a (click)="indicator.activePath = i">
+                                  <span>
+                                      {{indicatorPath.parameters.title ? indicatorPath.parameters.title : '--' }}
+                                  </span>
+                                                </a>
+                                            </li>
+                                        </ul>
                                     </div>
                                     <iframe [class.uk-blend-multiply]="!isFullscreen"
-                                            *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(activeChartSectionIndex + '-' + j).source !== 'image'"
-                                            [src]="chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl"
+                                            *ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"
+                                            [src]="getActiveIndicatorPath(indicator).safeResourceUrl"
                                             class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
                                             [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
-                                    <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(activeChartSectionIndex + '-' + j).source !== 'image'">
+                                    <div *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'">
                                         <img class="uk-width-1-1 uk-blend-multiply"
                                              [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
                                              src="assets/chart-placeholder.png">
                                     </div>
-                                    <img *ngIf="chartsActiveType.get(activeChartSectionIndex + '-' + j).source === 'image'"
-                                         [src]="chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl"
+                                    <img *ngIf="getActiveIndicatorPath(indicator).source === 'image'"
+                                         [src]="getActiveIndicatorPath(indicator).safeResourceUrl"
                                          class="uk-width-1-1 uk-blend-multiply"
                                          [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
                                 </div>
@@ -194,7 +199,7 @@
                                                 </button>
                                             </div>
                                             <div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
-                                                <pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{chartsActiveType.get(activeChartSectionIndex + '-' + j).safeResourceUrl.changingThisBreaksApplicationSecurity}}"<br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
+                                                <pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{getActiveIndicatorPath(indicator).safeResourceUrl.changingThisBreaksApplicationSecurity}}"<br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
                                             </div>
                                             <div class="uk-flex uk-flex-right">
                                                 <a class="uk-link-reset copy clipboard_btn"
diff --git a/src/app/shared/monitor/monitor.component.ts b/src/app/shared/monitor/monitor.component.ts
index bce89c8..85bd609 100644
--- a/src/app/shared/monitor/monitor.component.ts
+++ b/src/app/shared/monitor/monitor.component.ts
@@ -71,7 +71,6 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
                   this.activeCategory = null;
                   this.activeSubCategory = null;
                   this.numberResults = new Map<string, number>();
-                  this.chartsActiveType = new Map<string, IndicatorPath>();
                   this.subscriptions.push(this._route.queryParams.subscribe(queryParams => {
                     this.handleQueryParams(queryParams, params);
                     this.setMetadata();
diff --git a/src/assets/openaire-theme b/src/assets/openaire-theme
index 954a1fe..43ed7e2 160000
--- a/src/assets/openaire-theme
+++ b/src/assets/openaire-theme
@@ -1 +1 @@
-Subproject commit 954a1fe8af0653740882c7db4b9bf92b8f9000f4
+Subproject commit 43ed7e267915bcae7f3ab03fab8c98136810f269