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;
}