Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ASA - About This Data #3890

Merged
merged 10 commits into from
Sep 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions web/src/app/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@ export const DARK_GREY = '#A7A7A7'
export const LIGHT_GREY = '#DADADA'
export const MEDIUM_GREY = '#B5B5B5'

export const INFO_PANEL_HEADER_BACKGROUND = '#e4e4e5'
export const INFO_PANEL_CONTENT_BACKGROUND = '#f0f0f0'
export const INFO_PANEL_HEADER_BACKGROUND = '#BFBFBF'
export const INFO_PANEL_CONTENT_BACKGROUND = '#EEEEEE'
export const TRANSPARENT_COLOUR = '#0000'

interface WeatherParams {
Expand Down
82 changes: 82 additions & 0 deletions web/src/features/fba/components/AboutDataPopover.tsx
Original file line number Diff line number Diff line change
@@ -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 { INFO_PANEL_CONTENT_BACKGROUND, 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: '#5686E1' }}></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: INFO_PANEL_CONTENT_BACKGROUND } } }}
>
<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>
dgboss marked this conversation as resolved.
Show resolved Hide resolved
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
39 changes: 39 additions & 0 deletions web/src/features/fba/components/aboutDataPopover.test.tsx
Original file line number Diff line number Diff line change
@@ -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}%`)
})
})
45 changes: 0 additions & 45 deletions web/src/features/fba/components/map/AdvisoryThresholdSlider.tsx

This file was deleted.

38 changes: 14 additions & 24 deletions web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -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',
Expand All @@ -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(
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -163,7 +166,6 @@ const FireBehaviourAdvisoryPage: React.FunctionComponent = () => {
if (fireZoneTPIStats?.fire_zone_id === selectedFireShapeId) {
setSelectedFireZoneTPIStats(fireZoneTPIStats)
}

}, [fireZoneTPIStats])

useEffect(() => {
Expand All @@ -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} />
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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}
Expand Down
Loading