Andy/ds 6227 displacemen story map

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

@@ -27,14 +27,6 @@
           <b>{{ 'PRODUCT_TYPES' | translate }}:</b> {{ eventProductTypes }}
         </span>
       }
-      @if ((searchType$ | async) === searchTypes.DISPLACEMENT) {
-        <span>
-          <button mat-button (click)="onOpenDispDataDisclaimer()">
-            <em>{{ 'DISPLACEMENT_DATA_DISCLAIMER' | translate }}</em
-            ><mat-icon>info-icon</mat-icon>
-          </button>
-        </span>
-      }
       @if (breakpoint > breakpoints.SMALL && !!startDate) {
         <span>
           <b>{{ 'START' | translate }}:</b> {{ startDate | shortDate }}

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

@@ -17,9 +17,6 @@ import { CiSearchComponent } from './ci-search/ci-search.component';
 import { ShortDatePipe } from '@pipes/short-date.pipe';
 import { JoinPipe } from '@pipes/join.pipe';
 import { TranslateModule } from '@ngx-translate/core';
-import { DispDataDisclaimerComponent } from '@components/results-menu/timeseries-results-menu/timeseries-displacement-disclaimer-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
-import { MatIcon } from '@angular/material/icon';
 
 // Declare GTM dataLayer array.
 declare global {
@@ -40,14 +37,12 @@ declare global {
     ShortDatePipe,
     JoinPipe,
     TranslateModule,
-    MatIcon,
   ],
 })
 export class InfoBarComponent implements OnInit, OnDestroy {
   private store$ = inject<Store<AppState>>(Store);
   private screenSize = inject(services.ScreenSizeService);
   private hyp3 = inject(services.Hyp3ApiService);
-  private dialog = inject(MatDialog);
   public searchType: models.SearchType = models.SearchType.DATASET;
   public searchTypes = models.SearchType;
   public searchType$ = this.store$.select(searchStore.getSearchType);
@@ -303,15 +298,6 @@ export class InfoBarComponent implements OnInit, OnDestroy {
     );
   }
 
-  public onOpenDispDataDisclaimer() {
-    this.dialog.open(DispDataDisclaimerComponent, {
-      width: '550px',
-      height: '325px',
-      maxWidth: '550px',
-      maxHeight: '500px',
-    });
-  }
-
   ngOnDestroy() {
     this.subs.unsubscribe();
   }

src/app/components/header/processing-queue/processing-options/processing-options.component.html

@@ -4,7 +4,9 @@
       @if (selectedJobType.id === jobType.id) {
         @if (jobType.options.length === 0) {
           <div class="no-processing-options">
-            <h3>{{ 'NO_PROCESSING_OPTIONS_FOR' | translate }} {{ jobType.name }}</h3>
+            <h3>
+              {{ 'NO_PROCESSING_OPTIONS_FOR' | translate }} {{ jobType.name }}
+            </h3>
           </div>
         } @else {
           <div class="flex-row flex-start">

src/app/components/map/map.component.html

@@ -93,6 +93,19 @@
   <img src="/assets/NASA_logo.svg" class="meatball" />
 }
 
+@if (
+  breakpoint > breakpoints.MOBILE && searchType === searchTypes.DISPLACEMENT
+) {
+  <img
+    src="/assets/opera-disp-logo.png"
+    class="opera-logo"
+    (click)="onOpenDispDisclaimer()"
+    [matTooltip]="'DISPLACEMENT_DATA_DISCLAIMER' | translate"
+    matTooltipPosition="above"
+    alt="OPERA Displacement Data Disclaimer"
+  />
+}
+
 <app-filters-dropdown></app-filters-dropdown>
 
 @if (searchType === searchTypes.DATASET) {

src/app/components/map/map.component.scss

@@ -86,6 +86,23 @@ button {
   right: 10px;
 }
 
+.opera-logo {
+  position: fixed;
+  bottom: 30px;
+  left: 10px;
+  width: 110px;
+  height: auto;
+  cursor: pointer;
+  pointer-events: auto;
+  opacity: 0.85;
+  transition: opacity 0.2s ease;
+  z-index: 999;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .mobile-map-controls {
   pointer-events: auto;
   position: fixed;

src/app/components/map/map.component.ts

@@ -31,6 +31,7 @@ import * as sceneStore from '@store/scenes';
 import * as models from '@models';
 import { CMRProduct, SarviewsEvent } from '@models';
 import {
+  DisplacementDisclaimerService,
   MapService,
   PointHistoryService,
   SarviewsEventsService,
@@ -43,6 +44,7 @@ import { StyleLike } from 'ol/style/Style';
 import { Feature } from 'ol';
 import Geometry from 'ol/geom/Geometry';
 import { MatDialog } from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import WKT from 'ol/format/WKT';
 import { getTimeseriesChartStates } from '@store/charts';
 import { MatButton, MatFabButton } from '@angular/material/button';
@@ -85,6 +87,7 @@ enum FullscreenControls {
     AttributionsComponent,
     AsyncPipe,
     TranslateModule,
+    MatTooltipModule,
   ],
 })
 export class MapComponent implements OnInit, OnDestroy {
@@ -96,6 +99,7 @@ export class MapComponent implements OnInit, OnDestroy {
   private eventMonitoringService = inject(SarviewsEventsService);
   dialog = inject(MatDialog);
   private pointHistoryService = inject(PointHistoryService);
+  private disclaimerService = inject(DisplacementDisclaimerService);
 
   @Output() loadUrlState = new EventEmitter<void>();
   @ViewChild('overlay', { static: true }) overlayRef: ElementRef;
@@ -802,6 +806,10 @@ export class MapComponent implements OnInit, OnDestroy {
     this.fullscreenControl = FullscreenControls.NONE;
   }
 
+  public onOpenDispDisclaimer(): void {
+    this.disclaimerService.open();
+  }
+
   ngOnDestroy() {
     this.subs.unsubscribe();
   }

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

@@ -339,7 +339,8 @@
                 <div>
                   <button (click)="onBulkProjectNameUpdate()" mat-menu-item>
                     {{
-                      'PROJECT_NAME_UPDATE_FOR_JOBS'| translate: { count: products.length }
+                      'PROJECT_NAME_UPDATE_FOR_JOBS'
+                        | translate: { count: products.length }
                     }}
                   </button>
                 </div>

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html

@@ -244,6 +244,10 @@
               >{{ 'DATA_COURTESY_OF' | translate }}&nbsp;OPERA</a
             >
             |
+            <a (click)="onOpenDisclaimer()"
+              >&nbsp;{{ 'DISCLAIMER' | translate }}</a
+            >
+            |
             <a
               href="https://creativecommons.org/publicdomain/zero/1.0/legalcode"
               target="_blank"

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts

@@ -27,6 +27,7 @@ import * as chartStore from '@store/charts';
 import { getTimeseriesChartStates } from '@store/charts';
 
 import {
+  DisplacementDisclaimerService,
   DrawService,
   NetcdfService,
   PointHistoryService,
@@ -120,6 +121,7 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   private netcdfService = inject(NetcdfService);
   private wktService = inject(WktService);
   private dialog = inject(MatDialog);
+  private disclaimerService = inject(DisplacementDisclaimerService);
   snackBar = inject(MatSnackBar);
   private document = inject<Document>(DOCUMENT);
   private language = inject(AsfLanguageService);
@@ -459,6 +461,10 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
     });
   }
 
+  public onOpenDisclaimer(): void {
+    this.disclaimerService.open();
+  }
+
   public ngOnDestroy() {
     this.subs.unsubscribe();
     this.pointHistoryService.clearPoints();

src/app/components/shared/selectors/search-type-selector/search-type-selector.component.html

@@ -24,6 +24,14 @@
         <div class="hr-wrapper">
           <hr class="text-underline" />
         </div>
+        @if (searchType === searchTypes.DISPLACEMENT) {
+          <span
+            class="disclaimer-link"
+            (click)="onOpenDisclaimer(); $event.stopPropagation()"
+          >
+            *{{ 'DISCLAIMER' | translate }}
+          </span>
+        }
       </div>
     </div>
     <div class="gtm-search-type-selector fx-nogrow">

src/app/components/shared/selectors/search-type-selector/search-type-selector.component.scss

@@ -242,3 +242,20 @@
     transform: translateY(0);
   }
 }
+
+.disclaimer-link {
+  display: inline-block;
+  font-size: 12px;
+  font-style: italic;
+  color: grey;
+  cursor: pointer;
+  pointer-events: auto;
+  margin-left: 10px;
+  position: relative;
+  top: 2px;
+  z-index: 10;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

src/app/components/shared/selectors/search-type-selector/search-type-selector.component.ts

@@ -18,7 +18,11 @@ import * as userStore from '@store/user';
 
 import * as models from '@models';
 
-import { EnvironmentService, ScreenSizeService } from '@services';
+import {
+  DisplacementDisclaimerService,
+  EnvironmentService,
+  ScreenSizeService,
+} from '@services';
 import { AnalyticsEvent, Breakpoints, derivedDatasets } from '@models';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { NgClass, AsyncPipe } from '@angular/common';
@@ -59,6 +63,7 @@ export class SearchTypeSelectorComponent implements OnInit, OnDestroy {
   translate = inject(TranslateService);
   private store$ = inject<Store<AppState>>(Store);
   private screenSize = inject(ScreenSizeService);
+  private disclaimerService = inject(DisplacementDisclaimerService);
   env = inject(EnvironmentService);
 
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
@@ -241,6 +246,10 @@ export class SearchTypeSelectorComponent implements OnInit, OnDestroy {
     event.stopPropagation();
   }
 
+  public onOpenDisclaimer(): void {
+    this.disclaimerService.open();
+  }
+
   ngOnDestroy() {
     this.subs.unsubscribe();
   }

src/app/services/displacement-disclaimer.service.ts

@@ -0,0 +1,20 @@
+import { inject, Injectable } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+import { DispDataDisclaimerComponent } from '@components/results-menu/timeseries-results-menu/timeseries-displacement-disclaimer-dialog.component';
+
+@Injectable({ providedIn: 'root' })
+export class DisplacementDisclaimerService {
+  private dialog = inject(MatDialog);
+
+  open(): Observable<void> {
+    return this.dialog
+      .open(DispDataDisclaimerComponent, {
+        width: '550px',
+        height: '325px',
+        maxWidth: '550px',
+        maxHeight: '500px',
+      })
+      .afterClosed();
+  }
+}

src/app/services/index.ts

@@ -43,3 +43,4 @@ export { ExportService } from './export.service';
 export { NetcdfService } from './netcdf-service.service';
 export { PointHistoryService } from './point-history.service';
 export { FrameMapService } from './frame-map.service';
+export { DisplacementDisclaimerService } from './displacement-disclaimer.service';