JSFiddle - React, Tailwind, and code Playground
HTML
<img id="Main.Test.Default (4bdc7915-aa24-4fca-b5e7-4a0ac7cbfd3c)" src="https://cdn1.iconfinder.com/data/icons/flat-services-icons/128/idea.png" alt="Main.Test.Default (4bdc7915-aa24-4fca-b5e7-4a0ac7cbfd3c)" style="display:none">
<img id="Main.Test.Advanced (3733393c-8091-41e6-b4b0-223460c9b84d)" src="https://cdn4.iconfinder.com/data/icons/keynote-and-powerpoint-icons/256/Analytics_balls-128.png" alt="Main.Test.Advanced (3733393c-8091-41e6-b4b0-223460c9b84d)" style="display:none">
<img id="Main.Test.Extended (d2b8a0bf-8ae8-476d-a920-7d663bad4353)" src="https://cdn4.iconfinder.com/data/icons/keynote-and-powerpoint-icons/256/Cake-128.png" alt="Main.Test.Extended (d2b8a0bf-8ae8-476d-a920-7d663bad4353)" style="display:none">
<table width="640px"><tr style="background: #c3c3c3;"><td id="graphBar01"></td><td id="graphBar02"><a id="canvasImg"><img src="../../../resources/icons/silk/disk.png" title="Save Graph"></a></td><td id="spacerBar" width="100%"></td></tr></table>
<p id="edgeInfo"></p>
<canvas id="graphCanvasfea3f8d3-63b5-e740-f43d-21c2d896f89b" width="640" height="320" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<p id="prettyId"></p>
<script>
var canvas=document.getElementById("graphCanvasfea3f8d3-63b5-e740-f43d-21c2d896f89b");
var ctx=canvas.getContext("2d");
canvas.addEventListener('mousedown', mouseAction, false);
function mouseAction(mouseEvent) {
var mouseX = mouseEvent.pageX-canvas.offsetLeft;
var mouseY = mouseEvent.pageY-canvas.offsetTop;
document.getElementById("graphBar01").innerHTML="";
document.getElementById("prettyId").innerHTML="";
document.getElementById("edgeInfo").innerHTML="";
if (mouseX>225&&mouseX<255.0&&mouseY>145&&mouseY<175.0) {
document.getElementById("prettyId").innerHTML="Main.Test.Wow (6bc244cf-aa90-4583-b89e-34f7318eaf34)";
document.getElementById("graphBar01").innerHTML="<a...
CSS
p {
font-family: Arial;
}