/static/scripts/trackster_ui.js

https://bitbucket.org/cistrome/cistrome-harvard/ · JavaScript · 162 lines · 108 code · 16 blank · 38 comment · 14 complexity · 734ef01af9d8f15e73c011e87334d6f6 MD5 · raw file

  1. /************************************************************************
  2. * Functions used for creating and managing the Trackster user interface.
  3. ************************************************************************/
  4. /**
  5. * Add bookmark.
  6. */
  7. var add_bookmark = function(position, annotation) {
  8. var
  9. bookmarks_container = $("#bookmarks-container"),
  10. new_bookmark = $("<div/>").addClass("bookmark").appendTo(bookmarks_container),
  11. delete_icon_container = $("<div/>").addClass("delete-icon-container").appendTo(new_bookmark).click(function (){
  12. // Remove bookmark.
  13. new_bookmark.slideUp("fast");
  14. new_bookmark.remove();
  15. view.has_changes = true;
  16. return false;
  17. }),
  18. delete_icon = $("<a href=''/>").addClass("icon-button delete").appendTo(delete_icon_container),
  19. position_div = $("<div/>").addClass("position").appendTo(new_bookmark),
  20. position_link = $("<a href=''/>").text(position).appendTo(position_div).click(function() {
  21. view.go_to(position);
  22. return false;
  23. });
  24. annotation_div = get_editable_text_elt(annotation, true).addClass("annotation").appendTo(new_bookmark);
  25. view.has_changes = true;
  26. return new_bookmark;
  27. };
  28. /**
  29. * Objects that can be added to a view.
  30. */
  31. var addable_objects = { "LineTrack": LineTrack, "FeatureTrack": FeatureTrack, "ReadTrack": ReadTrack, "DrawableGroup": DrawableGroup };
  32. /**
  33. * Decode a track from a dictionary.
  34. */
  35. var track_from_dict = function(track_dict) {
  36. return new addable_objects[track_dict.track_type](
  37. track_dict.name, view, track_dict.hda_ldda, track_dict.dataset_id,
  38. track_dict.prefs, track_dict.filters, track_dict.tool);
  39. };
  40. /**
  41. * Decode a drawable collection from a dictionary.
  42. */
  43. var drawable_collection_from_dict = function(collection_dict) {
  44. var collection = new addable_objects[collection_dict.obj_type](collection_dict.name, view, collection_dict.prefs, view.viewport_container, view);
  45. for (var i = 0; i < collection_dict.drawables.length; i++) {
  46. var
  47. drawable_dict = collection_dict.drawables[i],
  48. drawable;
  49. if (drawable_dict['track_type']) {
  50. drawable = track_from_dict(drawable_dict);
  51. }
  52. else {
  53. drawable = drawable_collection_from_dict(drawable_dict);
  54. }
  55. collection.add_drawable(drawable);
  56. // HACK: move track from view to collection's content_div.
  57. // FIX: Tracks should be able to be be added to arbitrary containers;
  58. // every moveable should have a container_div, and every container should have
  59. // a content_div (though perhaps name changes are needed).
  60. collection.content_div.append(drawable.container_div);
  61. }
  62. return collection;
  63. };
  64. /**
  65. * Decode a drawable from a dict.
  66. */
  67. var drawable_from_dict = function(drawable_dict) {
  68. return (drawable_dict['track_type'] ?
  69. track_from_dict(drawable_dict) :
  70. drawable_collection_from_dict(drawable_dict));
  71. };
  72. /**
  73. * Create a complete Trackster visualization. Returns view.
  74. */
  75. var create_visualization = function(parent_elt, title, id, dbkey, viewport_config, tracks_config, bookmarks_config) {
  76. // Create view.
  77. view = new View(parent_elt, title, id, dbkey);
  78. view.editor = true;
  79. $.when( view.load_chroms_deferred ).then(function() {
  80. // Viewport config.
  81. var
  82. chrom = viewport_config.chrom,
  83. start = viewport_config.start,
  84. end = viewport_config.end,
  85. overview_track_name = viewport_config.overview;
  86. if (chrom && (start !== undefined) && end) {
  87. view.change_chrom(chrom, start, end);
  88. }
  89. // Add drawables to view.
  90. if (tracks_config) {
  91. var track_config;
  92. for (var i = 0; i < tracks_config.length; i++) {
  93. track_config = tracks_config[i];
  94. view.add_drawable( drawable_from_dict(track_config) );
  95. }
  96. }
  97. // Set overview.
  98. var overview_track;
  99. for (var i = 0; i < view.tracks.length; i++) {
  100. if (view.tracks[i].name == overview_track_name) {
  101. view.set_overview(view.tracks[i]);
  102. break;
  103. }
  104. }
  105. // Load bookmarks.
  106. if (bookmarks_config) {
  107. var bookmark;
  108. for (var i = 0; i < bookmarks_config.length; i++) {
  109. bookmark = bookmarks_config[i];
  110. add_bookmark(bookmark['position'], bookmark['annotation']);
  111. }
  112. }
  113. // View has no changes as of yet.
  114. view.has_changes = false;
  115. });
  116. return view;
  117. };
  118. /**
  119. * Set up keyboard navigation for a visualization.
  120. */
  121. var init_keyboard_nav = function(view) {
  122. // Keyboard navigation. Scroll ~7% of height when scrolling up/down.
  123. $(document).keydown(function(e) {
  124. // Do not navigate if arrow keys used in input element.
  125. if ($(e.srcElement).is(':input')) {
  126. return;
  127. }
  128. // Key codes: left == 37, up == 38, right == 39, down == 40
  129. switch(e.which) {
  130. case 37:
  131. view.move_fraction(0.25);
  132. break
  133. case 38:
  134. var change = Math.round(view.viewport_container.height()/15.0);
  135. view.viewport_container.scrollTo('-=' + change + 'px');
  136. break;
  137. case 39:
  138. view.move_fraction(-0.25);
  139. break;
  140. case 40:
  141. var change = Math.round(view.viewport_container.height()/15.0);
  142. view.viewport_container.scrollTo('+=' + change + 'px');
  143. break;
  144. }
  145. });
  146. };