source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/mrna_protocol2.jsp @ 6218

Last change on this file since 6218 was 6218, checked in by Nicklas Nordborg, 15 months ago

References #1302: Qubit concentration instead of NanoDrop? on RNA and DNA items

Started to work on this. The QubitConc annotation has been added to RNA and DNA categories.

It should be fixed in the library preparation wizards that create new mRNA plates/library plates and the lab protocols that are related.

File size: 10.9 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<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
28<%
29final SessionControl sc = Base.getExistingSessionControl(request, "net.sf.basedb.reggie", true);
30final String ID = sc.getId();
31final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
32final String root = request.getContextPath();
33DbControl dc = null;
34try
35{
36  dc = sc.newDbControl();
37  final Extension reggie = ExtensionsControl.get(dc).getExtension("net.sf.basedb.reggie");
38  final User user = User.getById(dc, sc.getLoggedInUserId());
39  int mRnaPlateId = Values.getInt(request.getParameter("bioplate"));
40  final Float stratageneConc = Values.getFloat(request.getParameter("stratageneConc"), null);
41  String poolSchema = request.getParameter("poolSchema");
42 
43  BioPlate plate = BioPlate.getById(dc, mRnaPlateId);
44  int columns = plate.getColumns();
45  int rows = plate.getRows();
46  String view = Values.getString(request.getParameter("view"), "list");
47  String title = "Lab protocol for " + HTML.encodeTags(plate.getName()) + " - " + (view.equals("list") ? "list" : "table");
48%>
49<base:page id="protocol" type="iframe" favicon="<%=home+"/images/pipette.png"%>" title="<%=title%>" noskin="true">
50<base:head
51  scripts="~../reggie-2.js,~pools.js,~plate.js,~mrna_protocol.js" 
52  styles="~../css/reggie-2.css,~../css/printable.css,~../css/plate.css"
53  >
54  <style>
55  table.protocolheader
56  {
57    width: 100%;
58    border: 1px solid #000000;
59    margin-bottom: 1em;
60    border-collapse: collapse;
61  }
62
63  table.protocolheader > tbody > tr
64  {
65    vertical-align: top;
66    height: 1.25em;
67  }
68
69  table.protocolheader > tbody > tr > th
70  {
71    text-align: left;
72    font-size: 1em;
73    background-color: #F0F0F0;
74    padding: 2px;
75  }
76 
77  table.protocolheader > tbody > tr > td
78  {
79    text-align: left;
80    font-size: 1em;
81    padding: 2px;
82  }
83 
84  #listview
85  {
86    width: 100%;
87    font-size: 85%;
88    border-collapse: collapse;
89    border: 1px solid #000000;
90  }
91 
92  #listview tr.evencol
93  {
94    background-color: #F0F0F0;
95  }
96 
97  #listview thead
98  {
99    border: 1px solid #000000;
100    background-color: #F0F0F0;
101  }
102 
103  #listview tbody
104  {
105    page-break-inside: avoid;
106    border-top: 1px solid #000000;
107    border-bottom: 1px solid #000000;
108  }
109 
110  #listview th
111  {
112    border-left: 1px solid #000000;
113  }
114 
115  #listview td
116  {
117    border-left: 1px solid #000000;
118    border-top: 1px dotted #666666;
119    vertical-align: middle;
120    padding: 1px;
121  }
122 
123  #listview .col-num
124  {
125    width: 1.75em;
126    text-align: center;
127    font-size: 125%;
128    font-weight: bold;
129    vertical-align: top;
130  }
131 
132  #listview .rna
133  {
134    width: 10em;
135    text-align: center;
136    white-space: nowrap;
137  }
138 
139  #listview .empty .rna
140  {
141    font-style: italic;
142    color: #666666;
143    text-align: center;
144  }
145 
146  .external .rna:before
147  {
148    content: '[';
149  }
150  .external .rna:after
151  {
152    content: ']';
153  }
154 
155  #listview .box
156  {
157    width: 8em;
158    text-align: center;
159  }
160  #listview .workplate
161  {
162    width: 5em;
163    text-align: center;
164  }
165  #listview .conc
166  {
167    width: 4.5em;
168    padding-right: 0.5em;
169    text-align: right;
170  }
171  #listview .remain
172  {
173    width: 4.5em;
174    padding-right: 0.5em;
175    text-align: right;
176  }
177  #listview .volume
178  {
179    width: 3.5em;
180    padding-right: 0.5em;
181    text-align: right;
182    color: #C80000;
183  }
184  #listview .water
185  {
186    width: 3.5em;
187    padding-right: 0.5em;
188    text-align: right;
189    color: #0000C8;
190  }
191  #listview .remarks
192  {
193    vertical-align: top;
194    padding-left: 0.25em;
195  }
196 
197  /* Divide the 12 wells across the full page */
198  #plateview .well
199  {
200    width: 8.2%;
201    max-width: 8.2%;
202    min-width: 8.2%;
203    background-color: #FFFFFF;
204    padding: 4px;
205  }
206 
207  #plateview .well:hover
208  {
209    padding: 3px;
210  }
211   
212  #plateview .rowheader
213  {
214    width: 2em;
215  }
216 
217  #plateview .rna
218  {
219    font-weight: bold;
220    margin-bottom: 0.25em;
221  }
222  #plateview .box
223  {
224    margin-bottom: 0.25em;
225  }
226  #plateview .conc
227  {
228    display: none;
229  }
230  #plateview .remain
231  {
232    display: none;
233  }
234  #plateview .volume
235  {
236    color: #C80000;
237  }
238  #plateview .water
239  {
240    color: #0000C8;
241    float: right;
242  }
243  #plateview .remarks
244  {
245    color: #C80000;
246    font-style: italic;
247  }
248  #plateview .qc
249  {
250    background-image: url('../images/mrnaqc.png');
251    background-position: 95% 25%;
252    background-repeat: no-repeat;
253  }
254 
255  #plateview .yellow-specimen .if-yellow
256  {
257    background-image: url('../images/yellow-label-small.png');
258    background-position: 1px 50%;
259    background-repeat: no-repeat;
260    /* Grow background without shifting text position veritcally, move to right to make room for icon*/
261    padding: 4px 4px 3px 14px;
262    margin: -4px -4px -1px -4px;
263  }
264 
265 
266  </style>
267</base:head>
268<base:body>
269
270  <div class="paper <%=view.equals("list") ? "" : "landscape"%>">
271
272  <form name="reggie" id="wizard">
273 
274  <div id="page-data" class="datacontainer"
275    data-view="<%=view%>"
276    data-mrna-plate="<%=mRnaPlateId %>"
277    data-stratagene-conc="<%=stratageneConc%>"
278    data-home-url="<%=home%>"
279  ></div>
280 
281  <div id="wizard-status"></div>
282
283  <div id="all-protocol" style="display: none;">
284  <div id="print-instructions" class="noprint fullwidth">
285    <base:button id="print-button" image="<%=home+"/images/print.png"%>" title="Print&hellip;" />
286    <span id="printNote">
287    <b>Note!</b> 
288    <%
289    if (view.equals("list"))
290    {
291      %>
292      For better printing reduce margins to about <i>5mm</i> and set page orientation
293      to <i>portrait</i>. To fit everything on a single page, scale down to <i>60-70%</i>.
294      <%
295    }
296    else
297    {
298      %>
299      For better printing reduce margins to about <i>5mm</i> and set page orientation
300      to <i>landscape</i>. The recommended scale is <i>100%</i>.
301      <%
302    }
303    %>
304    </span>
305    <br clear="all">
306  </div>
307
308 
309  <h1>Lab protocol for mRNA and cDNA preparation <span class="reggie">Reggie <%=reggie.getAbout().getVersion() %></span></h1>
310
311  <table style="width: 100%;" class="protocolheader">
312  <tr style="border-bottom: 1px solid #000000;">
313    <th style="width: 15%;">Work plate</th>
314    <td style="width: 30%; border-right: 1px solid #000000;"><%=HTML.encodeTags(plate.getName())%></td>
315    <th style="width: 15%;">mRNA</th>
316    <th style="width: 20%;">Date</th>
317    <th style="width: 20%;">Operator</th>
318  </tr>
319  <tr>
320    <td rowspan="5" colspan="2" style="width: 50%; border-right: 1px solid #000000;"><%=HTML.niceFormat(plate.getDescription()) %></td>
321    <td style="border-right: 1px solid #000000;">Dilution</td>
322    <td style="border-right: 1px solid #000000;" id="dilution-date"></td>
323    <td id="dilution-operator"></td>
324  </tr>
325  <tr style="border-top: 1px solid #CCCCCC;">
326    <td style="border-right: 1px solid #000000;">Purification</td>
327    <td style="border-right: 1px solid #000000;"></td>
328    <td></td>
329  </tr>
330  <tr style="border-top: 1px solid #CCCCCC;">
331    <td style="border-right: 1px solid #000000;">Fragmentation</td>
332    <td style="border-right: 1px solid #000000;"></td>
333    <td></td>
334  </tr>
335  <tr style="border-top: 1px solid #CCCCCC;">
336    <td style="border-right: 1px solid #000000;">Cleanup</td>
337    <td style="border-right: 1px solid #000000;"></td>
338    <td></td>
339  </tr>
340  <tr valign="top" style="border-top: 1px solid #000000;">
341    <th style="border-right: 1px solid #000000;">cDNA synth.</th>
342    <td style="border-right: 1px solid #000000;"></td>
343    <td></td>
344  </tr>
345  </table>
346
347  <%
348  if (view.equals("list"))
349  {
350    %>
351    <table style="width: 100%;" id="listview">
352    <thead>
353      <tr class="toprow">
354        <th></th>
355        <th class="rna"></th>
356        <th class="box">Storage</th>
357        <th>Conc.</th>
358        <th>Remain</th>
359        <th class="workplate">Work</th>
360        <th colspan="2">Volume</th>
361        <th></th>
362      </tr>
363      <tr>
364        <th></th>
365        <th class="rna">RNA</th>
366        <th class="box">box</th>
367        <th>(ng/µl)</th>
368        <th>(µg)</th>
369        <th class="workplate">plate</th>
370        <th>(µl)</th>
371        <th>H<sub>2</sub>O</th>
372        <th>Remarks</th>
373      </tr>
374    </thead>
375    <%
376    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
377    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
378    for (int c = 0; c < columns; ++c)
379    {
380      String rowClass = c % 2 == 0 ? "evencol" : "oddcol";
381      %>
382      <tbody>
383      <%
384      for (int r = 0; r < rows; ++r)
385      {
386        String idSuffix = c + "." + r;
387        %>
388        <tr class="<%=rowClass%> empty" id="row.<%=idSuffix%>">
389          <%
390          if (r == 0)
391          {
392            %>
393            <td class="col-num" rowspan="<%=rows%>"><%=c+1%></td>
394            <%
395          }
396          %>
397          <td class="rna if-yellow" id="rna.<%=idSuffix%>">empty</td>
398          <td class="box" id="box.<%=idSuffix%>"></td>
399          <td class="conc" id="conc.<%=idSuffix%>"></td>
400          <td class="remain" id="remain.<%=idSuffix%>"></td>
401          <td class="workplate"><%=rowF.format(r)+colF.format(c)%></td>
402          <td class="volume" id="volume.<%=idSuffix%>"></td>
403          <td class="water" id="water.<%=idSuffix%>"></td>
404          <td class="remarks" id="remarks.<%=idSuffix%>"></td>
405        </tr>
406        <%
407      }
408      %>
409      </tbody>
410      <%
411    }
412    %>
413    </table>
414    <%
415  }
416  else
417  {
418    %>
419    <table class="plate" style="margin: 0em 0 0 0; width: 100%;" id="plateview">
420    <%
421    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
422    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
423    %>
424    <tr class="header">
425      <th></th>
426      <%
427      for (int c = 0; c < columns; ++c)
428      {
429        %>
430        <th id="col.<%=c%>"><%=colF.format(c)%></th>
431        <%
432      }
433      %>
434    </tr>
435    <tbody>
436    <%
437    for (int r = 0; r < rows; ++r)
438    {
439      String row = rowF.format(r);
440      %>
441      <tr class="row-<%=r%>">
442        <th id="row.<%=r%>" class="rowheader"><%=row%></th>
443        <%
444        for (int c = 0; c < columns; ++c)
445        {
446          %>
447          <td class="well col-<%=c%>" id="well.<%=r%>.<%=c%>"></td>
448          <%
449        }
450        %>
451      </tr>
452      <%
453    }
454    %>
455    </tbody>
456    <tr id="pool-row">
457      <th colspan=<%=columns+1 %>>&nbsp;</th>
458    </tr>
459    </table>
460    <%
461  }
462  %>
463  <i>Low quantity = The remaining quantity is too low for the RNA to be re-processed one more time</i>
464</div>
465</form>
466</div>
467 
468</base:body>
469</base:page>
470<%
471}
472finally
473{
474  if (dc != null) dc.close();
475}
476%>
Note: See TracBrowser for help on using the repository browser.