Fixes NaN classified TPI percentages because we were dividing by zero.

web/src/features/fba/components/infoPanel/FireZoneUnitSummary.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { Grid, Typography } from '@mui/material'
 import { isNull, isUndefined } from 'lodash'
 import { FireShape, FireZoneTPIStats, FireZoneThresholdFuelTypeArea } from 'api/fbaAPI'
@@ -19,18 +19,6 @@ const FireZoneUnitSummary = ({
   selectedFireZoneUnit
 }: FireZoneUnitSummaryProps) => {
   const theme = useTheme()
-  const [midSlope, setMidSlope] = useState<number>(0)
-  const [upperSlope, setUpperSlope] = useState<number>(0)
-  const [valleyBottom, setValleyBottom] = useState<number>(0)
-
-  useEffect(() => {
-    if (!isNull(fireZoneTPIStats)) {
-      const total = fireZoneTPIStats.mid_slope + fireZoneTPIStats.upper_slope + fireZoneTPIStats.valley_bottom
-      setMidSlope(Math.round(fireZoneTPIStats.mid_slope/total*100))
-      setUpperSlope(Math.round(fireZoneTPIStats.upper_slope/total*100))
-      setValleyBottom(Math.round(fireZoneTPIStats.valley_bottom/total*100))
-    }
-  }, [fireZoneTPIStats])
 
   if (isUndefined(selectedFireZoneUnit)) {
     return <div data-testid="fire-zone-unit-summary-empty"></div>
@@ -55,9 +43,9 @@ const FireZoneUnitSummary = ({
               </Typography>
             ) : (
             <ElevationStatus
-              upper={upperSlope}
-              mid={midSlope}
-              bottom={valleyBottom}
+              upper={fireZoneTPIStats.upper_slope}
+              mid={fireZoneTPIStats.mid_slope}
+              bottom={fireZoneTPIStats.valley_bottom}
             ></ElevationStatus>)}
           </Grid>
         </Grid>

web/src/features/fba/components/viz/ElevationStatus.tsx

@@ -21,6 +21,10 @@ interface ElevationStatusProps {
 
 const ElevationStatus = ({ bottom, mid, upper }: ElevationStatusProps) => {
   const theme = useTheme()
+  const total = mid + upper + bottom
+  const mid_percent = mid === 0 ? 0 : Math.round(mid/total*100)
+  const upper_percent = upper  === 0 ? 0 : Math.round(upper/total*100)
+  const bottom_percent = bottom === 0 ? 0 : Math.round(bottom/total*100)
   return (
     <Box sx={{ paddingBottom: theme.spacing(2), paddingTop: theme.spacing(2) }} data-testid="elevation-status">
       <Grid container sx={{ minHeight: theme.spacing(19) }} xs={12}>
@@ -59,9 +63,9 @@ const ElevationStatus = ({ bottom, mid, upper }: ElevationStatusProps) => {
               Proportion of Advisory Area:
             </Typography>
           </Grid>
-          <ElevationFlag percent={upper} testId='upper-slope' />
-          <ElevationFlag percent={mid} testId='mid-slope' />
-          <ElevationFlag percent={bottom} testId='valley-bottom' />
+          <ElevationFlag percent={upper_percent} testId='upper-slope' />
+          <ElevationFlag percent={mid_percent} testId='mid-slope' />
+          <ElevationFlag percent={bottom_percent} testId='valley-bottom' />
         </Grid>
       </Grid>
     </Box>

web/src/features/fba/components/viz/elevationStatus.test.tsx

@@ -17,10 +17,28 @@ describe('ElevationStatus', () => {
 
     const midSlope = getByTestId('mid-slope')
     expect(midSlope).toBeInTheDocument()
-    expect(midSlope).toHaveTextContent("1%")
+    expect(midSlope).toHaveTextContent("33%")
 
     const upperSlope = getByTestId('upper-slope')
     expect(upperSlope).toBeInTheDocument()
-    expect(upperSlope).toHaveTextContent("2%")
+    expect(upperSlope).toHaveTextContent("67%")
+  })
+
+  it('should render all zero classifications', () => {
+    const { getByTestId } = render(
+        <ElevationStatus bottom={0} mid={0} upper={0} />
+    )
+
+    const valleyBottom = getByTestId('valley-bottom')
+    expect(valleyBottom).toBeInTheDocument()
+    expect(valleyBottom).toHaveTextContent("0%")
+
+    const midSlope = getByTestId('mid-slope')
+    expect(midSlope).toBeInTheDocument()
+    expect(midSlope).toHaveTextContent("0%")
+
+    const upperSlope = getByTestId('upper-slope')
+    expect(upperSlope).toBeInTheDocument()
+    expect(upperSlope).toHaveTextContent("0%")
   })
 })