Commit 23bdf724 authored by Philippe Bardou's avatar Philippe Bardou
Browse files

Example 2

parent 0bcac24c
......@@ -37,7 +37,8 @@
<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="active"><a href="./example.html">Examples</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>
<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
</ul>
......@@ -117,24 +118,9 @@
<!-- 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='js/jquery.min.js' type='text/javascript'></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="js/bootstrap-affix.js"></script>
<script src="js/holder/holder.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/prettify.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>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jflow</title>
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="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="css/docs.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
</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><a href="./jflow-core.html">Core</a></li>
<li><a href="./jflow-plugin.html">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>
<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 id="ul-active" class="nav nav-list bs-docs-sidenav affix-top">
<center><li class="nav-header bs-docs-sidebar">Active workflows</li></center>
<li><a id="active-workflows"><i class="icon-chevron-right"></i> List of the active workflows</a></li>
</ul>
</div>
<div class="span9">
<section id="current-workflow">
<div id="current-header" class="page-header">
<h1>Actives workflows <small>to monitor</small></h1>
</div>
<div id="current-body">
<div id="active-workflows-list"></div>
</div>
<div id="current-footer">
</div>
</section>
</div>
</div>
<div class="row">
<div class="span3 bs-docs-sidebar" style="top: 120px;position: absolute;">
<ul id="ul-available" class="nav nav-list bs-docs-sidenav affix-top">
</ul>
</div>
</div>
</div> <!-- /container -->
<!-- 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>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/prettify.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
*/
$("#ul-available").availablewf({template: [
' <center><li class="nav-header bs-docs-sidebar">Available workflows</li></center>',
' {{each(index, workflow) workflows}}',
// if this workflow shouldnt be displayed
' {{if filters.indexOf(workflow.class) == -1 }}',
' <li><a id="availablewf_btn_${workflow.class}"><i class="icon-chevron-right"></i> ${workflow.name}</a></li>',
' {{/if}}',
' {{/each}}'].join('\n')
});
$("#ul-available").on('select', function(event, workflow) {
$('#current-header').html("<h1>" + workflow["name"] + " <small>" + workflow["help"] + "</small>");
$('#current-body').wfform({
workflowClass: workflow["class"],
displayRunButton: true,
displayResetButton: true
});
});
$("#active-workflows-list").activewf();
$("#ul-active").click(function() {
$('#current-header').html("<h1>Actives workflows <small>to monitor</small></h1>");
$('#current-body').activewf('reload');
});
$("#current-body").on('select', function(event, workflow) {
$('#current-header').html("<h1>" + workflow["name"] + " <small>" + workflow["id"] + "</small></h1>");
$('#current-body').wfstatus({
workflowID: workflow["id"]
});
$('#current-footer').html(
'<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>');
});
});
</script>
</body>
</html>
\ No newline at end of file
......@@ -37,7 +37,8 @@
<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><a href="./example.html">Examples</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>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jflow</title>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="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="css/docs.css" rel="stylesheet">
<link href="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="./jflow-core.html">Core</a></li>
<li><a href="./jflow-plugin.html">Plugin</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>
<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"><a href="./jflow-core.html">Core</a></li>
<li><a href="./jflow-plugin.html">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>
<!-- Subhead ================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Jflow documentation</h1>
<p class="lead">
dlsjdlksjlksjdsd
</p>
</div>
</header>
</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>
......@@ -74,15 +60,15 @@
<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>
<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="js/jquery.venny.min.js">jquery.venny.min.js</a></li>
<li><a href="src/jvenn.min.js">jvenn.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({
$('#example').jvenn({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
......@@ -102,7 +88,7 @@ $(document).ready(function(){
<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({
$('#example').jvenn({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
......@@ -116,7 +102,7 @@ $(document).ready(function(){
<p> The serie can also define the number of occurence for each intersections.</p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
$('#example').jvenn({
series: [{
name: {A: 'List 1',
B: 'List 2',
......@@ -133,7 +119,7 @@ $(document).ready(function(){
<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({
$('#example').jvenn({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5"],
......@@ -148,6 +134,38 @@ $(document).ready(function(){
</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>
......@@ -155,7 +173,7 @@ $(document).ready(function(){
<p>The callback function to execute when the user click on a number. </p>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
$('#example').jvenn({
series: [{
name: {A: 'List 1',
B: 'List 2',
......@@ -187,6 +205,35 @@ $(document).ready(function(){
</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>
......@@ -194,7 +241,7 @@ $(document).ready(function(){
<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({
$('#example').jvenn({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
......@@ -215,7 +262,7 @@ $(document).ready(function(){
<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({
$('#example').jvenn({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
......@@ -234,7 +281,7 @@ $(document).ready(function(){
<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({
$('#example').jvenn({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
......@@ -247,43 +294,18 @@ $(document).ready(function(){
</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='js/jquery.min.js' type='text/javascript'></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="js/bootstrap-affix.js"></script>
<script src="js/holder/holder.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/application.js"></script>
</body>
<hr>
<footer>
<p>Copyright &copy; 2014, INRA | Designed by <a href="http://bioinfo.genotoul.fr/" target="_blank">GenoToul Bioinfo</a> team.</p>
</footer>
</div>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jflow</title>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="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="css/docs.css" rel="stylesheet">
<link href="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="./jflow-core.html">Core</a></li>
<li class="active"><a href="./jflow-plugin.html">Plugin</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>
<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><a href="./jflow-core.html">Core</a></li>
<li class="active"><a href="./jflow-plugin.html">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>
<!-- Subhead ================================================== -->
<header class="jumbotron subhead" id="overview">
<div class="container">
<h1>Jflow documentation</h1>
<p class="lead">
dlsjdlksjlksjdsd
</p>
</div>
</header>
</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>