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.