lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Add frontend support for zone tooltips

Browse source
This commit is contained in:
Dana Lambert 2021-12-13 11:57:11 +13:00
parent 1d54abca6a
commit 2eae995998
2 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/assets/styles/step.scss
View file

@ -52,3 +52,18 @@
fill-opacity: 0.5 !important;
cursor: pointer;
}
#svg-tooltip {
background-color: rgba(97, 97, 97, 0.92);
border-radius: 4px;
color: #fff;
font-family: Poppins,sans-serif;
padding: 4px 8px;
font-size: 0.6875rem;
max-width: 300px;
margin: 0;
word-wrap: break-word;
font-weight: 500;
position: relative;
}

30
frontend/src/components/steps/zone/ZoneSelector.js
View file

@ -30,13 +30,13 @@ export default function ZoneSelector(props) {
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)
@ -67,7 +67,7 @@ export default function ZoneSelector(props) {
// Retrieves the habitat image from the api if it's not loaded already
Object.keys(segmentMapping).length === 0 && getZones()
}, [ habitatImageObject, segmentMapping, props, 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) {
@ -85,11 +85,33 @@ export default function ZoneSelector(props) {
}
}
const showTooltip = (evt) => {
const element = evt.target;
if (['path', 'rect'].includes(element.tagName) && element.attributes.inkscapelabel && element.attributes.inkscapelabel.nodeValue) {
const zone = segmentMapping[element.attributes.inkscapelabel.nodeValue]
if (zone) {
let tooltip = document.getElementById("svg-tooltip");
tooltip.innerHTML = zone.tooltip_display_text;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
tooltip.style.opacity = 1;
}
}
}
const hideTooltip = () => {
var tooltip = document.getElementById("svg-tooltip");
tooltip.style.display = "none";
}
return Object.keys(habitatImageObject).length > 0 ? (
<div style={{ width: '100%' }}>
<p>{habitatImageObject.name}</p>
<div className="zone-selector-svg">
<HabitatSVG onClick={(event) => selectZone(event.target)} name={habitatImageObject.image_filename} style={{ "height": 'auto', "width": "100%" }} />
<div id="svg-tooltip" className="MuiTooltip-tooltip MuiTooltip-tooltipArrow MuiTooltip-tooltipPlacementBottom" display="none" style={{ "position": 'absolute', "display": "none" }} ></div>
<HabitatSVG onClick={(event) => selectZone(event.target)} onMouseMove={(event) => showTooltip(event)} onMouseOut={() => hideTooltip()} name={habitatImageObject.image_filename} style={{ "height": 'auto', "width": "100%" }} />
</div>
</div>) : <div></div>
}