Skip to content

Commit

Permalink
Merge pull request #1311 from kbase/sct-380
Browse files Browse the repository at this point in the history 
I have the power!
  • Loading branch information
@thomasoniii
thomasoniii committed May 14, 2018
2 parents 4d93de3 + a20ea6e commit 955ee3b
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 63 deletions.
17 changes: 1 addition & 16 deletions ...ion/static/kbase/js/widgets/function_output/kbaseDifferentialExpressionMatrixSetViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,22 +46,7 @@ define (
this._super(options);

var $self = this;
if (options._obj_info) {
$self.obj_info = options._obj_info;
$self.obj_ref = $self.obj_info.ws_id + '/' +
$self.obj_info.id + '/' +
$self.obj_info.version;
$self.link_ref = $self.obj_info.ws_id + '/' +
$self.obj_info.name + '/' +
$self.obj_info.version;
//$self.update_overview_info_from_nar_info($self.obj_info);
} else {
$self.obj_ref = $self.options.wsId + '/' +
$self.options.objId;
$self.link_ref = $self.obj_ref;
$self.set_overview.name = $self.options.objId;
//$self.set_overview.link_ref = $self.link_ref;
}
$self.obj_ref = this.options.upas.obj_ref;

var $volcanoDiv = $.jqElem('div');
var $volcano = new KBaseExpressionVolcanoPlot($volcanoDiv, {
Expand Down
200 changes: 153 additions & 47 deletions kbase-extension/static/kbase/js/widgets/function_output/kbaseExpressionVolcanoPlot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ define([
var self = this;
//login related error
var $container = this.$elem;
$container.empty();
if (!self.token) {
$container.empty();
$container.append("<div>[Error] You're not logged in</div>");
return;
}
Expand Down Expand Up @@ -131,10 +131,10 @@ define([
colorx : function (d, pv, fc) {

var x = d.log2fc_f
var y = d.p_value_f
var y = d.log_q_value

if ( Math.abs(x) > fc && Math.abs(y) > pv ) {
if (d.significant === 'yes'){
if (true || d.significant === 'yes'){
return "red";
}
}
Expand All @@ -155,12 +155,12 @@ define([
var overviewTable = self.data('overview-table');


var counter=0;
self.counter=0;
for (i=0; i < text.condition_pairs.length; i++){
c1 = text.condition_pairs[i].condition_1
c2 = text.condition_pairs[i].condition_2
if (c1 === this.options.sample1 && c2 === this.options.sample2 || c1 === this.options.sample2 && c2 === this.options.sample1){
counter = i
self.counter = i
}
}

Expand Down Expand Up @@ -224,6 +224,53 @@ define([
)
)
)
.append(
$.jqElem('table')
.css({margin : 'auto'})
.append(
$.jqElem('tr')
.append(
$.jqElem('td').append('Min -Log10(q-value)').append(
$.jqElem('input')
.attr('id', 'minY')
.addClass('form-control')
.on('change', function(e) {
self.options.ymin = parseFloat(e.target.value);
self.renderSVG();
})
))
.append(
$.jqElem('td').append('Max -Log10(q-value)').append(
$.jqElem('input')
.addClass('form-control')
.attr('id', 'maxY')
.on('change', function(e) {
self.options.ymax = parseFloat(e.target.value);
self.renderSVG();
})
))
.append(
$.jqElem('td').append('Min Log2(Fold Change)').append(
$.jqElem('input')
.attr('id', 'minX')
.addClass('form-control')
.on('change', function(e) {
self.options.xmin = parseFloat(e.target.value);
self.renderSVG();
})
))
.append(
$.jqElem('td').append('Max Log2(Fold Change)').append(
$.jqElem('input')
.attr('id', 'maxX')
.addClass('form-control')
.on('change', function(e) {
self.options.xmax = parseFloat(e.target.value);
self.renderSVG();
})
))
)
)
.append(
$.jqElem('table')
.css({ margin : 'auto', marginTop : '10px' })
Expand Down Expand Up @@ -327,12 +374,12 @@ define([
var cc = self.colorx(d, pv, fc);
if ( cc === "red" ) {
redRows.push([
d.gene,
d.gene_function,
d.value_1,
d.value_2,
d.log2fc_text,
d.p_value_f,
d.gene || '',
d.gene_function || '',
d.value_1 || '',
d.value_2 || '',
d.log2fc_text || '',
d.log_q_value || '',
]);
}
return cc;
Expand All @@ -353,15 +400,51 @@ define([
.attr("fill", function(d) { return self.colorx(d, pv, fc); });
});

self.text = text;

var svgWidth = 800;
var svgHeight = 350;
var padding = 100;
self.svgWidth = 800;
self.svgHeight = 350;
self.padding = 100;

var svg = d3.select(self.data('chart')[0])
var svg = self.svg = d3.select(self.data('chart')[0])
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
.attr("width", self.svgWidth)
.attr("height", self.svgHeight);

self.svg.append("text")
.attr("class", "xlabel")
.attr("text-anchor", "end")
.attr("x", self.svgWidth/2)
.attr("y", self.svgHeight-40)
.text("Log2(Fold change)");

self.svg.append("text")
.attr("class", "ylabel")
.attr("text-anchor", "end")
.attr("y", 40)
.attr("x", -self.svgHeight/2+50)
.attr("transform", "rotate(-90)")
.text("-Log10(q-value)");

self.svg.append("g")
.attr("class", "xaxis axis")
.attr("transform", "translate(0," + (self.svgHeight - self.padding + 20) + ")");

self.svg.append("g")
.attr("class", "yaxis axis")
.attr("transform", "translate(" + (self.padding-10) + ",0)");

self.renderSVG();
},

renderSVG : function() {

var self = this;
var text = self.text;
var counter = self.counter;
var padding = self.padding;

var svg = self.svg

var highlightElement = null;

Expand All @@ -384,6 +467,26 @@ define([


var data = text.condition_pairs[counter].voldata;

// add in the -log_q_values.
var min_log_q_value = Number.MAX_VALUE;
data.forEach( function(d) {
if (d.q_value === 0) {
d.log_q_value = 'MIN';
}
else {
d.log_q_value = - Math.log10(parseFloat(d.q_value));
if (d.log_q_value < min_log_q_value) {
min_log_q_value = d.log_q_value;
}
}
});

data.forEach( function(d) {
if (d.log_q_value === 'MIN') {
d.log_q_value = min_log_q_value;
}
});
self.data( "cond1").text(text.condition_pairs[counter].condition_1);
self.data( "cond2").text(text.condition_pairs[counter].condition_2);

Expand All @@ -392,7 +495,7 @@ define([
// name = gene
// f = significant
// x = log2fc_fa
// y = p_value_f
// y = log_q_value

// tables contents
// Gene
Expand All @@ -406,14 +509,29 @@ define([
// Range slider


var xmin = d3.min(data, function(d) { return parseFloat(d.log2fc_f); });
var xmax = d3.max(data, function(d) { return parseFloat(d.log2fc_f); });
var xmin = this.options.xmin || d3.min(data, function(d) { return parseFloat(d.log2fc_f); });
var xmax = this.options.xmax || d3.max(data, function(d) { return parseFloat(d.log2fc_f); });

var ymin = d3.min(data, function(d) { return parseFloat(d.p_value_f); });
var ymax = d3.max(data, function(d) { return parseFloat(d.p_value_f); });
var ymin = this.options.ymin || d3.min(data, function(d) { return parseFloat(d.log_q_value); });
var ymax = this.options.ymax || d3.max(data, function(d) { return parseFloat(d.log_q_value); });

self.data('minX').val(xmin);
self.data('maxX').val(xmax);
self.data('minY').val(ymin);
self.data('maxY').val(ymax);


data = data.filter( function(d) {
if ( !Number.isNaN(parseFloat(d.log2fc_f)) && !Number.isNaN(parseFloat(d.log_q_value))
&& d.log2fc_f >= xmin && d.log2fc_f <= xmax
&& d.log_q_value >= ymin && d.log_q_value <= ymax ) {
return true;
}
else {
return false;
}
});

//$("#fc").slider({tooltip_position:'bottom', step: 0.01, min :xmin, max:xmax, value: [xmin.toFixed(2),xmax.toFixed(2)]});
//$("#pvalue").slider({tooltip_position:'bottom', step:0.01, min :ymin, max:ymax, value: [ymin.toFixed(2),ymax.toFixed(2)]});
//
Expand Down Expand Up @@ -461,6 +579,7 @@ define([
var slider2Update = _.debounce(function(){
pv = self.data( "pvalue").val();
self.data('selpval').text(parseFloat(pv).toFixed(2));

var numCircles = svg.selectAll("circle").size();
var seenCircles = 0;
svg.selectAll("circle")
Expand Down Expand Up @@ -491,22 +610,23 @@ define([

var xScale = d3.scale.linear()
.domain([xmin,xmax])
.range([padding, svgWidth - padding]);
.range([padding, self.svgWidth - padding]);

var yScale = d3.scale.linear()
.domain([ymin, ymax])
.range([svgHeight - padding, 10]);

.range([self.svgHeight - padding, 10]);

svg.selectAll("circle")
.data(data)
.enter()
.append("svg:circle")
.append("svg:circle");
svg.selectAll("circle")
.data(data)
.attr("cx", function(d) {
return xScale(parseFloat(d.log2fc_f));
})
.attr("cy", function(d) {
return yScale(parseFloat(d.p_value_f));
return yScale(parseFloat(d.log_q_value));
})
.attr("r", 3)
.attr("fill", function(d) { return self.colorx(d, pv, fc); })
Expand All @@ -523,6 +643,10 @@ define([
.on("click", info)
.attr("id", function(d) { return d.significant; });

svg.selectAll("circle")
.data(data)
.exit().remove();




Expand All @@ -547,30 +671,12 @@ define([
.ticks(10);


svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (svgHeight - padding + 20) + ")")
svg.selectAll('.xaxis')
.call(xAxis);

svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + (padding-10) + ",0)")
svg.selectAll('.yaxis')
.call(yAxis);

svg.append("text")
.attr("class", "xlabel")
.attr("text-anchor", "end")
.attr("x", svgWidth/2)
.attr("y", svgHeight-40)
.text("Log2(Fold change)");

svg.append("text")
.attr("class", "ylabel")
.attr("text-anchor", "end")
.attr("y", 40)
.attr("x", -svgHeight/2+50)
.attr("transform", "rotate(-90)")
.text("-Log10(q-value)");

},

Expand Down

0 comments on commit 955ee3b

Please sign in to comment.