tripal_phylogeny.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /* phylotree d3js graphs */
  2. (function ($) {
  3. var height = 0; // will be dynamically sized
  4. $(document).ready( function () {
  5. // Callback function to determine node size.
  6. var nodeSize = function(d) {
  7. var size;
  8. if (d.cvterm_name == "phylo_root") {
  9. size = treeOptions['root_node_size'];
  10. }
  11. if (d.cvterm_name == "phylo_interior") {
  12. size = treeOptions['interior_node_size'];
  13. }
  14. if (d.cvterm_name == "phylo_leaf") {
  15. size = treeOptions['leaf_node_size'];
  16. }
  17. return size;
  18. }
  19. // Callback function to determine the node color.
  20. var organismColor = function(d) {
  21. var color = null;
  22. if (d.genus) {
  23. color = organismColors[d.genus + ' ' + d.species];
  24. }
  25. if (color) {
  26. return color;
  27. }
  28. else {
  29. return 'grey';
  30. }
  31. };
  32. // Callback for mouseover event on graph node d.
  33. var nodeMouseOver = function(d) {
  34. var el = $(this);
  35. el.attr('cursor', 'pointer');
  36. var circle = el.find('circle');
  37. // highlight in yellow no matter if leaf or interior node
  38. circle.attr('fill', 'yellow');
  39. if(!d.children) {
  40. // only leaf nodes have descriptive text
  41. var txt = el.find('text');
  42. txt.attr('font-weight', 'bold');
  43. }
  44. };
  45. // Callback for mouseout event on graph node d.
  46. var nodeMouseOut = function(d) {
  47. var el = $(this);
  48. el.attr('cursor', 'default');
  49. var circle = el.find('circle');
  50. if(!d.children) {
  51. // restore the color based on organism id for leaf nodes
  52. circle.attr('fill', organismColor(d));
  53. var txt = el.find('text');
  54. txt.attr('font-weight', 'normal');
  55. }
  56. else {
  57. // restore interior nodes to white
  58. circle.attr('fill', 'white');
  59. }
  60. };
  61. // Callback for mousedown/click event on graph node d.
  62. var nodeMouseDown = function(d) {
  63. var el = $(this);
  64. var title = (! d.children ) ? d.name : 'interior node ' + d.phylonode_id;
  65. if(d.children) {
  66. // interior node
  67. if(d.phylonode_id) {
  68. }
  69. else {
  70. // this shouldn't happen but ok
  71. }
  72. }
  73. else {
  74. // If this node is not associated with a feature but it has an
  75. // organism node then this is a taxonomic node and we want to
  76. // link it to the organism page.
  77. if (!d.feature_id && d.organism_node_id) {
  78. window.location.replace(baseurl + '/node/' + d.organism_node_id);
  79. }
  80. // leaf node
  81. }
  82. };
  83. // AJAX function for retrieving the tree data.
  84. $.getJSON(phylotreeDataURL, function(treeData) {
  85. displayData(treeData);
  86. $('.phylogram-ajax-loader').hide();
  87. });
  88. // Creates the tree using the d3.phylogram.js library.
  89. function displayData(treeData) {
  90. height = graphHeight(treeData);
  91. d3.phylogram.build('#phylogram', treeData, {
  92. 'width' : treeOptions['phylogram_width'],
  93. 'height' : height,
  94. 'fill' : organismColor,
  95. 'size' : nodeSize,
  96. 'nodeMouseOver' : nodeMouseOver,
  97. 'nodeMouseOut' : nodeMouseOut,
  98. 'nodeMouseDown' : nodeMouseDown,
  99. 'skipTicks' : treeOptions['skipTicks']
  100. });
  101. }
  102. /* graphHeight() generate graph height based on leaf nodes */
  103. function graphHeight(data) {
  104. function countLeafNodes(node) {
  105. if(! node.children) {
  106. return 1;
  107. }
  108. var ct = 0;
  109. node.children.forEach( function(child) {
  110. ct+= countLeafNodes(child);
  111. });
  112. return ct;
  113. }
  114. var leafNodeCt = countLeafNodes(data);
  115. return 22 * leafNodeCt;
  116. }
  117. });
  118. })(jQuery);