diff --git a/frontend/src/assets/data/staticText.json b/frontend/src/assets/data/staticText.json index d16ab1e..16be5fc 100644 --- a/frontend/src/assets/data/staticText.json +++ b/frontend/src/assets/data/staticText.json @@ -29,8 +29,8 @@ "description": "You have specified the following inputs – if these are correct go to the next step, otherwise go back and refine your input on the previous pages." }, "results": { - "title": "Your Results", - "description": "Please review the plant species list – it can be saved as a CSV file or appended to a planting plan guidebook. Additional information on each species can be obtained by entering the plant species name into the search box at https://inaturalist.nz or in the “search flora” box at https://www.nzpcn.org.nz/. Click below to create a planting plan guidebook specific to your project site.." + "title": "Plant List Results", + "forestDiagramDescription": "Forest Position Information Diagram" } } } \ No newline at end of file diff --git a/frontend/src/assets/img/habitats/1a_Forest_Section.png b/frontend/src/assets/img/habitats/1a_Forest_Section.png new file mode 100644 index 0000000..9ba3f76 Binary files /dev/null and b/frontend/src/assets/img/habitats/1a_Forest_Section.png differ diff --git a/frontend/src/components/steps/results/PlantList.js b/frontend/src/components/steps/results/PlantList.js index de0a0d8..df8058c 100644 --- a/frontend/src/components/steps/results/PlantList.js +++ b/frontend/src/components/steps/results/PlantList.js @@ -16,6 +16,10 @@ import FirstPageIcon from '@mui/icons-material/FirstPage'; import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; import LastPageIcon from '@mui/icons-material/LastPage'; +import { styled } from '@mui/material/styles'; +import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; +import staticText from '../../../assets/data/staticText.json' +import forestGraphic from '../../../assets/img/habitats/1a_Forest_Section.png'; function TablePaginationActions(props) { const theme = useTheme(); @@ -95,13 +99,30 @@ export default function PlantResultsTable(props) { setPage(0); }; + const CustomWidthTooltip = styled(({ className, ...props }) => ( + + ))({ + [`& .${tooltipClasses.tooltip}`]: { + maxWidth: 700, + }, + }); + + const forestDiagramInformation = ( +
+

{staticText.steps.results.forestDiagramDescription}

+ +
+ ) + return ( Names - Growth Form / Max Height (m) / Spacing (m) / Forest Position + + Growth Form / Max Height (m) / Spacing (m) / Forest Position + Moisture Preferences Tolerances (Water / Drought / Frost / Salinity) Ecosystem Services