Merge branch 'displacement' into kim/displacement

asfadmin · Nov 21, 2024 · 54bffad · 54bffad
2 parents 6e9523f + 86a1a11
commit 54bffad
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 11 deletions.
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,8 @@
                   <span class="ts-wkt-label">
                     {{'SERIES' | translate}} {{point.seriesNumber}}
                   </span>
-                  <button mat-icon-button (click)="deletePoint($index)"><mat-icon class="ts-trash-can">delete</mat-icon></button>
-                  <button mat-icon-button (click)="setLinearFitLine($index)"><mat-icon class="ts-trash-can">power_settings_new</mat-icon></button>
+                  <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>
                 </mat-checkbox>
               </li>
             }

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -1,3 +1,30 @@
+<div class="ts-chart-details">
+  <div class="ts-best-fit-nav">
+    <button mat-flat-button (click)="onButtonClickPlus()" class="ts-best-fit-nav">
+      <span class="material-symbols-outlined">
+        arrow_forward_ios
+      </span>
+    </button>
+  </div>
+  <div class="ts-best-fit-formulas">
+    <cdk-virtual-scroll-viewport
+      orientation="horizontal"
+      itemSize="50"
+      minBufferPx="200"
+      maxBufferPx="400"
+      class="ts-best-fit-viewport">
+       <div *cdkVirtualFor="let item of items" class="ts-best-fit-item">Series {{item}}</div>
+    </cdk-virtual-scroll-viewport>
+  </div>
+  <div class="ts-best-fit-nav">
+    <button mat-flat-button (click)="onButtonClickMinus()">
+      <span class="material-symbols-outlined">
+        arrow_back_ios
+      </span>
+    </button>
+  </div>
+</div>
+
 <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>-->

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -11,17 +11,55 @@
   width: 100%;
 }
 
-.chart-details {
-  position: absolute;
-  margin-top: 15px;
-  margin-left: 70px;
+.ts-chart-details {
+//  position: absolute;
+  display: flex;
+  flex-direction: row;
+  background-color: #f5f5f5;
+  margin: 0 25px 0 45px;
   padding: 5px;
   color: #65665c;
   font-size: 14px;
   font-style: italic;
   background-color: #f5f5f5;
 }
 
+.ts-best-fit-nav {
+  flex: 0 1 auto;
+  width: 40px;
+  min-width: 0;
+  margin-top: -2px;
+}
+
+.ts-best-fit-formulas {
+  flex: 1 1 auto
+}
+
+
+.ts-best-fit-formulas .ts-best-fit-viewport {
+  height: 30px;
+  width: 100%;
+  border: none;
+}
+
+.ts-best-fit-formulas .ts-best-fit-viewport .cdk-virtual-scroll-content-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.ts-best-fit-item {
+  width: 100px;
+  height: 100%;
+  //writing-mode: vertical-lr;
+}
+
+::ng-deep .cdk-virtual-scrollable {
+  overflow-x: auto;
+  overflow-y: clip;
+  will-change: scroll-position;
+  contain: strict;
+  -webkit-overflow-scrolling: touch;
+}
 ::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
@@ -1,5 +1,4 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-
+import {Component, ElementRef, Input, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation} from '@angular/core';
 import * as d3 from 'd3';
 // import * as models from '@models';
 import {
@@ -16,6 +15,8 @@ import { SubSink } from 'subsink';
 import { AsfLanguageService } from "@services/asf-language.service";
 import { NetcdfService } from '@services';
 import * as models from '@models';
+import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
+// import {hidden} from '@services/map/polygon.style';
 // import {style} from '@angular/animations';
 import {linearRegression, linearRegressionLine} from './regression-line'
 interface TimeSeriesData {
@@ -27,6 +28,12 @@ interface TimeSeriesData {
   color: string,
 }
 
+// interface TimeSeriesFit {
+//   seriesNumber: number,
+//   color: string,
+//   formula: string
+// }
+
 interface DataReady {
   name: string,
   values: TimeSeriesData[],
@@ -40,9 +47,14 @@ const unSelectedColor = '#9F9F9F9F';
 @Component({
   selector: 'app-timeseries-chart',
   templateUrl: './timeseries-chart.component.html',
-  styleUrl: './timeseries-chart.component.scss'
+  styleUrl: './timeseries-chart.component.scss',
+  encapsulation: ViewEncapsulation.None,
 })
 export class TimeseriesChartComponent implements OnInit, OnDestroy {
+  // @ViewChild(CdkVirtualScrollViewport) scroll: CdkVirtualScrollViewport;
+  scrollIndex = 1;
+  @ViewChildren(CdkVirtualScrollViewport)
+  viewPorts: QueryList<CdkVirtualScrollViewport>;
   @ViewChild('tsChartWrapper', { static: true }) tsChartWrapper: ElementRef;
   @ViewChild('timeseriesChart', { static: true }) timeseriesChart: ElementRef;
   @Input() zoomIn$: Observable<void>;
@@ -52,6 +64,10 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   public linearFitEquations : {[key: string]: {m: number, b: number}};
   // @Input() chartData: models.timeseriesChartItemState[];
 
+  // public scrollIndex = 1;
+  // public viewPorts: QueryList<CdkVirtualScrollViewport>;
+
+
   public json_data: string = '';
   private svg?: d3.Selection<SVGElement, {}, HTMLDivElement, any>;
   public dataSource: models.TimeSeriesChartPoint[] = [];
@@ -85,6 +101,8 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   public endDate: Date = new Date();
   public lastStartDate: Date = new Date();
   public lastEndDate: Date = new Date();
+  public items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
+  // public bestFitItems: TimeSeriesFit[] = [];
   private linearFitLine;
 
   public exportableData: { [index:string]: {}[]} = {}
@@ -104,6 +122,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
     private store$: Store<AppState>,
     private language: AsfLanguageService,
     private netcdfService: NetcdfService
+
   ) { }
 
   public ngOnInit(): void {
@@ -209,6 +228,27 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       this.language.translate.instant('METERS') + ')';
   }
 
+  public onButtonClickPlus() {
+    // console.log(this.viewPorts.toArray());
+    this.viewPorts
+      .toArray()
+      .forEach((el) => el.scrollToIndex(this.scrollIndex, 'smooth'));
+    //this.viewPort.scrollToIndex(100, 'smooth');
+    this.scrollIndex += 1;
+  }
+
+  onButtonClickMinus() {
+    // console.log(this.viewPorts.toArray());
+    if (this.scrollIndex <= 2) {
+      this.scrollIndex = 1;
+    }
+    this.scrollIndex -= 1;
+    this.viewPorts
+      .toArray()
+      .forEach((el) => el.scrollToIndex(this.scrollIndex, 'smooth'));
+    //this.viewPort.scrollToIndex(100, 'smooth');
+  }
+
   public onZoomIn(): void {
     this.thing.transition().call(this.zoom.scaleBy, 2);
     this.updateChart();
@@ -297,7 +337,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
             opacity:  result.state.checked ? 1.0 : 0.2,
             linearFit: isLinearFitEnabled,
           });
-      }
+        }
       }
     } else {
       this.dataSource = [];

diff --git a/src/app/components/timeseries-chart/timeseries-chart.module.ts b/src/app/components/timeseries-chart/timeseries-chart.module.ts
@@ -15,6 +15,8 @@ import { TimeseriesChartExportComponent } from '@components/timeseries-chart/tim
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatMenuModule } from '@angular/material/menu';
 import { ContextMenuTriggerDirective } from '@directives/context-menu.directive';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
 
 @NgModule({
   declarations: [TimeseriesChartComponent,
@@ -35,7 +37,7 @@ import { ContextMenuTriggerDirective } from '@directives/context-menu.directive'
       TimeseriesChartExportComponent,
       MatProgressSpinnerModule,
       MatMenuModule,
-
+      ScrollingModule
     ],
   exports: [
     TimeseriesChartComponent,

diff --git a/src/styles.scss b/src/styles.scss
@@ -850,3 +850,10 @@ $d-height: 550px;
 .breadcrumb-list .mat-mdc-form-field {
   margin-top: -2px;
 }
+
+.ts-chart-details {
+  .cdk-virtual-scrollable {
+    overflow-y: clip;
+    overflow-x: auto;
+  }
+}