From 4cf11f4bad00c836ac88407150f287496f229431 Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Mon, 2 Dec 2024 12:12:43 -0800
Subject: [PATCH 01/13] init

---
 web/src/app/Routes.tsx                        | 12 ++-
 web/src/features/fba/components/viz/color.ts  |  2 +-
 .../psuInsights/components/map/PSUMap.tsx     | 75 +++++++++++++++++++
 .../components/map/psuFeatureStyler.ts        | 51 +++++++++++++
 .../psuInsights/pages/PSUInsightsPage.tsx     | 15 ++++
 web/src/utils/constants.ts                    |  3 +
 6 files changed, 156 insertions(+), 2 deletions(-)
 create mode 100644 web/src/features/psuInsights/components/map/PSUMap.tsx
 create mode 100644 web/src/features/psuInsights/components/map/psuFeatureStyler.ts
 create mode 100644 web/src/features/psuInsights/pages/PSUInsightsPage.tsx

diff --git a/web/src/app/Routes.tsx b/web/src/app/Routes.tsx
index b2ea10cda..efa931e8d 100644
--- a/web/src/app/Routes.tsx
+++ b/web/src/app/Routes.tsx
@@ -16,7 +16,8 @@ import {
   FIRE_BEHAVIOR_CALC_ROUTE,
   FIRE_BEHAVIOUR_ADVISORY_ROUTE,
   LANDING_PAGE_ROUTE,
-  MORE_CAST_2_ROUTE
+  MORE_CAST_2_ROUTE,
+  PSU_INSIGHTS_ROUTE
 } from 'utils/constants'
 import { NoMatchPage } from 'features/NoMatchPage'
 const FireBehaviourCalculator = lazy(() => import('features/fbaCalculator/pages/FireBehaviourCalculatorPage'))
@@ -24,6 +25,7 @@ const FireBehaviourAdvisoryPage = lazy(() => import('features/fba/pages/FireBeha
 const LandingPage = lazy(() => import('features/landingPage/pages/LandingPage'))
 const MoreCast2Page = lazy(() => import('features/moreCast2/pages/MoreCast2Page'))
 import LoadingBackdrop from 'features/hfiCalculator/components/LoadingBackdrop'
+import { PSUInsightsPage } from '@/features/psuInsights/pages/PSUInsightsPage'
 
 const shouldShowDisclaimer = HIDE_DISCLAIMER === 'false' || HIDE_DISCLAIMER === undefined
 
@@ -89,6 +91,14 @@ const WPSRoutes: React.FunctionComponent = () => {
               </AuthWrapper>
             }
           />
+          <Route
+            path={PSU_INSIGHTS_ROUTE}
+            element={
+              <AuthWrapper>
+                <PSUInsightsPage />
+              </AuthWrapper>
+            }
+          />
           <Route path="*" element={<NoMatchPage />} />
         </Routes>
       </Suspense>
diff --git a/web/src/features/fba/components/viz/color.ts b/web/src/features/fba/components/viz/color.ts
index e20ffdf32..35634dd4e 100644
--- a/web/src/features/fba/components/viz/color.ts
+++ b/web/src/features/fba/components/viz/color.ts
@@ -1,5 +1,5 @@
 // A Map of fuel type codes to the colour typically used in BCWS
-const colorByFuelTypeCode = new Map()
+export const colorByFuelTypeCode = new Map()
 colorByFuelTypeCode.set('C-1', 'rgb(209, 255, 115)')
 colorByFuelTypeCode.set('C-2', 'rgb(34, 102, 51)')
 colorByFuelTypeCode.set('C-3', 'rgb(131, 199, 149)')
diff --git a/web/src/features/psuInsights/components/map/PSUMap.tsx b/web/src/features/psuInsights/components/map/PSUMap.tsx
new file mode 100644
index 000000000..1d75e5f8d
--- /dev/null
+++ b/web/src/features/psuInsights/components/map/PSUMap.tsx
@@ -0,0 +1,75 @@
+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/psuFeatureStyler'
+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
+    })
+  )
+
+  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
diff --git a/web/src/features/psuInsights/components/map/psuFeatureStyler.ts b/web/src/features/psuInsights/components/map/psuFeatureStyler.ts
new file mode 100644
index 000000000..f1a1242c9
--- /dev/null
+++ b/web/src/features/psuInsights/components/map/psuFeatureStyler.ts
@@ -0,0 +1,51 @@
+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']
+])
+
+const getColorForRasterValue = (rasterValue: number) => {
+  const fuelTypeCode = rasterValueToFuelTypeCode.get(rasterValue)
+  return fuelTypeCode ? colorByFuelTypeCode.get(fuelTypeCode) : null
+}
+
+export const setTransparency = (color: string, alpha: number): string => {
+  if (!color) return 'rgba(0, 0, 0, 0)'
+  const rgbMatch = color.match(/\d+/g)
+  if (!rgbMatch || rgbMatch.length < 3) {
+    throw new Error(`Invalid color format: ${color}`)
+  }
+  const [r, g, b] = rgbMatch.map(Number)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+export const styleFuelGrid = () => {
+  const style = (feature: RenderFeature | ol.Feature<Geometry>) => {
+    const fuelTypeInt = feature.getProperties().fuel
+    const fillColour = getColorForRasterValue(fuelTypeInt)
+    const fillColourTransparency = setTransparency(fillColour, 0.7)
+
+    return new Style({
+      fill: new Fill({ color: fillColourTransparency })
+    })
+  }
+  return style
+}
diff --git a/web/src/features/psuInsights/pages/PSUInsightsPage.tsx b/web/src/features/psuInsights/pages/PSUInsightsPage.tsx
new file mode 100644
index 000000000..2c9c1e353
--- /dev/null
+++ b/web/src/features/psuInsights/pages/PSUInsightsPage.tsx
@@ -0,0 +1,15 @@
+import { GeneralHeader } from '@/components/GeneralHeader'
+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>
+    </Box>
+  )
+}
diff --git a/web/src/utils/constants.ts b/web/src/utils/constants.ts
index 7205c3d99..2aaf38bd0 100644
--- a/web/src/utils/constants.ts
+++ b/web/src/utils/constants.ts
@@ -24,6 +24,7 @@ export const FBP_GO_ROUTE = 'https://psu.nrs.gov.bc.ca/fbp-go'
 export const FIRE_BEHAVIOR_CALC_ROUTE = '/fire-behaviour-calculator'
 export const FIRE_BEHAVIOUR_ADVISORY_ROUTE = '/auto-spatial-advisory'
 export const MORE_CAST_2_ROUTE = '/morecast-2'
+export const PSU_INSIGHTS_ROUTE = '/insights'
 export const LANDING_PAGE_ROUTE = '/'
 
 // ExpandableContainer widths
@@ -45,6 +46,7 @@ export const FIRE_BEHAVIOUR_CALC_NAME = 'FireBat'
 export const HFI_CALC_NAME = 'HFI Calculator'
 export const MORE_CAST_NAME = 'MoreCast'
 export const PERCENTILE_CALC_NAME = 'Percentile Calculator'
+export const PSU_INSIGHTS_NAME = 'PSU Insights'
 
 // UI constants
 export const HEADER_HEIGHT = 56
@@ -58,6 +60,7 @@ export const FIREBAT_DOC_TITLE = 'FireBat | BCWS PSU'
 export const HFI_CALC_DOC_TITLE = 'HFI Calculator | BCWS PSU'
 export const MORE_CAST_DOC_TITLE = 'MoreCast | BCWS PSU'
 export const PERCENTILE_CALC_DOC_TITLE = 'Percentile Calculator | BCWS PSU'
+export const PSU_INSIGHTS_DOC_TITLE = 'PSU Insights | BCWS PSU'
 
 export enum FireCentres {
   CARIBOO_FC = 'Cariboo Fire Centre',

From 520f1343c9c9690552d11452780a0e1badeb444a Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Mon, 2 Dec 2024 13:30:07 -0800
Subject: [PATCH 02/13] map test

---
 .../components/map/psuMap.test.tsx            | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 web/src/features/psuInsights/components/map/psuMap.test.tsx

diff --git a/web/src/features/psuInsights/components/map/psuMap.test.tsx b/web/src/features/psuInsights/components/map/psuMap.test.tsx
new file mode 100644
index 000000000..c13f63aa9
--- /dev/null
+++ b/web/src/features/psuInsights/components/map/psuMap.test.tsx
@@ -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()
+  })
+})

From a45bf1adcb2d0fd1b4d519b74dc8609abd0b2cee Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Mon, 2 Dec 2024 13:40:17 -0800
Subject: [PATCH 03/13] add footer

---
 web/src/features/landingPage/components/Footer.tsx     | 2 +-
 web/src/features/psuInsights/pages/PSUInsightsPage.tsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/features/landingPage/components/Footer.tsx b/web/src/features/landingPage/components/Footer.tsx
index 19512bee1..aae8bb582 100644
--- a/web/src/features/landingPage/components/Footer.tsx
+++ b/web/src/features/landingPage/components/Footer.tsx
@@ -10,7 +10,7 @@ const Root = styled('div', {
   name: `${PREFIX}-links`
 })({
   backgroundColor: theme.palette.primary.main,
-  minHeight: '80px'
+  minHeight: '30px'
 })
 
 const FooterLinks = styled('div', {
diff --git a/web/src/features/psuInsights/pages/PSUInsightsPage.tsx b/web/src/features/psuInsights/pages/PSUInsightsPage.tsx
index 2c9c1e353..45d02f1e0 100644
--- a/web/src/features/psuInsights/pages/PSUInsightsPage.tsx
+++ b/web/src/features/psuInsights/pages/PSUInsightsPage.tsx
@@ -1,4 +1,5 @@
 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'
@@ -10,6 +11,7 @@ export const PSUInsightsPage = () => {
       <Box sx={{ flex: 1, position: 'relative' }}>
         <PSUMap />
       </Box>
+      <Footer />
     </Box>
   )
 }

From aca15690504e5350bef5913a1827815b4555154c Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Mon, 2 Dec 2024 14:10:30 -0800
Subject: [PATCH 04/13] tests

---
 .../psuInsights/components/map/PSUMap.tsx     |  2 +-
 .../components/map/psuFeatureStylers.test.ts  | 20 +++++++++++++++++++
 ...uFeatureStyler.ts => psuFeatureStylers.ts} | 12 ++++++++---
 3 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
 rename web/src/features/psuInsights/components/map/{psuFeatureStyler.ts => psuFeatureStylers.ts} (73%)

diff --git a/web/src/features/psuInsights/components/map/PSUMap.tsx b/web/src/features/psuInsights/components/map/PSUMap.tsx
index 1d75e5f8d..583e917bc 100644
--- a/web/src/features/psuInsights/components/map/PSUMap.tsx
+++ b/web/src/features/psuInsights/components/map/PSUMap.tsx
@@ -9,7 +9,7 @@ import { PMTILES_BUCKET } from 'utils/env'
 
 import React, { useEffect, useRef, useState } from 'react'
 
-import { styleFuelGrid } from '@/features/psuInsights/components/map/psuFeatureStyler'
+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'
diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
new file mode 100644
index 000000000..b8c782833
--- /dev/null
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
@@ -0,0 +1,20 @@
+import { setTransparency } from '@/features/psuInsights/components/map/psuFeatureStylers'
+
+describe('setTransparency', () => {
+  it('should return an rgba value from rgb with correct alpha value', () => {
+    const rgb = 'rgb(1, 1, 1)'
+    const rgba = setTransparency(rgb, 0.5)
+    expect(rgba).toBe('rgba(1, 1, 1, 0.5)')
+  })
+
+  it('should return an updated rgba value from an rgba input', () => {
+    const rgb = 'rgb(1, 1, 1, 1)'
+    const rgba = setTransparency(rgb, 0.5)
+    expect(rgba).toBe('rgba(1, 1, 1, 0.5)')
+  })
+
+  it('should throw an error if fewer than 3 RGB values are provided', () => {
+    const incompleteColor = 'rgb(1, 2)'
+    expect(() => setTransparency(incompleteColor, 0.5)).toThrow(Error)
+  })
+})
diff --git a/web/src/features/psuInsights/components/map/psuFeatureStyler.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
similarity index 73%
rename from web/src/features/psuInsights/components/map/psuFeatureStyler.ts
rename to web/src/features/psuInsights/components/map/psuFeatureStylers.ts
index f1a1242c9..4ad66125a 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStyler.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
@@ -22,11 +22,17 @@ const rasterValueToFuelTypeCode = new Map([
   [14, 'M-1/M-2']
 ])
 
-const getColorForRasterValue = (rasterValue: number) => {
+const getColorForRasterValue = (rasterValue: number): string => {
   const fuelTypeCode = rasterValueToFuelTypeCode.get(rasterValue)
   return fuelTypeCode ? colorByFuelTypeCode.get(fuelTypeCode) : null
 }
 
+/**
+ * Takes rgb values as input, and assigns a transparency (alpha) value to them to make them rgba values
+ * @param color rgb or rgba colour string ex. rgb(1, 2, 3) or rgba(1, 2, 3, 0.2)
+ * @param alpha number value between 0 and 1
+ * @returns rgba value with alpha set ex. rgba(1, 2, 3, 0.5)
+ */
 export const setTransparency = (color: string, alpha: number): string => {
   if (!color) return 'rgba(0, 0, 0, 0)'
   const rgbMatch = color.match(/\d+/g)
@@ -41,10 +47,10 @@ export const styleFuelGrid = () => {
   const style = (feature: RenderFeature | ol.Feature<Geometry>) => {
     const fuelTypeInt = feature.getProperties().fuel
     const fillColour = getColorForRasterValue(fuelTypeInt)
-    const fillColourTransparency = setTransparency(fillColour, 0.7)
+    const fillRGBA = setTransparency(fillColour, 0.7)
 
     return new Style({
-      fill: new Fill({ color: fillColourTransparency })
+      fill: new Fill({ color: fillRGBA })
     })
   }
   return style

From 278d919f1b829e8d21bfbfbe1baf04002515c9d6 Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Tue, 3 Dec 2024 08:57:26 -0800
Subject: [PATCH 05/13] dev toolcard

---
 web/src/features/landingPage/toolInfo.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/src/features/landingPage/toolInfo.tsx b/web/src/features/landingPage/toolInfo.tsx
index 9c4d3884c..769752dde 100644
--- a/web/src/features/landingPage/toolInfo.tsx
+++ b/web/src/features/landingPage/toolInfo.tsx
@@ -4,6 +4,7 @@ import CalculateOutlinedIcon from '@mui/icons-material/CalculateOutlined'
 import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
 import PercentIcon from '@mui/icons-material/Percent'
 import PublicIcon from '@mui/icons-material/Public'
+import InsightsIcon from '@mui/icons-material/Insights'
 import WhatshotOutlinedIcon from '@mui/icons-material/WhatshotOutlined'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
@@ -22,7 +23,9 @@ import {
   PERCENTILE_CALC_NAME,
   PERCENTILE_CALC_ROUTE,
   MORE_CAST_NAME,
-  MORECAST_ROUTE
+  MORECAST_ROUTE,
+  PSU_INSIGHTS_NAME,
+  PSU_INSIGHTS_ROUTE
 } from 'utils/constants'
 
 const ICON_FONT_SIZE = 'large'
@@ -132,11 +135,26 @@ export const fbpGoInfo: ToolInfo = {
   isBeta: false
 }
 
+export const psuInsightsInfo: ToolInfo = {
+  name: PSU_INSIGHTS_NAME,
+  route: PSU_INSIGHTS_ROUTE,
+  description: (
+    <Typography>
+      A visualization tool providing an interactive map-based interface to analyze and understand critical
+      wildfire-related data. The tool offers a comprehensive view of key datasets, allowing users to visualize, explore,
+      and extract valuable information.
+    </Typography>
+  ),
+  icon: <InsightsIcon color="primary" fontSize={ICON_FONT_SIZE} />,
+  isBeta: true
+}
+
 // The order of items in this array determines the order of items as they appear in the landing page
 // side bar and order of CardTravelSharp.
 export const toolInfos = [
   moreCastInfo,
   fireBehaviourAdvisoryInfo,
+  ...(import.meta.env.MODE === 'development' ? [psuInsightsInfo] : []),
   cHainesInfo,
   fireBehaviourCalcInfo,
   hfiCalcInfo,

From b40815678f154e286f1c1ed6b74b6ee28f5fba9e Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Tue, 3 Dec 2024 09:38:29 -0800
Subject: [PATCH 06/13] transparency adjust

---
 .../features/psuInsights/components/map/psuFeatureStylers.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
index 4ad66125a..fc9bef301 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
@@ -47,7 +47,7 @@ export const styleFuelGrid = () => {
   const style = (feature: RenderFeature | ol.Feature<Geometry>) => {
     const fuelTypeInt = feature.getProperties().fuel
     const fillColour = getColorForRasterValue(fuelTypeInt)
-    const fillRGBA = setTransparency(fillColour, 0.7)
+    const fillRGBA = setTransparency(fillColour, 0.6)
 
     return new Style({
       fill: new Fill({ color: fillRGBA })

From dbc6675547688214a5859f56b20374663bbbb213 Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Tue, 3 Dec 2024 10:21:43 -0800
Subject: [PATCH 07/13] docstring update

---
 .../features/psuInsights/components/map/psuFeatureStylers.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
index fc9bef301..b38fa2e43 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
@@ -28,7 +28,7 @@ const getColorForRasterValue = (rasterValue: number): string => {
 }
 
 /**
- * Takes rgb values as input, and assigns a transparency (alpha) value to them to make them rgba values
+ * Takes rgb or rgba values as input, sets or updates the alpha value, and returns a new rgba value
  * @param color rgb or rgba colour string ex. rgb(1, 2, 3) or rgba(1, 2, 3, 0.2)
  * @param alpha number value between 0 and 1
  * @returns rgba value with alpha set ex. rgba(1, 2, 3, 0.5)

From 06d49261a3bfbd806f10d1ffe559125c168c1d10 Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Tue, 3 Dec 2024 10:39:46 -0800
Subject: [PATCH 08/13] Trigger Build


From e076ab643face40a3040094fdd62988a3913c735 Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Tue, 3 Dec 2024 10:59:45 -0800
Subject: [PATCH 09/13] add test link

---
 .github/workflows/pr_description.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/pr_description.js b/.github/workflows/pr_description.js
index b1bc12016..432d2879b 100644
--- a/.github/workflows/pr_description.js
+++ b/.github/workflows/pr_description.js
@@ -21,6 +21,7 @@ module.exports = async ({ github, context }) => {
     body += `[FireBat bookmark](${prBaseUrl}/fire-behaviour-calculator?s=266&f=c5&c=NaN&w=20,s=286&f=c7&c=NaN&w=16,s=1055&f=c7&c=NaN&w=NaN,s=305&f=c7&c=NaN&w=NaN,s=344&f=c5&c=NaN&w=NaN,s=346&f=c7&c=NaN&w=NaN,s=328&f=c7&c=NaN&w=NaN,s=1399&f=c7&c=NaN&w=NaN,s=334&f=c7&c=NaN&w=NaN,s=1082&f=c3&c=NaN&w=NaN,s=388&f=c7&c=NaN&w=NaN,s=309&f=c7&c=NaN&w=16,s=306&f=c7&c=NaN&w=NaN,s=1029&f=c7&c=NaN&w=NaN,s=298&f=c7&c=NaN&w=NaN,s=836&f=c7&c=NaN&w=NaN,s=9999&f=c7&c=NaN&w=NaN)\n`;
     body += `[Auto Spatial Advisory (ASA)](${prBaseUrl}/auto-spatial-advisory)\n`;
     body += `[HFI Calculator](${prBaseUrl}/hfi-calculator)\n`;
+    body += `[PSU Insights](${prBaseUrl}/insights)\n`;
     github.rest.pulls.update({
       owner: context.repo.owner,
       repo: context.repo.repo,

From 4208e62c45ce3ef24dd8f623db2c9ac3c9c94889 Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Tue, 3 Dec 2024 11:34:30 -0800
Subject: [PATCH 10/13] tests

---
 .../components/map/psuFeatureStylers.test.ts      | 15 ++++++++++++++-
 .../components/map/psuFeatureStylers.ts           |  6 +++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
index b8c782833..f5d13d3ad 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
@@ -1,4 +1,4 @@
-import { setTransparency } from '@/features/psuInsights/components/map/psuFeatureStylers'
+import { getColorForRasterValue, setTransparency } from '@/features/psuInsights/components/map/psuFeatureStylers'
 
 describe('setTransparency', () => {
   it('should return an rgba value from rgb with correct alpha value', () => {
@@ -17,4 +17,17 @@ describe('setTransparency', () => {
     const incompleteColor = 'rgb(1, 2)'
     expect(() => setTransparency(incompleteColor, 0.5)).toThrow(Error)
   })
+
+  it('should return a completely transparent colour if no colour is provided as input', () => {
+    const rgba = setTransparency(undefined, 0.5)
+    expect(rgba).toBe('rgba(0, 0, 0, 0)')
+  })
+})
+
+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)')
+  })
 })
diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
index b38fa2e43..26571e0ff 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
@@ -22,9 +22,9 @@ const rasterValueToFuelTypeCode = new Map([
   [14, 'M-1/M-2']
 ])
 
-const getColorForRasterValue = (rasterValue: number): string => {
+export const getColorForRasterValue = (rasterValue: number): string | undefined => {
   const fuelTypeCode = rasterValueToFuelTypeCode.get(rasterValue)
-  return fuelTypeCode ? colorByFuelTypeCode.get(fuelTypeCode) : null
+  return fuelTypeCode ? colorByFuelTypeCode.get(fuelTypeCode) : undefined
 }
 
 /**
@@ -33,7 +33,7 @@ const getColorForRasterValue = (rasterValue: number): string => {
  * @param alpha number value between 0 and 1
  * @returns rgba value with alpha set ex. rgba(1, 2, 3, 0.5)
  */
-export const setTransparency = (color: string, alpha: number): string => {
+export const setTransparency = (color: string | undefined, alpha: number): string => {
   if (!color) return 'rgba(0, 0, 0, 0)'
   const rgbMatch = color.match(/\d+/g)
   if (!rgbMatch || rgbMatch.length < 3) {

From 373a936830f0404ee8d23ac265c2ac807f4786fd Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Tue, 3 Dec 2024 11:40:15 -0800
Subject: [PATCH 11/13] another test

---
 .../psuInsights/components/map/psuFeatureStylers.test.ts  | 5 +++++
 .../psuInsights/components/map/psuFeatureStylers.ts       | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
index f5d13d3ad..6534a0fa6 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
@@ -30,4 +30,9 @@ describe('getColorForRasterValue', () => {
     const colour = getColorForRasterValue(rasterValue)
     expect(colour).toBe('rgb(209, 255, 115)')
   })
+  it('should return undefined if no colour is found', () => {
+    const rasterValue = 1000
+    const colour = getColorForRasterValue(rasterValue)
+    expect(colour).toBe(undefined)
+  })
 })
diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
index 26571e0ff..bb3eda8bc 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
@@ -35,11 +35,13 @@ export const getColorForRasterValue = (rasterValue: number): string | undefined
  */
 export const setTransparency = (color: string | undefined, alpha: number): string => {
   if (!color) return 'rgba(0, 0, 0, 0)'
-  const rgbMatch = color.match(/\d+/g)
+
+  const rgbMatch = color.match(/\d+/g)?.map(Number)
   if (!rgbMatch || rgbMatch.length < 3) {
-    throw new Error(`Invalid color format: ${color}`)
+    throw new Error(`Invalid color format: "${color}"`)
   }
-  const [r, g, b] = rgbMatch.map(Number)
+
+  const [r, g, b] = rgbMatch
   return `rgba(${r}, ${g}, ${b}, ${alpha})`
 }
 

From 63df279da30c5a1822dc62448a7473be1bf8c1bd Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Tue, 3 Dec 2024 13:13:31 -0800
Subject: [PATCH 12/13] tool card description change

---
 web/src/features/landingPage/toolInfo.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/features/landingPage/toolInfo.tsx b/web/src/features/landingPage/toolInfo.tsx
index 769752dde..8efd37822 100644
--- a/web/src/features/landingPage/toolInfo.tsx
+++ b/web/src/features/landingPage/toolInfo.tsx
@@ -141,8 +141,8 @@ export const psuInsightsInfo: ToolInfo = {
   description: (
     <Typography>
       A visualization tool providing an interactive map-based interface to analyze and understand critical
-      wildfire-related data. The tool offers a comprehensive view of key datasets, allowing users to visualize, explore,
-      and extract valuable information.
+      wildfire-related data. The tool offers a comprehensive view of key datasets, allowing users to visualize and
+      explore valuable information.
     </Typography>
   ),
   icon: <InsightsIcon color="primary" fontSize={ICON_FONT_SIZE} />,

From 1cca9405e595af2fa7ecd3ba4c0acebb164d1c58 Mon Sep 17 00:00:00 2001
From: Brett Edwards <brett.1.edwards@gov.bc.ca>
Date: Wed, 4 Dec 2024 09:48:34 -0800
Subject: [PATCH 13/13] use opacity

---
 .../psuInsights/components/map/PSUMap.tsx     |  3 +-
 .../components/map/psuFeatureStylers.test.ts  | 30 ++-----------------
 .../components/map/psuFeatureStylers.ts       | 25 ++--------------
 3 files changed, 8 insertions(+), 50 deletions(-)

diff --git a/web/src/features/psuInsights/components/map/PSUMap.tsx b/web/src/features/psuInsights/components/map/PSUMap.tsx
index 583e917bc..8daa205c3 100644
--- a/web/src/features/psuInsights/components/map/PSUMap.tsx
+++ b/web/src/features/psuInsights/components/map/PSUMap.tsx
@@ -32,7 +32,8 @@ const PSUMap = () => {
     new VectorTileLayer({
       source: fuelGridVectorSource,
       style: styleFuelGrid(),
-      zIndex: 51
+      zIndex: 51,
+      opacity: 0.6
     })
   )
 
diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
index 6534a0fa6..a55da1678 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.test.ts
@@ -1,28 +1,4 @@
-import { getColorForRasterValue, setTransparency } from '@/features/psuInsights/components/map/psuFeatureStylers'
-
-describe('setTransparency', () => {
-  it('should return an rgba value from rgb with correct alpha value', () => {
-    const rgb = 'rgb(1, 1, 1)'
-    const rgba = setTransparency(rgb, 0.5)
-    expect(rgba).toBe('rgba(1, 1, 1, 0.5)')
-  })
-
-  it('should return an updated rgba value from an rgba input', () => {
-    const rgb = 'rgb(1, 1, 1, 1)'
-    const rgba = setTransparency(rgb, 0.5)
-    expect(rgba).toBe('rgba(1, 1, 1, 0.5)')
-  })
-
-  it('should throw an error if fewer than 3 RGB values are provided', () => {
-    const incompleteColor = 'rgb(1, 2)'
-    expect(() => setTransparency(incompleteColor, 0.5)).toThrow(Error)
-  })
-
-  it('should return a completely transparent colour if no colour is provided as input', () => {
-    const rgba = setTransparency(undefined, 0.5)
-    expect(rgba).toBe('rgba(0, 0, 0, 0)')
-  })
-})
+import { getColorForRasterValue } from '@/features/psuInsights/components/map/psuFeatureStylers'
 
 describe('getColorForRasterValue', () => {
   it('should get the correct colour for the specified raster value', () => {
@@ -30,9 +6,9 @@ describe('getColorForRasterValue', () => {
     const colour = getColorForRasterValue(rasterValue)
     expect(colour).toBe('rgb(209, 255, 115)')
   })
-  it('should return undefined if no colour is found', () => {
+  it('should return a transparent colour if no colour is found', () => {
     const rasterValue = 1000
     const colour = getColorForRasterValue(rasterValue)
-    expect(colour).toBe(undefined)
+    expect(colour).toBe('rgba(0, 0, 0, 0)')
   })
 })
diff --git a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
index bb3eda8bc..d5fb88abc 100644
--- a/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
+++ b/web/src/features/psuInsights/components/map/psuFeatureStylers.ts
@@ -22,37 +22,18 @@ const rasterValueToFuelTypeCode = new Map([
   [14, 'M-1/M-2']
 ])
 
-export const getColorForRasterValue = (rasterValue: number): string | undefined => {
+export const getColorForRasterValue = (rasterValue: number): string => {
   const fuelTypeCode = rasterValueToFuelTypeCode.get(rasterValue)
-  return fuelTypeCode ? colorByFuelTypeCode.get(fuelTypeCode) : undefined
-}
-
-/**
- * Takes rgb or rgba values as input, sets or updates the alpha value, and returns a new rgba value
- * @param color rgb or rgba colour string ex. rgb(1, 2, 3) or rgba(1, 2, 3, 0.2)
- * @param alpha number value between 0 and 1
- * @returns rgba value with alpha set ex. rgba(1, 2, 3, 0.5)
- */
-export const setTransparency = (color: string | undefined, alpha: number): string => {
-  if (!color) return 'rgba(0, 0, 0, 0)'
-
-  const rgbMatch = color.match(/\d+/g)?.map(Number)
-  if (!rgbMatch || rgbMatch.length < 3) {
-    throw new Error(`Invalid color format: "${color}"`)
-  }
-
-  const [r, g, b] = rgbMatch
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  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)
-    const fillRGBA = setTransparency(fillColour, 0.6)
 
     return new Style({
-      fill: new Fill({ color: fillRGBA })
+      fill: new Fill({ color: fillColour })
     })
   }
   return style