Merge branch 'displacement' into kim/displacement

asfadmin · Dec 5, 2024 · 6b1072b · 6b1072b
2 parents 8a6584b + fe6913a
commit 6b1072b
Show file tree

Hide file tree

Showing 24 changed files with 194 additions and 97 deletions.
diff --git a/src/app/components/header/header-buttons/header-buttons.component.html b/src/app/components/header/header-buttons/header-buttons.component.html
@@ -57,10 +57,13 @@
      <ng-container *ngIf="searchType === searchTypes.DISPLACEMENT">
         <button
           class="spacing nav-icon-buttons" color="basic" mat-button>
-          <mat-icon class="large-icon">
-            description
-          </mat-icon>
-          <div class="text-under faint-text">{{ language.getName()}}</div>
+
+          <app-docs-modal class="icon-description"
+                          matTooltip="{{ 'DATASET_INFO' | translate }}"
+                          description="description"
+                          url="https://asf.alaska.edu/datasets/daac/opera/">
+          </app-docs-modal>
+          <div class="text-under faint-text" style="margin-top: -3px;">{{ 'INFO' | translate }}</div>
         </button>
       </ng-container>
 

diff --git a/src/app/components/header/header-buttons/header-buttons.component.scss b/src/app/components/header/header-buttons/header-buttons.component.scss
@@ -20,5 +20,5 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-}
 
+}
diff --git a/src/app/components/header/header-buttons/header-buttons.module.ts b/src/app/components/header/header-buttons/header-buttons.module.ts
@@ -17,6 +17,7 @@ import { CustomizeEnvComponent } from './customize-env/customize-env.component';
 import { OnlynumberDirective } from '@directives/onlynumber.directive';
 import { SharedModule } from '@shared';
 import { LanguageSelectorModule } from "@components/shared/selectors/language-selector/language-selector.module";
+import {DocsModalModule} from '@components/shared/docs-modal';
 
 @NgModule({
   declarations: [
@@ -25,20 +26,21 @@ import { LanguageSelectorModule } from "@components/shared/selectors/language-se
     CustomizeEnvComponent,
     OnlynumberDirective
   ],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatBadgeModule,
-    MatMenuModule,
-    MatInputModule,
-    MatDialogModule,
-    MatSharedModule,
-    MatSelectModule,
-    DatasetSelectorModule,
-    MatFormFieldModule,
-    SharedModule,
-    LanguageSelectorModule,
-  ],
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatBadgeModule,
+        MatMenuModule,
+        MatInputModule,
+        MatDialogModule,
+        MatSharedModule,
+        MatSelectModule,
+        DatasetSelectorModule,
+        MatFormFieldModule,
+        SharedModule,
+        LanguageSelectorModule,
+        DocsModalModule,
+    ],
   exports: [ HeaderButtonsComponent ]
 })
 export class HeaderButtonsModule { }
diff --git a/src/app/components/map/displacement-layers/displacement-layers.component.html b/src/app/components/map/displacement-layers/displacement-layers.component.html
@@ -24,7 +24,7 @@
     <div class="help-text">
       What are these?
       <app-docs-modal class="info-icon"
-                      url="https://docs.asf.alaska.edu/vertex/manual/#area-of-interest-options">
+                      url="https://docs.asf.alaska.edu/vertex/displacement/#map-layers">
       </app-docs-modal>
     </div>
   </div>

diff --git a/src/app/components/results-menu/results-menu.component.html b/src/app/components/results-menu/results-menu.component.html
@@ -6,7 +6,7 @@
     <div
       id="result-div"
       class="w100"
-
+      [class.displacement-results]="searchType === SearchTypes.DISPLACEMENT"
       [ngClass]="{'mobile-size': breakpoint === breakpoints.MOBILE}"
       [style.height.px]="menuHeightPx"
       mwlResizable
@@ -45,8 +45,9 @@
               [resize$]="resize$">
             </app-desktop-results-menu>
 
-            <app-timeseries-results-menu class="w100 h100 results-menu--layout" [resize$]="resize$" *ngIf="searchType === SearchTypes.DISPLACEMENT">
-
+            <app-timeseries-results-menu class="w100 h100 results-menu--layout"
+               [resize$]="resize$"
+               *ngIf="searchType === SearchTypes.DISPLACEMENT">
             </app-timeseries-results-menu>
             <app-sarviews-results-menu class="w100 h100 results-menu--layout"
               *ngIf="searchType === SearchTypes.SARVIEWS_EVENTS"

diff --git a/src/app/components/results-menu/results-menu.component.scss b/src/app/components/results-menu/results-menu.component.scss
@@ -21,7 +21,10 @@
 .mobile-menu-offset {
   bottom: 117px;
   z-index: 2000;
+}
 
+.displacement-results {
+  min-height: 425px;
 }
 
 .desktop-menu-offset {
@@ -167,6 +170,7 @@
   display: flex;
   flex-direction: column;
 }
+
 .mat-mdc-card-content {
   padding: 0;
 }
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
@@ -33,8 +33,7 @@
                   <span class="ts-wkt-label">
                     {{'SERIES' | translate}} {{point.seriesNumber}}
                   </span>
-                  <button mat-icon-button (click)="setLinearFitLine($index)"><mat-icon class="ts-trash-can">open_in_full</mat-icon></button>
-                  <button mat-icon-button (click)="deletePoint($index)"><mat-icon class="ts-trash-can" matTooltip="Remove Series">delete</mat-icon></button>
+                  <button mat-icon-button (click)="deletePoint($index)"><mat-icon class="ts-trash-can">delete</mat-icon></button>
                 </mat-checkbox>
               </li>
             }

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
@@ -306,7 +306,7 @@ label {
 
 .ts-trash-can {
   margin-bottom: -4px;
-  font-size: 20px;
+  font-size: 18px;
 }
 
 .ts-add-points {
@@ -339,7 +339,7 @@ label {
 
 .point-list-ul-section {
   display: block;
-  margin-left: 5px;
+  margin-left: 0;
 }
 
 ul {
@@ -354,3 +354,7 @@ ul {
 ::ng-deep .mat-mdc-checkbox .mdc-checkbox__background {
   top: 4px
 }
+
+.ts-buttons {
+  border: none;
+}
diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts
@@ -265,13 +265,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   public deletePoint(index: number) {
     this.pointHistoryService.removePoint(index);
   }
-  public setLinearFitLine(index: number) {
-    const wkt = this.chartStates[index]?.wkt;
-
-    const isLinearFitEnabled = !(this.chartStates[index]?.linearFit ?? false);
-
-    this.store$.dispatch(chartStore.setLinearFit({wkt, 'linearFit': isLinearFitEnabled}))
-  }
 
   ngOnDestroy() {
     this.pointHistoryService.clearPoints();

diff --git a/src/app/components/shared/docs-modal/docs-modal.component.html b/src/app/components/shared/docs-modal/docs-modal.component.html
@@ -1,10 +1,17 @@
-<ng-container *ngIf="text; else elseBlock">
+<ng-container *ngIf="text">
   <a (click)="showDoc()" class="link-pointer text-link">
     {{ text }}
   </a>
 </ng-container>
-<ng-template #elseBlock>
+<ng-container *ngIf="description">
+  <a (click)="showDoc()" class="link-pointer" [matTooltip]="this.tooltip ?? ('DATASET_INFO' | translate)">
+    <mat-icon class="material-symbols-outlined large-icon">description</mat-icon>
+  </a>
+</ng-container>
+<ng-container *ngIf="!description && !text">
   <a (click)="showDoc()" class="link-pointer" matTooltip="{{this.tooltip ?? 'OPEN_LINK_TO_DOCUMENTATION' | translate}}">
     <mat-icon class="icon-size">{{ icon }}</mat-icon>
   </a>
-</ng-template>
+</ng-container>
+
+
diff --git a/src/app/components/shared/docs-modal/docs-modal.component.scss b/src/app/components/shared/docs-modal/docs-modal.component.scss
@@ -14,4 +14,14 @@
     color: themed('blue-link');
   }
   text-decoration: underline;
+
+}
+
+.large-icon {
+  @include md-icon-size(30px);
+  min-height: 30px;
+  margin-right: 0;
+  @include themify($themes) {
+    color: themed('dark-primary-text');
+  }
 }
diff --git a/src/app/components/shared/docs-modal/docs-modal.component.ts b/src/app/components/shared/docs-modal/docs-modal.component.ts
@@ -39,7 +39,9 @@ export class DocsModalComponent implements OnInit, OnDestroy {
   @Input() url: string;
   @Input() text: string;
   @Input() icon: string = 'read_more';
+  @Input() description: string;
   @Input() tooltip: string;
+
   public docURL: string;
   public safeDocURL: any;
 

diff --git a/...omponents/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.html b/...omponents/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.html
@@ -1,4 +1,5 @@
 <div style="display: flex; flex-direction: column;">
     <mat-checkbox (change)="onToggleLines($event)" [checked]="showLines">Show Lines</mat-checkbox>
+    <mat-checkbox (change)="onToggleLinearFit($event)" [checked]="showLinearFit">Show Linear Fit</mat-checkbox>
     <button mat-button (click)="resetReference()">Reset chart reference</button>
 </div>
diff --git a/.../components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.ts b/.../components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.ts
@@ -18,6 +18,7 @@ import * as chartsStore from '@store/charts'
 export class TimeseriesChartConfigComponent implements OnInit, OnDestroy {
   private subs = new SubSink()
   public showLines: boolean = true
+  public showLinearFit = false;
   @Output() public resetReferenceEvent = new EventEmitter();
   constructor(private store$: Store<AppState>) { }
 
@@ -28,12 +29,22 @@ export class TimeseriesChartConfigComponent implements OnInit, OnDestroy {
       this.store$.dispatch(chartsStore.hideGraphLines())
     }
   }
+  public onToggleLinearFit(event: MatCheckboxChange) {
+    if(event.checked) {
+      this.store$.dispatch(chartsStore.showLinearFit());
+    } else {
+      this.store$.dispatch(chartsStore.hideLinearFit());
+    }
+  }
 
   ngOnInit(): void {
     this.subs.add(this.store$.select(chartsStore.getShowLines).subscribe(
         showLines => this.showLines = showLines
       )
     );
+    this.subs.add(this.store$.select(chartsStore.getShowLinearFit).subscribe(
+      showLinearFit => this.showLinearFit = showLinearFit
+    ))
   }
 
   public resetReference() {

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -1,6 +1,6 @@
 <div class="ts-chart-details">
   <div class="ts-best-fit-nav"
-       [ngStyle]="{'visibility':formulaOverflow ? 'visible' : 'hidden'}">
+       [ngStyle]="{'visibility': isOverflowing() ? 'visible' : 'hidden'}">
     <button mat-flat-button (click)="onButtonClickPlus()" class="ts-best-fit-nav">
       <span class="material-symbols-outlined">
         arrow_forward_ios
@@ -15,16 +15,15 @@
       maxBufferPx="400"
       class="ts-best-fit-viewport">
        <div *cdkVirtualFor="let item of bestFitItems" class="ts-best-fit-item">
-        <div [style.background-color]="item.color" class="ts-color-swatch"></div>
+        <div [style.background-color]="item.color" class="ts-color-swatch">{{item.seriesNumber}}</div>
         <div style="display: flex; flex-direction: column;">
-          <div>Series {{item.seriesNumber}}</div>
           <div>{{item.formula}}</div>
         </div>
       </div>
     </cdk-virtual-scroll-viewport>
   </div>
   <div class="ts-best-fit-nav"
-       [ngStyle]="{'visibility':formulaOverflow ? 'visible' : 'hidden'}">
+       [ngStyle]="{'visibility': isOverflowing() ? 'visible' : 'hidden'}">
     <button mat-flat-button (click)="onButtonClickMinus()">
       <span class="material-symbols-outlined">
         arrow_back_ios
@@ -47,7 +46,7 @@
 	}
 	<mat-menu #menu="matMenu">
 		<ng-template matMenuContent let-tooltipData="tooltipData">
-			<button mat-button (click)="setReference(tooltipData)">Set as Reference</button>
+			<button mat-button (click)="setReference(tooltipData)">Set as Baseline</button>
 		</ng-template>
 	</mat-menu>
 </div>
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -1,7 +1,10 @@
 @import "asf-theme";
 
+$chart-ctrl-top: 60px;
+$chart-ctrl-top-x: 62px;
+
 .chart-wrapper {
-  height: 90%;
+  height: calc(100% - 50px);
   width: 100%;
   display: flex;
 }
@@ -56,10 +59,14 @@
   margin-left: 10px;
   margin-right: 10px;
 }
+
 .ts-color-swatch {
   width: 15px;
   height: 15px;
   margin-right: 5px;
+  text-align: center;
+  color: black;
+  font-weight: bolder;
 }
 
 ::ng-deep .cdk-virtual-scrollable {
@@ -92,13 +99,13 @@
 
 .ts-chart-config-button {
   position: absolute;
-  top: 54px;
+  top: $chart-ctrl-top-x;
   right: 65px;
 }
 
 .ts-chart-export-button {
   position: absolute;
-  top: 54px;
+  top: $chart-ctrl-top-x;
   right: 210px;
 }
 
@@ -115,7 +122,7 @@
 }
 .ts-chart-zoom {
   position: absolute;
-  top: 54px;
+  top: $chart-ctrl-top;
   right: 95px;
 }
 :host ::ng-deep .ts-reference-point {