source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/libprep_protocol2.jsp @ 1929

Last change on this file since 1929 was 1929, checked in by Nicklas Nordborg, 9 years ago

References #424, #425, #457, #479. Re-designed protocols to make the header section a bit more compact when the comment text is large. Display a warning when the remaining RNA quanitity is below 1.5 times the required amount (eg. 1.1µg or 1.22µg).

File size: 12.3 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 libPlateId = Values.getInt(request.getParameter("bioplate"));
39  String poolSchema = request.getParameter("poolSchema");
40  String barcodeVariant = request.getParameter("barcodeVariant");
41 
42  BioPlate plate = BioPlate.getById(dc, libPlateId);
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 protocol for <%=HTML.encodeTags(plate.getName())%> - <%=view.equals("list") ? "list" : "table"%></title>
51  <link rel="SHORTCUT ICON" href="<%=home%>/images/libprep.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 = false;
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 Libraries and related info from the selected bioplate
70    var request = Ajax.getXmlHttpRequest();
71    try
72    {
73      showLoadingAnimation('Loading Library bioplate information...');
74      var url = '../LibPrep.servlet?ID=<%=ID%>&cmd=GetLibraryInfoForPlate&bioplate=<%=libPlateId%>';   
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.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.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.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: #F0F0F0;
255  }
256 
257  #listview thead
258  {
259    border: 1px solid #000000;
260    background-color: #F0F0F0;
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    padding: 4px;
322  }
323 
324  #plateview .well:hover
325  {
326    padding: 3px;
327  }
328   
329  #plateview .rowheader
330  {
331    width: 2em;
332  }
333 
334  #plateview .lib
335  {
336    font-weight: bold;
337    margin-bottom: 0.25em;
338  }
339  #plateview .remarks
340  {
341    color: #C80000;
342    font-style: italic;
343  }
344  </style>
345</head>
346<body onload="init()">
347  <div class="paper <%=view.equals("list") ? "" : "landscape"%>">
348  <div class="noprint fullwidth" style="border-bottom: 1px dashed #A0A0A0; padding-left: 1em; padding-bottom: 1em;">
349    <span class="button" onclick="window.print()" style="float: left; margin-right: 1em;">
350      <img src="../images/print.png">Print&hellip;
351    </span>
352    <b>Note!</b> 
353    <%
354    if (view.equals("list"))
355    {
356      %>
357      For better printing reduce margins to about <i>5mm</i> and set page orientation
358      to <i>portrait</i>. To fit everything on a single page, scale down to <i>60-70%</i>.
359      <%
360    }
361    else
362    {
363      %>
364      For better printing reduce margins to about <i>5mm</i> and set page orientation
365      to <i>landscape</i>. The recommended scale is <i>100%</i>.
366      <%
367    }
368    %>
369    <br clear="all">
370  </div>
371 
372  <h1>Lab protocol for library preparation <span class="reggie">Reggie <%=reggie.getAbout().getVersion() %></span></h1>
373
374  <table style="width: 100%; border: 0px;" class="protocolheader">
375  <tr valign="top">
376    <th style="width: 40%;">Work plate: <%=HTML.encodeTags(plate.getName())%></th>
377    <th style="width: 60%;">Comments:</th>
378  </tr>
379  <tr valign="top">
380    <th style="width: 40%; padding-bottom: 1.5em;">Date+operator for library preparation:</th>
381    <td><%=HTML.niceFormat(plate.getDescription()) %></td>
382  </tr>
383  </table>
384
385  <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>
386  <div class="messagecontainer error" id="errorMessage" style="display: none;"></div>
387  <%
388  if (view.equals("list"))
389  {
390    %>
391    <table style="width: 100%;" id="listview">
392    <thead>
393      <tr class="toprow">
394        <th></th>
395        <th class="lib"></th>
396        <th class="workplate">Work</th>
397        <th class="barcode">TruSeq</th>
398        <th></th>
399      </tr>
400      <tr>
401        <th></th>
402        <th class="lib">Library</th>
403        <th class="workplate">plate</th>
404        <th class="barcode">index</th>
405        <th>Remarks</th>
406      </tr>
407    </thead>
408    <%
409    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
410    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
411    for (int c = 0; c < columns; ++c)
412    {
413      String rowClass = c % 2 == 0 ? "evencol" : "oddcol";
414      %>
415      <tbody>
416      <%
417      for (int r = 0; r < rows; ++r)
418      {
419        String idSuffix = c + "." + r;
420        %>
421        <tr class="<%=rowClass%> empty" id="row.<%=idSuffix%>">
422          <%
423          if (r == 0)
424          {
425            %>
426            <td class="col-num" rowspan="<%=rows%>"><%=c+1%></td>
427            <%
428          }
429          %>
430          <td class="lib" id="lib.<%=idSuffix%>">empty</td>
431          <td class="workplate"><%=rowF.format(r)+colF.format(c)%></td>
432          <td class="barcode" id="barcode.<%=idSuffix%>"></td>
433          <td class="remarks" id="remarks.<%=idSuffix%>"></td>
434        </tr>
435        <%
436      }
437      %>
438      </tbody>
439      <%
440    }
441    %>
442    </table>
443    <%
444  }
445  else
446  {
447    %>
448    <table class="plate" style="margin: 0em 0 0 0; width: 100%; display: none;" id="plateview">
449    <%
450    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
451    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
452    %>
453    <tr class="header">
454      <th></th>
455      <%
456      for (int c = 0; c < columns; ++c)
457      {
458        %>
459        <th id="col.<%=c%>"><%=colF.format(c)%></th>
460        <%
461      }
462      %>
463    </tr>
464    <tbody>
465    <%
466    for (int r = 0; r < rows; ++r)
467    {
468      String row = rowF.format(r);
469      %>
470      <tr class="row-<%=r%>">
471        <th id="row.<%=r%>" class="rowheader"><%=row%></th>
472        <%
473        for (int c = 0; c < columns; ++c)
474        {
475          %>
476          <td class="well col-<%=c%>" id="well.<%=r%>.<%=c%>"></td>
477          <%
478        }
479        %>
480      </tr>
481      <%
482    }
483    %>
484    </tbody>
485    <tr id="pool-row">
486      <th colspan="13">&nbsp;</th>
487    </tr>
488    </table>
489    <%
490  }
491  %>
492  </div>
493</body>
494</html>
495<%
496}
497finally
498{
499  if (dc != null) dc.close();
500}
501%>
Note: See TracBrowser for help on using the repository browser.