Skip to content

Commit

Permalink
WIP: chart toggle now mostly works, de-emphasizes line when toggled off
Browse files Browse the repository at this point in the history
  • Loading branch information
Kim committed Nov 7, 2024
1 parent f46c046 commit 38d7087
Show file tree
Hide file tree
Showing 8 changed files with 278 additions and 163 deletions.
16 changes: 7 additions & 9 deletions ...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 @@ -16,30 +16,30 @@

<div class="ts-left-column-results">

@if(pointHistory.length !== 0) {
@if(chartStates.length !== 0) {

<section class="point-list-section">
<span class="parent-checkbox-section">
<mat-checkbox
class="parent-checkbox"
[checked]="task().checked"
[checked]="(allSeriesChecked$ | async)"
[indeterminate]="partiallyComplete()"
(change)="updateSeries($event.checked)"
(change)="toggleAllSeries($event.checked)"
>
<span class="parent-checkbox-label">
{{task().aoi}}
All AOIs
</span>
</mat-checkbox>
</span>
<span class="point-list-ul-section">
<ul>
@for (point of pointHistory; track $index) {
@for (point of chartStates; track $index) {
<li>
<mat-checkbox [checked]="point.checked"
(change)="updateSeries($event.checked, $index)">
<mat-icon class="ts-wkt-icon">place</mat-icon>
<span class="ts-wkt-label">
{{point.flatCoordinates[1] | floatPrecision: 2}},&ensp;{{point.flatCoordinates[0] | floatPrecision: 2}}
{{point.geoemetry.getFlatCoordinates()[0] | floatPrecision: 2}},&ensp;{{point.geoemetry.getFlatCoordinates()[0] | floatPrecision: 2}}
</span>
<button mat-icon-button (click)="deletePoint($index)"><mat-icon>delete</mat-icon></button>
</mat-checkbox>
Expand Down Expand Up @@ -147,9 +147,7 @@

<div class="ts-chart-row">
<div id="ts-chart-column">
<app-timeseries-chart
[chartData]="chartData"
[isLoading]="isLoading"></app-timeseries-chart>
<app-timeseries-chart></app-timeseries-chart>
<app-timeseries-chart-temporal-slider></app-timeseries-chart-temporal-slider>
</div>
</div>
Expand Down
158 changes: 84 additions & 74 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
@@ -1,21 +1,28 @@
import {Component, OnInit, Input, OnDestroy, ViewChild, ElementRef, computed, signal} from '@angular/core';
import { first, Observable, Subject } from 'rxjs';
import { first, Observable,
// Subject
} from 'rxjs';
import { ResizeEvent } from 'angular-resizable-element';

import { Store } from '@ngrx/store';
import { AppState } from '@store';
import * as uiStore from '@store/ui';
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';

import { Point } from 'ol/geom';
import { WKT } from 'ol/format';
// import { WKT } from 'ol/format';
import { getTimeseriesChartStates } from '@store/charts';
// import { getPathRange } from '@store/filters';
import * as models from '@models';

export interface Task {
aoi: string;
Expand Down Expand Up @@ -49,9 +56,11 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
public breakpoints = Breakpoints;
private subs = new SubSink();

public pointHistory = [];
// public pointHistory = [];

public chartData = new Subject<any>;
// public chartData = new Subject<any>;
public chartStates: models.timeseriesChartItemState[] = []
public allSeriesChecked$ = this.store$.select(chartStore.getAreAllTimeseriesChecked)
public selectedPoint: number;
// private timeseries_subscription: Subscription;

Expand All @@ -60,7 +69,7 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
public dateRange = [];
public totalPoints = 0;

public isLoading = false;
// public isLoading = false;

constructor(
private store$: Store<AppState>,
Expand All @@ -69,7 +78,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 All @@ -93,45 +102,47 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
)
);

this.subs.add(this.store$.select(getTimeseriesChartStates).subscribe(chartStates => {
this.chartStates = Object.values(chartStates);
}
))
this.subs.add(this.pointHistoryService.history$.subscribe(history => {
this.pointHistory = history;
// this.store$.dispatch(chartStore.set)
// this.pointHistory = history;
this.mapService.setDisplacementLayer(history);
console.log('results menu sub this.pointHistory', this.pointHistory);
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);
}
}

console.log('results menu sub task.subtasks', task.subtasks);

return {...task};
// 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 @@ -179,24 +190,21 @@ 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 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 geometry of this.pointHistory) {
this.netcdfService.getTimeSeries(geometry).pipe(first()).subscribe(data => {
console.log('updateChart data', data);
console.log('updateChart geometry', geometry);
for (const series of this.chartStates) {
this.netcdfService.getTimeSeries(series.geoemetry).pipe(first()).subscribe(data => {
allPointsData.push(data);
})
console.log('updateChart allPointsData', allPointsData);
this.chartData.next(allPointsData);
// this.chartData.next(allPointsData);
}
}

Expand All @@ -214,27 +222,29 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
return task.subtasks.some(t => t.checked) && !task.subtasks.every(t => t.checked);
});

public toggleAllSeries(checked: boolean) {
this.store$.dispatch(chartStore.setAllTimeseriesChecked({checked}))
}
public updateSeries(checked: boolean, index?: number) {
console.log('updateSeries', checked, index);
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;
console.log('updateSeries() this.pointHistoryService.selectedPoint', this.pointHistoryService.selectedPoint);
this.pointHistoryService.passDraw = true;
let format = new WKT();
let wktRepresentation = format.writeGeometry(this.pointHistory[index]);
this.mapService.loadPolygonFrom(wktRepresentation.toString())
}
console.log('updateSeries() task', task);
console.log('updateSeries() task.subtasks', task.subtasks);
console.log('updateSeries() this.pointHistory', this.pointHistory);
return {...task};
});
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
Loading

0 comments on commit 38d7087

Please sign in to comment.