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

<%@ 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" %>
<%
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">
  <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 = false;
var currentStep = 1;

// Loaded from servlet when getting Library information
var TARGET_MOLARITY_IN_POOL;
var TARGET_VOLUME_IN_POOL_PER_LIB;

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 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()
{

  var submitInfo = {};
  submitInfo.pools = [];
  
  var numPools = Plate.getPools();
  for (var poolNo = 0; poolNo < numPools; poolNo++)
  {
    var wells = Plate.getPool(poolNo);
    
    var poolInfo = {};
    poolInfo.name = POOL_NAMES[poolNo];
    poolInfo.libs = [];
    
    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.volume;
        tmp.eb = lib.eb;
        tmp.extraMixFactor = lib.extraMixFactor;
        poolInfo.libs[poolInfo.libs.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;

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

  setInnerHTML('pool_schema', schema.name);
  setInnerHTML('barcode_variant', barcodeVariant.name);
  
  // 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 poolInfo = response.poolInfo;
  TARGET_MOLARITY_IN_POOL = poolInfo.targetMolarity;
  TARGET_VOLUME_IN_POOL_PER_LIB = poolInfo.targetVolumePerLib;
  
  setInnerHTML('target_molarity', Numbers.formatNumber(TARGET_MOLARITY_IN_POOL, 1) + ' nM');
  setInnerHTML('target_volume', Numbers.formatNumber(TARGET_VOLUME_IN_POOL_PER_LIB, 1) + ' µl');
  
  // Pre-process the Library items
  var list = response.libraries;
  for (var i = 0; i < list.length; i++)
  {
    checkAndPreProcessLibrary(list[i], schema, barcodeVariant);
  }
  
  viewAsPlate(list, schema, barcodeVariant)
}

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 checkAndPreProcessLibrary(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.volume)
  {
    if (lib.speedVacConc != null)
    {
      remarks[remarks.length] = 'SpeedVac';
    }
    if (lib.volume > TARGET_VOLUME_IN_POOL_PER_LIB + 0.001)  // +0.001 to allow for rounding errors
    {
      remarks[remarks.length] = 'Use '+TARGET_VOLUME_IN_POOL_PER_LIB+' µl';
    }

    if (lib.extraMixFactor)
    {
      // Larger mix than default
      var mixedVolume = (lib.volume+lib.eb)*(1+lib.extraMixFactor);
      remarks[remarks.length] = 'Mix ' + Numbers.formatNumber(mixedVolume, 0) + 'µl';
    }

  }
  
  lib.remarks = remarks;
}

function viewAsPlate(list, schema, barcodeVariant)
{
  Plate.init(8, 12, schema, WellPainter);
  
  for (var i = 0; i < list.length; i++)
  {
    var lib = list[i];
    var well = lib.bioWell;
    Plate.getWell(well.row, well.column).setExtract(lib);
  }

  WellPainter.barcodeVariant = barcodeVariant;
  Plate.paint(Plate.getWells());
  PoolSchema.buildPoolTableRow(schema, 12);
  
  for (var poolNo = 0; poolNo < Plate.getPools(); poolNo++)
  {
    var wells = Plate.getPool(poolNo);
    var poolMolarity = 0;
    var poolVolume = 0;
    var numLibs = 0;
    for (var wellNo = 0; wellNo < wells.length; wellNo++)
    {
      var lib = wells[wellNo].extract;
      if (lib)
      {
        poolMolarity += Math.min(lib.molarity, TARGET_MOLARITY_IN_POOL);
        poolVolume += TARGET_VOLUME_IN_POOL_PER_LIB;
        numLibs++;
      }
    }
    
    var poolData = '<div class="pool-data">';
    poolData += Numbers.formatNumber(poolMolarity/numLibs, 2)+'nM; ';
    poolData += Numbers.formatNumber(poolVolume, 0) + 'µl';
    poolData += '</div>';
    document.getElementById('pool.'+poolNo).innerHTML = POOL_NAMES[poolNo] + poolData;
  }
  
}

var WellPainter = function()
{
  var painter = {};
  
  painter.getClassNameForWell = function(well, schema)
  {
    var cls = '';
    var indexSet = painter.barcodeVariant.indexSets[well.column];
    if (indexSet)
    {
      var lib = well.extract;
      cls += lib && lib.barcode.modified ? 'bg-modified' : indexSet.color;
    }
    return cls;
  }
  
  painter.getWellText = function(well, schema)
  {
    var text = '';
    var lib = well.extract;
    if (lib && lib.remainingQuantity && lib.molarity)
    {
      var name = lib.name;
      var i = name.indexOf('.m');
      var mixFactor = 1+lib.extraMixFactor;
      var displayName = name.substring(0, i)+'.<br>&nbsp;'+name.substring(i);
      text += '<div class="lib">'+displayName+'</div>';
      text += '<span class="barcode">'+lib.barcode.name+'</span>';
      text += '<span class="molarity">'+Numbers.formatNumber(lib.molarity, 2)+'nM</span>';
      text += '<span class="volume">'+Numbers.formatNumber(lib.volume*mixFactor, 2) + 'µl</span>';
      text += '<span class="eb">'+Numbers.formatNumber(lib.eb*mixFactor, 2)+'µl</span>';
      text += '<div class="remarks">'+ lib.remarks.join('; ') + '</div>';
    }
    return text;
  }

  return painter;
}();

</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;
}
.remarks
{
  color: #C80000;
  font-style: italic;
}
.pool-data
{
  font-weight: normal;
}
</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" id="bioplate.status"></td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Manual select</td>
        <td class="input"> // TODO</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>
        </td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Barcode variant</td>
        <td class="input">
          <span id="barcode_variant"></span>
        </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="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Target volume / lib</td>
        <td class="input">
          <span id="target_volume"></span>
        </td>
        <td class="help"></td>
      </tr>
      </table>
      
      <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%>"
              title=""
              ></td>
            <%
          }
          %>
        </tr>
        <%
      }
      %>
      </tbody>
      <tr id="pool-row">
        <th colspan="13">&nbsp;</th>
      </tr>
      </table>
    </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();
}
%>