Changeset 1809


Ignore:
Timestamp:
Jan 25, 2013, 12:38:28 PM (7 years ago)
Author:
Nicklas Nordborg
Message:

References #424, #425 and #456. Restructure the plate-handling javascript so that it is easier to re-use on different pages.

The barcode wizard now display the intended barcodes, but it is still only visual and there is not yet possible to change or save the information.

Location:
extensions/net.sf.basedb.reggie/branches/ticket-422
Files:
1 added
6 edited

Legend:

Unmodified
Added
Removed
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/css/plate.css

    r1807 r1809  
    44.plate
    55{
    6   border: 1px solid #A0A0A0;
     6  border: 1px solid #808080;
    77  background-color: #FFFFFF;
    88}
     
    1919.plate th.pool
    2020{
    21   border-left: 1px solid #A0A0A0;
    22   border-top: 1px solid #A0A0A0;
     21  border-left: 1px solid #808080;
     22  border-top: 1px solid #808080;
    2323  padding-left: 1px;
    2424}
     
    3838.well
    3939{
    40   border-top: 1px solid #E0E0E0;
    41   border-left: 1px solid #E0E0E0;
     40  border-top: 1px dotted #A0A0A0;
     41  border-left: 1px dotted #A0A0A0;
    4242  border-bottom: 1px solid transparent;
    4343  border-right: 1px solid transparent;
     
    5959.well.pool-left
    6060{
    61   border-left-color: #A0A0A0;
    62 }
    63 
    64 /* No left border on the first well on each row */
     61  border-left-color: #808080;
     62  border-left-style: solid;
     63}
     64
     65/* No left border on the first well on each row  */
    6566.well.col-0
    6667{
    6768  border-left: 1px solid transparent;
     69}
     70
     71/* No top border on the first well in each column  */
     72.row-0 .well
     73{
     74  border-top: 1px solid transparent;
    6875}
    6976
     
    121128}
    122129
     130/* Name of extract is in bold */
     131.well .name
     132{
     133  font-weight: bold;
     134}
     135
     136/* Error and warning messages are red */
     137.well .err-msg, .well .warn-msg
     138{
     139  color: #C80000;
     140  font-style: italic;
     141}
     142
    123143/* Display a border around the well when pointing on it with the mouse */
    124144.well:hover
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/libprep/assign_barcode.jsp

    r1806 r1809  
    2929  <link rel="stylesheet" type="text/css" href="../css/plate.css">
    3030  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>
     31  <script language="JavaScript" src="pools.js" type="text/javascript" charset="UTF-8"></script>
     32  <script language="JavaScript" src="plate.js" type="text/javascript" charset="UTF-8"></script>
    3133
    3234<script language="JavaScript">
     
    4951      var bioplate = bioplates[i];
    5052      var option = new Option(bioplate.name, bioplate.id);
     53      option.bioplate = bioplate;
    5154      plates.options[plates.length] = option;
    5255    }
     
    122125  var frm = document.forms['reggie'];
    123126  var cdnaPlateId = frm.bioplate.value;
    124  
     127  var schemaId = frm.bioplate[frm.bioplate.selectedIndex].bioplate.poolSchema;
     128  var schema = PoolSchema.getById(schemaId);
     129  PoolSchema.initList(frm.pool_schema, schemaId);
     130  PoolSchema.initVariantList(frm.barcode_variant, schema);
     131
    125132  var request = Ajax.getXmlHttpRequest();
    126133  try
     
    151158  }
    152159 
    153   viewAsPlate(list); 
     160  viewAsPlate(list, schema); 
    154161}
    155162
     
    161168function checkAndPreProcessCDna(cdna)
    162169{
    163   return;
    164170  // Set the 'stratagene'/'external' flag
    165   cdna.stratagene = cdna.name == STRATAGENE_NAME;
    166   cdna.external = cdna.name == EXTERNAL_RNA_NAME;
    167 }
    168 
    169 function viewAsPlate(list)
    170 {
     171  cdna.stratagene = cdna.name.indexOf(STRATAGENE_NAME) == 0;
     172  cdna.external = cdna.name.indexOf(EXTERNAL_RNA_NAME) == 0;
     173}
     174
     175function viewAsPlate(list, schema)
     176{
     177  Plate.init(8, 12, schema, WellPainter);
     178
    171179  for (var i = 0; i < list.length; i++)
    172180  {
    173181    var cdna = list[i];
    174     //var rna = cdna.rna;
    175182    var well = cdna.bioWell;
    176 
    177     var div = document.getElementById('well.'+well.row+'.'+well.column);
    178     //if (rna.qc) Main.addClass(div, 'qc');
    179    
    180     var html = '<div class="cdna">'+cdna.name+'</div>';
    181 
    182     div.innerHTML = html;
    183   }
    184 }
     183    Plate.getWell(well.row, well.column).setExtract(cdna);
     184  }
     185  var frm = document.forms['reggie'];
     186  WellPainter.barcodeVariant = schema.barcodeVariants[frm.barcode_variant.selectedIndex];
     187  WellPainter.schema = schema;
     188  Plate.paint(Plate.getWells());
     189}
     190
     191function poolSchemaOnChange()
     192{
     193  var frm = document.forms['reggie'];
     194  var schema = POOL_SCHEMA[frm.pool_schema.selectedIndex];
     195  Plate.setPoolSchema(schema);
     196  PoolSchema.initVariantList(frm.barcode_variant, schema);
     197  WellPainter.barcodeVariant = schema.barcodeVariants[frm.barcode_variant.selectedIndex];
     198  WellPainter.schema = schema;
     199 
     200  Plate.paint(Plate.getWells());
     201  PoolSchema.buildPoolTableRow(schema, 12, true);
     202}
     203
     204function barcodeVariantOnChange()
     205{
     206  var frm = document.forms['reggie'];
     207  var schema = POOL_SCHEMA[frm.pool_schema.selectedIndex];
     208 
     209  WellPainter.barcodeVariant = schema.barcodeVariants[frm.barcode_variant.selectedIndex];
     210  WellPainter.schema = schema;
     211  Plate.paint(Plate.getWells());
     212}
     213
     214var WellPainter = function()
     215{
     216  var painter = {};
     217  painter.i = 0;
     218 
     219  painter.getClassNameForWell = function(well)
     220  {
     221    var cls = '';
     222    var indexSet = painter.barcodeVariant.indexSets[well.column];
     223    if (indexSet)
     224    {
     225      cls += indexSet.color;
     226    }
     227    return cls;
     228  }
     229 
     230  painter.getWellText = function(well)
     231  {
     232    var text = '';
     233    var cdna = well.extract;
     234    if (cdna)
     235    {
     236      text += '<div class="name">'+cdna.name+'</div>';
     237    }
     238    if (painter.barcodeVariant)
     239    {
     240      var indexSet = painter.barcodeVariant.indexSets[well.column];
     241      if (indexSet)
     242      {
     243        var i = indexSet.barcodes[well.row];
     244        text += 'AD'+ (i < 10 ? '00' : '0') + i;
     245      }
     246    }
     247    return text;
     248  }
     249
     250  return painter;
     251}();
    185252
    186253</script>
    187 
     254<style>
     255
     256/* A well assigned for QC include a background icon as indicator */
     257.well.qc
     258{
     259  background-image: url('../images/mrnaqc.png');
     260  background-position: 95% 5%;
     261  background-repeat: no-repeat;
     262}
     263
     264.well.green
     265{
     266  background-color: #C0F8C0;
     267}
     268
     269.well.blue
     270{
     271  background-color: #C0E8FF;
     272}
     273
     274.well.yellow
     275{
     276  background-color: #FFFFC0;
     277}
     278
     279
     280</style>
    188281</base:head>
    189282<base:body onload="init()">
     
    241334  <tr>
    242335    <td class="stepfields">
    243  
     336
     337      <table class="bottomborder" style="width: 100%;">
     338      <tr valign="top">
     339        <td class="prompt">Pool layout</td>
     340        <td class="input">
     341          <select name="pool_schema" onchange="poolSchemaOnChange()"></select>
     342        </td>
     343        <td class="help"></td>
     344      </tr>
     345      <tr valign="top">
     346        <td class="prompt">Barcode variants</td>
     347        <td class="input">
     348          <select name="barcode_variant" onchange="barcodeVariantOnChange()"></select>
     349        </td>
     350        <td class="help"></td>
     351      </tr>
     352      </table>
     353     
    244354      <table class="plate" style="margin: 1em 1em 1em 1em;" id="plate">
    245355      <%
     
    272382          {
    273383            %>
    274             <td class="well col-<%=c%> <%=c>=1 && c<=10 ? "primary" : "secondary" %> <%=c % 2 == 1 ? "pool-left" : "pool-right" %>" id="well.<%=r%>.<%=c%>"></td>
     384            <td class="well col-<%=c%>" id="well.<%=r%>.<%=c%>"></td>
    275385            <%
    276386          }
     
    281391      %>
    282392      </tbody>
    283       <tr>
    284         <th></th>
    285         <th></th>
    286         <%
    287         String[] poolNames = { "i", "ii", "iii", "iv", "v", "vi", "vii", "viii", "ix", "x", "xi", "xii" };
    288         for (int i = 0; i < (columns - 2) / 2; ++i)
    289         {
    290           %>
    291           <th colspan="2" id="pool.<%=i %>"><%=poolNames[i] %></td>
    292           <%
    293         }
    294         %>
    295         <th></th>
     393      <tr id="pool-row">
     394        <th colspan="13">&nbsp;</th>
    296395      </tr>
    297396      </table>
    298  
    299  
    300397    </td>
    301398  </tr>
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/libprep/mrna_protocol2.jsp

    r1807 r1809  
    5656  <script language="JavaScript" src="<%=home %>/reggie.js" type="text/javascript" charset="UTF-8"></script>
    5757  <script language="JavaScript" src="pools.js" type="text/javascript" charset="UTF-8"></script>
     58  <script language="JavaScript" src="plate.js" type="text/javascript" charset="UTF-8"></script>
    5859 
    5960  <script language="JavaScript">
     
    212213  {
    213214    var schema = PoolSchema.getById('<%=poolSchema%>');
     215    Plate.init(<%=rows%>, <%=columns%>, schema, WellPainter);
     216   
    214217    for (var i = 0; i < list.length; i++)
    215218    {
    216219      var mrna = list[i];
    217       var rna = mrna.rna;
    218220      var well = mrna.bioWell;
    219 
    220       var div = document.getElementById('well.'+well.row+'.'+well.column);
    221       if (rna.qc) Main.addClass(div, 'qc');
    222       Main.addClass(div, schema.getClassNameForWell(well));
    223      
    224       var html = '<div class="rna">'+rna.name+'</div>';
    225       html += '<div class="box">'+getPlateCoordinate(rna.bioWell, true)+'</div>';
    226       html += '<div class="remain">'+Numbers.formatNumber(rna.remainingQuantity, 2, 'µg')+'</div>';
    227       html += '<div class="ndconc">'+Numbers.formatNumber(rna.NDConc, 2, 'ng/µl') + '</div>';
    228 
    229       if (rna.volume && rna.water)
    230       {
    231         html += '<div><span class="volume">'+Numbers.formatNumber(rna.volume, 1)+'</span>';
    232         html += ' + <span class="water">'+Numbers.formatNumber(rna.water, 1)+'</span>µl</div>';
    233       }
    234       html += '<div class="remarks">'+ rna.remarks.join('; ') + '</div>';
    235       div.innerHTML = html;
    236     }
    237    
    238     setInnerHTML('pool-row', PoolSchema.buildPoolTableRow(schema, 12, false));
    239    
     221      Plate.getWell(well.row, well.column).setExtract(mrna);
     222    }
     223
     224    Plate.paint(Plate.getWells());
     225    PoolSchema.buildPoolTableRow(schema, <%=columns%>);
    240226    Main.show('plateview');
    241227  }
    242228
     229  var WellPainter = function()
     230  {
     231    var painter = {};
     232   
     233    painter.getClassNameForWell = function(well)
     234    {
     235      var cls = '';
     236      var mrna = well.extract;
     237      if (mrna)
     238      {
     239        if (mrna.rna.qc) cls += ' qc';
     240      }
     241      return cls;
     242    }
     243   
     244    painter.getWellText = function(well)
     245    {
     246      var text = '';
     247      var mrna = well.extract;
     248      if (mrna)
     249      {
     250        var rna = mrna.rna;
     251        text += '<div class="rna">'+rna.name+'</div>';
     252        text += '<div class="box">'+getPlateCoordinate(rna.bioWell, true)+'</div>';
     253        text += '<div class="remain">'+Numbers.formatNumber(rna.remainingQuantity, 2, 'µg')+'</div>';
     254        text += '<div class="ndconc">'+Numbers.formatNumber(rna.NDConc, 2, 'ng/µl') + '</div>';
     255
     256        if (rna.volume && rna.water)
     257        {
     258          text += '<div><span class="volume">'+Numbers.formatNumber(rna.volume, 1)+'</span>';
     259          text += ' + <span class="water">'+Numbers.formatNumber(rna.water, 1)+'</span>µl</div>';
     260        }
     261        text += '<div class="remarks">'+ rna.remarks.join('; ') + '</div>';
     262      }
     263      return text;
     264    }
     265
     266    return painter;
     267  }();
    243268  </script>
    244269  <style>
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/libprep/pools.js

    r1807 r1809  
    22var POOL_NAMES =
    33  ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x', 'xi', 'xii' ];
     4
     5// Index Sets = IS
     6var IS_A1 = {color: 'green', barcodes: [1, 2, 3, 4, 5, 6, 7, 8]};
     7var IS_A2 = {color: 'green', barcodes: [9, 10, 11, 12, 13, 14, 15, 16]};
     8var IS_B1 = {color: 'blue', barcodes: [18, 19, 20, 21, 22, 23, 25, 27]};
     9var IS_B2 = {color: 'blue', barcodes: [1, 2, 3, 4, 5, 6, 7, 8]};
     10var IS_C1 = {color: 'yellow', barcodes: [9, 10, 11, 12, 13, 14, 15, 16]};
     11var IS_C2 = {color: 'yellow', barcodes: [18, 19, 20, 21, 22, 23, 25, 27]};
     12
     13var IS_F1 = {color: 'green', barcodes: [1, 2, 3, 4, 5, 6, 7, 8]};
     14var IS_F2 = {color: 'blue', barcodes: [9, 10, 11, 12, 13, 14, 15, 16]};
     15var IS_F3 = {color: 'yellow', barcodes: [18, 19, 20, 21, 22, 23, 25, 27]};
    416
    517var POOL_SCHEMA =
     
    1123    numWellsPerPool: 24,
    1224    columnClasses: ['pool-left', 'pool-middle', 'pool-right'],
     25    barcodeVariants:
     26      [
     27        {name: 'FULL', indexSets: [IS_F1, IS_F2, IS_F3, IS_F1, IS_F2, IS_F3, IS_F1, IS_F2, IS_F3, IS_F1, IS_F2, IS_F3]}
     28      ],
    1329
    1430    getPoolNumForColumn: function(colNum)
     
    4561    numWellsPerPool: 16,
    4662    columnClasses: ['pool-left', 'pool-right'],
     63    barcodeVariants:
     64      [
     65        {name: 'A-B-C-A', indexSets: [null, null, IS_A1, IS_A2, IS_B1, IS_B2, IS_C1, IS_C2, IS_A1, IS_A2, null, null]},
     66        {name: 'B-C-A-B', indexSets: [null, null, IS_B1, IS_B2, IS_C1, IS_C2, IS_A1, IS_A2, IS_B1, IS_B2, null, null]},
     67        {name: 'C-A-B-C', indexSets: [null, null, IS_C1, IS_C2, IS_A1, IS_A2, IS_B1, IS_B2, IS_C1, IS_C2, null, null]}
     68      ],
    4769
    4870    getPoolNumForColumn: function(colNum)
     
    82104    numWellsPerPool: 16,
    83105    columnClasses: ['pool-right', 'pool-left'],
     106    barcodeVariants:
     107      [
     108        {name: 'A-B-C-A-B', indexSets: [null, IS_A1, IS_A2, IS_B1, IS_B2, IS_C1, IS_C2, IS_A1, IS_A2, IS_B1, IS_B2, null]},
     109        {name: 'B-C-A-B-C', indexSets: [null, IS_B1, IS_B2, IS_C1, IS_C2, IS_A1, IS_A2, IS_B1, IS_B2, IS_C1, IS_C2, null]},
     110        {name: 'C-A-B-C-A', indexSets: [null, IS_C1, IS_C2, IS_A1, IS_A2, IS_B1, IS_B2, IS_C1, IS_C2, IS_A1, IS_A2, null]}
     111      ],
    84112 
    85113    getPoolNumForColumn: function(colNum)
     
    115143];
    116144
     145/**
     146  Methods for handling pooling layout schemas.
     147*/
    117148var PoolSchema = function()
    118149{
    119150  var ps = {};
    120151 
    121   ps.initList = function(list)
    122   {
     152  ps.initList = function(list, selectedId)
     153  {
     154    if (!selectedId) selectedId = POOL_SCHEMA[0].id;
     155    var selectedIndex = 0;
    123156    for (var i = 0; i < POOL_SCHEMA.length; i++)
    124157    {
     
    126159      var option = new Option(schema.name, schema.id);
    127160      list[list.length] = option;
    128     }
    129     return POOL_SCHEMA[0];
    130   }
    131  
     161      if (selectedId == schema.id) selectedIndex = i;
     162    }
     163    list.selectedIndex = selectedIndex;
     164    return POOL_SCHEMA[selectedIndex];
     165  }
     166 
     167  ps.initVariantList = function(list, schema, selectedId)
     168  {
     169    if (!selectedId) selectedId = schema.barcodeVariants[0].name;
     170    var selectedIndex = 0;
     171    list.length = 0;
     172    for (var i = 0; i < schema.barcodeVariants.length; i++)
     173    {
     174      var variant = schema.barcodeVariants[i];
     175      var option = new Option(variant.name, variant.name);
     176      list[list.length] = option;
     177      if (selectedId == variant.name) selectedIndex = i;
     178    }
     179    list.selectedIndex = selectedIndex;
     180    return schema.barcodeVariants[selectedIndex];
     181  }
    132182 
    133183  ps.getById = function(schemaId)
     
    168218        html += '<th id="pool.' + poolNum + '" colspan="'+colspan+'"';
    169219        html += ' class="'+poolClass+'"';
    170         if (interactive)
    171         {
    172           html += ' onclick="togglePool('+poolNum+')"';
    173           html += ' onmouseover="highlightPool('+poolNum+', true)"';
    174           html += ' onmouseout="highlightPool('+poolNum+', false)"';
    175           html += ' title="Select/deselect all wells in this pool"';     
    176         }
     220        html += ' data-pool-num="' + poolNum + '"';
    177221        html += '>'+POOL_NAMES[poolNum]+'</th>';
    178222        afterPool = true;
     
    180224      colNum += colspan;
    181225    }
    182     return html;
    183 
     226   
     227    var row = document.getElementById('pool-row');
     228    row.innerHTML = html;
    184229  }
    185230 
    186231  return ps;
    187232}();
     233
     234
  • extensions/net.sf.basedb.reggie/branches/ticket-422/resources/libprep/select_rna.jsp

    r1807 r1809  
    3232  <link rel="stylesheet" type="text/css" href="../css/plate.css">
    3333  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>
     34  <script language="JavaScript" src="plate.js" type="text/javascript" charset="UTF-8"></script>
    3435  <script language="JavaScript" src="pools.js" type="text/javascript" charset="UTF-8"></script>
    3536
     
    3940var QUANTITY_REGULAR = 1.1;
    4041var QUANTITY_QC = 1.22;
    41 
    42 var Plate = function()
    43 {
    44   var plate = {};
    45   plate.rows = 8;
    46   plate.columns = 12;
    47   plate.wells = [];
    48   plate.schema = null;
    49  
    50   plate.init = function(schema)
    51   {
    52     for (var c = 0; c < plate.columns; c++)
    53     {
    54       for (var r = 0; r < plate.rows; r++)
    55       {
    56         plate.wells[plate.wells.length] = new Well(r, c);
    57       }
    58     }
    59   }
    60  
    61   /**
    62     Get all wells on the plate.
    63   */
    64   plate.getWells = function()
    65   {
    66     return plate.wells;
    67   }
    68  
    69   /**
    70     Get all wells in the given row. First row is 0.
    71   */
    72   plate.getRow = function(row)
    73   {
    74     var result = [];
    75     for (var i = row; result.length < plate.columns; i += plate.rows)
    76     {
    77       result[result.length] = plate.wells[i];
    78     }
    79     return result;
    80   }
    81  
    82   /**
    83     Get all wells in the given column. First column is 0.
    84   */
    85   plate.getColumn = function(column)
    86   {
    87     var result = [];
    88     for (var i = column*plate.rows; result.length < plate.rows; i++)
    89     {
    90       result[result.length] = plate.wells[i];
    91     }
    92     return result;
    93   }
    94 
    95   /**
    96     Get all wells in the given pool number. Which wells are selected,
    97     depends on the pool schema.
    98   */
    99   plate.getPool = function(poolNum)
    100   {
    101     return plate.schema.getWellsInPool(plate, poolNum);
    102   }
    103 
    104   /**
    105     Get the well at the given coordinate.
    106   */
    107   plate.getWell = function(row, column)
    108   {
    109     return plate.wells[row + column * plate.rows];
    110   }
    111  
    112   /**
    113     Get all wells that contains RNA with a given name.
    114   */
    115   plate.getWellsByName = function(name)
    116   {
    117     var result = [];
    118     for (var i = 0; i < plate.wells.length; i++)
    119     {
    120       var well = plate.wells[i];
    121       if (well.rna && well.rna.name == name)
    122       {
    123         result[result.length] = plate.wells[i];
    124       }
    125     }
    126     return result;
    127   }
    128  
    129   /**
    130     Get all wells that are selected.
    131   */
    132   plate.getSelected = function()
    133   {
    134     var selected = [];
    135     for (var i = 0; i < plate.wells.length; i++)
    136     {
    137       var well = plate.wells[i];
    138       if (well.selected)
    139       {
    140         selected[selected.length] = well;
    141       }
    142     }
    143     return selected;
    144   }
    145 
    146   /**
    147     Set the selected status for all wells in the array.
    148     The wells are automatically repainted.
    149   */
    150   plate.setSelected = function(wells, select)
    151   {
    152     for (var i = 0; i < wells.length; i++)
    153     {
    154       var well = wells[i];
    155       well.selected = select;
    156       well.paint();
    157     }
    158   }
    159  
    160   /**
    161     Toggle the selected status for all wells in the array.
    162     The next status is determined by the current status of
    163     the first well in the array.
    164   */
    165   plate.toggleSelected = function(wells)
    166   {
    167     if (wells.length == 0) return;
    168     plate.setSelected(wells, !wells[0].selected);
    169   }
    170  
    171   /**
    172     Enable or disable highlight of the given wells.
    173   */
    174   plate.setHighlight = function(wells, highlightClass, on)
    175   {
    176     var tmpClass = on ? highlightClass : null;
    177     for (var i = 0; i < wells.length; i++)
    178     {
    179       var well = wells[i];
    180       well.highlightClass = tmpClass;
    181       Main.addOrRemoveClass(well.tag, highlightClass, on);
    182     }
    183   }
    184  
    185   /**
    186     Paint the given wells.
    187   */
    188   plate.paint = function(wells, schema)
    189   {
    190     if (schema) plate.schema = schema;
    191     for (var i = 0; i < wells.length; i++)
    192     {
    193       wells[i].paint(plate.schema);
    194     }
    195   }
    196  
    197   /**
    198     Check if the plate have any replicated RNA. Eg. RNA that is found
    199     in more than one well. If a name is given, only RNA for that name
    200     is checked, otherwise the complete plate is checked.
    201   */
    202   plate.checkReplicates = function(name, noRepaint)
    203   {
    204     if (name)
    205     {
    206       // If a name has been given, it is relatively easy
    207       var wells = plate.getWellsByName(name);
    208       var isReplicate = wells.length > 1;
    209       for (var i = 0; i < wells.length; i++)
    210       {
    211         var well = wells[i];
    212         if (well.rna.replicate != isReplicate)
    213         {
    214           well.rna.replicate = isReplicate;
    215           if (!noRepaint) well.paint();
    216         }
    217       }
    218     }
    219     else
    220     {
    221       // No name, we begin by counting the number of times we find any given name
    222       var nameCount = [];
    223       for (var i = 0; i < plate.wells.length; i++)
    224       {
    225         var well = plate.wells[i];
    226         // Ignore empty wells and wells with 'Stratagene'
    227         if (well.rna && !well.rna.stratagene && !well.rna.external)
    228         {
    229           nameCount[well.rna.name] = 1 + (nameCount[well.rna.name] || 0);
    230         }
    231       }
    232       // Then, we update the status for all wells
    233       for (var i = 0; i < plate.wells.length; i++)
    234       {
    235         var well = plate.wells[i];
    236         if (well.rna)
    237         {
    238           var isReplicate = nameCount[well.rna.name] > 1;
    239           if (well.rna.replicate != isReplicate)
    240           {
    241             well.rna.replicate = isReplicate;
    242             if (!noRepaint) well.paint();
    243           }
    244         }
    245       }
    246     }
    247   }
    248  
    249   plate.findNextMRnaPlateName = function()
    250   {
    251     var request = Ajax.getXmlHttpRequest();
    252     var url = '../MRna.servlet?ID=<%=ID%>&cmd=GetNextAutoGeneratedPlateName&bioPlateType=MRNA';
    253     if (debug) Main.debug(url);
    254     request.open("GET", url, false); 
    255     request.send(null);
    256 
    257     if (debug) Main.debug(request.responseText);
    258     var response = JSON.parse(request.responseText); 
    259     if (response.status != 'ok')
    260     {
    261       setFatalError(response.message);
    262       return false;
    263     }
    264     plate.name = response.name;
    265     return plate.name;
    266   }
    267  
    268   return plate;
    269 }();
    270 
    27142
    27243var Rna = function()
     
    28657    tmp.stratagene = name == STRATAGENE_NAME;
    28758    tmp.external = name == EXTERNAL_RNA_NAME;
    288     tmp.replicate = false;
    28959    tmp.info = rna.infoByName(name);
    29060    tmp.id = tmp.info.id;
     
    30171    tmp.stratagene = tmp.name == STRATAGENE_NAME;
    30272    tmp.external = tmp.name == EXTERNAL_RNA_NAME;
    303     tmp.replicate = false;
    30473    tmp.id = info.id;
    30574    tmp.info = info;
     
    368137}();
    369138
    370 // Represents a well on the plate
    371 // Each well is created when the page is loaded
    372 function Well(row, column)
    373 {
    374   this.row = row;
    375   this.column = column;
    376   this.selected = false;
    377   this.highlighClass = null;
    378   this.rna = null;
    379   this.duplicates = null;
    380   this.tag = document.getElementById('well.'+row+'.'+column);
    381 }
    382 
    383 /**
    384   Set the RNA item that is put into this well. Use
    385   'null' to clear the well.
    386 */
    387 Well.prototype.setRna = function(rna)
    388 {
    389   this.rna = rna;
    390   this.duplicates = null;
    391   if (rna && this.clipboard) this.doneWithCopy();
    392 }
    393 
    394 /**
    395   Set a duplicate RNA item in this well. This can
    396   happen when using a file import if the same location
    397   is specified twice and is an error condition which
    398   must be resolved.
    399 */
    400 Well.prototype.addDuplicate = function(rna)
    401 {
    402   if (!this.duplicates)
    403   {
    404     this.duplicates = [];
    405     this.duplicates[0] = this.rna.name;
    406   }
    407   this.duplicates[this.duplicates.length] = rna.name;
    408 }
    409 
    410 Well.prototype.makeCopy = function()
    411 {
    412   var cp = {};
    413   cp.well = this;
    414   cp.name = this.rna ? this.rna.name : null;
    415   this.clipboard = true;
    416   this.copyText = cp.name;
    417   return cp;
    418 }
    419 
    420 Well.prototype.doneWithCopy = function()
    421 {
    422   this.clipboard = false;
    423   this.copyText = null;
    424 }
    425 
    426 Well.prototype.hasError = function()
    427 {
    428   return this.duplicates || (this.rna && !this.rna.id);
    429 }
    430 
    431 Well.prototype.getClassName = function(schema)
    432 {
    433   var c = this.column;
    434   var cls = 'well col-'+c;
    435   if (schema)
    436   {
    437     cls += ' ' + schema.getClassNameForWell(this);
    438   }
    439   if (this.selected) cls += ' selected';
    440   if (this.clipboard) cls += ' clipboard';
    441   if (this.rna)
    442   {
    443     if (this.rna.replicate) cls += ' replicate';
    444     if (this.rna.qc) cls += ' qc';
    445   }
    446   if (this.hasError()) cls += ' err';
    447   if (this.warning) cls += ' warning';
    448   if (this.highlightClass) cls += ' ' + this.highlightClass;
    449   return cls;
    450 }
    451 
    452 Well.prototype.getText = function()
    453 {
    454   var text = '';
    455   if (this.duplicates)
    456   {
    457     text = '<div class="name">'+this.duplicates.join(', ')+'</div>';
    458     text += '<div class="err-msg">Duplicate RNA in this location</div>';
    459   }
    460   else if (this.rna)
    461   {
    462     text = '<div class="name">'+this.rna.name+'</div>';
    463     var info = this.rna.info;
    464     var warningMsg = null;
    465     if (info && info.id && !this.rna.stratagene && !this.rna.external)
    466     {
    467       var quantity = 10000 * (this.rna.qc ? QUANTITY_QC : QUANTITY_REGULAR);
    468       var use = Math.ceil(quantity/info.NDConc);
    469       var water = Math.round(500-use);
    470       if (info.bioWell)
     139var WellPainter = function()
     140{
     141  var painter = {};
     142 
     143  // Add class indicators for replicates and QC assigned wells
     144  painter.getClassNameForWell = function(well)
     145  {
     146    var cls = '';
     147    if (well.extract)
     148    {
     149      if (well.replicate) cls += ' replicate';
     150      if (well.extract.qc) cls += ' qc';
     151    }
     152    return cls;
     153  }
     154 
     155  painter.getWellText = function(well)
     156  {
     157    var text = '';
     158    if (well.duplicates)
     159    {
     160      well.setError('Duplicate RNA in this location');
     161      text += '<div class="name">'+well.duplicates.join(', ')+'</div>';
     162    }
     163    else if (well.extract)
     164    {
     165      // The well contains RNA
     166      var rna = well.extract;
     167      var info = rna.info;
     168      text += '<div class="name">'+rna.name+'</div>';
     169     
     170      var warningMsg = null;
     171      if (info && info.id && !rna.stratagene && !rna.external)
    471172      {
    472         var well = info.bioWell;
    473         text += '<div class="location">'+well.bioPlate.name+'['+WELL_ALPHA[well.row]+(well.column+1)+']</div>';
    474       }
    475       else
    476       {
    477         if (!warningMsg) warningMsg = 'No location';
    478       }
    479       if (info.remainingQuantity)
    480       {
    481         text += '<div class="quantity">'+Numbers.formatNumber(info.remainingQuantity, 2, 'µg')+'</div>';
    482         if (info.remainingQuantity < (this.rna.qc ? QUANTITY_QC : QUANTITY_REGULAR))
     173        var quantity = 10000 * (rna.qc ? QUANTITY_QC : QUANTITY_REGULAR);
     174        var use = Math.ceil(quantity/info.NDConc);
     175        var water = Math.round(500-use);
     176        if (info.bioWell)
    483177        {
    484           if (!warningMsg) warningMsg = 'Low quantity';
     178          var rnaWell = info.bioWell;
     179          text += '<div class="location">'+rnaWell.bioPlate.name+'['+WELL_ALPHA[rnaWell.row]+(rnaWell.column+1)+']</div>';
     180        }
     181        else
     182        {
     183          if (!warningMsg) warningMsg = 'No location';
     184        }
     185        if (info.remainingQuantity)
     186        {
     187          text += '<div class="quantity">'+Numbers.formatNumber(info.remainingQuantity, 2, 'µg')+'</div>';
     188          if (info.remainingQuantity < (rna.qc ? QUANTITY_QC : QUANTITY_REGULAR))
     189          {
     190            if (!warningMsg) warningMsg = 'Low quantity';
     191          }
     192        }
     193        else
     194        {
     195          if (!warningMsg) warningMsg = 'No quantity';
     196        }
     197        if (info.NDConc)
     198        {
     199          text += '<div class="ndconc">'+Numbers.formatNumber(info.NDConc, 2, 'ng/µl') + '</div>';
     200          text += '<div class="volumes"><span class="volume">'+Numbers.formatNumber(use/10, 1)+'</span> + <span class="water">'+Numbers.formatNumber(water/10, 1)+'µl</span></div>';
     201        }
     202        else
     203        {
     204          if (!warningMsg) warningMsg = 'No NDConc value';
     205        }
     206        if (warningMsg)
     207        {
     208          well.setWarning(warningMsg);
    485209        }
    486210      }
    487       else
     211      else if (!rna.id)
    488212      {
    489         if (!warningMsg) warningMsg = 'No quantity';
     213        well.setError('RNA not found');
    490214      }
    491       if (info.NDConc)
    492       {
    493         text += '<div class="ndconc">'+Numbers.formatNumber(info.NDConc, 2, 'ng/µl') + '</div>';
    494         text += '<div class="volumes"><span class="volume">'+Numbers.formatNumber(use/10, 1)+'</span> + <span class="water">'+Numbers.formatNumber(water/10, 1)+'µl</span></div>';
    495       }
    496       else
    497       {
    498         if (!warningMsg) warningMsg = 'No NDConc value';
    499       }
    500       if (warningMsg)
    501       {
    502         this.warning = true;
    503         text += '<div class="warn-msg">'+ warningMsg + '</div>';
    504       }
    505     }
    506     else if (!this.rna.id)
    507     {
    508       text += '<div class="err-msg">RNA not found</div>'
    509     }
    510   }
    511   else if (this.copyText)
    512   {
    513     text = '<div class="copy-text">'+this.copyText+'</div>';
    514   }
    515   return text;
    516 }
    517 
    518 Well.prototype.getTooltip = function()
    519 {
    520   var tooltip = 'Select/deselect this well';
    521   return tooltip;
    522 }
    523 
    524 Well.prototype.paint = function()
    525 {
    526   this.warning = false;
    527   this.tag.innerHTML = this.getText();
    528   this.tag.className = this.getClassName(Plate.schema);
    529   this.tag.title = this.getTooltip();
    530 }
     215    }
     216    else if (well.copyText)
     217    {
     218      text = '<div class="copy-text">'+well.copyText+'</div>';
     219    }
     220    return text;
     221  }
     222 
     223  return painter;
     224}();
     225
    531226
    532227var graphics;
     
    538233  var schema = PoolSchema.initList(frm.pool_schema);
    539234
    540   Plate.init();
    541   Plate.paint(Plate.getWells(), schema);
    542  
    543   poolSchemaOnChange();
     235  Plate.init(8, 12, schema, WellPainter);
     236  Plate.paint(Plate.getWells());
     237  PoolSchema.buildPoolTableRow(schema, 12, true);
    544238 
    545239  var specialSelect = document.getElementById('iconSpecialSelect');
     
    549243  pen = new jsPen(new jsColor('#2288AA'), 2);
    550244 
    551   var plateName = Plate.findNextMRnaPlateName();
     245  var plateName = findNextMRnaPlateName();
    552246  setInnerHTML('plateName', plateName);
    553  
    554 }
     247}
     248
     249function findNextMRnaPlateName()
     250{
     251  var request = Ajax.getXmlHttpRequest();
     252  var url = '../MRna.servlet?ID=<%=ID%>&cmd=GetNextAutoGeneratedPlateName&bioPlateType=MRNA';
     253  if (debug) Main.debug(url);
     254  request.open("GET", url, false); 
     255  request.send(null);
     256
     257  if (debug) Main.debug(request.responseText);
     258  var response = JSON.parse(request.responseText); 
     259  if (response.status != 'ok')
     260  {
     261    setFatalError(response.message);
     262    return false;
     263  }
     264  return response.name;
     265}
     266
    555267
    556268// Toggle the 'special select' menu on and off
     
    615327      {
    616328        duplicates[pos] = rna.name;
    617         well.setRna(rna);
     329        well.setExtract(rna);
    618330      }
    619331    }
     
    659371  {
    660372    var well = wells[i];
    661     if (well.rna && !well.hasError()) count++;
     373    if (well.extract && !well.hasError()) count++;
    662374  }
    663375 
     
    682394    var rna = Rna.createByInfo(info);
    683395    rna.qc = qc;
    684     well.setRna(rna);
     396    well.setExtract(rna);
    685397    well.selected = false;
    686     well.paint();
    687   }
     398  }
     399 
     400  Plate.paint(wells);
    688401 
    689402  // Check for replicated RNA if some have been replaced with Stratagene
     
    714427  {
    715428    var well = wells[i];
    716     if (well.rna)
     429    if (well.extract)
    717430    {
    718431      // Toggle QC flag for the first well with RNA, then use the same flag for the rest
     
    720433      {
    721434        gotQc = true;
    722         newQc = !well.rna.qc;
     435        newQc = !well.extract.qc;
    723436      }
    724       well.rna.qc = newQc;
    725       well.paint();
     437      well.extract.qc = newQc;
    726438      count++;
    727439    }
    728440  }
    729 
     441 
    730442  if (count == 0)
    731443  {
    732444    alert('None of the selected wells contain any RNA');
     445  }
     446  else
     447  {
     448    Plate.paint(wells);
    733449  }
    734450}
     
    752468  {
    753469    var well = wells[i];
    754     if (well.rna)
     470    if (well.extract)
    755471    {
    756472      count++;
     
    778494  {
    779495    var well = wells[i];
    780     well.setRna(null);
     496    well.setExtract(null);
    781497    well.selected = false;
    782     well.paint(Plate.schema);
    783   }
     498  }
     499  Plate.paint(wells);
    784500  Plate.checkReplicates();
    785501}
     
    792508{
    793509  // Clear existing wells in the copy
     510  var repaint = [];
    794511  if (copy && copy.length > 0)
    795512  {
     
    798515      var cp = copy[i];
    799516      cp.well.doneWithCopy();
    800       cp.well.paint();
    801     }
    802   }
     517      repaint[repaint.length] = cp.well;
     518    }
     519  }
     520  Plate.paint(repaint);
    803521 
    804522  // Place selected wells in the copy
     
    810528    copy[copy.length] = well.makeCopy();
    811529    well.selected = false;
    812     well.paint();
    813   }
     530  }
     531  Plate.paint(wells);
    814532}
    815533
     
    831549  {
    832550    var well = wells[i];
    833     if (well.rna && !well.hasError()) count++;
     551    if (well.extract && !well.hasError()) count++;
    834552  }
    835553 
     
    846564  var copyEmpty;
    847565  var askIfEmpty = true;
     566  var repaint = [];
    848567 
    849568  while (wi < wells.length && ci < copy.length)
     
    853572    var rna = null;
    854573    cp.well.doneWithCopy();
    855     cp.well.paint();
     574    repaint[repaint.length] = cp.well;
    856575    if (cp.name)
    857576    {
     
    869588    if (rna != null || copyEmpty)
    870589    {
    871       well.setRna(rna);
     590      well.setExtract(rna);
    872591      well.selected = false;
    873       well.paint();
     592      repaint[repaint.length] = well;
    874593      wi++;
    875594    }
    876595    ci++;
    877596  }
     597  Plate.paint(repaint);
    878598  copy.splice(0, ci);
    879599  Plate.checkReplicates();
     
    893613  }
    894614
    895   var rna0 = wells[0].rna;
    896   var rna1 = wells[1].rna;
    897  
    898   wells[0].setRna(rna1);
    899   wells[1].setRna(rna0);
     615  var rna0 = wells[0].extract;
     616  var rna1 = wells[1].extract;
     617 
     618  wells[0].setExtract(rna1);
     619  wells[1].setExtract(rna0);
    900620  Plate.paint(wells);
    901621}
     
    928648    {
    929649      selected[selected.length] = well;
    930       if (well.rna && !well.hasError()) notEmpty++;
    931     }
    932     if (well.rna && well.rna.id)
    933     {
    934       ignore[ignore.length] = well.rna.id;
     650      if (well.extract && !well.hasError()) notEmpty++;
     651    }
     652    if (well.extract && well.extract.id)
     653    {
     654      ignore[ignore.length] = well.extract.id;
    935655    }
    936656  }
     
    1012732        // Create a new RNA object
    1013733        var rna = Rna.createByName(response.rna[i].name);
    1014         well.setRna(rna);
     734        well.setExtract(rna);
    1015735        well.selected = false;
    1016736      }
     
    1081801 
    1082802  // Keep a reference to the old rna in the well
    1083   var oldRna = well.rna;
     803  var oldRna = well.extract;
    1084804
    1085805  // Create a new RNA object
    1086806  var rna = Rna.createByName(name);
    1087   well.setRna(rna);
     807  well.setExtract(rna);
    1088808  well.selected = false;
    1089   well.paint();
     809  Plate.paint([well]);
    1090810 
    1091811  // Update replicate information
     
    1127847  Plate.toggleSelected(Plate.getPool(pool));
    1128848}
     849function poolOnClick(event)
     850{
     851  var pool = event.target.getAttribute('data-pool-num');
     852  if (pool) togglePool(pool);
     853}
     854function poolEnter(event)
     855{
     856  var pool = event.target.getAttribute('data-pool-num');
     857  if (pool) highlightPool(pool, true);
     858}
     859function poolLeave(event)
     860{
     861  var pool = event.target.getAttribute('data-pool-num');
     862  if (pool) highlightPool(pool, false);
     863}
     864
    1129865
    1130866// Some special toogle operations
     
    1152888    {
    1153889      var well = tmp[i];
    1154       if (well.rna && well.rna.stratagene) wells[wells.length] = well;
     890      if (well.extract && well.extract.stratagene) wells[wells.length] = well;
    1155891    }
    1156892  }
     
    1162898    {
    1163899      var well = tmp[i];
    1164       if (well.rna && well.rna.external) wells[wells.length] = well;
     900      if (well.extract && well.extract.external) wells[wells.length] = well;
    1165901    }
    1166902  }
     
    1172908    {
    1173909      var well = tmp[i];
    1174       if (well.rna && well.rna.replicate) wells[wells.length] = well;
     910      if (well.extract && well.extract.replicate) wells[wells.length] = well;
    1175911    }
    1176912  }
     
    1203939    for (var i = 0; i < tmp.length; i++)
    1204940    {
    1205       if (!tmp[i].rna) wells[wells.length] = tmp[i];
     941      if (!tmp[i].extract) wells[wells.length] = tmp[i];
    1206942    }
    1207943  }
     
    1247983{
    1248984  var well = Plate.getWell(row, column);
    1249   if (well.rna && well.rna.replicate)
     985  if (well.extract && well.replicate)
    1250986  {
    1251987    // Get center coordinates for the current well
     
    1253989    var jsPos = new jsPoint(pos.left+pos.width/2, pos.top+pos.height/2);
    1254990
    1255     var replicated = Plate.getWellsByName(well.rna.name);
     991    var replicated = Plate.getWellsByName(well.extract.name);
    1256992    for (var i = 0; i < replicated.length; i++)
    1257993    {
     
    13531089    else
    13541090    {
    1355       if (well.rna && well.rna.id)
     1091      if (well.extract && well.extract.id)
    13561092      {
    13571093        var tmp = {};
     
    13591095        tmp.column = well.column;
    13601096        tmp.rna = {};
    1361         tmp.rna.id = well.rna.id;
    1362         tmp.rna.usedQuantity = well.rna.qc ? QUANTITY_QC : QUANTITY_REGULAR;
     1097        tmp.rna.id = well.extract.id;
     1098        tmp.rna.usedQuantity = well.extract.qc ? QUANTITY_QC : QUANTITY_REGULAR;
    13631099        plateInfo.wells[plateInfo.wells.length] = tmp;
    13641100        numRna++;
    1365         if (well.rna.stratagene) numStratagene++;
    1366         if (well.rna.external) numExternal++;
     1101        if (well.extract.stratagene) numStratagene++;
     1102        if (well.extract.external) numExternal++;
    13671103      }
    13681104    }
     
    14611197  var frm = document.forms['reggie'];
    14621198  var schema = POOL_SCHEMA[frm.pool_schema.selectedIndex];
    1463   Plate.paint(Plate.getWells(), schema);
    1464  
    1465   var row = document.getElementById('pool-row');
    1466   var html = PoolSchema.buildPoolTableRow(schema, Plate.columns, true);
    1467   row.innerHTML = html;
     1199  Plate.setPoolSchema(schema);
     1200  Plate.paint(Plate.getWells());
     1201  PoolSchema.buildPoolTableRow(schema, Plate.columns, true);
    14681202}
    14691203
     
    14931227  background-position: 95% 5%, 95% 55%;
    14941228  background-repeat: no-repeat;
    1495 }
    1496 
    1497 .well .name
    1498 {
    1499   font-weight: bold;
    1500 }
    1501 
    1502 .well .err-msg, .well .warn-msg
    1503 {
    1504   color: #C80000;
    1505   font-style: italic;
    15061229}
    15071230
     
    18511574        %>
    18521575        </tbody>
    1853         <tr id="pool-row">
     1576        <tr id="pool-row"
     1577          onclick="poolOnClick(event)"
     1578          onmouseover="poolEnter(event)"
     1579          onmouseout="poolLeave(event)">
    18541580          <th colspan="13">&nbsp;</th>
    18551581        </tr>
  • extensions/net.sf.basedb.reggie/branches/ticket-422/src/net/sf/basedb/reggie/servlet/LibPrepServlet.java

    r1806 r1809  
    2828import net.sf.basedb.core.query.Restrictions;
    2929import net.sf.basedb.reggie.Reggie;
     30import net.sf.basedb.reggie.dao.Annotationtype;
    3031import net.sf.basedb.reggie.dao.BioplateType;
    3132import net.sf.basedb.reggie.dao.CDna;
     
    110111          jsonPlate.put("id", plate.getId());
    111112          jsonPlate.put("name", plate.getName());
     113          jsonPlate.put("poolSchema", Annotationtype.POOL_SCHEMA.getAnnotationValue(dc, plate));
    112114          jsonPlates.add(jsonPlate);
    113115        }
Note: See TracChangeset for help on using the changeset viewer.