source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/create_pools.jsp @ 2151

<%@ page
  pageEncoding="UTF-8"
  session="false"
  import="net.sf.basedb.core.User"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.Application"
  import="net.sf.basedb.util.formatter.WellCoordinateFormatter"
  import="net.sf.basedb.clients.web.Base" 
  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(request, true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
DbControl dc = null;
try
{
  dc = sc.newDbControl();
  final User user = User.getById(dc, sc.getLoggedInUserId());
%>
<base:page type="default" >
<base:head scripts="ajax.js" styles="path.css,toolbar.css">
  <link rel="stylesheet" type="text/css" href="../css/reggie.css">
  <link rel="stylesheet" type="text/css" href="../css/plate.css">
  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>
  <script language="JavaScript" src="pools.js" type="text/javascript" charset="UTF-8"></script>
  <script language="JavaScript" src="plate.js" type="text/javascript" charset="UTF-8"></script>

<script language="JavaScript">
var debug = 0;
var currentStep = 1;

var targetVolumePerLibIsValid = false;
var POOL_DATA = [];

// Loaded from servlet when getting Library information
var TARGET_MOLARITY_IN_POOL;
var LIMIT_FOR_AUTO_EXCLUDE = 0.25;
var LIMIT_FOR_EXTRA_LARGE_MIX;
var EXTRA_LARGE_MIX_FACTOR;

function init()
{
  var frm = document.forms['reggie'];
  var bioplates = getLibraryBioPlates();
  
  var plates = frm.bioplate;
  if (bioplates != null && bioplates.length > 0)
  {
    for (var i=0; i < bioplates.length; i++)
    {
      var bioplate = bioplates[i];
      var option = new Option(bioplate.name, bioplate.id);
      option.bioplate = bioplate;
      plates.options[plates.length] = option;
    }
    bioplateIsValid = true;
    setInputStatus('bioplate', '', 'valid');
  }
  else
  {
    var msg = 'No Library bioplates available for processing.';
    setFatalError(msg);
    return;
  }
}


function getLibraryBioPlates()
{
  var frm = document.forms['reggie']; 
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading Library bioplates...');
    var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetLibraryPlatesForPooling';
    request.open("GET", url, false);  
    request.send(null);
  }
  finally
  {
    hideLoadingAnimation();
  }
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);  
  if (response.status != 'ok')
  {
    setFatalError(response.message);
    return false;
  }
  return response.bioplates;
}

function createManualPool()
{
  location.replace('create_manual_pool.jsp?ID=<%=ID%>');
}

function goNext(manual)
{
  setInnerHTML('gonext.message', '');
  if (currentStep == 1)
  {   
    gotoStep2();
  }
  setCurrentStep(currentStep);
}

function gotoStep2()
{
  var frm = document.forms['reggie'];
  frm.bioplate.disabled = true;
  Main.addClass(document.getElementById('step.1.section'), 'disabled');
  
  loadPoolNames();
  loadLibraryInformation();

  currentStep = 2;
  Main.hide('step.1.section');
  Main.show('step.2.section');
  Main.hide('gonext');
  Main.show('gocancel');
  Main.show('gocreate');
}

function goCreate()
{
  if (!targetVolumePerLibIsValid) return;
  
  var submitInfo = {};
  submitInfo.pools = [];
  submitInfo.flagged = [];
  var frm = document.forms['reggie'];
  var libPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;
  submitInfo.targetVolumeInPoolPerLib = parseFloat(frm.target_volume.value);
  submitInfo.targetPoolMolarity = TARGET_MOLARITY_IN_POOL;
  submitInfo.mixingStrategy = Forms.getCheckedRadio(frm.mixing_strategy).value;

  var numPools = Plate.getPools();
  for (var poolNo = 0; poolNo < numPools; poolNo++)
  {
    var wells = Plate.getPool(poolNo);
    
    var poolInfo = {};
    poolInfo.name = POOL_NAMES[poolNo];
    poolInfo.comment = frm['comment.'+poolNo].value;
    poolInfo.ebVolumeExtra = POOL_DATA[poolNo].ebVolumeExtra;
    poolInfo.libPlate = libPlate.id;
    poolInfo.libs = [];
    poolInfo.excluded = [];
    
    for (var wellNo = 0; wellNo < wells.length; wellNo++)
    {
      var lib = wells[wellNo].extract;
      if (lib)
      {
        // We send library id, name and mixin volumes
        var tmp = {};
        tmp.id = lib.id;
        tmp.name = lib.name;
        tmp.volume = lib.actualVolume; 
        tmp.eb = lib.actualEb;
        tmp.mixFactor = lib.mixFactor;
        tmp.comment = lib.comment;
        
        if (lib.excludeFromPool)
        {
          poolInfo.excluded[poolInfo.excluded.length] = tmp;
        }
        else
        {
          poolInfo.libs[poolInfo.libs.length] = tmp;
        }
        
        if (lib.flag)
        {
          tmp.flag = lib.flag;
          submitInfo.flagged[submitInfo.flagged.length] = tmp;
        }
      }
    }
    
    submitInfo.pools[submitInfo.pools.length] = poolInfo;
  }
  
  Main.addClass(document.getElementById('step.2.section'), 'disabled');
  Main.hide('gocancel');
  Main.hide('gocreate');

  if (debug) Main.debug(JSON.stringify(submitInfo));
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Creating pools...');
    var url = '../Pool.servlet?ID=<%=ID%>';
    url += '&cmd=CreatePools';
    request.open("POST", url, false);
    request.setRequestHeader("Content-Type", "application/json");
    request.send(JSON.stringify(submitInfo));
  }
  finally
  {
    hideLoadingAnimation();
  }

  if (debug) Main.debug(request.responseText);

  var response = JSON.parse(request.responseText);
  if (response.status != 'ok')
  {
    setFatalError(response.message);
    return false;
  }

  var msg = '<ul>';
  for (var i = 0; i < response.messages.length; i++)
  {
    msg += '<li>' + response.messages[i];
  }
  msg += '</ul>';
  setInnerHTML('done', msg);
  Main.show('done');
  Main.show('gorestart');
  scrollToBottom(document.getElementById('content'));

}

function loadLibraryInformation()
{
  var frm = document.forms['reggie'];
  var libPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;

  // Load Libraries and related info from the selected bioplate
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading information about libraries...');
    var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetLibraryInfoForPlate&bioplate='+libPlate.id;    
    request.open("GET", url, false);
    request.send(null);
  }
  finally
  {
    hideLoadingAnimation();
  }
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);
  if (response.status != 'ok')
  {
    setFatalError(response.message);
    return false;
  }

  
  var schema = PoolSchema.getById(libPlate.poolSchema);
  var barcodeVariant = PoolSchema.getBarcodeVariantByName(schema, libPlate.barcodeVariant);
  Plate.setPoolSchema(schema);
  WellPainter.barcodeVariant = barcodeVariant;
  Plate.init(8, 12, schema, WellPainter);

  var poolInfo = response.poolInfo;
  TARGET_MOLARITY_IN_POOL = poolInfo.targetMolarity;
  EXTRA_LARGE_MIX_FACTOR = poolInfo.extraLargeMixFactor;
  LIMIT_FOR_EXTRA_LARGE_MIX = poolInfo.limitForExtraLargeMix;
  
  setInnerHTML('pool_schema', schema.name);
  setInnerHTML('barcode_variant', barcodeVariant.name);
  setInnerHTML('target_molarity', Numbers.formatNumber(TARGET_MOLARITY_IN_POOL, 1, ' nM'));

  var libs = response.libraries;
  var molarityLimit = TARGET_MOLARITY_IN_POOL * LIMIT_FOR_AUTO_EXCLUDE;
  for (var i = 0; i < libs.length; i++)
  {
    var lib = libs[i];
    var well = lib.bioWell;
    lib.excludeFromPool = false;
    
    if (lib.molarity != null && lib.molarity < molarityLimit)
    {
      lib.excludeFromPool = true;
      lib.flag = 'ExcludedFromPool';
      lib.comment = 'Not enough DNA';
    }

    Plate.getWell(well.row, well.column).setExtract(lib);
  }

  PoolSchema.buildPoolTableRow(schema, 12);
  setTargetVolumePerLib(poolInfo.targetVolumePerLib);
}

function loadPoolNames()
{
  var frm = document.forms['reggie'];
  var libPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;

  var schema = PoolSchema.getById(libPlate.poolSchema);

  // Load Libraries and related info from the selected bioplate
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading Library bioplate information...');
    var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetNextAutoGeneratedPoolNames&numNames='+schema.numPools;   
    request.open("GET", url, false);
    request.send(null);
  }
  finally
  {
    hideLoadingAnimation();
  }
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);
  if (response.status != 'ok')
  {
    setFatalError(response.message);
    return false;
  }
  
  var list = response.names;
  for (var i = 0; i < list.length; i++)
  {
    POOL_NAMES[i] = list[i];
  }

}

function setTargetVolumePerLib(targetVolumePerLib)
{
  var frm = document.forms['reggie'];
  frm.target_volume.value = targetVolumePerLib;
  
  targetVolumePerLibIsValid = false;
  if (targetVolumePerLib < 2 || targetVolumePerLib > 10)
  {
    setInputStatus('target_volume', 'Must be between 2 and 10µl', 'invalid');
    return;
  }
  setInputStatus('target_volume', '', 'valid');
  targetVolumePerLibIsValid = true;

  // Pre-process the Library items
  var mixingStrategy = Forms.getCheckedRadio(frm.mixing_strategy).value;
  var wells = Plate.getWells();
  for (var i = 0; i < wells.length; i++)
  {
    var lib = wells[i].extract;
    if (lib)
    {
      if (lib.remainingQuantity == null)
      {
        lib.excludeFromPool = true;
      }
      else
      {
        PoolMix.calculateLibVolume(lib, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
        PoolMix.calculateEbVolume(lib, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
      }
    }
  }
  
  updatePoolData();
  WellPainter.mixingStrategy = mixingStrategy;
  Plate.paint(Plate.getWells());
}

function calculateRemarks(lib, schema, barcodeVariant)
{
  var well = lib.bioWell;
  var remarks = [];

  // Check if default barcode has been modified
  var indexSet = barcodeVariant.indexSets[well.column];
  if (indexSet)
  {
    var defaultBarcode = indexSet.barcodes[well.row];
    if (defaultBarcode && lib.barcode.name != defaultBarcode)
    {
      remarks[remarks.length] = 'Modified barcode';
      lib.barcode.modified = true;
    }
  }
  
  if (lib.molarity != null)
  {
    if (lib.volume != lib.actualVolume)
    {
      if (lib.volume > lib.remainingVolume)
      {
        remarks[remarks.length] = 'Low quantity';
      }
      else 
      {
        remarks[remarks.length] = 'Low molarity';
      }
    }

    if (lib.speedVacConc != null)
    {
      remarks[remarks.length] = 'SpeedVac';
    }
    
    if (lib.mixFactor > 1)
    {
      // Larger mix than default
      remarks[remarks.length] = 'Use ' + Numbers.formatNumber(lib.actualVolume+lib.actualEb, 1, 'µl') + ' in pool';
    }
    
  }
  lib.stratagene = lib.name.indexOf(GENERIC_STRATAGENE_NAME) == 0;
  lib.external = lib.name.indexOf(EXTERNAL_RNA_NAME) == 0;
  lib.remarks = remarks;
}


function updatePoolData()
{
  var frm = document.forms['reggie'];
  var targetVolumePerLib = parseFloat(frm.target_volume.value);
  var mixingStrategy = Forms.getCheckedRadio(frm.mixing_strategy).value;

  var libPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;
  var schema = PoolSchema.getById(libPlate.poolSchema);
  var barcodeVariant = PoolSchema.getBarcodeVariantByName(schema, libPlate.barcodeVariant);

  var numSeparateMix = 0;
  var numLowQuantity = 0;
  var numExcluded = 0;
  
  for (var poolNo = 0; poolNo < Plate.getPools(); poolNo++)
  {
    // Get all libs into an array
    var libs = [];
    var wells = Plate.getPool(poolNo);
    for (var wellNo = 0; wellNo < wells.length; wellNo++)
    {
      var well = wells[wellNo];
      var lib = well.extract;
      if (lib)
      {
        if (lib.excludeFromPool)
        {
          numExcluded++;
        }
        else
        {
          libs[libs.length] = lib;
        }
      }
    }
    
    // Calculate final pool volumes, molarity, etc.
    var poolInfo = PoolMix.calculateFinalPoolInfo(libs, TARGET_MOLARITY_IN_POOL, targetVolumePerLib, mixingStrategy);
    POOL_DATA[poolNo] = poolInfo;
    
    // Make remarks for each lib
    for (var libNo = 0; libNo < libs.length; libNo++)
    {
      var lib = libs[libNo];
      calculateRemarks(lib, schema, barcodeVariant);
      if (lib.eb != 0 || mixingStrategy == 'fixed') numSeparateMix++;
      if (lib.volume > lib.actualVolume) numLowQuantity++;
    }
    
    var warnMsg = null;
    if (poolInfo.ebVolumeExtra < 0) 
    {
      warnMsg = 'Too many libs with low molarity';
    }
    
    var poolDiv = document.getElementById('pool.'+poolNo);
    var poolData = '<div class="pool-data">';
    poolData += libs.length + ' libs • ';
    poolData += Numbers.formatNumber(poolInfo.molarity, 2, 'nM')+' • ';
    poolData += Numbers.formatNumber(poolInfo.totalVolume, 1, 'µl');
    if (mixingStrategy == 'dynamic')
    {
      poolData += ' • <span class="pool-eb">'+Numbers.formatNumber(poolInfo.ebVolumeExtra, 1, 'µl')+'</span>';
    }
    if (warnMsg)
    {
      Main.addClass(poolDiv, 'warning');
      poolData += '<div class="warning-message">'+warnMsg+'</div>';
    }
    else
    {
      Main.removeClass(poolDiv, 'warning');
    }
    poolData += '</div>';
    var poolComments = frm['comment.'+poolNo];
    var comments = poolComments ? poolComments.value : '';
    poolData += '<textarea name="comment.'+poolNo+'"></textarea>';
    poolDiv.innerHTML = POOL_NAMES[poolNo] + poolData;
    frm['comment.'+poolNo].value = comments;
  }
  
  setInnerHTML('num_separate_mix', numSeparateMix);
  setInnerHTML('num_low_quantity', numLowQuantity);
  setInnerHTML('num_excluded', numExcluded);
}

function targetVolumeOnBlur()
{
  var frm = document.forms['reggie'];
  var targetVolumePerLib = parseFloat(frm.target_volume.value);
  setTargetVolumePerLib(targetVolumePerLib);
}

function mixingStrategyOnChange()
{
  targetVolumeOnBlur();
}

var WellPainter = function()
{
  var painter = {};
  
  painter.getClassNameForWell = function(well, schema)
  {
    var indexSet = painter.barcodeVariant.indexSets[well.column];
    var cls = '';
    var lib = well.extract;
    
    if (lib)
    {
      if (lib.excludeFromPool)
      {
        cls += ' exclude-from-pool';
      }
      else if (indexSet)
      {
        cls += ' ' + (lib && lib.barcode.modified ? 'bg-modified' : indexSet.color);
      }
      if (lib.flag)
      {
        cls += ' flagged';
      }
      if (!lib.flag && lib.actualVolume < lib.volume)
      {
        cls += ' low-volume';
      }
    }
    else if (indexSet)
    {
      cls += indexSet.color;
    }
    return cls;
  }
  
  painter.getWellText = function(well, schema)
  {
    var text = '';
    var lib = well.extract;
    if (lib)
    {
      var name = lib.name;
      var i = name.indexOf('.m');
      var mixFactor = lib.mixFactor;
      var displayName = name.substring(0, i)+'.<br>&nbsp;'+name.substring(i);
      text += '<div class="lib">'+displayName+'</div>';
      text += '<div>';
      text += '<span class="barcode">'+lib.barcode.name+'</span>';
      if (lib.molarity != null)
      {
        text += '<span class="molarity">'+Numbers.formatNumber(lib.molarity, 2, 'nM')+'</span>';
      }
      text += '</div>';
      if (!lib.excludeFromPool)
      {
        mark = (lib.volume > lib.actualVolume) ? '*' : '';
        text += '<div>';
        text += '<span class="volume">'+(isFinite(lib.volume) ? Numbers.formatNumber(lib.volume*mixFactor, 1, 'µl'+mark) : '∞')+'</span>';
        if (painter.mixingStrategy == 'fixed' || lib.mixFactor > 1)
        {
          text += '<span class="eb">'+(isFinite(lib.eb) ? Numbers.formatNumber(lib.eb*mixFactor, 1, 'µl') : '-∞')+'</span>';
        }
        else
        {
          text += '<span class="eb">—</span>';
        }
        text += '</div>';
      }
      if (lib.remarks) text += '<div class="remarks">'+ lib.remarks.join('; ') + '</div>';
      if (lib.comment)
      {
        text += '<div class="remarks">'+ lib.comment + '</div>';
      }
    }
    return text;
  }

  return painter;
}();

//Toggle the selected status of a single well
function toggleWell(row, column)
{
  var well = Plate.getWell(row, column);
  Plate.toggleSelected([well]);
}

var lastComment = '';
function excludeSelected()
{
  var wells = Plate.getSelected();
  
  if (wells.length == 0)
  {
    alert('No wells have been selected');
    return;
  }

  // See if there is an existing comment
  var comment;
  for (var i = 0; i < wells.length; i++)
  {
    var lib = wells[i].extract;
    if (lib && lib.comment) 
    {
      comment = lib.comment;
    }
  }

  comment = prompt('Comment on reason for exclusion', comment || lastComment);
  if (comment == null) return;
  lastComment = comment;
  
  if (comment == '') comment = null;
  
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var lib = well.extract;
    if (lib)
    {
      lib.excludeFromPool = true;
      if (!lib.stratagene && !lib.external)
      {
        lib.flag = 'ExcludedFromPool';
        lib.comment = comment;
      }
    }
    well.selected = false;
  }
  
  updatePoolData();
  Plate.paint(Plate.getWells());
}

function includeSelected()
{
  var wells = Plate.getSelected();
  
  if (wells.length == 0)
  {
    alert('No wells have been selected');
    return;
  }

  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var lib = well.extract;
    if (lib)
    {
      lib.excludeFromPool = false;
      lib.flag = null;
      lib.oldComment = lib.comment;
      lib.comment = null;
    }
    well.selected = false;
  }
  
  updatePoolData();
  Plate.paint(Plate.getWells());
}

//Flag the selected RNA
function toggleFlag()
{
  var wells = Plate.getSelected();
  
  if (wells.length == 0)
  {
    alert('No wells have been selected');
    return;
  }

  var flag = null;
  var firstLib = true;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var lib = well.extract;
    if (lib)
    {
      if (firstLib && !lib.excludeFromPool)
      {
        flag = lib.flag ? null : 'ManualFlag';
        firstLib = false;
      }
      lib.flag = lib.excludeFromPool ? 'ExcludedFromPool' : flag;
    }
    //well.selected = false;
  }
  
  Plate.paint(wells);
}

//Set a comment on the selected wells
function commentSelected(comment)
{
  var wells = Plate.getSelected();
  
  if (comment == undefined)
  {
    if (wells.length == 0)
    {
      alert('No wells have been selected');
      return;
    }
    
    var count = 0;
    for (var i = 0; i < wells.length; i++)
    {
      var well = wells[i];
      if (well.extract) 
      {
        if (well.extract.comment) comment = well.extract.comment;
        count++;
      }
    }
    
    if (count == 0)
    {
      alert('Only empty wells have been selected');
      return;
    }
    
    comment = prompt('Comment', comment || lastComment);
    if (comment == null) return;
  }
  
  lastComment = comment;
  
  if (comment == '') comment = null;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.extract) 
    {
      well.extract.comment = comment;
    }
    well.selected = false;
  }
  Plate.paint(wells);
}


</script>
<style>
.lib
{
  font-weight: bold;
  margin-bottom: 0.25em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barcode
{}
.molarity
{
  float: right;
}

.volume
{
  color: #C80000;
}
.eb
{
  color: #0000C8;
  float: right;
}
.pool-eb
{
  color: #0000C8;
}
.remarks
{
  color: #C80000;
  font-style: italic;
}
.pool-data
{
  font-weight: normal;
}
.pool.warning
{
  background-image: url('../images/warning.png');
  background-position: 98% 5%;
  background-repeat: no-repeat;
}

.pool-data .warning-message
{
  color: #C80000;
  font-style: italic;
}

.well.exclude-from-pool
{
  background-color: #FFFFFF !important;
}

.well.exclude-from-pool.selected
{
  background-color: #D8D8D8 !important;
}

.well.exclude-from-pool *
{
  color: #999999 !important;
}
.well.flagged
{
  background-image: url('../images/flag.png');
  background-position: 98% 5%;
  background-repeat: no-repeat;
}

.well.low-volume
{
  background-image: url('../images/warning.png') !important;
  background-position: 98% 5%;
  background-repeat: no-repeat;
}
.pool textarea
{
  width: 95%;
  height: 3.5em;
}
</style>
</base:head>
<base:body onload="init()">

  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="Create pooled libraries" 
    /></p:path>

  <div class="content" id="content">
  <%
  if (sc.getActiveProjectId() == 0)
  {
    %>
    <div class="messagecontainer note" style="width: 950px; margin-left: 20px; margin-bottom: 20px; margin-right: 0px; font-weight: bold; color: #cc0000;">
      No project has been selected. You may proceed with the registration but 
      created items will not be shared.
    </div>
    <%
  }
  %>

  <div class="allsteps">
    <div class="step current" id="step.1">1</div>
    ›
    <div class="step future" id="step.2">2</div>
  </div>

  <form name="reggie" onsubmit="return false;">
  
  <div id="step.1.section">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Select source for pool</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">Library bioplate</td>
        <td class="input"><select style="width:90%" 
            name="bioplate" id="bioplate" onchange="bioPlateOnChange()"></select>
        </td>
        <td class="status" id="bioplate.status"></td>
        <td class="help"><span id="bioplate.message" class="message" style="display: none;"></span>
          Select an existing Library bioplate. The list contain all Library bioplates that
          contain libraries with no child items.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt"></td>
        <td class="input"> - or -</td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt"></td>
        <td class="input">
          <table><tr><td>
            <base:button title="Create manual pool" onclick="createManualPool()" image="<%=home+"/images/gonext.png"%>" />
          </td></tr></table>
        
        </td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      </table>
    </td>
  </tr>
  </table>
  </div>
  
  <div id="step.2.section" style="display: none;">
  <table class="stepform" style="width: auto;">
  <tr>
    <td rowspan="2" class="stepno">2</td>
    <td class="steptitle">Confirm pool layout</td>
  </tr>
  <tr>
    <td class="stepfields">

      <table class="bottomborder" style="width: 100%;">
      <tr valign="top">
        <td class="prompt">Pool layout</td>
        <td class="input">
          <span id="pool_schema"></span>; <span id="barcode_variant"></span>
        </td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Target molarity</td>
        <td class="input">
          <span id="target_molarity"></span>
        </td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Average volume / lib</td>
        <td class="input">
          <input type="text" class="text" name="target_volume" 
            value="5" style="width: 4em;"
            onblur="targetVolumeOnBlur()"
            onkeypress="doOnEnter(event, targetVolumeOnBlur); return Numbers.numberOnly(event)"> µl (2--10)
        </td>
        <td class="status" id="target_volume.status"></td>
        <td class="help" rowspan="2"><span id="target_volume.message" class="message" style="display: none;"></span>
          Select a target volume when mixing each lib to 2nM before pooling. 
          Use the <b>Dynamic</b> strategy to prioritize final pool molarity by mixing 
          different volume for each library. Use the <b>Fixed</b> strategy to mix all 
          libraries to the given volume.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Mixing strategy</td>
        <td class="input">
          <label><input type="radio" name="mixing_strategy" value="dynamic" checked
            onclick="mixingStrategyOnChange()"
            >Dynamic</label>
          <label><input type="radio" name="mixing_strategy" value="fixed"
            onclick="mixingStrategyOnChange()"
            >Fixed</label>
        </td>
        <td class="status" id="mixing_strategy.status"></td>
      </tr>
      </table>
      <tbl:toolbar subclass="bottomborder">
        <tbl:button 
          title="Exclude from pool&hellip;" 
          image="<%=home+"/images/delete.png"%>" 
          onclick="excludeSelected()" 
          tooltip="Exclude the selected libraries from the pool"
        />
        <tbl:button 
          title="Include in pool" 
          image="<%=home+"/images/new.png"%>" 
          onclick="includeSelected()" 
          tooltip="Include the selected libraries in the pool"
        />
        <tbl:button 
          title="Toggle flag" 
          image="<%=home+"/images/flag.png"%>" 
          onclick="toggleFlag()" 
          tooltip="Flag the parent RNA for the selected libraries"
        />
        <tbl:button 
          title="Comments&hellip;" 
          image="<%=home+"/images/comment.png"%>" 
          onclick="commentSelected()" 
          tooltip="Add a comment to the selected libraries" 
        />
      </tbl:toolbar>
      
      <div style="margin: 1em;" class="messagecontainer note">
        <base:icon image="info.png"/> 
        <b>Separate mix:</b> <span id="num_separate_mix"></span>, 
        <b>Low quantity:</b> <span id="num_low_quantity"></span>, 
        <b>Excluded:</b> <span id="num_excluded"></span>
      </div>
      
      <table class="plate" style="margin: 1em 1em 1em 1em;" id="plate">
      <%
      int columns = 12;
      int rows = 8;
      WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
      WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
      %>
      <tr class="header">
        <th></th>
        <%
        for (int c = 0; c < columns; ++c)
        {
          %>
          <th id="col.<%=c%>"><%=colF.format(c)%></th>
          <%
        }
        %>
      </tr>
      <tbody>
      <%
      for (int r = 0; r < rows; ++r)
      {
        String row = rowF.format(r);
        %>
        <tr class="row-<%=r%>">
          <th id="row.<%=r%>" class="rowheader"><%=row%></th>
          <%
          for (int c = 0; c < columns; ++c)
          {
            %>
            <td class="well col-<%=c%>" id="well.<%=r%>.<%=c%>"
              onclick="toggleWell(<%=r%>,<%=c%>)"
              title="Select/deselect this well"
              ></td>
            <%
          }
          %>
        </tr>
        <%
      }
      %>
      </tbody>
      <tr id="pool-row">
        <th colspan="13">&nbsp;</th>
      </tr>
      </table>
      <div style="margin: 1em;">
      Low molarity = The concentration of this library too low to mix to target molarity for the pool.<br>
      For each pool: <i>Number of libraries</i> • <i>Final molarity</i> • <i>Total volume</i> • <i>EB volume (dynamic mixing only)</i>
      </div>
    </td>
  </tr>
  </table>
  </div>
  
  <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>
  
  <div class="messagecontainer error" id="errorMessage" style="display: none; width: 950px; margin-left: 20px; margin-bottom: 0px;"></div>
  
  <div id="done" class="success" style="display: none; width: 950px; margin-left: 20px; margin-top: 20px;"></div>
  
  <table style="margin-left: 20px; margin-top: 10px; margin-bottom: 3em;" class="navigation">
    <tr>
      <td><base:button id="gocancel" title="Cancel" onclick="goRestart(false)" /></td>
      <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" onclick="goNext(true)"/></td>
      <td><base:button id="gocreate" title="Create" image="<%=home+"/images/gonext.png"%>" onclick="goCreate()" style="display: none;"/></td>
      <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" onclick="goRestart(true)" style="display: none;"/></td>
      <td id="gonext.message" class="message"></td>
    </tr>
  </table>
  
  
  </form>
  </div>
  
</base:body>
</base:page>
<%
}
finally
{
  if (dc != null) dc.close();
}
%>