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; fill-opacity: 0.5 !important;
cursor: pointer; 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) setHabitatImageObject(imageData)
} }
}) })
} }
const setInitialZone = () => { const setInitialZone = () => {
if (props.filters.zone) { if (props.filters.zone) {
const zone = props.filters.zone const zone = props.filters.zone
const zoneSegment = document.querySelectorAll(`.zone-selector-svg svg path[inkscapelabel="${zone.related_svg_segment}"]`)[0]; 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 the previously selected zone segment is located in the diagram then highlight it
if (zoneSegment) { if (zoneSegment) {
setZoneSegment(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 // Retrieves the habitat image from the api if it's not loaded already
Object.keys(segmentMapping).length === 0 && getZones() Object.keys(segmentMapping).length === 0 && getZones()
}, [ habitatImageObject, segmentMapping, props, props.filters.zone]); }, [habitatImageObject, segmentMapping, props, props.filters.zone]);
const selectZone = (element) => { const selectZone = (element) => {
if (['path', 'rect'].includes(element.tagName) && element.attributes.inkscapelabel && element.attributes.inkscapelabel.nodeValue) { 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 ? ( return Object.keys(habitatImageObject).length > 0 ? (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<p>{habitatImageObject.name}</p> <p>{habitatImageObject.name}</p>
<div className="zone-selector-svg"> <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></div> </div>) : <div></div>
} }