diff --git a/src/interface/src/app/treatments/map-project-areas/map-project-areas.component.html b/src/interface/src/app/treatments/map-project-areas/map-project-areas.component.html index fa6001f6f..cf00c3df3 100644 --- a/src/interface/src/app/treatments/map-project-areas/map-project-areas.component.html +++ b/src/interface/src/app/treatments/map-project-areas/map-project-areas.component.html @@ -47,10 +47,10 @@ + *ngIf="hoveredProjectArea$ | async; let curProjectArea"> medication - {{ getTreatedStandsTotal(activeProjectArea.prescriptions) }} + {{ getTreatedStandsTotal(curProjectArea.prescriptions) }} / - {{ activeProjectArea.total_stand_count }} + {{ curProjectArea.total_stand_count }} diff --git a/src/interface/src/app/treatments/map-project-areas/map-project-areas.component.ts b/src/interface/src/app/treatments/map-project-areas/map-project-areas.component.ts index 6658375d8..2e9e11e71 100644 --- a/src/interface/src/app/treatments/map-project-areas/map-project-areas.component.ts +++ b/src/interface/src/app/treatments/map-project-areas/map-project-areas.component.ts @@ -19,6 +19,14 @@ import { AsyncPipe, NgIf } from '@angular/common'; import { MapTooltipComponent } from '../map-tooltip/map-tooltip.component'; import { BASE_COLORS, LABEL_PAINT } from '../map.styles'; import { getTreatedStandsTotal } from '../prescriptions'; +import { TreatmentProjectArea } from '@types'; +import { + combineLatest, + Observable, + distinctUntilChanged, + Subject, + map, +} from 'rxjs'; type MapLayerData = { readonly name: string; @@ -53,7 +61,18 @@ export class MapProjectAreasComponent implements OnInit { fillColor: any; getTreatedStandsTotal = getTreatedStandsTotal; - activeProjectArea$ = this.treatmentsState.activeProjectArea$; + hoveredProjectAreaId$ = new Subject(); + hoveredProjectArea$: Observable = + combineLatest([ + this.summary$, + this.hoveredProjectAreaId$.pipe(distinctUntilChanged()), + ]).pipe( + map(([summary, projectAreaId]) => { + return summary?.project_areas.find( + (p: TreatmentProjectArea) => p.project_area_id === projectAreaId + ); + }) + ); readonly tilesUrl = environment.martin_server + 'project_areas_by_scenario/{z}/{x}/{y}'; @@ -123,10 +142,15 @@ export class MapProjectAreasComponent implements OnInit { } setProjectAreaTooltip(e: MapMouseEvent) { - // if I have a project area ID im transitioning to the project area view. + // if I have a project area ID im transitioning to the project area view, + // so we won't set a tooltip here if (this.treatmentsState.getProjectAreaId()) { return; } + const hoveredProjectAreaId = this.getProjectAreaIdFromFeatures(e.point); + if (hoveredProjectAreaId) { + this.hoveredProjectAreaId$.next(hoveredProjectAreaId); + } this.mouseLngLat = e.lngLat; }