Changeset 5539

Timestamp:

Jan 13, 2011, 8:51:49 AM (11 years ago)

Author:

Nicklas Nordborg

Message:

References #1564: Move biomaterial on plates

Implemented "Place by row" and "Place by column" predefined mappings. Changes to the interface to make it work better with two plates (the plates should be aligned).

File:

• trunk/www/biomaterials/wizards/move_biomaterial.jsp (modified) (8 diffs)

trunk/www/biomaterials/wizards/move_biomaterial.jsp

@@ -239 +239 @@
 
     
+    /**
+      Remove all mappings that have been made so far.
+    */
+    function clearMapping()
+    {
+      if (!destPlate) 
+      {
+        alert('No destination plate has been selected');
+        return;
+      }
+      if (!confirm('This will remove all placed biomaterial. Continue?')) return;
+      sourcePlate.unmapAll();
+    }
+    
+    /**
+      Automatically move remaining biomaterial to the destination plate filling rows first.
+      Biomaterial and wells that have already been mapped are skipped.
+    */
+    function placeByRow()
+    {
+      if (!destPlate) 
+      {
+        alert('No destination plate has been selected');
+        return;
+      }
+      var srcRow = 0;
+      var srcCol = 0;
+      for (var destRow = 0; destRow < destPlate.rows; destRow++)
+      {
+        for (var destCol = 0; destCol < destPlate.columns; destCol++)
+        {
+          var destWell = destPlate.getWell(destRow, destCol);
+          if (!destWell.mappedWell && !destWell.locked)
+          {
+            var mapped = false;
+            var srcWell = sourcePlate.getWell(srcRow, srcCol);
+            while (srcWell && !mapped)
+            {
+              if (srcWell.id && !srcWell.locked && !srcWell.mappedWell)
+              {
+                srcWell.mapToWell(destWell);
+                mapped = true;
+              }
+              else
+              {
+                srcCol++;
+                if (srcCol >= sourcePlate.columns)
+                {
+                  srcCol = 0;
+                  srcRow++;
+                }
+                srcWell = sourcePlate.getWell(srcRow, srcCol);
+              }
+            }
+          }
+        }
+      }
+    }
+  
+    /**
+      Automatically move remaining biomaterial to the destination plate filling columns first.
+      Biomaterial and wells that have already been mapped are skipped.
+    */
+    function placeByColumn()
+    {
+      if (!destPlate) 
+      {
+        alert('No destination plate has been selected');
+        return;
+      }
+      var srcRow = 0;
+      var srcCol = 0;
+      for (var destCol = 0; destCol < destPlate.columns; destCol++)
+      {
+        for (var destRow = 0; destRow < destPlate.rows; destRow++)
+        {
+          var destWell = destPlate.getWell(destRow, destCol);
+          if (!destWell.mappedWell && !destWell.locked)
+          {
+            var mapped = false;
+            var srcWell = sourcePlate.getWell(srcRow, srcCol);
+            while (srcWell && !mapped)
+            {
+              if (srcWell.id && !srcWell.locked && !srcWell.mappedWell)
+              {
+                srcWell.mapToWell(destWell);
+                mapped = true;
+              }
+              else
+              {
+                srcRow++;
+                if (srcRow >= sourcePlate.rows)
+                {
+                  srcCol++;
+                  srcRow = 0;
+                }
+                srcWell = sourcePlate.getWell(srcRow, srcCol);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    
     function selectBioPlateOnClick()
     {
@@ -292 +397 @@
         well.id = wellInfo['bm.id'];
         well.name = wellInfo['bm.name'];
-        well.locked = isSourcePlate ? wellInfo['well.can-clear'] == '0' : wellInfo['well.can-add'] == '0';
+        well.locked = isSourcePlate ? wellInfo['well.can-clear'] == '0' : wellInfo['well.can-add'] == '0' || well.id;
       }
       
@@ -338 +443 @@
           else
           {
-            // We only add biomaterial to destination well if it is empty and not locked
-            if (well.id || well.locked)
+            // We only add biomaterial to destination well if it is not locked
+            if (well.locked)
             {
               cls += ' unmappable';
@@ -351 +456 @@
             }
           }
-          /*
-          if (well.id) 
-          {
-            if (isSourcePlate && !well.locked)
-            {
-              cls += ' filled editable';
-              onclick = ' onclick="sourceWellOnClick('+r+','+c+')""';
-              onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
-              onmouseout = ' onmouseout=sourceWellOnMouseOut('+r+','+c+')';
-            }
-            else
-            {
-              if (isSourcePlate)
-              {
-                cls+= ' filled locked';
-              }
-              else
-              {
-                cls += ' unmappable';
-              }
-            }
-            if (well.name) title = Main.encodeTags(well.name);
-          }
-          else
-          {
-            if (isSourcePlate)
-            {
-              cls += ' empty';
-            }
-            else
-            {
-              cls += ' empty editable';
-              onclick = ' onclick="destWellOnClick('+r+','+c+')""';
-              onmouseover = ' onmouseover=destWellOnMouseOver('+r+','+c+')';
-              onmouseout = ' onmouseout=destWellOnMouseOut('+r+','+c+')';
-            }
-          }
-          */
           html += '<td id="'+prefix+'.'+r+'.'+c+'" class="' + cls + '"' + onclick + onmouseover + onmouseout+' title="'+title+'"></td>';
         }
@@ -405 +472 @@
         document.getElementById('plate.dest.name').innerHTML = Main.encodeTags(name);
         destPlate = plate;
+        Main.show('toolbar.mappings');
       }
     }
@@ -454 +522 @@
     }
     
-    function showMoreEventProperties()
-    {
-      Main.show('moreeventproperties');
-      Main.hide('more');
-    }
-    
-    function hideMoreEventProperties()
-    {
-      Main.hide('moreeventproperties');
-      Main.show('more');
-    }
 
     function selectHardwareOnClick()
@@ -520 +577 @@
     <div id="canvas"></div>
     <h3>Move biomaterial to plate</h3>
-    <div class="boxedbottom" style="height: <%=(int)(scale*480)%>px; overflow: auto:">
+    <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%>">
@@ -528 +585 @@
       <input type="hidden" name="rows" value="">
       <input type="hidden" name="columns" value=""> 
-
-      <table cellspacing="0" border="0" width="100%">
+      
+      <table cellspacing="0" border="0" width="100%" style="background: #e0e0e0; padding-bottom: 6px;">
       <tr valign="top">
-        <td>
-          <table class="form" cellspacing=0>
-          <tr>
-            <td class="prompt" style="width: 90px;">Event name</td>
-            <td><input <%=requiredClazz%> type="text" name="name" 
-              value="Move biomaterial" 
-              size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
-          </tr>
-          <tr>
-            <td class="prompt">Event date</td>
+      <td>
+        <table class="form" cellspacing="0">
+        <tr>
+          <td class="prompt" style="width: 90px;">Event name</td>
+          <td><input <%=requiredClazz%> type="text" name="name" 
+            value="Move biomaterial" 
+            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>
-              <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>
+              <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>
-          </tr>
-          <tr>
-            <td class="prompt">Protocol</td>
             <td>
-              <base:select 
-                id="protocol_id"
-                clazz="selectionlist"
-                required="false"
-                current="<%=null%>"
-                recent="<%=recentProtocols%>"
-                onselect="selectProtocolOnClick()"
-              />
+            <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>
-          <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>
-          <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>
-      
-      <tr>
-        <td><b>Source plate</b> (<span id="plate.src.name"></span>)</td>
-        <td><b>Destination plate</b> (<span id="plate.dest.name">no plate selected</span>) <a href="javascript:selectBioPlateOnClick()">Select plate...</a></td>
-      </tr>
+            </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>
+        <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="move_to_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: 50%;">
-          <div id="plate.src"></div>
+          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
+            <b>Source plate:</b> <span id="plate.src.name"></span>
+            <div id="plate.src"></div>
+          </div>
         </td>
         <td style="width: 50%;">
-          <div style="height: <%=(int)(scale*400)%>px; overflow: auto;">
-          
-          <tbl:toolbar id="toolbar.mappings" style="display: none; margin-top: 6px;">
-            <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>
-          <div id="plate.dest"></div>
+          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
+            <b>Destination plate:</b> <span id="plate.dest.name"><i>not selected</i></span>
+            <div id="plate.dest"></div>
           </div>
         </td>
       </tr>
       </table>
-
-      </form>
     </div>
+    </form>
+
     <table align="center">
     <tr>