diff --git a/scope-client/src/components/common/Histogram.jsx b/scope-client/src/components/common/Histogram.jsx index c1444e54..2d1cbf58 100644 --- a/scope-client/src/components/common/Histogram.jsx +++ b/scope-client/src/components/common/Histogram.jsx @@ -85,7 +85,7 @@ export default class AUCThreshold extends Component { BackendAPI.getConnection().then((gbc) => { gbc.services.scope.Main.getCellAUCValuesByFeatures(query, (err, response) => { if(response !== null) { - this.renderAUCGraph(response.value) + this.renderAUCGraph(feature, response.value); this.handleThresholdChange(this.props.value); } else { this.renderAUCGraph([]) @@ -94,7 +94,7 @@ export default class AUCThreshold extends Component { }); } - renderAUCGraph(points) { + renderAUCGraph(feature, points) { var formatCount = d3.format(",.0f"); var svg = d3.select("#thresholdSVG"+this.props.field); var width = svg.node().getBoundingClientRect().width @@ -134,16 +134,17 @@ export default class AUCThreshold extends Component { .attr("height", function(d) { return height - y(d.length); }) .attr("stroke", "#000") .attr("fill", this.props.color) - .attr("opacity", .6); + .attr("opacity", .5); g.append("g") .attr("class", "threshold") .append("line") - .attr("stroke", "red") - .attr("x0", 0) + .attr("stroke", this.props.color) + .attr("stroke-width", "3px") .attr("x1", 0) - .attr("y0", 0) - .attr("y1", height); + .attr("x2", 0) + .attr("y1", 0) + .attr("y2", height); g.append("g") .attr("class", "axis axis--x") @@ -155,6 +156,36 @@ export default class AUCThreshold extends Component { .attr("transform", "translate(0, 0)") .call(d3.axisLeft(y)); + let metadata = BackendAPI.getActiveLoomMetadata(); + let component = this; + if (metadata.fileMetaData.hasRegulonsAUC) { + let gt = g.append("g") + .attr("class", "autoThresholds"); + metadata.regulonMetaData.regulons.map((regulon) => { + if (regulon.name == feature.value) { + regulon.autoThresholds.map((t) => { + let tx = x(t.threshold); + gt.append("text") + .style("cursor", "pointer") + .attr("text-anchor", "middle") + .attr("transform", "translate("+tx+",5)") + .text(t.name) + .on('click', function() { + component.handleThresholdChange(t.threshold); + }) + .append('title') + .text(t.name); + gt.append("line") + .attr("stroke", "blue") + .attr("x1", tx) + .attr("x2", tx) + .attr("y1", 10) + .attr("y2", height); + }); + } + }) + } + } } diff --git a/scope-client/src/components/common/Viewer.jsx b/scope-client/src/components/common/Viewer.jsx index 2453f2f8..61103895 100644 --- a/scope-client/src/components/common/Viewer.jsx +++ b/scope-client/src/components/common/Viewer.jsx @@ -139,7 +139,7 @@ export default class Viewer extends Component { const cy = y * 15 + this.renderer.height / 2; s.position.x = cx; s.position.y = cy; - s.blendMode = PIXI.BLEND_MODES.SCREEN; + s.blendMode = PIXI.BLEND_MODES.ADD; s._originalData = {x: x, y: y}; return s; }