Displacement center column tabs

src/app/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>
 

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({
@@ -35,6 +36,8 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
   public chartCardMaxWidth = '55%';
   private minChartWidth = 25.0;
 
+  public tsPath: any
+
   public breakpoint: Breakpoints;
   public breakpoints = Breakpoints;
   private subs = new SubSink();
@@ -69,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;
@@ -85,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 {
@@ -121,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);

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

src/assets/i18n/en.json

@@ -16,6 +16,7 @@
   "ADD_ALL_RESULTS_TO_DOWNLOADS": "Add all results to downloads",
   "ADD_ALL_RESULTS_TO_ON_DEMAND_QUEUE": "Add all results to On Demand queue",
   "ADD_BEAM_MODE_TO_SEARCH": "Add beam mode to search",
+  "ADD_BY_PRODUCT_TYPE": "Add by product type",
   "ADD_FILE_TO_DOWNLOADS": "Add file to downloads",
   "ADD_FILE_TO_QUEUE": "Add file to queue",
   "ADD_JOB": "Add job",

src/assets/i18n/es.json

@@ -16,6 +16,7 @@
   "ADD_ALL_RESULTS_TO_DOWNLOADS": "Agregar todos los resultados a las descargas",
   "ADD_ALL_RESULTS_TO_ON_DEMAND_QUEUE": "Agregar todos los resultados a la lista de On Demand",
   "ADD_BEAM_MODE_TO_SEARCH": "Agregar modo de haz para buscar",
+  "ADD_BY_PRODUCT_TYPE": "Añadir por tipo de producto",
   "ADD_FILE_TO_DOWNLOADS": "Agregar archivo a las descargas",
   "ADD_FILE_TO_QUEUE": "Agregar archivo a la lista",
   "ADD_JOB": "Agregar trabajo",