Skip to content

Commit

Permalink
set min/max density in dialog window
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhofmei
bhofmei committed Nov 21, 2016
1 parent 5d9731f commit 2e11299
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 67 deletions.
27 changes: 22 additions & 5 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,39 @@ div.nuc-dens-sublabel.last {
border-bottom: 1px solid #999;
}

/* dialog parameter table options */
div#nuc-dens-parameters{
border-bottom: 1px solid lightgray;
padding-bottom: 5px;
}
.nuc-dens-dialog-tbl{
margin: 0px 5px;
}
table#nuc-dens-tbl-param{
margin-bottom: 5px;
}
div#nuc-dens-parameters .dijitTextBox{
margin: 2px 0px;
}

div#nuc-dens-parameters .dijitTextBox div.dijitInputContainer .dijitInputInner{
margin-left: 0.1em !important;
}
.nuc-dens-param-lbl{
display: inline-block;
width: 100px;
float: right;
margin-right: 3px
}
.nuc-dens-param-wnd-spin-col{
padding-right: 5px;
}

/* dialog table options */
/* dialog context table options */
#nuc-dens-contexts{
max-height: 400px;
overflow: auto;
}
table#nuc-dens-tbl{
border-collapse: collapse;
margin-top: 3px;
margin-top: 5px;
}
#nuc-dens-tbl th{
font-weight: bold;
Expand Down Expand Up @@ -104,3 +116,8 @@ td.nuc-dens-tbl-clr-view-col div.dijitTextBox input.nuc-dens-tbl-txt
margin: 0.1em;
}

/* other dialog settings */
.nuc-dens-dialog div.infoDialogActionBar{
padding-top: 0.5em;
}

120 changes: 84 additions & 36 deletions js/View/Dialog/NucleotideDensityDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,11 @@ function(
title: 'Set Nucleotide Density Track Options',

constructor: function(args) {
this.windowSize = args.windowSize || 100;
this.windowDelta = args.windowDelta || 10;
this.browser = args.browser;
this.windowSize = args.windowSize || 100;
this.windowDelta = args.windowDelta || 10;
this.minScore = args.minScore || 0;
this.maxScore = args.maxScore || 1;
this.browser = args.browser;
this.contexts = args.contexts || [];
this.colors = args.colors;
this.colorType = ColorHandler.getColorType(this.colors);
Expand All @@ -74,7 +76,9 @@ function(
onClick: lang.hitch(this, function() {
var windowSize = +this.windowSizeSpinner.getValue();
var windowDelta = +this.windowDeltaSpinner.getValue();
if (isNaN(windowSize) || isNaN(windowDelta)) {
var minScore = +this.minDensitySpinner.getValue();
var maxScore = +this.maxDensitySpinner.getValue();
if (isNaN(windowSize) || isNaN(windowDelta) || isNaN(minScore) || isNaN(maxScore)) {
return;
}
var returnCtxA = array.map(this.contextInputs, function(input){
Expand All @@ -87,7 +91,7 @@ function(
//console.log(returnCtx);
var returnClr = this._getColorCallback();

this.setCallback && this.setCallback(windowSize, windowDelta, returnCtx, returnClr);
this.setCallback && this.setCallback(windowSize, windowDelta, minScore, maxScore, returnCtx, returnClr);
this.hide();
})
}).placeAt(actionBar);
Expand All @@ -101,26 +105,6 @@ function(
}).placeAt(actionBar);
},

_getColorCallback: function(){
var thisB = this;
if(this.colorType === 'random')
return 'random';
else if(this.colorType === 'single')
return this.singleColor;
else {
var outObj = {};
var cnt=0;
// loop through context inputs
array.forEach(thisB.contextInputs, function(ctx){
if(ctx.value !== ''){
outObj[ctx.value] = thisB.indivColors[cnt];
}
cnt++;
});
return outObj;
}
},

show: function(/* callback */) {
dojo.addClass(this.domNode, 'nuc-dens-dialog');

Expand All @@ -141,29 +125,73 @@ function(

_createTopPane: function(obj){
var thisB = this;
this.windowSizeSpinner = new NumberSpinner({
// create table for these parameters
var tblo = domConstr.create('table',{id:'nuc-dens-tbl-param', className: 'nuc-dens-dialog-tbl'}, obj);
var widths = [100, 75, 75, 50];
// delete, ctx, color preview, color input
for(var i=0;i<widths.length; i++){
domConstr.create('col',{width:widths[i]+'px'},tblo);
}
var tbl = domConstr.create('tbody',{},tblo);
var row, data0, data1, data2, data3;

// row 1 - window size and min score
row = domConstr.create('tr', {}, tbl);
// window size
data0 = domConstr.create('td',{}, row);
domConstr.create('span',{className: 'nuc-dens-param-lbl', innerHTML: 'Window size (bp)'}, data0);
data1 = domConstr.create('td',{className: 'nuc-dens-param-wnd-spin-col'}, row);
this.windowSizeSpinner = new NumberSpinner({
value: thisB.windowSize,
smallDelta: 10,
id: 'nuc-dens-window-size'
style: 'width:70px;'
});
/*domConstr.create('label', { for: 'nuc-dens-window-size', innerHTML: 'Window size (bp)', className: 'nuc-dens-param-lbl' }, obj);*/
this.windowSizeSpinner.placeAt(data1);

// min density
data2 = domConstr.create('td',{className: 'nuc-dens-param-dens-col'}, row);
domConstr.create('span',{className: 'nuc-dens-param-lbl', innerHTML: 'Min. density'}, data2);
data3 = domConstr.create('td',{}, row);
this.minDensitySpinner = new NumberSpinner({
value: thisB.minScore,
smallDelta: 0.1,
constraints:{min:0,max:1,places:2},
style: 'width:50px;'
});
domConstr.create('label', { for: 'nuc-dens-window-size', innerHTML: 'Window size (bp)', className: 'nuc-dens-param-lbl' }, obj);
this.windowSizeSpinner.placeAt(obj);
domConstr.create('br',{},obj);
this.minDensitySpinner.placeAt(data3);

// row 2 - window delta and max score
row = domConstr.create('tr', {}, tbl);
// window size
data0 = domConstr.create('td',{}, row);
domConstr.create('span',{className: 'nuc-dens-param-lbl', innerHTML: 'Window delta (bp)'}, data0);
data1 = domConstr.create('td',{className: 'nuc-dens-param-wnd-spin-col'}, row);
this.windowDeltaSpinner = new NumberSpinner({
value: thisB.windowDelta,
smallDelta: 10,
id: 'nuc-dens-window-delta'
style: 'width:70px;'
});
this.windowDeltaSpinner.placeAt(data1);

// min density
data2 = domConstr.create('td',{className: 'nuc-dens-param-dens-col'}, row);
domConstr.create('span',{className: 'nuc-dens-param-lbl', innerHTML: 'Max. density'}, data2);
data3 = domConstr.create('td',{}, row);
this.maxDensitySpinner = new NumberSpinner({
value: thisB.maxScore,
smallDelta: 0.1,
constraints:{min:0,max:1,places:2},
style: 'width:50px;'
});
domConstr.create('label', { for: 'nuc-dens-window-delta', innerHTML: 'Window delta (bp)', className: 'nuc-dens-param-lbl' }, obj);
this.windowDeltaSpinner.placeAt(obj);
domConstr.create('br',{},obj);
this.maxDensitySpinner.placeAt(data3);

},

_createBottomPane: function(obj){
var thisB = this;
var tblo = domConstr.create('table',{id:'nuc-dens-tbl'}, obj);
var widths = [20, 75, 100, 100];
var tblo = domConstr.create('table',{id:'nuc-dens-tbl', className: 'nuc-dens-dialog-tbl'}, obj);
var widths = [25, 75, 100, 100];
// delete, ctx, color preview, color input
for(var i=0;i<widths.length; i++){
domConstr.create('col',{width:widths[i]+'px'},tblo);
Expand Down Expand Up @@ -440,6 +468,26 @@ function(
domStyle.set(this.colorInputs[newIndex].domNode, 'visibility', 'hidden');
},

_getColorCallback: function(){
var thisB = this;
if(this.colorType === 'random')
return 'random';
else if(this.colorType === 'single')
return this.singleColor;
else {
var outObj = {};
var cnt=0;
// loop through context inputs
array.forEach(thisB.contextInputs, function(ctx){
if(ctx.value !== ''){
outObj[ctx.value] = thisB.indivColors[cnt];
}
cnt++;
});
return outObj;
}
},

hide: function() {
this.inherited(arguments);
window.setTimeout(lang.hitch(this, 'destroyRecursive'), 500);
Expand Down
34 changes: 8 additions & 26 deletions js/View/Track/NucleotideDensity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,33 +50,9 @@ function(
showLabels: true,
colors: 'random',
bothStrands: false
/*style:{
pos_color: 'red',
neg_color: 'white'
}*/
});
},

/*getConfigColor: function( seqCtx ){
var color = this.config.colors;
// random
if(color === 'random')
return this.randomColors[seqCtx]
// other string
else if(typeof color === 'string')
return color
// array
else if(Array.isArray(color)){
var j = array.indexOf(seqCtx, this.config.context);
j %= color.length;
return color[j];
}
// object
else if(color.hasOwnProperty(seqCtx))
return color[seqCtx]
else
return this.randomColors[seqCtx]
},*/

getConfigColor: function(seqCtx){
return ColorHandler.getConfigColor(seqCtx, this.config.contexts, this.config.colors, this.randomColors);
Expand Down Expand Up @@ -191,6 +167,7 @@ function(
});
}
},

updateStaticElements: function(/** Object*/ coords) {
this.inherited(arguments);
var height = this.config.style.height - 2;
Expand All @@ -215,20 +192,25 @@ function(
iconClass: 'dijitIconFunction',
onClick: function() {
new NucDensDialog({
setCallback: function(ws, wd, ctx, clr) {
setCallback: function(ws, wd, minsc, maxsc, ctx, clr) {
track.config.windowSize = ws;
track.config.windowDelta = wd;
track.config.context = ctx;
track.config.colors = clr;
track.config.min_score = minsc;
track.config.max_score = maxsc;
track.browser.publish('/jbrowse/v1/c/tracks/replace', [track.config]);
},
windowSize: track.config.windowSize,
windowDelta: track.config.windowDelta,
minScore: track.config.min_score,
maxScore: track.config.max_score,
contexts: track.config.context,
colors: track.config.colors
}).show();
}
});
}
);
return options;
}
});
Expand Down

0 comments on commit 2e11299

Please sign in to comment.