From f45274c5908270f5c1c251d0f26dba6708b55100 Mon Sep 17 00:00:00 2001
From: Andrew Anderson <raanderson9@alaska.edu>
Date: Mon, 18 Nov 2024 13:46:00 -0800
Subject: [PATCH 1/2] Displacement chart tooltip in static location

---
 .../timeseries-chart/timeseries-chart.component.html |  6 +++++-
 .../timeseries-chart/timeseries-chart.component.scss | 11 +++++++++++
 .../timeseries-chart/timeseries-chart.component.ts   | 12 ++++++++----
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
index 42bd25add..a800fa16e 100644
--- a/src/app/components/timeseries-chart/timeseries-chart.component.html
+++ b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -1,4 +1,8 @@
 <div #tsChartWrapper class="chart-wrapper" (resized)="onResized()">
+  <div *ngIf="hoveredData" class="chart-details">
+    Series: {{hoveredData?.seriesNumber}},&nbsp;&nbsp;{{tooltipDateFormat(hoveredDate)}},&nbsp;&nbsp;{{hoveredData?.short_wavelength_displacement.toFixed(2)}} meters<br>
+    Best Fit: y = ax + b
+  </div>
 	<div #timeseriesChart id="timeseriesChart" [contextMenuTriggerFor]="menu" [contextMenuTriggerData]="{'tooltipData': hoveredData}">
 	</div>
 	<app-chart-modal class="ts-chart-config-button" (resetReferenceEvent)="resetBasePoint()"></app-chart-modal>
@@ -16,4 +20,4 @@
 
 		</ng-template>
 	</mat-menu>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
index 012bd096e..2a87396f8 100644
--- a/src/app/components/timeseries-chart/timeseries-chart.component.scss
+++ b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -11,6 +11,17 @@
   width: 100%;
 }
 
+.chart-details {
+  position: absolute;
+  margin-top: 15px;
+  margin-left: 70px;
+  padding: 5px;
+  color: #65665c;
+  font-size: 14px;
+  font-style: italic;
+  background-color: #f5f5f5;
+}
+
 ::ng-deep .timeseries-base {
   @include themify($themes) {
     fill: themed('blue-link');
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts
index c6f58021c..b13470c6a 100644
--- a/src/app/components/timeseries-chart/timeseries-chart.component.ts
+++ b/src/app/components/timeseries-chart/timeseries-chart.component.ts
@@ -74,6 +74,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   private thing: d3.Selection<SVGGElement, {}, HTMLElement, any>
   private hoveredElement;
   public hoveredData;
+  public hoveredDate;
   private data: any;
   private lines;
   private points;
@@ -418,15 +419,16 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       .on('mouseover', function (_event: any, p: TimeSeriesData) {
         self.hoveredElement = this;
         self.hoveredData = p;
-        const date = new Date(p.date);
+        self.hoveredDate = new Date(p.date);
         toolTip.interrupt();
         toolTip
           .style('opacity', .9);
-        toolTip.html(`<div style="text-align: left">${self.tooltipDateFormat(date)}, ${p.short_wavelength_displacement.toFixed(2)} meters<br><b>Series ${p.seriesNumber}</b></div>`);
+        // toolTip.html(`<div style="text-align: left">${self.tooltipDateFormat(self.hoveredDate)}, ${p.short_wavelength_displacement.toFixed(2)} meters<br><b>Series ${p.seriesNumber}</b></div>`);
         self.updateTooltip();
       })
       .on('mouseleave', function (_) {
         self.hoveredData = null;
+        self.hoveredDate = null;
         toolTip.transition()
           .duration(500)
           .style('opacity', 0);
@@ -556,7 +558,8 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
     this.drawChart();
   }
 
-  private tooltipDateFormat(date) {
+  public tooltipDateFormat(_date) {
+    if (!_date) { return; }
     function join(t, a, s) {
       function format(m) {
         const f = new Intl.DateTimeFormat('en', m);
@@ -566,7 +569,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
     }
 
     const dateFormat = [{ month: 'short' }, { day: 'numeric' }, { year: 'numeric' }];
-    return join(date, dateFormat, ' ');
+    return join(_date, dateFormat, ' ');
   }
 
   public resetBasePoint() {
@@ -578,4 +581,5 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
     this.subs.unsubscribe();
   }
 
+  protected readonly Date = Date;
 }

From 96d053e389ded0e6a1bb37e5133835e6d8f49894 Mon Sep 17 00:00:00 2001
From: Andrew Anderson <raanderson9@alaska.edu>
Date: Mon, 18 Nov 2024 14:43:42 -0800
Subject: [PATCH 2/2] Displacement header button WIP

---
 .../header-buttons.component.html             | 185 ++++++++++--------
 1 file changed, 99 insertions(+), 86 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
index 50d4249d5..f3a95dee3 100644
--- a/src/app/components/header/header-buttons/header-buttons.component.html
+++ b/src/app/components/header/header-buttons/header-buttons.component.html
@@ -1,90 +1,103 @@
-<div *ngIf="breakpoint$ | async as breakpoint" class="fx-row">
+<div *ngIf="breakpoint$ | async as breakpoint" xmlns="http://www.w3.org/1999/html" class="fx-row">
   <ng-container *ngIf="breakpoint > breakpoints.MOBILE">
-    <button
-        [matMenuTriggerFor]="onDemandQueue"
-        class="spacing nav-icon-buttons" color="basic"
-        matTooltip="{{ 'ON_DEMAND_QUEUE' | translate }}"
-        mat-button>
-        <mat-icon
-          class="large-icon"
-          aria-hidden="false"
-          svgIcon="hyp3"
-          [matBadge]="queuedCustomProducts.length"
-          [matBadgeColor]="this.queuedProducts.length > 0 ? this.accentPalette : this.primaryPalette"
-          matBadgePosition="above after"
-          matBadgeOverlap="true"
-          matBadgeSize="small">
-        </mat-icon>
-      <div class="text-under faint-text">{{ 'ON_DEMAND' |  translate }}</div>
-    </button>
-
-    <mat-menu #onDemandQueue="matMenu">
-      <button
-      (click)="onOpenProcessingQueue()"
-      mat-menu-item>{{  'ON_DEMAND_QUEUE'  | translate }}</button>
-
-      <button mat-menu-item
-      (click) = "onSetSearchTypeOnDemand()"
-      [disabled]="!isLoggedIn">{{  'SUBMITTED_PRODUCTS'  | translate }}
-      </button>
-
-      <button mat-menu-item (click)="onOpenOnDemandDocs()">
-        {{  'ON_DEMAND_HY_P3_DOCS'  | translate }}
-      </button>
-    </mat-menu>
-    <button
-      (click)="onOpenDownloadQueue()"
-      class="spacing nav-icon-buttons"
-      color="basic"
-      matTooltip="{{ 'DOWNLOADS' | translate }}" mat-button>
-
-      <mat-icon
-        class="large-icon"
-        aria-hidden="false"
-        [matBadge]="queuedProducts.length"
-        [matBadgeColor]="this.queuedProducts.length > 0 ? this.accentPalette : this.primaryPalette"
-        matBadgePosition="above after"
-        matBadgeOverlap="true"
-        matBadgeSize="small">
-          shopping_cart
-      </mat-icon>
-      <div class="text-under faint-text">{{ 'DOWNLOADS' | translate }}</div>
-    </button>
-
-    <button
-      [matMenuTriggerFor]="helpMenu"
-      matTooltip="{{ 'HELP_AND_INFORMATION' | translate }}"
-      class="spacing nav-icon-buttons" color="basic" mat-button>
-      <mat-icon class="large-icon">help_outline</mat-icon>
-      <div class="text-under faint-text">{{ 'HELP' | translate }}</div>
-    </button>
-
-    <button
-      [matMenuTriggerFor]="languageMenu"
-      matTooltip="{{ 'LANGUAGE' | translate }}"
-      class="spacing nav-icon-buttons" color="basic" mat-button>
-      <mat-icon class="large-icon">translate</mat-icon>
-      <div class="text-under faint-text">{{ language.getName()}}</div>
-    </button>
-
-    <button
-      *ngIf="!isLoggedIn"
-      (click)="onAccountButtonClicked()"
-      class="spacing nav-icon-buttons" color="basic"
-      matTooltip="{{ 'LOGIN' | translate }}" mat-button>
-      <mat-icon class="large-icon">account_circle</mat-icon>
-      <div class="text-under faint-text">{{ 'SIGN_IN' | translate }}</div>
-    </button>
-
-    <button
-      *ngIf="isLoggedIn"
-      [matMenuTriggerFor]="profileMenu"
-      class="spacing nav-icon-buttons" color="basic"
-      matTooltip="{{ 'PROFILE' | translate}}" mat-button>
-        <mat-icon class="large-icon">account_circle</mat-icon>
-        <div class="text-under faint-text"> {{ this.userAuth.id }} </div>
-    </button>
-
+    <ng-container *ngIf="searchType$ | async as searchType">
+      <ng-container *ngIf="searchType !== searchTypes.DISPLACEMENT">
+        <button
+            [matMenuTriggerFor]="onDemandQueue"
+            class="spacing nav-icon-buttons" color="basic"
+            matTooltip="{{ 'ON_DEMAND_QUEUE' | translate }}"
+            mat-button>
+            <mat-icon
+              class="large-icon"
+              aria-hidden="false"
+              svgIcon="hyp3"
+              [matBadge]="queuedCustomProducts.length"
+              [matBadgeColor]="this.queuedProducts.length > 0 ? this.accentPalette : this.primaryPalette"
+              matBadgePosition="above after"
+              matBadgeOverlap="true"
+              matBadgeSize="small">
+            </mat-icon>
+          <div class="text-under faint-text">{{ 'ON_DEMAND' |  translate }}</div>
+        </button>
+
+        <mat-menu #onDemandQueue="matMenu">
+          <button
+          (click)="onOpenProcessingQueue()"
+          mat-menu-item>{{  'ON_DEMAND_QUEUE'  | translate }}</button>
+
+          <button mat-menu-item
+          (click) = "onSetSearchTypeOnDemand()"
+          [disabled]="!isLoggedIn">{{  'SUBMITTED_PRODUCTS'  | translate }}
+          </button>
+
+          <button mat-menu-item (click)="onOpenOnDemandDocs()">
+            {{  'ON_DEMAND_HY_P3_DOCS'  | translate }}
+          </button>
+        </mat-menu>
+        <button
+          (click)="onOpenDownloadQueue()"
+          class="spacing nav-icon-buttons"
+          color="basic"
+          matTooltip="{{ 'DOWNLOADS' | translate }}" mat-button>
+
+          <mat-icon
+            class="large-icon"
+            aria-hidden="false"
+            [matBadge]="queuedProducts.length"
+            [matBadgeColor]="this.queuedProducts.length > 0 ? this.accentPalette : this.primaryPalette"
+            matBadgePosition="above after"
+            matBadgeOverlap="true"
+            matBadgeSize="small">
+              shopping_cart
+          </mat-icon>
+          <div class="text-under faint-text">{{ 'DOWNLOADS' | translate }}</div>
+        </button>
+      </ng-container>
+
+     <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>
+        </button>
+      </ng-container>
+
+        <button
+          [matMenuTriggerFor]="helpMenu"
+          matTooltip="{{ 'HELP_AND_INFORMATION' | translate }}"
+          class="spacing nav-icon-buttons" color="basic" mat-button>
+          <mat-icon class="large-icon">help_outline</mat-icon>
+          <div class="text-under faint-text">{{ 'HELP' | translate }}</div>
+        </button>
+
+        <button
+          [matMenuTriggerFor]="languageMenu"
+          matTooltip="{{ 'LANGUAGE' | translate }}"
+          class="spacing nav-icon-buttons" color="basic" mat-button>
+          <mat-icon class="large-icon">translate</mat-icon>
+          <div class="text-under faint-text">{{ language.getName()}}</div>
+        </button>
+
+        <button
+          *ngIf="!isLoggedIn"
+          (click)="onAccountButtonClicked()"
+          class="spacing nav-icon-buttons" color="basic"
+          matTooltip="{{ 'LOGIN' | translate }}" mat-button>
+          <mat-icon class="large-icon">account_circle</mat-icon>
+          <div class="text-under faint-text">{{ 'SIGN_IN' | translate }}</div>
+        </button>
+
+        <button
+          *ngIf="isLoggedIn"
+          [matMenuTriggerFor]="profileMenu"
+          class="spacing nav-icon-buttons" color="basic"
+          matTooltip="{{ 'PROFILE' | translate}}" mat-button>
+            <mat-icon class="large-icon">account_circle</mat-icon>
+            <div class="text-under faint-text"> {{ this.userAuth.id }} </div>
+        </button>
+    </ng-container>
   </ng-container>
 
   <ng-container *ngIf="breakpoint === breakpoints.MOBILE">