From 037b867a0d054543175bf584fe3a63638c7fb515 Mon Sep 17 00:00:00 2001
From: Ken <62271587+kennethliporada@users.noreply.github.com>
Date: Mon, 29 Jul 2024 20:19:33 +0800
Subject: [PATCH] fix(noah): displaying hospital icon and label; fix display
 summary data; movable pin in map (#384)

* Added github actions workflow for aut deployment to .72 server.

* Added github action for S3 deployment.

* Changed to staging. Created branch for staging.

* Retrigger deployment workflow.

* fix(studio): zoom in on ios (#192)

# Summary

- Fixes https://github.com/UPRI-NOAH/noah-frontend/issues/186
- The `load` event isn't firing on NOAH Studio. As such, the `centerListener()` method isn't called which is responsible for the zooming in to the selected place. However, `style.load` do get called. The fix implemented here is to also use the event `style.load` to call the methods that were previously called by upon the firing of the `load` event but only listen to `style.load` once.
  - We need to further investigate **why** `load` doesn't work on Studio in iOS but works in KYH
- Confirming that only the NOAH Studio is affected by this issue.

# Demo

![Kapture 2021-10-05 at 22 49 45](https://user-images.githubusercontent.com/11599005/136047077-d0da7a85-9157-4d01-bae9-07a6039fd9c1.gif)

* ci(netlify): add _redirects file

* S3 Deployment Validation (#198)

* Added if condition to run workflow only on successful PR merge. (#195)

* Checking proper automation workflow. Will revert this small change upon validation. (#196)

* Change deployment trigger. Revert small biblio change. (#199)

* Checking proper automation workflow. Will revert this small change upon validation.

* Changed trigger for deployment workflow. Revert small change to bibliography.

* Cascade dev changes on workflow to prod (#202)

* Added AWS deployment workflow

* fix error from console about opacity of risk assessment group undefined

* fix crit facility hospital show icon and label

* refactor value for flood

* center loading for IoT

* noah studio draggable pin

* volatile not sure if it is working

* changing location in search bar when the marker put down in map

* add lat long details when pin dragged

* remove text center in latest data in summary dashboard

---------

Co-authored-by: pfgoting <pfgoting@gmail.com>
Co-authored-by: Jadurani Davalos <jadurani.davalos@gmail.com>
Co-authored-by: kennethbeoliporada <kennethbeoliporada@gmail.com>
Co-authored-by: bon-carpo <jccarpo@up.edu.ph>
---
 .../components/map-kyh/map-kyh.component.html |   3 +-
 .../components/map-kyh/map-kyh.component.scss |  17 +++
 .../components/map-kyh/map-kyh.component.ts   |   8 +-
 .../map-playground.component.html             |   3 +-
 .../map-playground.component.scss             |  18 +++
 .../map-playground.component.ts               |  36 ++++--
 .../risk-assessment-group.component.ts        |  17 ++-
 .../components/summary/summary.component.html | 111 ++++++++----------
 src/app/shared/mocks/critical-facilities.ts   |   2 +-
 9 files changed, 140 insertions(+), 75 deletions(-)

diff --git a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.html b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.html
index 2f3bee71..486fba4b 100644
--- a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.html
+++ b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.html
@@ -1,10 +1,11 @@
 <div class="absolute top-0 left-0 w-full h-full" id="map-kyh"></div>
 
 <noah-change-style-button
-  class="absolute top-36 right-0 p-2"
+  class="absolute map-icon right-0 p-2"
   [selectedStyle]="mapStyle"
   (selectedStyleChange)="switchMapStyle($event)"
 ></noah-change-style-button>
+<pre id="coordinates" class="coords"></pre>
 
 <button
   class="
diff --git a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.scss b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.scss
index e69de29b..5cc3a965 100644
--- a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.scss
+++ b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.scss
@@ -0,0 +1,17 @@
+.map-icon {
+  top: 136px;
+}
+
+.coords {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  position: absolute;
+  top: 188px;
+  right: 10px;
+  padding: 5px 10px;
+  margin: 0;
+  font-size: 11px;
+  line-height: 18px;
+  border-radius: 3px;
+  display: none;
+}
diff --git a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.ts b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.ts
index 23975455..28f3a049 100644
--- a/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.ts
+++ b/src/app/features/know-your-hazards/components/map-kyh/map-kyh.component.ts
@@ -245,7 +245,10 @@ export class MapKyhComponent implements OnInit {
   }
 
   async initMarkers() {
-    this.centerMarker = new mapboxgl.Marker({ color: '#333', draggable: true })
+    this.centerMarker = new mapboxgl.Marker({
+      color: '#FF0000',
+      draggable: true,
+    })
       .setLngLat(this.kyhService.currentCoords)
       .addTo(this.map);
 
@@ -257,7 +260,10 @@ export class MapKyhComponent implements OnInit {
 
     //start draggable marker
     this.centerMarker.on('dragend', async () => {
+      const coords = document.getElementById('coordinates');
       const lngLat = this.centerMarker.getLngLat();
+      coords.style.display = 'block';
+      coords.innerHTML = `Longitude: ${lngLat.lng}<br />Latitude: ${lngLat.lat}`;
       await this.mapService.dragReverseGeocode(lngLat.lat, lngLat.lng);
       // Fly to the new center with a smooth animation
       this.map.flyTo({
diff --git a/src/app/features/noah-playground/components/map-playground/map-playground.component.html b/src/app/features/noah-playground/components/map-playground/map-playground.component.html
index 7bacfad4..2f9bc0d3 100644
--- a/src/app/features/noah-playground/components/map-playground/map-playground.component.html
+++ b/src/app/features/noah-playground/components/map-playground/map-playground.component.html
@@ -2,6 +2,7 @@
 
 <div id="distance" class="distance-container"></div>
 <div id="area" class="area-container"></div>
+<pre id="coordinates" class="coords"></pre>
 
 <div
   id="graph-dom"
@@ -16,7 +17,7 @@
   "
 ></div>
 
-<div class="top-60 absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-1.5">
+<div class="map-icon absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-1.5">
   <div class="p-2">
     <div class="dropdown inline-block relative">
       <button
diff --git a/src/app/features/noah-playground/components/map-playground/map-playground.component.scss b/src/app/features/noah-playground/components/map-playground/map-playground.component.scss
index 1c9f85aa..63930ae1 100644
--- a/src/app/features/noah-playground/components/map-playground/map-playground.component.scss
+++ b/src/app/features/noah-playground/components/map-playground/map-playground.component.scss
@@ -47,3 +47,21 @@
   padding: 5px 10px;
   border-radius: 3px;
 }
+
+.map-icon {
+  top: 228px;
+}
+
+.coords {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  position: absolute;
+  top: 284px;
+  right: 10px;
+  padding: 5px 10px;
+  margin: 0;
+  font-size: 11px;
+  line-height: 18px;
+  border-radius: 3px;
+  display: none;
+}
diff --git a/src/app/features/noah-playground/components/map-playground/map-playground.component.ts b/src/app/features/noah-playground/components/map-playground/map-playground.component.ts
index 8b3c1ea8..41ab8bad 100644
--- a/src/app/features/noah-playground/components/map-playground/map-playground.component.ts
+++ b/src/app/features/noah-playground/components/map-playground/map-playground.component.ts
@@ -252,17 +252,36 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
       .subscribe((center) => {
         this.map.flyTo({
           center,
-          zoom: 16,
+          zoom: 17,
           essential: true,
         });
 
         if (!this.centerMarker) {
-          this.centerMarker = new mapboxgl.Marker({ color: '#333' })
+          this.centerMarker = new mapboxgl.Marker({
+            color: '#FF0000',
+            draggable: true,
+          })
             .setLngLat(center)
-            .addTo(this.map);
+            .addTo(this.map)
+            .on('dragend', (e) => {
+              // Update the center position when the marker is dragged
+              const coords = document.getElementById('coordinates');
+              const LngLat = this.centerMarker.getLngLat();
+              coords.style.display = 'block';
+              coords.innerHTML = `Longitude: ${LngLat.lng}<br />Latitude: ${LngLat.lat}`;
+              this.mapService.dragReverseGeocode(LngLat.lat, LngLat.lng);
+              this.map.flyTo({
+                center: LngLat,
+                zoom: 17,
+                speed: 1.2,
+                curve: 1,
+                easing: (t) => t,
+                essential: true,
+              });
+            });
+        } else {
+          this.centerMarker.setLngLat(center);
         }
-
-        this.centerMarker.setLngLat(center);
       });
   }
 
@@ -750,7 +769,7 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
             filter: ['==', 'CF Type', 'Barangay'],
           });
           this.map.addLayer({
-            id: 'hospital',
+            id: 'qc_hospitals',
             type: 'fill',
             source: {
               type: 'geojson',
@@ -932,7 +951,7 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
                 +(groupShown && soloShown)
               );
               this.map.setPaintProperty(
-                'hospital',
+                'qc_hospitals',
                 'fill-opacity',
                 +(groupShown && soloShown)
               );
@@ -1662,7 +1681,8 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
     this.map.addSource('mapbox-dem', {
       type: 'raster-dem',
       url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-    });
+      volatile: true,
+    } as any);
 
     // Watch exaggeration level
     this.pgService.exagerration$
diff --git a/src/app/features/noah-playground/components/risk-assessment-group/risk-assessment-group.component.ts b/src/app/features/noah-playground/components/risk-assessment-group/risk-assessment-group.component.ts
index c667c4da..98175e03 100644
--- a/src/app/features/noah-playground/components/risk-assessment-group/risk-assessment-group.component.ts
+++ b/src/app/features/noah-playground/components/risk-assessment-group/risk-assessment-group.component.ts
@@ -65,9 +65,20 @@ export class RiskAssessmentGroupComponent implements OnInit {
     this.pgService
       .getRainRiskAssessment$(this.rainForecast)
       .pipe(first())
-      .subscribe(({ opacity }) => {
-        this.initialRainOpacityValue = opacity;
-      });
+      .subscribe(
+        (result) => {
+          if (result && result.opacity !== undefined) {
+            this.initialRainOpacityValue = result.opacity;
+          } else {
+            // Handle the case where result or opacity is undefined
+            this.initialRainOpacityValue = 80; // or some default value
+          }
+        },
+        (error) => {
+          // Handle the error case
+          console.error('Error fetching rain risk assessment:', error);
+        }
+      );
 
     this.pgService
       .getPopulationExposure$(this.populationAffected)
diff --git a/src/app/shared/components/summary/summary.component.html b/src/app/shared/components/summary/summary.component.html
index 688cb5e9..e141a517 100644
--- a/src/app/shared/components/summary/summary.component.html
+++ b/src/app/shared/components/summary/summary.component.html
@@ -294,10 +294,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                   <div class="tab-content">
                     <ng-container *ngIf="loading; else dataSummaryall">
                       <div tabindex="0" class="justify-center">
-                        <div
-                          class="shadow-xl w-full z-10 overflow-hidden"
-                          style="max-width: 1000px"
-                        >
+                        <div class="shadow-xl w-full z-10 overflow-hidden">
                           <div class="md:flex w-full">
                             <div class="w-full py-10 px-5 md:px-10">
                               <div class="flex justify-center gap-x-4 mb-4">
@@ -448,7 +445,6 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     p-2
                                     text-sm text-gray-700
                                     whitespace-nowrap
-                                    text-center
                                     justify-center
                                   "
                                 >
@@ -492,7 +488,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                       <ng-container
                                         *ngIf="
                                           data.latest_data >= '0' &&
-                                          data.latest_data < '7.5'
+                                          data.latest_data <= '7.50'
                                         "
                                       >
                                         <span
@@ -505,13 +501,13 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             rounded-lg
                                             bg-gray-300
                                           "
-                                          >Light (0 - 7.5mm/hr)</span
+                                          >Light (0 - 7.5 mm/hr)</span
                                         >
                                       </ng-container>
                                       <ng-container
                                         *ngIf="
                                           data.latest_data >= '7.51' &&
-                                          data.latest_data < '15'
+                                          data.latest_data <= '15'
                                         "
                                       >
                                         <span
@@ -524,7 +520,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             rounded-lg
                                             bg-low
                                           "
-                                          >Heavy (7.51 - 15mm/hr)</span
+                                          >Heavy (7.51 - 15 mm/hr)</span
                                         >
                                       </ng-container>
                                       <ng-container
@@ -543,7 +539,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             rounded-lg
                                             bg-medium
                                           "
-                                          >Intense (15 - 30mm/hr)</span
+                                          >Intense (15 - 30 mm/hr)</span
                                         >
                                       </ng-container>
                                       <ng-container
@@ -559,7 +555,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             rounded-lg
                                             bg-high
                                           "
-                                          >Torrential (> 30.1mm/hr)</span
+                                          >Torrential (> 30.1 mm/hr)</span
                                         >
                                       </ng-container>
                                       <!-- Flood -->
@@ -569,8 +565,8 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     >
                                       <ng-container
                                         *ngIf="
-                                          data.latest_data >= '0' &&
-                                          data.latest_data < '0.6'
+                                          +data.latest_data >= 0 &&
+                                          +data.latest_data <= 0.5
                                         "
                                       >
                                         <span
@@ -583,14 +579,14 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             bg-low
                                             rounded-lg
                                           "
-                                          >Low (0 - 0.5m)</span
+                                          >Low (0 - 0.5 m)</span
                                         >
                                       </ng-container>
 
                                       <ng-container
                                         *ngIf="
-                                          data.latest_data >= '0.6' &&
-                                          data.latest_data <= '1.5'
+                                          +data.latest_data > 0.5 &&
+                                          +data.latest_data <= 1.5
                                         "
                                       >
                                         <span
@@ -603,12 +599,12 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             bg-medium
                                             rounded-lg
                                           "
-                                          >Medium (0.6 - 1.5m)</span
+                                          >Medium (0.5 - 1.5 m)</span
                                         >
                                       </ng-container>
 
                                       <ng-container
-                                        *ngIf="data.latest_data > '1.6'"
+                                        *ngIf="+data.latest_data > 1.5"
                                       >
                                         <span
                                           class="
@@ -621,7 +617,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             rounded-lg
                                           "
                                         >
-                                          High (> 1.5m)
+                                          High (> 1.5 m)
                                         </span>
                                       </ng-container>
                                     </ng-container>
@@ -751,7 +747,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                Low(0 - 0.5m)
+                                Low (0 - 0.5 m)
                               </div>
                               <div
                                 class="
@@ -761,7 +757,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                Medium(0.6 - 1.5m)
+                                Medium (0.5 - 1.5 m)
                               </div>
                               <div
                                 class="
@@ -771,7 +767,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                High(1.6m+)
+                                High (> 1.5 m)
                               </div>
                             </div>
                           </div>
@@ -895,25 +891,25 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                       class="text-low"
                                       *ngIf="
                                         data.latest_data >= '0' &&
-                                        data.latest_data < '0.5'
+                                        data.latest_data <= '0.5'
                                       "
                                     >
-                                      Latest Data: {{ data.latest_data }}m
+                                      Latest Data: {{ data.latest_data }} m
                                     </div>
 
                                     <div
                                       class="text-medium"
                                       *ngIf="
-                                        data.latest_data >= '0.6' &&
+                                        data.latest_data > '0.5' &&
                                         data.latest_data <= '1.5'
                                       "
                                     >
-                                      Latest Data: {{ data.latest_data }}m
+                                      Latest Data: {{ data.latest_data }} m
                                     </div>
 
                                     <div
                                       class="text-high"
-                                      *ngIf="data.latest_data > '1.6'"
+                                      *ngIf="data.latest_data > '1.5'"
                                     >
                                       Latest Data: {{ data.latest_data }}m
                                     </div>
@@ -1079,7 +1075,6 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     p-2
                                     text-sm text-gray-700
                                     whitespace-nowrap
-                                    text-center
                                     justify-center
                                   "
                                 >
@@ -1116,8 +1111,8 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   <ng-template #showLevel>
                                     <ng-container
                                       *ngIf="
-                                        data.latest_data >= '0' &&
-                                        data.latest_data < '0.6'
+                                        +data.latest_data >= 0 &&
+                                        +data.latest_data <= 0.5
                                       "
                                     >
                                       <span
@@ -1125,20 +1120,19 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                           p-1.5
                                           text-xs
                                           font-medium
-                                          uppercase
                                           tracking-wider
                                           text-black
                                           bg-low
                                           rounded-lg
                                         "
-                                        >Low (0 - 0.5m)</span
+                                        >Low (0 - 0.5 m)</span
                                       >
                                     </ng-container>
 
                                     <ng-container
                                       *ngIf="
-                                        data.latest_data >= '0.6' &&
-                                        data.latest_data <= '1.5'
+                                        +data.latest_data > 0.5 &&
+                                        +data.latest_data <= 1.5
                                       "
                                     >
                                       <span
@@ -1146,32 +1140,30 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                           p-1.5
                                           text-xs
                                           font-medium
-                                          uppercase
                                           tracking-wider
                                           text-black
                                           bg-medium
                                           rounded-lg
                                         "
-                                        >Medium (0.6 - 1.5m)</span
+                                        >Medium (0.5 - 1.5 m)</span
                                       >
                                     </ng-container>
 
                                     <ng-container
-                                      *ngIf="data.latest_data > '1.6'"
+                                      *ngIf="+data.latest_data > 1.5"
                                     >
                                       <span
                                         class="
                                           p-1.5
                                           text-xs
                                           font-medium
-                                          uppercase
                                           tracking-wider
                                           text-black
                                           bg-high
                                           rounded-lg
                                         "
                                       >
-                                        High (1.6m +)
+                                        High (> 1.5 m)
                                       </span>
                                     </ng-container>
                                   </ng-template>
@@ -1306,7 +1298,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                Low(0 - 0.5m)
+                                Low (0 - 0.5 m)
                               </div>
                               <div
                                 class="
@@ -1316,7 +1308,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                Medium(0.6 - 1.5m)
+                                Medium (0.5 - 1.5 m)
                               </div>
                               <div
                                 class="
@@ -1326,7 +1318,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                High(1.6m+)
+                                High (> 1.5 m)
                               </div>
                             </div>
                           </div>
@@ -1450,26 +1442,26 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                       class="text-low"
                                       *ngIf="
                                         data.latest_data >= '0' &&
-                                        data.latest_data < '0.6'
+                                        data.latest_data <= '0.50'
                                       "
                                     >
-                                      Latest Data: {{ data.latest_data }}m
+                                      Latest Data: {{ data.latest_data }} m
                                     </div>
                                     <div
                                       class="text-medium"
                                       *ngIf="
-                                        data.latest_data >= '0.6' &&
-                                        data.latest_data <= '1.5'
+                                        data.latest_data > '0.50' &&
+                                        data.latest_data <= '1.50'
                                       "
                                     >
-                                      Latest Data: {{ data.latest_data }}m
+                                      Latest Data: {{ data.latest_data }} m
                                     </div>
 
                                     <div
                                       class="text-high"
-                                      *ngIf="data.latest_data > '1.5'"
+                                      *ngIf="data.latest_data > '1.50'"
                                     >
-                                      Latest Data: {{ data.latest_data }}m
+                                      Latest Data: {{ data.latest_data }} m
                                     </div>
                                   </div>
                                 </ng-template>
@@ -1626,7 +1618,6 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                     p-2
                                     text-sm text-gray-700
                                     whitespace-nowrap
-                                    text-center
                                     justify-center
                                   "
                                 >
@@ -1667,7 +1658,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                       <ng-container
                                         *ngIf="
                                           data.latest_data >= '0' &&
-                                          data.latest_data < '7.5'
+                                          data.latest_data <= '7.50'
                                         "
                                       >
                                         <span
@@ -1680,13 +1671,13 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             rounded-lg
                                             bg-gray-300
                                           "
-                                          >Light (0 - 7.5mm/hr)</span
+                                          >Light (0 - 7.5 mm/hr)</span
                                         >
                                       </ng-container>
                                       <ng-container
                                         *ngIf="
                                           data.latest_data >= '7.51' &&
-                                          data.latest_data < '15'
+                                          data.latest_data <= '15'
                                         "
                                       >
                                         <span
@@ -1699,7 +1690,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             rounded-lg
                                             bg-low
                                           "
-                                          >Heavy (7.51 - 15mm/hr)</span
+                                          >Heavy (7.51 - 15 mm/hr)</span
                                         >
                                       </ng-container>
                                       <ng-container
@@ -1718,7 +1709,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             rounded-lg
                                             bg-medium
                                           "
-                                          >Intense (15 - 30mm/hr)</span
+                                          >Intense (15 - 30 mm/hr)</span
                                         >
                                       </ng-container>
                                       <ng-container
@@ -1732,9 +1723,9 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                             tracking-wider
                                             text-black
                                             rounded-lg
-                                            bg-high
+                                            bg-hig
                                           "
-                                          >Torrential (> 30.1mm/hr)</span
+                                          >Torrential (> 30.1 mm/hr)</span
                                         >
                                       </ng-container>
                                     </ng-container>
@@ -1870,7 +1861,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                Low(0 - 0.5m)
+                                Low (0 - 0.5 m)
                               </div>
                               <div
                                 class="
@@ -1880,7 +1871,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                Medium(0.6 - 1.5m)
+                                Medium (0.5 - 1.5 m)
                               </div>
                               <div
                                 class="
@@ -1890,7 +1881,7 @@ <h1 class="font-bold text-m lg:text-2xl text-gray-900">
                                   font-bold
                                 "
                               >
-                                High(1.6m+)
+                                High (> 1.5 m)
                               </div>
                             </div>
                           </div>
diff --git a/src/app/shared/mocks/critical-facilities.ts b/src/app/shared/mocks/critical-facilities.ts
index 8e710fdd..e01e2620 100644
--- a/src/app/shared/mocks/critical-facilities.ts
+++ b/src/app/shared/mocks/critical-facilities.ts
@@ -41,7 +41,7 @@ export const getSymbolLayer = (
     'text-allow-overlap': true,
     'text-anchor': 'top',
     'text-font': ['DIN Pro Bold', 'Arial Unicode MS Bold'],
-    'text-field': ['get', 'name'],
+    'text-field': ['coalesce', ['get', 'name'], ['get', 'Name']],
     'text-offset': [0, 2],
     'text-size': 12,
     'text-letter-spacing': 0.08,