Optimization of http calls on the Download and API tabs + small css fix

src/app/dataset-detail/components/dataset-api/dataset-api.component.ts

@@ -45,15 +45,11 @@ export class DatasetAPIComponent implements OnInit, OnDestroy {
     this.cguModalIsOpened = (this._cookieService.get(environment.cguAcceptedCookieName) !== 'true') &&
       !this._userService.userIsSignedIn;
 
-    this.initialize();
     this._resourcesService.getResources().subscribe(
       (results) => {
         this.resources = results;
 
         this.initialize();
-        this.sub = this._datasetDetailService.dataset$.subscribe(() => {
-          this.initialize();
-        });
       },
       (err) => {
         this._notificationService.notify(new Notification({
@@ -63,6 +59,9 @@ export class DatasetAPIComponent implements OnInit, OnDestroy {
       },
     );
 
+    this.sub = this._datasetDetailService.dataset$.subscribe(() => {
+      this.initialize();
+    });
   }
 
   ngOnDestroy() {

src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.html

@@ -8,12 +8,12 @@
             <span>{{downloadable.key}}</span>
           </div>
           <div class="resource-downloadable-files" *ngFor="let resource of downloadable.value">
-            <ng-container *ngFor="let format of resource.formats; let i=index">
+            <div class="resource-download-item-wrapper" *ngFor="let format of resource.formats; let i=index">
               <app-resource-download-item [metadata]="metadata"
               [format]="format" [resource]="resource" [projections]="projections"
                 [isQueryable]="true">
               </app-resource-download-item>
-            </ng-container>
+            </div>
           </div>
         </div>
       </div>

src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.scss

@@ -48,11 +48,11 @@
 
 .resource-download {
   margin-bottom: 1.5rem;
-  border-bottom: 2px solid $grey-background-color;
   background-color: white;
   padding: 2.5rem;
   box-shadow: 0 6px 12px 0 rgba(129, 128, 128, 0.1);
   border-radius: 8px;
+  border-bottom: 2px solid $grey-background-color;
 }
 
 .resource-description {
@@ -136,6 +136,15 @@
   }
 }
 
+.resource-download-item-wrapper,
+.resource-static-files {
+  border-bottom: 1px solid #f2f2f2;
+}
+.resource-downloadable-files:last-of-type .resource-download-item-wrapper:last-of-type,
+.resource-static-files:last-of-type {
+  border-bottom: none;
+}
+
 ::ng-deep .downloads-container {
   .modal {
     overflow-y: auto;

src/app/dataset-detail/components/dataset-downloads/dataset-downloads.component.ts

@@ -53,29 +53,26 @@ export class DatasetDownloadsComponent implements OnInit {
 
     this.isSample = this._datasetDetailService.dataset.editorialMetadata.isSample;
 
-    this.initialize();
-
-    // Why retrieveDatasetData():
-    // to retrieve the first data for the dataset (if exists). It will be used in the
-    // Data, Downloads and API tabs.
     forkJoin([
       this._resourcesService.getProjections(),
       this._resourcesService.getResources(),
-      this._datasetDetailService.retrieveDatasetData(),
-    ]).subscribe((response) => {
-      this.projections = response[0];
-      this.resources = response[1];
+    ]).subscribe(
+      (response) => {
+        this.projections = response[0];
+        this.resources = response[1];
 
-      this.initialize();
-      this.sub = this._datasetDetailService.dataset$.subscribe(() => {
         this.initialize();
-      });
-      // tslint:disable-next-line: align
-    }, (err) => {
-      this._notificationService.notify(new Notification({
-        type: 'error',
-        message: `${notificationMessages.resources.initializationError}`,
-      }));
+      },
+      (err) => {
+        this._notificationService.notify(new Notification({
+          type: 'error',
+          message: `${notificationMessages.resources.initializationError}`,
+        }));
+      },
+    );
+
+    this.sub = this._datasetDetailService.dataset$.subscribe(() => {
+      this.initialize();
     });
   }
 

src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html

- <div class="resource-download">
+ <div class="resource-download-item">
 
    <div class="first-line">
      <div class="resource-left">

src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss

 @import '../../../../../../scss/variables.scss';
 @import '../.././../../../../../node_modules/bulma/sass/utilities/_all.sass';
 
-.resource-download {
+.resource-download-item {
   background-color: white;
   align-items: center;
-  border-bottom: 1px solid #f2f2f2;
   margin-top: 1rem;
   padding-bottom: 1rem;
 }

src/app/dataset-detail/services/resources.service.ts

 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import lodashClonedeep from 'lodash.clonedeep';
+import { of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { APP_CONFIG } from '../../core/services/app-config.service';
 import { IMetadataLink, linkFormats, Metadata } from '../../shared/models';
@@ -11,24 +12,36 @@ export class ResourcesService {
 
   linkFormats = linkFormats;
   resources: Resource[];
+  projections: Projection[];
 
   constructor(
     private _httpClient: HttpClient,
   ) { }
 
   getResources() {
+    if (this.resources && this.resources.length > 0) {
+      return of(this.resources);
+    }
+
     return this._httpClient.get<IResource[]>(`${APP_CONFIG.backendUrls.resources}/resources`).pipe(
       map((resourcesBack) => {
         this.resources = resourcesBack.map(r => new Resource(r));
         return this.resources;
-      }));
+      }),
+    );
   }
 
   getProjections() {
+    if (this.projections && this.projections.length > 0) {
+      return of(this.projections);
+    }
+
     return this._httpClient.get<IProjection[]>(`${APP_CONFIG.backendUrls.resources}/projections`).pipe(
-      map((resourcesBack) => {
-        return resourcesBack.map(r => new Projection(r));
-      }));
+      map((projections) => {
+        this.projections = projections.map(r => new Projection(r));
+        return this.projections;
+      }),
+    );
   }
 
   getQueryableResources(link: IMetadataLink[]) {