Skip to content

GitLab

Commit 48e7c222 authored by Jerome Mariette's avatar Jerome Mariette
Browse files

a start for the documentation

parent 762a481e
Show whitespace changes
Inline Side-by-side
docs/example1.html
View file @ 48e7c222
......@@ -36,8 +36,18 @@
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="./index.html">About</a></li>
<li><a href="./jflow-core.html">Core</a></li>
<li><a href="./jflow-plugin.html">Plugin</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Core
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <a href="./jflow-core.html">Jflow overview</a> </li>
<li> <a href="./jflow-core-component.html">Adding component</a> </li>
<li> <a href="./jflow-core-workflow.html">Adding workflow</a> </li>
</ul>
</li>
<li><a href="./jflow-plugin.html">JS Plugin</a></li>
<li class="active"><a href="./example1.html">Example 1</a></li>
<li><a href="./example2.html">Example 2</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/jflow/index.php/Accueil">Sources</a></li>
......@@ -51,7 +61,7 @@
<!-- Subhead ================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Hello, world!</h1>
<h1>Hello jflow!</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>
......@@ -104,7 +114,7 @@
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>Copyright © 2013, INRA | Designed by GenoToul Bioinfo and Sigenae teams.</p>
<p>Copyright © 2014, 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>
......
docs/example2.html
View file @ 48e7c222
......@@ -35,8 +35,18 @@
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="./index.html">About</a></li>
<li><a href="./jflow-core.html">Core</a></li>
<li><a href="./jflow-plugin.html">Plugin</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Core
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <a href="./jflow-core.html">Jflow overview</a> </li>
<li> <a href="./jflow-core-component.html">Adding component</a> </li>
<li> <a href="./jflow-core-workflow.html">Adding workflow</a> </li>
</ul>
</li>
<li><a href="./jflow-plugin.html">JS Plugin</a></li>
<li><a href="./example1.html">Example 1</a></li>
<li class="active"><a href="./example2.html">Example 2</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/jflow/index.php/Accueil">Sources</a></li>
......
docs/index.html
View file @ 48e7c222
......@@ -35,8 +35,18 @@
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="./index.html">About</a></li>
<li><a href="./jflow-core.html">Core</a></li>
<li><a href="./jflow-plugin.html">Plugin</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Core
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <a href="./jflow-core.html">Jflow overview</a> </li>
<li> <a href="./jflow-core-component.html">Adding component</a> </li>
<li> <a href="./jflow-core-workflow.html">Adding workflow</a> </li>
</ul>
</li>
<li><a href="./jflow-plugin.html">JS Plugin</a></li>
<li><a href="./example1.html">Example 1</a></li>
<li><a href="./example2.html">Example 2</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/jflow/index.php/Accueil">Sources</a></li>
......@@ -50,20 +60,41 @@
<!-- Subhead ================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Jflow: a flexible tool!</h1>
<h1>Jflow</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.
A fully scalable workflow management system that can easily be embedded in any WEB site,
providing all workflow management systems features and benefits to your project.
</p>
</div>
</header>
<div class="container">
<div class="marketing">
<p class="marketing-byline"></p>
<div class="row">
<div class="span4">
<h2>Customize jflow</h2>
<p>Learn how to insert the jflow plugin within your own application.</p>
<p><a class="btn" href="./jflow-plugin.html">more &raquo;</a></p>
</div>
<div class="span4">
<h2>Adding new components</h2>
<p>Your workflow requires new component, learn how to add new ones.</p>
<p><a class="btn" href="./jflow-core-component.html">more &raquo;</a></p>
</div>
<div class="span4">
<h2>Adding new workflows</h2>
<p>Learn how to add new workflows.</p>
<p><a class="btn" href="./jflow-core-workflow.html">more &raquo;</a></p>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>Copyright © 2013, INRA | Designed by GenoToul Bioinfo and Sigenae teams.</p>
<p>Copyright © 2014, 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>
......@@ -75,5 +106,11 @@
</div>
</footer>
<!-- Le javascript
================================================== -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/prettify.js"></script>
</body>
</html>
\ No newline at end of file
docs/jflow-core-component.html 0 → 100644
View file @ 48e7c222
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jvenn</title>
<!-- Les styles -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/docs.css" rel="stylesheet" media="screen">
<link href="css/prettify.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/prettify.js"></script>
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<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 dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Core
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <a href="./jflow-core.html">Jflow overview</a> </li>
<li> <a href="./jflow-core-component.html">Adding component</a> </li>
<li> <a href="./jflow-core-workflow.html">Adding workflow</a> </li>
</ul>
</li>
<li><a href="./jflow-plugin.html">JS Plugin</a></li>
<li><a href="./example1.html">Example 1</a></li>
<li><a href="./example2.html">Example 2</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>
<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="#component"><i class="icon-chevron-right"></i> component</a></li>
<li><a href="#define_parameters"><i class="icon-chevron-right"></i> define_parameters</a></li>
<li><a href="#process"><i class="icon-chevron-right"></i> process</a></li>
<li><a href="#other_methods"><i class="icon-chevron-right"></i> other methods</a></li>
<li><a href="#where"><i class="icon-chevron-right"></i> where adding the class</a></li>
</ul>
</div>
<div class="span9">
<section id="component">
<div class="page-header">
<h1>The <i>Component</i> class</h1>
</div>
</section>
<section id="define_parameters">
<div class="page-header">
<h1>Overloading <i>define_parameters</i></h1>
</div>
</section>
<section id="process">
<div class="page-header">
<h1>Overloading <i>process</i></h1>
</div>
</section>
<section id="other_methods">
<div class="page-header">
<h1>Other available methods</h1>
</div>
</section>
<section id="where">
<div class="page-header">
<h1>Where should the class be added</h1>
</div>
</section>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>Copyright © 2014, 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>
</div>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
\ No newline at end of file
docs/jflow-core-workflow.html 0 → 100644
View file @ 48e7c222
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jvenn</title>
<!-- Les styles -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/docs.css" rel="stylesheet" media="screen">
<link href="css/prettify.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/prettify.js"></script>
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<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 dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Core
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <a href="./jflow-core.html">Jflow overview</a> </li>
<li> <a href="./jflow-core-component.html">Adding component</a> </li>
<li> <a href="./jflow-core-workflow.html">Adding workflow</a> </li>
</ul>
</li>
<li><a href="./jflow-plugin.html">JS Plugin</a></li>
<li><a href="./example1.html">Example 1</a></li>
<li><a href="./example2.html">Example 2</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>
<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="#workflow"><i class="icon-chevron-right"></i> workflow</a></li>
<li><a href="#pre_process"><i class="icon-chevron-right"></i> pre_process</a></li>
<li><a href="#process"><i class="icon-chevron-right"></i> process</a></li>
<li><a href="#post_process"><i class="icon-chevron-right"></i> post_process</a></li>
<li><a href="#other_methods"><i class="icon-chevron-right"></i> other methods</a></li>
<li><a href="#where"><i class="icon-chevron-right"></i> where adding the class</a></li>
</ul>
</div>
<div class="span9">
<section id="workflow">
<div class="page-header">
<h1>The <i>Workflow</i> class</h1>
</div>
</section>
<section id="pre_process">
<div class="page-header">
<h1>Overloading <i>pre_process</i></h1>
</div>
</section>
<section id="process">
<div class="page-header">
<h1>Overloading <i>process</i></h1>
</div>
</section>
<section id="post_process">
<div class="page-header">
<h1>Overloading <i>post_process</i></h1>
</div>
</section>
<section id="other_methods">
<div class="page-header">
<h1>Other available methods</h1>
</div>
</section>
<section id="where">
<div class="page-header">
<h1>Where should the class be added</h1>
</div>
</section>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>Copyright © 2014, 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>
</div>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
\ No newline at end of file
docs/jflow-core.html
View file @ 48e7c222
......@@ -27,8 +27,18 @@
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="./index.html">About</a></li>
<li class="active"><a href="./jflow-core.html">Core</a></li>
<li><a href="./jflow-plugin.html">Plugin</a></li>
<li class="active dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Core
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li> <a href="./jflow-core.html">Jflow overview</a> </li>
<li> <a href="./jflow-core-component.html">Adding component</a> </li>
<li> <a href="./jflow-core-workflow.html">Adding workflow</a> </li>
</ul>
</li>
<li><a href="./jflow-plugin.html">JS Plugin</a></li>
<li><a href="./example1.html">Example 1</a></li>
<li><a href="./example2.html">Example 2</a></li>
<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/jflow/index.php/Accueil">Sources</a></li>
......@@ -39,265 +49,23 @@
</div>
</div>
<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="#displayMode"><i class="icon-chevron-right"></i> displayMode</a></li>
<li><a href="#displayStat"><i class="icon-chevron-right"></i> displayStat</a></li>
<li><a href="#fnClickCallback"><i class="icon-chevron-right"></i> fnClickCallback</a></li>
<li><a href="#colors"><i class="icon-chevron-right"></i> colors</a></li>
<li><a href="#shortNumber"><i class="icon-chevron-right"></i> shortNumber</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 jvenn, 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="src/jvenn.min.js">jvenn.min.js</a></li>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>Copyright © 2014, 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>
<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').jvenn({
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').jvenn({
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').jvenn({
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').jvenn({
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="displayMode">
<div class="page-header">
<h1>displayMode</h1>
</div>
<p>The default value is 'classic' to have a classical venn diagram to be displayed. If you want a Edwards-Venn diagram display,
just set this option to 'edwards'. Available values for this parameters are: 'classic', 'edwards'.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').jvenn({
displayMode: 'edwards'
});
});
</pre>
</section>
<section id="displayStat">
<div class="page-header">
<h1>displayStat</h1>
</div>
<p>The default value is true to display some statisics based on input lists. The first chart represents the histogram of the
lists size, providing to the user a rapid view on its lists composition to verify the samples homogeneity. The second chart
displays the number of common and specific elements between lists. This feature allows to quickly get an insight on the
similarity of the data sets when comparing multiple Venn diagrams.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').jvenn({
displayStat: false
});
});
</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').jvenn({
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="colors">
<div class="page-header">
<h1>colors</h1>
</div>
<p>jvenn comes with some default colors, you can change them to the ones you want.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').jvenn({
colors: ["rgb(0,102,0)","rgb(90,155,212)","rgb(241,90,96)","rgb(250,220,91)","rgb(255,117,0)","rgb(192,152,83)"]
});
});
</pre>
</section>
<section id="shortNumber">
<div class="page-header">
<h1>shortNumber</h1>
</div>
<p>Default is false, if set to true, when intersection counts are too big to be displayed, jvenn will
add a "?" instead of the value, which is accessible on the rollover action.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').jvenn({
shortNumber: true
});
});
</pre>
</section>
<section id="disableClick">
<div class="page-header">
<h1>disableClick</h1>