-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- closes SFMS: Create New UI #4124 - Adds new PSU Insights page - Contains simple map with 2km fuel grid pmtiles - Adds Tool Card for the new page (only in dev for now)
- Loading branch information
Showing
11 changed files
with
205 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { BC_EXTENT, CENTER_OF_BC } from '@/utils/constants' | ||
| import { Map, View } from 'ol' | ||
| import { PMTilesVectorSource } from 'ol-pmtiles' | ||
| import { defaults as defaultControls } from 'ol/control' | ||
| import { boundingExtent } from 'ol/extent' | ||
| import 'ol/ol.css' | ||
| import { fromLonLat } from 'ol/proj' | ||
| import { PMTILES_BUCKET } from 'utils/env' | ||
|
|
||
| import React, { useEffect, useRef, useState } from 'react' | ||
|
|
||
| import { styleFuelGrid } from '@/features/psuInsights/components/map/psuFeatureStylers' | ||
| import { Box } from '@mui/material' | ||
| import { ErrorBoundary } from '@sentry/react' | ||
| import { source as baseMapSource } from 'features/fireWeather/components/maps/constants' | ||
| import TileLayer from 'ol/layer/Tile' | ||
| import VectorTileLayer from 'ol/layer/VectorTile' | ||
|
|
||
| const MapContext = React.createContext<Map | null>(null) | ||
|
|
||
| const bcExtent = boundingExtent(BC_EXTENT.map(coord => fromLonLat(coord))) | ||
|
|
||
| const PSUMap = () => { | ||
| const [map, setMap] = useState<Map | null>(null) | ||
| const mapRef = useRef<HTMLDivElement | null>(null) as React.MutableRefObject<HTMLElement> | ||
|
|
||
| const fuelGridVectorSource = new PMTilesVectorSource({ | ||
| url: `${PMTILES_BUCKET}fuel/fbp2024.pmtiles` | ||
| }) | ||
|
|
||
| const [fuelGridVTL] = useState( | ||
| new VectorTileLayer({ | ||
| source: fuelGridVectorSource, | ||
| style: styleFuelGrid(), | ||
| zIndex: 51, | ||
| opacity: 0.6 | ||
| }) | ||
| ) | ||
|
|
||
| useEffect(() => { | ||
| if (!mapRef.current) return | ||
|
|
||
| const mapObject = new Map({ | ||
| target: mapRef.current, | ||
| layers: [new TileLayer({ source: baseMapSource }), fuelGridVTL], | ||
| controls: defaultControls(), | ||
| view: new View({ | ||
| zoom: 5, | ||
| center: fromLonLat(CENTER_OF_BC) | ||
| }) | ||
| }) | ||
| mapObject.getView().fit(bcExtent, { padding: [50, 50, 50, 50] }) | ||
| setMap(mapObject) | ||
|
|
||
| return () => { | ||
| mapObject.setTarget('') | ||
| } | ||
| }, []) | ||
|
|
||
| return ( | ||
| <ErrorBoundary> | ||
| <MapContext.Provider value={map}> | ||
| <Box | ||
| ref={mapRef} | ||
| data-testid={'psu-map'} | ||
| sx={{ | ||
| width: '100%', | ||
| height: '100%' | ||
| }} | ||
| ></Box> | ||
| </MapContext.Provider> | ||
| </ErrorBoundary> | ||
| ) | ||
| } | ||
|
|
||
| export default PSUMap |
14 changes: 14 additions & 0 deletions
14
web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { getColorForRasterValue } from '@/features/psuInsights/components/map/psuFeatureStylers' | ||
|
|
||
| describe('getColorForRasterValue', () => { | ||
| it('should get the correct colour for the specified raster value', () => { | ||
| const rasterValue = 1 | ||
| const colour = getColorForRasterValue(rasterValue) | ||
| expect(colour).toBe('rgb(209, 255, 115)') | ||
| }) | ||
| it('should return a transparent colour if no colour is found', () => { | ||
| const rasterValue = 1000 | ||
| const colour = getColorForRasterValue(rasterValue) | ||
| expect(colour).toBe('rgba(0, 0, 0, 0)') | ||
| }) | ||
| }) |
40 changes: 40 additions & 0 deletions
40
web/src/features/psuInsights/components/map/psuFeatureStylers.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { colorByFuelTypeCode } from '@/features/fba/components/viz/color' | ||
| import * as ol from 'ol' | ||
| import Geometry from 'ol/geom/Geometry' | ||
| import RenderFeature from 'ol/render/Feature' | ||
| import Fill from 'ol/style/Fill' | ||
| import Style from 'ol/style/Style' | ||
|
|
||
| const rasterValueToFuelTypeCode = new Map([ | ||
| [1, 'C-1'], | ||
| [2, 'C-2'], | ||
| [3, 'C-3'], | ||
| [4, 'C-4'], | ||
| [5, 'C-5'], | ||
| [6, 'C-6'], | ||
| [7, 'C-7'], | ||
| [8, 'D-1/D-2'], | ||
| [9, 'S-1'], | ||
| [10, 'S-2'], | ||
| [11, 'S-3'], | ||
| [12, 'O-1a/O-1b'], | ||
| [13, 'M-3'], | ||
| [14, 'M-1/M-2'] | ||
| ]) | ||
|
|
||
| export const getColorForRasterValue = (rasterValue: number): string => { | ||
| const fuelTypeCode = rasterValueToFuelTypeCode.get(rasterValue) | ||
| return fuelTypeCode ? colorByFuelTypeCode.get(fuelTypeCode) : 'rgba(0, 0, 0, 0)' | ||
| } | ||
|
|
||
| export const styleFuelGrid = () => { | ||
| const style = (feature: RenderFeature | ol.Feature<Geometry>) => { | ||
| const fuelTypeInt = feature.getProperties().fuel | ||
| const fillColour = getColorForRasterValue(fuelTypeInt) | ||
|
|
||
| return new Style({ | ||
| fill: new Fill({ color: fillColour }) | ||
| }) | ||
| } | ||
| return style | ||
| } |
22 changes: 22 additions & 0 deletions
22
web/src/features/psuInsights/components/map/psuMap.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import PSUMap from '@/features/psuInsights/components/map/PSUMap' | ||
| import { render } from '@testing-library/react' | ||
|
|
||
| describe('PSUMap', () => { | ||
| it('should render the map', () => { | ||
| class ResizeObserver { | ||
| observe() { | ||
| // mock no-op | ||
| } | ||
| unobserve() { | ||
| // mock no-op | ||
| } | ||
| disconnect() { | ||
| // mock no-op | ||
| } | ||
| } | ||
| window.ResizeObserver = ResizeObserver | ||
| const { getByTestId } = render(<PSUMap />) | ||
| const map = getByTestId('psu-map') | ||
| expect(map).toBeVisible() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { GeneralHeader } from '@/components/GeneralHeader' | ||
| import Footer from '@/features/landingPage/components/Footer' | ||
| import PSUMap from '@/features/psuInsights/components/map/PSUMap' | ||
| import { PSU_INSIGHTS_NAME } from '@/utils/constants' | ||
| import Box from '@mui/material/Box' | ||
|
|
||
| export const PSUInsightsPage = () => { | ||
| return ( | ||
| <Box sx={{ height: '100vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}> | ||
| <GeneralHeader isBeta={true} spacing={1} title={PSU_INSIGHTS_NAME} productName={PSU_INSIGHTS_NAME} /> | ||
| <Box sx={{ flex: 1, position: 'relative' }}> | ||
| <PSUMap /> | ||
| </Box> | ||
| <Footer /> | ||
| </Box> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters