source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/select_rna.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: 16.8 KB
Line 
1<%@ page
2  pageEncoding="UTF-8"
3  session="false"
4  import="net.sf.basedb.core.Application"
5  import="net.sf.basedb.core.User"
6  import="net.sf.basedb.core.DbControl"
7  import="net.sf.basedb.core.SessionControl"
8  import="net.sf.basedb.clients.web.Base"
9  import="net.sf.basedb.clients.web.util.HTML"
10  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
11  import="net.sf.basedb.util.Values"
12  import="net.sf.basedb.util.formatter.WellCoordinateFormatter"
13%>
14<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
15<%@ taglib prefix="m" uri="/WEB-INF/menu.tld" %>
16<%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
17<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
18<%
19final SessionControl sc = Base.getExistingSessionControl(request, "net.sf.basedb.reggie", true);
20final String ID = sc.getId();
21final float scale = Base.getScale(sc);
22final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
23final String plateType = Values.getString(request.getParameter("plateType"), "MRNA");
24
25final boolean autoDesign = Values.getBoolean(request.getParameter("autoDesign"));
26DbControl dc = null;
27try
28{
29  dc = sc.newDbControl();
30  final User user = User.getById(dc, sc.getLoggedInUserId());
31%>
32<base:page type="default">
33<base:head 
34  scripts="~../reggie-2.js,~select_rna.js,~plate.js,~pools.js,js-draw.js" 
35  styles="path.css,toolbar.css,~../css/reggie-2.css,~../css/plate.css"
36  >
37<style>
38
39.auto-design .hide-auto-design
40{
41  display: none;
42}
43
44/* Empty wells should have greyed, italic text */
45.well.empty
46{
47  text-align: center;
48  vertical-align: middle;
49  font-style: italic;
50  color: #999999;
51}
52
53/* A well assigned for QC include a background icon as indicator */
54.well.qc
55{
56  background-image: url('../images/mrnaqc.png');
57  background-position: 98% 98%;
58  background-repeat: no-repeat;
59}
60
61/* A well which contain replicate RNA is also marked with an icon */
62.well.replicate
63{
64  background-image: url('../images/copy.png');
65  background-position: 98% 98%;
66  background-repeat: no-repeat;
67}
68
69/* A well that is both a replicate and QC need to re-arrange the icons a bit */
70.well.qc.replicate
71{
72  background-image: url('../images/mrnaqc.png'), url('../images/copy.png');
73  background-position: 98% 50%, 98% 98%;
74  background-repeat: no-repeat;
75}
76
77.yellow-specimen .if-yellow
78{
79  background-image: url('../images/yellow-label-small.png');
80  background-position: 1px 50%;
81  background-repeat: no-repeat;
82  /* Grow background without shifting text position veritcally, move to right to make room for icon*/
83  padding: 2px 2px 2px 14px;
84  margin: -2px;
85}
86
87.well .missing
88{
89  font-style: italic;
90}
91
92.plate.hide-location .location
93{
94  display: none;
95}
96.plate.hide-quantity .quantity
97{
98  display: none;
99}
100.plate.hide-volumes .volumes
101{
102  display: none;
103}
104.plate.hide-conc .conc
105{
106  display: none;
107}
108.plate.hide-quality-score .quality-score
109{
110  display: none;
111}
112.plate.hide-qiacube-date .qiacube-date
113{
114  display: none;
115}
116.plate.hide-qiacube-date .dilution-date
117{
118  display: none;
119}
120.volume
121{
122  color: #C80000;
123}
124.water
125{
126  color: #0000C8;
127}
128.comment
129{
130  font-style: italic;
131}
132#iconSpecialSelect
133{
134  cursor: pointer;
135}
136#flaggedRna:before
137{
138  content: url('../images/flag.png');
139  padding-right: 4px;
140}
141#select-barcode-all
142{
143  max-height: 20em;
144  overflow: auto;
145}
146
147#select-barcode .menuitem
148{
149  padding-left: 16px;
150}
151
152#select-barcode div.current
153{
154  font-weight: bold;
155  background-image: url('../images/selected.gif');
156  background-position: 2px 50%;
157  background-repeat: no-repeat;
158}
159
160#select-barcode .menuitem:hover
161{
162  padding-left: 14px;
163  background-position: 0px 50%;
164}
165
166</style>
167</base:head>
168<base:body>
169  <p:path><p:pathelement 
170    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
171    /><p:pathelement title="<%="Create new <span>library</span> plate" + (autoDesign ? " (auto-design)" : "") %>" 
172    /></p:path>
173
174  <div id="page-data" class="datacontainer"
175    data-plate-type="<%=plateType%>"
176    data-auto-design="<%=autoDesign ? 1 : 0%>"
177  ></div>
178
179  <div id="canvas" class="absolutefull" style="z-index: -1;">
180 
181  <div class="content">
182  <m:menu
183    id="menuSpecialSelect"
184    style="display: none; font-weight: normal; text-align: left;">
185    <m:menuitem 
186      title="All" 
187      subclass="auto-init"
188      data-auto-init="special-select"
189      data-special="all"
190      tooltip="Select/deselect all wells on the plate"
191    />
192    <m:menuitem 
193      title="None" 
194      subclass="auto-init"
195      data-auto-init="special-select"
196      data-special="none"
197      tooltip="Deselect all wells on the plate (no toggle!)"
198    />
199    <m:menuitem 
200      title="Primary" 
201      subclass="auto-init"
202      data-auto-init="special-select"
203      data-special="pools"
204      tooltip="Select/deselect all primary wells on the plate"
205    />
206    <m:menuitem 
207      title="All empty" 
208      subclass="auto-init"
209      data-auto-init="special-select"
210      data-special="empty"
211      tooltip="Select/deselect all empty wells on the plate"
212    />
213    <m:menuitem 
214      title="Empty in primary" 
215      subclass="auto-init"
216      data-auto-init="special-select"
217      data-special="empty-pools"
218      tooltip="Select/deselect all empty primary wells on the plate"
219    />
220    <m:menuseparator />
221    <m:menuitem 
222      icon="<%=home+"/images/stratagene.png"%>"
223      title="Stratagene" 
224      subclass="auto-init"
225      data-auto-init="special-select"
226      data-special="stratagene"
227      tooltip="Select/deselect all wells with Stratagene"
228    />
229    <m:menuitem 
230      icon="<%=home+"/images/external.png"%>"
231      title="External" 
232      subclass="auto-init"
233      data-auto-init="special-select"
234      data-special="external"
235      tooltip="Select/deselect all wells with external RNA"
236    />
237    <m:menuitem 
238      icon="<%=home+"/images/copy.png"%>"
239      title="Replicates" 
240      subclass="auto-init"
241      data-auto-init="special-select"
242      data-special="replicates"
243      tooltip="Select/deselect all wells with replicated RNA"
244    />
245    <m:menuitem 
246      icon="<%=home+"/images/error.png"%>"
247      title="Error" 
248      subclass="auto-init"
249      data-auto-init="special-select"
250      data-special="error"
251      tooltip="Select/deselect all wells with an error"
252    />
253    <m:menuitem 
254      icon="<%=home+"/images/warning.png"%>"
255      title="Warning" 
256      subclass="auto-init"
257      data-auto-init="special-select"
258      data-special="warning"
259      tooltip="Select/deselect all wells with an error"
260    />
261  </m:menu>
262 
263  <m:menu
264    id="menuContext"
265    style="display: none; font-weight: normal; text-align: left;">
266    <m:menuitem 
267      id="mnuComment"
268      title="Comments&hellip;" 
269      icon="<%=home+"/images/comment.png"%>" 
270      tooltip="Add a comment to the selected wells"
271    />
272    <%
273    if (!autoDesign)
274    {
275      %>
276      <m:menuitem 
277        id="mnuToggleQc"
278        title="Toggle QC" 
279        icon="<%=home+"/images/mrnaqc.png"%>" 
280        tooltip="Select/deselect RNA for QC" 
281      />
282      <m:menuseparator />
283      <m:menuitem 
284        id="mnuCutSelected"
285        title="Cut&hellip;" 
286        icon="<%=home+"/images/cut.png"%>" 
287        tooltip="Clear the selected wells" 
288      />
289      <m:menuitem 
290        id="mnuCopySelected"
291        title="Copy" 
292        icon="<%=home+"/images/copy.png"%>" 
293        tooltip="Make a copy of the selected RNA" 
294      />
295      <m:menuitem 
296        id="mnuPasteToSelected"
297        title="Paste" 
298        icon="<%=home+"/images/paste.png"%>" 
299        tooltip="Paste RNA into selected wells" 
300      />
301      <m:menuitem 
302        id="mnuSwitch"
303        title="Switch" 
304        icon="<%=home+"/images/switch.png"%>" 
305        tooltip="Switch the selected wells (if exactly two)" 
306      />
307      <m:menuseparator />
308      <m:submenu
309        subid="flagMenu"
310        title="Flag"
311        icon="<%=home+"/images/flag.png"%>"
312      />
313      <m:menuseparator id="sepCaseSummary" />
314      <%
315    }
316    %>
317    <m:menuitem
318      id="mnuCaseSummary"
319      icon="<%=home+"/images/case_summary.png"%>"
320      tooltip="Show case summary"
321      title="Case summary&hellip;"
322    />
323  </m:menu>
324
325  <m:menu
326    id="flagMenu"
327    style="display: none;"
328    >
329    <m:menuitem 
330      id="mnuFlagLowQualityScore"
331      data-flag="LowQualityScore"
332      title="LowQualityScore" 
333      tooltip="Flag the selected RNA as having a too low RQS/RIN value"
334    />
335    <m:menuitem 
336      id="mnuFlagNotEnoughRemainingQuantity"
337      data-flag="NotEnoughRemainingQuantity"
338      title="NotEnoughRemainingQuantity" 
339      tooltip="Flag the selected RNA as having too little remaining quantity"
340    />
341    <m:menuseparator />
342    <m:menuitem 
343      id="mnuFlagOther"
344      data-flag="ManualFlag"
345      title="Other..." 
346      tooltip="Flag the selected RNA for some other reason"
347    />
348  </m:menu>
349 
350  <div id="select-barcode" class="menu vertical bg-filled-100" style="width: 15em; z-index: 2; display: none;">
351    <div class="menuitem interactable enabled" id="select-barcode-default">Default</div>
352    <div class="menuseparator" id="select-barcode-default-separator"></div>
353    <div id="select-barcode-all"></div>
354  </div>
355
356  <form name="reggie" id="wizard" class="wizard <%=autoDesign ? "auto-design" : ""%>">
357 
358  <div class="step auto-hide" id="step-1">
359    <div class="step-no">1</div>
360    <div class="step-title">Design new library plate</div>
361    <div class="step-content">
362
363      <table class="step-form bottomborder">
364      <tr>
365        <td class="prompt">Name</td>
366        <td class="input" id="plateName"></td>
367        <td class="status"></td>
368        <td class="help">Select RNA items to use for the new plate.</td>
369      </tr>
370      <tr>
371        <td class="prompt">Preliminary pool layout</td>
372        <td class="input">
373          <select name="pool_schema" id="pool_schema" class="required"></select>
374        </td>
375        <td class="status"></td>
376        <td class="help">Preliminary pool layout (can be changed later).</td>
377      </tr>
378      <tr class="hide-auto-design">
379        <td class="prompt">Stratagene to use</td>
380        <td class="input">
381          <select name="stratagene" class="required"></select>
382        </td>
383        <td class="status"></td>
384        <td class="help">
385          Select the Stratagene tube to use. If not known, the
386          generic <b>Stratagene.r</b> should be used.
387        </td>
388      </tr>
389      <tr>
390        <td class="prompt">Dilution protocol</td>
391        <td class="input">
392          <select name="normalizationProtocol" id="normalizationProtocol" class="required"></select>
393        </td>
394        <td class="status" id="normalizationProtocol.status"></td>
395        <td class="help">
396          <span id="normalizationProtocol.message" class="message"></span>
397          Select the protocol that specifies the amount and volume of RNA
398          that is needed for the library preparation.
399        </td>
400      </tr>
401      <tr class="align-top">
402        <td class="prompt">Comments</td>
403        <td class="input">
404          <textarea rows="2" name="comments" id="comments"></textarea>
405        </td>
406        <td class="status"></td>
407        <td class="help">Comments about the new plate.</td>
408      </tr>
409      <tr class="align-top">
410        <td class="prompt">Show</td>
411        <td class="input" colspan="2">
412          <table>
413          <tr>
414            <td>
415              <input type="checkbox" name="location" id="location" checked><label for="location">Bioplate location</label><br>
416              <input type="checkbox" name="quantity" id="quantity" checked><label for="quantity">Remaining quantity</label><br>
417            </td>
418            <td>
419              <input type="checkbox" name="quality-score" id="quality-score"><label for="quality-score">RQS/RIN</label><br>
420              <input type="checkbox" name="conc" id="conc"><label for="conc" title="NanoDrop or Qubit concentration">Conc.</label><br>
421            </td>
422            <td>
423              <input type="checkbox" name="volumes" id="volumes"><label for="volumes">Used volume+water</label><br>
424              <input type="checkbox" name="qiacube-date" id="qiacube-date"><label for="qiacube-date">Qiacube/Dilution date</label><br>
425            </td>
426          </tr>
427          </table>
428        </td>
429        <td class="help">Toggles visiblity of the selected information inside each well on the plate.</td>
430      </tr>
431      <tr class="hide-auto-design">
432        <td class="prompt">Warning levels</td>
433        <td class="input">
434          Remaining quantity&lt;<input type="text" class="text" name="warning_quantity" id="warning_quantity"
435            value="1.0" style="width: 4em;">µg,
436          RQS/RIN&lt;<input type="text" class="text" name="warning_quality_score" id="warning_quality_score" 
437            value="8" style="width: 4em;">
438        </td>
439        <td class="status" id="warnings.status"></td>
440        <td class="help">
441          <span id="warnings.message" class="message" style="display: none;"></span>
442          Warning levels for remaining quantity and RQS/RIN values.
443        </td>
444      </tr>
445      </table>
446
447      <tbl:toolbar subclass="bottomborder bg-filled-50 hide-auto-design">
448        <tbl:button 
449          id="btnAutoSelect"
450          title="Auto-select&hellip;" 
451          image="<%=home+"/images/wizard.png"%>" 
452          tooltip="Let the wizard auto-select RNA"
453        />
454        <tbl:button 
455          id="btnManualSelect"
456          title="Manual select&hellip;" 
457          image="<%=home+"/images/manual_rna.png"%>" 
458          tooltip="Manually select RNA items" 
459        />
460        <tbl:button 
461          id="btnStratagene"
462          title="Stratagene" 
463          image="<%=home+"/images/stratagene.png"%>" 
464          tooltip="Place stratagene in the selected wells" 
465        />
466        <tbl:button 
467          id="btnExternal"
468          title="External" 
469          image="<%=home+"/images/external.png"%>" 
470          tooltip="Mark selected wells as used by external RNA" 
471        />
472        <tbl:button 
473          id="btnToggleQc"
474          title="Toggle QC" 
475          image="<%=home+"/images/mrnaqc.png"%>" 
476          tooltip="Select/deselect RNA for QC" 
477        />
478        <tbl:button 
479          id="btnComment"
480          title="Comments&hellip;" 
481          image="<%=home+"/images/comment.png"%>" 
482          tooltip="Add a comment to the selected wells" 
483        />
484        <tbl:button 
485          id="btnCutSelected"
486          title="Cut&hellip;" 
487          image="<%=home+"/images/cut.png"%>" 
488          tooltip="Clear the selected wells" 
489        />
490        <tbl:button 
491          id="btnCopySelected"
492          title="Copy" 
493          image="<%=home+"/images/copy.png"%>" 
494          tooltip="Make a copy of the selected RNA" 
495        />
496        <tbl:button 
497          id="btnPasteToSelected"
498          title="Paste" 
499          image="<%=home+"/images/paste.png"%>" 
500          tooltip="Paste RNA into selected wells" 
501        />
502        <tbl:button 
503          id="btnSwitch"
504          title="Switch" 
505          image="<%=home+"/images/switch.png"%>" 
506          tooltip="Switch the selected wells (if exactly two)" 
507        />
508      </tbl:toolbar>
509        <div id="flaggedRna" style="margin: 0.5em; display: none; text-align: center;" class="link">
510          Flagged RNA items.
511        </div>
512
513        <table id="plate" class="plate hide-volumes hide-conc hide-quality-score hide-qiacube-date" 
514          style="margin: 1em auto 0 auto;">
515        <%
516        int columns = 12;
517        int rows = 8;
518        WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
519        WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
520        %>
521        <tr class="header">
522          <th>
523            <base:icon image="<%=home+"/images/select_all.png"%>" 
524              id="iconSpecialSelect"
525              tooltip="Select/deselect wells on the plate with specific condition" 
526            ></base:icon>
527          </th>
528          <%
529          for (int c = 0; c < columns; ++c)
530          {
531            %>
532            <th class="link auto-init" id="col.<%=c%>"
533              data-auto-init="plate-col" data-col="<%=c%>"
534              title="Select/deselect all wells in this column"><%=colF.format(c)%></th>
535            <%
536          }
537          %>
538        </tr>
539        <tbody>
540        <%
541        for (int r = 0; r < rows; ++r)
542        {
543          String row = rowF.format(r);
544          %>
545          <tr class="row-<%=r%>">
546            <th class="link auto-init" id="row.<%=r%>"
547              data-auto-init="plate-row" data-row="<%=r%>"
548              title="Select/deselect all wells in this row"><%=row%></th>
549            <%
550            for (int c = 0; c < columns; ++c)
551            {
552              %>
553              <td id="well.<%=r%>.<%=c%>" class="well empty primary auto-init"
554                data-auto-init="plate-well" data-col="<%=c%>" data-row="<%=r%>"
555                title="Select/deselect this well">empty</td>
556              <%
557            }
558            %>
559          </tr>
560          <%
561        }
562        %>
563        </tbody>
564        <tr id="pool-row">
565          <th colspan="<%=columns+1%>">&nbsp;</th>
566        </tr>
567        </table>
568        <div style="margin: 0.5em; text-align: center;">
569          <base:icon image="<%=home+"/images/mrnaqc.png"%>" />=Selected for QC
570          <base:icon image="<%=home+"/images/copy.png"%>" style="padding-left: 1em;" />=Replicated RNA
571          <base:icon image="<%=home+"/images/error.png"%>" style="padding-left: 1em;" />=Error that prevent plate creation
572          <base:icon image="<%=home+"/images/warning.png"%>" style="padding-left: 1em;" />=Warning but plate can be created
573        </div>
574    </div>
575  </div>
576
577
578  <div id="wizard-status"></div>
579 
580  <table class="navigation" id="navigation">
581  <tr>
582    <td><base:button id="gocancel" title="Cancel" /></td>
583    <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" /></td>
584    <td><base:button id="goregister" title="Register" image="<%=home+"/images/import.png"%>"  /></td>
585    <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" /></td>
586    <td id="gonext-message" class="message"></td>
587  </tr>
588  </table>
589
590  </form>
591  </div>
592  </div>
593</base:body>
594</base:page>
595<%
596}
597finally
598{
599  if (dc != null) dc.close();
600}
601%>
Note: See TracBrowser for help on using the repository browser.