Commit 2505cefb authored by Caillat Michel's avatar Caillat Michel
Browse files

Added the plot of the cumulative distribution function in the Contour settings...

Added the plot of the cumulative distribution function in the Contour settings GUI and added the possibility to un/fold the histogram and cumulative distribution function part in the GUI
parent 30df9c86
......@@ -133,7 +133,7 @@ class ContoursViewer {
console.log("Number of features " + features.length);
this.source.addFeatures(features);
this.show();
console.log("importYAFITSContours: exiting");
console.log("importYAFITSContours: exiting");
}
hide() {
......@@ -174,7 +174,7 @@ class ContoursGUI {
this.text_of_quantiles.focus(() => {this.contoursMethod = "quantiles"});
this.number_of_bins.focus(() => {this.contoursMethod = "numberOfBins"});
this.modal.on("shown.bs.modal", this.drawHistogram.bind(this));
this.modal.on("shown.bs.modal", this.drawThings.bind(this));
// this.histBinsMethodAuto=$("#hist-bins-method-auto");
// this.histBinsMethodAuto.click(() => {this.contoursMethod="histBinsMethod", this.histBinsMethodName="auto"});
......@@ -198,6 +198,13 @@ class ContoursGUI {
console.log("connect : exting");
}
drawThings() {
console.log("drawThings: entering");
this.drawHistogram();
this.drawCumulativeDistribution();
console.log("drawThings: exiting");
}
drawHistogram() {
console.log("drawHistogram: entering");
console.log(JSON.stringify(this.sliceViewer.getStatistics()));
......@@ -209,6 +216,7 @@ class ContoursGUI {
data[i] = [bins[i], population[i]];
data[i+1] = [bins[i+1], population[i]];
}
let that=this;
Highcharts.chart("histogram",{
chart: {
type: 'line',
......@@ -227,6 +235,26 @@ class ContoursGUI {
yAxis: {
title: {text: "Population"}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
if (that.hasLevelsDefined())
that.levels.val(that.levels.val()+","+e.point.x);
else
that.levels.val(e.point.x);
that.levels.focus();
}
}
},
marker: {
lineWidth: 1
}
}
},
series:[
{
name:'population per bin',
......@@ -268,25 +296,73 @@ class ContoursGUI {
console.log("drawHistogram: exiting");
}
drawCumulativeDistribution() {
console.log("drawCumulativeDistribution: entering");
let histogram = this.sliceViewer.getStatistics()["histogram"];
let bins = histogram[1];
let cumulDist = this.sliceViewer.getStatistics()["cumuldist"];
let data = new Array(cumulDist.length);
for (i=0; i < data.length; i++){
data[i]=[bins[i], cumulDist[i]];
}
let that=this;
Highcharts.chart("cumulDist", {
chart: {
type: 'line',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: "Cumulative distribution function"
},
xAxis: {
title: {text: "Pixels values"},
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {text: "Cumulative distribution"}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
if (that.hasQuantilesDefined())
that.text_of_quantiles.val(that.text_of_quantiles.val()+","+e.point.y);
else
that.text_of_quantiles.val(e.point.y);
that.text_of_quantiles.focus();
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [
{
name:"cumulative distribution",
type: "line",
data: data
}
]
});
console.log("drawCumulativeDistribution: exiting");
}
hasLevelsDefined () {
var result = this.levels.val().trim() != "";
if (!result) {
alert ("No levels defined");
}
return result;
}
hasQuantilesDefined () {
var result = this.text_of_quantiles.val().trim() != "";
if (!result) {
alert("No quantiles defined");
}
return result;
}
//
// hasNumberOfBinsDefined () {
// return this.number_of_bins.val().trim() != "";
// }
parseTextOfLevels(){
let result = false;
......@@ -345,6 +421,9 @@ class ContoursGUI {
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'levels': levels}, 0, 4)}
}
}
else {
alert ("No levels defined");
}
break;
case "quantiles":
......@@ -354,6 +433,9 @@ class ContoursGUI {
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'quantiles': quantiles}, 0, 4)}
}
}
else {
alert("No quantiles defined");
}
break;
// casequantileserOfBins":
......@@ -400,60 +482,60 @@ class ContoursGUI {
</div> -->
<div id="ModalContoursForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Contours</h1>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Contours</h1>
</div>
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseHistogram" role="button" aria-expanded="false" aria-controls="collapseExample">
Use the histogram to choose the contours levels...
</a>
<!-- <label class="control-label">Use the histogram to choose the contours levels...</label> -->
<div class="collapse" id="collapseHistogram">
<div id="histogram" style="height: 400px">
</div>
</div>
<label class="control-label">Enter contour level[s] (comma separated if more than one)</label>
<div>
<input class="form-control" id="levels"></input>
</div>
</div>
<div class="form-group">
<a class="btn btn-primary" data-toggle="collapse" href="#collapseCumulDist" role="button" aria-expanded="false" aria-controls="collapseExample">
...or use the cumulative distribution function to choose the quantiles...
</a>
<!-- <label class="control-label">...or use the cumulative distribution function.</label> -->
<div class="collapse" id="collapseCumulDist">
<div id="cumulDist" style="height: 400px">
</div>
</div>
<label class="control-label">Enter cumulative distribution function value[s] (comma separated if more than one)</label>
<div>
<input class="form-control" id="text_of_quantiles"></input>
</div>
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<!-- <div class="form-group">
<label class="control-label">Using an histogram bins determination method"</label>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="hist-bins-method-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Method
</button>
<div class="dropdown-menu" id="hist-bins-methods-dropdown-menu" aria-labelledby="hist-bins-method-button">
<a id="hist-bins-method-auto" class="dropdown-item" href="#">auto</a>
<a id="hist-bins-method-fd" class="dropdown-item" href="#">Freedman-Diaconis</a>
<a id="hist-bins-method-sqrt" class="dropdown-item" href="#">Sqrt</a>
<a id="hist-bins-method-sturges" class="dropdown-item" href="#">Sturges</a>
</div>
</div>
</div> -->
<div class="form-group">
<div id="histogram" style="height: 400px">
</div>
<label class="control-label">Use the histogram to choose the contours levels</label>
<div>
<input class="form-control" id="levels"></input>
</div>
<!-- <label class="control-label">Using histogram bin edges. Enter a number of bins</label>
<div>
<input class="form-control" id="number_of_bins"></input>
</div> -->
</div>
<div class="form-group">
<label class="control-label">Using quantiles. Enter a comma separated list of quantiles</label>
<div>
<input class="form-control" id="text_of_quantiles"></input>
</div>
</div>
<div class="form-group">
<div>
<button type="button" class="btn btn-success" id="update-contours">Update</button>
</div>
</div>
<div class="form-group">
<div>
<button type="button" class="btn btn-success" id="clear-contours">Clear</button>
</div>
</div>
</form>
</div>
<div class="form-group">
<div>
<button type="button" class="btn btn-success" id="update-contours">Draw contours</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<div class="form-group">
<div>
<button type="button" class="btn btn-success" id="clear-contours">Clear</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal-dialog -->
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment