From 3103880413a8b6ad39d669bdedcaaeea4077aef5 Mon Sep 17 00:00:00 2001
From: Andrew Anderson <raanderson9@alaska.edu>
Date: Wed, 4 Dec 2024 12:18:53 -0800
Subject: [PATCH] WIP

---
 src/app/components/results-menu/results-menu.component.html | 6 ++++--
 src/app/components/results-menu/results-menu.component.scss | 3 +++
 .../timeseries-chart/timeseries-chart.component.html        | 3 +--
 .../timeseries-chart/timeseries-chart.component.scss        | 4 ++++
 .../timeseries-chart/timeseries-chart.component.ts          | 3 ++-
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/app/components/results-menu/results-menu.component.html b/src/app/components/results-menu/results-menu.component.html
index 0f5b40f2b..21a2fe88b 100644
--- a/src/app/components/results-menu/results-menu.component.html
+++ b/src/app/components/results-menu/results-menu.component.html
@@ -8,6 +8,7 @@
       class="w100"
 
       [ngClass]="{'mobile-size': breakpoint === breakpoints.MOBILE}"
+      [ngClass]="{'displacement-results': searchType === SearchTypes.DISPLACEMENT}"
       [style.height.px]="menuHeightPx"
       mwlResizable
       [validateResize]="validate"
@@ -45,8 +46,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
index 6f6594c82..af832683b 100644
--- 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: 400px;
 }
 
 .desktop-menu-offset {
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
index 1085676cc..84b0471f0 100644
--- a/src/app/components/timeseries-chart/timeseries-chart.component.html
+++ b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -15,9 +15,8 @@
       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>
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
index efc66749f..059017d29 100644
--- a/src/app/components/timeseries-chart/timeseries-chart.component.scss
+++ b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -56,10 +56,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 {
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts
index 1ecc424cb..a9ad32e20 100644
--- a/src/app/components/timeseries-chart/timeseries-chart.component.ts
+++ b/src/app/components/timeseries-chart/timeseries-chart.component.ts
@@ -236,7 +236,8 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   }
 
   public isOverflowing(): boolean {
-    return this.virtualScroll.measureRenderedContentSize() > this.virtualScroll.getViewportSize();
+    console.log('content/viewport size:', this.virtualScroll.measureRenderedContentSize(), this.virtualScroll.getViewportSize())
+    return this.virtualScroll.measureRenderedContentSize() > this.virtualScroll.getViewportSize()-270;
   }
 
   public translateChartText() {