ASA - About This Data

web/src/features/fba/components/AboutDataPopover.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import Popover from '@mui/material/Popover'
+import Typography from '@mui/material/Typography'
+import InfoIcon from '@mui/icons-material/Info'
+import { theme } from 'app/theme'
+
+interface AboutDataProps {
+  advisoryThreshold: number
+}
+
+const AboutDataPopover = ({ advisoryThreshold }: AboutDataProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handlePopoverClose = () => {
+    setAnchorEl(null)
+  }
+
+  const open = Boolean(anchorEl)
+
+  return (
+    <div data-testid="about-data-popover">
+      <Typography
+        data-testid="about-data-trigger"
+        fontSize={'0.75rem'}
+        onClick={handlePopoverOpen}
+        sx={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
+      >
+        <InfoIcon sx={{ marginRight: theme.spacing(1), color: '#4681f4' }}></InfoIcon>
+        About this data
+      </Typography>
+      <Popover
+        id="about-data-popover"
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left'
+        }}
+        onClose={handlePopoverClose}
+        disableRestoreFocus
+        slotProps={{ paper: { sx: { maxWidth: 350, backgroundColor: '#EEEEEE' } } }}
+      >
+        <Typography
+          sx={{
+            padding: theme.spacing(1),
+            fontWeight: 'bold',
+            fontSize: '1rem'
+          }}
+        >
+          About This Data
+        </Typography>
+        <div
+          style={{ paddingBottom: theme.spacing(3), paddingRight: theme.spacing(2), fontSize: '0.9rem' }}
+          data-testid="about-data-content"
+        >
+          <ul style={{ margin: 0 }}>
+            <li>
+              A Fire Zone is under a Fire Behaviour Advisory if greater than {advisoryThreshold}% of the combustible
+              land (trees, grass, slash) is forecast to have a Head Fire Intensity between 4,000 and 10,000 kW/m.
+            </li>
+            <br />
+            <li>
+              A Fire Zone is under a Fire Behaviour Warning if greater than {advisoryThreshold}% of the combustible land
+              is forecast to have a Head Fire Intensity greater than 10,000 kW/m.
+            </li>
+            <br />
+            <li>
+              The fuel types chosen for the text bulletin are the three most common fuel types in a zone that meet or
+              exceed the Fire Behaviour Advisory threshold of 4,000 kW/m.
+            </li>
+          </ul>
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+export default AboutDataPopover

web/src/features/fba/components/aboutDataPopover.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import AboutDataPopover from 'features/fba/components/AboutDataPopover'
+
+const ADVISORY_THRESHOLD = 20
+
+describe('AboutDataPopover', () => {
+  it('should render the About Data Popover', () => {
+    const { getByTestId } = render(<AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD}></AboutDataPopover>)
+    const aboutData = getByTestId('about-data-popover')
+    expect(aboutData).toBeInTheDocument()
+  })
+  it('should open the popover when clicked', () => {
+    render(<AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD}></AboutDataPopover>)
+
+    fireEvent.click(screen.getByTestId('about-data-trigger'))
+
+    expect(screen.getByTestId('about-data-content')).toBeVisible()
+    expect(screen.getByTestId('about-data-content')).toHaveTextContent(`${ADVISORY_THRESHOLD}%`)
+  })
+  it('should close the popover when clicking outside of it', async () => {
+    render(<AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD}></AboutDataPopover>)
+    fireEvent.click(screen.getByTestId('about-data-trigger'))
+    expect(screen.getByTestId('about-data-content')).toBeVisible()
+
+    fireEvent.click(document.body)
+    await waitFor(() => {
+      expect(screen.queryByTestId('popover-title')).not.toBeInTheDocument()
+    })
+  })
+  it('should contain the advisory threshold as a percent', () => {
+    render(<AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD}></AboutDataPopover>)
+
+    fireEvent.click(screen.getByTestId('about-data-trigger'))
+
+    expect(screen.getByTestId('about-data-content')).toBeVisible()
+    expect(screen.getByTestId('about-data-content')).toHaveTextContent(`${ADVISORY_THRESHOLD}%`)
+  })
+})

web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx

@@ -1,4 +1,4 @@
-import { Box, FormControl, FormControlLabel, Grid, styled } from '@mui/material'
+import { Box, FormControl, Grid, styled } from '@mui/material'
 import { GeneralHeader, ErrorBoundary } from 'components'
 import React, { useEffect, useState } from 'react'
 import FBAMap from 'features/fba/components/map/FBAMap'
@@ -20,7 +20,6 @@ import { FireCenter, FireShape, FireZoneTPIStats } from 'api/fbaAPI'
 import { ASA_DOC_TITLE, FIRE_BEHAVIOUR_ADVISORY_NAME, PST_UTC_OFFSET } from 'utils/constants'
 import WPSDatePicker from 'components/WPSDatePicker'
 import { AppDispatch } from 'app/store'
-import AdvisoryThresholdSlider from 'features/fba/components/map/AdvisoryThresholdSlider'
 import ActualForecastControl from 'features/fba/components/ActualForecastControl'
 import { fetchSFMSRunDates } from 'features/fba/slices/runDatesSlice'
 import { isNull, isUndefined } from 'lodash'
@@ -34,6 +33,9 @@ import InfoPanel from 'features/fba/components/infoPanel/InfoPanel'
 import FireZoneUnitSummary from 'features/fba/components/infoPanel/FireZoneUnitSummary'
 import { fetchProvincialSummary } from 'features/fba/slices/provincialSummarySlice'
 import AdvisoryReport from 'features/fba/components/infoPanel/AdvisoryReport'
+import AboutDataPopover from 'features/fba/components/AboutDataPopover'
+
+const ADVISORY_THRESHOLD = 20
 
 export enum RunType {
   FORECAST = 'FORECAST',
@@ -53,7 +55,6 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
 
   const [fireCenter, setFireCenter] = useState<FireCenter | undefined>(undefined)
 
-  const [advisoryThreshold, setAdvisoryThreshold] = useState(20)
   const [selectedFireShape, setSelectedFireShape] = useState<FireShape | undefined>(undefined)
   const [zoomSource, setZoomSource] = useState<'fireCenter' | 'fireShape' | undefined>('fireCenter')
   const [dateOfInterest, setDateOfInterest] = useState(
@@ -133,7 +134,9 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
       dispatch(
         fetchfireZoneElevationInfo(selectedFireShape.fire_shape_id, runType, doiISODate, mostRecentRunDate.toString())
       )
-      dispatch(fetchfireZoneTPIStats(selectedFireShape.fire_shape_id, runType, doiISODate, mostRecentRunDate.toString()))
+      dispatch(
+        fetchfireZoneTPIStats(selectedFireShape.fire_shape_id, runType, doiISODate, mostRecentRunDate.toString())
+      )
     }
   }, [mostRecentRunDate, selectedFireShape]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -163,7 +166,6 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
     if (fireZoneTPIStats?.fire_zone_id === selectedFireShapeId) {
       setSelectedFireZoneTPIStats(fireZoneTPIStats)
     }
-
   }, [fireZoneTPIStats])
 
   useEffect(() => {
@@ -189,7 +191,7 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
         productName={FIRE_BEHAVIOUR_ADVISORY_NAME}
       />
       <Box sx={{ paddingTop: '0.5em' }}>
-        <Grid container spacing={1}>
+        <Grid container spacing={1} alignItems={'center'}>
           <Grid item>
             <StyledFormControl>
               <WPSDatePicker date={dateOfInterest} updateDate={updateDate} />
@@ -211,20 +213,8 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
               />
             </FireCentreFormControl>
           </Grid>
-          <Grid item>
-            <StyledFormControl>
-              <FormControlLabel
-                label="
-                Percentage of combustible land threshold"
-                labelPlacement="top"
-                control={
-                  <AdvisoryThresholdSlider
-                    advisoryThreshold={advisoryThreshold}
-                    setAdvisoryThreshold={setAdvisoryThreshold}
-                  />
-                }
-              />
-            </StyledFormControl>
+          <Grid item sx={{ marginLeft: 'auto', paddingRight: theme.spacing(2) }}>
+            <AboutDataPopover advisoryThreshold={ADVISORY_THRESHOLD} />
           </Grid>
         </Grid>
       </Box>
@@ -233,13 +223,13 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
           <AdvisoryReport
             issueDate={mostRecentRunDate !== null ? DateTime.fromISO(mostRecentRunDate) : null}
             forDate={dateOfInterest}
-            advisoryThreshold={advisoryThreshold}
+            advisoryThreshold={ADVISORY_THRESHOLD}
             selectedFireCenter={fireCenter}
           />
           <FireZoneUnitSummary
             fuelTypeInfo={hfiThresholdsFuelTypes}
-            selectedFireZoneUnit={selectedFireShape} 
-            fireZoneTPIStats={selectedFireZoneTPIStats} 
+            selectedFireZoneUnit={selectedFireShape}
+            fireZoneTPIStats={selectedFireZoneTPIStats}
           />
         </InfoPanel>
         <Grid sx={{ display: 'flex', flex: 1 }} item>
@@ -248,7 +238,7 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
             runType={runType}
             selectedFireShape={selectedFireShape}
             selectedFireCenter={fireCenter}
-            advisoryThreshold={advisoryThreshold}
+            advisoryThreshold={ADVISORY_THRESHOLD}
             setSelectedFireShape={setSelectedFireShape}
             fireShapeAreas={fireShapeAreas}
             snowDate={snowDate}