source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/select_rna.jsp @ 5882

Last change on this file since 5882 was 5882, checked in by Nicklas Nordborg, 2 years ago

References #1232: Add support for external sequencing

Removed NeoPrep support from the library plate design wizard.

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-ndconc .ndconc
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="ndconc" id="ndconc"><label for="ndconc">NDConc</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-ndconc 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.