Skip to content

Commit

Permalink
Merge branch 'displacement' into kim/displacement
Browse files Browse the repository at this point in the history
  • Loading branch information
Kim committed Nov 7, 2024
2 parents d9c28c8 + a813530 commit 464b6d7
Show file tree
Hide file tree
Showing 9 changed files with 279 additions and 117 deletions.
2 changes: 0 additions & 2 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,3 @@ testem.log
.DS_Store
Thumbs.db
local-serve.sh

src/app/components/timeseries-chart/timeseries-chart-abort.component.ts
4 changes: 2 additions & 2 deletions .../components/results-menu/sbas-results-menu/sbas-sliders-two/sbas-sliders-two.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,10 +74,10 @@ export class SbasSlidersTwoComponent implements OnInit, OnDestroy {
this.daysControl = new UntypedFormControl(this.daysRange, Validators.min(0));

const daysSliderRef = this.makeDaysSlider$(this.temporalFilter);
const tempSlider = daysSliderRef.slider;
// const tempSlider = daysSliderRef.slider;
const daysValues$ = daysSliderRef.daysValues;

this.tempSlider = tempSlider;
// this.tempSlider = tempSlider;

fromEvent(this.meterFilter.nativeElement, 'keyup').pipe(
map((event: any) => {
Expand Down
3 changes: 2 additions & 1 deletion ...pp/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,8 @@
<div class="ts-chart-row">
<div id="ts-chart-column">
<app-timeseries-chart></app-timeseries-chart>
<app-timeseries-chart-temporal-slider></app-timeseries-chart-temporal-slider>
<app-timeseries-chart-temporal-slider
[maxRange]="maxRange" ></app-timeseries-chart-temporal-slider>
</div>
</div>

Expand Down
119 changes: 58 additions & 61 deletions src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,7 @@ import * as searchStore from '@store/search';
import * as mapStore from '@store/map';
import * as chartStore from '@store/charts';

import { DrawService, MapService, NetcdfService, PointHistoryService, ScreenSizeService,
// WktService
} from '@services';
import { DrawService, MapService, NetcdfService, PointHistoryService, ScreenSizeService, WktService} from '@services';
import { Breakpoints, SearchType, MapInteractionModeType, MapDrawModeType } from '@models';

import { SubSink } from 'subsink';
Expand All @@ -30,6 +28,20 @@ export interface Task {
subtasks?: Task[];
}

export interface PointSeries {
bytes: number;
interferometric_correlation: number;
netcdf_uri: string;
persistent_scatterer_mask: number;
reference_datetime: string;
secondary_datetime: string;
short_wavelength_displacement: number;
temporal_baseline: number;
temporal_coherence: number;
x: number;
y: number;
}

@Component({
selector: 'app-timeseries-results-menu',
templateUrl: './timeseries-results-menu.component.html',
Expand Down Expand Up @@ -61,6 +73,9 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
// public chartData = new Subject<any>;
public chartStates: models.timeseriesChartItemState[] = []
public allSeriesChecked$ = this.store$.select(chartStore.getAreAllTimeseriesChecked)
public maxRange: models.Range<number> = {start: 0, end: 0};
public dataDateMin: Date;
public dataDateMax: Date;
public selectedPoint: number;
// private timeseries_subscription: Subscription;

Expand All @@ -78,7 +93,7 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
private drawService: DrawService,
private mapService: MapService,
private netcdfService: NetcdfService,
// private wktService: WktService
private wktService: WktService
) { }

ngOnInit(): void {
Expand Down Expand Up @@ -107,42 +122,23 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
}
))
this.subs.add(this.pointHistoryService.history$.subscribe(history => {
// this.store$.dispatch(chartStore.set)
// this.pointHistory = history;
this.mapService.setDisplacementLayer(history);
// const task = this.task();
// let found = false
// for (const point of this.pointHistory) {
// found = false;
// for (const pt of task.subtasks) {
// if (pt.aoi.toString() === point.flatCoordinates.toString()) {
// found = true;
// break;
// }
// }
// if (!found) {
// let p = {aoi: point.flatCoordinates, checked: true};
// task.subtasks.push(p);
// }
// }

// return {...task};

}));

// let thing: string = localStorage.getItem('timeseries-points')
// if(thing && thing.length > 0) {
// let previous_points: any[] = thing?.split(';');
// if(previous_points.length > 0) {
// console.log(previous_points)
// previous_points = previous_points?.map(value => {
// return this.wktService.wktToFeature(value, 'EPSG:4326');
// })
// previous_points?.forEach(point => {
// this.pointHistoryService.addPoint(point.getGeometry());
// })
// }
// }
let thing: string = localStorage.getItem('timeseries-points')
if(thing && thing.length > 0) {
let previous_points: any[] = thing?.split(';');
if(previous_points.length > 0) {
console.log(previous_points)
previous_points = previous_points?.map(value => {
return this.wktService.wktToFeature(value, 'EPSG:4326');
})
previous_points?.forEach(point => {
this.pointHistoryService.addPoint(point.getGeometry());
})
}
}

this.subs.add(this.drawService.polygon$.subscribe(polygon => {
if(polygon) {
Expand Down Expand Up @@ -190,22 +186,16 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
this.store$.dispatch(new mapStore.SetMapInteractionMode(MapInteractionModeType.NONE));
}

// public onPointClick(index: number) {
// this.pointHistoryService.selectedPoint = index;
// this.pointHistoryService.passDraw = true;
// let format = new WKT();
// let wktRepresenation = format.writeGeometry(this.pointHistory[index]);
// this.mapService.loadPolygonFrom(wktRepresenation.toString())
// }

public updateChart(): void {
let allPointsData = [];
for (const series of this.chartStates) {
this.netcdfService.getTimeSeries(series.geoemetry).pipe(first()).subscribe(data => {
allPointsData.push(data);
})
// this.chartData.next(allPointsData);
}
this.maxRange = this.getMaxRange(allPointsData);
console.log('updateChart dataDateMin, dataDateMax', this.dataDateMin, this.dataDateMax);
console.log('updateChart allPointsData', allPointsData);
}

readonly task = signal<Task>({
Expand All @@ -225,26 +215,33 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
public toggleAllSeries(checked: boolean) {
this.store$.dispatch(chartStore.setAllTimeseriesChecked({checked}))
}
public getMaxRange(allSeries: PointSeries[]) {
let minDate = null;
let maxDate = null;
for (let points of allSeries) {
for (let key of Object.keys(points).filter(x => x !== 'mean' && x !== 'aoi')) {
console.log('getMaxRange key', key);
console.log('getMaxRange points[key]', points[key]);
let date = new Date(points[key].secondary_datetime);
console.log('getMaxRange date', date);
if (minDate === null || date < minDate) {
minDate = date;
}
if (maxDate === null || date > maxDate) {
maxDate = date;
}
}
}
let dateRange: models.Range<any> = {start: minDate, end: maxDate};
console.log('getMaxRange dateRange', dateRange);
return dateRange;
}


public updateSeries(checked: boolean, index?: number) {
const wkt = this.chartStates[index]?.wkt

this.store$.dispatch(chartStore.setTimeseriesChecked({wkt, checked}))

// this.task.update(task => {
// if (index === undefined) {
// task.checked = checked;
// task.subtasks?.forEach(t => (t.checked = checked));
// } else {
// task.subtasks![index].checked = checked;
// task.checked = task.subtasks?.every(t => t.checked) ?? true;
// this.pointHistoryService.selectedPoint = index;
// this.pointHistoryService.passDraw = true;
// let format = new WKT();
// let wktRepresentation = format.writeGeometry(this.pointHistory[index]);
// this.mapService.loadPolygonFrom(wktRepresentation.toString())
// }
// return {...task};
// });
}
public deletePoint(index: number) {
console.log('delete', index);
Expand Down
9 changes: 8 additions & 1 deletion ...es-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
<p style="text-align: center">Timeseries Date Slider Goes Here</p>
<div #slider class="slider"></div>
<div class="slider-labels">
<span>2000</span>
<span>2005</span>
<span>2010</span>
<span>2015</span>
<span>2023</span>
</div>
42 changes: 42 additions & 0 deletions ...es-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* Contenedor principal del slider */
.slider {
margin: 0 auto; /* Centra el slider horizontalmente */
width: 100%; /* Ocupa todo el ancho disponible */
max-width: 95%; /* Opcional: Limita el ancho máximo para que no se extienda demasiado */
box-sizing: border-box;
}

.noUi-connect {
background-color: #007BFF; /* Color principal */
height: 6px; /* Ajusta el grosor de la barra conectada */
}

.noUi-handle {
background-color: #FFFFFF;
border: 2px solid #007BFF; /* Borde que combine con el color principal */
border-radius: 50%; /* Hace que el control sea redondo */
height: 20px;
width: 20px;
}

.noUi-tooltip {
background-color: #333;
color: #fff;
border-radius: 4px;
font-size: 12px;
}

/* Estilos de las etiquetas debajo del slider */
.slider-labels {
display: flex;
justify-content: space-between;
width: 100%; /* Ocupa todo el ancho del slider */
max-width: 95%; /* Limita el ancho para alinearse con el slider */
margin: 10px auto 0; /* Centra y da espacio superior al slider */
box-sizing: border-box;
}

.slider-labels span {
font-size: 12px;
color: #666; /* Color de las etiquetas */
}
Loading

0 comments on commit 464b6d7

Please sign in to comment.