source: extensions/net.sf.basedb.reggie/trunk/resources/analysis/demux_confirm.jsp @ 2458

<%@ 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.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">
  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>

<script language="JavaScript">

var debug = 1;
var currentStep = 1;


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

  // Load existing Demux jobs
  if (jobs != null && jobs.length > 0)
  {
    for (var jobNo=0; jobNo < jobs.length; jobNo++)
    {
      var job = jobs[jobNo];
      var option = new Option(job.name, job.id);
      //option.title = title;
      option.job = job;
      frm.demuxJobs.options[frm.demuxJobs.length] = option;
    }
    demuxJobOnChange();
  }
  else
  {
    var msg = 'No jobs available for processing.';
    setFatalError(msg);
    return;
  }

  // All is ok
  frm.demuxJobs.focus();
}

function getPoolNum(poolName)
{
  var num = poolName.match(/Pool(\d+)/);
  return num ? parseInt(num[1], 10) : null; 
}

function goNextAuto()
{
  goNext(false);
}

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

function step1IsValid()
{
  return true;
}

function step2IsValid()
{
  return true;
}


function getDemuxJobs()
{
  var frm = document.forms['reggie']; 
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading demux jobs...');
    var url = '../DemuxMerge.servlet?ID=<%=ID%>&cmd=GetUnconfirmedDemuxJobs';   
    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.jobs;
}

function demuxJobOnChange()
{
  var frm = document.forms['reggie']; 
  var job = frm.demuxJobs[frm.demuxJobs.selectedIndex].job;
  
  setInnerHTML('startDate', formatDate(job.started));
  setInnerHTML('endDate', formatDate(job.ended));
  setInnerHTML('jobStatus', job.status+'; '+Strings.encodeTags(job.statusMessage));
  
  var demuxedSequences = job.demuxedSequences;
  var fcHtml = '<table id="fc-info-table"><tr><th>ID</th><th>PF_READS</th><th>PF_UNUSED_PCT</th><th>PF_NNNN_PCT</th><th>Warnings</th></tr>';
  var poolHtml = '';
  var libPlateHtml = '';
  var warningsHtml = '';
  for (var dxNo = 0; dxNo < demuxedSequences.length; dxNo++)
  {
    var dx = demuxedSequences[dxNo];
    var fc = dx.seqRun.flowCell;
    
    //if (dxNo > 0) fcHtml += '<br>';
    fcHtml += '<tr><td>'+Main.encodeTags(fc.FlowCellID)+'</td>';
    fcHtml += '<td>' + formatNumber(dx.PF_READS/1000000, 'M', 2) + '</td>';
    fcHtml += '<td>' + formatNumber(dx.PF_UNUSED_PCT, '%', 2)+' </td>';
    fcHtml += '<td>'+formatNumber(dx.PF_NNNN_PCT, '%', 2) + '</td>';
    fcHtml += '<td>'+dx.DEMUX_WARNING.length;
    if (dx.DEMUX_WARNING.length > 0) fcHtml += ' (see below)';
    fcHtml += '</td></tr>';
    
    var pools = fc.pools;
    for (var poolNo = 0; poolNo < pools.length; poolNo++)
    {
      var pool = pools[poolNo];
      if (poolHtml.indexOf(pool.name) == -1)
      {
        if (poolHtml.length > 0) poolHtml += ', ';
        poolHtml += Main.encodeTags(pool.name);
      }
      if (pool.LibPlate && libPlateHtml.indexOf(pool.LibPlate.name) == -1)
      {
        if (libPlateHtml.length > 0) libPlateHtml += ', ';
        libPlateHtml += Main.encodeTags(pool.LibPlate.name);
      }
    }
    
    if (dx.DEMUX_WARNING.length > 0)
    {
      for (var warnNo = 0; warnNo < dx.DEMUX_WARNING.length; warnNo++)
      {
        warningsHtml += '<li class="warning">'+Main.encodeTags(fc.FlowCellID)+': '+Main.encodeTags(dx.DEMUX_WARNING[warnNo]) + '<br>';
      }
    }
  }
  fcHtml += '</table>';

  setInnerHTML('flowCellsInDemux', fcHtml);
  setInnerHTML('pools', poolHtml);
  setInnerHTML('libPlates', libPlateHtml || 'n/a');
  setInnerHTML('comments', Main.encodeTags(job.comments));
  setInnerHTML('warnings', warningsHtml);
}


function formatDate(value)
{
  if (!value) return '';
  if (value.length == 8)
  {
    // YYYYMMDD
    value = value.substr(0, 4) + '-' + value.substr(4, 2) + '-' + value.substr(6, 2);
  }
  else if (value.length == 13)
  {
    // YYYYMMDD HHMM
    value = value.substr(0, 4) + '-' + value.substr(4, 2) + '-' + value.substr(6, 2) + ' ' + value.substr(9, 2) + ':' + value.substr(11, 2);
  }
  return value;
}


function gotoStep2()
{
  var frm = document.forms['reggie'];
  
  // Disable controls
  frm.demuxJobs.disabled = true;

  currentStep = 2;
  Main.hide('step.1.section');
  Main.show('step.2.section');
  Main.addClass(document.getElementById('step.1.section'), 'disabled');
  Main.show('gocancel');
  Main.show('goregister');
  Main.hide('gonext');
  
  var job = frm.demuxJobs[frm.demuxJobs.selectedIndex].job;

  var mergedSeq = getMergedSequences();
  job.mergedSequences = mergedSeq;
  
  var html = '<table id="mergedSequencesTable">';
  html += '<thead style="background-color: #E8E8E8; border-top: 1px solid #A0A0A0;">';
  // Header row
  html += '<tr>';
  html += '<th>Library</th>';
  html += '<th class="dottedleft">READS</th>';
  html += '<th class="dottedleft">PF_READS</th>';
  html += '<th class="dottedleft">Flag RNA</th>';
  html += '<th class="dottedleft">Align</th>';
  html += '<th class="dottedleft">Comment</th>';
  html += '</tr>';
  html += '<tr>';
  html += '<th></th>';
  html += '<th class="dottedleft">(millions)</th>';
  html += '<th class="dottedleft">(millions)</th>';
  html += '<th class="dottedleft"></th>';
  html += '<th class="dottedleft"></th>';
  html += '<th class="dottedleft"></th>';
  html += '</tr>';
  html += '</thead>';
  html += '<tbody>';
  for (var mergedNo = 0; mergedNo < mergedSeq.length; mergedNo++)
  {
    var merged = mergedSeq[mergedNo];
    var lib = merged.lib;
    lib.stratagene = lib.name.indexOf(GENERIC_STRATAGENE_NAME) == 0;
    lib.external = lib.name.indexOf(EXTERNAL_RNA_NAME) == 0;
    
    html += '<tr class="highlight">';
    html += '<td class="prompt">'+lib.name+'</td>';
    html += '<td class="dottedleft">'+formatNumber(merged.READS/1000000, null, 2)+'</td>';
    html += '<td class="dottedleft">'+formatNumber(merged.PF_READS/1000000, null, 2)+'</td>';

    // Do not allow flagging external or stratagene
    var alignChecked = 'checked';
    if (lib.stratagene || lib.external)
    {
      html += '<td class="dottedleft">-</td>';
      alignChecked = '';
    }
    else
    {
      if (!merged.PF_READS) alignChecked = '';
      html += '<td class="dottedleft"><input type="checkbox" name="flag.'+merged.id+'"></td>';
    }
    
    html += '<td class="dottedleft"><input type="checkbox" name="align.'+merged.id+'" '+alignChecked+'></td>';
    html += '<td class="dottedleft"><input type="text" name="comment.'+merged.id+'" style="width: 20em;"></td>';
    html += '</tr>';
  }
  html += '</tbody>';
  html += '</table>';
  setInnerHTML('mergedSequences', html);
  
  if (job.status == 'ERROR')
  {
    Doc.element('outcomeFailed').checked = true;
    outcomeOnChange();
  }

}


function getMergedSequences()
{
  var frm = document.forms['reggie']; 
  var job = frm.demuxJobs[frm.demuxJobs.selectedIndex].job;
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading merged sequences...');
    var url = '../DemuxMerge.servlet?ID=<%=ID%>&cmd=GetMergedSequences&job='+job.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;
  }
  return response.mergedSequences;

}

function outcomeOnChange()
{
  var frm = document.forms['reggie']; 
  var failed = document.getElementById('outcomeFailed').checked;
  frm.flagPools.disabled = !failed;
  
  var job = frm.demuxJobs[frm.demuxJobs.selectedIndex].job;
  var mergedSequences = job.mergedSequences;
  
  for (var mergeNo = 0; mergeNo < mergedSequences.length; mergeNo++)
  {
    var merge = mergedSequences[mergeNo];
    if (frm['flag.'+merge.id])
    {
      frm['flag.'+merge.id].disabled = failed;
    }
    frm['align.'+merge.id].disabled = failed;
  }
  
}


function goRegister()
{
  if (!step2IsValid()) return;
  var failed = document.getElementById('outcomeFailed').checked;

  var frm = document.forms['reggie'];
  Main.addClass(document.getElementById('step.2.section'), 'disabled');
  
  
  Main.hide('goregister');
  Main.hide('gocancel');
  Main.hide('gonext.message');
  
  var submitInfo = {};
  
  submitInfo.failed = failed;
  submitInfo.flagPools = !frm.flagPools.disabled && frm.flagPools.checked ? true : false;
  
  var job = frm.demuxJobs[frm.demuxJobs.selectedIndex].job;
  var demuxedSequences = job.demuxedSequences;
  var mergedSequences = job.mergedSequences;
  
  var demux = [];
  submitInfo.demuxedSequences = demux;
  for (var demuxNo = 0; demuxNo < demuxedSequences.length; demuxNo++)
  {
    var dx = demuxedSequences[demuxNo];
    var tmp = {};
    tmp.id = dx.id;
    demux[demux.length] = tmp;
  }
  
  var merged = [];
  submitInfo.mergedSequences = merged;
  for (var mergeNo = 0; mergeNo < mergedSequences.length; mergeNo++)
  {
    var merge = mergedSequences[mergeNo];
    var tmp = {};
    tmp.id = merge.id;
    tmp.flag = frm['flag.'+merge.id] && frm['flag.'+merge.id].checked;
    tmp.align = frm['align.'+merge.id].checked;
    tmp.comment = frm['comment.'+merge.id].value;
    merged[merged.length] = tmp;
  }
  
  if (debug) Main.debug(JSON.stringify(submitInfo));
  var url = '../DemuxMerge.servlet?ID=<%=ID%>&cmd=RegisterDemuxAndMerge';
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Performing registration...');
    request.open("POST", url, false);
    request.send(JSON.stringify(submitInfo));
  }
  finally
  {
    hideLoadingAnimation();
  }
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);
  
  if (response.messages && response.messages.length > 0)
  {
    var msg = '<ul>';
    for (var i = 0; i < response.messages.length; i++)
    {
      var msgLine = response.messages[i];
      if (msgLine.indexOf('[Warning]') >= 0)
      {
        msg += '<li class="warning">' + msgLine.replace('[Warning]', '');
      }
      else
      {
        msg += '<li>' + msgLine;
      }
    }
    msg += '</ul>';
    setInnerHTML('messages', msg);
    Main.show('messages');
  }
  
  if (response.status != 'ok')
  {
    Main.addClass(document.getElementById('messages'), 'failure');
    setFatalError(response.message);
    return false;
  }

  Main.show('gorestart'); 

  
}



</script>
<style>
.fc-info
{
  background-color: #F4F4F4;
  border-top: 1em solid transparent;
}

.fc-info .subprompt
{
  font-weight: normal;
  padding-left: 2em;
  text-align: left;
}

.fc-info .input
{
  font-style: italic;
}

#fc-info-table
{
  border-collapse: collapse;
  background-color: #FFFFFF;
  border: 1px solid #A0A0A0;
}

#fc-info-table td, #fc-info-table th
{
  padding: 1px 4px 1px 4px;
  text-align: center;
  border-left: 1px dotted #A0A0A0;
  border-right: 1px dotted #A0A0A0;
}

tr.highlight
{
  border-top: 1px dotted #A0A0A0;
}

.dottedleft
{
  border-left: 1px dotted #A0A0A0;
}

#mergedSequencesTable
{
  width: 100%; 
  border-collapse: collapse;
}

#mergedSequencesTable td
{
  text-align: center;
  min-width: 4.5em;
}

#mergedSequencesTable tbody td
{
  padding-top: 1px;
  padding-bottom: 1px;
}

#mergedSequencesTable .italic
{
  font-style: italic;
}

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

  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="Confirm demux and merge ended" 
    /></p:path>

  <div class="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 id="step.1.section" class="stepform">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Select demux job</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table style="border-collapse: collapse;">
      <tr valign="top">
        <td class="prompt">Demux jobs</td>
        <td class="input"><select class="required" style="width:90%;" 
            name="seqRuns" id="demuxJobs" onchange="demuxJobOnChange()"></select>
        </td>
        <td class="status" id="demuxJobs.status"></td>
        <td class="help"><span id="demuxJobs.message" class="message" style="display: none;"></span>
          Select a demux job. The list contains all demux jobs that has
          ended but has not been confirmed (determined by the absense of AnalysisResult
          annotation on demuxed sequences items).
        </td>
      </tr>
      <tbody class="fc-info">
      <tr valign="top">
        <td class="subprompt">Start date</td>
        <td class="input" id="startDate" colspan="3"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">End date</td>
        <td class="input" id="endDate" colspan="3"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">Status</td>
        <td class="input" id="jobStatus" colspan="3"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">Flow cells</td>
        <td class="input" id="flowCellsInDemux" colspan="3"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">Pools</td>
        <td class="input" id="pools" colspan="3"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">LibPlates</td>
        <td class="input" id="libPlates" colspan="3"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">Comments</td>
        <td class="input" id="comments" colspan="3"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">Warnings</td>
        <td class="input" id="warnings" colspan="3">-</td>
      </tr>
      </tbody>
      </table>
    </td>
  </tr>
  </table>
  </div>
  
  <div id="step.2.section" style="display: none;">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">2</td>
    <td class="steptitle" id="step.2.title">Demux job</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">Outcome</td>
        <td class="input">
          <label><input type="radio" name="outcome" id="outcomeSuccessful" 
            onclick="outcomeOnChange()" checked>Success</label> - continue with alignment<br>
          <label><input type="radio" name="outcome" id="outcomeFailed" 
            onclick="outcomeOnChange()">Failure</label> - no alignment<br>
          <img src="../images/joinbottom.gif"><label><input type="checkbox" name="flagPools" value="1" disabled checked>Flag pools for re-clustering</label>
        </td>
        <td class="status" id="outcome.status"></td>
        <td class="help"><span id="outcome.message" class="message" style="display: none;"></span>
          Select the <b>Success</b> option if the demux was successful and it is possible to continue
          with filtering and alignment of the sequences.
          Select the <b>Failure</b> option if it not possible to continue. 
          Existing pooled libraries can optionally
          be flagged for re-clustering and re-sequencing.
        </td>
      </tr>
      </table>
      
      <div id="mergedSequences">
        
      </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="messages" 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)" style="display: none;"/></td>
      <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" onclick="goNext(true)"/></td>
      <td><base:button id="goregister" title="Register" image="<%=home+"/images/import.png"%>" onclick="goRegister()" 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();
}
%>