Renaming zones to shapes

api/app/routers/fba.py

@@ -44,7 +44,7 @@ async def get_all_fire_centers(_=Depends(authentication_required)):
 async def get_shapes(run_type: RunType, run_datetime: datetime, for_date: date, _=Depends(authentication_required)):
     """ Return area of each zone unit shape, and percentage of area of zone unit shape with high hfi. """
     async with get_async_read_session_scope() as session:
-        zones = []
+        shapes = []
 
         rows = await get_hfi_area(session,
                                   RunTypeEnum(run_type.value),
@@ -55,13 +55,13 @@ async def get_shapes(run_type: RunType, run_datetime: datetime, for_date: date,
         for row in rows:
             combustible_area = row.combustible_area  # type: ignore
             hfi_area = row.hfi_area  # type: ignore
-            zones.append(FireShapeArea(
+            shapes.append(FireShapeArea(
                 fire_shape_id=row.source_identifier,  # type: ignore
                 threshold=row.threshold,  # type: ignore
                 combustible_area=row.combustible_area,  # type: ignore
                 elevated_hfi_area=row.hfi_area,  # type: ignore
                 elevated_hfi_percentage=hfi_area / combustible_area * 100))
-        return FireShapeAreaListResponse(zones=zones)
+        return FireShapeAreaListResponse(shapes=shapes)
 
 
 @router.get('/hfi-fuels/{run_type}/{for_date}/{run_datetime}/{zone_id}',

api/app/schemas/fba.py

@@ -35,7 +35,7 @@ class FireShapeArea(BaseModel):
 
 class FireShapeAreaListResponse(BaseModel):
     """ Response for all planning areas, in a list """
-    zones: List[FireShapeArea]
+    shapes: List[FireShapeArea]
 
 
 class FireShapeHighHfiAreas(BaseModel):

web/src/api/fbaAPI.ts

@@ -56,8 +56,8 @@ export interface FireZoneElevationInfoResponse {
   hfi_elevation_info: ElevationInfoByThreshold[]
 }
 
-export interface ZoneAreaListResponse {
-  zones: FireShapeArea[]
+export interface FireShapeAreaListResponse {
+  shapes: FireShapeArea[]
 }
 
 export interface HfiThresholdFuelTypeArea {
@@ -85,11 +85,11 @@ export async function getFBAFireCenters(): Promise<FBAResponse> {
   return data
 }
 
-export async function getFireZoneAreas(
+export async function getFireShapeAreas(
   run_type: RunType,
   run_datetime: string,
   for_date: string
-): Promise<ZoneAreaListResponse> {
+): Promise<FireShapeAreaListResponse> {
   const url = `/fba/fire-shape-areas/${run_type.toLowerCase()}/${encodeURI(run_datetime)}/${for_date}`
   const { data } = await axios.get(url, {})
   return data

web/src/app/rootReducer.ts

@@ -11,7 +11,7 @@ import hfiStationsReducer from 'features/hfiCalculator/slices/stationsSlice'
 import hfiReadyReducer, { HFIReadyState } from 'features/hfiCalculator/slices/hfiReadySlice'
 import fbaCalculatorSlice from 'features/fbaCalculator/slices/fbaCalculatorSlice'
 import fireCentersSlice from 'commonSlices/fireCentersSlice'
-import fireZoneAreasSlice from 'features/fba/slices/fireZoneAreasSlice'
+import fireShapeAreasSlice from 'features/fba/slices/fireZoneAreasSlice'
 import valueAtCoordinateSlice from 'features/fba/slices/valueAtCoordinateSlice'
 import runDatesSlice from 'features/fba/slices/runDatesSlice'
 import hfiFuelTypesSlice from 'features/fba/slices/hfiFuelTypesSlice'
@@ -34,7 +34,7 @@ const rootReducer = combineReducers({
   hfiReady: hfiReadyReducer,
   fbaCalculatorResults: fbaCalculatorSlice,
   fireCenters: fireCentersSlice,
-  fireZoneAreas: fireZoneAreasSlice,
+  fireShapeAreas: fireShapeAreasSlice,
   runDates: runDatesSlice,
   valueAtCoordinate: valueAtCoordinateSlice,
   hfiFuelTypes: hfiFuelTypesSlice,
@@ -63,7 +63,7 @@ export const selectToken = (state: RootState) => state.authentication.token
 export const selectFireBehaviourCalcResult = (state: RootState) => state.fbaCalculatorResults
 export const selectHFIStations = (state: RootState) => state.hfiStations
 export const selectFireCenters = (state: RootState) => state.fireCenters
-export const selectFireZoneAreas = (state: RootState) => state.fireZoneAreas
+export const selectFireShapeAreas = (state: RootState) => state.fireShapeAreas
 export const selectRunDates = (state: RootState) => state.runDates
 export const selectValueAtCoordinate = (state: RootState) => state.valueAtCoordinate
 export const selectHFIFuelTypes = (state: RootState) => state.hfiFuelTypes

web/src/features/fba/components/map/FBAMap.tsx

@@ -19,7 +19,7 @@ import { extentsMap } from 'features/fba/fireCentreExtents'
 import {
   fireCentreStyler,
   fireCentreLabelStyler,
-  fireZoneStyler,
+  fireShapeStyler,
   fireShapeLabelStyler,
   stationStyler,
   hfiStyler
@@ -40,10 +40,10 @@ const zoom = 6
 export interface FBAMapProps {
   testId?: string
   selectedFireCenter: FireCenter | undefined
-  selectedFireZone: FireShape | undefined
+  selectedFireShape: FireShape | undefined
   forDate: DateTime
-  setSelectedFireZone: React.Dispatch<React.SetStateAction<FireShape | undefined>>
-  fireZoneAreas: FireShapeArea[]
+  setSelectedFireShape: React.Dispatch<React.SetStateAction<FireShape | undefined>>
+  fireShapeAreas: FireShapeArea[]
   runType: RunType
   advisoryThreshold: number
   showSummaryPanel: boolean
@@ -62,7 +62,7 @@ const removeLayerByName = (map: ol.Map, layerName: string) => {
 
 const FBAMap = (props: FBAMapProps) => {
   const { stations } = useSelector(selectFireWeatherStations)
-  const [showZoneStatus, setShowZoneStatus] = useState(true)
+  const [showShapeStatus, setShowShapeStatus] = useState(true)
   const [showHFI, setShowHFI] = React.useState(false)
   const [map, setMap] = useState<ol.Map | null>(null)
   const mapRef = useRef<HTMLDivElement | null>(null)
@@ -71,13 +71,13 @@ const FBAMap = (props: FBAMapProps) => {
   const fireCentreVectorSource = new olpmtiles.PMTilesVectorSource({
     url: `${PMTILES_BUCKET}fireCentres.pmtiles`
   })
-  const fireZoneVectorSource = new olpmtiles.PMTilesVectorSource({
+  const fireShapeVectorSource = new olpmtiles.PMTilesVectorSource({
     url: `${PMTILES_BUCKET}fireZoneUnits.pmtiles`
   })
   const fireCentreLabelVectorSource = new olpmtiles.PMTilesVectorSource({
     url: `${PMTILES_BUCKET}fireCentreLabels.pmtiles`
   })
-  const fireZoneLabelVectorSource = new olpmtiles.PMTilesVectorSource({
+  const fireShapeLabelVectorSource = new olpmtiles.PMTilesVectorSource({
     url: `${PMTILES_BUCKET}fireZoneUnitLabels.pmtiles`
   })
 
@@ -88,9 +88,9 @@ const FBAMap = (props: FBAMapProps) => {
         .getArray()
         .find(l => l.getProperties()?.name === layerName)
 
-      if (layerName === 'fireZoneVector') {
-        fireZoneVTL.setStyle(
-          fireZoneStyler(cloneDeep(props.fireZoneAreas), props.advisoryThreshold, props.selectedFireZone, isVisible)
+      if (layerName === 'fireShapeVector') {
+        fireShapeVTL.setStyle(
+          fireShapeStyler(cloneDeep(props.fireShapeAreas), props.advisoryThreshold, props.selectedFireShape, isVisible)
         )
       } else if (layer) {
         layer.setVisible(isVisible)
@@ -105,17 +105,17 @@ const FBAMap = (props: FBAMapProps) => {
       zIndex: 50
     })
   )
-  const [fireZoneVTL] = useState(
+  const [fireShapeVTL] = useState(
     new VectorTileLayer({
-      source: fireZoneVectorSource,
-      style: fireZoneStyler(
-        cloneDeep(props.fireZoneAreas),
+      source: fireShapeVectorSource,
+      style: fireShapeStyler(
+        cloneDeep(props.fireShapeAreas),
         props.advisoryThreshold,
-        props.selectedFireZone,
-        showZoneStatus
+        props.selectedFireShape,
+        showShapeStatus
       ),
       zIndex: 49,
-      properties: { name: 'fireZoneVector' }
+      properties: { name: 'fireShapeVector' }
     })
   )
   // Seperate layer for polygons and for labels, to avoid duplicate labels.
@@ -128,11 +128,11 @@ const FBAMap = (props: FBAMapProps) => {
     })
   )
   // Seperate layer for polygons and for labels, to avoid duplicate labels.
-  const [fireZoneLabelVTL] = useState(
+  const [fireShapeLabelVTL] = useState(
     new VectorTileLayer({
       declutter: true,
-      source: fireZoneLabelVectorSource,
-      style: fireShapeLabelStyler(props.selectedFireZone),
+      source: fireShapeLabelVectorSource,
+      style: fireShapeLabelStyler(props.selectedFireShape),
       zIndex: 99,
       minZoom: 6
     })
@@ -141,9 +141,9 @@ const FBAMap = (props: FBAMapProps) => {
   useEffect(() => {
     if (map) {
       map.on('click', event => {
-        fireZoneVTL.getFeatures(event.pixel).then(features => {
+        fireShapeVTL.getFeatures(event.pixel).then(features => {
           if (!features.length) {
-            props.setSelectedFireZone(undefined)
+            props.setSelectedFireShape(undefined)
             return
           }
           const feature = features[0]
@@ -161,7 +161,7 @@ const FBAMap = (props: FBAMapProps) => {
             area_sqm: feature.getProperties().Shape_Area
           }
           props.setShowSummaryPanel(true)
-          props.setSelectedFireZone(fireZone)
+          props.setSelectedFireShape(fireZone)
         })
       })
     }
@@ -171,7 +171,7 @@ const FBAMap = (props: FBAMapProps) => {
     if (!map) return
 
     if (!props.showSummaryPanel) {
-      props.setSelectedFireZone(undefined)
+      props.setSelectedFireShape(undefined)
     }
   }, [props.showSummaryPanel]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -193,14 +193,19 @@ const FBAMap = (props: FBAMapProps) => {
   useEffect(() => {
     if (!map) return
 
-    fireZoneVTL.setStyle(
-      fireZoneStyler(cloneDeep(props.fireZoneAreas), props.advisoryThreshold, props.selectedFireZone, showZoneStatus)
+    fireShapeVTL.setStyle(
+      fireShapeStyler(
+        cloneDeep(props.fireShapeAreas),
+        props.advisoryThreshold,
+        props.selectedFireShape,
+        showShapeStatus
+      )
     )
-    fireZoneLabelVTL.setStyle(fireShapeLabelStyler(props.selectedFireZone))
-    fireZoneVTL.changed()
-    fireZoneLabelVTL.changed()
+    fireShapeLabelVTL.setStyle(fireShapeLabelStyler(props.selectedFireShape))
+    fireShapeVTL.changed()
+    fireShapeLabelVTL.changed()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.selectedFireZone, props.fireZoneAreas, props.advisoryThreshold])
+  }, [props.selectedFireShape, props.fireShapeAreas, props.advisoryThreshold])
 
   useEffect(() => {
     if (!map) return
@@ -246,9 +251,9 @@ const FBAMap = (props: FBAMapProps) => {
           source: baseMapSource
         }),
         fireCentreVTL,
-        fireZoneVTL,
+        fireShapeVTL,
         fireCentreLabelVTL,
-        fireZoneLabelVTL
+        fireShapeLabelVTL
       ],
       overlays: [],
       controls: defaultControls().extend([new FullScreen()])
@@ -299,8 +304,8 @@ const FBAMap = (props: FBAMapProps) => {
           <Box sx={{ position: 'absolute', zIndex: '1', bottom: '0.5rem' }}>
             <Legend
               onToggleLayer={handleToggleLayer}
-              showZoneStatus={showZoneStatus}
-              setShowZoneStatus={setShowZoneStatus}
+              showZoneStatus={showShapeStatus}
+              setShowShapeStatus={setShowShapeStatus}
               showHFI={showHFI}
               setShowHFI={setShowHFI}
             />

web/src/features/fba/components/map/Legend.tsx

@@ -76,12 +76,12 @@ const LegendItem: React.FC<LegendItemProps> = ({ label, checked, onChange, subIt
 interface LegendProps {
   onToggleLayer: (layerName: string, isVisible: boolean) => void
   showZoneStatus: boolean
-  setShowZoneStatus: React.Dispatch<React.SetStateAction<boolean>>
+  setShowShapeStatus: React.Dispatch<React.SetStateAction<boolean>>
   showHFI: boolean
   setShowHFI: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-const Legend = ({ onToggleLayer, showZoneStatus, setShowZoneStatus, showHFI, setShowHFI }: LegendProps) => {
+const Legend = ({ onToggleLayer, showZoneStatus, setShowShapeStatus, showHFI, setShowHFI }: LegendProps) => {
   const handleLayerChange = (
     layerName: string,
     isVisible: boolean,
@@ -108,7 +108,7 @@ const Legend = ({ onToggleLayer, showZoneStatus, setShowZoneStatus, showHFI, set
       <LegendItem
         label="Zone Status"
         checked={showZoneStatus}
-        onChange={() => handleLayerChange('fireZoneVector', showZoneStatus, setShowZoneStatus)}
+        onChange={() => handleLayerChange('fireShapeVector', showZoneStatus, setShowShapeStatus)}
         subItems={zoneStatusSubItems}
       />
       <LegendItem

web/src/features/fba/components/map/fbaMap.test.tsx

@@ -26,10 +26,10 @@ describe('FBAMap', () => {
           forDate={DateTime.fromISO('2016-05-25')}
           advisoryThreshold={0}
           selectedFireCenter={undefined}
-          selectedFireZone={undefined}
-          fireZoneAreas={[]}
+          selectedFireShape={undefined}
+          fireShapeAreas={[]}
           runType={RunType.FORECAST}
-          setSelectedFireZone={function (): void {
+          setSelectedFireShape={function (): void {
             throw new Error('Function not implemented.')
           }}
           showSummaryPanel={true}

web/src/features/fba/components/map/featureStylers.ts

@@ -40,16 +40,16 @@ export const fireCentreStyler = (): Style => {
   })
 }
 
-export const fireZoneStyler = (
-  fireZoneAreas: FireShapeArea[],
+export const fireShapeStyler = (
+  fireShapeAreas: FireShapeArea[],
   advisoryThreshold: number,
-  selectedFireZone: FireShape | undefined,
+  selectedFireShape: FireShape | undefined,
   showZoneStatus: boolean
 ) => {
   const a = (feature: RenderFeature | ol.Feature<Geometry>): Style => {
     const fire_shape_id = feature.getProperties().OBJECTID
-    const fireZoneAreaByThreshold = fireZoneAreas.filter(f => f.fire_shape_id === fire_shape_id)
-    const selected = !!(selectedFireZone?.fire_shape_id && selectedFireZone.fire_shape_id === fire_shape_id)
+    const fireShapes = fireShapeAreas.filter(f => f.fire_shape_id === fire_shape_id)
+    const selected = !!(selectedFireShape?.fire_shape_id && selectedFireShape.fire_shape_id === fire_shape_id)
     let strokeValue = 'black'
     if (selected) {
       strokeValue = 'green'
@@ -60,22 +60,20 @@ export const fireZoneStyler = (
         color: strokeValue,
         width: selected ? 8 : 1
       }),
-      fill: showZoneStatus
-        ? getAdvisoryColors(advisoryThreshold, fireZoneAreaByThreshold)
-        : new Fill({ color: EMPTY_FILL })
+      fill: showZoneStatus ? getAdvisoryColors(advisoryThreshold, fireShapes) : new Fill({ color: EMPTY_FILL })
     })
   }
   return a
 }
 
-export const getAdvisoryColors = (advisoryThreshold: number, fireZoneArea?: FireShapeArea[]) => {
+export const getAdvisoryColors = (advisoryThreshold: number, fireShapeArea?: FireShapeArea[]) => {
   let fill = new Fill({ color: EMPTY_FILL })
-  if (isUndefined(fireZoneArea) || fireZoneArea.length === 0) {
+  if (isUndefined(fireShapeArea) || fireShapeArea.length === 0) {
     return fill
   }
 
-  const advisoryThresholdArea = fireZoneArea.find(area => area.threshold == 1)
-  const warningThresholdArea = fireZoneArea.find(area => area.threshold == 2)
+  const advisoryThresholdArea = fireShapeArea.find(area => area.threshold == 1)
+  const warningThresholdArea = fireShapeArea.find(area => area.threshold == 2)
   const advisoryPercentage = advisoryThresholdArea?.elevated_hfi_percentage ?? 0
   const warningPercentage = warningThresholdArea?.elevated_hfi_percentage ?? 0
 

web/src/features/fba/components/map/legend.test.tsx

@@ -11,7 +11,7 @@ describe('Legend', () => {
     const { getByTestId } = render(
       <Legend
         onToggleLayer={onToggleLayer}
-        setShowZoneStatus={setShowZoneStatus}
+        setShowShapeStatus={setShowZoneStatus}
         setShowHFI={setShowHFI}
         showHFI={false}
         showZoneStatus={true}
@@ -38,7 +38,7 @@ describe('Legend', () => {
     const { getByTestId } = render(
       <Legend
         onToggleLayer={onToggleLayer}
-        setShowZoneStatus={setShowZoneStatus}
+        setShowShapeStatus={setShowZoneStatus}
         setShowHFI={setShowHFI}
         showHFI={false}
         showZoneStatus={true}