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

   1 <%# Copyright (C) The Arvados Authors. All rights reserved.
   2
   3 SPDX-License-Identifier: AGPL-3.0 %>
   4
   5 <style>
   6 div.figure {
   7 }
   8 .style_image1 {
   9   border: 10px solid #ddd;
  10   display: block;
  11   margin-left: auto;
  12   margin-right: auto;
  13 }
  14 .style_image2 {
  15   border: 10px solid #ddd;
  16   display: block;
  17   margin-left: 1em;
  18 }
  19 div.figure p {
  20   text-align: center;
  21   font-style: italic;
  22   text-indent: 0;
  23   border-top:-0.3em;
  24 }
  25 </style>
  26
  27 <div id="getting-started-modal-window" class="modal">
  28   <div class="modal-dialog modal-with-loading-spinner" style="width: 50em">
  29     <div class="modal-content">
  30       <div class="modal-header" style="text-align: center">
  31         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
  32         <div>
  33           <div class="col-sm-8"><h4 class="modal-title" style="text-align: right">Getting Started with Arvados</h4></div>  <%#Todo: center instead of right%>
  34           <div class="spinner spinner-32px spinner-h-center col-sm-1" hidden="true"></div>
  35         </div>
  36         <br/>
  37       </div>
  38
  39       <%#First Page%>
  40       <div class="modal-body" style="height: 40em; overflow-y: scroll">
  41         <div style="margin-top: -0.5em; margin-left: 0.5em;">
  42           <p><div style="font-size: 150%;">Welcome!</div></p>
  43           <p>
  44             What you're looking at right now is <b>Workbench</b>, the graphical interface to the Arvados system.
  45           </p><p>
  46             <div class="figure">
  47               <p> <%= image_tag "pipeline-running.gif", :class => "style_image1" %></p> <%#Todo: shorter gif%>
  48               <p>Running the Pathomap pipeline in Arvados.</p>
  49             </div>
  50           </p><p>
  51             Click the <span class="btn btn-sm btn-primary">Next &gt;</span> button below for a speed tour of Arvados.
  52           </p><p style="margin-top:2em;">
  53             <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>
  54           </p>
  55         </div>
  56       </div>
  57
  58       <%#Page Two%>
  59       <div class="modal-body" style="height: 40em; overflow-y: scroll">
  60         <div style="margin-top: -0.5em; margin-left: 0.5em;">
  61           <p><div style="font-size: 150%;">Take It for a Spin</div></p>
  62           <p>
  63             Run your first pipeline in 3 quick steps:
  64           </p>
  65           <div style="display: block; margin: 0em 2em; padding-top: 1em; padding-bottom: 1em; border: thin dashed silver;">
  66             <p style="margin-left: 1em;">
  67               <em>First, <a href="/users/welcome">log-in or register</a> with any Google account if you haven't already.</em>
  68             </p><p>
  69               <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>
  70                   <p style="margin-top:1em;">
  71                     <%= image_tag "mouse-move.gif", :class => "style_image2" %>
  72                   </p>
  73                 </li>
  74                 <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>
  75                 <li> <span class="btn btn-sm btn-primary">Run <i class="fa fa-fw fa-play"></i></span></li>
  76               </ol>
  77           </p></div>
  78           <p style="margin-top:1em;">
  79             <i class="fa fa-flag fa-flip-horizontal" style="color: green"></i> <i class="fa fa-child"></i>
  80             <strong>Voila!</strong> <i class="fa fa-child"></i> <i class="fa fa-flag" style="color: green"></i>
  81             Your pipeline is now spooling up and getting ready to run!
  82           </p><p>
  83             Go ahead, try it for yourself right now. <span class="glyphicon glyphicon-thumbs-up"></span>
  84           </p><p>
  85             Or click <span class="btn btn-sm btn-primary">Next &gt;</span> below to keep reading!
  86           </p>
  87         </div>
  88       </div>
  89
  90       <%#Page Three%>
  91       <div class="modal-body" style="height: 40em; overflow-y: scroll">
  92         <div style="margin-top: -0.5em; margin-left: 0.5em;">
  93           <p><div style="font-size: 150%;">Three Useful Terms</div></p>
  94           <ol>
  95             <li>
  96               <strong>Pipeline</strong> — A re-usable series of analysis steps.
  97               <ul>
  98                 <li>
  99                   Also known as a “workflow” in other systems
 100                 </li><li>
 101                   A list of well-documented public pipelines can be found in the upper right corner by clicking the <span class="fa fa-lg fa-question-circle"></span> &gt; <a href="<%= Rails.configuration.Workbench.ArvadosPublicDataDocURL %>">Public Pipelines and Datasets</a>
 102                 </li><li>
 103                   Pro-tip: A Pipeline contains Jobs which contain Tasks
 104                 </li><li>
 105                   Pipelines can only be shared within a project
 106                 </li>
 107               </ul>
 108             </li>
 109
 110             <li>
 111               <strong>Collection </strong>— Like a folder, but better.
 112               <ul>
 113                 <li>
 114                   Upload data right in your browser
 115                 </li><li>
 116                   Better than a folder?
 117                   <ul><li>
 118                       Collections contain the content-address of the data instead of the data itself
 119                     </li><li>
 120                       Sets of data can be flexibly defined and re-defined without duplicating data
 121                     </li>
 122                 </ul></li><li>
 123                   Collections can be shared using the "Sharing and Permissions"  &gt; "Share" button
 124                 </li>
 125               </ul>
 126             </li>
 127
 128             <li>
 129               <strong>Projects </strong>— Contain pipelines templates, pipeline instances (individual runs of a pipeline), and collections.
 130               <ul><li>
 131                   The most useful one is your default "Home" project, under Projects &gt; Home
 132                 </li><li>
 133                   Projects can be shared using the "sharing" tab
 134                 </li>
 135               </ul>
 136             </li>
 137           </ol>
 138
 139         </div>
 140       </div>
 141
 142       <%#Page Four%>
 143       <div class="modal-body" style="height: 40em; overflow-y: scroll">
 144         <div style="margin-top: -0.5em; margin-left: 0.5em;">
 145           <p><div style="font-size: 150%;">Six Reasons Arvados is Awesome</div></p>
 146           <p>
 147             This guide, and in fact all of Workbench, is just a teaser for the full power of Arvados:
 148           </p>
 149           <ol>
 150             <li>
 151               <strong>Reproducible analyses</strong>: Enough said.
 152             </li><li>
 153               <strong>Data provenance</strong>: Every file in Arvados can tell you where it came from.
 154             </li><li>
 155               <strong>Serious scaling</strong>: Need 500 GB of space? 200 compute hours? Arvados scales and parallelizes your work for you intelligently.
 156             </li><li>
 157               <strong>Share pipelines or data</strong>: Easily publish your work to the world, just like <a href="http://www.pathomap.org/2015/04/08/run-the-pathomap-human-ancestry-pipeline-on-arvados/">the Pathomap team did</a>.
 158             </li><li>
 159               <strong>Use existing pipelines</strong>: Use best-practices pipelines on your own data with the click of a button.
 160             </li><li>
 161               <strong>Open source</strong>: Arvados is completely open source. Check out our <a href="http://dev.arvados.org">developer site</a>.
 162             </li>
 163           </ol>
 164           <p style="margin-top: 1em;">
 165             Want to use the command-line, or hungry to learn more? Check out the User Guide at <a href="http://doc.arvados.org/">doc.arvados.org</a>.
 166           </p><p>
 167             Questions still? Head over to <a href="http://doc.arvados.org/">doc.arvados.org</a> to find mailing-list and contact info for the Arvados community.
 168           </p><p>
 169             That's all, folks! Click the "x" up top to leave this guide.
 170           </p>
 171         </div>
 172       </div>
 173
 174       <div class="modal-footer">
 175         <div style="text-align:center">
 176           <button class="btn btn-default pager-prev"><i class="fa fa-fw fa-chevron-left"></i><span style="font-weight: bold;"> Prev</span></button>
 177           <button class="btn btn-default pager-next"><span style="font-weight: bold;">Next </span><i class="fa fa-fw fa-chevron-right"></i></button>
 178           <div class="pager-count pull-right"><span style="margin:5px"></span></div>
 179         </div>
 180       </div>
 181     </div>
 182   </div>
 183 </div>