diff --git a/frontend/src/components/steps/zone/ZoneSelector.js b/frontend/src/components/steps/zone/ZoneSelector.js index bf02244..0d3ec74 100644 --- a/frontend/src/components/steps/zone/ZoneSelector.js +++ b/frontend/src/components/steps/zone/ZoneSelector.js @@ -1,4 +1,4 @@ -import { useEffect, useState, useRef } from 'react'; +import { useEffect, useState } from 'react'; import SiteRepository from '../../../repository/SiteRepository'; import { HabitatSVG } from '../HabitatSVG' @@ -8,27 +8,6 @@ export default function ZoneSelector(props) { const [segmentMapping, setSegmentMapping] = useState({}); const [selectedZoneSegment, setZoneSegment] = useState(null); - const getHabitatImage = () => { - SiteRepository.getHabitatImage(props.filters.habitatImage).then(response => { - if (response.status === 200) { - const imageData = response.data - setHabitatImageObject(imageData) - } - }) - } - - const getZones = () => { - SiteRepository.getZones().then(response => { - if (response.status === 200) { - const zoneData = response.data - let newSegmentMapping = {} - zoneData.forEach(zone => { - newSegmentMapping[zone.related_svg_segment] = zone - }); - setSegmentMapping(newSegmentMapping); - } - }) - } const setZoneOrRedirect = (zone) => { const redirectHabitat = zone && zone.redirect_habitat; @@ -42,15 +21,53 @@ export default function ZoneSelector(props) { props.setNextDisabled(false); } + useEffect(() => { + const getHabitatImage = () => { + SiteRepository.getHabitatImage(props.filters.habitatImage).then(response => { + if (response.status === 200) { + const imageData = response.data + setHabitatImageObject(imageData) + } + }) + } + + const setInitialZone = () => { + if (props.filters.zone) { + const zone = props.filters.zone + const zoneSegment = document.querySelectorAll(`.zone-selector-svg svg path[inkscapelabel="${zone.related_svg_segment}"]`)[0]; + + // If the previously selected zone segment is located in the diagram then highlight it + if (zoneSegment) { + setZoneSegment(zoneSegment) + zoneSegment.style.fill = "#eeeeee" + zoneSegment.style['fill-opacity'] = 0.5; + props.setNextDisabled(false); + } + } + } + + const getZones = () => { + SiteRepository.getZones().then(response => { + if (response.status === 200) { + const zoneData = response.data + let newSegmentMapping = {} + zoneData.forEach(zone => { + newSegmentMapping[zone.related_svg_segment] = zone + }); + setSegmentMapping(newSegmentMapping); + setInitialZone() + } + }) + } + // Retrieves the habitat image from the api if it's not loaded already Object.keys(habitatImageObject).length === 0 && getHabitatImage() // Retrieves the habitat image from the api if it's not loaded already Object.keys(segmentMapping).length === 0 && getZones() - - }, [props.filters.zone]); + }, [ habitatImageObject, segmentMapping, props, props.filters.zone]); const selectZone = (element) => { if (['path', 'rect'].includes(element.tagName) && element.attributes.inkscapelabel && element.attributes.inkscapelabel.nodeValue) { @@ -63,6 +80,7 @@ export default function ZoneSelector(props) { element.style['fill-opacity'] = 0.5; const zone = segmentMapping[element.attributes.inkscapelabel.nodeValue] + setZoneOrRedirect(zone) } }