Merge branch 'displacement' into tyler/displacement

asfadmin · Oct 23, 2024 · cfdfdaf · cfdfdaf
2 parents 6e5709f + 9722d8f
commit cfdfdaf
Show file tree

Hide file tree

Showing 18 changed files with 684 additions and 280 deletions.
diff --git a/buildspec.yml b/buildspec.yml
@@ -7,7 +7,7 @@ phases:
     commands:
       - n 18
       - npm set progress=false
-      - npm install -g @angular/cli@17.2.7
+      - npm install -g @angular/cli@17.3.10
   pre_build:
     commands:
       - cp src/app/services/envs/env-${MATURITY}.ts src/app/services/env.ts

diff --git a/src/app/components/map/map-controls/layer-selector/layer-selector.component.html b/src/app/components/map/map-controls/layer-selector/layer-selector.component.html
@@ -62,6 +62,29 @@
       </button>
     </mat-menu>
   </button>
+  <button mat-menu-item class="control-mat-checkbox-toggle" [matMenuTriggerFor]="timeseriesCoherence"
+  (click)="clearDisplacementLayer()"
+  >
+    <mat-checkbox class="checkbox" [disabled]="true" [checked]="displacementOverview">
+    </mat-checkbox>
+    Displacement Overview
+    <mat-menu #timeseriesCoherence="matMenu">
+      <button class="control-mat-checkbox-toggle" mat-menu-item (click)="onSetDisplacementLayer('ASC')">
+        <mat-radio-button
+        [disabled]="true"
+        [checked]="displacementOverview === 'ASC'"
+        ></mat-radio-button>
+        ASC
+      </button>
+      <button class="control-mat-checkbox-toggle" mat-menu-item (click)="onSetDisplacementLayer('DESC')">
+        <mat-radio-button
+        [disabled]="true"
+        [checked]="displacementOverview === 'DESC'"
+        ></mat-radio-button>
+        DESC
+      </button>
+    </mat-menu>
+  </button>
 
   <button mat-menu-item
     class="control-mat-checkbox-toggle"

diff --git a/src/app/components/map/map-controls/layer-selector/layer-selector.component.ts b/src/app/components/map/map-controls/layer-selector/layer-selector.component.ts
@@ -35,6 +35,7 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
   public breakpoint: models.Breakpoints;
   public breakpoints = models.Breakpoints;
   private coherenceLayerOpacity: number;
+  public displacementOverview;
 
 
   private subs = new SubSink();
@@ -105,6 +106,14 @@ export class LayerSelectorComponent implements OnInit, OnDestroy {
       this.onSetCoherenceLayer(months);
     }
   }
+  public onSetDisplacementLayer(type: string) {
+    this.displacementOverview = type;
+    this.mapService.setDisplacementOverview(type);
+  }
+  public clearDisplacementLayer() {
+    this.displacementOverview = null;
+    this.mapService.clearDisplacementOverview();
+  }
 
   public onSetCoherenceLayer(months: string): void {
     this.mapService.setCoherenceLayer(months);

diff --git a/src/app/components/results-menu/scene-files/scene-files.component.ts b/src/app/components/results-menu/scene-files/scene-files.component.ts
@@ -437,7 +437,13 @@ export class SceneFilesComponent implements OnInit, OnDestroy, AfterContentInit
           };
           return this.asfApiService.query<any>(queryParams).pipe(
             map(products => products?.results?.length > 0 ? this.productService.fromResponse(products).slice(0, 1) : []),
-            tap(products => products.map(product => product.productTypeDisplay = scene.metadata.productType + "-STATIC Layer"))
+          tap(products => products.map(product => {
+            product.productTypeDisplay = "Local Incidence Angle GeoTIFF";
+            product.bytes = 0;
+            product.downloadUrl = product.metadata.opera.additionalUrls.find(url => url.endsWith('local_incidence_angle.tif'));
+            return product;
+          }
+          ))
             );
         } else {
           return of([]);

diff --git a/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html b/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
@@ -16,67 +16,74 @@
 
 		<div class="ts-left-column-results">
 
-			@if(pointHistory.length !== 0) {
-			<mat-radio-group>
-				@for (point of pointHistory; track $index) {
-
-					<mat-radio-button color="primary" (click)="onPointClick($index)"  [checked]="$index === pointHistoryService.selectedPoint">
-            <mat-icon class="ts-wkt-icon">place</mat-icon>
-            <span class="ts-wkt-text">
-						  {{point.flatCoordinates[1] | floatPrecision: 2}},&ensp;{{point.flatCoordinates[0] | floatPrecision: 2}}
+    @if(pointHistory.length !== 0) {
+
+      <section class="point-list-section">
+        <span class="parent-checkbox-section">
+          <mat-checkbox
+            class="parent-checkbox"
+            [checked]="task().checked"
+            [indeterminate]="partiallyComplete()"
+            (change)="updateSeries($event.checked)"
+          >
+            <span class="parent-checkbox-label">
+              {{task().aoi}}
             </span>
-					</mat-radio-button>
-				}
-			</mat-radio-group>
-		}
-		@else {
-			<div class="ts-no-point-selected">
+          </mat-checkbox>
+        </span>
+        <span class="point-list-ul-section">
+          <ul>
+            @for (point of pointHistory; track $index) {
+              <li>
+                <mat-checkbox [checked]="point.checked"
+                              (change)="updateSeries($event.checked, $index)">
+                  <mat-icon class="ts-wkt-icon">place</mat-icon>
+                  <span class="ts-wkt-label">
+                    {{point.flatCoordinates[1] | floatPrecision: 2}},&ensp;{{point.flatCoordinates[0] | floatPrecision: 2}}
+                  </span>
+                </mat-checkbox>
+              </li>
+            }
+          </ul>
+        </span>
+      </section>
+    }
+    @else {
+      <div class="ts-no-point-selected">
         {{ 'NO_POINT_SELECTED' | translate }}
-			</div>
-		}
+      </div>
+    }
+
 		</div>
 	</mat-card>
 
-	<mat-card class="mp0 ts-column-2 ts-layer-list" [style.width]="listCardMaxWidth">
-		<mat-card-subtitle class="header ts-layer-list-header">
-		</mat-card-subtitle>
-		<div class="ts-metadata scrollable">
-      <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" dynamicHeight>
-        <mat-tab label="Summary">
-			<div style="text-align: center; margin-top: 20px;">
-				@if(chartData | async; as data) {
-					<ul>
-						<li><b>Total Displacement: </b> {{totalDisplacement | floatPrecision: 2}}</li>
-						<li><b>Total Points: </b> {{totalPoints}}</li>
-						<li><b>Date Range: </b> {{dateRange[0] | shortDate }} - {{dateRange[1] | shortDate }}</li>
-						<li><b>Orbit Direction: </b></li>
-						<li><b>Relative Orbit: </b></li>
-					</ul>
-				}
-				@else {
-					Interesting Metadata here
-				}
-			</div>
-        </mat-tab>
-
-        <mat-tab label="Export">
-          <div style="text-align: center; margin-top: 20px;">Export Functionality Here</div>
-        </mat-tab>
-
-        <mat-tab label="Scenes">
-          <div style="height: 1000px;">
-            <app-scenes-list [resize$]="resize$"></app-scenes-list>
-            <div *ngIf="false" style="margin: 5px; padding-bottom: 36px;">
-              <div class="faint-text w100 h100" style="text-align: center; padding-top: 10px; height: 100px !important;">
-                {{ 'NO_POINT_SELECTED' | translate }}
-              </div>
-            </div>
-          </div>
-        </mat-tab>
-      </mat-tab-group>
-
-    </div>
-	</mat-card>
+<!--	<mat-card class="mp0 ts-column-2 ts-layer-list" [style.width]="listCardMaxWidth">-->
+<!--		<mat-card-subtitle class="header ts-layer-list-header">-->
+<!--		</mat-card-subtitle>-->
+<!--		<div class="ts-metadata scrollable">-->
+<!--      <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" dynamicHeight>-->
+<!--        <mat-tab label="Summary">-->
+<!--          <div style="text-align: center; margin-top: 20px;">Interesting Metadata Goes Here</div>-->
+<!--        </mat-tab>-->
+
+<!--        <mat-tab label="Export">-->
+<!--          <div style="text-align: center; margin-top: 20px;">Export Functionality Here</div>-->
+<!--        </mat-tab>-->
+
+<!--        <mat-tab label="Scenes">-->
+<!--          <div style="height: 1000px;">-->
+<!--            <app-scenes-list [resize$]="resize$"></app-scenes-list>-->
+<!--            <div *ngIf="false" style="margin: 5px; padding-bottom: 36px;">-->
+<!--              <div class="faint-text w100 h100" style="text-align: center; padding-top: 10px; height: 100px !important;">-->
+<!--                {{ 'NO_POINT_SELECTED' | translate }}-->
+<!--              </div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </mat-tab>-->
+<!--      </mat-tab-group>-->
+
+<!--    </div>-->
+<!--	</mat-card>-->
 </ng-container>
 
 <mat-card #chartCard class="mp0 ts-chart-card"

diff --git a/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss b/...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss
@@ -292,16 +292,56 @@ label {
   @include themify($themes) {
     color: darken(themed('dark-primary-text'), 25%);
   }
+  font-size: 18px;
+  line-height: 29px;
+  margin: 0 0;
+  width: 18px;
+}
+
+.ts-wkt-label {
+  margin-left: 5px;
+  position: relative;
+  top: -5px;
 }
 
 .ts-wkt-text {
   vertical-align: super;
 }
 
-::ng-deep .mdc-radio__inner-circle {
+:host ::ng-deep .mdc-radio__inner-circle {
   border-color: #236192 !important; /*change radio button color when selected*/
 }
 
-::ng-deep .mdc-radio__outer-circle {
+:host ::ng-deep .mdc-radio__outer-circle {
   border-color: #ffcc33 !important; /*change radio button color when selected*/
 }
+
+.point-list-section {
+
+}
+
+.parent-checkbox-section {
+  margin: 0;
+}
+
+.parent-checkbox-label {
+  font-weight: bold;
+}
+
+.point-list-ul-section {
+  display: block;
+  margin-left: 10px;
+}
+
+ul {
+  list-style-type: none;
+  margin-top: 0;
+}
+
+::ng-deep .mdc-checkbox {
+  height: 7px;
+}
+
+::ng-deep .mat-mdc-checkbox .mdc-checkbox__background {
+  top: 4px
+}