V2.5.3

invalidate-cf.sh

@@ -4,5 +4,4 @@ MATURITY=$1
 
 aws cloudfront create-invalidation \
     --distribution-id $CDN_ID \
-    --paths /index.html /manifest.json /ngsw.json /favicon.ico /assets/* /docs/*
-
+    --paths /index.html /manifest.json /ngsw.json /favicon.ico /assets/i18n/* /assets/* /docs/*

src/app/app.component.ts

@@ -506,10 +506,11 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
         }
         return true
       }),
+      debounceTime(200),
       filter(_ => this.searchType !== SearchType.SARVIEWS_EVENTS
+        && this.searchType !== SearchType.CUSTOM_PRODUCTS
         && this.searchType !== SearchType.BASELINE
         && this.searchType !== SearchType.SBAS),
-      debounceTime(200),
       map(params => ({...params, output: 'COUNT'})),
       tap(_ =>
         this.store$.dispatch(new searchStore.SearchAmountLoading())

src/app/components/filters-dropdown/custom-products-filters/custom-products-filters.component.html

@@ -11,8 +11,10 @@
     </mat-expansion-panel-header>
 
     <div style="display: flex; margin-top: 25px;">
-      <app-search-type-selector style="margin-right: 10px;">
+      <app-search-type-selector style="margin-right: 25px;">
       </app-search-type-selector>
+
+      <app-on-demand-user-selector style="margin-top: 11px;"></app-on-demand-user-selector>
     </div>
   </mat-expansion-panel>
 

src/app/components/filters-dropdown/custom-products-filters/custom-products-filters.module.ts

@@ -10,6 +10,7 @@ import { CustomProductsFiltersComponent } from './custom-products-filters.compon
 import { JobStatusSelectorModule } from '@components/shared/selectors/job-status-selector';
 import { DateSelectorModule } from '@components/shared/selectors/date-selector';
 import { JobProductNameSelectorModule } from '@components/shared/selectors/job-product-name-selector';
+import { OnDemandUserSelectorModule} from '@components/shared/selectors/on-demand-user-selector';
 
 import { SharedModule } from '@shared';
 
@@ -24,6 +25,7 @@ import { SharedModule } from '@shared';
     ProjectNameSelectorModule,
     JobStatusSelectorModule,
     JobProductNameSelectorModule,
+    OnDemandUserSelectorModule,
     SharedModule
   ],
   exports: [

src/app/components/header/header.module.ts

@@ -31,6 +31,7 @@ import { ProjectNameSelectorModule } from '@components/shared/selectors/project-
 import { JobStatusSelectorModule } from '@components/shared/selectors/job-status-selector';
 import { JobProductNameSelectorModule } from '@components/shared/selectors/job-product-name-selector';
 import { SarviewsEventSearchSelectorModule } from '@components/shared/selectors/sarviews-event-search-selector';
+import { OnDemandUserSelectorModule} from '@components/shared/selectors/on-demand-user-selector';
 import { LogoModule } from '@components/header/logo/logo.module';
 
 import { HeaderComponent } from './header.component';
@@ -96,7 +97,8 @@ import { LanguageSelectorModule } from "@components/shared/selectors/language-se
     SarviewsEventTypeSelectorModule,
     Hyp3UrlModule,
     SharedModule,
-    LanguageSelectorModule
+    LanguageSelectorModule,
+    OnDemandUserSelectorModule,
   ],
   exports: [
     HeaderComponent

src/app/components/header/hyp3-header/hyp3-header.component.html

@@ -15,14 +15,9 @@
         <app-date-selector></app-date-selector>
       </div>
 
-      <app-job-product-name-selector [headerView]="true" *ngIf="breakpoint === breakpoints.FULL" class="breadcrumb">
-      </app-job-product-name-selector>
+      <app-job-status-selector *ngIf="breakpoint === breakpoints.FULL" class="breadcrumb"></app-job-status-selector>
 
-      <app-job-status-selector *ngIf="breakpoint === breakpoints.FULL" class="breadcrumb">
-      </app-job-status-selector>
-
-      <div *ngIf="breakpoint !== breakpoints.FULL"
-        class="breadcrumb">
+      <div class="breadcrumb">
         <button (click)="onToggleFiltersMenu()"
           mat-button class="additional-filters-button">
           {{ 'FILTERS' | translate }} <br> <mat-icon>more_horiz</mat-icon>

src/app/components/header/info-bar/info-bar.component.html

@@ -4,10 +4,17 @@
   <div class="first-info">
     <span *ngIf="(searchType$ | async) === searchTypes.CUSTOM_PRODUCTS">
       <app-hyp3-url></app-hyp3-url>
+      <span>
+        <span *ngIf="!!userID">
+          <b>{{ 'USER_ID_INFO_BAR' | translate }}:</b> {{ userID }}
+        </span>
+      </span>
     </span>
+
     <span *ngIf="(searchType$ | async) === searchTypes.SARVIEWS_EVENTS && !!eventProductTypes">
       <b>{{'PRODUCT_TYPES' | translate }}:</b> {{eventProductTypes}}
     </span>
+
     <span *ngIf="(breakpoint < breakpoints.FULL) && !!startDate">
       <b>{{ 'START' | translate }}:</b> {{ startDate | shortDate }}
     </span>
@@ -62,7 +69,7 @@
     </span>
     <span>
       <span *ngIf="!!groupID">
-        <b>Group ID:</b> {{groupID}}
+        <b> {{ 'GROUP_ID_INFO_BAR' | translate }}:</b> {{ groupID }}
       </span>
     </span>
   </div>

src/app/components/header/info-bar/info-bar.component.ts

@@ -4,6 +4,7 @@ import { Store } from '@ngrx/store';
 import { SubSink } from 'subsink';
 
 import { AppState } from '@store';
+import * as hyp3Store from '@store/hyp3';
 import * as filtersStore from '@store/filters';
 import * as searchStore from '@store/search';
 
@@ -48,6 +49,7 @@ export class InfoBarComponent implements OnInit, OnDestroy {
   public fullBurstIDs: string[] = [];
   public operaBurstIDs: string[] = [];
   public groupID: string;
+  public userID: string;
 
   private subs = new SubSink();
 
@@ -131,11 +133,15 @@ export class InfoBarComponent implements OnInit, OnDestroy {
     const operaBurstIDSub = this.store$.select(filtersStore.getOperaBurstIDs).subscribe(
       burstIDs => this.operaBurstIDs = burstIDs
     );
-    
+
     const groupIDSub = this.store$.select(filtersStore.getGroupID).subscribe(
       groupID => this.groupID = groupID
     );
 
+    const userIDSub = this.store$.select(hyp3Store.getOnDemandUserId).subscribe(
+      userID => this.userID = userID
+    );
+
     [
       startSub, endSub,
       pathSub, frameSub,
@@ -152,7 +158,8 @@ export class InfoBarComponent implements OnInit, OnDestroy {
       eventProductType,
       fullBurstIDSub,
       operaBurstIDSub,
-      groupIDSub
+      groupIDSub,
+      userIDSub
     ].forEach(sub => this.subs.add(sub));
 
     this.subs.add(

src/app/components/results-menu/scene-detail/scene-detail.component.ts

@@ -119,7 +119,7 @@ export class SceneDetailComponent implements OnInit, OnDestroy {
     );
 
     const scene$ = this.store$.select(scenesStore.getSelectedScene).pipe(
-      distinctUntilChanged((previous, current) => previous?.id === current?.id),
+      distinctUntilChanged(),
       tap(_ => this.isImageLoading = true)
     );
 

src/app/components/results-menu/scene-files/scene-files.component.ts

@@ -371,6 +371,7 @@ export class SceneFilesComponent implements OnInit, OnDestroy, AfterContentInit
         dataset: 'Sentinel-1',
         groupId: 'SARViews',
         isUnzippedFile: false,
+        isDummyProduct: false,
 
         metadata: {
           date: moment(product.processing_date),
@@ -407,6 +408,7 @@ export class SceneFilesComponent implements OnInit, OnDestroy, AfterContentInit
       dataset: 'Sentinel-1',
       groupId: 'SARViews',
       isUnzippedFile: false,
+      isDummyProduct: false,
 
       metadata: {
         date: moment(product.processing_date),
@@ -437,7 +439,7 @@ export class SceneFilesComponent implements OnInit, OnDestroy, AfterContentInit
             );
         } else {
           return of([]);
-        
+
         }
       }
 

src/app/components/results-menu/scenes-list-header/scenes-list-header.component.ts

@@ -2,7 +2,7 @@ import { Component,  OnDestroy, OnInit } from '@angular/core';
 import { saveAs } from 'file-saver';
 
 import { combineLatest } from 'rxjs';
-import { debounceTime, filter, map, tap } from 'rxjs/operators';
+import { debounceTime, filter, map, tap, withLatestFrom } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 
 import { AppState } from '@store';
@@ -86,22 +86,21 @@ export class ScenesListHeaderComponent implements OnInit, OnDestroy {
 
   public isBurstStack$ = combineLatest([
     this.products$,
-    this.pairService.pairs$,
     this.store$.select(searchStore.getSearchType),
   ]
   ).pipe(
-    map(([scenes, pairs, currentSearchType]) => (currentSearchType ===
+    map(([scenes, currentSearchType]) => (currentSearchType ===
       this.SearchTypes.BASELINE && scenes?.length > 0 ? scenes[0].metadata.productType === 'BURST': false)
-      || (currentSearchType === this.SearchTypes.SBAS &&
-        (
-          (pairs.pairs?.length > 0 ? pairs.pairs[0][0].metadata.productType === 'BURST' : false)
-            || (pairs.custom?.length > 0 ? pairs.custom[0][0].metadata.productType === 'BURST' : false)
-        )
+      || (currentSearchType === this.SearchTypes.SBAS
       )
     )
   )
 
-  public numPairs$ = this.pairService.pairs$.pipe(
+  public numPairs$ =
+  this.store$.select(searchStore.getSearchType).pipe(
+    filter(searchType => searchType !== models.SearchType.CUSTOM_PRODUCTS),
+    withLatestFrom(this.pairs$),
+    map(([_, pairs]) => pairs),
     filter(pairs => !!pairs),
     map(pairs => pairs.pairs.length + pairs.custom.length)
   );
@@ -125,8 +124,8 @@ export class ScenesListHeaderComponent implements OnInit, OnDestroy {
 
   public SBASburstDataProducts$ = combineLatest([
     this.burstDataProducts$,
-    this.pairProducts$]
-  ).pipe(
+    this.pairProducts$
+  ]).pipe(
     map(([products, pairs]) => {
       const pairNames = pairs.map(p => p.name);
       const output = products.filter(p => pairNames.find(name => name === p.name));
@@ -140,8 +139,8 @@ export class ScenesListHeaderComponent implements OnInit, OnDestroy {
 
   public SBASburstMetadataProducts$ = combineLatest([
     this.burstMetadataProducts$,
-    this.pairProducts$]
-  ).pipe(
+    this.pairProducts$
+  ]).pipe(
     map(([products, pairs]) => {
       const pairNames = pairs.map(p => p.name);
       const output = products.filter(p => pairNames.find(name => name === p.name));
@@ -206,7 +205,7 @@ export class ScenesListHeaderComponent implements OnInit, OnDestroy {
 
     this.subs.add(
       this.possibleHyp3JobsService.possibleJobs$
-      .subscribe(
+        .subscribe(
           possibleJobs => {
             this.hyp3able = this.hyp3.getHyp3ableProducts(possibleJobs);
           }
@@ -215,13 +214,17 @@ export class ScenesListHeaderComponent implements OnInit, OnDestroy {
 
     this.subs.add(
       this.products$.subscribe(products => {
-       this.products = products;
-       this.downloadableProds = this.hyp3.downloadable(products);
+        this.products = products;
+        this.downloadableProds = this.hyp3.downloadable(products);
       })
     );
 
     this.subs.add(
-      this.pairs$.subscribe(({pairs, custom}) => this.pairs = [...pairs, ...custom])
+      this.store$.select(searchStore.getSearchType).pipe(
+        filter(searchType => searchType !== models.SearchType.CUSTOM_PRODUCTS),
+        withLatestFrom(this.pairs$)
+      ).subscribe(
+          ([_, {pairs, custom}]) => this.pairs = [...pairs, ...custom])
     );
 
     this.subs.add(

src/app/components/results-menu/scenes-list/scene/scene.component.html

@@ -48,20 +48,34 @@
 
     <div class="div-flex date-time" matLine>
       <span *ngIf="scene.metadata.job">
-        {{ scene.metadata.job.job_type }} <br *ngIf="breakpoint === breakpoints.MOBILE && searchType === SearchTypes.CUSTOM_PRODUCTS"> -
+        {{ scene.metadata.job.job_type }}
+        <br *ngIf="breakpoint === breakpoints.MOBILE && searchType === SearchTypes.CUSTOM_PRODUCTS"> -
       </span>
-      <span *ngIf="breakpoint > breakpoints.MOBILE && searchType !== SearchTypes.BASELINE && !!scene.metadata?.opera?.validityStartDate"
-        matTooltip="Validity Start Date">
-          {{ scene.metadata.opera.validityStartDate| fullDate }}
-      </span>
-      <span *ngIf="breakpoint > breakpoints.MOBILE && searchType !== SearchTypes.BASELINE && !scene.metadata?.opera?.validityStartDate"
-        matTooltip="{{'SCENE_START_TIME' | translate}}">
-          {{ scene.metadata.date | fullDate }}
-      </span>
-      <span *ngIf="breakpoint === breakpoints.MOBILE || searchType === SearchTypes.BASELINE"
-        matTooltip="{{'SCENE_START_TIME' | translate}}">
-        {{ scene.metadata.date| shortDate }}
+      <span *ngIf="!scene.isDummyProduct">
+        <span *ngIf="
+          breakpoint > breakpoints.MOBILE &&
+          searchType !== SearchTypes.BASELINE &&
+          !!scene.metadata?.opera?.validityStartDate"
+          matTooltip="Validity Start Date">
+            {{ scene.metadata.opera.validityStartDate | fullDate }}
+        </span>
+
+        <span *ngIf="
+          breakpoint > breakpoints.MOBILE &&
+          searchType !== SearchTypes.BASELINE &&
+          !scene.metadata?.opera?.validityStartDate"
+          matTooltip="{{'SCENE_START_TIME' | translate}}">
+            {{ scene.metadata.date | fullDate }}
+        </span>
+
+        <span *ngIf="
+          breakpoint === breakpoints.MOBILE ||
+          searchType === SearchTypes.BASELINE"
+          matTooltip="{{'SCENE_START_TIME' | translate}}">
+          {{ scene.metadata.date| shortDate }}
+        </span>
       </span>
+      <span *ngIf="scene.isDummyProduct">Loading...</span>
     </div>
   </div>
 
@@ -87,4 +101,3 @@
       </app-baseline-scene-controls>
     </ng-container>
 </button>
-

src/app/components/results-menu/scenes-list/scenes-list.component.html

@@ -17,7 +17,7 @@
           searchType === SearchTypes.BASELINE ||
           searchType === SearchTypes.LIST ||
           searchType === SearchTypes.CUSTOM_PRODUCTS">
-        <div *cdkVirtualFor="let scene of scenes">
+        <div *cdkVirtualFor="let scene of scenes | slice:0:numberProductsInList">
           <app-scene
             (click)="onSceneSelected(scene.id)"
             (toggleScene)="onToggleScene(getGroupCriteria(scene))"
@@ -31,6 +31,15 @@
             [isSelected]="scene.id === selected">
           </app-scene>
         </div>
+
+        <button *ngIf="searchType === SearchTypes.CUSTOM_PRODUCTS && numberProductsInList < scenes?.length"
+          (click)="onLoadMoreCustomProducts()"
+          class="center-button"
+          mat-list-item>
+          <button mat-stroked-button>
+            Load more products
+          </button>
+        </button>
       </ng-container>
 
       <ng-container *ngIf="searchType === SearchTypes.SARVIEWS_EVENTS">

src/app/components/results-menu/scenes-list/scenes-list.component.scss

@@ -71,3 +71,9 @@
 .baseline-list-view-small {
   height: calc(100% - 5px) !important;
 }
+
+.center-button {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}