Commit fbb7234f authored by lcottret's avatar lcottret
parents 999c527a b00ffc5c
...@@ -7,56 +7,48 @@ ...@@ -7,56 +7,48 @@
$rh_sets->{"set2"} = ["id2,id3,id4"]; $rh_sets->{"set2"} = ["id2,id3,id4"];
$rh_sets->{"set3"} = ["id1,id2,id5,id6"]; $rh_sets->{"set3"} = ["id1,id2,id5,id6"];
$rh_sets->{"set4"} = ["id3,id1"]; $rh_sets->{"set4"} = ["id3,id1"];
&CreateJsonVenn($rh_sets, &CreateJsonVenn($rh_sets, $outdir, $title);
"/home/lcottret/workspaces/workspaceBBRIC/bbric-bioinfo/orthomcl/site/data/examples/venn/",
"../../../../web/js/ext/jquery-min.js",
"../../../../web/js/ext/jvenn-min.js" );
Prerequisite : General, JSON, File::Path, the jvenn libray installed Prerequisite : General, JSON, File::Path, the jvenn libray installed
Function : creates a json for jvenn from a set of ids Function : creates a json for jvenn from a set of ids
Returns : nothing Returns : nothing
Args : 1. a hashref containing arrays of strings containing the ids separated by commas 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 2. a directory path to save the json and venn.html
3. the path of jquery.js (relative to the directory path set above) 3. a title for the html page
4. the path of jvenn.min.js (relative to the directory path set above) Globals : none
Access : public
TODO :
Globals :
=cut =cut
sub CreateJsonVenn sub CreateJsonVenn
{ {
my ($rh_sets, $outdir, $jquery_lib, $jvenn_lib) = @_; my ($rh_sets, $outdir, $title) = @_;
my %h_param = (
'series' => [],
'displayStat' => 'true'
);
my @a_series = ();
foreach my $name (keys %{$rh_sets}) foreach my $name (keys %{$rh_sets})
{ {
my $rh_serie = {}; my $rh_serie = {};
$rh_serie->{"name"} = $name; $rh_serie->{"name"} = $name;
my $ra_set = $rh_sets->{$name}; my $ra_set = $rh_sets->{$name};
$rh_serie->{"data"} = $ra_set; $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) if (!-d $outdir)
{ {
make_path($outdir); make_path($outdir);
} }
# creates the js file my $json_file = "$outdir/series.json";
my $js_file = "$outdir/series.js"; my $fh_output = &GetStreamOut($json_file);
my $fh_output = &GetStreamOut($js_file); print $fh_output "$json_series";
print $fh_output "\$(document).ready(function(){\$('#jvenn-container').jvenn(" . $json . ");});";
$fh_output->close(); $fh_output->close();
...@@ -68,6 +60,7 @@ sub CreateJsonVenn ...@@ -68,6 +60,7 @@ sub CreateJsonVenn
while (my $line = <$fh_html_template>) while (my $line = <$fh_html_template>)
{ {
$line =~ s/%ROOT_URL%/$root_url/g; $line =~ s/%ROOT_URL%/$root_url/g;
$line =~ s/%TITLE%/$title/g;
print $fh_html_out $line; print $fh_html_out $line;
} }
$fh_html_out->close; $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 @@ ...@@ -2,20 +2,161 @@
<head> <head>
<script type="text/javascript" src="%ROOT_URL%/web/js/ext/jquery-min.js"> <link href="%ROOT_URL%/web/resources/css/bootstrap.min.css" rel="stylesheet"type="text/css">
<script type="text/javascript" src="%ROOT_URL%/web/js/ext/jvenn-min.js">
<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> </head>
<body> <body>
<div id="jvenn-container"></div>
<br /> <div class="container">
<br /> <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> </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