Changeset 5539


Ignore:
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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/biomaterials/wizards/move_biomaterial.jsp

    r5538 r5539  
    239239
    240240   
     241    /**
     242      Remove all mappings that have been made so far.
     243    */
     244    function clearMapping()
     245    {
     246      if (!destPlate)
     247      {
     248        alert('No destination plate has been selected');
     249        return;
     250      }
     251      if (!confirm('This will remove all placed biomaterial. Continue?')) return;
     252      sourcePlate.unmapAll();
     253    }
     254   
     255    /**
     256      Automatically move remaining biomaterial to the destination plate filling rows first.
     257      Biomaterial and wells that have already been mapped are skipped.
     258    */
     259    function placeByRow()
     260    {
     261      if (!destPlate)
     262      {
     263        alert('No destination plate has been selected');
     264        return;
     265      }
     266      var srcRow = 0;
     267      var srcCol = 0;
     268      for (var destRow = 0; destRow < destPlate.rows; destRow++)
     269      {
     270        for (var destCol = 0; destCol < destPlate.columns; destCol++)
     271        {
     272          var destWell = destPlate.getWell(destRow, destCol);
     273          if (!destWell.mappedWell && !destWell.locked)
     274          {
     275            var mapped = false;
     276            var srcWell = sourcePlate.getWell(srcRow, srcCol);
     277            while (srcWell && !mapped)
     278            {
     279              if (srcWell.id && !srcWell.locked && !srcWell.mappedWell)
     280              {
     281                srcWell.mapToWell(destWell);
     282                mapped = true;
     283              }
     284              else
     285              {
     286                srcCol++;
     287                if (srcCol >= sourcePlate.columns)
     288                {
     289                  srcCol = 0;
     290                  srcRow++;
     291                }
     292                srcWell = sourcePlate.getWell(srcRow, srcCol);
     293              }
     294            }
     295          }
     296        }
     297      }
     298    }
     299 
     300    /**
     301      Automatically move remaining biomaterial to the destination plate filling columns first.
     302      Biomaterial and wells that have already been mapped are skipped.
     303    */
     304    function placeByColumn()
     305    {
     306      if (!destPlate)
     307      {
     308        alert('No destination plate has been selected');
     309        return;
     310      }
     311      var srcRow = 0;
     312      var srcCol = 0;
     313      for (var destCol = 0; destCol < destPlate.columns; destCol++)
     314      {
     315        for (var destRow = 0; destRow < destPlate.rows; destRow++)
     316        {
     317          var destWell = destPlate.getWell(destRow, destCol);
     318          if (!destWell.mappedWell && !destWell.locked)
     319          {
     320            var mapped = false;
     321            var srcWell = sourcePlate.getWell(srcRow, srcCol);
     322            while (srcWell && !mapped)
     323            {
     324              if (srcWell.id && !srcWell.locked && !srcWell.mappedWell)
     325              {
     326                srcWell.mapToWell(destWell);
     327                mapped = true;
     328              }
     329              else
     330              {
     331                srcRow++;
     332                if (srcRow >= sourcePlate.rows)
     333                {
     334                  srcCol++;
     335                  srcRow = 0;
     336                }
     337                srcWell = sourcePlate.getWell(srcRow, srcCol);
     338              }
     339            }
     340          }
     341        }
     342      }
     343    }
     344
     345   
    241346    function selectBioPlateOnClick()
    242347    {
     
    292397        well.id = wellInfo['bm.id'];
    293398        well.name = wellInfo['bm.name'];
    294         well.locked = isSourcePlate ? wellInfo['well.can-clear'] == '0' : wellInfo['well.can-add'] == '0';
     399        well.locked = isSourcePlate ? wellInfo['well.can-clear'] == '0' : wellInfo['well.can-add'] == '0' || well.id;
    295400      }
    296401     
     
    338443          else
    339444          {
    340             // We only add biomaterial to destination well if it is empty and not locked
    341             if (well.id || well.locked)
     445            // We only add biomaterial to destination well if it is not locked
     446            if (well.locked)
    342447            {
    343448              cls += ' unmappable';
     
    351456            }
    352457          }
    353           /*
    354           if (well.id)
    355           {
    356             if (isSourcePlate && !well.locked)
    357             {
    358               cls += ' filled editable';
    359               onclick = ' onclick="sourceWellOnClick('+r+','+c+')""';
    360               onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
    361               onmouseout = ' onmouseout=sourceWellOnMouseOut('+r+','+c+')';
    362             }
    363             else
    364             {
    365               if (isSourcePlate)
    366               {
    367                 cls+= ' filled locked';
    368               }
    369               else
    370               {
    371                 cls += ' unmappable';
    372               }
    373             }
    374             if (well.name) title = Main.encodeTags(well.name);
    375           }
    376           else
    377           {
    378             if (isSourcePlate)
    379             {
    380               cls += ' empty';
    381             }
    382             else
    383             {
    384               cls += ' empty editable';
    385               onclick = ' onclick="destWellOnClick('+r+','+c+')""';
    386               onmouseover = ' onmouseover=destWellOnMouseOver('+r+','+c+')';
    387               onmouseout = ' onmouseout=destWellOnMouseOut('+r+','+c+')';
    388             }
    389           }
    390           */
    391458          html += '<td id="'+prefix+'.'+r+'.'+c+'" class="' + cls + '"' + onclick + onmouseover + onmouseout+' title="'+title+'"></td>';
    392459        }
     
    405472        document.getElementById('plate.dest.name').innerHTML = Main.encodeTags(name);
    406473        destPlate = plate;
     474        Main.show('toolbar.mappings');
    407475      }
    408476    }
     
    454522    }
    455523   
    456     function showMoreEventProperties()
    457     {
    458       Main.show('moreeventproperties');
    459       Main.hide('more');
    460     }
    461    
    462     function hideMoreEventProperties()
    463     {
    464       Main.hide('moreeventproperties');
    465       Main.show('more');
    466     }
    467524
    468525    function selectHardwareOnClick()
     
    520577    <div id="canvas"></div>
    521578    <h3>Move biomaterial to plate</h3>
    522     <div class="boxedbottom" style="height: <%=(int)(scale*480)%>px; overflow: auto:">
     579    <div class="boxedbottom" style="height: <%=(int)(scale*500)%>px; padding: 0px;">
    523580      <form name="main" action="index.jsp" method="post">
    524581      <input type="hidden" name="ID" value="<%=ID%>">
     
    528585      <input type="hidden" name="rows" value="">
    529586      <input type="hidden" name="columns" value="">
    530 
    531       <table cellspacing="0" border="0" width="100%">
     587     
     588      <table cellspacing="0" border="0" width="100%" style="background: #e0e0e0; padding-bottom: 6px;">
    532589      <tr valign="top">
    533         <td>
    534           <table class="form" cellspacing=0>
    535           <tr>
    536             <td class="prompt" style="width: 90px;">Event name</td>
    537             <td><input <%=requiredClazz%> type="text" name="name"
    538               value="Move biomaterial"
    539               size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
    540           </tr>
    541           <tr>
    542             <td class="prompt">Event date</td>
     590      <td>
     591        <table class="form" cellspacing="0">
     592        <tr>
     593          <td class="prompt" style="width: 90px;">Event name</td>
     594          <td><input <%=requiredClazz%> type="text" name="name"
     595            value="Move biomaterial"
     596            size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
     597        </tr>
     598        <tr>
     599          <td class="prompt">Event date</td>
     600          <td>
     601            <table border="0" cellspacing="0" cellpadding="0">
     602            <tr>
    543603            <td>
    544               <table border="0" cellspacing="0" cellpadding="0">
    545               <tr>
    546               <td>
    547                 <input <%=clazz%> type="text" name="event_date"
    548                   value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
    549                   size="20" maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
    550                 &nbsp;
    551               </td>
    552               <td>
    553               <base:button
    554                 onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
    555                 image="calendar.png"
    556                 title="Calendar&hellip;"
    557                 tooltip="Select a date from a calendar"
    558               />
    559               </td>
    560               </tr>
    561               </table>
     604              <input <%=clazz%> type="text" name="event_date"
     605                value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
     606                size="20" maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
     607              &nbsp;
    562608            </td>
    563           </tr>
    564           <tr>
    565             <td class="prompt">Protocol</td>
    566609            <td>
    567               <base:select
    568                 id="protocol_id"
    569                 clazz="selectionlist"
    570                 required="false"
    571                 current="<%=null%>"
    572                 recent="<%=recentProtocols%>"
    573                 onselect="selectProtocolOnClick()"
    574               />
     610            <base:button
     611              onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
     612              image="calendar.png"
     613              title="Calendar&hellip;"
     614              tooltip="Select a date from a calendar"
     615            />
    575616            </td>
    576           </tr>
    577           <tr>
    578             <td class="prompt">Hardware</td>
    579             <td>
    580               <base:select
    581                 id="hardware_id"
    582                 clazz="selectionlist"
    583                 required="false"
    584                 current="<%=null%>"
    585                 recent="<%=recentHardware%>"
    586                 onselect="selectHardwareOnClick()"
    587               />
    588             </td>
    589           </tr>
    590           </table>
    591         </td>
    592         <td>
    593           <b>Description</b><br>
    594           <textarea <%=clazz%> rows="4" cols="40" name="description" wrap="virtual"
    595             ></textarea>
    596           <a href="javascript:Main.zoom('Description', 'main', 'description')"
    597             title="Edit in larger window"><base:icon image="zoom.gif" /></a>
    598         </td>
    599       </tr>
    600      
    601       <tr>
    602         <td><b>Source plate</b> (<span id="plate.src.name"></span>)</td>
    603         <td><b>Destination plate</b> (<span id="plate.dest.name">no plate selected</span>) <a href="javascript:selectBioPlateOnClick()">Select plate...</a></td>
    604       </tr>
     617            </tr>
     618            </table>
     619          </td>
     620        </tr>
     621        <tr>
     622          <td class="prompt">Protocol</td>
     623          <td>
     624            <base:select
     625              id="protocol_id"
     626              clazz="selectionlist"
     627              required="false"
     628              current="<%=null%>"
     629              recent="<%=recentProtocols%>"
     630              onselect="selectProtocolOnClick()"
     631            />
     632          </td>
     633        </tr>
     634        <tr>
     635          <td class="prompt">Hardware</td>
     636          <td>
     637            <base:select
     638              id="hardware_id"
     639              clazz="selectionlist"
     640              required="false"
     641              current="<%=null%>"
     642              recent="<%=recentHardware%>"
     643              onselect="selectHardwareOnClick()"
     644            />
     645          </td>
     646        </tr>
     647        </table>
     648      </td>
     649      <td>
     650        <b>Description</b><br>
     651        <textarea <%=clazz%> rows="4" cols="40" name="description" wrap="virtual"
     652          ></textarea>
     653        <a href="javascript:Main.zoom('Description', 'main', 'description')"
     654          title="Edit in larger window"><base:icon image="zoom.gif" /></a>
     655      </td>
     656    </tr>
     657    </table>
     658
     659    <tbl:toolbar id="toolbar.mappings" style="border-left: 0px; border-right: 0px;">
     660      <tbl:button title="Select plate&hellip;"
     661          onclick="javascript:selectBioPlateOnClick()"
     662          image="move_to_plate.png"
     663          tooltip="Select the destination plate"
     664        />
     665        <tbl:button title="Clear"
     666          onclick="clearMapping()"
     667          image="cancel.gif"
     668          tooltip="Clear all mapped wells"
     669        />
     670        <tbl:button title="Place by row"
     671          onclick="placeByRow()"
     672          image="place_by_row.png"
     673          tooltip="Place remaining items; start with rows"
     674        />
     675        <tbl:button title="Place by column"
     676          onclick="placeByColumn()"
     677          image="place_by_column.png"
     678          tooltip="Place remaining items; start with columns"
     679        />
     680      </tbl:toolbar>
     681 
     682      <table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding: 4px;">
    605683      <tr valign="top">
    606684        <td style="width: 50%;">
    607           <div id="plate.src"></div>
     685          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
     686            <b>Source plate:</b> <span id="plate.src.name"></span>
     687            <div id="plate.src"></div>
     688          </div>
    608689        </td>
    609690        <td style="width: 50%;">
    610           <div style="height: <%=(int)(scale*400)%>px; overflow: auto;">
    611          
    612           <tbl:toolbar id="toolbar.mappings" style="display: none; margin-top: 6px;">
    613             <tbl:button title="Clear"
    614               onclick="clearMapping()"
    615               image="cancel.gif"
    616               tooltip="Clear all mapped wells"
    617             />
    618             <tbl:button title="Place by row"
    619               onclick="placeByRow()"
    620               image="place_by_row.png"
    621               tooltip="Place remaining items; start with rows"
    622             />
    623             <tbl:button title="Place by column"
    624               onclick="placeByColumn()"
    625               image="place_by_column.png"
    626               tooltip="Place remaining items; start with columns"
    627             />
    628           </tbl:toolbar>
    629           <div id="plate.dest"></div>
     691          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
     692            <b>Destination plate:</b> <span id="plate.dest.name"><i>not selected</i></span>
     693            <div id="plate.dest"></div>
    630694          </div>
    631695        </td>
    632696      </tr>
    633697      </table>
    634 
    635       </form>
    636698    </div>
     699    </form>
     700
    637701    <table align="center">
    638702    <tr>
Note: See TracChangeset for help on using the changeset viewer.