Commit fbb7234f authored by lcottret's avatar lcottret
parents 999c527a b00ffc5c
......@@ -7,56 +7,48 @@
$rh_sets->{"set2"} = ["id2,id3,id4"];
$rh_sets->{"set3"} = ["id1,id2,id5,id6"];
$rh_sets->{"set4"} = ["id3,id1"];
&CreateJsonVenn($rh_sets,
"/home/lcottret/workspaces/workspaceBBRIC/bbric-bioinfo/orthomcl/site/data/examples/venn/",
"../../../../web/js/ext/jquery-min.js",
"../../../../web/js/ext/jvenn-min.js" );
&CreateJsonVenn($rh_sets, $outdir, $title);
Prerequisite : General, JSON, File::Path, the jvenn libray installed
Function : creates a json for jvenn from a set of ids
Returns : nothing
Args : 1. a hashref containing arrays of strings containing the ids separated by commas
2. a directory path to save the json and the js file
3. the path of jquery.js (relative to the directory path set above)
4. the path of jvenn.min.js (relative to the directory path set above)
Access : public
TODO :
Globals :
2. a directory path to save the json and venn.html
3. a title for the html page
Globals : none
=cut
sub CreateJsonVenn
{
my ($rh_sets, $outdir, $jquery_lib, $jvenn_lib) = @_;
my %h_param = (
'series' => [],
'displayStat' => 'true'
);
my ($rh_sets, $outdir, $title) = @_;
my @a_series = ();
foreach my $name (keys %{$rh_sets})
{
my $rh_serie = {};
$rh_serie->{"name"} = $name;
my $ra_set = $rh_sets->{$name};
$rh_serie->{"data"} = $ra_set;
push(@{$h_param{'series'}}, $rh_serie);
push(@a_series, $rh_serie);
}
my $json = to_json(\%h_param);
my $json_series = to_json(\@a_series, {pretty => 1});
if (!-d $outdir)
{
make_path($outdir);
}
# creates the js file
my $js_file = "$outdir/series.js";
my $fh_output = &GetStreamOut($js_file);
print $fh_output "\$(document).ready(function(){\$('#jvenn-container').jvenn(" . $json . ");});";
my $json_file = "$outdir/series.json";
my $fh_output = &GetStreamOut($json_file);
print $fh_output "$json_series";
$fh_output->close();
......@@ -68,6 +60,7 @@ sub CreateJsonVenn
while (my $line = <$fh_html_template>)
{
$line =~ s/%ROOT_URL%/$root_url/g;
$line =~ s/%TITLE%/$title/g;
print $fh_html_out $line;
}
$fh_html_out->close;
......
This diff is collapsed.
.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px 3px 20px;height:100%;font-weight:700}.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}
\ No newline at end of file
......@@ -2,20 +2,161 @@
<head>
<script type="text/javascript" src="%ROOT_URL%/web/js/ext/jquery-min.js">
<script type="text/javascript" src="%ROOT_URL%/web/js/ext/jvenn-min.js">
<link href="%ROOT_URL%/web/resources/css/bootstrap.min.css" rel="stylesheet"type="text/css">
<script type="text/javascript" src="series.js"></script>
<script src="%ROOT_URL%/web/js/ext/jquery.min.js"></script>
<script type="text/javascript" src="%ROOT_URL%/web/js/ext/bootstrap.min.js"></script>
<script type="text/javascript" src="%ROOT_URL%/web/js/ext/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="%ROOT_URL%/web/resources/css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="%ROOT_URL%/web/js/ext/jvenn.min.js"></script>
</head>
<body>
<div id="jvenn-container"></div>
<br />
<br />
<div class="container">
<h1>%TITLE%</h1>
<div class="example">
<div class="form-inline">
<div class="form-group">
<label for="venn-type">Draw</label>
<select id="venn-type" class="form-control">
<option value="classic">classic</option>
<option value="edwards">Edwards'</option>
</select>
<strong>diagram for datasets</strong>
</div>
<div class="form-group">
<select id="select-series" multiple="multiple"></select>
</div>
<button id="submit" type="submit" class="btn btn-primary">Draw</button>
<div class="form-group">
<div id="jvenn-search">
<label for="search-field">Look for</label>
<input id="search-field" type="text" style="margin-top:8px" placeholder="enter an element name..."/>
<span id="search-status" class="label label-info" style="vertical-align: 16px; margin-left: -35px;"></span>
</div>
</div>
</div>
<div id="error" class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>No more than 6 selected dataset
</div>
</body>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$('#select-series').multiselect({buttonWidth: '600px',numberDisplayed: 6});
$('#jvenn-search').hide();
$('#jvenn-list').hide();
$('#error').hide();
var allSeries = [];
$.getJSON( "series.json", function( data )
{
var options = [];
$.each( data, function( i, serie )
{
var item = {};
item.label = serie['name'];
item.title = serie['name'];
item.value = i;
options.push( item );
allSeries.push(serie);
});
$('#select-series').multiselect('dataprovider', options);
});
$( "#submit" ).click(function()
{
var selectedSeries = $('#select-series option:selected');
if ( selectedSeries.length > 6 )
{
$('#error').show();
$('#jvenn-search').hide();
$('#jvenn-list').hide();
$('#jvenn-container').hide();
}
else
{
var selected = [];
$(selectedSeries).each(function(index, serie){
selected.push(allSeries[$(this).val()]);
});
$('#error').hide();
$('#jvenn-search').show();
$('#jvenn-list').show();
$('#jvenn-container').show();
console.log($('#venn-type').find(":selected").val());
$('#jvenn-container').jvenn({
displayStat: true,
displayMode: $('#venn-type').val(),
series: selected,
searchInput: $("#search-field"),
searchStatus: $("#search-status"),
searchMinSize: 3,
fnClickCallback: function() {
var value = "";
if (this.listnames.length == 1) {
value += "Elements only in ";
} else {
value += "Common elements in ";
}
for (name in this.listnames) {
value += this.listnames[name] + " ";
}
value += ":\n";
for (val in this.list) {
value += this.list[val] + "\n";
}
$("#names").val(value);
}
});
}
});
});
</script>
<div id="jvenn-container"></div>
<div id="jvenn-list" class="row-fluid">
<p> Click on a venn diagram figure to display the linked elements: </p>
<textarea readonly id="names" style="width: 100%;" wrap="off" rows="10"></textarea>
</div>
</div>
</body>
</html>
Markdown is supported
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