Fix habitat image dimensions not showing entire image

frontend/src/components/steps/zone/ZoneSelector.js

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import SampleBackground from '../../../assets/img/sample-bg.jpg';
+import { useEffect, useState, useRef } from 'react';
+import SampleBackground from '../../../assets/img/stepBackgrounds/step1.jpg';
 import SiteRepository from '../../../repository/SiteRepository';
 
 
@@ -7,14 +7,18 @@ export default function ZoneSelector(props) {
 
     const [habitatImageObject, setHabitatImageObject] = useState({});
     const [habitatImageFile, setHabitatImageFile] = useState(SampleBackground);
+    const [imageHeight, setImageHeight] = useState(0)
     const [selectedZoneSegment, setZoneSegment] = useState(null);
+    const imageContainer = useRef(null)
 
-    const getHabitatImage = () => {
+    const getHabitatImage = (findAndSetImageHeightFunc) => {
         SiteRepository.getHabitatImage(props.filters.habitatImage).then(response => {
             if (response.status === 200) {
                 const imageData = response.data
                 setHabitatImageObject(imageData)
-                setHabitatImageFile(require(`../../../assets/img/habitats/${imageData.image_filename}`).default)
+                const imageSrc = require(`../../../assets/img/habitats/${imageData.image_filename}`).default
+                setHabitatImageFile(imageSrc)
+                findAndSetImageHeightFunc(imageSrc)
             }
         })
     }
@@ -25,8 +29,19 @@ export default function ZoneSelector(props) {
     }
 
     useEffect(() => {
+        // Calculates the image ratio and uses this to calculate the height in pixels based on outer container width
+        const findAndSetImageHeight = (imageSource) => {
+            let img = new Image();
+            img.src = imageSource;
+            const newHeight = imageContainer.current ? imageContainer.current.clientWidth * (img.height / img.width) : 0;
+            setImageHeight(newHeight);
+        }
+
         // Retrieves the habitat image from the api if they are not loaded already
-        Object.keys(habitatImageObject).length === 0 && getHabitatImage()
+        Object.keys(habitatImageObject).length === 0 && getHabitatImage(findAndSetImageHeight)
+
+        // Sets the image height such that the full image always displays on page resize
+        window.addEventListener("resize", () => findAndSetImageHeight(habitatImageFile), false);
 
         // Temporarily bypass if there is no image available
         if (props.filters.zone || !props.filters.habitatImage) {
@@ -38,7 +53,8 @@ export default function ZoneSelector(props) {
     const stepBackground = {
         backgroundImage: `url(${habitatImageFile})`,
         backgroundSize: '100% auto',
-        height: '100%',
+        backgroundRepeat: 'none',
+        height: imageHeight,
         width: '100%',
         display: 'flex'
     }
@@ -50,7 +66,7 @@ export default function ZoneSelector(props) {
     };
 
     return (
-        <div style={{ height: '80%', width: '100%' }}>
+        <div ref={imageContainer} style={{ width: '100%' }}>
             <p>{habitatImageObject && habitatImageObject.name}</p>
             {Object.keys(habitatImageObject).length === 0 ? (
                 // Sample segment selector (temporary if no image is available)
@@ -62,7 +78,7 @@ export default function ZoneSelector(props) {
                 // Actual zone selector
                 (<div style={stepBackground}>
                     {habitatImageObject && habitatImageObject.image_segments && Array.isArray(habitatImageObject.image_segments) && habitatImageObject.image_segments.map(segment =>
-                        <div onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment === segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
+                        <div key={segment.id} onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment === segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
                     )}
                 </div>
                 )}

frontend/src/components/steps/zone/ZoneStep.js

@@ -13,7 +13,9 @@ export default function ZoneStep(props) {
     )
 
     const zoneSelectionPanel = (
-        <ZoneSelector {...props} />
+        <div style={{padding: '30px', height: "100%", width: "90%", display: "flex", justifyContent: 'center', alignItems: "center"}}>
+            <ZoneSelector {...props} />
+        </div>
     )
 
     return (