diff --git a/web/package.json b/web/package.json index a8ea626c9..ae9c1af5a 100644 --- a/web/package.json +++ b/web/package.json @@ -52,7 +52,7 @@ "match-sorter": "^6.3.1", "nyc": "^17.0.0", "ol": "10.0.0", - "ol-pmtiles": "^0.5.0", + "ol-pmtiles": "^1.0.1", "prettier": "^3.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -111,4 +111,4 @@ ] }, "packageManager": "yarn@4.3.1" -} \ No newline at end of file +} diff --git a/web/src/api/fbaAPI.ts b/web/src/api/fbaAPI.ts index 174db6dd3..191714980 100644 --- a/web/src/api/fbaAPI.ts +++ b/web/src/api/fbaAPI.ts @@ -1,7 +1,11 @@ import axios, { raster } from 'api/axios' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' import { DateTime } from 'luxon' +export enum RunType { + FORECAST = 'FORECAST', + ACTUAL = 'ACTUAL' +} + export interface FireCenterStation { code: number name: string @@ -30,7 +34,6 @@ export interface AdvisoryCriticalHours { end_time?: number } - export interface FireZoneFuelStats { fuel_type: FuelType threshold: HfiThreshold @@ -149,7 +152,6 @@ export async function getAllRunDates(run_type: RunType, for_date: string): Promi return data } - export async function getFireCentreHFIStats( run_type: RunType, for_date: string, diff --git a/web/src/features/fba/components/ActualForecastControl.tsx b/web/src/features/fba/components/ActualForecastControl.tsx index 0f039dc17..66a6c7319 100644 --- a/web/src/features/fba/components/ActualForecastControl.tsx +++ b/web/src/features/fba/components/ActualForecastControl.tsx @@ -1,8 +1,8 @@ import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material' import React from 'react' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' import { isNull } from 'lodash' import { theme } from 'app/theme' +import { RunType } from '@/api/fbaAPI' export interface ActualForecastControlProps { runType: RunType diff --git a/web/src/features/fba/components/actualForecastControl.test.tsx b/web/src/features/fba/components/actualForecastControl.test.tsx index 2b48e5b4b..b853cb1ce 100644 --- a/web/src/features/fba/components/actualForecastControl.test.tsx +++ b/web/src/features/fba/components/actualForecastControl.test.tsx @@ -1,8 +1,8 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' import ActualForecastControl from './ActualForecastControl' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' import { vi } from 'vitest' +import { RunType } from '@/api/fbaAPI' describe('ActualForecastControl', () => { const mockSetRunType = vi.fn() diff --git a/web/src/features/fba/components/map/FBAMap.tsx b/web/src/features/fba/components/map/FBAMap.tsx index 1685238f7..15991a362 100644 --- a/web/src/features/fba/components/map/FBAMap.tsx +++ b/web/src/features/fba/components/map/FBAMap.tsx @@ -1,13 +1,11 @@ -import * as ol from 'ol' +import { PMTilesVectorSource } from 'ol-pmtiles' +import { Map, View } from 'ol' import 'ol/ol.css' -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import * as olpmtiles from 'ol-pmtiles' import { defaults as defaultControls, FullScreen } from 'ol/control' import { fromLonLat } from 'ol/proj' import { boundingExtent } from 'ol/extent' import ScaleLine from 'ol/control/ScaleLine' -import OLVectorLayer from 'ol/layer/Vector' +import VectorLayer from 'ol/layer/Vector' import VectorTileLayer from 'ol/layer/VectorTile' import VectorSource from 'ol/source/Vector' import GeoJSON from 'ol/format/GeoJSON' @@ -16,8 +14,8 @@ import React, { useEffect, useRef, useState } from 'react' import { ErrorBoundary } from 'components' import { selectFireWeatherStations, selectRunDates } from 'app/rootReducer' import { source as baseMapSource } from 'features/fireWeather/components/maps/constants' -import Tile from 'ol/layer/Tile' -import { FireCenter, FireShape, FireShapeArea } from 'api/fbaAPI' +import TileLayer from 'ol/layer/Tile' +import { FireCenter, FireShape, FireShapeArea, RunType } from 'api/fbaAPI' import { extentsMap } from 'features/fba/fireCentreExtents' import { fireCentreStyler, @@ -32,14 +30,13 @@ import { import { BC_EXTENT, CENTER_OF_BC } from 'utils/constants' import { DateTime } from 'luxon' import { PMTILES_BUCKET } from 'utils/env' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' import { buildPMTilesURL } from 'features/fba/pmtilesBuilder' import { isUndefined, cloneDeep, isNull } from 'lodash' import { Box } from '@mui/material' import Legend from 'features/fba/components/map/Legend' import ScalebarContainer from 'features/fba/components/map/ScaleBarContainer' import { fireZoneExtentsMap } from 'features/fba/fireZoneUnitExtents' -export const MapContext = React.createContext(null) +export const MapContext = React.createContext(null) const bcExtent = boundingExtent(BC_EXTENT.map(coord => fromLonLat(coord))) @@ -56,7 +53,7 @@ export interface FBAMapProps { setZoomSource: React.Dispatch> } -const removeLayerByName = (map: ol.Map, layerName: string) => { +const removeLayerByName = (map: Map, layerName: string) => { const layer = map .getLayers() .getArray() @@ -70,21 +67,21 @@ const FBAMap = (props: FBAMapProps) => { const { stations } = useSelector(selectFireWeatherStations) const [showShapeStatus, setShowShapeStatus] = useState(true) const [showHFI, setShowHFI] = useState(false) - const [map, setMap] = useState(null) + const [map, setMap] = useState(null) const mapRef = useRef(null) as React.MutableRefObject const scaleRef = useRef(null) as React.MutableRefObject const { mostRecentRunDate } = useSelector(selectRunDates) - const fireCentreVectorSource = new olpmtiles.PMTilesVectorSource({ + const fireCentreVectorSource = new PMTilesVectorSource({ url: `${PMTILES_BUCKET}fireCentres.pmtiles` }) - const fireShapeVectorSource = new olpmtiles.PMTilesVectorSource({ + const fireShapeVectorSource = new PMTilesVectorSource({ url: `${PMTILES_BUCKET}fireZoneUnits.pmtiles` }) - const fireCentreLabelVectorSource = new olpmtiles.PMTilesVectorSource({ + const fireCentreLabelVectorSource = new PMTilesVectorSource({ url: `${PMTILES_BUCKET}fireCentreLabels.pmtiles` }) - const fireShapeLabelVectorSource = new olpmtiles.PMTilesVectorSource({ + const fireShapeLabelVectorSource = new PMTilesVectorSource({ url: `${PMTILES_BUCKET}fireZoneUnitLabels.pmtiles` }) @@ -235,7 +232,7 @@ const FBAMap = (props: FBAMapProps) => { // The runDate for forecasts is the mostRecentRunDate. For Actuals, our API expects the runDate to be // the same as the forDate. const runDate = props.runType === RunType.FORECAST ? DateTime.fromISO(mostRecentRunDate) : props.forDate - const hfiSource = new olpmtiles.PMTilesVectorSource({ + const hfiSource = new PMTilesVectorSource({ url: buildPMTilesURL(props.forDate, props.runType, runDate) }) @@ -261,13 +258,13 @@ const FBAMap = (props: FBAMapProps) => { // Create the map with the options above and set the target // To the ref above so that it is rendered in that div - const mapObject = new ol.Map({ - view: new ol.View({ + const mapObject = new Map({ + view: new View({ zoom: 5, center: fromLonLat(CENTER_OF_BC) }), layers: [ - new Tile({ + new TileLayer({ source: baseMapSource }), fireCentreVTL, @@ -307,7 +304,7 @@ const FBAMap = (props: FBAMapProps) => { } ) }) - const stationsLayer = new OLVectorLayer({ + const stationsLayer = new VectorLayer({ source: stationsSource, minZoom: 6, style: stationStyler, diff --git a/web/src/features/fba/components/map/fbaMap.test.tsx b/web/src/features/fba/components/map/fbaMap.test.tsx index 604fc4865..90777afd3 100644 --- a/web/src/features/fba/components/map/fbaMap.test.tsx +++ b/web/src/features/fba/components/map/fbaMap.test.tsx @@ -1,7 +1,7 @@ +import { RunType } from '@/api/fbaAPI' import { render } from '@testing-library/react' import store from 'app/store' import FBAMap from 'features/fba/components/map/FBAMap' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' import { DateTime } from 'luxon' import { Provider } from 'react-redux' @@ -32,7 +32,7 @@ describe('FBAMap', () => { setSelectedFireShape={function (): void { throw new Error('Function not implemented.') }} - zoomSource={undefined} + zoomSource={'fireCenter'} setZoomSource={function (): void { throw new Error('Function not implemented.') }} diff --git a/web/src/features/fba/cqlBuilder.ts b/web/src/features/fba/cqlBuilder.ts index f3da1d198..81ba2c128 100644 --- a/web/src/features/fba/cqlBuilder.ts +++ b/web/src/features/fba/cqlBuilder.ts @@ -1,4 +1,4 @@ -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' +import { RunType } from '@/api/fbaAPI' import { DateTime } from 'luxon' /** diff --git a/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx b/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx index be47edb95..e81dcf506 100644 --- a/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx +++ b/web/src/features/fba/pages/FireBehaviourAdvisoryPage.tsx @@ -10,7 +10,7 @@ import { fetchFireCenters } from 'commonSlices/fireCentersSlice' import { theme } from 'app/theme' import { fetchWxStations } from 'features/stations/slices/stationsSlice' import { getStations, StationSource } from 'api/stationAPI' -import { FireCenter, FireShape } from 'api/fbaAPI' +import { FireCenter, FireShape, RunType } 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' @@ -29,11 +29,6 @@ import { fetchFireCentreHFIFuelStats } from 'features/fba/slices/fireCentreHFIFu const ADVISORY_THRESHOLD = 20 -export enum RunType { - FORECAST = 'FORECAST', - ACTUAL = 'ACTUAL' -} - export const FireCentreFormControl = styled(FormControl)({ margin: theme.spacing(1), minWidth: 280 diff --git a/web/src/features/fba/pmtilesBuilder.ts b/web/src/features/fba/pmtilesBuilder.ts index 17968728d..1adabd071 100644 --- a/web/src/features/fba/pmtilesBuilder.ts +++ b/web/src/features/fba/pmtilesBuilder.ts @@ -1,4 +1,4 @@ -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' +import { RunType } from '@/api/fbaAPI' import { DateTime } from 'luxon' import { PMTILES_BUCKET } from 'utils/env' diff --git a/web/src/features/fba/slices/fireCentreHFIFuelStatsSlice.ts b/web/src/features/fba/slices/fireCentreHFIFuelStatsSlice.ts index 51274f750..f02cb2ee2 100644 --- a/web/src/features/fba/slices/fireCentreHFIFuelStatsSlice.ts +++ b/web/src/features/fba/slices/fireCentreHFIFuelStatsSlice.ts @@ -2,8 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { AppThunk } from 'app/store' import { logError } from 'utils/error' -import { FireCentreHFIStats, getFireCentreHFIStats } from 'api/fbaAPI' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' +import { FireCentreHFIStats, getFireCentreHFIStats, RunType } from 'api/fbaAPI' export interface FireCentreHFIFuelStatsState { error: string | null diff --git a/web/src/features/fba/slices/fireCentreTPIStatsSlice.ts b/web/src/features/fba/slices/fireCentreTPIStatsSlice.ts index ee0b4adf9..3f28f3c93 100644 --- a/web/src/features/fba/slices/fireCentreTPIStatsSlice.ts +++ b/web/src/features/fba/slices/fireCentreTPIStatsSlice.ts @@ -2,8 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { AppThunk } from 'app/store' import { logError } from 'utils/error' -import { FireZoneTPIStats, getFireCentreTPIStats } from 'api/fbaAPI' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' +import { FireZoneTPIStats, getFireCentreTPIStats, RunType } from 'api/fbaAPI' export interface CentreTPIStatsState { error: string | null diff --git a/web/src/features/fba/slices/fireZoneAreasSlice.ts b/web/src/features/fba/slices/fireZoneAreasSlice.ts index 84e9d7ce7..27044ada2 100644 --- a/web/src/features/fba/slices/fireZoneAreasSlice.ts +++ b/web/src/features/fba/slices/fireZoneAreasSlice.ts @@ -2,8 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { AppThunk } from 'app/store' import { logError } from 'utils/error' -import { FireShapeArea, FireShapeAreaListResponse, getFireShapeAreas } from 'api/fbaAPI' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' +import { FireShapeArea, FireShapeAreaListResponse, getFireShapeAreas, RunType } from 'api/fbaAPI' import { isNull, isUndefined } from 'lodash' export interface FireZoneAreasState { diff --git a/web/src/features/fba/slices/fireZoneElevationInfoSlice.ts b/web/src/features/fba/slices/fireZoneElevationInfoSlice.ts index bbde6e077..4ac10bab3 100644 --- a/web/src/features/fba/slices/fireZoneElevationInfoSlice.ts +++ b/web/src/features/fba/slices/fireZoneElevationInfoSlice.ts @@ -2,8 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { AppThunk } from 'app/store' import { logError } from 'utils/error' -import { ElevationInfoByThreshold, FireZoneElevationInfoResponse, getFireZoneElevationInfo } from 'api/fbaAPI' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' +import { ElevationInfoByThreshold, FireZoneElevationInfoResponse, getFireZoneElevationInfo, RunType } from 'api/fbaAPI' export interface ZoneElevationInfoState { loading: boolean diff --git a/web/src/features/fba/slices/provincialSummarySlice.ts b/web/src/features/fba/slices/provincialSummarySlice.ts index 66590b7b3..f2da19214 100644 --- a/web/src/features/fba/slices/provincialSummarySlice.ts +++ b/web/src/features/fba/slices/provincialSummarySlice.ts @@ -2,8 +2,7 @@ import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit' import { AppThunk } from 'app/store' import { logError } from 'utils/error' import { groupBy, isNull, isUndefined } from 'lodash' -import { FireShapeAreaDetail, getProvincialSummary, ProvincialSummaryResponse } from 'api/fbaAPI' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' +import { FireShapeAreaDetail, getProvincialSummary, ProvincialSummaryResponse, RunType } from 'api/fbaAPI' import { RootState } from 'app/rootReducer' export interface ProvincialSummaryState { diff --git a/web/src/features/fba/slices/runDatesSlice.ts b/web/src/features/fba/slices/runDatesSlice.ts index 6f462048b..51fcf65f5 100644 --- a/web/src/features/fba/slices/runDatesSlice.ts +++ b/web/src/features/fba/slices/runDatesSlice.ts @@ -2,9 +2,8 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { AppThunk } from 'app/store' import { logError } from 'utils/error' -import { getAllRunDates, getMostRecentRunDate } from 'api/fbaAPI' +import { getAllRunDates, getMostRecentRunDate, RunType } from 'api/fbaAPI' import { DateTime } from 'luxon' -import { RunType } from 'features/fba/pages/FireBehaviourAdvisoryPage' export interface RunDateState { loading: boolean diff --git a/web/yarn.lock b/web/yarn.lock index 5ad44cb38..c59c532ec 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -6984,14 +6984,14 @@ __metadata: languageName: node linkType: hard -"ol-pmtiles@npm:^0.5.0": - version: 0.5.0 - resolution: "ol-pmtiles@npm:0.5.0" +"ol-pmtiles@npm:^1.0.1": + version: 1.0.1 + resolution: "ol-pmtiles@npm:1.0.1" dependencies: - pmtiles: "npm:^3.0.4" + pmtiles: "npm:^3.0.7" peerDependencies: ol: ">=9.0.0" - checksum: 10c0/f7b23ecd3a5f5f0fabe908c24ac99038b8d5e82b9bd221177255c77f99aaa880f6c86034be642f01da7ab6c1987298bd3a6d0098eae402c20d364f63cd3b123c + checksum: 10c0/8eabdc9b0e29ecf45447261aa9d3c2273aa1a63ffe401138878623fade23496b3803f74f9566a2e89e070faee3fc330a878fd98eef11a7019fb4eef4060cce9f languageName: node linkType: hard @@ -7320,7 +7320,7 @@ __metadata: languageName: node linkType: hard -"pmtiles@npm:^3.0.4": +"pmtiles@npm:^3.0.7": version: 3.0.7 resolution: "pmtiles@npm:3.0.7" dependencies: @@ -9551,7 +9551,7 @@ __metadata: match-sorter: "npm:^6.3.1" nyc: "npm:^17.0.0" ol: "npm:10.0.0" - ol-pmtiles: "npm:^0.5.0" + ol-pmtiles: "npm:^1.0.1" prettier: "npm:^3.3.3" react: "npm:^18.3.1" react-dom: "npm:^18.3.1"