Changeset 2063


Ignore:
Timestamp:
Oct 14, 2013, 12:57:32 PM (9 years ago)
Author:
Nicklas Nordborg
Message:

References #501: Generate lab protocol for clustering

Re-organized the lab protocol to make it more similar to the registration wizard. It is now divided into two parts. One for the clustering and one for the sequencing startup.

Location:
extensions/net.sf.basedb.reggie/trunk/resources
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • extensions/net.sf.basedb.reggie/trunk/resources/index.jsp

    r2059 r2063  
    505505            <li><a href="libprep/pool_registration.jsp?ID=<%=ID%>">Register pooled libraries</a> <span class="counter" id="count.pools.2" title="Counting..."><img src="images/loading-small.gif"></span>
    506506            <li><a href="libprep/create_flowcells.jsp?ID=<%=ID%>">Create flow cells</a> <span class="counter" id="count.pools.3" title="Counting..."><img src="images/loading-small.gif"></span>
    507             <li><a href="libprep/flowcell_protocol.jsp?ID=<%=ID%>">Lab protocols for clustering &amp; sequence start</a> <span class="counter" id="count.flow-cells.1" title="Counting..."><img src="images/loading-small.gif"></span>
    508             <li><a href="libprep/flowcell_registration.jsp?ID=<%=ID%>">Register clustering and sequence start of flow cells</a> <span class="counter" id="count.flow-cells.2" title="Counting..."><img src="images/loading-small.gif"></span>
     507            <li><a href="libprep/flowcell_protocol.jsp?ID=<%=ID%>">Lab protocol for clustering and sequencing startup</a> <span class="counter" id="count.flow-cells.1" title="Counting..."><img src="images/loading-small.gif"></span>
     508            <li><a href="libprep/flowcell_registration.jsp?ID=<%=ID%>">Register clustering and sequencing startup</a> <span class="counter" id="count.flow-cells.2" title="Counting..."><img src="images/loading-small.gif"></span>
    509509            </ul>
    510510          </dd>

  • extensions/net.sf.basedb.reggie/trunk/resources/libprep/flowcell_protocol.jsp

    r2055 r2063  
    201201  <p:path><p:pathelement
    202202    title="Reggie" href="<%="../index.jsp?ID="+ID%>"
    203     /><p:pathelement title="Flow cell protocol"
     203    /><p:pathelement title="Lab protocol for clustering and sequencing startup"
    204204    /></p:path>
    205205
    … …  
    239239        <td class="help"><span id="flowcells.message" class="message" style="display: none;"></span>
    240240          Select one or more existing flow cells. The list contains all flow cells that
    241           has not yet been processed (determined by the absence of a 'creation' date).
     241          has not yet been clustered or sequenced (determined by the absence of a 'creation' date).
    242242        </td>
    243243      </tr>

  • extensions/net.sf.basedb.reggie/trunk/resources/libprep/flowcell_protocol2.jsp

    r2062 r2063  
    6161  <link rel="stylesheet" type="text/css" href="<%=home %>/css/reggie.css">
    6262  <link rel="stylesheet" type="text/css" href="<%=home %>/css/printable.css">
    63   <link rel="stylesheet" type="text/css" href="<%=home %>/css/plate.css">
    6463  <script language="JavaScript" src="<%=root%>/include/scripts/main.js" type="text/javascript" charset="UTF-8"></script>
    6564  <script language="JavaScript" src="<%=root%>/include/scripts/ajax.js" type="text/javascript" charset="UTF-8"></script>
    6665  <script language="JavaScript" src="<%=home %>/reggie.js" type="text/javascript" charset="UTF-8"></script>
    67   <script language="JavaScript" src="pools.js" type="text/javascript" charset="UTF-8"></script>
    68   <script language="JavaScript" src="plate.js" type="text/javascript" charset="UTF-8"></script>
    6966 
    7067  <script language="JavaScript">
    … …  
    133130      var readString = flowCell['readString'];
    134131      setInnerHTML('flowCellName.'+flowCellNo, flowCellName);       
     132      setInnerHTML('flowCellName2.'+flowCellNo, flowCellName);       
    135133      setInnerHTML('flowCellDescription.'+flowCellNo, flowCellDescription);       
    136134      setInnerHTML('readString.'+flowCellNo, readString);
    … …  
    152150  </script>
    153151  <style>
     152 
     153  h2
     154  {
     155    margin-bottom: 0;
     156    font-size: 1.2em;
     157  }
     158 
    154159  table.protocolheader
    155160  {
    … …  
    158163    margin-bottom: 1em;
    159164    border-collapse: collapse;
     165    min-height: 20em;
     166    height: 20em;
    160167  }
    161168
    162169  table.protocolheader > tbody > tr
    163170  {
    164     vertical-align: top;
    165     height: 1.25em;
     171    vertical-align: middle;
     172    height: 2.5em;
     173    max-height: 2.5em;
     174    border-bottom: 1px solid #000000;
    166175  }
    167176
    … …  
    171180    font-size: 1em;
    172181    background-color: #F0F0F0;
    173     padding: 2px;
    174   }
     182    padding: 4px;
     183    border-right: 1px solid #000000;
     184  }
     185
     186  table.protocolheader > tbody > tr > th.subprompt
     187  {
     188    text-align: right;
     189    font-weight: normal;
     190  }
     191
    175192 
    176193  table.protocolheader > tbody > tr > td
    … …  
    178195    text-align: left;
    179196    font-size: 1em;
    180     padding: 2px;
     197    padding: 4px;
    181198  }
    182199 
    … …  
    191208  }
    192209 
    193   #listview
     210  .pools
    194211  {
    195212    width: 100%;
    196     font-size: 85%;
    197213    border-collapse: collapse;
    198     border: 1px solid #000000;
    199   }
    200  
    201   #listview tr.evencol
     214  }
     215 
     216  .pools tr
     217  {
     218    height: 2.5em;
     219    border-bottom: 1px dotted #666666;
     220  }
     221
     222  .pools tr:last-child
     223  {
     224    border-bottom: 0;
     225  }
     226 
     227  .pools td, .pools th
     228  {
     229    text-align: left;
     230    font-size: 1em;
     231    padding: 2px;
     232  }
     233 
     234  .pools th
    202235  {
    203236    background-color: #F0F0F0;
    204   }
    205  
    206   #listview thead
    207   {
    208     border: 1px solid #000000;
    209     background-color: #F0F0F0;
    210   }
    211  
    212   #listview tbody
    213   {
    214     page-break-inside: avoid;
    215     border-top: 1px solid #000000;
    216237    border-bottom: 1px solid #000000;
    217238  }
    218239 
    219   #listview th
    220   {
    221     border-left: 1px solid #000000;
    222   }
    223  
    224   #listview td
    225   {
    226     border-left: 1px solid #000000;
    227     border-top: 1px dotted #666666;
    228     vertical-align: middle;
    229   }
    230  
    231   #listview .col-num
    232   {
    233     width: 1.75em;
     240  .pools .lane-no
     241  {
     242    width: 5em;
    234243    text-align: center;
    235     font-size: 125%;
    236     font-weight: bold;
    237     vertical-align: top;
    238   }
    239  
    240   #listview .lib
    241   {
    242     width: 15em;
    243     text-align: center;
    244   }
    245  
    246   #listview .empty .lib
    247   {
    248     font-style: italic;
    249     color: #666666;
    250     text-align: center;
    251   }
    252  
    253   #listview .workplate, #listview .barcode
    254   {
    255     width: 7em;
    256     text-align: center;
    257   }
    258   #listview .remarks
    259   {
    260     vertical-align: top;
    261     padding-left: 0.25em;
    262   }
    263  
    264   /* Divide the 12 wells across the full page */
    265   #plateview .well
    266   {
    267     width: 8.2%;
    268     max-width: 8.2%;
    269     min-width: 8.2%;
    270     padding: 4px;
    271   }
    272  
    273   #plateview .well:hover
    274   {
    275     padding: 3px;
    276   }
    277    
    278   #plateview .rowheader
    279   {
    280     width: 2em;
    281   }
    282  
    283   #plateview .lib
    284   {
    285     font-weight: bold;
    286     margin-bottom: 0.25em;
    287   }
    288   #plateview .remarks
    289   {
    290     color: #C80000;
    291     font-style: italic;
    292   }
     244  }
     245 
     246  .pools .pool-name
     247  {
     248    width: 8em;
     249  }
     250 
    293251  </style>
    294252</head>
    … …  
    306264  </div>
    307265 
    308   <h1>Lab protocol for clustering <span class="reggie">Reggie <%=reggie.getAbout().getVersion() %></span></h1>
     266  <h1>Lab protocol for clustering and sequencing startup <span class="reggie">Reggie <%=reggie.getAbout().getVersion() %></span></h1>
    309267
    310268  <input type="hidden" name="fcIdList" value="<%=flowCellIdList%>">
    … …  
    313271  <div class="messagecontainer error" id="errorMessage" style="display: none;"></div>
    314272  <div id="listviewcontainer" style="display: none;">
     273 
     274 
     275  <h2>1. Clustering</h2>
     276 
    315277  <%
    316278  // Note: Variable 'c' here indicates a flow cell, not a table column
    … …  
    320282    %>
    321283    <table style="width: 100%;" class="protocolheader">
    322     <tr style="border-bottom: 1px solid #000000;">
     284    <tr>
    323285      <th style="width: 15%;">Flow cell</th>
    324       <td style="width: 30%; border-right: 1px solid #000000;"><div id="flowCellName.<%=c%>" >Flow cell name <%=c%></div></td>
    325       <th style="width: 20%;">Operation</th>
    326       <th style="width: 15%;">Date</th>
    327       <th style="width: 20%;">Operator</th>
    328     </tr>
    329     <tr>
    330       <td rowspan="6" colspan="2" style="width: 50%; border-right: 1px solid #000000;"><div id="flowCellDescription.<%=c%>" ></div></td>
    331       <td style="border-right: 1px solid #000000;">Clustering</td>
    332       <td style="border-right: 1px solid #000000;"></td>
     286      <td style="width: 35%;"><div id="flowCellName.<%=c%>" >Flow cell name <%=c%></div></td>
     287      <td style="width: 50%; padding: 0; vertical-align: top; border-left: 1px solid #000000;" rowspan="5">
     288        <table class="pools">
     289        <tr>
     290          <th class="lane-no">Lane</th>
     291          <th class="pool-name">Pool name</th>
     292          <th class="remarks">Remarks</th>
     293        </tr>
     294        <tbody>
     295        <%
     296        int rows = (Integer) numLanesList.get(c);
     297        for (int r = 0; r < rows; ++r)
     298        {
     299          String idSuffix = c + "." + r;
     300          %>
     301          <tr id="row.<%=idSuffix%>">
     302            <td class="lane-no"><%=r+1%></td>
     303            <td class="pool-name" id="fcPoolName.<%=idSuffix%>"></td>
     304            <td class="remarks" id="fcPoolRemarks.<%=idSuffix%>"></td>
     305          </tr>
     306          <%
     307        }
     308        %>
     309        </tbody>
     310        </table>
     311     
     312     
     313      </td>
     314    </tr>
     315    <tr>
     316      <th>Flow cell ID</th>
     317      <td id="flowCellId.<%=c%>"></td>
     318    </tr>
     319    <tr>
     320      <th>Operator</th>
    333321      <td></td>
    334322    </tr>
    335     <tr style="border-top: 1px solid #CCCCCC;">
    336       <td style="border-right: 1px solid #000000;">Sequencing</td>
    337       <td style="border-right: 1px solid #000000;"></td>
     323    <tr>
     324      <th>Date</th>
    338325      <td></td>
    339326    </tr>
    340     <tr valign="top" style="border-top: 1px solid #000000;">
    341       <th style="border-right: 1px solid #000000;">Flow cell ID</th>
    342       <td colspan="2" style="border-right: 1px solid #000000;"><div id="flowCellId.<%=c%>" ></div></td>
    343     </tr>
    344     <tr valign="top" style="border-top: 1px solid #000000;">
    345       <th style="border-right: 1px solid #000000;">HiSeq position</th>
    346       <td colspan="2" style="border-right: 1px solid #000000;"><b><div class="colorbox"></div>A <div class="colorbox"></div>B</b></td>
    347     </tr>
    348     <tr valign="top" style="border-top: 1px solid #000000;">
    349       <th style="border-right: 1px solid #000000;">ReadString</th>
    350       <td colspan="2" style="border-right: 1px solid #000000;"><div id="readString.<%=c%>" >ReadString</div></td>
    351     </tr>
    352     <tr valign="top" style="border-top: 1px solid #000000;">
    353       <th rowspan="1" style="border-right: 1px solid #000000;">Comments</th>
    354       <td rowspan="1" colspan="2" style="border-right: 1px solid #000000; height: 6em;"></td>
     327   
     328    <tr style="max-height: 100%; height: auto; vertical-align: top;">
     329      <td colspan="2" id="flowCellDescription.<%=c%>"></td>
    355330    </tr>
    356331    </table>
    357     <table style="width: 100%;" id="listview">
    358     <thead>
    359       <tr>
    360         <th>Lane</th>
    361         <th style="width: 20%;">Pool name</th>
    362         <th>Remarks</th>
    363       </tr>
    364     </thead>
    365     <tbody>
    366332    <%
    367     int rows = (Integer) numLanesList.get(c);
    368     for (int r = 0; r < rows; ++r)
    369     {
    370       //String rowClass = c % 2 == 0 ? "evencol" : "oddcol";
    371       String rowClass = "oddcol";
    372       String idSuffix = c + "." + r;
    373       %>
    374       <tr class="<%=rowClass%> empty" id="row.<%=idSuffix%>">
    375         <td class="col-num"><%=r+1%></td>
    376         <td class="remarks" style="width: 20%;" id="fcPoolName.<%=idSuffix%>"></td>
    377         <td class="remarks" id="fcPoolRemarks.<%=idSuffix%>"></td>
    378       </tr>
    379       <%
    380     }
     333  }
     334  %>
     335 
     336  <h2>2. Sequencing startup</h2>
     337 
     338  <table class="protocolheader">
     339  <tr>
     340    <th style="width: 25%;">Sequencing machine</th>
     341    <td style="width: 75%;" colspan="2"></td>
     342  </tr>
     343  <tr>
     344    <th>Date</th>
     345    <td colspan="2"></td>
     346  </tr>
     347  <tr>
     348    <th>Operator</th>
     349    <td colspan="2"></td>
     350  </tr>
     351 
     352  <tr>
     353    <th></th>
     354    <th style="width: 15%; border-right: 0;">HiSeq position</th>
     355    <th>ReadString</th>
     356  </tr>
     357
     358  <%
     359  // Note: Variable 'c' here indicates a flow cell, not a table column
     360  // Each flow cell is shown in its own table
     361  for (int c = 0; c < nFlowCells; ++c)
     362  {
    381363    %>
    382     </tbody>
    383     </table>
    384     <br>
    385     <br>
     364    <tr>
     365      <th id="flowCellName2.<%=c%>" class="subprompt">Flowcell<%=c %></th>
     366      <td><b><div class="colorbox"></div>A <div class="colorbox"></div>B</b></td>
     367      <td><div id="readString.<%=c%>">ReadString</div></td>
     368    </tr>
    386369    <%
    387370  }
    388371  %>
    389   <table style="width: 100%;" class="protocolheader">
    390   <tr style="border-bottom: 1px solid #000000;">
    391     <th style="width: 25%; border-right: 1px solid #000000;">Sequencing machine ID</th>
    392     <td style="width: 75%; border-right: 1px solid #000000;"></td>
     372  <tr style="height: 7em; vertical-align: top;">
     373    <th>Comments</th>
     374    <td colspan="2"></td>
    393375  </tr>
    394376  </table>

  • extensions/net.sf.basedb.reggie/trunk/resources/libprep/flowcell_registration.jsp

    r2062 r2063  
    624624  <p:path><p:pathelement
    625625    title="Reggie" href="<%="../index.jsp?ID="+ID%>"
    626     /><p:pathelement title="Register clustering and sequence start of flow cells"
     626    /><p:pathelement title="Register clustering and sequencing startup"
    627627    /></p:path>
    628628
    … …  
    671671        <td class="help"><span id="flowcells.message" class="message" style="display: none;"></span>
    672672          Select 1 or 2 existing flow cells. The list contain all flow cells that
    673           has not yet been processed (determined by the absence of a 'creation' date).
     673          has not yet been clustered or sequenced (determined by the absence of a 'creation' date).
    674674        </td>
    675675      </tr>
Note: See TracChangeset for help on using the changeset viewer.