Permalink
Browse files

Sequence Track

- Triple click to zomm to base pair level
- Display residue underlying the selected feature in EditTrack
  • Loading branch information...
aniarya82 committed Aug 26, 2017
1 parent 15fe197 commit 009e3fcd50c669a3146abd34945164e7209461db
@@ -8,9 +8,10 @@ define([
'jqueryui/draggable',
'JBrowse/Util',
'JBrowse/Model/SimpleFeature',
- 'AnnotationEditor/SequenceOntologyUtils'
+ 'AnnotationEditor/SequenceOntologyUtils',
+ 'tripleclick'
],
-function (declare, array, HTMLFeatureTrack, FeatureSelectionManager, $, _, draggable, Util, SimpleFeature, SeqOnto) {
+function (declare, array, HTMLFeatureTrack, FeatureSelectionManager, $, _, draggable, Util, SimpleFeature, SeqOnto, tripleclick) {
var debugFrame = false;
var draggableTrack = declare(HTMLFeatureTrack,
@@ -92,6 +93,12 @@ var draggableTrack = declare(HTMLFeatureTrack,
track.last_whitespace_mousedown_loc = [ event.pageX, event.pageY ];
}
} );
+ $div.bind('tripleclick', function(event, pageX) {
+ var target = event.target;
+ var thisB = track.gview;
+ var pos = Math.floor(thisB.absXtoBp(pageX));
+ thisB.zoomToBaseLevel(event, pos);
+ });
$div.bind('mouseup', function (event) {
var target = event.target;
if (! (target.feature || target.subfeature)) { // event not on feature, so must be on whitespace
@@ -129,7 +136,8 @@ var draggableTrack = declare(HTMLFeatureTrack,
// Kludge to restore selection after double click or triple
// click.
- $div.bind('dblclick tripleclick', function (event) {
+ $div.bind('dblclick', function (event) {
+ // event.stopPropagation();
var target = event.target;
// doubleclick on feature won't bubble up till here.
// Still checking that the user double clicked on
@@ -147,6 +155,7 @@ var draggableTrack = declare(HTMLFeatureTrack,
track.prev_selection = null;
}, 250);
}
+ event.stopPropagation();
});
@@ -10,7 +10,8 @@ define([
'AnnotationEditor/Model/SimpleFeature',
'JBrowse/Util',
'JBrowse/View/GranularRectLayout',
- 'JBrowse/CodonTable',
+ 'AnnotationEditor/CodonTable',
+ 'AnnotationEditor/View/Track/Sequence',
'FileSaver/FileSaver',
'AnnotationEditor/Store/Stack',
'genevalidator/gvapi'
@@ -27,6 +28,7 @@ define([
Util,
Layout,
CodonTable,
+ SequenceTrack,
saveAs,
Stack,
GV) {
@@ -1880,7 +1882,6 @@ var EditTrack = declare(DraggableFeatureTrack,
if (transcripts.length < 1) return;
this.store.insert(transcripts[0]);
this.changed();
- return;
// this.store.backupStore();
try {
@@ -2183,6 +2184,20 @@ var EditTrack = declare(DraggableFeatureTrack,
});
},
+ getSequenceTrack: function() {
+ var thisB = this.browser;
+ // if (this._sequenceTrack) return this._sequenceTrack;
+ if (thisB && thisB.view && thisB.view.tracks) {
+ var tracks = thisB.view.tracks;
+ for (var i = 0; i < tracks.length; i++) {
+ if (tracks[i] instanceof SequenceTrack) {
+ return (thisB._sequenceTrack = tracks[i]);
+ }
+ }
+ }
+ return null;
+ },
+
selectionAdded: function (selection) {
this.inherited(arguments);
@@ -2196,64 +2211,64 @@ var EditTrack = declare(DraggableFeatureTrack,
// I would think that this hack prevents users from selecting multiple
// features at bp level. Funnnily, that doesn't seem to be the case
// (verified against sevaral examples). And I don't know why.
- // $(this.getFeatDiv(selection.feature)).mousedown();
-
- // var feature = EditTrack.getTopLevelAnnotation(selection.feature);
- // var featureDiv = this.getFeatDiv(feature);
- // var seqTrack = this.browser.getSequenceTrack();
- // if (featureDiv) {
- // var strand = feature.get('strand');
-
- // var featureTop = $(featureDiv).position().top;
- // var scale = this.gview.bpToPx(1);
- // var charSize = seqTrack.getCharacterMeasurements();
- // if (scale >= charSize.w && this.useResiduesOverlay) {
- // // Highlight reading frame.
- // var readingFrame = this.getReadingFrame(feature);
- // seqTrack.highlightRF(readingFrame);
-
- // for (var bindex = this.firstAttached; bindex <= this.lastAttached; bindex++) {
- // this.browser.getStore('refseqs', _.bind(function(refSeqStore) {
- // if (refSeqStore) {
- // var block = this.blocks[bindex];
- // refSeqStore.getReferenceSequence(
- // {ref: this.refSeq.name, start: block.startBase, end: block.endBase},
- // function (seq) {
- // var top = featureTop - 2; // -2 hardwired adjustment to center
- // var addBP = true;
- // $('div.sequence', block.domNode).each(function () {
- // if ($(this).position().top === top) {
- // return (addBP = false);
- // }
- // });
-
- // if (addBP) {
- // // make a div to contain the sequences
- // var seqNode = document.createElement("div");
- // seqNode.className = "sequence";
- // seqNode.style.width = "100%";
- // seqNode.style.top = top + "px";
-
- // if (strand == '-' || strand == -1) {
- // seq = Util.complement(seq);
- // }
-
- // seqNode.appendChild(seqTrack._ntDiv(seq));
- // block.domNode.appendChild(seqNode);
- // }
- // });
- // }
- // }, this));
- // }
- // }
- // }
-
- // this.updateMenu();
+ $(this.getFeatDiv(selection.feature)).mousedown();
+
+ var feature = EditTrack.getTopLevelAnnotation(selection.feature);
+ var featureDiv = this.getFeatDiv(feature);
+ var seqTrack = this.getSequenceTrack();
+ if (featureDiv) {
+ var strand = feature.get('strand');
+
+ var featureTop = $(featureDiv).position().top;
+ var scale = this.gview.bpToPx(1);
+ var charSize = seqTrack.getCharacterMeasurements();
+ if (scale >= charSize.w && this.useResiduesOverlay) {
+ // Highlight reading frame.
+ var readingFrame = this.getReadingFrame(feature);
+ seqTrack.highlightRF(readingFrame);
+
+ for (var bindex = this.firstAttached; bindex <= this.lastAttached; bindex++) {
+ this.browser.getStore('refseqs', _.bind(function(refSeqStore) {
+ if (refSeqStore) {
+ var block = this.blocks[bindex];
+ refSeqStore.getReferenceSequence(
+ {ref: this.refSeq.name, start: block.startBase, end: block.endBase},
+ function (seq) {
+ var top = featureTop - 2; // -2 hardwired adjustment to center
+ var addBP = true;
+ $('div.sequence', block.domNode).each(function () {
+ if ($(this).position().top === top) {
+ return (addBP = false);
+ }
+ });
+
+ if (addBP) {
+ // make a div to contain the sequences
+ var seqNode = document.createElement("div");
+ seqNode.className = "sequence";
+ seqNode.style.width = "100%";
+ seqNode.style.top = top + "px";
+
+ if (strand == '-' || strand == -1) {
+ seq = Util.complement(seq);
+ }
+
+ seqNode.appendChild(seqTrack._ntDiv(seq));
+ block.domNode.appendChild(seqNode);
+ }
+ });
+ }
+ }, this));
+ }
+ }
+ }
+
+ this.updateMenu();
},
selectionRemoved: function (selection) {
- // var seqTrack = this.browser.getSequenceTrack();
- // seqTrack.unhighlightRF();
+ var seqTrack = this.getSequenceTrack();
+ seqTrack.unhighlightRF();
this.inherited(arguments);
@@ -79,7 +79,6 @@ return declare([BlockBased, ExportMixin],
* Highlight the given reading frame.
*/
highlightRF: function (readingFrame) {
- console.log("highlightRF invoked");
// Construct jQuery selector from the given reading frame.
var selector = '.aa';
if (readingFrame > 0) {
@@ -15,7 +15,11 @@ require({
{
location: '../plugins/AnnotationEditor/jslib/genevalidator',
name: 'genevalidator', main: 'gvapi'
- }
+ },
+ {
+ location: '../plugins/AnnotationEditor/jslib/tripleclick',
+ name: 'tripleclick', main: 'jquery.tripleclick'
+ },
]
},
[],
@@ -0,0 +1,63 @@
+define(['jquery'], function ($) {
+ // setup jQuery special 'tripleclick' event
+ (function ($) {
+
+ // A collection of elements to which the tripleclick event is bound.
+ var elems = $([])
+
+ // Initialize the clicks counter and last-clicked timestamp.
+ , clicks = 0
+ , last = 0;
+
+
+ // Time in ms allowed to elapse between consecutive clicks for it
+ // to register as tripleclick.
+ $.tripleclickThreshold = 250;
+
+ // Special event definition.
+ $.event.special.tripleclick = {
+ setup: function () {
+ // Add this element to the internal collection.
+ elems = elems.add( this );
+
+ // If this is the first element to which the event has been bound,
+ // bind a handler to document to catch all 'click' events.
+ if (elems.length === 1) {
+ $(document).bind('click', tripleclick_counter);
+ }
+ },
+ teardown: function (){
+ // Remove this element from the internal collection.
+ elems = elems.not(this);
+
+ // If this is the last element removed, remove the document 'click'
+ // event handler that "powers" this special event.
+ if (elems.length === 0) {
+ $(document).unbind('click', tripleclick_counter);
+ }
+ }
+ };
+
+ // This function is executed every time an element is clicked.
+ function tripleclick_counter (event) {
+ var elem = $(event.target);
+
+ // If more than `threshold` time has passed since the last click, reset
+ // the clicks counter.
+ if (event.timeStamp - last > $.tripleclickThreshold) {
+ clicks = 0;
+ }
+
+ // Update the last-clicked timestamp.
+ last = event.timeStamp;
+
+ // Increment the clicks counter. If the counter has reached 3, trigger
+ // the "tripleclick" event and reset the clicks counter to 0. Trigger
+ // bound handlers using triggerHandler so the event doesn't propagate.
+ if (++clicks === 3) {
+ elem.trigger('tripleclick', event.pageX);
+ clicks = 0;
+ }
+ };
+ })($);
+});

0 comments on commit 009e3fc

Please sign in to comment.