From dcfbfd5541dab23b1e2145c6bacb8a96f67c337d Mon Sep 17 00:00:00 2001
From: Mark <100235124+lastminutediorama@users.noreply.github.com>
Date: Fri, 15 Nov 2024 09:30:50 -0600
Subject: [PATCH] Fix tooltip in Treatment overview (#1909)

* redo projarea id for tooltip
---
 .../map-project-areas.component.html          |  6 ++--
 .../map-project-areas.component.ts            | 28 +++++++++++++++++--
 2 files changed, 29 insertions(+), 5 deletions(-)

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 @@
 <ng-container *ngIf="mouseLngLat">
   <app-map-tooltip
     [lngLat]="mouseLngLat"
-    *ngIf="activeProjectArea$ | async; let activeProjectArea">
+    *ngIf="hoveredProjectArea$ | async; let curProjectArea">
     <mat-icon class="material-symbols-outlined">medication</mat-icon>
-    {{ getTreatedStandsTotal(activeProjectArea.prescriptions) }}
+    {{ getTreatedStandsTotal(curProjectArea.prescriptions) }}
     /
-    {{ activeProjectArea.total_stand_count }}
+    {{ curProjectArea.total_stand_count }}
   </app-map-tooltip>
 </ng-container>
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<number>();
+  hoveredProjectArea$: Observable<TreatmentProjectArea | undefined> =
+    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;
   }