source: trunk/www/biomaterials/wizards/place_on_plate.jsp @ 5557

<%-- $Id: place_on_plate.jsp 5557 2011-01-28 11:48:15Z nicklas $
  ------------------------------------------------------------------
  Copyright (C) 2010 Nicklas Nordborg

  This file is part of BASE - BioArray Software Environment.
  Available at http://base.thep.lu.se/

  BASE is free software; you can redistribute it and/or
  modify it under the terms of the GNU General Public License
  as published by the Free Software Foundation; either version 3
  of the License, or (at your option) any later version.

  BASE is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with BASE. If not, see <http://www.gnu.org/licenses/>.
  ------------------------------------------------------------------

  @author Nicklas
--%>
<%@ page pageEncoding="UTF-8" session="false"
  import="net.sf.basedb.core.BioPlateEvent"
  import="net.sf.basedb.core.BioPlateEventType"
  import="net.sf.basedb.core.MeasuredBioMaterial"
  import="net.sf.basedb.core.Hardware"
  import="net.sf.basedb.core.Protocol"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.Item"
  import="net.sf.basedb.core.ItemContext"
  import="net.sf.basedb.core.ItemQuery"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.query.Restrictions"
  import="net.sf.basedb.core.query.Hql"
  import="net.sf.basedb.util.Values"
  import="net.sf.basedb.util.formatter.Formatter"
  import="net.sf.basedb.clients.web.formatter.FormatterFactory"
  import="net.sf.basedb.clients.web.formatter.FormatterSettings"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.util.HTML"
  import="java.util.List"
  import="java.util.Date"
  import="java.util.Collections"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
<%
final Item itemType = Item.valueOf(request.getParameter("itemType"));
//final String subContext = Values.getString(request.getParameter("subcontext"), "");
final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
//final ItemContext cc = Base.getAndSetCurrentContext(sc, itemType, subContext, null, null);
final ItemContext cc = sc.getCurrentContext(Item.BIOPLATEEVENT, BioPlateEventType.PLACE_ON_PLATE);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final DbControl dc = sc.newDbControl();
try
{
  // Load recently used items
  List<Hardware> recentHardware = (List<Hardware>)cc.getRecent(dc, Item.HARDWARE);
  List<Protocol> recentProtocols = (List<Protocol>)cc.getRecent(dc, Item.PROTOCOL);
  
  ItemQuery<MeasuredBioMaterial> query = (ItemQuery<MeasuredBioMaterial>)cc.getQuery();
  List<MeasuredBioMaterial> bioMaterial = Collections.emptyList();
  if (query != null)
  {
    query.restrict(Restrictions.eq(Hql.property("bioWell"), null));
    query.setMaxResults(-1);
    query.setFirstResult(0);
    bioMaterial = query.list(dc);
    cc.setQuery(null);
  }
  final String clazz = "class=\"text\"";
  final String requiredClazz = "class=\"text required\"";
  final Formatter<Date> dateFormatter = FormatterFactory.getDateFormatter(sc);
  final String dateFormat = FormatterSettings.getDateFormat(sc);
  final String jsDateFormat = HTML.javaScriptEncode(dateFormat);
  final String htmlDateFormat = HTML.encodeTags(dateFormat);
  final boolean autoSelectUnmappedItem = Values.getBoolean(sc.getUserClientSetting("place-on-plate.auto-select-unmapped-item"), true);
  %>
  <base:page type="popup" title="Place biomaterial on plate">
  <base:head scripts="ajax.js,plate.js,js-draw.js,json2.js" styles="plate.css,toolbar.css">
    <script language="javascript">
  
    // We have one list of items and one bioplate
    var itemList;
    var plate;
    
    // We can select one item and one well
    var selectedItem;
    var selectedWell;

    // For drawing
    var graphics;
    var pen;
    var selectedPen;
    
    function init()
    {
      // Initialize graphics
      graphics = new jsGraphics(document.getElementById('canvas'));
      pen = new jsPen();
      selectedPen = new jsPen(new jsColor('445577'), 2);
      // Create the list of items
      itemList = new ItemList('itemlist');
      <%
      for (MeasuredBioMaterial bm : bioMaterial)
      {
        String itemId = Integer.toString(bm.getId());
        %>
        itemList.addItem(<%=itemId%>, '<%=HTML.javaScriptEncode(bm.getName())%>');
        <%
      }
      %>
    }

    /**
      Draw a link between the item and it's mapped well.
    */
    function itemOnMouseOver(itemId)
    {
      var item = itemList.getItem(itemId);
      if (!item) return;
      item.drawLink(graphics, pen, false);
    }

    /**
      Hide the link between the item and it's mapped well, 
      unless the item (or it's mapped well) is selected.
    */
    function itemOnMouseOut(itemId)
    {
      var item = itemList.getItem(itemId);
      if (!item) return;
      if (!item.selected && !(item.mappedWell && item.mappedWell.selected)) 
      {
        item.hideLink(graphics);
      }
    }
    
    /**
      Draw a link between the well and it's mapped item.
    */
    function wellOnMouseOver(row, column)
    {
      var well = plate.getWell(row, column);
      if (!well || !well.mappedItem) return;
      well.mappedItem.scrollIntoView();
      well.mappedItem.drawLink(graphics, pen, false);
    }
  
    /**
      Hide the link between the well and it's mapped item, 
      unless the well (or it's mapped item) is selected.
    */
    function wellOnMouseOut(row, column)
    {
      var well = plate.getWell(row, column);
      if (!well || !well.mappedItem) return;
      if (!well.selected && !(well.mappedItem && well.mappedItem.selected)) 
      {
        well.hideLink(graphics);
      }
    }

    /**
      Select the item that is clicked on. The currently selected item
      is de-selected. If the clicked item is the same as the currently 
      selected item no new item is selected. If a well is already selected
      a link is made between the well and the newly selected item.
    */
    function itemOnClick(itemId)
    {
      var item = itemList.getItem(itemId);

      // De-select the currently selected item
      if (selectedItem) 
      {
        selectedItem.setSelected(false);
        if (item == selectedItem)
        {
          // Re-draw link with regular pen (eg. same as onmouseover)
          selectedItem.drawLink(graphics, pen, true);
          selectedItem = null;
          return;
        }
        else
        {
          selectedItem.hideLink(graphics);
        }
      }
      
      // Select the new item and draw link to mapped well
      selectedItem = item;
      selectedItem.setSelected(true);
      selectedItem.drawLink(graphics, selectedPen, true);

      // Map the item to the selected well
      if (selectedWell && selectedItem)
      {
        placeSelectedOnPlate();
      }
    }
    
    /**
      Select the well that is clicked on. The currently selected well is
      de-selected. If the clicked well is the same as the currently 
      selected well no new well is selected. If an item is already selected
      a link is made between the item and the newly selected well.
    */
    function wellOnClick(row, column)
    {
      var well = plate.getWell(row, column);

      // De-select the currently selected well
      if (selectedWell) 
      {
        selectedWell.setSelected(false);
        if (well == selectedWell)
        {
          // Re-draw link with regular pen (eg. same as onmouseover)
          selectedWell.drawLink(graphics, pen, true);
          selectedWell = null;
          return;
        }
        else
        {
          selectedWell.hideLink(graphics);
        }
      }
      
      selectedWell = well;
      selectedWell.setSelected(true);
      selectedWell.drawLink(graphics, selectedPen, true);

      if (selectedWell && selectedItem)
      {
        var nextItem = document.forms['main'].autoSelectUnmappedItem.checked ? 
            itemList.nextUnmappedItem(selectedItem) : null;
        placeSelectedOnPlate();
        if (nextItem)
        {
          nextItem.setSelected(true);
          nextItem.scrollIntoView();
          selectedItem = nextItem;
        }
      }
    }
    
    /**
      Redraw the link to the selected item/well when the item list scrolls.
    */
    function onItemListScroll()
    {
      var item = selectedItem;
      if (!item && selectedWell) item = selectedWell.mappedItem;
      if (item) item.drawLink(graphics, selectedPen, true);
    }
    
    /**
      Map the selected item with the selected well. Hide and
      redraw links as needed.
    */
    function placeSelectedOnPlate()
    {
      // Hide any links that are currently displayed
      selectedItem.hideLink(graphics);
      selectedWell.hideLink(graphics);
      
      // Map to the new well and draw link
      if (selectedItem.mappedWell != selectedWell)
      {
        selectedItem.mapToWell(selectedWell);
        selectedItem.scrollIntoView();
        selectedItem.drawLink(graphics, pen, true);
      }
      else
      {
        selectedItem.unmapWell();
      }
      
      // De-select everything
      selectedItem.setSelected(false);
      selectedWell.setSelected(false);
      selectedItem = null;
      selectedWell = null;
    }
    
    /**
      Remove all mappings that have been made so far.
    */
    function clearMapping()
    {
      if (!plate)
      {
        alert('No destination plate has been selected');
        return;
      }
      if (!confirm('This will remove all placed biomaterial. Continue?')) return;
      itemList.unmapAll(graphics);
      if (selectedItem)
      {
        selectedItem.setSelected(false);
        selectedItem = null;
      }
      if (selectedWell)
      {
        selectedWell.setSelected(false);
        selectedWell = null;
      }
    }
  
    /**
      Automatically place unplaced biomaterial on the plate filling rows first.
      Biomaterial and wells that have already been mapped are skipped.
    */
    function placeByRow()
    {
      if (!plate)
      {
        alert('No destination plate has been selected');
        return;
      }
      var index = 0;
      var numItems = itemList.items.length;
      for (var row = 0; row < plate.rows; row++)
      {
        for (var column = 0; column < plate.columns; column++)
        {
          var well = plate.getWell(row, column);
          if (!well.mappedItem && !well.locked)
          {
            var mapped = false;
            while (index < itemList.items.length && !mapped)
            {
              var item = itemList.items[index];
              index++;
              if (!item.mappedWell)
              {
                item.mapToWell(well);
                mapped = true;
              }
            }
          }
        }
      }
    }
    
    /**
      Automatically place unplaced biomaterial on the plate filling columns first.
      Biomaterial and wells that have already been mapped are skipped.
    */
    function placeByColumn()
    {
      if (!plate)
      {
        alert('No destination plate has been selected');
        return;
      }
      var index = 0;
      var numItems = itemList.items.length;
      for (var column = 0; column < plate.columns; column++)
      {
        for (var row = 0; row < plate.rows; row++)
        {
          var well = plate.getWell(row, column);
          if (!well.mappedItem && !well.locked)
          {
            var mapped = false;
            while (index < itemList.items.length && !mapped)
            {
              var item = itemList.items[index];
              index++;
              if (!item.mappedWell)
              {
                item.mapToWell(well);
                mapped = true;
              }
            }
          }
        }
      }
    }
    
    function selectBioPlateOnClick()
    {
      if (plate && !confirm('This will remove all placed biomaterial. Continue?')) return;
      
      var url = '../bioplates/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setBioPlateCallback';
      url += '&resetTemporary=1&tmpfilter:INT:bioPlateType.bioMaterialType=|<%=itemType.getValue()%>'
      Main.openPopup(url, 'SelectBioPlate', 1000, 700);
    }

    function setBioPlateCallback(bioPlateId, name)
    {
      var request = Ajax.getXmlHttpRequest();
      var url = '../bioplates/ajax.jsp?ID=<%=ID%>&cmd=GetFullPlateInfo&item_id=' + bioPlateId;
      request.open("GET", url, false); 
      // NOTE! 'false' causes code to wait for the response. aka. 'Synchronous AJAX' or SJAX.
      request.send(null);
      var plateInfo = Ajax.parseJsonResponse(request.responseText);
      if (plateInfo.status != 'ok')
      {
        alert(plateInfo.message);
        return false;
      }
      
      // Get plate and well information from the AJAX response
      var rows = plateInfo.rows;
      var columns = plateInfo.columns;
      
      var bigPlate = rows > 12 || columns > 18;
      var plateClass = bigPlate ? 'plate bigplate' : 'plate';

      // Remove existing mapping
      itemList.unmapAll(graphics);

      // Create plate and wells
      plate = new Plate('dest', plateInfo.id, plateInfo.name, rows, columns);
      for (var i = 0; i < plateInfo.wells.length; i++)
      {
        var wellInfo = plateInfo.wells[i];
        var bmInfo = wellInfo.bioMaterial;
        var row = parseInt(wellInfo.row);
        var col = parseInt(wellInfo.column);
        var well = plate.getWell(row, col);
        well.locked = !wellInfo.canAdd || bmInfo;
        well.name = bmInfo ? bmInfo.name : '';
      }
      
      document.getElementById('plate.name').innerHTML = Main.encodeTags(name);
      
      // Create html table representing the bioplate
      var html = '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
      html += '<tr><td></td>';
      for (var c = 0; c < plate.columns; c++)
      {
        html += '<td class="columnheader">' + (c+1) + '</td>';
      }
      html += '</tr>';
      for (var r = 0; r < plate.rows; r++)
      {
        html += '<tr><td class="rowheader">' + Plates.toAlphaCoordinate[r] + '</td>';
        for (var c = 0; c < plate.columns; c++)
        {
          var well = plate.getWell(r, c);
          var cls = 'well';
          var onclick = '';
          var onmouseover = '';
          var onmouseout = '';
          var title = '';
          if (well.locked) 
          {
            cls+= ' unmappable';
            if (well.name) 
            {
              title = 'This well is used by: ' + Main.encodeTags(well.name);
            }
            else
            {
              title = 'This well has already been used';
            }
          }
          else
          {
            cls += ' empty editable';
            onclick = ' onclick="wellOnClick('+r+','+c+')""';
            onmouseover = ' onmouseover=wellOnMouseOver('+r+','+c+')';
            onmouseout = ' onmouseout=wellOnMouseOut('+r+','+c+')';
          }
          html += '<td id="dest.'+r+'.'+c+'" class="' + cls + '"' + onclick + onmouseover + onmouseout+' title="'+title+'"></td>';
        }
        html += '</tr>';
      }
      html += '</table>';
      document.getElementById('plate').innerHTML = html;
      Main.show('toolbar.mappings');
    }
    
    /**
      Save the event.
    */
    function doPlaceOnPlate()
    {
      if (!plate)
      {
        alert('No plate has been selected');
        return;
      }
      var frm = document.forms['main'];
      if (Main.trimString(frm.name.value) == '')
      {
        alert("You must enter a name for the event.");
        frm.name.focus();
        return;
      }
      
      frm.plate_id.value = plate.id;
      frm.rows.value = plate.rows;
      frm.columns.value = plate.columns;
      
      var numMapped = 0;
      for (var row = 0; row < plate.rows; row++)
      {
        for (var column = 0; column < plate.columns; column++)
        {
          var well = plate.getWell(row, column);
          
          if (well.mappedItem)
          {
            Forms.createHidden(frm, 'well.' + row + '.' + column, well.mappedItem.id);
            numMapped++;
          }
        }
      }
      
      if (numMapped == 0)
      {
        alert('No biomaterial has been mapped to wells');
        return;
      }
      
      frm.submit();
    }
    
    function selectHardwareOnClick()
    {
      var frm = document.forms['main'];
      var url = '../../admin/hardware/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setHardwareCallback';
      if (frm.hardware_id.length > 1) 
      {
        var id = Math.abs(parseInt(frm.hardware_id[1].value));        
        url += '&item_id='+id;
      }
      url += '&resetTemporary=1';
      Main.openPopup(url, 'SelectHardware', 1000, 700); 
    }
    function setHardwareCallback(id, name)
    {
      var frm = document.forms['main'];
      var list = frm.hardware_id;
      if (list.length < 2 || list[1].value == '0') // >
      {
        Forms.addListOption(list, 1, new Option());
      }
      list[1].value = id;
      list[1].text = name;
      list.selectedIndex = 1;
    }
  
    function selectProtocolOnClick()
    {
      var frm = document.forms['main'];
      var url = '../../admin/protocols/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setProtocolCallback';
      if (frm.protocol_id.length > 1) 
      {
        var id = Math.abs(parseInt(frm.protocol_id[1].value));        
        url += '&item_id='+id;
      }
      url += '&resetTemporary=1';
      Main.openPopup(url, 'SelectProtocol', 1000, 700); 
    }
    function setProtocolCallback(id, name)
    {
      var frm = document.forms['main'];
      var list = frm.protocol_id;
      if (list.length < 2 || list[1].value == '0') // >
      {
        Forms.addListOption(list, 1, new Option());
      }
      list[1].value = id;
      list[1].text = name;
      list.selectedIndex = 1;
    }
    </script>
  </base:head>
  <base:body onload="init()">
    <div id="canvas"></div>
    <h3>Place biomaterial on plate</h3>
    <div class="boxedbottom" style="height: <%=(int)(scale*500)%>px; padding: 0px;">
      <form name="main" action="index.jsp" method="post">
      <input type="hidden" name="ID" value="<%=ID%>">
      <input type="hidden" name="cmd" value="PlaceOnPlate">
      <input type="hidden" name="itemType" value="<%=itemType.name()%>">
      <input type="hidden" name="plate_id" value="">
      <input type="hidden" name="rows" value="">
      <input type="hidden" name="columns" value="">
      
    <%
    if (bioMaterial.size() == 0)
    {
      %>
      <div class="error">
      No biomaterial selected. Please close this window and select one or more items that
      are not already placed on a plate.
      </div>
      <%
    }
    else
    {
      %>
      <table cellspacing="0" border="0" width="100%" style="background: #e0e0e0; padding-bottom: 6px;">
      <tr valign="top">
        <td style="width: 50%;">
          <table class="form" cellspacing=0>
          <tr>
            <td class="prompt" style="width: 90px;">Event name</td>
            <td><input <%=requiredClazz%> type="text" name="name" 
              value="Place biomaterial on plate" 
              size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
          </tr>
          <tr>
            <td class="prompt">Event date</td>
            <td>
              <table border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td>
                <input <%=clazz%> type="text" name="event_date" 
                  value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>" 
                  size="20" maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
                &nbsp;
              </td>
              <td>
              <base:button 
                onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
                image="calendar.png"
                title="Calendar&hellip;" 
                tooltip="Select a date from a calendar" 
              />
              </td>
              </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="prompt">Protocol</td>
            <td>
              <base:select 
                id="protocol_id"
                clazz="selectionlist"
                required="false"
                current="<%=null%>"
                recent="<%=recentProtocols%>"
                onselect="selectProtocolOnClick()"
              />
            </td>
          </tr>
          <tr>
            <td class="prompt">Hardware</td>
            <td>
              <base:select 
                id="hardware_id"
                clazz="selectionlist"
                required="false"
                current="<%=null%>"
                recent="<%=recentHardware%>"
                onselect="selectHardwareOnClick()"
              />
            </td>
          </tr>
          </table>
        </td>
        <td style="width: 50%;">
          <b>Description</b><br>
          <textarea <%=clazz%> rows="4" cols="40" name="description" wrap="virtual"
            ></textarea>
          <a href="javascript:Main.zoom('Description', 'main', 'description')"
            title="Edit in larger window"><base:icon image="zoom.gif" /></a>
        </td>
      </tr>
      </table>
      
      <tbl:toolbar id="toolbar.mappings" style="border-left: 0px; border-right: 0px;">
        <tbl:button title="Select plate&hellip;" 
          onclick="javascript:selectBioPlateOnClick()" 
          image="place_on_plate.png" 
          tooltip="Select the destination plate"
        />
        <tbl:button title="Clear" 
          onclick="clearMapping()" 
          image="cancel.gif" 
          tooltip="Clear all mapped wells"
        />
        <tbl:button title="Place by row" 
          onclick="placeByRow()" 
          image="place_by_row.png" 
          tooltip="Place remaining items; start with rows"
        />
        <tbl:button title="Place by column" 
          onclick="placeByColumn()" 
          image="place_by_column.png" 
          tooltip="Place remaining items; start with columns"
        />
      </tbl:toolbar>
      
      <table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding: 4px;">
      <tr valign="top">
        <td style="width: 280px;">
          <b>Items to place</b>
          <div id="itemlist" class="biomateriallist" style="height: <%=(int)(scale*320)%>px; width:270px;" onscroll="onItemListScroll()">
          <table border="0" cellspacing="0" cellpadding="0" width="100%">
          <%
          for (MeasuredBioMaterial bm : bioMaterial)
          {
            String itemId = Integer.toString(bm.getId());
            String fullLabel = bm.getName();
            String label = Values.trimString(fullLabel, 30);
            %>
            <tr class="item" id="itemlist.<%=itemId%>" title="<%=fullLabel == label ? "" : HTML.encodeTags(fullLabel)%>"
              onclick="itemOnClick(<%=itemId%>)" onmouseover="itemOnMouseOver(<%=itemId%>)" onmouseout="itemOnMouseOut(<%=itemId%>)">
              <td class="info" id="itemlist.<%=itemId%>.info"></td>
              <td class="label" id="itemlist.<%=itemId%>.label"><%=HTML.encodeTags(label)%></td>
            </tr>
            <%
          }
          %>
          </table>
          </div>
          <input type="checkbox" name="autoSelectUnmappedItem" 
            <%=autoSelectUnmappedItem ? "checked" : ""%> value="1">Auto-select next unmapped item
        </td>
        <td>
          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
            <b>Destination plate:</b> <span id="plate.name"><i>no plate selected</i></span>
            <div id="plate"></div>
          </div>
        </td>
      </tr>
      </table>
      <%
    }
    %>
      </form>
    </div>
    <table align="center">
    <tr>
      <td width="50%"><base:button disabled="<%=bioMaterial.size() == 0 %>" onclick="doPlaceOnPlate()" title="Save" /></td>
      <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
    </tr>
    </table>
    
  </base:body>
  </base:page>
  <%
}
finally
{
  if (dc != null) dc.close();
}
%>