apps/workbench/app/views/getting_started/_getting_started_popup.html.erb

   1 <style>
   2 .style_image {
   3   border: 10px solid #ddd;
   4 }
   5 </style>
   6
   7 <div id="getting-started-modal-window" class="modal">
   8   <div class="modal-dialog modal-with-loading-spinner" style="width:60%">
   9   <%#<div class="modal-dialog modal-with-loading-spinner">%>
  10     <div class="modal-content">
  11       <div class="modal-header">
  12         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
  13         <div>
  14           <div class="col-sm-8"> <h4 class="modal-title">Getting Started with Arvados </h4> </div>
  15           <div class="spinner spinner-32px spinner-h-center col-sm-1" hidden="true"></div>
  16         </div>
  17         <br/>
  18       </div>
  19
  20      <div class="modal-body" style="height: 38em; overflow-y: scroll">
  21        <h2> Welcome!</h2> <strong>How does this work?</strong>
  22
  23        What you're looking at right now is Workbench, the graphical interface to the Arvados system.
  24           <br>For example, here's what a pipeline running in Arvados looks like:<br>
  25           <%= image_tag "pipeline-running.gif", :class => "style_image" %>
  26           <br><br>
  27           Click the <span class="btn btn-sm btn-primary">Next &gt;</span> button below for a speed tour of Arvados.
  28         <br><br>
  29         <em><strong>Note:</strong> You can always come back to this Getting Started guide by clicking the <span class="fa fa-lg fa-question-circle"></span> in the upper-right corner.</em>
  30         <br><br>
  31       </div>
  32
  33       <div class="modal-body" style="height: 38em; overflow-y: scroll">
  34         <h2>Quickstart</h2>
  35         <strong>Don't like reading manuals?</strong> Get started by running your first pipeline in 3 quick steps:<br><br>
  36         <em>Tip: log-in or register with any google account if you haven't already</em>
  37         <ol><li> Go to the <span class="btn btn-sm btn-default"><i class="fa fa-lg fa-fw fa-dashboard"></i> Dashboard</span> &gt; <span class="btn btn-sm btn-primary"><i class="fa fa-fw fa-gear"></i> Run a pipeline...</span> <br><br>
  38           <%= image_tag "mouse-move.gif", :class => "style_image" %><br>
  39         </li>
  40           <li>  <span class="btn btn-sm btn-default"><i class="fa fa-fw fa-gear"></i>Mason Lab -- Ancestry Mapper (public)</span> &gt; <span class="btn btn-sm btn-primary">Next: choose inputs <i class="fa fa-fw fa-arrow-circle-right"></i></span></li><br>
  41           <li> <span class="btn btn-sm btn-primary">Run <i class="fa fa-fw fa-play"></i></span></li>
  42         </ol>
  43         <br>
  44         <i class="fa fa-flag fa-flip-horizontal" style="color: green"></i> <i class="fa fa-child"></i>
  45         <strong>Voila!</strong> <i class="fa fa-child"></i> <i class="fa fa-flag" style="color: green"></i>
  46         Your pipeline is now spooling up and getting ready to run!
  47           <br><br>
  48           Go ahead, try it for yourself right now. <span class="glyphicon glyphicon-thumbs-up"></span>
  49           <br><br>
  50           Or click <span class="btn btn-sm btn-primary">Next &gt;</span> below to keep reading!
  51           <br><br>
  52       </div>
  53       <div class="modal-body" style="height: 38em; overflow-y: scroll">
  54         <h2>Three Useful Terms</h2>
  55         * <strong>Pipeline</strong> -- A re-usable series of analysis steps.<br><br>
  56         ** Sometimes known as a “workflow” in other systems<br><br>
  57         ** A list of well-documented public pipelines can be found in the upper right corner by clicking the "?" > "Public Pipelines and Datasets"<br><br>
  58         ** Pro-tip:  Pipeline &gt; Jobs &gt; Tasks. A pipeline contains jobs which contain tasks.<br><br>
  59         ** Pipelines can only be shared within a project<br><br>
  60         <br><br><br><br>
  61         * Collection -- Like a folder, but better<br><br>
  62         ** Upload data right in your browser<br><br>
  63         ** Better than a folder? <br><br>
  64         *** Collections contain the content-address of the data instead of the data itself<br><br>
  65         *** Sets of data can be flexibly defined and re-defined without duplicating data<br><br>
  66         ** Collections can be shared using the "Sharing and Permissions"  &gt; "Share" button<br><br>
  67         <br><br><br><br>
  68         * Projects -- Contain pipelines templates, pipeline instances (individual runs of a pipeline), and collections<br><br>
  69         ** The most useful one is your default "Home" project, under Projects &gt; Home<br><br>
  70         ** Projects can be shared using the "sharing" tab<br><br>
  71
  72       </div>
  73       <div class="modal-body" style="height: 38em; overflow-y: scroll">
  74         <h2>Why We Think Arvados is Awesome</h2>
  75         1. Reproducible Analyses: Enough said.<br><br>
  76         2. Data provenance: Every file in Arvados knows can tell you where it came from.<br><br>
  77         3. Serious scaling: Need 500 GB of space? 200 compute hours? Arvados scales and parallelizes your work for you intelligently.<br><br>
  78         4. Share pipelines or data: Easily publish your work the world, just like the Pathomap team did: http://www.pathomap.org/2015/04/08/run-the-pathomap-human-ancestry-pipeline-on-arvados/<br><br>
  79         5. Use existing pipelines: Use best-practices pipelines on your own data with the click of a button<br><br>
  80         6. Open-source: Arvados is completely open-source. Check us out at http://arvados.org/<br><br>
  81         <br><br><br>
  82         This guide and even all of Workbench is just a glimpse into the power of Arvados. Want to use the command-line instead? Or hungry to learn more? Check out our detailed documentation: http://doc.arvados.org/ (our real-time contact info is there too!)
  83         <br><br><br>
  84         That's all, folks!
  85
  86       </div>
  87
  88       <div class="modal-footer">
  89         <div style="text-align:center">
  90           <button class="btn btn-default pager-prev"><i class="fa fa-fw fa-chevron-left"></i><span style="font-weight: bold;"> Prev</span></button>
  91           <button class="btn btn-default pager-next"><span style="font-weight: bold;">Next </span><i class="fa fa-fw fa-chevron-right"></i></button>
  92           <div class="pager-count pull-right"><span style="margin:5px"></span></div>
  93         </div>
  94       </div>
  95     </div>
  96   </div>
  97 </div>