search

intermine / bluegenes-go-concept-relation

MIT License
0 stars 5 forks source link

Showing tooltip with additional info on node hover #6

Closed Sakshisrivastava413 closed 4 years ago

Sakshisrivastava413 commented 4 years ago

Journey: I started by exploring cytoscape.js-Qtip but got to know that it is not maintained and the alternative recommendation to it is cytoscape-popper library for positioning divs on cytoscape elements and tippy.js for tooltip creation. Figured the way to add CSS loader in webpack config as tippy.js need importing of css file to give styles to the tooltip.

Outcome: Later I was wondering why to increase bundle size by adding these libraries. So, then removed the dependencies and created tooltips using DOM methods. Highlighted the node on hover by increasing the color shade and showing the cursor as pointer. Also, I maintained the tooltip placement in the canvas according to the node position so that the tooltip doesn't get out of frame. Fixed #4 (Added screenshot for reference) tooltip-on-gene-hover

tooltip-on-goterm-hover

akshatbhargava123 commented 4 years ago

Looks good to me. Nice idea of describing the journey and outcome.

akshatbhargava123 commented 4 years ago

@uosl this looks good to me now, could you please merge if it looks fine to you too?