Tabbed middle column idea for Displacement

asfadmin · Aug 22, 2024 · c4a4695 · c4a4695
1 parent 307f747
commit c4a4695
Show file tree

Hide file tree

Showing 3 changed files with 36 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
@@ -1,5 +1,5 @@
 <!-- SCENE LIST -->
-<ng-container *ngIf="breakpoint > breakpoints.MOBILE">
+<ng-container *ngIf="breakpoint > breakpoints.MOBILE" xmlns="http://www.w3.org/1999/html">
 
 	<mat-card #listCard class="mp0 ts-column-1" [style.width]="wktListMaxWidth">
 		<mat-card-subtitle class="header ts-scene-list-header">
@@ -31,13 +31,26 @@
 		<mat-card-subtitle class="header ts-layer-list-header">
 		</mat-card-subtitle>
 		<div class="ts-metadata scrollable">
-			<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;">
-					{{ 'NO_POINT_SELECTED' | translate }}
-				</div>
-			</div>
-		</div>
+      <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" dynamicHeight>
+        <mat-tab label="Metadata">
+          <div style="text-align: center; margin-top: 20px;">Interesting Metadata Goes 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 label="Extra">Content 3</mat-tab>
+      </mat-tab-group>
+      <!--		<div class= "ts-metadata scrollable">-->
+      <!--		</div>-->
+
+    </div>
 	</mat-card>
 </ng-container>
 

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
@@ -14,6 +14,7 @@ import { SubSink } from 'subsink';
 
 import { Point} from 'ol/geom';
 import { WKT } from 'ol/format';
+import {getPathRange} from '@store/filters';
 
 
 @Component({
@@ -71,10 +72,12 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
         searchType => this.searchType = searchType
       )
     );
+
     this.subs.add(this.pointHistoryService.history$.subscribe(history => {
       this.pointHistory = history;
       this.mapService.setDisplacementLayer(history);
     }));
+
     this.subs.add(this.drawService.polygon$.subscribe(polygon => {
       if(polygon) {
         let temp = polygon.getGeometry().clone() as Point;
@@ -87,6 +90,10 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
         this.updateChart(temp);
       }
     }))
+
+    this.netcdfService.getTimeSeries(getPathRange).pipe(first()).subscribe(data => {
+      this.tsPath = data;
+    });
   }
 
   public onResizeEnd(event: ResizeEvent): void {
@@ -123,12 +130,14 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   public onOpenHelp(url: string): void {
     window.open(url);
   }
+
   public onPointClick(index: number) {
     this.passDraw = true;
     var format = new WKT();
-    var wktRepresenation  = format.writeGeometry(this.pointHistory[index]);
-    this.mapService.loadPolygonFrom(wktRepresenation.toString())
+    var wktRepresentation  = format.writeGeometry(this.pointHistory[index]);
+    this.mapService.loadPolygonFrom(wktRepresentation.toString())
   }
+
   public updateChart(geometry): void {
     this.netcdfService.getTimeSeries(geometry).pipe(first()).subscribe(data => {
       this.chartData.next(data);

diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.module.ts b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.module.ts
@@ -16,6 +16,7 @@ import { TimeseriesChartModule } from '@components/timeseries-chart/timeseries-c
 import { ResizableModule } from 'angular-resizable-element';
 import { MatRadioModule } from '@angular/material/radio';
 import { PipesModule } from '@pipes';
+import {MatTab, MatTabGroup} from '@angular/material/tabs';
 
 
 @NgModule({
@@ -36,7 +37,9 @@ import { PipesModule } from '@pipes';
     TimeseriesChartModule,
     ResizableModule,
     MatRadioModule,
-    PipesModule
+    PipesModule,
+    MatTabGroup,
+    MatTab
   ],
   exports: [
     TimeseriesResultsMenuComponent