[develop-hydration | WIP | CHANGED] Added checks and logs for server or client state, to utilize non destructive hydration and avoid first page load flickering (affected files so far: http-interceptor.service.ts, resultLanding.component.html, resultLanding.component.ts, numbers.component.ts, search-input.component.ts, environment.ts

http-interceptor.service.ts

@@ -27,6 +27,7 @@ export class HttpInterceptorService implements HttpInterceptor {
     const storedResponse = this.transferState.get<any>(key, null);
     //console.info(key, storedResponse);
     if (storedResponse) {
+      console.log("found "+ request.url);
       const response = new HttpResponse({body: storedResponse, status: 200});
       if (!isPlatformServer(this.platformId)) {
         //console.info("browser remove: ", key);
@@ -35,6 +36,8 @@ export class HttpInterceptorService implements HttpInterceptor {
       return of(response);
     } else {
       if (isPlatformServer(this.platformId)) {
+        console.log("server request "+request.url)
+
         if(request.url.startsWith('/assets') || request.url.startsWith('assets')) {
           return of(null);
         }
@@ -50,6 +53,7 @@ export class HttpInterceptorService implements HttpInterceptor {
           this.transferState.set(key, (<HttpResponse<any>>event).body);
         }));
       } else {
+        console.log("client request not found: "+request.url);
         return next.handle(request);
       }
     }

landingPages/result/resultLanding.component.html

@@ -1,5 +1,5 @@
 <!--        schema.org-->
-<schema2jsonld *ngIf="resultLandingInfo && resultLandingInfo.record"
+<schema2jsonld *ngIf="resultLandingInfo && resultLandingInfo.record && canonicalUrl"
                [data]=resultLandingInfo.record [URL]="canonicalUrl"
                [searchActionRoute]="properties.searchLinkToResults"></schema2jsonld>
 <div *ngIf="resultLandingInfo && !resultLandingInfo.belongsTo && !isBottomIntersecting" [innerHTML]="resultLandingInfo.message"
@@ -44,17 +44,23 @@
           </ng-template>
 
           <div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
-              uk-sticky="end: true;" [attr.offset]="graph_offset">
+               [attr.uk-sticky]="isClient ? 'end: true;' : null" [attr.offset]="graph_offset">
-            <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
+            <ng-container *ngIf="isClient">
+              <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
+            </ng-container>
           </div>
 
           <div class="uk-container uk-container-xlarge">
 
             <div *ngIf="errorMessage.length > 0 || showLoading" class="uk-container uk-flex uk-flex-center uk-height-viewport uk-position-relative">
-              <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
+<!--              <div *ngIf="errorMessage.length > 0 && !showLoading" class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"-->
-                  role="alert">{{errorMessage}}</div>
+<!--                  role="alert">{{errorMessage}} &#45;&#45;&#45;&#45; {{showLoading}} &#45;&#45; {{isClient}} &#45;&#45; {{getDate()}}</div>-->
-              <div *ngIf="showLoading" class="uk-position-center">
+<!--              <div *ngIf="showLoading" class="uk-position-center">-->
-                <loading></loading>
+                <ng-template #errorAlert><div *ngIf="errorMessage.length > 0"  class="uk-alert uk-alert-danger uk-width-2-3 uk-margin-xlarge-top"
+                                              role="alert">{{errorMessage}}</div></ng-template>
+                <div *ngIf="showLoading; else errorAlert" class="uk-position-center">
+<!--                  {{isClient ? "client" : "server"}}-->
+                  <loading></loading>
               </div>
             </div>
             
@@ -62,7 +68,7 @@
               <div class="uk-flex uk-flex-middle uk-flex-center">
                 <div class="landing-action-bar uk-box-shadow-small uk-margin-bottom">
                   <div class="uk-grid uk-grid-small uk-flex-between uk-text-xsmall uk-flex-middle uk-grid-divider" uk-grid>
-                    <div class="uk-width-auto">
+                    <div class="uk-width-auto uk-first-column">
                       <div class="uk-grid uk-grid-small uk-child-width-auto" uk-grid>
                         <availableOn *ngIf="resultLandingInfo?.hostedBy_collectedFrom?.length"
                                      [availableOn]="resultLandingInfo.hostedBy_collectedFrom" [prevPath]="prevPath"></availableOn>
@@ -131,7 +137,7 @@
                   </div>
                 </div>
 
-                <div id="main-tabs-div" class="uk-sticky uk-blur-background" uk-sticky="end: true; media: @m" [attr.offset]="offset">
+                <div id="main-tabs-div" class="uk-sticky uk-blur-background" [attr.uk-sticky]="isClient ? 'end: true; media: @m' : null" [attr.offset]="offset">
                   <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
                     <landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"
                                     [properties]="properties" [title]="resultLandingInfo.title"
@@ -204,7 +210,7 @@
                     </div>
                   </ng-container>
                 </div>
-                <div class="uk-text-xsmall uk-hidden@m"><ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
+                <div class="uk-text-xsmall uk-hidden@m">oooo<ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container></div>
                 <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
                         [texts]="pageContents['bottom']"></helper>
               </ng-container>
@@ -218,7 +224,7 @@
         <ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
           <div id="landing-right-sidebar" *ngIf="!rightSidebarOffcanvasClicked" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m"
             [class.uk-animation-right]="viewAll">
-            <div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
+            <div class="uk-sticky" [attr.uk-sticky]="isClient ? 'end: true' : null" [attr.offset]="offset">
               <div class="uk-overflow-auto uk-height-1-1">
                 <ng-container *ngTemplateOutlet="right_column"></ng-container>
               </div>
@@ -305,7 +311,7 @@
              class="uk-margin-medium-top uk-padding uk-padding-remove-vertical">
           <div class="landing-oaroutes-card uk-text-small uk-flex uk-padding-small">
             <div>
-              <div class="uk-flex uk-flex-top" uk-grid>
+              <div class="uk-flex uk-flex-top uk-grid" uk-grid>
                 <div *ngIf="resultLandingInfo.oaRoutes.green" class="uk-flex-nowrap uk-flex uk-flex-middle uk-margin-xsmall-bottom uk-margin-remove-top">
                   <div class="dot green"></div>
                   <div class="uk-text-capitalize">Green</div>
@@ -416,7 +422,7 @@
           </div>
           <div class="uk-width-expand uk-flex">
             <div>
-              <div class="uk-flex uk-flex-top" uk-grid>
+              <div class="uk-flex uk-flex-top uk-grid" uk-grid>
                 <div *ngIf="resultLandingInfo.oaRoutes.green" class="uk-flex-nowrap uk-flex uk-flex-middle uk-margin-xsmall-bottom uk-margin-remove-top">
                   <div class="dot green"></div>
                   <div class="uk-text-capitalize">Green</div>
@@ -996,7 +1002,7 @@
 <ng-template #metricsContent>
   <div id="metrics" class="landing-section">
     <ul class="uk-subnav uk-subnav-pill-alt uk-margin-remove" uk-switcher>
-      <li class="uk-padding-remove">
+      <li class="uk-padding-remove uk-active">
         <a href="#">Overview</a>
       </li>
       <li *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
@@ -1011,10 +1017,10 @@
     </ul>
     <ul class="uk-switcher uk-margin-large-top">
       <!-- overview -->
-      <li>
+      <li class="uk-active">
         <div class="uk-flex uk-flex-wrap landing-metrics-overview">
           <div *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.bip.length">
-            <div class="uk-grid-divider" uk-grid>
+            <div class="uk-grid uk-grid-divider" uk-grid>
               <div>
                 <div class="uk-text-center uk-margin-small-bottom">
                   <a href='https://bip.imsi.athenarc.gr/' target='_blank'>
@@ -1053,7 +1059,7 @@
             <altmetrics id="{{resultLandingInfo.identifiers?.get('doi')[0]}}" type="doi" size="donut"></altmetrics>
           </div>
           <div *ngIf="resultLandingInfo.measure && resultLandingInfo.measure.counts.length">
-            <div class="uk-grid-divider" uk-grid>
+            <div class="uk-grid uk-grid-divider" uk-grid>
               <div>
                 <div class="uk-text-center uk-margin-small-bottom">
                   <a href='https://usagecounts.openaire.eu/' target='_blank'>
@@ -1188,10 +1194,13 @@
 </ng-template>
 
 <ng-template #dropInfo let-option=option let-isCompact=isCompact>
+  <ng-container *ngIf="isClient">
+<!--  <div *ngIf="isClient" class="default-dropdown uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">-->
   <div class="default-dropdown uk-dropdown" uk-dropdown="pos: bottom-left; mode:click; container: #modal-container;">
     <div class="uk-padding-small uk-width-medium uk-text-small" [innerHTML]="getMetricsTooltip(option, isCompact) | safeHtml">
     </div>
   </div>
+  </ng-container>
 </ng-template>
 
 <ng-container *ngIf="isMobile">

landingPages/result/resultLanding.component.ts

@@ -1,6 +1,10 @@
-import {ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import {
+  ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, ViewChild,
+  Inject, PLATFORM_ID, makeStateKey, TransferState, StateKey
+} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
+import {isPlatformServer} from '@angular/common';
 
 import {EnvProperties} from '../../utils/properties/env-properties';
 import {Id, ResultLandingInfo} from '../../utils/entities/resultLandingInfo';
@@ -54,6 +58,9 @@ export class ResultLandingComponent {
   @ViewChild('AlertModalDeletedByInferenceFS') alertModalDeletedByInferenceFS;
   // @ViewChild('relationModal') relationModal;
   public deleteByInferenceOpened: boolean = false;
+  // private stateKey: StateKey<{"resultLandingInfo": any, "contexts": any}>;
+  private stateKey: StateKey<boolean>;
+  public resultFromState: boolean = false;
   @Input() public resultFromInput: boolean = false;
   @Input() public resultLandingInfo: ResultLandingInfo;
   public belongsInEOSC: boolean = false;
@@ -162,7 +169,7 @@ export class ResultLandingComponent {
 	public provenanceActionVocabulary = null;
 	public relationsVocabulary = null;
 
-  public offset: number;
+  public offset: number = 0;
   public stickyHeader: boolean = false;
   public graph_offset: number = 0;
   public graph_height: number = 0;
@@ -199,6 +206,9 @@ export class ResultLandingComponent {
 
   public rightSidebarOffcanvasClicked: boolean = false;
   public egiTransferModalOpen = false;
+
+  public isClient: boolean = false;
+
   constructor(private _resultLandingService: ResultLandingService,
               private _vocabulariesService: ISVocabulariesService,
               private _piwikService: PiwikService,
@@ -215,7 +225,12 @@ export class ResultLandingComponent {
               private indexInfoService: IndexInfoService,
               private userManagementService: UserManagementService,
               private layoutService: LayoutService,
-              private _contextService: ContextsService) {
+              private _contextService: ContextsService,
+              @Inject(PLATFORM_ID) private platform: any,
+              private transferState: TransferState) {
+    this.isClient = !isPlatformServer(this.platform);
+    console.log(this.id, this.isClient);
+
     if(route.snapshot.data && route.snapshot.data['type']) {
       this.type = route.snapshot.data['type'];
     }
@@ -271,6 +286,7 @@ export class ResultLandingComponent {
         }
         this.initMetaAndLinks(this.type);
       }
+
       if(data["egiTransfer"] && data["egiTransfer"] == 't'){
         this.mobileContent = 'actions';
         this.egiTransferModalOpen = true;
@@ -284,6 +300,11 @@ export class ResultLandingComponent {
       }
 
       this.metricsClicked = false;
+      // if(this.resultFromState) {
+      //   this.showLoading = false;
+      //   return;
+      // }
+      console.log("execution...");
       if(this.resultFromInput){
         this.id = this.resultLandingInfo.objIdentifier;
         this.type="publication";
@@ -309,6 +330,7 @@ export class ResultLandingComponent {
 
   ngAfterViewInit() {
     if (typeof document !== 'undefined') {
+      console.log("afterviewinit");
       // if(properties.adminToolsPortalType !== 'eosc') {
       if(document.getElementById("main-menu")) {
         this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
@@ -323,6 +345,7 @@ export class ResultLandingComponent {
 
   ngAfterContentChecked() {
     if(this.graph_and_feedback && typeof document !== 'undefined') {
+      console.log("aftercontentchecked", this.errorMessage, this.showLoading);
       this.graph_offset = this.calcGraphOffset(this.graph_and_feedback.nativeElement);
     }
   }
@@ -437,11 +460,18 @@ export class ResultLandingComponent {
     return array.filter(value => value.toLowerCase() !== type);
   }
 
+  public getDate() {
+    return new Date();
+  }
+
   private getVocabulariesAndResultLandingInfo() {
     this.errorMessage = '';
     this.showLoading = true;
+    this.cdr.markForCheck();
+    this.cdr.detectChanges();
+    console.log("452: ", this.errorMessage, this.showLoading, new Date());
 
-    if (typeof document !== 'undefined') {
+    // if (typeof document !== 'undefined') {
 			this.subscriptions.push(this._vocabulariesService.getProvenanceActionVocabulary(this.properties).subscribe(
 				data => {
 					this.provenanceActionVocabulary = data;
@@ -464,10 +494,10 @@ export class ResultLandingComponent {
 					this.handleError("Error getting relations vocabulary for " + this.type, error);
 				}
 			));
-    } 
+    // }
-		else {
+		// else {
-			this.getResultLandingInfo(null);
+		// 	this.getResultLandingInfo(null);
-		}
+		// }
   }
 
   private setActiveTab() {
@@ -517,7 +547,41 @@ export class ResultLandingComponent {
       this.showLoading = false;
       return;
     }
-    this.resultLandingInfo = null;
+
+
+    if(this.id || this.identifier) {
+      this.stateKey = makeStateKey<boolean>(this.id ? this.id : this.identifier.id);
+      if(this.isClient) {
+        this.resultFromState = this.transferState.get(this.stateKey, null);
+      }
+    }
+
+    // if(this.id || this.identifier) {
+    //   this.stateKey = makeStateKey<{"resultLandingInfo": any, "contexts": any}>(this.id ? this.id : this.identifier.id);
+    //   if(this.isClient) {
+    //     const storedResponse = this.transferState.get<{"resultLandingInfo": any, "contexts": any}>(this.stateKey, null);
+    //     if (storedResponse) {
+    //       console.log("storedResponse: ", storedResponse);
+    //       this.showLoading = false;
+    //       this.resultFromState = true;
+    //       console.log(storedResponse.resultLandingInfo.identifiers);
+    //       this.resultLandingInfo = this.deepCopyWithMap(storedResponse.resultLandingInfo);
+    //       console.log(this.transferState.get(this.stateKey, null).resultLandingInfo.identifiers);
+    //       console.log(this.resultLandingInfo.identifiers);
+    //       // console.log(this.resultLandingInfo);
+    //       this.afterResultLandingInfo(storedResponse.contexts);
+    //       // this.id = this.resultLandingInfo.objIdentifier;
+    //       this.transferState.remove(this.stateKey);
+    //
+    //       console.log(this.transferState.get(makeStateKey<any>("test1"), null));
+    //       console.log(this.deepCopyWithMap(this.transferState.get(makeStateKey<any>("test1"), null)));
+    //       this.transferState.remove(makeStateKey("test1"));
+    //       return;
+    //     }
+    //   }
+    // }
+
+    // this.resultLandingInfo = null;
     this.hasAltMetrics = false;
     this.subscriptions.push(this._resultLandingService.getResultLandingInfo(this.id, this.identifier, this.type, subjectsVocabulary, this.properties).subscribe(
       async data => {
@@ -525,132 +589,165 @@ export class ResultLandingComponent {
         data.contexts = [];
 
         this.resultLandingInfo = data;
-        this.id = this.resultLandingInfo.objIdentifier;
+        if(!this.isClient) {
+          this.transferState.set(this.stateKey, true);
+        }
+        // if(!this.isClient) {
+        //   console.log("set transferState resultLandingInfo: ", this.resultLandingInfo.identifiers);
+        //   this.transferState.set(this.stateKey, {"resultLandingInfo": this.deepCopyWithMap(this.resultLandingInfo), "contexts": contexts});
+        //   console.log(this.transferState.get(this.stateKey, null).resultLandingInfo.identifiers);
+        //   let tmp = this.deepCopyWithMap(this.resultLandingInfo);
+        //   console.log(tmp.identifiers);
+        //
+        //   let test1 = new Map<string, string>();
+        //   test1.set("1", "1");
+        //   test1.set("2", "2");
+        //   this.transferState.set(makeStateKey<any>("test1"), this.deepCopyWithMap(test1));
+        //   console.log(this.transferState.get(makeStateKey<any>("test1"), null));
+        // }
+
         let typeId = this.identifier?.id?'pid':'id';
-        let id = this.identifier?.id?this.identifier.id:this.id;
+        let id = this.identifier?.id?this.identifier.id:this.resultLandingInfo.objIdentifier;
+        // console.log("resultLandingInfo: ",this.resultLandingInfo);
         this.resultLandingInfo.setBelongsTo(typeId, id);
-        //old
+        this.afterResultLandingInfo(contexts);
-        // this.viewsFrameUrl = this.properties.framesAPIURL + 'merge.php?com=query&data=[{"query":"resRepoViews", "resTitle":"' + this.id + '", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":200,"sort":"xaxis","xStyle":{"r":-30,"s":"6","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly views"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
-        // this.downloadsFrameUrl = this.properties.framesAPIURL + 'merge.php?com=query&data=[{"query":"resRepoDownloads", "resTitle":"' + this.id + '", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":200,"sort":"xaxis","xStyle":{"r":-30,"s":"6","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
-        //new
-        this.viewsFrameUrl = this.properties.statisticsFrameNewAPIURL + 'chart?json=' + encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly views","type":"column","query":{"name":"usagestats.results.views.monthly", "parameters":["' + this.id + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Monthly views"},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":""}}}');
-        this.downloadsFrameUrl = this.properties.statisticsFrameNewAPIURL + 'chart?json=' +
-          encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly downloads","type":"column","query":{"name":"usagestats.results.downloads.monthly", "parameters":["' + this.id + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Monthly downloads"},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":""}}}');
-        this.bipFrameUrl = this.properties.bipFrameAPIURL + this.id + (properties.environment == "beta" ? "&src=beta" : "");
-        let pid: Identifier = Identifier.getPIDFromIdentifiers(this.resultLandingInfo.identifiers);
-        if (this.type == "result") { // no type was specified - update URL based this.resultLandingInfo.resultType
-          this.updateUrlWithType(pid);
-        }
-        this.canonicalUrl = this.properties.domain + properties.baseLink + (pid ? (this.linkToLandingPage.split("?")[0] + "?pid=" + encodeURIComponent(pid.id)) :
-          (this.linkToLandingPage + this.resultLandingInfo.relcanId));
-        this.seoService.createLinkForCanonicalURL(this.canonicalUrl);
-        this.updateUrl(this.canonicalUrl);
-        this.addNoIndexFilter();
-        if (this.resultLandingInfo.title) {
-          this.updateTitle(this.resultLandingInfo.title);
-          this.updateDescription((this.resultLandingInfo.description ? (this.resultLandingInfo.description.substr(0, 157) + (this.resultLandingInfo.description.substr(0, 157).length == 157 ? "..." : "")) : (this.resultLandingInfo.title)));
-        }
-        this.subscriptions.push(this._piwikService.trackViewForCustomUrl(this.properties, this.resultLandingInfo.title, this.linkToLandingPage.split("?")[1] + this.id).subscribe());
-        let bioentitiesNum = 0;
-        if (this.resultLandingInfo.bioentities != undefined) {
-          this.resultLandingInfo.bioentities.forEach(function (value, key, map) {
-            bioentitiesNum += value.size;
-          });
-        }
-        this.bioentitiesNum = bioentitiesNum;
-        if (typeof document !== 'undefined') {
-          if (this.resultLandingInfo.identifiers) {
-            let pidsArray: string[] = [];
-            for (let key of Array.from(this.resultLandingInfo.identifiers.keys())) {
-              pidsArray = pidsArray.concat(this.resultLandingInfo.identifiers.get(key));
-              this.pidsArrayString = pidsArray.join();
-            }
-            if (this.resultLandingInfo.identifiers.has('doi')) {
-              this.doi = this.resultLandingInfo.identifiers.get('doi')[0];
-              this.subscriptions.push(this.metricsService.hasAltMetrics(this.properties.altMetricsAPIURL, this.doi).subscribe(hasAltMetrics => {
-                this.hasAltMetrics = hasAltMetrics;
-              }, error => {
-                this.hasAltMetrics = false;
-              }));
-            }
-          }
-        }
-        this.relatedResults.classFilters = [{"label": "All relations", "value": ""}];
-        if (this.resultLandingInfo.relatedClassFilters.size > 1) {
-          for (let relClass of this.resultLandingInfo.relatedClassFilters) {
-            this.relatedResults.classFilters.push({
-              "label": HelperFunctions.getVocabularyLabel(relClass, this.relationsVocabulary),
-              "value": relClass
-            });
-          }
-        } else {
-          this.relatedResults.classFilters.pop();
-        }
-        this.relatedResults.selectedClass = "";
-        this.filteredRelatedResults = this.resultLandingInfo.relatedResults;
-
-        this.relatedServices.classFilters = [{"label": "All relations", "value": ""}];
-        if (this.resultLandingInfo.relatedServicesClassFilters.size > 1) {
-          for (let relClass of this.resultLandingInfo.relatedServicesClassFilters) {
-            this.relatedServices.classFilters.push({
-              "label": HelperFunctions.getVocabularyLabel(relClass, this.relationsVocabulary),
-              "value": relClass
-            });
-          }
-        } else {
-          this.relatedServices.classFilters.pop();
-        }
-        this.relatedServices.selectedClass = "";
-        this.filteredRelatedServices = this.resultLandingInfo.relatedServices
-
-        this.hasViews = false;
-        this.hasDownloads = false;
-        if (this.resultLandingInfo.measure && this.resultLandingInfo.measure.counts) {
-          this.resultLandingInfo.measure.counts.forEach(measure => {
-            if (measure.name == "views" && measure.value > 0) {
-              this.hasViews = true;
-            }
-            if (measure.name == "downloads" && measure.value > 0) {
-              this.hasDownloads = true;
-            }
-          })
-        }
-
-        this.showLoading = false;
-        this.setActiveTab();
-
-        this.cdr.detectChanges();
-        if (contexts) {
-          if (this.communityId && this.communityId == "enermaps" && properties.enermapsURL) {
-            this.enermapsId = ParsingFunctions.getEnermapsConceptId(contexts);
-          }
-          await this.promise;
-          if(this.publicCommunities && this.publicCommunities.length > 0) {
-            this.resultLandingInfo.contexts = contexts.filter(context => {
-              if(context.idContext == "eosc") {
-                this.belongsInEOSC = true;
-              }
-              return this.publicCommunities.includes(context.idContext)
-            });
-            this.cdr.detectChanges();
-          }
-        }
       },
       err => {
         this.handleError("Error getting " + this.type + " for " + (this.id ? ("id: " + this.id) : ("pid: " + this.identifier.id)), err);
+        this.showLoading = false;
+        console.log("658: ", this.errorMessage, this.showLoading, new Date());
+
         if (err.status == 404) {
           this._router.navigate([this.properties.errorLink], {queryParams: {"page": this._location.path(true), "page_type": this.type}});
         }else if(err.name == "TimeoutError"){
           this.errorMessage = 'An error occurred please try again later';
+          console.log("655: ", this.errorMessage, this.showLoading, new Date());
         }else{
           this.errorMessage = "No " + this.getTypeName() + " found";
+          console.log("658: ", this.errorMessage, this.showLoading, new Date());
           this.seoService.createLinkForCanonicalURL(this.properties.domain+ properties.baseLink  + this.linkToSearchPage);
         }
-        this.showLoading = false;
+        // this.showLoading = false;
+        // this.cdr.detectChanges();
+        // console.log("662: ", this.errorMessage, this.showLoading, new Date());
       }
     ));
   }
 
+  private async afterResultLandingInfo(contexts) {
+    console.log("afterResultLandingInfo");
+    this.id = this.resultLandingInfo.objIdentifier;
+
+    //old
+    // this.viewsFrameUrl = this.properties.framesAPIURL + 'merge.php?com=query&data=[{"query":"resRepoViews", "resTitle":"' + this.id + '", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":200,"sort":"xaxis","xStyle":{"r":-30,"s":"6","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly views"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
+    // this.downloadsFrameUrl = this.properties.framesAPIURL + 'merge.php?com=query&data=[{"query":"resRepoDownloads", "resTitle":"' + this.id + '", "table":"","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":" ","color":"","type":"chart","size":200,"sort":"xaxis","xStyle":{"r":-30,"s":"6","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":["Monthly downloads"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"","values":[""],"to":"-1"}]}]&info_types=["column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true&persistent=false';
+    //new
+    this.viewsFrameUrl = this.properties.statisticsFrameNewAPIURL + 'chart?json=' + encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly views","type":"column","query":{"name":"usagestats.results.views.monthly", "parameters":["' + this.id + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Monthly views"},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":""}}}');
+    this.downloadsFrameUrl = this.properties.statisticsFrameNewAPIURL + 'chart?json=' +
+      encodeURIComponent('{"library":"HighCharts","chartDescription":{"queries":[{"name":"Monthly downloads","type":"column","query":{"name":"usagestats.results.downloads.monthly", "parameters":["' + this.id + '"], "profile":"OpenAIRE All-inclusive" }}],"chart":{"backgroundColor":"#FFFFFFFF","borderColor":"#335cadff","borderRadius":0,"borderWidth":0,"plotBorderColor":"#ccccccff","plotBorderWidth":0},"title":{"text":"Monthly downloads"},"subtitle":{},"yAxis":{"title":{"text":""}},"xAxis":{"title":{}},"lang":{"noData":"No Data available for the Query"},"exporting":{"enabled":false},"plotOptions":{"series":{"dataLabels":{"enabled":false}}},"legend":{"enabled":false},"credits":{"href":null,"enabled":true,"text":""}}}');
+    this.bipFrameUrl = this.properties.bipFrameAPIURL + this.id + (properties.environment == "beta" ? "&src=beta" : "");
+    console.log("bipFrameUrl: ", this.bipFrameUrl);
+    let pid: Identifier = Identifier.getPIDFromIdentifiers(this.resultLandingInfo.identifiers);
+    if (this.type == "result") { // no type was specified - update URL based this.resultLandingInfo.resultType
+      this.updateUrlWithType(pid);
+    }
+    this.canonicalUrl = this.properties.domain + properties.baseLink + (pid ? (this.linkToLandingPage.split("?")[0] + "?pid=" + encodeURIComponent(pid.id)) :
+      (this.linkToLandingPage + this.resultLandingInfo.relcanId));
+    console.log("canonical: ",this.canonicalUrl);
+    this.seoService.createLinkForCanonicalURL(this.canonicalUrl);
+    this.updateUrl(this.canonicalUrl);
+    this.addNoIndexFilter();
+    if (this.resultLandingInfo.title) {
+      this.updateTitle(this.resultLandingInfo.title);
+      this.updateDescription((this.resultLandingInfo.description ? (this.resultLandingInfo.description.substr(0, 157) + (this.resultLandingInfo.description.substr(0, 157).length == 157 ? "..." : "")) : (this.resultLandingInfo.title)));
+    }
+    this.subscriptions.push(this._piwikService.trackViewForCustomUrl(this.properties, this.resultLandingInfo.title, this.linkToLandingPage.split("?")[1] + this.id).subscribe());
+    let bioentitiesNum = 0;
+    if (this.resultLandingInfo.bioentities != undefined) {
+      this.resultLandingInfo.bioentities.forEach(function (value, key, map) {
+        bioentitiesNum += value.size;
+      });
+    }
+    this.bioentitiesNum = bioentitiesNum;
+    if (typeof document !== 'undefined') {
+      if (this.resultLandingInfo.identifiers) {
+        let pidsArray: string[] = [];
+        for (let key of Array.from(this.resultLandingInfo.identifiers.keys())) {
+          pidsArray = pidsArray.concat(this.resultLandingInfo.identifiers.get(key));
+          this.pidsArrayString = pidsArray.join();
+        }
+        if (this.resultLandingInfo.identifiers.has('doi')) {
+          this.doi = this.resultLandingInfo.identifiers.get('doi')[0];
+          this.subscriptions.push(this.metricsService.hasAltMetrics(this.properties.altMetricsAPIURL, this.doi).subscribe(hasAltMetrics => {
+            this.hasAltMetrics = hasAltMetrics;
+          }, error => {
+            this.hasAltMetrics = false;
+          }));
+        }
+      }
+    }
+    this.relatedResults.classFilters = [{"label": "All relations", "value": ""}];
+    if (this.resultLandingInfo.relatedClassFilters.size > 1) {
+      for (let relClass of this.resultLandingInfo.relatedClassFilters) {
+        this.relatedResults.classFilters.push({
+          "label": HelperFunctions.getVocabularyLabel(relClass, this.relationsVocabulary),
+          "value": relClass
+        });
+      }
+    } else {
+      this.relatedResults.classFilters.pop();
+    }
+    this.relatedResults.selectedClass = "";
+    this.filteredRelatedResults = this.resultLandingInfo.relatedResults;
+
+    this.relatedServices.classFilters = [{"label": "All relations", "value": ""}];
+    if (this.resultLandingInfo.relatedServicesClassFilters.size > 1) {
+      for (let relClass of this.resultLandingInfo.relatedServicesClassFilters) {
+        this.relatedServices.classFilters.push({
+          "label": HelperFunctions.getVocabularyLabel(relClass, this.relationsVocabulary),
+          "value": relClass
+        });
+      }
+    } else {
+      this.relatedServices.classFilters.pop();
+    }
+    this.relatedServices.selectedClass = "";
+    this.filteredRelatedServices = this.resultLandingInfo.relatedServices
+
+    this.hasViews = false;
+    this.hasDownloads = false;
+    if (this.resultLandingInfo.measure && this.resultLandingInfo.measure.counts) {
+      this.resultLandingInfo.measure.counts.forEach(measure => {
+        if (measure.name == "views" && measure.value > 0) {
+          this.hasViews = true;
+        }
+        if (measure.name == "downloads" && measure.value > 0) {
+          this.hasDownloads = true;
+        }
+      })
+    }
+
+    this.showLoading = false;
+    this.setActiveTab();
+
+    this.cdr.detectChanges();
+    if (contexts) {
+      if (this.communityId && this.communityId == "enermaps" && properties.enermapsURL) {
+        this.enermapsId = ParsingFunctions.getEnermapsConceptId(contexts);
+      }
+      await this.promise;
+      if(this.publicCommunities && this.publicCommunities.length > 0) {
+        this.resultLandingInfo.contexts = contexts.filter(context => {
+          if(context.idContext == "eosc") {
+            this.belongsInEOSC = true;
+          }
+          return this.publicCommunities.includes(context.idContext)
+        });
+        this.cdr.detectChanges();
+      }
+    }
+  }
+
   public getPublicCommunities() {
     this.promise = new Promise<void>(resolve => {
       this._contextService.getPublicCommunitiesByState().subscribe(
@@ -1252,4 +1349,25 @@ export class ResultLandingComponent {
       return "https://"+(this.properties.environment == "beta" ? "beta." : "")+"search.marketplace.eosc-portal.eu/";
     }
   }
+
+  // public get isClient() {
+  //   return (typeof document !== undefined);
+  // }
+
+  private deepCopyWithMap(obj: any): any {
+    return JSON.parse(JSON.stringify(obj, (key, value) => {
+      if (value instanceof Map) {
+        return {
+          __isMap: true,
+          value: Array.from(value.entries())
+        };
+      }
+      return value;
+    }), (key, value) => {
+      if (value && value.__isMap) {
+        return new Map(value.value);
+      }
+      return value;
+    });
+  }
 }

sharedComponents/numbers/numbers.component.ts

@@ -1,4 +1,14 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Inject,
+  Input, makeStateKey,
+  OnDestroy,
+  OnInit,
+  Output,
+  PLATFORM_ID,
+  TransferState
+} from '@angular/core';
 import {SearchResearchResultsService} from '../../services/searchResearchResults.service';
 import {SearchDataprovidersService} from '../../services/searchDataproviders.service';
 import {RefineFieldResultsService} from '../../services/refineFieldResults.service';
@@ -10,6 +20,7 @@ import {RouterHelper} from "../../utils/routerHelper.class";
 import {OpenaireEntities} from "../../utils/properties/searchFields";
 import {SearchOrganizationsService} from '../../services/searchOrganizations.service';
 import {GroupedRequestsService} from "../../services/groupedRequests.service";
+import {isPlatformServer} from "@angular/common";
 
 export interface Numbers {
   publicationsSize?: NumberSize;
@@ -28,6 +39,7 @@ export interface Numbers {
 @Component({
   selector: 'numbers',
   template: `
+    {{isClient? "Client" : "Server"}}
 		<div *ngIf="showContentWithNumbers" class="uk-margin-top" style="max-width: 600px;" uk-scrollspy-class>
 			<div>
 				A comprehensive and open dataset of research information covering 
@@ -72,11 +84,16 @@ export class NumbersComponent implements OnInit, OnDestroy {
   private emptySubject: BehaviorSubject<number> = new BehaviorSubject<number>(0);
   private subs: any[] = [];
 
+  public isClient: boolean = false;
+
   constructor(private searchResearchResultsService: SearchResearchResultsService,
               private searchDataprovidersService: SearchDataprovidersService,
               private refineFieldResultsService: RefineFieldResultsService,
 							private _searchOrganizationsService: SearchOrganizationsService,
-              private groupedRequestsService: GroupedRequestsService) {
+              private groupedRequestsService: GroupedRequestsService,
+              @Inject(PLATFORM_ID) private platform: any,
+              private transferState: TransferState) {
+    this.isClient = !isPlatformServer(this.platform);
     this.emptySubject = new BehaviorSubject<number>(0);
   }
   
@@ -88,116 +105,134 @@ export class NumbersComponent implements OnInit, OnDestroy {
   
   init(getDatasetsLinked = false, getSoftwareLinked = false, getPublications = true, getDatasets = true,
       getSoftware = true, getOther = true, getProjects = true, getDataProviders = true, getOrganizations = true, refineValue: string = null) {
-    if (refineValue) {
+    let stateKey = makeStateKey<Numbers>("numbers");
-      this.refineValue = refineValue;
+    console.log("isClient: "+this.isClient + " - numbers in transferstate: "+this.transferState.hasKey(stateKey));
-    }
+    if(this.isClient && this.transferState.hasKey(stateKey)) {
-    let refineParams = (this.refineValue) ? ('&fq=' + this.refineValue) : null;
+      this.numbers = this.transferState.get(stateKey, null);
+      console.log("numbers ready");
+      this.results.emit(this.numbers);
+      return;
+    } else {
+      if (refineValue) {
+        this.refineValue = refineValue;
+      }
+      let refineParams = (this.refineValue) ? ('&fq=' + this.refineValue) : null;
 
-    if (refineParams) {
+      if (refineParams) {
-      let mergedFundersSet = new Set<string>();
+        let mergedFundersSet = new Set<string>();
-      this.subs.push(zip(
+        this.subs.push(zip(
-        (getPublications) ? this.searchResearchResultsService.numOfSearchResults('publication', '', this.properties, refineParams) : this.empty,
+          (getPublications) ? this.searchResearchResultsService.numOfSearchResults('publication', '', this.properties, refineParams) : this.empty,
-        (getDatasets) ? this.searchResearchResultsService.numOfSearchResults('dataset', '', this.properties, refineParams) : this.empty,
+          (getDatasets) ? this.searchResearchResultsService.numOfSearchResults('dataset', '', this.properties, refineParams) : this.empty,
-        (getDatasetsLinked) ? this.searchResearchResultsService.numOfSearchResultsLinkedToPub("dataset", this.properties) : this.empty,
+          (getDatasetsLinked) ? this.searchResearchResultsService.numOfSearchResultsLinkedToPub("dataset", this.properties) : this.empty,
-        (getSoftware) ? this.searchResearchResultsService.numOfSearchResults('software', '', this.properties, refineParams) : this.empty,
+          (getSoftware) ? this.searchResearchResultsService.numOfSearchResults('software', '', this.properties, refineParams) : this.empty,
-        (getSoftwareLinked) ? this.searchResearchResultsService.numOfSearchResultsLinkedToPub("software", this.properties) : this.empty,
+          (getSoftwareLinked) ? this.searchResearchResultsService.numOfSearchResultsLinkedToPub("software", this.properties) : this.empty,
-        (getOther) ? this.searchResearchResultsService.numOfSearchResults('other', '', this.properties, refineParams) : this.empty,
+          (getOther) ? this.searchResearchResultsService.numOfSearchResults('other', '', this.properties, refineParams) : this.empty,
-        (getProjects) ? this.refineFieldResultsService.getAllRefineFieldResultsByFieldName('funder', 'project', this.properties, refineParams) : this.empty,
+          (getProjects) ? this.refineFieldResultsService.getAllRefineFieldResultsByFieldName('funder', 'project', this.properties, refineParams) : this.empty,
-        (getDataProviders) ? this.searchDataprovidersService.numOfSearchDataproviders('', this.properties, refineParams) : this.empty,
+          (getDataProviders) ? this.searchDataprovidersService.numOfSearchDataproviders('', this.properties, refineParams) : this.empty,
-        (getOrganizations) ? this._searchOrganizationsService.numOfSearchOrganizations2('', this.properties, refineParams) : this.empty,
+          (getOrganizations) ? this._searchOrganizationsService.numOfSearchOrganizations2('', this.properties, refineParams) : this.empty,
-        (getPublications && getDatasets && getSoftware && getOther) ? this.refineFieldResultsService.getAllRefineFieldResultsByFieldName('relfunder', 'result', this.properties, refineParams) : this.empty,
+          (getPublications && getDatasets && getSoftware && getOther) ? this.refineFieldResultsService.getAllRefineFieldResultsByFieldName('relfunder', 'result', this.properties, refineParams) : this.empty,
-      ).subscribe((data: any[]) => {
+        ).subscribe((data: any[]) => {
-          if (data[0] && data[0] > 0) {
+            if (data[0] && data[0] > 0) {
-            this.numbers.publicationsSize = NumberUtils.roundNumber(data[0]);
+              this.numbers.publicationsSize = NumberUtils.roundNumber(data[0]);
-          }
+            }
-          if (data[1] && data[1] > 0) {
+            if (data[1] && data[1] > 0) {
-            this.numbers.datasetsSize = NumberUtils.roundNumber(data[1]);
+              this.numbers.datasetsSize = NumberUtils.roundNumber(data[1]);
-          }
+            }
-          if (data[2] && data[2] > 0) {
+            if (data[2] && data[2] > 0) {
-            this.numbers.datasetsLinkedSize = NumberUtils.roundNumber(data[2]);
+              this.numbers.datasetsLinkedSize = NumberUtils.roundNumber(data[2]);
-          }
+            }
-          if (data[3] && data[3] > 0) {
+            if (data[3] && data[3] > 0) {
-            this.numbers.softwareSize = NumberUtils.roundNumber(data[3]);
+              this.numbers.softwareSize = NumberUtils.roundNumber(data[3]);
-          }
+            }
-          if (data[4] && data[4] > 0) {
+            if (data[4] && data[4] > 0) {
-            this.numbers.softwareLinkedSize = NumberUtils.roundNumber(data[4]);
+              this.numbers.softwareLinkedSize = NumberUtils.roundNumber(data[4]);
-          }
+            }
-          if (data[5] && data[5] > 0) {
+            if (data[5] && data[5] > 0) {
-            this.numbers.otherSize = NumberUtils.roundNumber(data[5]);
+              this.numbers.otherSize = NumberUtils.roundNumber(data[5]);
-          }
+            }
-          if (data[6][0] && data[6][0] > 0) {
+            if (data[6][0] && data[6][0] > 0) {
-            this.numbers.projectsSize = NumberUtils.roundNumber(data[6][0]);
+              this.numbers.projectsSize = NumberUtils.roundNumber(data[6][0]);
-          }
+            }
-          if (data[6][1] && data[6][1].length > 0 && data[6][1][0].filterId == 'funder' && data[6][1][0].values) {
+            if (data[6][1] && data[6][1].length > 0 && data[6][1][0].filterId == 'funder' && data[6][1][0].values) {
-            this.numbers.fundersSize = NumberUtils.roundNumber(data[6][1][0].values.length);
+              this.numbers.fundersSize = NumberUtils.roundNumber(data[6][1][0].values.length);
 
-            let queriedFunders = data[6][1][0].values;
+              let queriedFunders = data[6][1][0].values;
-            queriedFunders.forEach(queriedFunder => {
+              queriedFunders.forEach(queriedFunder => {
-              if (+queriedFunder.number > 1) {
+                if (+queriedFunder.number > 1) {
+                  if (!mergedFundersSet.has(queriedFunder.id)) {
+                    mergedFundersSet.add(queriedFunder.id);
+                  }
+                }
+              });
+            }
+            if (data[7] && data[7] > 0) {
+              this.numbers.datasourcesSize = NumberUtils.roundNumber(data[7]);
+            }
+            if (data[8] && data[8] > 0) {
+              this.numbers.organizationsSize = NumberUtils.roundNumber(data[8]);
+            }
+            if (data[9][1] && data[9][1].length > 0 && data[9][1][0].filterId == 'relfunder' && data[9][1][0].values) {
+              let queriedFunders = data[9][1][0].values;
+              queriedFunders.forEach(queriedFunder => {
                 if (!mergedFundersSet.has(queriedFunder.id)) {
                   mergedFundersSet.add(queriedFunder.id);
                 }
-              }
+              });
-            });
+            }
-          }
-          if (data[7] && data[7] > 0) {
-            this.numbers.datasourcesSize = NumberUtils.roundNumber(data[7]);
-          }
-          if (data[8] && data[8] > 0) {
-            this.numbers.organizationsSize = NumberUtils.roundNumber(data[8]);
-          }
-          if (data[9][1] && data[9][1].length > 0 && data[9][1][0].filterId == 'relfunder' && data[9][1][0].values) {
-            let queriedFunders = data[9][1][0].values;
-            queriedFunders.forEach(queriedFunder => {
-              if (!mergedFundersSet.has(queriedFunder.id)) {
-                mergedFundersSet.add(queriedFunder.id);
-              }
-            });
-          }
 
-          this.numbers.mergedFundersSize = NumberUtils.roundNumber(mergedFundersSet.size);
+            this.numbers.mergedFundersSize = NumberUtils.roundNumber(mergedFundersSet.size);
-        }
+            if (!this.isClient) {
-      ), err => {
+              this.transferState.set(stateKey, this.numbers);
-        this.handleError('Error getting numbers', err);
+              console.log("set numbers in transferState");
-      });
+            }
-    } else {
+            console.log("numbers returned");
-      this.subs.push(this.groupedRequestsService.home().subscribe((data: any[]) => {
-        if (data) {
-          if (data.hasOwnProperty("publications") && data['publications'] > 0) {
-            this.numbers.publicationsSize = NumberUtils.roundNumber(data['publications']);
           }
-          if (data.hasOwnProperty("datasets") && data['datasets'] > 0) {
+        ), err => {
-            this.numbers.datasetsSize = NumberUtils.roundNumber(data['datasets']);
+          this.handleError('Error getting numbers', err);
+        });
+      } else {
+        this.subs.push(this.groupedRequestsService.home().subscribe((data: any[]) => {
+          if (data) {
+            if (data.hasOwnProperty("publications") && data['publications'] > 0) {
+              this.numbers.publicationsSize = NumberUtils.roundNumber(data['publications']);
+            }
+            if (data.hasOwnProperty("datasets") && data['datasets'] > 0) {
+              this.numbers.datasetsSize = NumberUtils.roundNumber(data['datasets']);
+            }
+            if (data.hasOwnProperty("datasetsInterlinked") && data['datasetsInterlinked'] > 0) {
+              this.numbers.datasetsLinkedSize = NumberUtils.roundNumber(data['datasetsInterlinked']);
+            }
+            if (data.hasOwnProperty("software") && data['software'] > 0) {
+              this.numbers.softwareSize = NumberUtils.roundNumber(data['software']);
+            }
+            if (data.hasOwnProperty("softwareInterlinked") && data['softwareInterlinked'] > 0) {
+              this.numbers.softwareLinkedSize = NumberUtils.roundNumber(data['softwareInterlinked']);
+            }
+            if (data.hasOwnProperty("other") && data['other'] > 0) {
+              this.numbers.otherSize = NumberUtils.roundNumber(data['other']);
+            }
+            if (data.hasOwnProperty("projects") && data['projects'] > 0) {
+              this.numbers.projectsSize = NumberUtils.roundNumber(data['projects']);
+            }
+            if (data.hasOwnProperty("funders") && data['funders'] > 0) {
+              this.numbers.mergedFundersSize = NumberUtils.roundNumber(data['funders']);
+            }
+            if (data.hasOwnProperty("datasources") && data['datasources'] > 0) {
+              this.numbers.datasourcesSize = NumberUtils.roundNumber(data['datasources']);
+            }
+            if (data.hasOwnProperty("organizations") && data['organizations'] > 0) {
+              this.numbers.organizationsSize = NumberUtils.roundNumber(data['organizations']);
+            }
           }
-          if (data.hasOwnProperty("datasetsInterlinked") && data['datasetsInterlinked'] > 0) {
+          this.results.emit(this.numbers);
-            this.numbers.datasetsLinkedSize = NumberUtils.roundNumber(data['datasetsInterlinked']);
+          if (!this.isClient) {
+            this.transferState.set(stateKey, this.numbers);
           }
-          if (data.hasOwnProperty("software") && data['software'] > 0) {
+          console.log("numbers returned 2");
-            this.numbers.softwareSize = NumberUtils.roundNumber(data['software']);
+        }, err => {
-          }
+          this.handleError('Error getting numbers', err);
-          if (data.hasOwnProperty("softwareInterlinked") && data['softwareInterlinked'] > 0) {
+        }));
-            this.numbers.softwareLinkedSize = NumberUtils.roundNumber(data['softwareInterlinked']);
+      }
-          }
-          if (data.hasOwnProperty("other") && data['other'] > 0) {
-            this.numbers.otherSize = NumberUtils.roundNumber(data['other']);
-          }
-          if (data.hasOwnProperty("projects") && data['projects'] > 0) {
-            this.numbers.projectsSize = NumberUtils.roundNumber(data['projects']);
-          }
-          if (data.hasOwnProperty("funders") && data['funders'] > 0) {
-            this.numbers.mergedFundersSize = NumberUtils.roundNumber(data['funders']);
-          }
-          if (data.hasOwnProperty("datasources") && data['datasources'] > 0) {
-            this.numbers.datasourcesSize = NumberUtils.roundNumber(data['datasources']);
-          }
-          if (data.hasOwnProperty("organizations") && data['organizations'] > 0) {
-            this.numbers.organizationsSize = NumberUtils.roundNumber(data['organizations']);
-          }
-        }
-        this.results.emit(this.numbers);
-      }, err => {
-        this.handleError('Error getting numbers', err);
-      }));
     }
   }
   

sharedComponents/search-input/search-input.component.ts

@@ -86,6 +86,7 @@ export class SearchInputComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.expanded = !this.expandable;
     this.initialized = true;
+    // this.cdr.detectChanges();
   }
   
   ngAfterViewInit() {

utils/properties/environments/environment.ts

@@ -110,7 +110,7 @@ export let commonDev: EnvProperties = {
   orcidAPIURL: "http://duffy.di.uoa.gr:19480/uoa-orcid-service/",
   orcidTokenURL: "https://sandbox.orcid.org/oauth/authorize?",
   orcidClientId: "APP-A5M3KTX6NCN67L91",
-  utilsService: "http://scoobydoo.di.uoa.gr:8000",
+  utilsService: "http://duffy.di.uoa.gr:8000",
   vocabulariesAPI: "https://dev-openaire.d4science.org/provision/mvc/vocabularies/",
   loginServiceURL: "http://mpagasas.di.uoa.gr:19080/login-service/",
   cookieDomain: ".di.uoa.gr",