@@ -10,39 +10,68 @@ but WITHOUT ANY WARRANTY; without even the implied warranty of
1010MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
1111Common Good Public License Beta 1.0 for more details. */
1212
13+ import "./StaticAdaptations.css" ;
14+
1315import React , { useEffect , useState } from "react" ;
14- import LoadingOverlay from "react-loading-overlay-ts" ;
1516
1617import adaptationData from "../../kumu/parsed/adaptation_data.json" ;
17- import { defaultState } from "../../utils/defaultState" ;
1818import { pathways } from "../climateImpacts/ClimateImpactSummaryData" ;
1919import { adaptationFilters } from "./AdaptationCategories" ;
2020import StaticAdaptation from "./StaticAdaptation" ;
2121
2222const StaticAdaptations = ( props ) => {
23- const { selectedHazardName, setSelectedHazardName , applyCoastalFilter } = props ;
23+ const { selectedHazardName, applyCoastalFilter } = props ;
2424
25+ // Load filter options
2526 const defaultFilterName = adaptationFilters [ 0 ] . filterName ;
2627 const defaultFilterCategory = adaptationFilters [ 0 ] . category ;
27-
2828 const [ filterName , setFilterName ] = useState ( defaultFilterName ) ;
2929 const [ filterCategory , setFilterCategory ] = useState ( defaultFilterCategory ) ;
30- const [ loading , setLoading ] = useState ( false ) ;
3130
3231 // Filter pathways if coastal filter is applied
3332 const [ filteredPathwayData , setFilteredPathwayData ] = useState ( pathways ) ;
3433
34+ // Track array of selected hazards (controlled via buttons)
35+ const [ selectedHazards , setSelectedHazards ] = useState ( [ selectedHazardName ] ) ;
36+
37+ // Function for clicking on filter buttons: adding and removing hazards to array
38+ const toggleHazardSelection = ( hazardName ) => {
39+ setSelectedHazards ( ( prev ) => {
40+ // Check to see if new hazardName is selected
41+ const isSelected = prev . includes ( hazardName ) ;
42+
43+ // If hazardName is selected, remove it
44+ if ( isSelected ) {
45+ return prev . filter ( ( n ) => n !== hazardName ) ;
46+ }
47+
48+ // If not selected, add it to array
49+ if ( ! isSelected ) {
50+ return [ ...prev , hazardName ] ;
51+ }
52+
53+ // If selected and the only one do nothing
54+ return prev ;
55+ } ) ;
56+ } ;
57+
58+ // When coastal filter is applied, filter pathways and reset selectedHazards
3559 useEffect ( ( ) => {
3660 if ( applyCoastalFilter ) {
3761 setFilteredPathwayData ( pathways . filter ( ( pathway ) => ! pathway . isCoastal ) ) ;
3862 } else {
3963 setFilteredPathwayData ( pathways ) ;
4064 }
41- setSelectedHazardName ( defaultState . selectedHazardName ) ;
42- } , [ applyCoastalFilter , setSelectedHazardName ] ) ;
65+ setSelectedHazards ( [ selectedHazardName ] ) ;
66+ } , [ applyCoastalFilter , selectedHazardName ] ) ;
67+
68+ // When a new selectedHazardName is applied, reset the array of hazards
69+ useEffect ( ( ) => {
70+ setSelectedHazards ( [ selectedHazardName ] ) ;
71+ } , [ selectedHazardName ] ) ;
4372
44- // Handle change in filter : set filterName and filterCategory when dropdown is used
45- const handleFilterChange = ( e ) => {
73+ // Handle button change : set filterName and filterCategory when dropdown is used
74+ const handleDropdownChange = ( e ) => {
4675 const selectedFilterName = e . target . value ;
4776 const selectedFilter = adaptationFilters . find ( ( filter ) => filter . filterName === selectedFilterName ) ;
4877
@@ -52,19 +81,21 @@ const StaticAdaptations = (props) => {
5281 }
5382 } ;
5483
55- // Filter adaptations using filterName and filterCategory
84+ // Filter adaptations based on the selectedHazards array and the filterName
5685 const filteredAdaptations = adaptationData . filter ( ( adaptation ) => {
57- const hazardName = selectedHazardName . toLowerCase ( ) ;
5886 const layers = adaptation . attributes . layer . map ( ( layer ) => layer . toLowerCase ( ) ) ;
5987 const adaptationCategories = adaptation . attributes [ filterCategory ] || [ ] ;
6088
89+ // First check that the adaptation contains every hazard in the array of selectedHazards
90+ const matchesAllHazards = selectedHazards . every ( ( hazard ) =>
91+ layers . some ( ( layer ) => layer . includes ( hazard . toLowerCase ( ) + " in full" ) ) ,
92+ ) ;
93+
94+ // Then check if the adaptation category includes the category filter name
6195 if ( filterName === defaultFilterName ) {
62- return layers . some ( ( layer ) => layer . includes ( hazardName + " in full" ) ) ;
96+ return matchesAllHazards ;
6397 } else {
64- return (
65- layers . some ( ( layer ) => layer . includes ( hazardName + " in full" ) ) &&
66- adaptationCategories . includes ( filterName )
67- ) ;
98+ return matchesAllHazards && adaptationCategories . includes ( filterName ) ;
6899 }
69100 } ) ;
70101
@@ -73,37 +104,55 @@ const StaticAdaptations = (props) => {
73104 }
74105
75106 return (
76- < LoadingOverlay active = { loading } spinner text = { "Loading adaptations" } >
107+ < div >
77108 < h1 > Adaptations</ h1 >
78109 < p >
79110 Based on the expected climate change and resulting impacts in the UK, the following adaptations should
80111 be considered. These adaptations were identified to reduce risk to humans and the environment while
81- providing co-benefits where possible. Use the dropdown options to view adaptations by climate impact
82- pathway, adaptation theme, and activity type.
112+ providing co-benefits where possible. Use the icons to filter adaptations by climate impact pathway.
113+ More than one icon can be selected to see the adaptations relevant to multiple pathways.
114+ Further filtering by adaptation theme is also possible.
83115 </ p >
84- < p >
85- < b className = "static-adaptation-emphasis" > Selected climate impact pathway: </ b >
86- < select
87- value = { selectedHazardName }
88- onChange = { ( e ) => {
89- setSelectedHazardName ( e . target . value ) ;
116+ < div className = "horiz-container-pathway" >
117+ { filteredPathwayData . map ( ( pathway ) => (
118+ < button
119+ className = "vert-container-pathway"
120+ key = { pathway . id }
121+ onClick = { ( ) => toggleHazardSelection ( pathway . name ) }
122+ >
123+ < div className = "pathway-text" >
124+ < strong > { pathway . name } </ strong >
125+ </ div >
126+ < div className = "icon" >
127+ { React . cloneElement ( pathway . icon , { selectedHazard : selectedHazards . includes ( pathway . name ) } ) }
128+ </ div >
129+ </ button >
130+ ) ) }
131+ </ div >
132+ < div style = { { display : "flex" , justifyContent : "center" } } >
133+ < button
134+ onClick = { ( ) => setSelectedHazards ( [ ] ) }
135+ style = { {
136+ borderRadius : "8px" ,
137+ padding : "1rem" ,
138+ cursor : "pointer" ,
139+ flexDirection : "column" ,
140+ margin : "1em" ,
90141 } }
91142 >
92- { filteredPathwayData . map ( ( pathway ) => (
93- < option value = { pathway . name } key = { pathway . id } >
94- { pathway . name }
95- </ option >
96- ) ) }
97- </ select >
98- </ p >
143+ < div style = { { fontSize : "0.8em" } } > Reset adaptation filters</ div >
144+ </ button >
145+ </ div >
99146 < ul >
147+ { filteredAdaptations . length > 0 && (
148+ < li >
149+ { filteredAdaptations . length } climate adaptation
150+ { filteredAdaptations . length === 1 ? " was" : "s were" } found
151+ </ li >
152+ ) }
100153 < li >
101- { filteredAdaptations . length } climate adaptation
102- { filteredAdaptations . length === 1 ? " was" : "s were" } found
103- </ li >
104- < li >
105- These adaptations can be filtered by theme:{ " " }
106- < select value = { filterName } onChange = { handleFilterChange } >
154+ These adaptations can be filtered further by theme:{ " " }
155+ < select value = { filterName } className = "adaptation-theme-select" onChange = { handleDropdownChange } >
107156 { adaptationFilters . map ( ( filter , index ) => (
108157 < option value = { filter . filterName } key = { index } >
109158 { filter . displayName }
@@ -124,15 +173,15 @@ const StaticAdaptations = (props) => {
124173 ) ;
125174 } )
126175 ) : (
127- < h3 > No adaptations found</ h3 >
176+ < h3 style = { { textAlign : "center" } } > No adaptations found</ h3 >
128177 ) }
129178 </ div >
130179
131180 < p className = "note" >
132181 Data source: The adaptation data is based on published scientific literature and reports. You can see
133182 the references used by expanding each adaptation.
134183 </ p >
135- </ LoadingOverlay >
184+ </ div >
136185 ) ;
137186} ;
138187
0 commit comments