Skip to content
Snippets Groups Projects
example1.html 9.91 KiB
Newer Older
<!DOCTYPE html>
<html lang="en">
Jerome Mariette's avatar
Jerome Mariette committed
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
Jerome Mariette's avatar
Jerome Mariette committed
    <title>Jflow</title>
Jerome Mariette's avatar
Jerome Mariette committed
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/theme.css" rel="stylesheet">
Jerome Mariette's avatar
Jerome Mariette committed
	
Jerome Mariette's avatar
Jerome Mariette committed
	<!-- jflow css -->
Jerome Mariette's avatar
Jerome Mariette committed
	<link href="css/jflow.min.css" rel="stylesheet">
Jerome Mariette's avatar
Jerome Mariette committed
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
Jerome Mariette's avatar
Jerome Mariette committed
  <body role="document">
    <!-- Fixed navbar -->
Jerome Mariette's avatar
Jerome Mariette committed
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
Jerome Mariette's avatar
Jerome Mariette committed
          <a class="navbar-brand" href="./index.html">Jflow</a>
Jerome Mariette's avatar
Jerome Mariette committed
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
Jerome Mariette's avatar
Jerome Mariette committed
            <li><a href="./index.html">About</a></li>
            <li><a href="./jflow_install.html">Install</a></li>
            <li><a href="./jflow_quickstart.html">Quick start</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
            <li class="dropdown">
Philippe Bardou's avatar
Philippe Bardou committed
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentation<span class="caret"></span></a>
Jerome Mariette's avatar
Jerome Mariette committed
              <ul class="dropdown-menu" role="menu">
Jerome Mariette's avatar
Jerome Mariette committed
                <li><a href="./jflow_core_workflow.html">Add a workflow</a></li>
                <li><a href="./jflow_core_component.html">Add a component</a></li>
                <li><a href="./jflow_plugin.html">Plugin insertion</a></li>
                <li><a href="./jflow_type.html">Add a data type</a></li>
                <li><a href="./jflow_format.html">Add a file format</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
                <li><a href="./jflow_rule.html">Add a rule</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
                <li><a href="./jflow_advanced_configuration.html">Advanced configuration</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
              </ul>
            </li>
Jerome Mariette's avatar
Jerome Mariette committed
			<li class="active"><a href="./example1.html">Example</a></li>
Jerome Mariette's avatar
Jerome Mariette committed
			<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
Jerome Mariette's avatar
Jerome Mariette committed
    <div class="container theme-showcase" role="main">
Jerome Mariette's avatar
Jerome Mariette committed
      <!-- Jumbotron -->
      <div class="jumbotron">
        <h1>Hello Jflow!</h1>
Jerome Mariette's avatar
Jerome Mariette committed
        <p class="lead">This is a running example for a simple workflow manager website. Use it as a 
Jerome Mariette's avatar
Jerome Mariette committed
        	starting point to create something more unique.</p>
Philippe Bardou's avatar
Philippe Bardou committed
        <br/>
		<div style="position:absolute;width:1025px;padding:0px 5px 0 5px;background-color:white;border:1px solid lightgrey;border-radius:5px;">
			<span class="label label-primary" style="position:absolute;top:-10px;left:-10px">How to cite</span>
		    <h6><b>Jérôme Mariette, Frédéric Escudié, Philippe Bardou, Ibouniyamine Nabihoudine, Céline Noirot, Marie-Stéphane Trotard, 
		    	Christine Gaspin, Christophe Klopp. Jflow: a workflow management system for web applications. Bioinformatics. 
		    	2015. doi 10.1093/bioinformatics/btv589. &nbsp;&nbsp; - &nbsp;&nbsp;
				<a href="http://bioinformatics.oxfordjournals.org/content/early/2015/11/25/bioinformatics.btv589.full" target="_blank"> Abstract/FREE Full Text </a></b>
Philippe Bardou's avatar
Philippe Bardou committed
			</h6>
		</div>
		<br/>
Jerome Mariette's avatar
Jerome Mariette committed
      </div>
    
		<div class="row">
	      	<div class="col-lg-6">
      			<h1 class="page-header">Available workflows <small>to run</small></h1>
Jerome Mariette's avatar
Jerome Mariette committed
	      		<div id="available-workflows-list"></div>
	      	</div>
	      	<div class="col-lg-6">
	      		<h1 class="page-header">Actives workflows <small>to monitor</small></h1>
Jerome Mariette's avatar
Jerome Mariette committed
	      		<div id="active-workflows-list"></div>
	      	</div>
		</div>
		
Jerome Mariette's avatar
Jerome Mariette committed
		<!-- setAndRunModal -->
		<div id="setAndRunModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="setAndRunModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h3 class="modal-title" id="setAndRunModalLabel"> </h3>
					</div>
					<div id="setAndRunModalBody" class="modal-body"> </div>
					<div class="modal-footer">
						<div class="btn-group">
							<button id="reset_workflow" type="button" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> Reset</button>
							<button id="run_workflow" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-cog"></span> Run</button>
						</div>
					</div>
				</div>
			</div>
		</div>
Jerome Mariette's avatar
Jerome Mariette committed
		<!-- statusModal -->
		<div id="statusModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="statusModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h3 class="modal-title" id="statusModalLabel"> </h3>
					</div>
					<div id="statusModalBody" class="modal-body"> </div>
					<div class="modal-footer">
			    		<div class="btn-group">
			    			<button id="refresh_workflow" class="btn btn-default status-panel"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
			    			<button id="rerun_workflow" class="btn btn-primary status-panel"><span class="glyphicon glyphicon-cog"></span> ReRun</button>
			    		</div>
						<button id="output_workflow" type="button" class="btn btn-success status-panel"><span class="glyphicon glyphicon-chevron-right"></span> Output</button>
						<button id="back_workflow" type="button" class="btn btn-default" style="display:none"><span class="glyphicon glyphicon-chevron-left"></span> Back</button>
					</div>
				</div>
			</div>
		</div>
	   
      <hr>
      <footer>
      	<div class="container" style="text-align: center;">
Philippe Bardou's avatar
Philippe Bardou committed
		  <p>Copyright © 2015, INRA | Designed by <a target="_blank" href="http://bioinfo.genotoul.fr/">GenoToul Bioinfo platform</a> and <a target="_blank" href="http://www.sigenae.org/">Sigenae platform</a>.</p>
Jerome Mariette's avatar
Jerome Mariette committed
		</div>
      </footer>
	    
	</div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
Jerome Mariette's avatar
Jerome Mariette committed
    <script src='js/jflow.min.js' type='text/javascript'></script>
Jerome Mariette's avatar
Jerome Mariette committed
    
	<script type='text/javascript'>
		
		$(document).ready(function(){
Jerome Mariette's avatar
Jerome Mariette committed
			/**
			 * Use the plugins
			 */
			$("#available-workflows-list").availablewf();
			
			$("#available-workflows-list").on('select.availablewf', function(event, workflow) {
Jerome Mariette's avatar
Jerome Mariette committed
				$('#setAndRunModal .modal-footer').show();
				$('#setAndRunModalLabel').html(workflow["name"] + " <small>" + workflow["help"] + "</small>");
			    $('#setAndRunModalBody').wfform({
					workflowClass: workflow["class"],
					displayRunButton: false,
					displayResetButton: false
			    });
				$('#setAndRunModal').modal();
			});
			$('#setAndRunModalBody').on('uploading.wfform', function(event, running_wf) {
Jerome Mariette's avatar
Jerome Mariette committed
				$('#setAndRunModal .modal-footer').hide();
			});
			
			$('#setAndRunModalBody').on('run.wfform', function(event, running_wf) {
Jerome Mariette's avatar
Jerome Mariette committed
				$('#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');
Jerome Mariette's avatar
Jerome Mariette committed
				$("#output_workflow").unbind('click', outputWFHandler);
				$("#output_workflow").bind('click', {"workflow_id": running_wf.id}, outputWFHandler);
Jerome Mariette's avatar
Jerome Mariette committed
		    });
		    
Jerome Mariette's avatar
Jerome Mariette committed
			$("#refresh_workflow").click(function(){
				$('#statusModalBody').wfstatus('reload');
				$("#active-workflows-list").activewf('reload');
			});
Jerome Mariette's avatar
Jerome Mariette committed
			$("#rerun_workflow").click(function(){ $('#statusModalBody').wfstatus('rerun'); });
		    $("#reset_workflow").click(function(){ $('#setAndRunModalBody').wfform('reset'); });
Jerome Mariette's avatar
Jerome Mariette committed
		    $('#setAndRunModal').on('shown.bs.modal', function() {
		    	$('#setAndRunModalBody').wfform('render');
		    });
		    $('#statusModal').on('shown.bs.modal', function() {
		    	$('#statusModalBody').wfstatus('render');
Jerome Mariette's avatar
Jerome Mariette committed
		    });
  			$("#back_workflow").click(function(){
  				$('#statusModalBody').wfstatus('reload');
Jerome Mariette's avatar
Jerome Mariette committed
				$('#back_workflow').hide();
				$('.status-panel').show();
Jerome Mariette's avatar
Jerome Mariette committed
  			});
Jerome Mariette's avatar
Jerome Mariette committed
		    $("#run_workflow").click(function(){
		    	$('#setAndRunModalBody').wfform('run');
		    	$('#back_workflow').hide();
				$('.status-panel').show();
		    });				
		    function outputWFHandler(event) {
				$('#statusModalBody').wfoutputs({
					workflowID: event.data.workflow_id
				})
				$('#back_workflow').show();
				$('.status-panel').hide();
		    }
		    $("#active-workflows-list").activewf();
			$("#active-workflows-list").on("select.activewf", function(event, workflow) {
Jerome Mariette's avatar
Jerome Mariette committed
				$('#statusModalLabel').html(workflow["name"] + " <small>" + workflow["id"] + "</small>");
			    $('#statusModalBody').wfstatus({
					workflowID: workflow.id
Jerome Mariette's avatar
Jerome Mariette committed
				$('#statusModal').modal();
				$('#back_workflow').hide();
				$('.status-panel').show();
				$("#output_workflow").unbind('click', outputWFHandler);
				$("#output_workflow").bind('click', {"workflow_id": workflow.id}, outputWFHandler);
			});
			 
		}); 
Jerome Mariette's avatar
Jerome Mariette committed
	</script>