source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/assign_barcode.jsp @ 1971

<%@ 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.util.HTML"  
  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;

var cdnaDateIsValid = false;
var barcodesByName = [];

function init()
{
  var frm = document.forms['reggie'];

  var barcodes = loadBarcodes();
  var selectBarcodeHtml = '';
  
  for (var i = 0; i < barcodes.length; i++)
  {
    if (i % 8 == 0 && i > 0)
    {
      selectBarcodeHtml += '<div class="menuseparator"></div>';
    }
    var barcode = barcodes[i];
    barcodesByName[barcode.name] = barcode;
    selectBarcodeHtml += '<div class="menuitem enabled" id="bc-'+barcode.id+'" data-barcode-name="'+barcode.name+'">';
    selectBarcodeHtml += barcode.name+'</div>';
  }
  setInnerHTML('select-barcode-all', selectBarcodeHtml);
  
  // Load existing cDNA plates that have not yet been assigned barcodes
  var bioplates = getCDnaBioPlatesForBarcode();
  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');
    bioPlateOnChange();
  }
  else
  {
    var msg = 'No cDNA bioplates available for processing.';
    setFatalError(msg);
    return;
  }

  Main.show('gonext');
}

function getCDnaBioPlatesForBarcode()
{
  var frm = document.forms['reggie']; 
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading cDNA bioplates ...');
    var url = '../LibPrep.servlet?ID=<%=ID%>&cmd=GetCDNAPlatesForBarcoding';    
    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 bioPlateOnChange()
{
  var frm = document.forms['reggie'];
  var bioplate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;
  setInnerHTML('cdnacomments', formatText(bioplate.comments));
}


function loadBarcodes()
{
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading barcode information...');
    var url = '../LibPrep.servlet?ID=<%=ID%>&cmd=GetAllBarcodeInfo';    
    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.barcodes;
}

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');
  Main.hide('gonext');
  Main.hide('gocancel');
  loadCDNAInformation();
  
  currentStep = 2;
  Main.hide('step.1.section');
  Main.show('step.2.section');
  Main.show('gocancel');
  Main.show('gocreate');
  
  keepSessionAlive('<%=ID%>', debug, '../');
}

function loadCDNAInformation()
{
  // Load cDNA and related info from the selected bioplate
  
  var frm = document.forms['reggie'];
  var cdnaPlate = frm.bioplate[frm.bioplate.selectedIndex].bioplate;

  var schema = PoolSchema.getById(cdnaPlate.poolSchema);
  PoolSchema.initList(frm.pool_schema, schema.id);
  PoolSchema.initVariantList(frm.barcode_variant, schema, cdnaPlate.barcodeVariant);

  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading cDNA bioplate information...');
    var url = '../LibPrep.servlet?ID=<%=ID%>&cmd=GetCDnaInfoForPlate&bioplate='+cdnaPlate.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 list = response.cdna;
  // Pre-process the return cDNA items
  for (var i = 0; i < list.length; i++)
  {
    checkAndPreProcessCDna(list[i]);
  }
  
  viewAsPlate(list, schema);  
}


/**
  Check the mRNA and RNA items for problems and calculate derived
  information such as volume and water, qc/stratagene flags.
*/
function checkAndPreProcessCDna(cdna)
{
  // Set the 'stratagene'/'external' flag
  cdna.stratagene = cdna.name.indexOf(GENERIC_STRATAGENE_NAME) == 0;
  cdna.external = cdna.name.indexOf(EXTERNAL_RNA_NAME) == 0;
}

function viewAsPlate(list, schema)
{
  Plate.init(8, 12, schema, WellPainter);

  for (var i = 0; i < list.length; i++)
  {
    var cdna = list[i];
    var well = cdna.bioWell;
    Plate.getWell(well.row, well.column).setExtract(cdna);
  }
  var frm = document.forms['reggie'];
  
  var barcodeVariant = schema.barcodeVariants[frm.barcode_variant.selectedIndex];
  assignSchemaDefinedBarcodeVariant(schema, barcodeVariant);
  
  WellPainter.barcodeVariant = barcodeVariant;
  Plate.paint(Plate.getWells());
  PoolSchema.buildPoolTableRow(schema, 12, false);
}

function assignSchemaDefinedBarcodeVariant(schema, barcodeVariant)
{
  var wells = Plate.getWells();
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var cdna = well.extract;
    if (cdna)
    {
      var indexSet = barcodeVariant.indexSets[well.column];
      var barcode = null;
      if (indexSet)
      {
        var barcodeName = indexSet.barcodes[well.row];
        barcode = barcodesByName[barcodeName];
      }
      cdna.barcode = barcode;
      cdna.defaultBarcode = barcode;
      well.duplicate = false;
    }
  }
}


function poolSchemaOnChange()
{
  var frm = document.forms['reggie'];
  var schema = POOL_SCHEMA[frm.pool_schema.selectedIndex];
  Plate.setPoolSchema(schema);
  PoolSchema.initVariantList(frm.barcode_variant, schema);
  
  var barcodeVariant = schema.barcodeVariants[frm.barcode_variant.selectedIndex];
  assignSchemaDefinedBarcodeVariant(schema, barcodeVariant);
  
  WellPainter.barcodeVariant = barcodeVariant;
  Plate.paint(Plate.getWells());
  PoolSchema.buildPoolTableRow(schema, 12, false);
}

function barcodeVariantOnChange()
{
  var frm = document.forms['reggie'];
  var schema = POOL_SCHEMA[frm.pool_schema.selectedIndex];
  var barcodeVariant = schema.barcodeVariants[frm.barcode_variant.selectedIndex]; 
  
  assignSchemaDefinedBarcodeVariant(schema, barcodeVariant);

  WellPainter.barcodeVariant = barcodeVariant;
  Plate.paint(Plate.getWells());
}



function goCreate()
{
  var submitInfo = {};
  var plateInfo = {};
  
  submitInfo.bioplate = plateInfo;
  var frm = document.forms['reggie'];
    
  plateInfo.id = parseInt(frm.bioplate.value);
  plateInfo.poolSchema = frm.pool_schema.value;
  plateInfo.barcodeVariant = frm.barcode_variant.value;
  plateInfo.comments = frm.comments.value;
  plateInfo.wells = [];

  var wells = Plate.getWells();
  var numErrors = 0;
  var numWarnings = 0;
  var numCdna = 0;
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    if (well.hasWarning())
    {
      numWarnings++;
    }
    if (well.hasError())
    {
      numErrors++;
    }
    else
    {
      if (well.extract && well.extract.id)
      {
        var tmp = {};
        tmp.row = well.row;
        tmp.column = well.column;
        tmp.cdna = {};
        tmp.cdna.id = well.extract.id;
        tmp.cdna.barcode = {};
        tmp.cdna.barcode.id = well.extract.barcode.id;
        plateInfo.wells[plateInfo.wells.length] = tmp;
        numCdna++;
      }
    }
  }

  if (numErrors > 0)
  {
    alert('There are ' + numErrors + ' wells with errors. Please fix them before continuing.');
    return;
  }

  if (numCdna == 0)
  {
    alert('There is no cDNA in any wells');
    return;
  }
  
  if (numWarnings > 0)
  {
    if (!confirm('There are ' + numWarnings + ' wells with a warning. Continue anyway?')) return;
  }
  

  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();
  var url = '../LibPrep.servlet?ID=<%=ID%>';
  url += '&cmd=CreateBarcodedLibraries';
  try
  {
    showLoadingAnimation('Registering barcoded libraries...');
    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');
}

var currentWell;
var lastSelectedBarcode;
function selectBarcode(event, row, column)
{
  // Locate the barcode selection div so that the current
  // barcode is positioned next to the current mouse position
  // Initially set it to the right of the mouse so that the
  // center is vertically aligned
  
  currentWell = Plate.getWell(row, column);
  var cdna = currentWell.extract;
  var scroll = 0;
  if (cdna)
  {
    // Reset 'current' selection
    var menu = document.getElementById('select-barcode');
    var selectAll = document.getElementById('select-barcode-all');
    for (var i = 0; i <  selectAll.childNodes.length; i++)
    {
      Main.removeClass(selectAll.childNodes[i], 'current');
    }
    menu.style.display = 'block';

    var x = event.clientX+1;
    var halfHeight = Math.floor(selectAll.offsetHeight/2)
    var y = event.clientY-halfHeight;
    var scroll = 0;
    var barcodeDiv;
    
    var useBarcode = cdna.barcode || lastSelectedBarcode;
    if (useBarcode)
    {
      var barcodeDiv = document.getElementById('bc-'+useBarcode.id);
      if (!cdna.barcode && barcodeDiv.nextSibling) barcodeDiv = barcodeDiv.nextSibling;
      // Try to scroll the current barcode so that it's baseline is at the center of the div
      scroll = barcodeDiv.offsetTop + barcodeDiv.offsetHeight - halfHeight;
      if (scroll < 0) 
      {
        // We get a negative scroll for the first few elements, shift the
        // entire selection div down instead
        y -= scroll;
        scroll = 0;
      }
      else if (scroll > selectAll.scrollHeight - selectAll.offsetHeight)
      {
        // We get a too large scroll value for the last few elements, shift
        // the entire selection div up instead
        y -= scroll - (selectAll.scrollHeight - selectAll.offsetHeight);
        scroll = selectAll.scrollHeight - selectAll.offsetHeight;
      }
      if (cdna.barcode)
      {
        Main.addClass(barcodeDiv, 'current');
      }
    }
    
    // Default barcode
    if (cdna.defaultBarcode && cdna.defaultBarcode != cdna.barcode)
    {
      var selectDefault = document.getElementById('select-barcode-default');
      selectDefault.setAttribute('data-barcode-name', cdna.defaultBarcode.name);
      selectDefault.innerHTML = 'Default: ' + cdna.defaultBarcode.name;
      Main.show('select-barcode-default');
      Main.show('select-barcode-default-separator');
    }
    else
    {
      Main.hide('select-barcode-default');
      Main.hide('select-barcode-default-separator');
    }
    
    // Position the selection div
    selectAll.scrollTop = scroll;
    menu.style.left = (x)+'px';
    menu.style.top = (y)+'px';
    event.stopPropagation();
  } 
  
}

function barcodeSelected(event)
{
  var frm = document.forms['reggie'];
  var schema = POOL_SCHEMA[frm.pool_schema.selectedIndex];
  var target = event.target;
  if (currentWell && currentWell.extract)
  {
    lastSelectedBarcode = barcodesByName[target.getAttribute('data-barcode-name')];
    currentWell.extract.barcode = lastSelectedBarcode;
    var poolNum = schema.getPoolNumForColumn(currentWell.column);
    if (poolNum >= 0) 
    {
      checkDuplicateBarcode(poolNum);
      Plate.paint(schema.getWellsInPool(Plate, poolNum));
    }
    else
    {
      Plate.paint([currentWell]);
    }
  }
}

function checkDuplicateBarcode(poolNum)
{
  var frm = document.forms['reggie'];
  var schema = POOL_SCHEMA[frm.pool_schema.selectedIndex];

  var wells = schema.getWellsInPool(Plate, poolNum);
  var wellByBarcodeName = [];
  for (var i = 0; i < wells.length; i++)
  {
    var well = wells[i];
    var cdna = well.extract;
    if (cdna && cdna.barcode)
    {
      if (wellByBarcodeName[cdna.barcode.name])
      {
        well.duplicate = true;
        wellByBarcodeName[cdna.barcode.name].duplicate = true;
      }
      else
      {
        wellByBarcodeName[cdna.barcode.name] = well;
        well.duplicate = false;
      }
    }
  }
}


var WellPainter = function()
{
  var painter = {};
  
  painter.getClassNameForWell = function(well, schema)
  {
    var cls = '';
    var indexSet = painter.barcodeVariant.indexSets[well.column];
    if (indexSet)
    {
      cls += indexSet.color;
    }
    var cdna = well.extract;
    if (cdna && cdna.barcode)
    {
      if (cdna.defaultBarcode && cdna.barcode != cdna.defaultBarcode)
      {
        cls += ' bg-modified';
      }
    }
    if (well.duplicate)
    {
      cls += ' duplicate';
    }
    return cls;
  }
  
  painter.getWellText = function(well, schema)
  {
    var text = '';
    var cdna = well.extract;
    if (cdna)
    {
      var name = cdna.name;
      var i = name.indexOf('.m');
      text += '<div class="name">'+name.substring(0, i)+'.<br>&nbsp;'+name.substring(i)+'</div>';
      if (cdna.barcode)
      {
        text += '<div class="barcode">'+cdna.barcode.name+'</div>';
        if (cdna.defaultBarcode && cdna.barcode != cdna.defaultBarcode)
        {
          text += '<div class="warn-msg">Modified barcode</div>';
        }
      }
      else
      {
        well.setError('No barcode');
      }
    }
    if (well.duplicate)
    {
      well.setError('Duplicate barcode');
    }
    return text;
  }

  return painter;
}();

</script>
<style>

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


#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%;
}

.menuseparator
{
  width: auto !important;
}

</style>
</base:head>
<base:body onload="init()">

  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="Assign barcodes to cDNA plates" 
    /></p:path>

  <div class="content" onclick="Main.hide('select-barcode')">
  <%
  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 id="select-barcode" class="menu vertical" style="width: 150px; display: none;"
    onclick="barcodeSelected(event)"
    >
    <div class="menuitem enabled" id="select-barcode-default">Default</div>
    <div class="menuseparator" id="select-barcode-default-separator"></div>
    <div id="select-barcode-all"></div>
  </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" style="width: auto;">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Select cDNA bioplate</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">cDNA bioplate</td>
        <td class="input"><select class="required" style="width:90%" 
            name="bioplate" id="bioplate"></select>
          <div id="cdnacomments" style="font-style: italic; background: #E8E8E8; padding: 2px 5px 2px 5px;"></div>
        </td>
        <td class="status" id="bioplate.status"></td>
        <td class="help"><span id="bioplate.message" class="message" style="display: none;"></span>
          Select an existing cDNA bioplate. The list contain all cDNA bioplates that
          has not yet been assigned barcodes (determined by the absence of 'BarcodeVariant' 
          annotation).
        </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">Select barcodes</td>
  </tr>
  <tr>
    <td class="stepfields">

      <table class="bottomborder" style="width: 100%;">
      <tr valign="top">
        <td class="prompt">Pool layout</td>
        <td class="input">
          <select name="pool_schema" onchange="poolSchemaOnChange()"></select>
        </td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Barcode variants</td>
        <td class="input">
          <select name="barcode_variant" onchange="barcodeVariantOnChange()"></select>
        </td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Comments</td>
        <td class="input">
          <textarea rows="2" style="width: 90%;" name="comments" value=""></textarea>
        </td>
        <td class="help">Comments for the library preparation.</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%>"
              onclick="selectBarcode(event, <%=r%>,<%=c%>)"
              title="Click to select barcode for this well"
              ></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;" 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();
}
%>