source: extensions/net.sf.basedb.reggie/branches/ticket-422/resources/libprep/libprep_protocol2.jsp @ 1814

Last change on this file since 1814 was 1814, checked in by Nicklas Nordborg, 10 years ago

References #456 and #457. Added support for manually setting barcodes. Check for duplicate barcodes in the same pool. Added list- and plate-view protocols for library preparation.
File size: 12.2 KB
Line 
1<%@ page
2  pageEncoding="UTF-8"
3  session="false"
4  import="net.sf.basedb.core.User"
5  import="net.sf.basedb.core.DbControl"
6  import="net.sf.basedb.core.SessionControl"
7  import="net.sf.basedb.core.Application"
8  import="net.sf.basedb.core.Extract"
9  import="net.sf.basedb.core.BioMaterial"
10  import="net.sf.basedb.core.MeasuredBioMaterial"
11  import="net.sf.basedb.core.BioMaterialEventSource"
12  import="net.sf.basedb.core.BioPlate"
13  import="net.sf.basedb.core.BioWell"
14  import="net.sf.basedb.core.PermissionDeniedException"
15  import="net.sf.basedb.core.ItemQuery"
16  import="net.sf.basedb.core.query.Restrictions"
17  import="net.sf.basedb.core.query.Hql"
18  import="net.sf.basedb.util.Values"
19  import="net.sf.basedb.util.formatter.WellCoordinateFormatter"
20  import="net.sf.basedb.util.extensions.Extension"
21  import="net.sf.basedb.clients.web.Base" 
22  import="net.sf.basedb.clients.web.util.HTML"
23  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
24  import="java.util.List"
25  import="java.util.ArrayList"
26%>
27<%
28final SessionControl sc = Base.getExistingSessionControl(request, true);
29final String ID = sc.getId();
30final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
31final String root = request.getContextPath();
32DbControl dc = null;
33try
34{
35  dc = sc.newDbControl();
36  final Extension reggie = ExtensionsControl.get(dc).getExtension("net.sf.basedb.reggie");
37  final User user = User.getById(dc, sc.getLoggedInUserId());
38  int cDnaPlateId = Values.getInt(request.getParameter("bioplate"));
39  String poolSchema = request.getParameter("poolSchema");
40  String barcodeVariant = request.getParameter("barcodeVariant");
41 
42  BioPlate plate = BioPlate.getById(dc, cDnaPlateId);
43  int columns = plate.getColumns();
44  int rows = plate.getRows();
45  String view = Values.getString(request.getParameter("view"), "list");
46%>
47<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
48<html>
49<head>
50  <title>Lab tracking protocol for library preparation</title>
51  <link rel="SHORTCUT ICON" href="<%=home%>/images/flowcell.png">
52  <link rel="stylesheet" type="text/css" href="<%=home %>/css/printable.css">
53  <link rel="stylesheet" type="text/css" href="<%=home %>/css/plate.css">
54  <script language="JavaScript" src="<%=root%>/include/scripts/main.js" type="text/javascript" charset="UTF-8"></script>
55  <script language="JavaScript" src="<%=root%>/include/scripts/ajax.js" type="text/javascript" charset="UTF-8"></script>
56  <script language="JavaScript" src="<%=home %>/reggie.js" type="text/javascript" charset="UTF-8"></script>
57  <script language="JavaScript" src="pools.js" type="text/javascript" charset="UTF-8"></script>
58  <script language="JavaScript" src="plate.js" type="text/javascript" charset="UTF-8"></script>
59 
60  <script language="JavaScript">
61  var debug = true;
62  var currentStep = 1;
63 
64  function init()
65  {
66    var schema = PoolSchema.getById('<%=poolSchema%>');
67    var barcodeVariant = PoolSchema.getBarcodeVariantByName(schema, '<%=barcodeVariant%>');
68
69    // Load cDNA and related info from the selected bioplate
70    var request = Ajax.getXmlHttpRequest();
71    try
72    {
73      showLoadingAnimation('Loading cDNA bioplate information...');
74      var url = '../LibPrep.servlet?ID=<%=ID%>&cmd=GetLibraryInfoForPlate&bioplate=<%=cDnaPlateId%>';   
75      request.open("GET", url, false);
76      request.send(null);
77    }
78    finally
79    {
80      hideLoadingAnimation();
81    }
82   
83    if (debug) Main.debug(request.responseText);
84    var response = JSON.parse(request.responseText);
85    if (response.status != 'ok')
86    {
87      setFatalError(response.message);
88      return false;
89    }
90   
91    var list = response.libraries;
92
93    // Pre-process the Library items
94    for (var i = 0; i < list.length; i++)
95    {
96      checkAndPreProcessLibrary(list[i], schema, barcodeVariant);
97    }
98   
99    <%
100    if (view.equals("list"))
101    {
102      %>
103      viewAsList(list, schema, barcodeVariant);
104      <%
105    }
106    else
107    {
108      %>
109      viewAsPlate(list, schema, barcodeVariant)
110      <%
111    }
112    %>
113  }
114 
115  function checkAndPreProcessLibrary(lib, schema, barcodeVariant)
116  {
117    var well = lib.cdna.bioWell;
118    var remarks = [];
119
120    // Check if default barcode has been modified
121    var indexSet = barcodeVariant.indexSets[well.column];
122    if (indexSet)
123    {
124      var defaultBarcode = indexSet.barcodes[well.row];
125      if (defaultBarcode && lib.barcode.name != defaultBarcode)
126      {
127        remarks[remarks.length] = 'Modified barcode';
128        lib.barcode.modified = true;
129      }
130    }
131    lib.remarks = remarks;
132  }
133 
134  /**
135    Get the plate coordinate string for a well, optionally including the plate
136    name or not.
137  */
138  function getPlateCoordinate(well, includePlateName)
139  {
140    var c = '';
141    if (well)
142    {
143      if (includePlateName) c += well.bioPlate.name;
144      c += ' ' + WELL_ALPHA[well.row] + (well.column+1);
145    }
146    return c;
147  }
148 
149 
150  function viewAsList(list, schema, barcodeVariant)
151  {
152    var lastPoolNum = -1;
153    for (var i = 0; i < list.length; i++)
154    {
155      var lib = list[i];
156      var well = lib.cdna.bioWell;
157 
158      var idSuffix = well.column + '.' + well.row;
159      Main.removeClass(document.getElementById('row.'+idSuffix), 'empty');
160      setInnerHTML('lib.'+idSuffix, lib.name);
161      setInnerHTML('barcode.'+idSuffix, lib.barcode.name);
162     
163      var indexSet = barcodeVariant.indexSets[well.column];
164      if (indexSet)
165      {
166        var color = lib.barcode.modified ? 'bg-modified' : indexSet.color;
167        Main.addClass(document.getElementById('barcode.'+idSuffix), color);
168      }
169     
170      setInnerHTML('remarks.'+idSuffix, lib.remarks.join('; '));
171    }
172  }
173 
174 
175  function viewAsPlate(list, schema, barcodeVariant)
176  {
177    Plate.init(<%=rows%>, <%=columns%>, schema, WellPainter);
178   
179    for (var i = 0; i < list.length; i++)
180    {
181      var lib = list[i];
182      var well = lib.cdna.bioWell;
183      Plate.getWell(well.row, well.column).setExtract(lib);
184    }
185
186    WellPainter.barcodeVariant = barcodeVariant;
187    Plate.paint(Plate.getWells());
188    PoolSchema.buildPoolTableRow(schema, <%=columns%>);
189    Main.show('plateview');
190  }
191
192  var WellPainter = function()
193  {
194    var painter = {};
195   
196    painter.getClassNameForWell = function(well, schema)
197    {
198      var cls = '';
199      var indexSet = painter.barcodeVariant.indexSets[well.column];
200      if (indexSet)
201      {
202        var lib = well.extract;
203        cls += lib && lib.barcode.modified ? 'bg-modified' : indexSet.color;
204      }
205      return cls;
206    }
207   
208    painter.getWellText = function(well, schema)
209    {
210      var text = '';
211      var lib = well.extract;
212      if (lib)
213      {
214        var name = lib.name;
215        var i = name.indexOf('.m');
216        text += '<div class="lib">'+name.substring(0, i)+'.<br>&nbsp;'+name.substring(i)+'</div>';
217        text += '<div class="barcode">'+lib.barcode.name+'</div>';
218        text += '<div class="remarks">'+ lib.remarks.join('; ') + '</div>';
219      }
220      return text;
221    }
222
223    return painter;
224  }();
225  </script>
226  <style>
227  table.protocolheader
228  {
229    width: 100%;
230  }
231
232  table.protocolheader > tbody > tr
233  {
234    height: 1.25em;
235  }
236
237  table.protocolheader > tbody > tr > th
238  {
239    width: 50%;
240    text-align: left;
241    font-size: 1em;
242  }
243 
244  #listview
245  {
246    width: 100%;
247    font-size: 85%;
248    border-collapse: collapse;
249    border: 1px solid #000000;
250  }
251 
252  #listview tr.evencol
253  {
254    background-color: #E8E8E8;
255  }
256 
257  #listview thead
258  {
259    border: 1px solid #000000;
260    background-color: #E8E8E8;
261  }
262 
263  #listview tbody
264  {
265    page-break-inside: avoid;
266    border-top: 1px solid #000000;
267    border-bottom: 1px solid #000000;
268  }
269 
270  #listview th
271  {
272    border-left: 1px solid #000000;
273  }
274 
275  #listview td
276  {
277    border-left: 1px solid #000000;
278    border-top: 1px dotted #666666;
279    vertical-align: middle;
280  }
281 
282  #listview .col-num
283  {
284    width: 1.75em;
285    text-align: center;
286    font-size: 125%;
287    font-weight: bold;
288    vertical-align: top;
289  }
290 
291  #listview .lib
292  {
293    width: 15em;
294    text-align: center;
295  }
296 
297  #listview .empty .lib
298  {
299    font-style: italic;
300    color: #666666;
301    text-align: center;
302  }
303 
304  #listview .workplate, #listview .barcode
305  {
306    width: 7em;
307    text-align: center;
308  }
309  #listview .remarks
310  {
311    vertical-align: top;
312    padding-left: 0.25em;
313  }
314 
315  /* Divide the 12 wells across the full page */
316  #plateview .well
317  {
318    width: 8.2%;
319    max-width: 8.2%;
320    min-width: 8.2%;
321  }
322   
323  #plateview .rowheader
324  {
325    width: 2em;
326  }
327 
328  #plateview .lib
329  {
330    font-weight: bold;
331  }
332  #plateview .remarks
333  {
334    color: #C80000;
335    font-style: italic;
336  }
337  </style>
338</head>
339<body onload="init()">
340  <div class="paper <%=view.equals("list") ? "" : "landscape"%>">
341  <div class="noprint fullwidth" style="border-bottom: 1px dashed #A0A0A0; padding-left: 1em; padding-bottom: 1em;">
342    <span class="button" onclick="window.print()" style="float: left; margin-right: 1em;">
343      <img src="../images/print.png">Print&hellip;
344    </span>
345    <b>Note!</b> 
346    <%
347    if (view.equals("list"))
348    {
349      %>
350      For better printing reduce margins to about <i>5mm</i> and set page orientation
351      to <i>portrait</i>. To fit everything on a single page, scale down to <i>60-70%</i>.
352      <%
353    }
354    else
355    {
356      %>
357      For better printing reduce margins to about <i>5mm</i> and set page orientation
358      to <i>landscape</i>. The recommended scale is <i>100%</i>.
359      <%
360    }
361    %>
362    <br clear="all">
363  </div>
364 
365  <h1>Lab tracking protocol for library preparation <span class="reggie">Reggie <%=reggie.getAbout().getVersion() %></span></h1>
366
367  <table style="width: 100%; border: 0px;" class="protocolheader">
368  <tr valign="top">
369    <th style="width: 30%;">Work plate: <%=HTML.encodeTags(plate.getName())%></th>
370    <th style="width: 20%; text-align: right;">Comments:&nbsp;</th>
371    <td rowspan="3"><%=HTML.encodeTags(plate.getDescription()) %></td>
372  </tr>
373  <tr>
374    <th style="width: 50%;" colspan="2">Date+operator for library preparation:</th>
375  </tr>
376  </table>
377
378  <div class="loading" id="loading" style="display: none;"><table><tr><td><img src="../images/loading.gif"></td><td id="loading.msg">Please wait...</td></tr></table></div>
379  <div class="messagecontainer error" id="errorMessage" style="display: none;"></div>
380  <%
381  if (view.equals("list"))
382  {
383    %>
384    <table style="width: 100%;" id="listview">
385    <thead>
386      <tr class="toprow">
387        <th></th>
388        <th class="lib"></th>
389        <th class="workplate">Work</th>
390        <th class="barcode">TruSeq</th>
391        <th></th>
392      </tr>
393      <tr>
394        <th></th>
395        <th class="lib">Library</th>
396        <th class="workplate">plate</th>
397        <th class="barcode">index</th>
398        <th>Remarks</th>
399      </tr>
400    </thead>
401    <%
402    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
403    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
404    for (int c = 0; c < columns; ++c)
405    {
406      String rowClass = c % 2 == 0 ? "evencol" : "oddcol";
407      %>
408      <tbody>
409      <%
410      for (int r = 0; r < rows; ++r)
411      {
412        String idSuffix = c + "." + r;
413        %>
414        <tr class="<%=rowClass%> empty" id="row.<%=idSuffix%>">
415          <%
416          if (r == 0)
417          {
418            %>
419            <td class="col-num" rowspan="<%=rows%>"><%=c+1%></td>
420            <%
421          }
422          %>
423          <td class="lib" id="lib.<%=idSuffix%>">empty</td>
424          <td class="workplate"><%=rowF.format(r)+colF.format(c)%></td>
425          <td class="barcode" id="barcode.<%=idSuffix%>"></td>
426          <td class="remarks" id="remarks.<%=idSuffix%>"></td>
427        </tr>
428        <%
429      }
430      %>
431      </tbody>
432      <%
433    }
434    %>
435    </table>
436    <%
437  }
438  else
439  {
440    %>
441    <table class="plate" style="margin: 0em 0 0 0; width: 100%; display: none;" id="plateview">
442    <%
443    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
444    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
445    %>
446    <tr class="header">
447      <th></th>
448      <%
449      for (int c = 0; c < columns; ++c)
450      {
451        %>
452        <th id="col.<%=c%>"><%=colF.format(c)%></th>
453        <%
454      }
455      %>
456    </tr>
457    <tbody>
458    <%
459    for (int r = 0; r < rows; ++r)
460    {
461      String row = rowF.format(r);
462      %>
463      <tr class="row-<%=r%>">
464        <th id="row.<%=r%>" class="rowheader"><%=row%></th>
465        <%
466        for (int c = 0; c < columns; ++c)
467        {
468          %>
469          <td class="well col-<%=c%>" id="well.<%=r%>.<%=c%>"></td>
470          <%
471        }
472        %>
473      </tr>
474      <%
475    }
476    %>
477    </tbody>
478    <tr id="pool-row">
479      <th colspan="13">&nbsp;</th>
480    </tr>
481    </table>
482    <%
483  }
484  %>
485  </div>
486</body>
487</html>
488<%
489}
490finally
491{
492  if (dc != null) dc.close();
493}
494%>
Note: See TracBrowser for help on using the repository browser.