Skip to content

GitLab

Commit 4cf250e0 authored by Jerome Mariette's avatar Jerome Mariette
Browse files

add documentation page and index.html

parent c2d5d0a8
Hide whitespace changes
Inline Side-by-side
.project 0 → 100644
View file @ 4cf250e0
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>jflow</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
documentation.html 0 → 100644
View file @ 4cf250e0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jflow</title>
<!-- Le styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="src/js/datepicker.css" rel="stylesheet">
<link href="src/js/jflow.css" rel="stylesheet">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Jflow</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="./index.html">About</a></li>
<li class="active"><a href="./documentation.html">Documentation</a></li>
<li><a href="./example.html">Examples</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/jflow/index.php/Accueil">Sources</a></li>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Subhead ================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Hello, world!</h1>
<p class="lead">
This is a template for a simple workflow manager website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
</div>
</header>
<div class="container">
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li class="active"><a href="#plugin-insertion"><i class="icon-chevron-right"></i> plugin insertion</a></li>
<li><a href="#series"><i class="icon-chevron-right"></i> series</a></li>
<li><a href="#fnClickCallback"><i class="icon-chevron-right"></i> fnClickCallback</a></li>
<li><a href="#disableClick"><i class="icon-chevron-right"></i> disableClick</a></li>
<li><a href="#useValues"><i class="icon-chevron-right"></i> useValues</a></li>
<li><a href="#exporting"><i class="icon-chevron-right"></i> exporting</a></li>
</ul>
</div>
<div class="span9">
<section id="plugin-insertion">
<div class="page-header">
<h1>Plugin insertion</h1>
</div>
<p>In order to use jquery.venny, you need to import within your web page: </p>
<ul>
<li><a href="http://jquery.com/">jQuery v1.6.x or higher</a></li>
<li><a href="js/jquery.venny.min.js">jquery.venny.min.js</a></li>
</ul>
<p>Take a peek at the code below, a single function call to initialise the venn diagram is all it takes:</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}]
});
});
</pre>
</section>
<section id="series">
<div class="page-header">
<h1>series: the data in json</h1>
</div>
<p>The serie can be a list of value, the plugin will then compute itself the intersections between lists.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}]
});
});
</pre>
<p> The serie can also define the number of occurence for each intersections.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: {A: 'List 1',
B: 'List 2',
C: 'List 3',
D: 'List 4'},
data: {A: 340, B: 562, C: 620, D: 592,
AB: 639, AC: 456, AD: 257, BC: 915,
BD: 354, CD: 143, ABC: 552, ABD: 578,
ACD: 298, BCD: 613, ABCD: 148}
}]
});
});
</pre>
<p>Finaly, the serie can define the list values with the number of occurence for each value.</p>
<pre class="prettyprint">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5"],
values: [5, 15, 250, 20, 23]
},{
name: 'sample2',
data: ["Otu1", "Otu5", "Otu6", "Otu7"],
values: [234, 29, 239, 5]
}]
});
});
</pre>
</section>
<section id="fnClickCallback">
<div class="page-header">
<h1>fnClickCallback</h1>
</div>
<p>The callback function to execute when the user click on a number. </p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: {A: 'List 1',
B: 'List 2',
C: 'List 3',
D: 'List 4'},
data: {A: 340, B: 562, C: 620, D: 592,
AB: 639, AC: 456, AD: 257, BC: 915,
BD: 354, CD: 143, ABC: 552, ABD: 578,
ACD: 298, BCD: 613, ABCD: 148}
}],
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";
}
alert(value);
}
});
});
</pre>
</section>
<section id="disableClick">
<div class="page-header">
<h1>disableClick</h1>
</div>
<p>Default is false, if set to true, the click on the number si disabled.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}],
disableClick: true
});
});
</pre>
</section>
<section id="useValues">
<div class="page-header">
<h1>useValues</h1>
</div>
<p>Default is false, if set to true, the values provided in a mixte serie will be considered as the number of occurence of the element.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
values: [5, 15, 250, 20, 23, 58, 89]
}],
useValues: true
});
});
</pre>
</section>
<section id="exporting">
<div class="page-header">
<h1>exporting</h1>
</div>
<p>Default is true, an export module is added to the window, if set to false the export module is disabled.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
values: [5, 15, 250, 20, 23, 58, 89]
}],
exporting: false
});
});
</pre>
</section>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>Copyright © 2013, INRA | Designed by GenoToul Bioinfo and Sigenae teams.</p>
<p>Code licensed under ....</p>
<ul class="footer-links">
<li><a href="http://bioinfo.genotoul.fr/" target="_blank">GenoToul Bioinfo platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.sigenae.org/" target="_blank">Sigenae platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.international.inra.fr/" target="_blank">INRA</a></li>
</ul>
</div>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/holder/holder.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/application.js"></script>
<script src='src/js/jquery.tmpl.min.js' type='text/javascript'></script>
<script src='src/js/jquery.validate.js' type='text/javascript'></script>
<script src='src/js/jflow-activewf.js' type='text/javascript'></script>
<script src='src/js/jflow-availablewf.js' type='text/javascript'></script>
<script src='src/js/jflow-wfform.js' type='text/javascript'></script>
<script src='src/js/jflow-wfstatus.js' type='text/javascript'></script>
<script src="src/js/bootstrap-datepicker.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
/**
* Use the plugins
*/
$("#available-workflows-list").availablewf();
$("#available-workflows-list").on('select', function(event, workflow) {
$('#setAndRunModalLabel').html(workflow["name"] + " <small>" + workflow["help"] + "</small>");
$('#setAndRunModalBody').wfform({
workflowClass: workflow["class"],
displayRunButton: false,
displayResetButton: false
});
$('#setAndRunModal').modal();
});
$('#setAndRunModalBody').on('run', function(event, running_wf) {
$('#setAndRunModal').modal('hide');
$('#statusModalLabel').html(running_wf["name"] + " <small>" + running_wf["id"] + "</small>");
$('#statusModalBody').wfstatus({
workflowID: running_wf.id,
forceUsingWorkflow: running_wf
});
$('#statusModal').modal();
$("#active-workflows-list").activewf('reload');
});
$("#refresh_workflow").click(function(){ $('#statusModalBody').wfstatus('reload'); });
$("#reset_workflow").click(function(){ $('#setAndRunModalBody').wfform('reset'); });
$("#run_workflow").click(function(){ $('#setAndRunModalBody').wfform('run'); });
$("#active-workflows-list").activewf();
$("#active-workflows-list").on("select", function(event, workflow) {
$('#statusModalLabel').html(workflow["name"] + " <small>" + workflow["id"] + "</small>");
$('#statusModalBody').wfstatus({
workflowID: workflow["id"]
});
$('#statusModal').modal();
});
/**
* Use services
*/
$.ajax({
url: 'http://localhost:8080/get_available_workflows?callback=?',
dataType: "json",
success: function(data) {
var workflow_by_class = {};
$("#dropdown-workflows").append('<li class="nav-header">to run ...</li>');
for (var i in data) {
$("#dropdown-workflows").append('<li><a id="availablewf_btn_'+data[i]["class"]+'" href="#">' + data[i]["name"] + '</a></li>');
}
$("#dropdown-workflows").append('<li class="divider"></li>');
$("#dropdown-workflows").append('<li class="nav-header">to monitor ...</li>');
/*$.ajax({
url: 'http://localhost:8080/get_workflows_status?callback=?',
dataType: "json",
success: function(data) {
for (var i in data) {
$("#dropdown-workflows").append('<li><a id="activeewf_btn_'+data[i]["id"]+'" href="#">' + data[i]["id"] + '</a></li>');
}
}
});*/
}
});
});
</script>
</body>
</html>
\ No newline at end of file
example.html 0 → 100644
View file @ 4cf250e0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jflow</title>
<!-- Le styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="src/js/datepicker.css" rel="stylesheet">
<link href="src/js/jflow.css" rel="stylesheet">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<link href="http://twitter.github.com/bootstrap/assets/css/docs.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Jflow</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="./index.html">About</a></li>
<li><a href="./documentation.html">Documentation</a></li>
<li class="active"><a href="./example.html">Examples</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/jflow/index.php/Accueil">Sources</a></li>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Subhead ================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Hello, world!</h1>
<p class="lead">
This is a template for a simple workflow manager website. Use it as a starting point to create something more unique.
</p>
</div>
</header>
<div class="container">
<div class="row">
<div class="span6">
<div class="page-header">
<h1>Available workflows <small>to run</small></h1>
</div>
<div id="available-workflows-list"></div>
</div>
<div class="span6">
<div class="page-header">
<h1>Actives workflows <small>to monitor</small></h1>
</div>
<div id="active-workflows-list"></div>
</div>
</div>
<!-- setAndRunModal -->
<div id="setAndRunModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="setAndRunModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="setAndRunModalLabel"></h3>
</div>
<div id="setAndRunModalBody" class="modal-body"></div>
<div class="modal-footer">
<button id="reset_workflow" class="btn"><i class="icon-refresh"></i> Reset</button>
<button id="run_workflow" class="btn btn-primary"><i class="icon-cog icon-white"></i> Run</button>
</div>
</div>
<!-- statusModal -->
<div id="statusModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="statusModalLabel"></h3>
</div>
<div id="statusModalBody" class="modal-body"></div>
<div class="modal-footer">
<button id="refresh_workflow" class="btn"><i class="icon-refresh"></i> Refresh</button>
<button id="rerun_workflow" class="btn btn-primary"><i class="icon-cog icon-white"></i> ReRun</button>
</div>
</div>
</div> <!-- /container -->
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>Copyright © 2013, INRA | Designed by GenoToul Bioinfo and Sigenae teams.</p>
<p>Code licensed under ....</p>
<ul class="footer-links">
<li><a href="http://bioinfo.genotoul.fr/" target="_blank">GenoToul Bioinfo platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.sigenae.org/" target="_blank">Sigenae platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.international.inra.fr/" target="_blank">INRA</a></li>
</ul>
</div>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/holder/holder.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/application.js"></script>
<script src='src/js/jquery.tmpl.min.js' type='text/javascript'></script>
<script src='src/js/jquery.validate.js' type='text/javascript'></script>
<script src='src/js/jflow-activewf.js' type='text/javascript'></script>
<script src='src/js/jflow-availablewf.js' type='text/javascript'></script>
<script src='src/js/jflow-wfform.js' type='text/javascript'></script>
<script src='src/js/jflow-wfstatus.js' type='text/javascript'></script>
<script src="src/js/bootstrap-datepicker.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
/**
* Use the plugins
*/
$("#available-workflows-list").availablewf();
$("#available-workflows-list").on('select', function(event, workflow) {
$('#setAndRunModalLabel').html(workflow["name"] + " <small>" + workflow["help"] + "</small>");
$('#setAndRunModalBody').wfform({
workflowClass: workflow["class"],
displayRunButton: false,
displayResetButton: false
});
$('#setAndRunModal').modal();
});
$('#setAndRunModalBody').on('run', function(event, running_wf) {
$('#setAndRunModal').modal('hide');
$('#statusModalLabel').html(running_wf["name"] + " <small>" + running_wf["id"] + "</small>");
$('#statusModalBody').wfstatus({
workflowID: running_wf.id,
forceUsingWorkflow: running_wf
});
$('#statusModal').modal();
$("#active-workflows-list").activewf('reload');
});
$("#refresh_workflow").click(function(){ $('#statusModalBody').wfstatus('reload'); });
$("#reset_workflow").click(function(){ $('#setAndRunModalBody').wfform('reset'); });
$("#run_workflow").click(function(){ $('#setAndRunModalBody').wfform('run'); });
$("#active-workflows-list").activewf();
$("#active-workflows-list").on("select", function(event, workflow) {
$('#statusModalLabel').html(workflow["name"] + " <small>" + workflow["id"] + "</small>");
$('#statusModalBody').wfstatus({
workflowID: workflow["id"]
});
$('#statusModal').modal();
});
/**
* Use services
*/
$.ajax({
url: 'http://localhost:8080/get_available_workflows?callback=?',
dataType: "json",
success: function(data) {
var workflow_by_class = {};
$("#dropdown-workflows").append('<li class="nav-header">to run ...</li>');
for (var i in data) {
$("#dropdown-workflows").append('<li><a id="availablewf_btn_'+data[i]["class"]+'" href="#">' + data[i]["name"] + '</a></li>');
}
$("#dropdown-workflows").append('<li class="divider"></li>');
$("#dropdown-workflows").append('<li class="nav-header">to monitor ...</li>');
/*$.ajax({
url: 'http://localhost:8080/get_workflows_status?callback=?',
dataType: "json",
success: function(data) {
for (var i in data) {
$("#dropdown-workflows").append('<li><a id="activeewf_btn_'+data[i]["id"]+'" href="#">' + data[i]["id"] + '</a></li>');
}
}
});*/
}
});
});
</script>
</body>
</html>
\ No newline at end of file
index.html
View file @ 4cf250e0
......@@ -34,13 +34,11 @@
<a class="brand" href="#">Jflow</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/jflow/index.php/Accueil">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Workflows <b class="caret"></b></a>
<ul id="dropdown-workflows" class="dropdown-menu"></ul>
</li>
<li class="active"><a href="./index.html">About</a></li>
<li><a href="./documentation.html">Documentation</a></li>
<li><a href="./example.html">Examples</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/jflow/index.php/Accueil">Sources</a></li>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>