Clickable image annotations

[rafaroseira]

Pull Request Summary

closes #207

Now the bone search can be done by just clicking the annotations of the bone or bone part shown in the image.

Changes

• annotationOverlay.js: added a 'click' event listener that dispatches a custom annotationSelected event.
• imageAnnotationToDropdownMap.js: this new file maps the image annotations of certain bones to the equivalent dropdown option so that the search can be done. This was necessary only because some of the image annotations do not match the exact text of the dropdown option. By the way, this mapping is not complete since some of the bones have messy data currently, like the skull for example. I did all I could.
• dropdown.js: added a event listener to catch the annotationSelected events.
• styles.css: added hovering effect to the image annotations.

PR Checklist

• Project builds and runs
• Tests and linters pass
• Any related documentation has been updated, including JSDoc comments or docstrings

Video

simplescreenrecorder-2026-05-09_10.24.01.mp4

[leandrumartin]

Looks good. I don't love the mapping between labels and dropdowns being handled in the front-end, but it is the best we can do right now, so I am okay with this approach. So we can leave that as it is, and I'll note somewhere else that I'll want to refactor it later, after other changes are merged into main first.

The only thing I would want to see changed is to see an error or debug log sent to the browser console if a text annotation link is broken.

[leandrumartin]

Currently, if a text label doesn't link anywhere then it still appears to the user like a valid link, so the user could be confused when they click it and nothing happens.

I think that if a text label doesn't link anywhere, then there should be some indication. There should be a debug log sent to the browser console. And, if possible, the text shouldn't be highlighted when the user hovers their cursor over it.

[rafaroseira]

Thanks for the feedback. I totally agree it might be confusing. I made some changes and now only the text labels with valid links will be highlighted and have a pointer cursor. I actually struggled a bit to get the debug logs working properly. Hency why I made changes to some functions I had not changed before such as clearAnnotations etc.