fix: correctly switch between images with http request

gisaia · Nov 15, 2023 · 8ce23a2 · 8ce23a2
1 parent 588c45c
commit 8ce23a2
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 24 deletions.
diff --git a/...onents/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.css b/...onents/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.css
@@ -63,6 +63,7 @@
 .image_view {
   max-height: 100%;
   max-width: 100%;
+  cursor: pointer
 }
 
 ::ng-deep .iv-image-mode {

diff --git a/...nents/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.html b/...nents/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.html
@@ -2,7 +2,7 @@
   <div class="resultgrid--container">
     <div [hidden]="isDetailedDataShowed">
       <div class="resultgrid__img" [style.height.px]="detailHeight" [style.width.px]="detailWidth">
-        <img class="image_view" #image_detail *ngIf="gridTile.imageEnabled" src="{{imgSrc}}" onerror="this.onerror=null;" (error)="destroyViewer($event)" style="cursor: pointer">
+        <img class="image_view" #image_detail *ngIf="gridTile.imageEnabled" src="{{imgSrc}}" onerror="this.onerror=null;" (error)="destroyViewer($event)">
         <img *ngIf="!gridTile.imageEnabled && !isLoading" src="{{noViewImg}}">
         <mat-progress-spinner *ngIf="isLoading" [color]="'accent'" [diameter]="detailHeight < detailWidth ? detailHeight/2 : detailWidth/2" [mode]="'indeterminate'"></mat-progress-spinner>
       </div>

diff --git a/...ponents/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.ts b/...ponents/src/lib/components/results/result-detailed-grid/result-detailed-grid.component.ts
@@ -20,7 +20,7 @@
 import { AfterViewInit, ChangeDetectorRef, Component,
   ElementRef, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { FullScreenViewer, ImageViewer } from 'iv-viewer';
-import { Subject } from 'rxjs';
+import { Subject, take } from 'rxjs';
 import { Item } from '../model/item';
 import { Action, ElementIdentifier, QUICKLOOK_HEADER } from '../utils/results.utils';
 import { HttpClient } from '@angular/common/http';
@@ -30,7 +30,7 @@ import { HttpClient } from '@angular/common/http';
   templateUrl: './result-detailed-grid.component.html',
   styleUrls: ['./result-detailed-grid.component.css']
 })
-export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterViewInit {
+export class ResultDetailedGridComponent implements OnInit, OnChanges {
   public SHOW_DETAILS = 'Show details';
   public VIEW_IMAGE = 'View quicklook';
   public SHOW_IMAGE = 'Show image';
@@ -113,30 +113,28 @@ export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterView
       if (this.viewer) {
         this.viewer = this.viewer.destroy();
       }
-      setTimeout(() => {
-        if (!!this.imageViewer) {
-          this.viewer = new ImageViewer(this.imageViewer.nativeElement);
-        }
-        this.getImage();
-      }, 0);
+      this.getImage();
     }
   }
 
   private getImage() {
+    this.imgSrc = undefined;
     if (!this.gridTile || (this.gridTile && !this.gridTile.urlImage)) {
       return;
     }
 
     if (this.useHttp) {
       this.isLoading = true;
       this.http.get(this.gridTile.urlImage, {headers: {[QUICKLOOK_HEADER]: 'true'}, responseType: 'blob'})
+        .pipe(take(1))
         .subscribe({
           next: (image: Blob) => {
             const reader = new FileReader();
             reader.addEventListener('load', () => {
               this.imgSrc = reader.result;
               this.gridTile.imageEnabled = true;
               this.isLoading = false;
+              this.resetViewer();
             }, false);
             if (image) {
               reader.readAsDataURL(image);
@@ -148,9 +146,18 @@ export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterView
       });
     } else {
       this.imgSrc = this.gridTile.urlImage;
+      this.resetViewer();
     }
   }
 
+  private resetViewer() {
+    setTimeout(() => {
+      if (!!this.imageViewer && !this.viewer) {
+        this.viewer = new ImageViewer(this.imageViewer.nativeElement);
+      }
+    }, 0);
+  }
+
   public destroyViewer(event): void {
     this.imgSrc = this.noViewImg;
     if (this.viewer) {
@@ -159,8 +166,6 @@ export class ResultDetailedGridComponent implements OnInit, OnChanges, AfterView
     this.gridTile.imageEnabled = false;
   }
 
-  public ngAfterViewInit(): void {}
-
   public showHideDetailedData() {
     this.isDetailedDataShowed = !this.isDetailedDataShowed;
     this.changeDetectorRef.detectChanges();

diff --git a/projects/arlas-components/src/lib/components/results/result-list/result-list.component.html b/projects/arlas-components/src/lib/components/results/result-list/result-list.component.html
@@ -107,7 +107,7 @@
         </th>
       </ng-container>
     </tr>
-    <tr class="resultlist__grid-detail resultlist__thead__tr" *ngIf="selectedGridItem != null
+    <tr class="resultlist__grid-detail resultlist__thead__tr" *ngIf="selectedGridItem !== null
     && resultMode==ModeEnum.grid && isDetailledGridOpen">
       <td class="resultlist__grid-detail--td" [colSpan]="columns?.length">
         <arlas-result-detailed-grid [gridTile]="selectedGridItem" [detailWidth]="tableWidth" [detailHeight]="detailedGridHeight"

diff --git a/projects/arlas-components/src/lib/components/results/result-list/result-list.component.ts b/projects/arlas-components/src/lib/components/results/result-list/result-list.component.ts
@@ -965,18 +965,24 @@ export class ResultListComponent implements OnInit, DoCheck, OnChanges, AfterVie
     if (item.imageEnabled && this.fieldsConfiguration.urlImageTemplate) {
       item.urlImage = this.fieldsConfiguration.urlImageTemplate;
       /** match : => ["{field1}", "{field2}"] */
-      this.fieldsConfiguration.urlImageTemplate.match(/{(.+?)}/g).forEach(t => {
-        const key: string = t.replace('{', '').replace('}', '');
-        item.urlImage = item.urlImage.replace(t, itemData.get(key).toString());
-      });
+      const matches = this.fieldsConfiguration.urlImageTemplate.match(/{(.+?)}/g);
+      if (matches) {
+        matches.forEach(t => {
+          const key: string = t.replace('{', '').replace('}', '');
+          item.urlImage = item.urlImage.replace(t, itemData.get(key).toString());
+        });
+      }
     }
     if (item.thumbnailEnabled && this.fieldsConfiguration.urlThumbnailTemplate) {
       item.urlThumbnail = this.fieldsConfiguration.urlThumbnailTemplate;
       /** match : => ["{field1}", "{field2}"] */
-      this.fieldsConfiguration.urlThumbnailTemplate.match(/{(.+?)}/g).forEach(t => {
-        const key: string = t.replace('{', '').replace('}', '');
-        item.urlThumbnail = item.urlThumbnail.replace(t, itemData.get(key).toString());
-      });
+      const matches = this.fieldsConfiguration.urlThumbnailTemplate.match(/{(.+?)}/g);
+      if (matches) {
+        matches.forEach(t => {
+          const key: string = t.replace('{', '').replace('}', '');
+          item.urlThumbnail = item.urlThumbnail.replace(t, itemData.get(key).toString());
+        });
+      }
     }
 
     item.position = this.items.length + 1;

diff --git a/src/app/results-demo/results-demo.component.ts b/src/app/results-demo/results-demo.component.ts
@@ -52,7 +52,7 @@ export class ResultsDemoComponent implements OnInit {
       this.options.showDetailIconName = 'keyboard_arrow_down';
       this.fieldsConfiguration = {
         idFieldName: 'id', urlImageTemplate:
-        'urlImage', urlThumbnailTemplate: 'urlImage', titleFieldNames: [{ fieldPath: 'source', process: '' }]
+        '{urlImage}', urlThumbnailTemplate: 'urlImage', titleFieldNames: [{ fieldPath: 'source', process: '' }]
       };
       this.fieldsList = new Array<{ columnName: string; fieldName: string; dataType: string; dropdown?: boolean; }>();
 
@@ -76,12 +76,14 @@ export class ResultsDemoComponent implements OnInit {
         map.set('source', 'SPOT' + (i + 1));
         map.set('acquired', '2017-0' + (i + 1) + '-' + (i + 3));
         map.set('cloud', (i + 1) + '.0');
+        map.set('imageEnabled', 'true');
         if (i % 2 === 0) {
-          map.set('urlImage', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-9QP6CIX2F41m5fztAivya8_JPWTFqdYQg345dJXl4E1Q0JYEMQ');
+          map.set('urlImage', 'https://www.un-autre-regard-sur-la-terre.org/document/blogUARST/Satellites/' +
+            'Per%f9sat/Per%faSAT-1%20-%20premi%e8res%20images%20-%20first%20images%20-%20Huamanga%20-%20Ayacucho%20-%20CONIDA%20-%202016.jpg');
         } else {
           map.set('urlImage', 'http://www.un-autre-regard-sur-la-terre.org/document/blogUARST/Satellites/' +
-          'Pleiades%20-%20La%20suite/Airbus%20-%20Si%C3%A8ge%20Groupe%20-%20Toulouse%20-%20Pl%C3%A9iades%2'
-          + '0-%20VHR%20-%20Tr%C3%A8s%20haute%20r%C3%A9solution%20-%20satellite.JPG');
+            'Pleiades%20-%20La%20suite/Airbus%20-%20Si%C3%A8ge%20Groupe%20-%20Toulouse%20-%20Pl%C3%A9iades%2'
+            + '0-%20VHR%20-%20Tr%C3%A8s%20haute%20r%C3%A9solution%20-%20satellite.JPG');
 
         }
         map.set('incidence', (i + 10));