eweitz / ideogram

Chromosome visualization for the web
https://eweitz.github.io/ideogram
Other
288 stars 72 forks source link

Make annotation labels interactive, polish label UX and tooltip analytics #252

Closed eweitz closed 3 years ago

eweitz commented 3 years ago

This refines annotation labels, building on #248 and #249. Label UI and interaction design are inspired by Google Maps.

Labels are now interactive, and have the same hover and click handling as the annotations they supplement. Label graphics are also polished -- text is bigger, colored to match annotation (for glanceability), wrapped in fitting text-stroke instead of boxes, and changes color when active. Labels can be disabled via showAnnotLabels: false.

Quickly moving the cursor from label to annotation will flicker the tooltip. Analytics from #247 now silence such noisy events.

These updates are currently confined to the "Related genes" example, and will be made more generally available later.

Screenshot of refined annotation labels:

refined_annotation_labels_ideogram_2020-10-28