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

<%@ page
  pageEncoding="UTF-8"
  session="false"
  import="net.sf.basedb.core.Application"
  import="net.sf.basedb.core.User"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.util.HTML"
  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
  import="net.sf.basedb.util.Values"
  import="net.sf.basedb.util.formatter.WellCoordinateFormatter"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="m" uri="/WEB-INF/menu.tld" %>
<%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(request, "net.sf.basedb.reggie", true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
final String plateType = Values.getString(request.getParameter("plateType"), "MRNA");

final boolean autoDesign = Values.getBoolean(request.getParameter("autoDesign"));
DbControl dc = null;
try
{
  dc = sc.newDbControl();
  final User user = User.getById(dc, sc.getLoggedInUserId());
%>
<base:page type="default">
<base:head 
  scripts="~../reggie-2.js,~select_rna.js,~plate.js,~pools.js,js-draw.js" 
  styles="path.css,toolbar.css,~../css/reggie-2.css,~../css/plate.css"
  >
<style>

.auto-design .hide-auto-design
{
  display: none;
}

/* Empty wells should have greyed, italic text */
.well.empty
{
  text-align: center;
  vertical-align: middle;
  font-style: italic;
  color: #999999;
}

/* A well assigned for QC include a background icon as indicator */
.well.qc
{
  background-image: url('../images/mrnaqc.png');
  background-position: 98% 98%;
  background-repeat: no-repeat;
}

/* A well which contain replicate RNA is also marked with an icon */
.well.replicate
{
  background-image: url('../images/copy.png');
  background-position: 98% 98%;
  background-repeat: no-repeat;
}

/* A well that is both a replicate and QC need to re-arrange the icons a bit */
.well.qc.replicate
{
  background-image: url('../images/mrnaqc.png'), url('../images/copy.png');
  background-position: 98% 50%, 98% 98%;
  background-repeat: no-repeat;
}

.yellow-specimen .if-yellow
{
  background-image: url('../images/yellow-label-small.png');
  background-position: 1px 50%;
  background-repeat: no-repeat;
  /* Grow background without shifting text position veritcally, move to right to make room for icon*/
  padding: 2px 2px 2px 14px;
  margin: -2px;
}

.well .missing
{
  font-style: italic;
}

.plate.hide-location .location
{
  display: none;
}
.plate.hide-quantity .quantity
{
  display: none;
}
.plate.hide-volumes .volumes
{
  display: none;
}
.plate.hide-ndconc .ndconc
{
  display: none;
}
.plate.hide-quality-score .quality-score
{
  display: none;
}
.plate.hide-qiacube-date .qiacube-date
{
  display: none;
}
.plate.hide-qiacube-date .dilution-date
{
  display: none;
}
.volume
{
  color: #C80000;
}
.water
{
  color: #0000C8;
}
.comment
{
  font-style: italic;
}
#iconSpecialSelect
{
  cursor: pointer;
}
#flaggedRna:before
{
  content: url('../images/flag.png');
  padding-right: 4px;
}
#select-barcode-all
{
  max-height: 20em;
  overflow: auto;
}

#select-barcode .menuitem
{
  padding-left: 16px;
}

#select-barcode div.current
{
  font-weight: bold;
  background-image: url('../images/selected.gif');
  background-position: 2px 50%;
  background-repeat: no-repeat;
}

#select-barcode .menuitem:hover
{
  padding-left: 14px;
  background-position: 0px 50%;
}

</style>
</base:head>
<base:body>
  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="<%="Create new <span>library</span> plate" + (autoDesign ? " (auto-design)" : "") %>" 
    /></p:path>

  <div id="page-data" class="datacontainer"
    data-plate-type="<%=plateType%>"
    data-auto-design="<%=autoDesign ? 1 : 0%>"
  ></div>

  <div id="canvas" class="absolutefull" style="z-index: -1;">
  
  <div class="content">
  <m:menu
    id="menuSpecialSelect"
    style="display: none; font-weight: normal; text-align: left;">
    <m:menuitem 
      title="All" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="all"
      tooltip="Select/deselect all wells on the plate"
    />
    <m:menuitem 
      title="None" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="none"
      tooltip="Deselect all wells on the plate (no toggle!)"
    />
    <m:menuitem 
      title="Primary" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="pools"
      tooltip="Select/deselect all primary wells on the plate"
    />
    <m:menuitem 
      title="All empty" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="empty"
      tooltip="Select/deselect all empty wells on the plate"
    />
    <m:menuitem 
      title="Empty in primary" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="empty-pools"
      tooltip="Select/deselect all empty primary wells on the plate"
    />
    <m:menuseparator />
    <m:menuitem 
      icon="<%=home+"/images/stratagene.png"%>"
      title="Stratagene" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="stratagene"
      tooltip="Select/deselect all wells with Stratagene"
    />
    <m:menuitem 
      icon="<%=home+"/images/external.png"%>"
      title="External" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="external"
      tooltip="Select/deselect all wells with external RNA"
    />
    <m:menuitem 
      icon="<%=home+"/images/copy.png"%>"
      title="Replicates" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="replicates"
      tooltip="Select/deselect all wells with replicated RNA"
    />
    <m:menuitem 
      icon="<%=home+"/images/error.png"%>"
      title="Error" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="error"
      tooltip="Select/deselect all wells with an error"
    />
    <m:menuitem 
      icon="<%=home+"/images/warning.png"%>"
      title="Warning" 
      subclass="auto-init"
      data-auto-init="special-select"
      data-special="warning"
      tooltip="Select/deselect all wells with an error"
    />
  </m:menu>
  
  <m:menu
    id="menuContext"
    style="display: none; font-weight: normal; text-align: left;">
    <m:menuitem 
      id="mnuComment"
      title="Comments&hellip;" 
      icon="<%=home+"/images/comment.png"%>" 
      tooltip="Add a comment to the selected wells"
    />
    <%
    if (!autoDesign)
    {
      %>
      <m:menuitem 
        id="mnuToggleQc"
        title="Toggle QC" 
        icon="<%=home+"/images/mrnaqc.png"%>" 
        tooltip="Select/deselect RNA for QC" 
      />
      <m:menuseparator />
      <m:menuitem 
        id="mnuCutSelected"
        title="Cut&hellip;" 
        icon="<%=home+"/images/cut.png"%>" 
        tooltip="Clear the selected wells" 
      />
      <m:menuitem  
        id="mnuCopySelected"
        title="Copy" 
        icon="<%=home+"/images/copy.png"%>" 
        tooltip="Make a copy of the selected RNA" 
      />
      <m:menuitem  
        id="mnuPasteToSelected"
        title="Paste" 
        icon="<%=home+"/images/paste.png"%>" 
        tooltip="Paste RNA into selected wells" 
      />
      <m:menuitem  
        id="mnuSwitch"
        title="Switch" 
        icon="<%=home+"/images/switch.png"%>" 
        tooltip="Switch the selected wells (if exactly two)" 
      />
      <m:menuseparator />
      <m:submenu
        subid="flagMenu"
        title="Flag"
        icon="<%=home+"/images/flag.png"%>"
      />
      <m:menuseparator id="sepCaseSummary" />
      <%
    }
    %>
    <m:menuitem
      id="mnuCaseSummary"
      icon="<%=home+"/images/case_summary.png"%>"
      tooltip="Show case summary"
      title="Case summary&hellip;"
    />
  </m:menu>

  <m:menu
    id="flagMenu"
    style="display: none;"
    >
    <m:menuitem 
      id="mnuFlagLowQualityScore"
      data-flag="LowQualityScore"
      title="LowQualityScore" 
      tooltip="Flag the selected RNA as having a too low RQS/RIN value"
    />
    <m:menuitem 
      id="mnuFlagNotEnoughRemainingQuantity"
      data-flag="NotEnoughRemainingQuantity"
      title="NotEnoughRemainingQuantity" 
      tooltip="Flag the selected RNA as having too little remaining quantity"
    />
    <m:menuseparator />
    <m:menuitem 
      id="mnuFlagOther"
      data-flag="ManualFlag"
      title="Other..." 
      tooltip="Flag the selected RNA for some other reason"
    />
  </m:menu>
  
  <div id="select-barcode" class="menu vertical bg-filled-100" style="width: 15em; z-index: 2; display: none;">
    <div class="menuitem interactable enabled" id="select-barcode-default">Default</div>
    <div class="menuseparator" id="select-barcode-default-separator"></div>
    <div id="select-barcode-all"></div>
  </div>

  <form name="reggie" id="wizard" class="wizard <%=autoDesign ? "auto-design" : ""%>">
  
  <div class="step auto-hide" id="step-1">
    <div class="step-no">1</div>
    <div class="step-title">Design new library plate</div>
    <div class="step-content">

      <table class="step-form bottomborder">
      <tr>
        <td class="prompt">Name</td>
        <td class="input" id="plateName"></td>
        <td class="status"></td>
        <td class="help">Select RNA items to use for the new plate.</td>
      </tr>
      <tr>
        <td class="prompt">Preliminary pool layout</td>
        <td class="input">
          <select name="pool_schema" id="pool_schema" class="required"></select>
        </td>
        <td class="status"></td>
        <td class="help">Preliminary pool layout (can be changed later).</td>
      </tr>
      <tr class="hide-auto-design">
        <td class="prompt">Stratagene to use</td>
        <td class="input">
          <select name="stratagene" class="required"></select>
        </td>
        <td class="status"></td>
        <td class="help">
          Select the Stratagene tube to use. If not known, the
          generic <b>Stratagene.r</b> should be used.
        </td>
      </tr>
      <tr>
        <td class="prompt">Dilution protocol</td>
        <td class="input">
          <select name="normalizationProtocol" id="normalizationProtocol" class="required"></select>
        </td>
        <td class="status" id="normalizationProtocol.status"></td>
        <td class="help">
          <span id="normalizationProtocol.message" class="message"></span>
          Select the protocol that specifies the amount and volume of RNA
          that is needed for the library preparation.
        </td>
      </tr>
      <tr class="align-top">
        <td class="prompt">Comments</td>
        <td class="input">
          <textarea rows="2" name="comments" id="comments"></textarea>
        </td>
        <td class="status"></td>
        <td class="help">Comments about the new plate.</td>
      </tr>
      <tr class="align-top">
        <td class="prompt">Show</td>
        <td class="input" colspan="2">
          <table>
          <tr>
            <td>
              <input type="checkbox" name="location" id="location" checked><label for="location">Bioplate location</label><br>
              <input type="checkbox" name="quantity" id="quantity" checked><label for="quantity">Remaining quantity</label><br>
            </td>
            <td>
              <input type="checkbox" name="quality-score" id="quality-score"><label for="quality-score">RQS/RIN</label><br>
              <input type="checkbox" name="ndconc" id="ndconc"><label for="ndconc">NDConc</label><br>
            </td>
            <td>
              <input type="checkbox" name="volumes" id="volumes"><label for="volumes">Used volume+water</label><br>
              <input type="checkbox" name="qiacube-date" id="qiacube-date"><label for="qiacube-date">Qiacube/Dilution date</label><br>
            </td>
          </tr>
          </table>
        </td>
        <td class="help">Toggles visiblity of the selected information inside each well on the plate.</td>
      </tr>
      <tr class="hide-auto-design">
        <td class="prompt">Warning levels</td>
        <td class="input">
          Remaining quantity&lt;<input type="text" class="text" name="warning_quantity" id="warning_quantity"
            value="1.0" style="width: 4em;">µg,
          RQS/RIN&lt;<input type="text" class="text" name="warning_quality_score" id="warning_quality_score" 
            value="8" style="width: 4em;">
        </td>
        <td class="status" id="warnings.status"></td>
        <td class="help">
          <span id="warnings.message" class="message" style="display: none;"></span>
          Warning levels for remaining quantity and RQS/RIN values.
        </td>
      </tr>
      </table>

      <tbl:toolbar subclass="bottomborder bg-filled-50 hide-auto-design">
        <tbl:button 
          id="btnAutoSelect"
          title="Auto-select&hellip;" 
          image="<%=home+"/images/wizard.png"%>" 
          tooltip="Let the wizard auto-select RNA"
        />
        <tbl:button 
          id="btnManualSelect"
          title="Manual select&hellip;" 
          image="<%=home+"/images/manual_rna.png"%>" 
          tooltip="Manually select RNA items" 
        />
        <tbl:button 
          id="btnStratagene"
          title="Stratagene" 
          image="<%=home+"/images/stratagene.png"%>" 
          tooltip="Place stratagene in the selected wells" 
        />
        <tbl:button 
          id="btnExternal"
          title="External" 
          image="<%=home+"/images/external.png"%>" 
          tooltip="Mark selected wells as used by external RNA" 
        />
        <tbl:button 
          id="btnToggleQc"
          title="Toggle QC" 
          image="<%=home+"/images/mrnaqc.png"%>" 
          tooltip="Select/deselect RNA for QC" 
        />
        <tbl:button 
          id="btnComment"
          title="Comments&hellip;" 
          image="<%=home+"/images/comment.png"%>" 
          tooltip="Add a comment to the selected wells" 
        />
        <tbl:button 
          id="btnCutSelected"
          title="Cut&hellip;" 
          image="<%=home+"/images/cut.png"%>" 
          tooltip="Clear the selected wells" 
        />
        <tbl:button 
          id="btnCopySelected"
          title="Copy" 
          image="<%=home+"/images/copy.png"%>" 
          tooltip="Make a copy of the selected RNA" 
        />
        <tbl:button 
          id="btnPasteToSelected"
          title="Paste" 
          image="<%=home+"/images/paste.png"%>" 
          tooltip="Paste RNA into selected wells" 
        />
        <tbl:button 
          id="btnSwitch"
          title="Switch" 
          image="<%=home+"/images/switch.png"%>" 
          tooltip="Switch the selected wells (if exactly two)" 
        />
      </tbl:toolbar>
        <div id="flaggedRna" style="margin: 0.5em; display: none; text-align: center;" class="link">
          Flagged RNA items.
        </div>

        <table id="plate" class="plate hide-volumes hide-ndconc hide-quality-score hide-qiacube-date" 
          style="margin: 1em auto 0 auto;">
        <%
        int columns = 12;
        int rows = 8;
        WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
        WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
        %>
        <tr class="header">
          <th>
            <base:icon image="<%=home+"/images/select_all.png"%>" 
              id="iconSpecialSelect"
              tooltip="Select/deselect wells on the plate with specific condition" 
            ></base:icon>
          </th>
          <%
          for (int c = 0; c < columns; ++c)
          {
            %>
            <th class="link auto-init" id="col.<%=c%>"
              data-auto-init="plate-col" data-col="<%=c%>"
              title="Select/deselect all wells in this column"><%=colF.format(c)%></th>
            <%
          }
          %>
        </tr>
        <tbody>
        <%
        for (int r = 0; r < rows; ++r)
        {
          String row = rowF.format(r);
          %>
          <tr class="row-<%=r%>">
            <th class="link auto-init" id="row.<%=r%>"
              data-auto-init="plate-row" data-row="<%=r%>"
              title="Select/deselect all wells in this row"><%=row%></th>
            <%
            for (int c = 0; c < columns; ++c)
            {
              %>
              <td id="well.<%=r%>.<%=c%>" class="well empty primary auto-init"
                data-auto-init="plate-well" data-col="<%=c%>" data-row="<%=r%>"
                title="Select/deselect this well">empty</td>
              <%
            }
            %>
          </tr>
          <%
        }
        %>
        </tbody>
        <tr id="pool-row">
          <th colspan="<%=columns+1%>">&nbsp;</th>
        </tr>
        </table>
        <div style="margin: 0.5em; text-align: center;">
          <base:icon image="<%=home+"/images/mrnaqc.png"%>" />=Selected for QC
          <base:icon image="<%=home+"/images/copy.png"%>" style="padding-left: 1em;" />=Replicated RNA
          <base:icon image="<%=home+"/images/error.png"%>" style="padding-left: 1em;" />=Error that prevent plate creation
          <base:icon image="<%=home+"/images/warning.png"%>" style="padding-left: 1em;" />=Warning but plate can be created
        </div>
    </div>
  </div>


  <div id="wizard-status"></div>
  
  <table class="navigation" id="navigation">
  <tr>
    <td><base:button id="gocancel" title="Cancel" /></td>
    <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" /></td>
    <td><base:button id="goregister" title="Register" image="<%=home+"/images/import.png"%>"  /></td>
    <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" /></td>
    <td id="gonext-message" class="message"></td>
  </tr>
  </table>

  </form>
  </div>
  </div>
</base:body>
</base:page>
<%
}
finally
{
  if (dc != null) dc.close();
}
%>