Changeset 5924


Ignore:
Timestamp:
Jan 13, 2012, 2:10:52 PM (10 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

Plot functions for spot data and in experiment explorer.

Location:
trunk
Files:
2 added
2 deleted
26 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/clients/web/net/sf/basedb/clients/web/servlet/ExperimentExplorerPlotServlet.java

    r5319 r5924  
    332332        if (title != null) chart.setTitle(title);
    333333        if (subTitle != null) chart.addSubtitle(new TextTitle(subTitle));
     334        chart.setBackgroundPaint(null);
    334335
    335336        // Render the image
     
    352353        {
    353354          // Otherwise... create a new (bigger) image...
    354           image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
     355          image = new BufferedImage(width, height, BufferedImage.TYPE_4BYTE_ABGR);
    355356          Graphics2D g = image.createGraphics();
    356           g.setBackground(Color.WHITE);
     357          g.setBackground(new Color(255, 255, 255, 0));
    357358          g.clearRect(0, 0, width, height);
    358359          g.setColor(Color.BLACK);
  • trunk/src/clients/web/net/sf/basedb/clients/web/servlet/PlotServlet.java

    r5384 r5924  
    563563          if (!hasAnnotation) chart.removeLegend();
    564564          if (subTitle != null) chart.addSubtitle(new TextTitle(subTitle));
     565          chart.setBackgroundPaint(null);
    565566          image = chart.createBufferedImage(width, height);
    566567        }
     
    663664        {
    664665          // Something went wrong when genering the error image - send redirect to a predefined image
    665           response.sendRedirect(request.getContextPath() + "/images/plot_error.gif");
     666          response.sendRedirect(request.getContextPath() + "/images/plot_error.png");
    666667        }
    667668      }
  • trunk/www/admin/extensions/details.jsp

    r5918 r5924  
    362362        {
    363363          %>
    364           <tbody class="section">
     364          <tbody class="sectionheader">
    365365            <tr>
    366366              <th colspan="2">Extension point</th>
  • trunk/www/include/styles/main.css

    r5923 r5924  
    5454{
    5555  border: 0px;
    56   xvertical-align: text-bottom;
     56  vertical-align: text-bottom;
    5757}
    5858
     
    375375.bottomborder
    376376{
    377   border-bottom: 1px solid #A0A0A0;
     377  border-bottom: 1px solid #A0A0A0 !important;
    378378}
    379379
     
    381381.topborder
    382382{
    383   border-top: 1px solid #A0A0A0;
     383  border-top: 1px solid #A0A0A0 !important;
    384384}
    385385
     
    387387.rightborder
    388388{
    389   border-right: 1px solid #A0A0A0;
     389  border-right: 1px solid #A0A0A0 !important;
    390390}
    391391
     
    393393.leftborder
    394394{
    395   border-left: 1px solid #A0A0A0;
     395  border-left: 1px solid #A0A0A0 !important;
    396396}
    397397
     
    399399.filled
    400400{
    401   background: #E8E8E8;
     401  background: #E8E8E8 !important;
    402402}
    403403
     
    513513}
    514514
     515/* Regular cells have a white background */
     516table.fullform > tbody > tr > td
     517{
     518  background: #FFFFFF;
     519  padding: 0px 2px 0px 2px;
     520}
     521
    515522/* First row has no top border */
    516523table.fullform > tbody > tr:first-child > th, table.fullform > tbody > tr:first-child > td
     
    528535
    529536/* A section row should span the entire table */
    530 table.fullform > tbody.section > tr > th
     537table.fullform > tbody.sectionheader > tr > th, table.fullform > tbody.sectionheader > tr > td
    531538{
    532539  border-top: 1px solid #A0A0A0;
    533540  border-bottom: 1px solid #A0A0A0;
    534541  border-right: 0px;
     542  background: #E8E8E8;
    535543  white-space: normal;
    536544}
    537545
    538 /* First tbody section shouldn't have a top border */
    539 table.fullform > tbody.section:first-child > tr > th
     546/* First child after a section header shouldn't have a top border */
     547table.fullform > tbody.sectionheader:first-child > tr > th
    540548{
    541549  border-top: 0px solid #A0A0A0;
    542550}
    543551
    544 /* Regular cells have a white background */
    545 table.fullform > tbody > tr > td
    546 {
    547   background: #FFFFFF;
    548   padding: 0px 2px 0px 2px;
     552/* A simple section has a solid top border on the first child row */
     553table.fullform > tbody.simplesection > tr:first-child > *
     554{
     555  border-top: 1px solid #A0A0A0;
    549556}
    550557
  • trunk/www/include/styles/popup.css

    r5920 r5924  
    8585}
    8686
    87 
    8887/* fullcc is used for 100% width+height content that is centered vertically+horizontally */
    8988.popup .content table.fullcc
     
    128127}
    129128
     129.popup .legend img
     130{
     131  vertical-align: middle !important;
     132}
     133
    130134/*
    131135  Buttons and related
  • trunk/www/include/styles/tabcontrol.css

    r5905 r5924  
    139139  border-top: 1px solid #A0A0A0;
    140140}
     141
     142
     143/* Specific for tabcontrol with tabs on top */
     144.tabsattop .tabs
     145{
     146  vertical-align: bottom;
     147}
     148
     149.tabsattop .tab
     150{
     151  /* Rounded corners at bottom */
     152  border-radius: 5px 5px 0px 0px;
     153}
     154
     155/* Hide bottom border from active tab */
     156.tabsattop .tab.active
     157{
     158  border-bottom: 1px solid #E8E8E8 !important;
     159  border-top: 2px solid #2288AA !important;
     160  padding-top: 1px !important;
     161}
     162
     163/* Add bottom border on tabspace */
     164.tabsattop .tabspace
     165{
     166  border-bottom: 1px solid #A0A0A0;
     167}
     168
     169.tabsattop .tabfillbefore
     170{
     171  width: 5px;
     172  min-width: 5px;
     173  max-width: 5px;
     174  border-bottom: 1px solid #A0A0A0;
     175}
     176
     177.tabsattop .tabfillafter
     178{
     179  width: 99%;
     180  border-bottom: 1px solid #A0A0A0;
     181}
     182
    141183
    142184/* Use all but the bottom 2em for tab contents */
  • trunk/www/lims/arraydesigns/features/view_feature.jsp

    r5917 r5924  
    120120   
    121121      <table class="fullform outlined">
    122       <tbody class="section">
     122      <tbody class="sectionheader">
    123123        <tr>
    124124          <th colspan="6">Array design</th>
     
    140140      </tbody>
    141141     
    142       <tbody class="section">
     142      <tbody class="sectionheader">
    143143        <tr>
    144144          <th colspan="6">Feature / block</th>
     
    189189      </tbody>
    190190     
    191       <tbody class="section">
     191      <tbody class="sectionheader">
    192192        <tr>
    193193          <th colspan="6">Plage / well</th>
     
    255255      <t:tab id="reporter" title="Reporter" >
    256256        <table class="fullform outlined">
    257         <tbody class="section">
     257        <tbody class="sectionheader">
    258258          <tr>
    259259            <th colspan="4">Common reporter properties</th>
     
    286286        </tbody>
    287287       
    288         <tbody class="section">
     288        <tbody class="sectionheader">
    289289          <tr>
    290290            <th colspan="4">Extended reporter properties</th>
  • trunk/www/lims/arrayslides/create_wizard.jsp

    r5917 r5924  
    338338            <col span="2" style="width: 47%;">
    339339          </colgroup>
    340           <tbody class="section">
     340          <tbody class="sectionheader">
    341341          <tr>
    342342            <th>&nbsp;</th>
  • trunk/www/views/experiments/bioassays/view_bioassay.jsp

    r5910 r5924  
    119119    function openPlotTool()
    120120    {
    121       Main.openPopup('../plotter/index.jsp?ID=<%=ID%>&bioassay_id=<%=itemId%>', 'Plotter', 1000, 700);
     121      Main.openPopup('../plotter/index.jsp?ID=<%=ID%>&bioassay_id=<%=itemId%>', 'Plotter', 1050, 700);
    122122    }
    123123    </script>
  • trunk/www/views/experiments/bioassaysets/analysis_tree.jsp

    r5910 r5924  
    382382    function openPlotTool(itemId)
    383383    {
    384       Main.openPopup('../plotter/index.jsp?ID=<%=ID%>&bioassayset_id='+itemId, 'Plotter', 1000, 700);
     384      Main.openPopup('../plotter/index.jsp?ID=<%=ID%>&bioassayset_id='+itemId, 'Plotter', 1050, 700);
    385385    }
    386386    function openExperimentExplorer(itemId)
  • trunk/www/views/experiments/bioassaysets/view_bioassayset.jsp

    r5910 r5924  
    214214        {
    215215          img.src = img.realImg.src;
     216          img.style.background = 'transparent';
    216217          setTimeout('loadNextImage()', 100);
    217218        };
     
    248249    </script>
    249250    <style>
    250     .plot {
    251       border: 1px solid #666666;
     251    .plot
     252    {
     253      border: 1px solid #A0A0A0;
    252254      background-image: url('../../../images/plot_empty_400x300.png');
    253255      margin: 2px;
  • trunk/www/views/experiments/explorer/view/plotter.jsp

    r5905 r5924  
    136136  function validate()
    137137  {
    138     var plotType = getPlotType();
    139     if (plotType == 'assay')
    140     {
    141       return validateAssayPlot();
    142     }
    143     else if (plotType == 'annotation')
    144     {
    145       return validateAnnotationPlot();
    146     }
    147     return false;
    148   }
    149  
    150   function validateAssayPlot()
    151   {
    152     var frm = document.forms['assay'];
     138    var frm = document.forms['plot'];
    153139    if (Main.trimString(frm.yFormula.value) == '')
    154140    {
     
    160146  }
    161147 
    162   function validateAnnotationPlot()
    163   {
    164     var frm = document.forms['annotation'];
    165     if (Main.trimString(frm.yFormula.value) == '')
    166     {
    167       alert("You must enter an expression for the Y axis");
    168       frm.yFormula.focus();
    169       return false;
    170     }
    171     return true;
    172   }
    173  
    174   var plotType = '<%=plotType%>';
    175148  function getPlotType()
    176149  {
    177     return plotType;
    178   }
    179 
    180   function switchTab(tabControlId, tabId)
    181   {
    182     if (tabId == 'assay' || tabId == 'annotation')
    183     {
    184       plotType = tabId;
    185     }
    186     TabControl.setActiveTab(tabControlId, tabId);
    187   }
    188 
     150    var frm = document.forms['plot'];
     151    return Forms.getCheckedRadio(frm.plotType).value;
     152  }
     153
     154  function plotTypeOnChange()
     155  {
     156    var plotType = getPlotType();
     157    var frm = document.forms['plot'];
     158    var isAssayPlot = plotType == 'assay';
     159    frm.annotationTypeId.disabled = isAssayPlot;
     160    frm.subtype.disabled = !isAssayPlot;
     161  }
     162 
    189163  function presetOnChange(list, formula, label)
    190164  {
     
    205179    if (validate())
    206180    {
    207       var plotFrm = document.forms['plot'];
     181      var frm = document.forms['plot'];
    208182      var url = getRoot() + 'views/experiments/explorer/plot';
    209183      url += '?ID=<%=ID%>&bioAssaySetId=<%=bioAssaySetId%>';
    210184      url += '&reporterIndex=<%=reporterIndex%>&positionIndex=<%=positionIndex%>';
    211       url += '&title='+Main.encodeURI(plotFrm.title.value);
    212       url += '&subTitle='+Main.encodeURI(plotFrm.subTitle.value);
     185      url += '&title='+Main.encodeURI(frm.title.value);
     186      url += '&subTitle='+Main.encodeURI(frm.subTitle.value);
    213187      if (fullSize)
    214188      {
    215         url += '&width='+plotFrm.width.value;
    216         url += '&height='+plotFrm.height.value;
     189        url += '&width='+frm.width.value;
     190        url += '&height='+frm.height.value;
    217191      }
     192     
     193      url += '&y='+Main.encodeURI(frm.yFormula.value);
     194      url += '&yLog='+(frm.yLog.checked ? 1 : 0);
     195      url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
     196     
    218197      var plotType = getPlotType();
     198      url += '&type='+plotType;
     199      url += '&showXLabels='+(frm.hideXLabels.checked ? 0 : 1);
     200     
    219201      if (plotType == 'assay')
    220202      {
    221         var frm = document.forms['assay'];
    222         url += '&type=assay';
    223203        url += '&subtype=' + frm.subtype[frm.subtype.selectedIndex].value;
    224         url += '&y='+Main.encodeURI(frm.yFormula.value);
    225         url += '&yLog='+(frm.yLog.checked ? 1 : 0);
    226         url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
    227         url += '&showXLabels='+(frm.hideXLabels.checked ? 0 : 1);
    228204        if (frm.averageMethod)
    229205        {
     
    233209      else if (plotType == 'annotation')
    234210      {
    235         var frm = document.forms['annotation'];
    236         url += '&type=annotation';
    237         url += '&y='+Main.encodeURI(frm.yFormula.value);
    238         url += '&yLog='+(frm.yLog.checked ? 1 : 0);
    239         url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
    240211        url += '&annotationTypeId=' + frm.annotationTypeId[frm.annotationTypeId.selectedIndex].value;
    241212      }
     
    259230    if (url)
    260231    {
    261       url += '&width=600&height=400';
    262       var image = document.getElementById('preview');
    263       if (image.src.indexOf('plot_select') == -1)
    264       {
    265         var background = document.getElementById('background');
    266         background.src = image.src;
    267       }
    268       image.src = getRoot()+'images/plot_generating.gif';
    269       // Otherwise, the browser refuses to display the 'plot_generating.gif' while we are waiting.
    270       //setTimeout('changePreviewImage()', 100);
    271       image.realImg = new Image();
    272       image.realImg.onload = changePreviewImage;
    273       image.realImg.src = url;
     232      url += '&width=540&height=360';
     233
     234      var overlayImg = document.getElementById('overlay');
     235      overlayImg.src = getRoot()+'images/plot_generating.gif';
     236     
     237      var previewImg = document.getElementById('preview');
     238      previewImg.realImg = new Image();
     239      previewImg.realImg.onload = changePreviewImage;
     240      previewImg.realImg.src = url;
    274241    }
    275242  }
     
    277244  function changePreviewImage()
    278245  {
    279     var image = document.getElementById('preview');
    280     image.src = image.realImg.src;
    281     image.realImg = null;
     246    var previewImg = document.getElementById('preview');
     247    previewImg.src = previewImg.realImg.src;
     248    previewImg.realImg = null;
     249    var overlayImg = document.getElementById('overlay');
     250    overlayImg.src = getRoot() + 'images/blankbutton.gif';
    282251  }
    283252 
     
    292261      if (!width || width < 600) width = 600;
    293262      if (!height || height < 400) height = 400;
    294       Main.openPopup('../../plotter/view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+50, height+100);
     263      Main.openPopup('../../plotter/view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+150, height+100);
    295264    }
    296265  }
     
    301270    if (url)
    302271    {
    303       Main.openPopup('../../plotter/download.jsp?ID=<%=ID%>', 'DownloadPlot', 500, 260);
     272      Main.openPopup('../../plotter/download.jsp?ID=<%=ID%>', 'DownloadPlot', 300, 200);
    304273    }
    305274  }
     
    310279    if (url)
    311280    {
    312       Main.openPopup('../../plotter/save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 500, 260);
     281      Main.openPopup('../../plotter/save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 450, 300);
    313282    }
    314283  }
     
    316285  function init()
    317286  {
    318    
     287    plotTypeOnChange();
    319288  }
    320289  </script>
    321290  </base:head>
    322291  <base:body onload="init()">
    323  
    324   <h3 class="docked"><%=title%> <base:help tabcontrol="plotType" /></h3>
    325   <div class="boxed">
    326  
    327   <table border="0" cellspacing="0" cellpadding="2" width="100%">
    328   <tr >
    329     <td>
    330     <form name="plot">
    331     <table class="form">
    332     <tr>
    333       <td class="prompt">Plot title</td>
    334       <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="title"
    335         value="<%=HTML.encodeTags(bas.getName())%>"></td>
    336     </tr>
    337     <tr>
    338       <td class="prompt">Subtitle</td>
    339       <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="subTitle"
    340         value="<%=HTML.encodeTags(reporter.getName())%>"></td>
    341     </tr>
    342     <tr>
    343       <td class="prompt">Width</td>
    344       <td><input type="text" class="text" size="12" maxlength="10" name="width"
    345         value="800" onkeypress="return Numbers.integerOnly(event)"></td>
    346       <td rowspan="2">(not used by preview)</td>
    347     </tr>
    348     <tr>
    349       <td class="prompt">Height</td>
    350       <td><input type="text" class="text" size="12" maxlength="10" name="height"
    351         value="600" onkeypress="return Numbers.integerOnly(event)"></td>
    352     </tr>
    353     </table>
    354     </form>
    355     <p>
    356 
    357     <t:tabcontrol id="plotType"
    358       style="<%="width: "+(int)(scale*340)+"px;"%>"
    359       contentstyle="<%="height: "+(int)(scale*340)+"px;"%>"
    360       active="<%=plotType%>" remember="false"
    361       switch="switchTab">
    362     <t:tab id="assay" title="By bioassay" helpid="explorer.assayplot"
    363       tooltip="Create a line/bar plot with bioassays along the x axis">
    364       <form name="assay">
    365       <table border="0" cellspacing="0" cellpadding="2" class="form">
     292  <h1><%=title%> <base:help helpid="explorer.plotter" /></h1>
     293  <form name="plot">
     294  <div class="content bottomborder">
     295    <div class="absolutefull rightborder" style="right: 550px;">
     296 
     297      <table class="fullform input100 smaller">
     298      <tbody>
    366299      <tr>
    367         <td class="prompt">Plot type</td>
    368         <td colspan="2">
    369           <select name="subtype">
    370           <option value="line">Line plot</option>
    371           <option value="bar">Bar plot</option>
    372           </select>
     300        <th>Plot title</th>
     301        <td colspan="2"><input type="text" class="text" maxlength="255" name="title"
     302          value="<%=HTML.encodeTags(bas.getName())%>"></td>
    373303      </tr>
    374304      <tr>
    375         <td class="prompt" colspan="3">Y-axis</td>
     305        <th class="subprompt">Subtitle</th>
     306        <td colspan="2"><input type="text" class="text" maxlength="255" name="subTitle"
     307          value="<%=HTML.encodeTags(reporter.getName())%>"></td>
    376308      </tr>
    377       <tr>
    378         <td>&nbsp;Presets</td>
    379         <td colspan="2">
    380         <select name="yPresets" style="width: 20em;"
    381           onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)"
    382           >
    383           <option value="">- select from list or enter formula below -
    384           <%=formulaOptions.toString()%>
    385         </select>
    386         </td>
    387       </tr>
    388       <tr>
    389         <td>&nbsp;Expression</td>
    390         <td><input type="text" class="text required" size="30" maxlength="255" name="yFormula"></td>
    391         <td>
    392           <base:button
    393             title=""
    394             image="expression_builder.gif"
    395             tooltip="Use the Expression builder"
    396             onclick="openExpressionBuilder('Y-axis expression', 'assay', 'yFormula', 'COLUMN_EXPRESSION')"
    397           />
    398         </td>
    399       </tr>
    400       <tr>
    401         <td>&nbsp;Label</td>
    402         <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="yLabel"></td>
    403       </tr>
    404       <tr>
    405         <td>&nbsp;<label for="yLog">Log scale</label></td>
    406         <td colspan="2"><input type="checkbox" name="yLog" id="yLog" value="1"></td>
    407       </tr>
    408       <%
    409       if (positionIndex == ExperimentExplorer.SPOT_AVG)
    410       {
     309        <tr>
     310          <th>Width</th>
     311          <td colspan="2"><input type="text" class="text" style="width: 10em;" maxlength="10" name="width"
     312            value="900" onkeypress="return Numbers.integerOnly(event)"> (not used by preview)</td>
     313        </tr>
     314        <tr>
     315          <th>Height</th>
     316          <td colspan="2"><input type="text" class="text" style="width: 10em;" maxlength="10" name="height"
     317            value="600" onkeypress="return Numbers.integerOnly(event)"></td>
     318        </tr>
     319        <tr>
     320          <th class="subprompt"></th>
     321          <td colspan="2"></td>
     322        </tr>
     323      </tbody>
     324     
     325      <tbody class="simplesection">
     326        <tr>
     327          <th>Y-axis</th>
     328          <td>
     329          <select name="yPresets" style="width: 25em;"
     330            onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)"
     331            >
     332            <option value="">- select from list or enter formula below -
     333            <%=formulaOptions.toString()%>
     334          </select>
     335          </td>
     336          <td></td>
     337        </tr>
     338        <tr>
     339          <th class="subprompt">Expression</th>
     340          <td><input type="text" class="text required" maxlength="255" name="yFormula"></td>
     341          <td>
     342            <base:icon
     343              image="expression_builder.gif"
     344              tooltip="Use the Expression builder"
     345              onclick="openExpressionBuilder('Y-axis expression', 'plot', 'yFormula', 'COLUMN_EXPRESSION')"
     346            />
     347          </td>
     348        </tr>
     349        <tr>
     350          <th class="subprompt">Label</th>
     351          <td><input type="text" class="text" maxlength="255" name="yLabel"></td>
     352          <td></td>
     353        </tr>
     354        <tr>
     355          <th class="subprompt"><label for="yLog">Log scale</label></th>
     356          <td><input type="checkbox" name="yLog" id="yLog" value="1"></td>
     357          <td></td>
     358        </tr>
     359        <%
     360        if (positionIndex == ExperimentExplorer.SPOT_AVG)
     361        {
     362          %>
     363          <tr>
     364            <th class="subprompt">Average method</td>
     365            <td>
     366              <select name="averageMethod">
     367              <%
     368              for (Formula.AverageMethod method : Formula.AverageMethod.values())
     369              {
     370                if (method != Formula.AverageMethod.NONE)
     371                {
     372                  %>
     373                  <option value="<%=method.name()%>"><%=method.toString()%></option>
     374                  <%
     375                }
     376              }
     377              %>
     378              </select>
     379            </td>
     380            <td></td>
     381          </tr>
     382          <% 
     383        }
    411384        %>
    412385        <tr>
    413           <td>&nbsp;Average</td>
     386          <th>X-axis</th>
    414387          <td>
    415             <select name="averageMethod">
     388            <input type="radio" name="plotType" value="assay" onchange="plotTypeOnChange()"
     389              id="plotTypeAssay" <%=plotType.equals("assay") ? "checked" : ""%>
     390              ><label for="plotTypeAssay"
     391              title="Creates a line/bar plot with bioassays along the x axis">Bioassays</label>
     392            <input type="radio" name="plotType" value="annotation" onchange="plotTypeOnChange()"
     393              id="plotTypeAnnotation" <%=plotType.equals("annotation") ? "checked" : ""%>
     394              ><label for="plotTypeAnnotation"
     395              title="Creates a box plot with annotation values along the x axis">Annotation</label>
     396          </td>
     397          <td></td>
     398        </tr>
     399        <tr>
     400          <th class="subprompt">Annotation</td>
     401          <td>
     402            <select name="annotationTypeId" class="selectionlist">
    416403            <%
    417             for (Formula.AverageMethod method : Formula.AverageMethod.values())
     404            for (AnnotationType at : annotationTypes)
    418405            {
    419               if (method != Formula.AverageMethod.NONE)
    420               {
    421                 %>
    422                 <option value="<%=method.name()%>"><%=method.toString()%></option>
    423                 <%
    424               }
     406              String selected = at.getId() == annotationTypeId ? "selected" : "";
     407              %>
     408              <option value="<%=at.getId()%>" <%=selected%>><%=HTML.encodeTags(at.getName())%>
     409              <%
    425410            }
    426411            %>
    427412            </select>
    428413          </td>
    429         <% 
    430       }
    431       %>
    432       <tr>
    433         <td class="prompt" colspan="3">X-axis</td>
    434       </tr>
    435       <tr>
    436         <td>&nbsp;<label for="hideXLabels">No labels</label></td>
    437         <td><input type="checkbox" name="hideXLabels" id="hideXLabels" value="1"></td>
     414          <td></td>
     415        </tr>
     416        <tr>
     417          <th class="subprompt"><label for="hideXLabels">No labels</label></th>
     418          <td><input type="checkbox" name="hideXLabels" id="hideXLabels" value="1"></td>
     419          <td></td>
     420        </tr>
     421        <tr>
     422          <th>Plot type</th>
     423          <td>
     424            <select name="subtype">
     425            <option value="line">Line plot</option>
     426            <option value="bar">Bar plot</option>
     427            </select>
     428          <td></td>
     429        </tr>
     430      </tbody>
     431
     432      <tr class="dynamic">
     433        <th></th>
     434        <td colspan="2"></td>
    438435      </tr>
    439436      </table>
    440       </form>
    441     </t:tab>
    442     <t:tab id="annotation" title="By annotation" helpid="explorer.annotationplot"
    443       tooltip="Create a box plot with annotation values along the x axis">
    444       <form name="annotation">
    445       <table border="0" cellspacing="0" cellpadding="2" class="form">
    446       <tr>
    447         <td class="prompt" colspan="3">Y-axis</td>
    448       </tr>
    449       <tr>
    450         <td>&nbsp;Presets</td>
    451         <td colspan="2">
    452         <select name="yPresets" style="width: 20em;"
    453           onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)"
    454           >
    455           <option value="">- select from list or enter formula below -
    456           <%=formulaOptions.toString()%>
    457         </select>
    458         </td>
    459       </tr>
    460       <tr>
    461         <td>&nbsp;Expression</td>
    462         <td><input type="text" class="text required" size="30" maxlength="255" name="yFormula"></td>
    463         <td>
    464           <base:button
    465             title=""
    466             image="expression_builder.gif"
    467             tooltip="Use the Expression builder"
    468             onclick="openExpressionBuilder('Y-axis expression', 'annotation', 'yFormula', 'COLUMN_EXPRESSION')"
    469           />
    470         </td>
    471       </tr>
    472       <tr>
    473         <td>&nbsp;Label</td>
    474         <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="yLabel"></td>
    475       </tr>
    476       <tr>
    477         <td>&nbsp;<label for="yLogAnnotation">Log scale</label></td>
    478         <td colspan="2"><input type="checkbox" name="yLog" id="yLogAnnotation" value="1"></td>
    479       </tr>
    480       <%
    481       if (positionIndex == ExperimentExplorer.SPOT_AVG)
    482       {
    483         %>
    484         <tr>
    485           <td>&nbsp;Average</td>
    486           <td>
    487             <select name="averageMethod">
    488             <%
    489             for (Formula.AverageMethod method : Formula.AverageMethod.values())
    490             {
    491               if (method != Formula.AverageMethod.NONE)
    492               {
    493                 %>
    494                 <option value="<%=method.name()%>"><%=method.toString()%></option>
    495                 <%
    496               }
    497             }
    498             %>
    499             </select>
    500           </td>
    501         <% 
    502       }
    503       %>
    504       <tr>
    505         <td class="prompt" colspan="3">X-axis</td>
    506       </tr>
    507       <tr>
    508         <td>&nbsp;Annotation</td>
    509         <td>
    510           <select name="annotationTypeId">
    511           <%
    512           for (AnnotationType at : annotationTypes)
    513           {
    514             String selected = at.getId() == annotationTypeId ? "selected" : "";
    515             %>
    516             <option value="<%=at.getId()%>" <%=selected%>><%=HTML.encodeTags(at.getName())%>
    517             <%
    518           }
    519           %>
    520           </select>
    521         </td>
    522       </tr>
    523       </table>
    524       </form>
    525     </t:tab>
    526     </t:tabcontrol>
    527     </td>
    528     <td xstyle="width: 600px;">
    529       <div style="position: relative; top: 0px; left: 0px; width: 600px; height: 400px; padding-bottom: 2px;">
    530       <img src="../../../../images/plot_empty.png" id="background"
    531         style="position: absolute; top: 0px; left: 0px; z-index: 1; border: 1px solid #999999;">
    532       <img src="../../../../images/plot_select.gif" id="preview"
    533         style="position: relative; top: 0px; left: 0px; z-index: 2; border: 1px solid #999999;">
    534       </div>
    535     </td>
    536   </tr>
    537   </table>
     437
     438    </div>
     439    <div class="absolutefull filled" style="width: 550px; left: auto;">
     440      <img src="../../../../images/plot_empty.png" id="preview"
     441        style="position: absolute; top: 5px; z-index: 1;">
     442      <img src="../../../../images/plot_select.png" id="overlay"
     443        style="position: absolute; top: 5px; z-index: 2;">
     444    </div>
     445 
    538446  </div>
    539     <p>
    540     <div align="center">
    541     <base:buttongroup>
    542       <base:button title="Preview" onclick="previewPlot()"
    543         image="plotter_preview.gif" tooltip="Generate a preview of the plot"
    544       />
    545       <base:button title="View&hellip;" onclick="viewPlot()"
    546         image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)"
    547       />
    548       <base:button title="Download&hellip;" onclick="downloadPlot()"
    549         image="download.gif"
    550         tooltip="Downlad a fullsized version of the plot to you computer"
    551       />
    552       <base:button title="Save as&hellip;" onclick="savePlotAs()"
    553         image="<%=hasCreateFilePermission ? "saveas.gif" : "saveas_disabled.gif"%>"
    554         disabled="<%=!hasCreateFilePermission%>"
    555         tooltip="<%=hasCreateFilePermission ?
    556           "Save a fullsized version of the plot on the BASE server" :
    557           "You don't have permission to create files" %>"
    558       />
    559       <base:button onclick="window.close()" title="Close" />
    560     </base:buttongroup>
    561     </div>
     447  </form>
     448 
     449  <base:buttongroup subclass="dialogbuttons">
     450    <base:button title="Preview" onclick="previewPlot()"
     451      image="plotter_preview.gif" tooltip="Generate a preview of the plot"
     452    />
     453    <base:button title="View&hellip;" onclick="viewPlot()"
     454      image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)"
     455    />
     456    <base:button title="Download&hellip;" onclick="downloadPlot()"
     457      image="download.gif"
     458      tooltip="Downlad a fullsized version of the plot to your computer"
     459    />
     460    <base:button title="Save as&hellip;" onclick="savePlotAs()"
     461      image="saveas.gif"
     462      disabled="<%=!hasCreateFilePermission%>"
     463      tooltip="<%=hasCreateFilePermission ?
     464        "Save a fullsized version of the plot on the BASE server" :
     465        "You don't have permission to create files" %>"
     466    />
     467    <base:button onclick="window.close()" title="Close" />
     468  </base:buttongroup>
    562469 
    563470  </base:body>
  • trunk/www/views/experiments/explorer/view/view.jsp

    r5892 r5924  
    264264      url += '&reporterIndex=<%=reporterIndex%>';
    265265      url += '&positionIndex=<%=positionIndex%>';
    266       Main.openPopup(url, 'AssayPlot', 1100, 700);
     266      Main.openPopup(url, 'AssayPlot', 1050, 700);
    267267    }
    268268    function annotationPlot(annotationType)
     
    273273      url += '&positionIndex=<%=positionIndex%>';
    274274      url += '&annotationTypeId=' + annotationType;
    275       Main.openPopup(url, 'AnnotationPlot', 1100, 700);
     275      Main.openPopup(url, 'AnnotationPlot', 1050, 700);
    276276    }
    277277  </script>
  • trunk/www/views/experiments/plotter/download.jsp

    r5426 r5924  
    3535final String ID = sc.getId();
    3636%>
    37 <base:page type="popup" title="Save as">
     37<base:page type="popup" title="Generating plot">
    3838<base:head>
    3939  <script language="JavaScript">
    40   // Initialise - set focus to filename field
    4140  function download()
    4241  {
     
    4847</base:head>
    4948<base:body onload="download()">
    50   <p>
     49  <h1>Generating plot...</h1>
    5150
    52   <base:note type="info" title="Generating plot">
    53   Generating plot. Please wait...
    54   </base:note>
     51  <div class="content">
     52    <table class="fullcc"><tr><td>
     53    <b>Generating plot. Please wait...</b>
     54    </td></tr></table>
     55  </div>
    5556
    56     <table align="center">
    57     <tr>
    58       <td><base:button onclick="window.close();" title="Close" /></td>
    59     </tr>
    60     </table>
    61 
    62 
     57  <base:buttongroup subclass="dialogbuttons">
     58    <base:button onclick="window.close();" title="Close" />
     59  </base:buttongroup>
    6360</base:body>
    6461</base:page>
  • trunk/www/views/experiments/plotter/index.jsp

    r5905 r5924  
    154154  function validateScatterPlot()
    155155  {
    156     var frm = document.forms['scatter'];
    157     if (Main.trimString(frm.yFormula.value) == '')
     156    var frm = document.forms['plot'];
     157    if (Main.trimString(frm.yFormulaScatter.value) == '')
    158158    {
    159159      alert("You must enter an expression for the Y axis");
    160       frm.yFormula.focus();
     160      frm.yFormulaScatter.focus();
    161161      return false;
    162162    }
    163     else if (Main.trimString(frm.xFormula.value) == '')
     163    else if (Main.trimString(frm.xFormulaScatter.value) == '')
    164164    {
    165165      alert("You must enter an expression for the X axis");
    166       frm.xFormula.focus();
     166      frm.xFormulaScatter.focus();
    167167      return false;
    168168    }
     
    171171  function validateHistogramPlot()
    172172  {
    173     var frm = document.forms['histogram'];
     173    var frm = document.forms['plot'];
    174174    var yAggregate = Forms.getCheckedRadio(frm.yAggregate).value;
    175     if (Main.trimString(frm.xFormula.value) == '')
     175    if (Main.trimString(frm.xFormulaHistogram.value) == '')
    176176    {
    177177      alert("You must enter an expression for the X axis");
    178       frm.xFormula.focus();
     178      frm.xFormulaHistogram.focus();
    179179      return false;
    180180    }
    181     else if (yAggregate != 'count' && Main.trimString(frm.yFormula.value) == '')
     181    else if (yAggregate != 'count' && Main.trimString(frm.yFormulaHistogram.value) == '')
    182182    {
    183183      alert("You must enter an expression for the Y axis");
    184       frm.yFormula.focus();
     184      frm.yFormulaHistogram.focus();
    185185      return false;
    186186    }
     
    188188  }
    189189
    190   var plotType = 'scatter';
    191190  function getPlotType()
    192191  {
    193     return plotType;
    194   }
    195 
    196   function switchTab(tabControlId, tabId)
    197   {
    198     if (tabId == 'scatter' || tabId == 'histogram')
    199     {
    200       plotType = tabId;
    201     }
    202     TabControl.setActiveTab(tabControlId, tabId);
     192    var frm = document.forms['plot'];
     193    return Forms.getCheckedRadio(frm.plotType).value;
     194  }
     195
     196  function plotTypeOnChange()
     197  {
     198    var isScatter = getPlotType() == 'scatter';
     199    Main.showHide('scatterSection', isScatter);
     200    Main.showHide('histogramSection', !isScatter);
    203201  }
    204202
     
    213211  function aggregateOnChange()
    214212  {
    215     var frm = document.forms['histogram'];
     213    var frm = document.forms['plot'];
    216214    var selected = Forms.getCheckedRadio(frm.yAggregate);
    217215    var isCount = selected.value == 'count';
    218     frm.yFormula.disabled = isCount;
    219     frm.yPresets.disabled = isCount;
    220     frm.yLog.disabled = isCount;
     216    frm.yFormulaHistogram.disabled = isCount;
     217    frm.yPresetsHistogram.disabled = isCount;
     218    frm.yLogHistogram.disabled = isCount;
    221219    for (var i = 0; i < frm.hiloAggregate.length; i++)
    222220    {
     
    225223    if (isCount)
    226224    {
    227       Main.removeClass(frm.yFormula, 'required');
    228       frm.yLabel.value = 'Count';
     225      Main.removeClass(frm.yFormulaHistogram, 'required');
     226      frm.yLabelHistogram.value = 'Count';
    229227    }
    230228    else
    231229    {
    232       Main.addClass(frm.yFormula, 'required');
    233       var yPreset = frm.yPresets[frm.yPresets.selectedIndex];
    234       if (yPreset.value != '') frm.yLabel.value = yPreset.text;
     230      Main.addClass(frm.yFormulaHistogram, 'required');
     231      var yPreset = frm.yPresetsHistogram[frm.yPresetsHistogram.selectedIndex];
     232      if (yPreset.value != '') frm.yLabelHistogram.value = yPresetHistogram.text;
    235233    }
    236234  }
     
    244242    frm.subTitle.value = value;
    245243   
    246     var annotationFrm = document.forms['annotation'];
    247244    if (selected.value.substring(0, 1) == '$')
    248245    {
    249       annotationFrm.annotationExp.disabled = true;
     246      frm.annotationExp.disabled = true;
    250247    }
    251248    else
     
    253250      if (selected.value)
    254251      {
    255         annotationFrm.annotationExp.value = selected.value;
     252        frm.annotationExp.value = selected.value;
    256253      }
    257       annotationFrm.annotationExp.disabled = false;
    258       annotationFrm.annotationExp.focus();
     254      frm.annotationExp.disabled = false;
     255      frm.annotationExp.focus();
    259256    }
    260257  }
     
    262259  function annotationExpressionOnChange()
    263260  {
    264     var annotationFrm = document.forms['annotation'];
    265     annotationFrm.annotationPresets.selectedIndex = annotationFrm.annotationPresets.length-1;
     261    var frm = document.forms['plot'];
     262    frm.annotationPresets.selectedIndex = annotationFrm.annotationPresets.length-1;
    266263  }
    267264 
     
    270267    if (validate())
    271268    {
    272       var plotFrm = document.forms['plot'];
     269      var frm = document.forms['plot'];
    273270      var url = 'plot?ID=<%=ID%>&bioassayset_id=<%=bioAssaySetId%>&bioassay_id=<%=bioAssayId%>';
    274       url += '&title='+Main.encodeURI(plotFrm.title.value);
    275       url += '&subTitle='+Main.encodeURI(plotFrm.subTitle.value);
     271      url += '&title='+Main.encodeURI(frm.title.value);
     272      url += '&subTitle='+Main.encodeURI(frm.subTitle.value);
    276273      if (fullSize)
    277274      {
    278         url += '&width='+plotFrm.width.value;
    279         url += '&height='+plotFrm.height.value;
     275        url += '&width='+frm.width.value;
     276        url += '&height='+frm.height.value;
    280277      }
    281278     
    282       var filterFrm = document.forms['filter'];
    283       if (filterFrm.filter.value != '')
     279      if (frm.filter.value != '')
    284280      {
    285         url += '&filter='+Main.encodeURI(filterFrm.filter.value);
     281        url += '&filter='+Main.encodeURI(frm.filter.value);
    286282      }
    287283     
    288       var annotationFrm = document.forms['annotation'];
    289284      var annotation = '';
    290       if (!annotationFrm.annotationExp.disabled)
     285      if (!frm.annotationExp.disabled)
    291286      {
    292         if (annotationFrm.annotationExp.value)
     287        if (frm.annotationExp.value)
    293288        {
    294           annotation = '=' + annotationFrm.annotationExp.value;
     289          annotation = '=' + frm.annotationExp.value;
    295290        }
    296291      }
    297292      else
    298293      {
    299         annotation = annotationFrm.annotationPresets[annotationFrm.annotationPresets.selectedIndex].value.substring(1);
     294        annotation = frm.annotationPresets[frm.annotationPresets.selectedIndex].value.substring(1);
    300295      }
    301296      if (annotation)
     
    307302      if (plotType == 'scatter')
    308303      {
    309         var frm = document.forms['scatter'];
    310304        url += '&type=scatter';
    311         url += '&x='+Main.encodeURI(frm.xFormula.value);
    312         url += '&xLog='+(frm.xLog.checked ? 1 : 0);
    313         url += '&xLabel='+Main.encodeURI(frm.xLabel.value);
    314         url += '&y='+Main.encodeURI(frm.yFormula.value);
    315         url += '&yLog='+(frm.yLog.checked ? 1 : 0);
    316         url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
     305        url += '&x='+Main.encodeURI(frm.xFormulaScatter.value);
     306        url += '&xLabel='+Main.encodeURI(frm.xLabelScatter.value);
     307        url += '&xLog='+(frm.xLogScatter.checked ? 1 : 0);
     308        url += '&y='+Main.encodeURI(frm.yFormulaScatter.value);
     309        url += '&yLabel='+Main.encodeURI(frm.yLabelScatter.value);
     310        url += '&yLog='+(frm.yLogScatter.checked ? 1 : 0);
    317311      }
    318312      else
    319313      {
    320         var frm = document.forms['histogram'];
    321314        var yAggregate = Forms.getCheckedRadio(frm.yAggregate).value;
    322315        url += '&type=histogram';
    323         url += '&x='+Main.encodeURI(frm.xFormula.value);
    324         url += '&xLog='+(frm.xLog.checked ? 1 : 0);
    325         url += '&xLabel='+Main.encodeURI(frm.xLabel.value);
     316        url += '&x='+Main.encodeURI(frm.xFormulaHistogram.value);
     317        url += '&xLabel='+Main.encodeURI(frm.xLabelHistogram.value);
     318        url += '&xLog='+(frm.xLogHistogram.checked ? 1 : 0);
    326319        url += '&binSize='+Main.encodeURI(frm.binSize.value);
    327320        url += '&yAggregate='+yAggregate;
     321        url += '&yLabel='+Main.encodeURI(frm.yLabelHistogram.value);
    328322        if (yAggregate != 'count')
    329323        {
    330           url += '&y='+Main.encodeURI(frm.yFormula.value);
    331           url += '&yLog='+(frm.yLog.checked ? 1 : 0);
     324          url += '&y='+Main.encodeURI(frm.yFormulaHistogram.value);
     325          url += '&yLog='+(frm.yLogHistogram.checked ? 1 : 0);
    332326          url += '&hiloAggregate='+Forms.getCheckedRadio(frm.hiloAggregate).value
    333327        }
    334         url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
    335328      }
    336329      return url;
     
    352345    if (url)
    353346    {
    354       url += '&width=600&height=400';
    355       var image = document.getElementById('preview');
    356       if (image.src.indexOf('plot_select') == -1)
    357       {
    358         var background = document.getElementById('background');
    359         background.src = image.src;
    360       }
    361       image.src = getRoot()+'images/plot_generating.gif';
    362       // Otherwise, the browser refuses to display the 'plot_generating.gif' while we are waiting.
    363       //setTimeout('changePreviewImage()', 100);
    364       image.realImg = new Image();
    365       image.realImg.onload = changePreviewImage;
    366       image.realImg.src = url;
     347      url += '&width=540&height=360';
     348
     349      var overlayImg = document.getElementById('overlay');
     350      overlayImg.src = getRoot()+'images/plot_generating.gif';
     351     
     352      var previewImg = document.getElementById('preview');
     353      previewImg.realImg = new Image();
     354      previewImg.realImg.onload = changePreviewImage;
     355      previewImg.realImg.src = url;
    367356    }
    368357  }
     
    370359  function changePreviewImage()
    371360  {
    372     var image = document.getElementById('preview');
    373     image.src = image.realImg.src;
    374     image.realImg = null;
     361    var previewImg = document.getElementById('preview');
     362    previewImg.src = previewImg.realImg.src;
     363    previewImg.realImg = null;
     364    var overlayImg = document.getElementById('overlay');
     365    overlayImg.src = getRoot() + 'images/blankbutton.gif';
    375366  }
    376367 
     
    385376      if (!width || width < 600) width = 600;
    386377      if (!height || height < 400) height = 400;
    387       Main.openPopup('view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+50, height+100);
     378      Main.openPopup('view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+150, height+100);
    388379    }
    389380  }
     
    394385    if (url)
    395386    {
    396       Main.openPopup('download.jsp?ID=<%=ID%>', 'DownloadPlot', 500, 260);
     387      Main.openPopup('download.jsp?ID=<%=ID%>', 'DownloadPlot', 300, 200);
    397388    }
    398389  }
     
    403394    if (url)
    404395    {
    405       Main.openPopup('save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 500, 260);
     396      Main.openPopup('save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 450, 300);
    406397    }
    407398  }
     
    409400  function init()
    410401  {
    411     aggregateOnChange();
    412402  }
    413403  </script>
    414404  </base:head>
    415405  <base:body onload="init()">
    416  
    417   <h3 class="docked"><%=title%> <base:help tabcontrol="plotType" /></h3>
    418   <div class="boxed">
    419  
    420   <table border="0" cellspacing="0" cellpadding="2" width="100%">
    421   <tr >
    422     <td>
    423     <form name="plot">
    424     <table class="form">
    425     <tr>
    426       <td class="prompt">Plot title</td>
    427       <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="title"
    428         value="<%=HTML.encodeTags(ba == null ? bas.getName() : ba.getName())%>"></td>
    429     </tr>
    430     <tr>
    431       <td class="prompt">Subtitle</td>
    432       <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="subTitle"
    433         value=""></td>
    434     </tr>
    435     <tr>
    436       <td class="prompt">Width</td>
    437       <td><input type="text" class="text" size="12" maxlength="10" name="width"
    438         value="800" onkeypress="return Numbers.integerOnly(event)"></td>
    439       <td rowspan="2">(not used by preview)</td>
    440     </tr>
    441     <tr>
    442       <td class="prompt">Height</td>
    443       <td><input type="text" class="text" size="12" maxlength="10" name="height"
    444         value="600" onkeypress="return Numbers.integerOnly(event)"></td>
    445     </tr>
    446     </table>
    447     </form>
    448     <p>
    449 
    450     <t:tabcontrol id="plotType" style="<%="width: "+(int)(scale*340)+"px;"%>" contentstyle="<%="height: "+(int)(scale*340)+"px;"%>"
    451       switch="switchTab">
    452     <t:tab id="scatter" title="Scatter plot" helpid="plotter.scatterplot"
    453       tooltip="Create a scatter plot">
    454       <form name="scatter">
    455       <table border="0" cellspacing="0" cellpadding="2" class="form">
    456       <tr>
    457         <td class="prompt" colspan="3">Y-axis</td>
    458       </tr>
    459       <tr>
    460         <td>&nbsp;Presets</td>
    461         <td colspan="2">
    462         <select name="yPresets" style="width: 20em;"
    463           onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)"
    464           >
    465           <option value="">- select from list or enter formula below -
    466           <%=formulaOptions.toString()%>
    467         </select>
    468         </td>
    469       </tr>
    470       <tr>
    471         <td>&nbsp;Expression</td>
    472         <td><input type="text" class="text required" size="30" maxlength="255" name="yFormula"></td>
    473         <td>
    474           <base:button
    475             title=""
    476             image="expression_builder.gif"
    477             tooltip="Use the Expression builder"
    478             onclick="openExpressionBuilder('Y-axis expression', 'scatter', 'yFormula', 'COLUMN_EXPRESSION')"
    479           />
    480         </td>
    481       </tr>
    482       <tr>
    483         <td>&nbsp;Label</td>
    484         <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="yLabel"></td>
    485       </tr>
    486       <tr>
    487         <td>&nbsp;<label for="yLogScatter">Log scale</label></td>
    488         <td colspan="2"><input type="checkbox" name="yLog" id="yLogScatter" value="1"></td>
    489       </tr>
    490       <tr>
    491         <td class="prompt" colspan="3">X-axis</td>
    492       </tr>
    493       <tr>
    494         <td>Presets</td>
    495         <td colspan="2">
    496         <select name="xPresets" style="width: 20em;"
    497           onchange="presetOnChange(this, this.form.xFormula, this.form.xLabel)"
    498           >
    499           <option value="">- select from list or enter formula below -
    500           <%=formulaOptions.toString()%>
    501         </select>
    502         </td>
    503       </tr>
    504       <tr>
    505         <td>Expression</td>
    506         <td><input type="text" class="text required" size="30" maxlength="255" name="xFormula"></td>
    507         <td>
    508           <base:button
    509             title=""
    510             image="expression_builder.gif"
    511             tooltip="Use the Expression builder"
    512             onclick="openExpressionBuilder('X-axis expression', 'scatter', 'xFormula', 'COLUMN_EXPRESSION')"
    513           />
    514         </td>
    515       </tr>
    516       <tr>
    517         <td>Label</td>
    518         <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="xLabel"></td>
    519       </tr>
    520       <tr>
    521         <td><label for="xLogScatter">Log scale</label></td>
    522         <td colspan="2"><input type="checkbox" name="xLog" id="xLogScatter" value="1"></td>
     406  <h1><%=title%> <base:help helpid="plotter" /></h1>
     407  <form name="plot">
     408  <div class="content bottomborder">
     409    <div class="absolutefull rightborder" style="right: 550px;">
     410      <table class="fullform input100 smaller">
     411      <tbody>
     412        <tr>
     413          <th>Plot title</th>
     414          <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="title"
     415            value="<%=HTML.encodeTags(ba == null ? bas.getName() : ba.getName())%>"></td>
     416        </tr>
     417        <tr>
     418          <th class="subprompt">Subtitle</th>
     419          <td colspan="2"><input type="text" class="text" maxlength="255" name="subTitle"
     420            value=""></td>
     421        </tr>
     422        <tr>
     423          <th>Width</th>
     424          <td colspan="2"><input type="text" class="text" style="width: 10em;" maxlength="10" name="width"
     425            value="900" onkeypress="return Numbers.integerOnly(event)"> (not used by preview)</td>
     426        </tr>
     427        <tr>
     428          <th>Height</th>
     429          <td colspan="2"><input type="text" class="text" style="width: 10em;" maxlength="10" name="height"
     430            value="600" onkeypress="return Numbers.integerOnly(event)"></td>
     431        </tr>
     432        <tr>
     433          <th class="subprompt"></th>
     434          <td colspan="2"></td>
     435        </tr>
     436      </tbody>
     437      <tbody class="sectionheader">
     438        <tr>
     439          <th>Plot type</th>
     440          <td colspan="2">
     441            <input type="radio" name="plotType" value="scatter" onchange="plotTypeOnChange()"
     442              id="plotTypeScatter" checked><label for="plotTypeScatter">Scatter</label>
     443            <input type="radio" name="plotType" value="histogram" onchange="plotTypeOnChange()"
     444              id="plotTypeHistogram"><label for="plotTypeHistogram">Histogram</label>
     445          </td>
     446        </tr>
     447      </tbody>
     448      <tbody id="scatterSection">
     449        <tr>
     450          <th>Y-axis</th>
     451          <td>
     452          <select name="yPresetsScatter" style="width: 25em;"
     453            onchange="presetOnChange(this, this.form.yFormulaScatter, this.form.yLabelScatter)"
     454            >
     455            <option value="">- select from list or enter formula below -
     456            <%=formulaOptions.toString()%>
     457          </select>
     458          </td>
     459          <td></td>
     460        </tr>
     461        <tr>
     462          <th class="subprompt">Expression</th>
     463          <td><input type="text" class="text required" maxlength="255" name="yFormulaScatter"></td>
     464          <td>
     465            <base:icon
     466              image="expression_builder.gif"
     467              tooltip="Use the Expression builder"
     468              onclick="openExpressionBuilder('Y-axis expression', 'plot', 'yFormulaScatter', 'COLUMN_EXPRESSION')"
     469            />
     470          </td>
     471        </tr>
     472        <tr>
     473          <th class="subprompt">Y label</th>
     474          <td><input type="text" class="text" maxlength="255" name="yLabelScatter" value=""></td>
     475          <td></td>
     476        </tr>
     477        <tr>
     478          <th class="subprompt"><label for="yLogScatter">Log scale</label></th>
     479          <td><input type="checkbox" name="yLogScatter" id="yLogScatter" value="1"></td>
     480          <td></td>
     481        </tr>
     482        <tr>
     483          <th>X-axis</th>
     484          <td>
     485          <select name="xPresetsScatter" style="width: 25em;"
     486            onchange="presetOnChange(this, this.form.xFormulaScatter, this.form.xLabelScatter)"
     487            >
     488            <option value="">- select from list or enter formula below -
     489            <%=formulaOptions.toString()%>
     490          </select>
     491          </td>
     492          <td></td>
     493        </tr>
     494        <tr>
     495          <th class="subprompt">Expression</th>
     496          <td><input type="text" class="text required" maxlength="255" name="xFormulaScatter"></td>
     497          <td>
     498            <base:icon
     499              image="expression_builder.gif"
     500              tooltip="Use the Expression builder"
     501              onclick="openExpressionBuilder('X-axis expression', 'plot', 'xFormulaScatter', 'COLUMN_EXPRESSION')"
     502            />
     503          </td>
     504        </tr>
     505        <tr>
     506          <th class="subprompt">X label</th>
     507          <td><input type="text" class="text" maxlength="255" name="xLabelScatter" value=""></td>
     508          <td></td>
     509        </tr>
     510        <tr>
     511          <th class="subprompt"><label for="xLogScatter">Log scale</label></th>
     512          <td><input type="checkbox" name="xLogScatter" id="xLogScatter" value="1"></td>
     513          <td></td>
     514        </tr>
     515      </tbody>
     516     
     517      <tbody id="histogramSection" style="display: none;">
     518        <tr>
     519          <th>Y-axis</th>
     520          <td>
     521            <input type="radio" name="yAggregate" id="yAggregateCount" value="count" checked
     522              onchange="aggregateOnChange()"><label for="yAggregateCount">Count</label>
     523            <input type="radio" name="yAggregate" id="yAggregateMean" value="mean"
     524              onchange="aggregateOnChange()"><label for="yAggregateMean">Mean</label>
     525          </td>
     526          <td></td>
     527        </tr>
     528        <tr>
     529          <th class="subprompt">Hi-lo</th>
     530          <td>
     531            <input type="radio" name="hiloAggregate" id="hiloAggregateNone" value="" checked
     532              ><label for="hiloAggregateNone">None</label>
     533            <input type="radio" name="hiloAggregate" id="hiloAggregateMinMax" value="hilomaxmin"
     534              ><label for="hiloAggregateMinMax">Min/Max</label>
     535            <input type="radio" name="hiloAggregate" id="hiloAggregateStdev" value="hilostdev"
     536              ><label for="hiloAggregateStdev">Stdev</label>
     537          </td>
     538          <td></td>
     539        </tr>
     540        <tr>
     541          <th class="subprompt">Presets</th>
     542          <td>
     543          <select name="yPresetsHistogram" style="width: 25em;"
     544            onchange="presetOnChange(this, this.form.yFormulaHistogram, this.form.yLabelHistogram)"
     545            disabled
     546            >
     547            <option value="">- select from list or enter formula below -
     548            <%=formulaOptions.toString()%>
     549          </select>
     550          </td>
     551          <td></td>
     552        </tr>
     553        <tr>
     554          <th class="subprompt">Expression</th>
     555          <td><input type="text" class="text" maxlength="255" name="yFormulaHistogram" disabled></td>
     556          <td>
     557            <base:icon
     558              image="expression_builder.gif"
     559              tooltip="Use the Expression builder"
     560              onclick="openExpressionBuilder('Y-axis expression', 'plot', 'yFormulaHistogram', 'COLUMN_EXPRESSION')"
     561            />
     562          </td>
     563        </tr>
     564        <tr>
     565          <th class="subprompt">Y label</th>
     566          <td><input type="text" class="text" maxlength="255" name="yLabelHistogram" value="Count"></td>
     567          <td></td>
     568        </tr>
     569        <tr>
     570          <th class="subprompt"><label for="yLogHistogram">Log scale</label></th>
     571          <td><input type="checkbox" name="yLogHistogram" id="yLogHistogram" value="1"></td>
     572          <td></td>
     573        </tr>
     574        <tr>
     575          <th>X-axis</th>
     576          <td>
     577          <select name="xPresetsHistogram"  style="width: 25em;"
     578            onchange="presetOnChange(this, this.form.xFormulaHistogram, this.form.xLabelHistogram)"
     579            >
     580            <option value="">- select from list or enter formula below -
     581            <%=formulaOptions.toString()%>
     582          </select>
     583          </td>
     584          <td></td>
     585        </tr>
     586        <tr>
     587          <th class="subprompt">Expression</th>
     588          <td><input type="text" class="text required" maxlength="255" name="xFormulaHistogram"></td>
     589          <td>
     590            <base:icon
     591              image="expression_builder.gif"
     592              tooltip="Use the Expression builder"
     593              onclick="openExpressionBuilder('X-axis expression', 'plot', 'xFormulaHistogram', 'COLUMN_EXPRESSION')"
     594            />
     595          </td>
     596        </tr>
     597        <tr>
     598          <th class="subprompt">X label</th>
     599          <td><input type="text" class="text" maxlength="255" name="xLabelHistogram" value=""></td>
     600          <td></td>
     601        </tr>
     602        <tr>
     603          <th class="subprompt"><label for="xLogHistogram">Log scale</label></th>
     604          <td><input type="checkbox" name="xLogHistogram" id="xLogHistogram" value="1"></td>
     605          <td></td>
     606        </tr>
     607        <tr>
     608          <th class="subprompt">Bin size</th>
     609          <td><input type="text" class="text" name="binSize" value="1" style="width: 10em;"></td>
     610          <td></td>
     611        </tr>
     612      </tbody>
     613      <tbody>
     614        <tr>
     615          <th class="subprompt"></th>
     616          <td colspan="2"></td>
     617        </tr>
     618      </tbody>
     619      <tbody class="sectionheader">
     620        <tr>
     621          <th colspan="3">Filter &amp; annotations</th>
     622        </tr>
     623      </tbody>
     624      <tbody>
     625        <tr>
     626          <th>Filter</th>
     627          <td colspan="2">
     628            <select name="filterPresets" style="width: 25em;"
     629              onchange="presetOnChange(this, this.form.filter, null)"
     630              >
     631              <option value="">- select from list or enter formula below -
     632              <%=filterOptions.toString()%>
     633            </select>
     634          </td>
     635        </tr>
     636        <tr>
     637          <th class="subprompt"></th>
     638          <td><input type="text" class="text" maxlength="255" name="filter" placeholder="leave empty to plot all values"></td>
     639          <td>
     640            <base:icon
     641              image="expression_builder.gif"
     642              tooltip="Use the Expression builder"
     643              onclick="openExpressionBuilder('Filter expression', 'plot', 'filter', 'COLUMN_RESTRICTION')"
     644            />
     645          </td>
     646        </tr>
     647        <tr>
     648          <th>Annotation</th>
     649          <td colspan="2">
     650            <select name="annotationPresets" onchange="annotationOnChange(this)" style="width: 25em;">
     651              <option value="$">- none -
     652              <%
     653              if (ba == null)
     654              {
     655                %>
     656                <option value="$bioassay">Bioassay
     657                <option value="$spots">Spots
     658                <option value="$arrayDesign.name">Array design
     659                <option value="$software.name">Software
     660                <option value="$protocol.name">Protocol
     661                <option value="$scan.scanner.name">Scanner
     662                <option value="$scan.protocol.name">Scanning protocol
     663                <option value="$scan.hybridization.protocol.name">Hybridization protocol
     664                <option value="$scan.hybridization.creationEvent.eventDate">Hybridization date
     665                <option value="" disabled>- annotations -
     666                <%
     667                for (AnnotationType at : experimentalFactors)
     668                {
     669                  %>
     670                  <option value="$<%=at.getId()%>">[A] <%=HTML.encodeTags(at.getName())%>
     671                  <%
     672                }
     673              }
     674              %>
     675              <option value="" disabled>- expressions -
     676              <%=filterOptions.toString()%>
     677              <option value="">Other...
     678            </select>
     679          </td>
     680        </tr>
     681        <tr>
     682          <th class="subprompt"></th>
     683          <td><input type="text" class="text" maxlength="255" name="annotationExp"
     684            onchange="annotationExpressionOnChange()" disabled></td>
     685          <td>
     686            <base:icon
     687              image="expression_builder.gif"
     688              tooltip="Use the Expression builder"
     689              onclick="openExpressionBuilder('Annotation filter', 'plot', 'annotationExp', 'COLUMN_RESTRICTION')"
     690            />
     691          </td>
     692        </tr>
     693      </tbody>
     694      <tr class="dynamic">
     695        <th></th>
     696        <td colspan="2"></td>
    523697      </tr>
    524698      </table>
    525       </form>
    526     </t:tab>
    527 
    528     <t:tab id="histogram" title="Histogram plot" helpid="plotter.histogram"
    529       tooltip="Create a histogram plot">
    530       <form name="histogram">
    531       <table border="0" cellspacing="0" cellpadding="2" class="form">
    532       <tr>
    533         <td class="prompt" >Y-axis</td>
    534         <td colspan="2">
    535           <input type="radio" name="yAggregate" id="yAggregateCount" value="count" checked
    536             onchange="aggregateOnChange()"><label for="yAggregateCount">Count</label>
    537           <input type="radio" name="yAggregate" id="yAggregateMean" value="mean"
    538             onchange="aggregateOnChange()"><label for="yAggregateMean">Mean</label>
    539         </td>
    540       </tr>
    541       <tr>
    542         <td>&nbsp;Hi-lo</td>
    543         <td colspan="2">
    544           <input type="radio" name="hiloAggregate" id="hiloAggregateNone" value="" checked
    545             ><label for="hiloAggregateNone">None</label>
    546           <input type="radio" name="hiloAggregate" id="hiloAggregateMinMax" value="hilomaxmin"
    547             ><label for="hiloAggregateMinMax">Min/Max</label>
    548           <input type="radio" name="hiloAggregate" id="hiloAggregateStdev" value="hilostdev"
    549             ><label for="hiloAggregateStdev">Stdev</label>
    550         </td>
    551       </tr>
    552       <tr>
    553         <td>&nbsp;Presets</td>
    554         <td colspan="2">
    555         <select name="yPresets" style="width: 20em;"
    556           onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)"
    557           disabled
    558           >
    559           <option value="">- select from list or enter formula below -
    560           <%=formulaOptions.toString()%>
    561         </select>
    562         </td>
    563       </tr>
    564       <tr>
    565         <td>&nbsp;Expression</td>
    566         <td><input type="text" class="text" size="30" maxlength="255" name="yFormula" disabled></td>
    567         <td>
    568           <base:button
    569             title=""
    570             image="expression_builder.gif"
    571             tooltip="Use the Expression builder"
    572             onclick="openExpressionBuilder('Y-axis expression', 'histogram', 'yFormula', 'COLUMN_EXPRESSION')"
    573           />
    574         </td>
    575       </tr>
    576 
    577       <tr>
    578         <td>&nbsp;Label</td>
    579         <td colspan="2"><input type="text" class="text" size="30" maxlength="255"
    580           name="yLabel" value="Count"></td>
    581       </tr>
    582       <tr>
    583         <td>&nbsp;<label for="yLogHist">Log scale</label></td>
    584         <td colspan="2"><input type="checkbox" name="yLog" id="yLogHist" value="1"></td>
    585       </tr>
    586       <tr>
    587         <td class="prompt" colspan="3">X-axis</td>
    588       </tr>
    589       <tr>
    590         <td>Presets</td>
    591         <td colspan="2">
    592         <select name="xPresets"  style="width: 20em;"
    593           onchange="presetOnChange(this, this.form.xFormula, this.form.xLabel)"
    594           >
    595           <option value="">- select from list or enter formula below -
    596           <%=formulaOptions.toString()%>
    597         </select>
    598         </td>
    599       </tr>
    600       <tr>
    601         <td>Expression</td>
    602         <td><input type="text" class="text required" size="30"
    603           maxlength="255" name="xFormula"></td>
    604         <td>
    605           <base:button
    606             title=""
    607             image="expression_builder.gif"
    608             tooltip="Use the Expression builder"
    609             onclick="openExpressionBuilder('X-axis expression', 'histogram', 'xFormula', 'COLUMN_EXPRESSION')"
    610           />
    611         </td>
    612       </tr>
    613       <tr>
    614         <td>Label</td>
    615         <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="xLabel"></td>
    616       </tr>
    617       <tr>
    618         <td><label for="xLogHist">Log scale</label></td>
    619         <td colspan="2"><input type="checkbox" name="xLog" id="xLogHist" value="1"></td>
    620       </tr>
    621       <tr>
    622         <td>Bin size</td>
    623         <td colspan="2"><input type="text" class="text" name="binSize" value="1"></td>
    624       </tr>
    625       </table>
    626       </form>
    627     </t:tab>
     699    </div>
    628700   
    629     <t:tab id="filter" title="Filter" helpid="plotter.filter"
    630       tooltip="Specify a filter for spots that should be included in the plot">
    631       <form name="filter">
    632       <table border="0" cellspacing="0" cellpadding="2" class="form">
    633       <tr>
    634         <td class="prompt" colspan="2">Filter</td>
    635       </tr>
    636       <tr>
    637         <td>&nbsp;Presets</td>
    638         <td colspan="2">
    639         <select name="filterPresets" style="width: 20em;"
    640           onchange="presetOnChange(this, this.form.filter, null)"
    641           >
    642           <option value="">- select from list or enter formula below -
    643           <%=filterOptions.toString()%>
    644         </select>
    645         </td>
    646       </tr>
    647       <tr>
    648         <td>&nbsp;Expression</td>
    649         <td><input type="text" class="text" size="30" maxlength="255" name="filter"></td>
    650         <td>
    651           <base:button
    652             title=""
    653             image="expression_builder.gif"
    654             tooltip="Use the Expression builder"
    655             onclick="openExpressionBuilder('Filter expression', 'filter', 'filter', 'COLUMN_RESTRICTION')"
    656           />
    657         </td>
    658       </tr>
    659       </table>
    660       </form>
    661     </t:tab>
    662    
    663     <t:tab id="annotation" title="Annotation" helpid="plotter.annotation"
    664       tooltip="Specify a property or expression for sub-grouping the plotted values">
    665       <form name="annotation">
    666      
    667       <table border="0" cellspacing="0" cellpadding="2" class="form">
    668       <tr>
    669         <td class="prompt" colspan="2">Annotation</td>
    670       </tr>
    671       <tr>
    672         <td>&nbsp;Presets</td>
    673         <td colspan="2">
    674         <select name="annotationPresets" onchange="annotationOnChange(this)">
    675           <option value="$">- none -
    676           <%
    677           if (ba == null)
    678           {
    679             %>
    680             <option value="$bioassay">Bioassay
    681             <option value="$spots">Spots
    682             <option value="$arrayDesign.name">Array design
    683             <option value="$software.name">Software
    684             <option value="$protocol.name">Protocol
    685             <option value="$scan.scanner.name">Scanner
    686             <option value="$scan.protocol.name">Scanning protocol
    687             <option value="$scan.hybridization.protocol.name">Hybridization protocol
    688             <option value="$scan.hybridization.creationEvent.eventDate">Hybridization date
    689             <option value="" disabled>- annotations -
    690             <%
    691             for (AnnotationType at : experimentalFactors)
    692             {
    693               %>
    694               <option value="$<%=at.getId()%>">[A] <%=HTML.encodeTags(at.getName())%>
    695               <%
    696             }
    697           }
    698           %>
    699           <option value="" disabled>- expressions -
    700           <%=filterOptions.toString()%>
    701           <option value="">Other...
    702         </select>
    703         </td>
    704       </tr>
    705       <tr>
    706         <td>&nbsp;Expression</td>
    707         <td><input type="text" class="text" size="30" maxlength="255" name="annotationExp"
    708           onchange="annotationExpressionOnChange()" disabled></td>
    709         <td>
    710           <base:button
    711             title=""
    712             image="expression_builder.gif"
    713             tooltip="Use the Expression builder"
    714             onclick="openExpressionBuilder('Annotation filter', 'annotation', 'annotationExp', 'COLUMN_RESTRICTION')"
    715           />
    716         </td>
    717       </tr>
    718       </table>
    719       </form>
    720     </t:tab>
    721    
    722     </t:tabcontrol>
    723     </td>
    724     <td xstyle="width: 600px;">
    725       <div style="position: relative; top: 0px; left: 0px; width: 600px; height: 400px; padding-bottom: 2px;">
    726       <img src="../../../images/plot_empty.png" id="background"
    727         style="position: absolute; top: 0px; left: 0px; z-index: 1; border: 1px solid #999999;">
    728       <img src="../../../images/plot_select.gif" id="preview"
    729         style="position: relative; top: 0px; left: 0px; z-index: 2; border: 1px solid #999999;">
    730       </div>
    731     </td>
    732   </tr>
    733   </table>
     701    <div class="absolutefull filled" style="width: 550px; left: auto;">
     702       
     703          <img src="../../../images/plot_empty.png" id="preview"
     704            style="position: absolute; top: 5px; z-index: 1;">
     705          <img src="../../../images/plot_select.png" id="overlay"
     706            style="position: absolute; top: 5px; z-index: 2;">
     707    </div>
    734708  </div>
    735     <p>
    736     <div align="center">
    737     <base:buttongroup>
    738       <base:button title="Preview" onclick="previewPlot()"
    739         image="plotter_preview.gif" tooltip="Generate a preview of the plot"
    740       />
    741       <base:button title="View&hellip;" onclick="viewPlot()"
    742         image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)"
    743       />
    744       <base:button title="Download&hellip;" onclick="downloadPlot()"
    745         image="download.gif"
    746         tooltip="Downlad a fullsized version of the plot to you computer"
    747       />
    748       <base:button title="Save as&hellip;" onclick="savePlotAs()"
    749         image="<%=hasCreateFilePermission ? "saveas.gif" : "saveas_disabled.gif"%>"
    750         disabled="<%=!hasCreateFilePermission%>"
    751         tooltip="<%=hasCreateFilePermission ?
    752           "Save a fullsized version of the plot on the BASE server" :
    753           "You don't have permission to create files" %>"
    754       />
    755       <base:button onclick="window.close()" title="Close" />
    756     </base:buttongroup>
    757     </div>
     709  </form>
     710 
     711  <base:buttongroup subclass="dialogbuttons">
     712    <base:button title="Preview" onclick="previewPlot()"
     713      image="plotter_preview.gif" tooltip="Generate a preview of the plot"
     714    />
     715    <base:button title="View&hellip;" onclick="viewPlot()"
     716      image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)"
     717    />
     718    <base:button title="Download&hellip;" onclick="downloadPlot()"
     719      image="download.gif"
     720      tooltip="Downlad a fullsized version of the plot to your computer"
     721    />
     722    <base:button title="Save as&hellip;" onclick="savePlotAs()"
     723      image="saveas.gif"
     724      disabled="<%=!hasCreateFilePermission%>"
     725      tooltip="<%=hasCreateFilePermission ?
     726        "Save a fullsized version of the plot on the BASE server" :
     727        "You don't have permission to create files" %>"
     728    />
     729    <base:button onclick="window.close()" title="Close" />
     730  </base:buttongroup>
    758731 
    759732  </base:body>
  • trunk/www/views/experiments/plotter/save_as.jsp

    r5905 r5924  
    8282        url += '&overwrite=' + (frm.overwrite.checked ? 1 : 0);
    8383        Main.hide('save');
     84        Main.hide('buttons');
    8485        Main.show('generating');
    8586        location.href = url;
     
    9091</base:head>
    9192<base:body onload="init()">
    92   <p>
    93   <form name="saveas" onsubmit="return false;">
     93  <h1>Save plot</h1>
     94 
     95  <form name="saveas" onsubmit="return false;">
     96  <div class="content bottomborder" id="save">
     97    <table class="fullform input100 smaller">
     98    <tr>
     99      <th>Save as</th>
     100      <td>
     101        <table style="width: 100%;">
     102        <tr>
     103          <td><input type="text" class="text" name="path" value=""></td>
     104          <td style="width: 10em;"><base:button
     105            title="Browse&hellip;"
     106            onclick="browseOnClick()"
     107            /></td>
     108        </tr>
     109        </table>
     110      </td>
     111    </tr>
     112    <tr>
     113      <th class="subprompt"></th>
     114      <td>
     115        <input type="checkbox" name="overwrite" id="overwrite" value="1"><label for="overwrite">Overwrite existing file</label><br>
     116      </td>
     117    </tr>
     118    <tr class="dynamic">
     119      <th></th>
     120      <td></td>
     121    </table>
     122  </div>
     123  </form>
    94124
    95   <div id="save">
    96     <h3 class="docked">Save as <base:help helpid="plotter.saveas" /></h3>
    97     <div class="boxed" align="center">
    98       <br>
    99       <table class="form" cellspacing="0" border="0">
    100         <tr >
    101           <td class="prompt">Filename</td>
    102           <td>
    103             <table border="0" cellspacing="0" cellpadding="0">
    104             <tr>
    105             <td><input type="text" class="text" name="path" size="40" value="">&nbsp;</td>
    106             <td><base:button
    107                 title="Browse..."
    108                 onclick="browseOnClick()"
    109                 /></td>
    110             </tr>
    111             </table>
    112             <input type="checkbox" name="overwrite" id="overwrite" value="1"><label for="overwrite">Overwrite existing file</label><br>
    113           </td>
    114         </tr>
    115       </table>
    116       <p>
    117     </div>
    118 
    119     <table align="center">
    120     <tr>
    121       <td width="50%"><base:button onclick="saveAs();" title="Ok" /></td>
    122       <td width="50%"><base:button onclick="window.close();" title="Cancel" /></td>
    123     </tr>
    124     </table>
    125 
    126   </div>
    127 
    128   <div id="generating" style="display: none">
    129     <base:note type="info" title="Generating plot">
    130     Generating plot. Please wait...
    131     </base:note>
     125  <base:buttongroup subclass="dialogbuttons" id="buttons">
     126    <base:button onclick="saveAs();" title="Ok" />
     127    <base:button onclick="window.close();" title="Cancel" />
     128  </base:buttongroup>
     129 
     130  <div class="content" id="generating" style="display: none">
     131    <table class="fullcc"><tr><td>
     132    <b>Generating plot. Please wait...</b>
     133    </td></tr></table>
    132134  </div>
    133135 
    134   </form>
    135 
    136 
    137136</base:body>
    138137</base:page>
  • trunk/www/views/experiments/plotter/view.jsp

    r5426 r5924  
    5656</base:head>
    5757<base:body onload="view()">
    58   <p>
    59 
    60     <h3 class="docked"><%=title%></h3>
    61     <div class="boxed">
    62     <img src="../../../images/plot_generating.gif" id="plot">
     58    <h1><%=title%></h1>
     59    <div class="content">
     60      <table class="fullcc"><tr><td>
     61      <img src="../../../images/plot_generating.gif" id="plot">
     62      </td></tr></table>
    6363    </div>
    6464
    65     <table align="center">
    66     <tr>
    67       <td><base:button onclick="window.close();" title="Close" /></td>
    68     </tr>
    69     </table>
    70 
     65    <base:buttongroup subclass="dialogbuttons">
     66      <base:button onclick="window.close();" title="Close" />
     67    </base:buttongroup>
    7168
    7269</base:body>
  • trunk/www/views/jobs/view_job.jsp

    r5914 r5924  
    482482      <t:tab id="parameters" title="Parameters" helpid="job.view.parameters">
    483483        <table class="fullform outlined">
    484         <tbody class="section">
     484        <tbody class="sectionheader">
    485485          <tr>
    486486            <th colspan="2">Job parameters</th>
     
    544544          %>
    545545          </tbody>
    546           <tbody class="section">
     546          <tbody class="sectionheader">
    547547            <tr>
    548548              <th colspan="2">Plugin configuration parameters</th>
     
    560560          %>
    561561          </tbody>
    562           <tbody class="section">
     562          <tbody class="sectionheader">
    563563            <tr>
    564564              <th colspan="2">Plugin configuration parameters</th>
  • trunk/www/views/rawbioassays/edit_spotimages.jsp

    r5915 r5924  
    204204    <div class="content filled bottomborder">
    205205      <table class="fullform input100">
    206       <tbody class="section">
     206      <tbody class="sectionheader">
    207207        <tr>
    208208          <th colspan="4">Scale, offset, etc. for the spots</th>
     
    252252      </tr>
    253253      </tbody>
    254       <tbody class="section">
     254      <tbody class="sectionheader">
    255255        <tr>
    256256          <th colspan="4">Raw image files</th>
  • trunk/www/views/rawbioassays/rawdata/view_rawdata.jsp

    r5915 r5924  
    109109   
    110110      <table class="fullform outlined larger">
    111       <tbody class="section">
     111      <tbody class="sectionheader">
    112112        <tr>
    113113          <th colspan="4">Common rawdata properties</th>
     
    168168      </tbody>
    169169     
    170       <tbody class="section">
     170      <tbody class="sectionheader">
    171171        <tr>
    172172          <th colspan="4"><%=rawDataType.getName()%> properties</th>
     
    222222      <t:tab id="reporter" title="Reporter" >
    223223        <table class="fullform outlined">
    224         <tbody class="section">
     224        <tbody class="sectionheader">
    225225          <tr>
    226226            <th colspan="4">Common reporter properties</th>
     
    253253        </tbody>
    254254       
    255         <tbody class="section">
     255        <tbody class="sectionheader">
    256256          <tr>
    257257            <th colspan="4">Extended reporter properties</th>
     
    321321      <t:tab id="feature" title="Feature / well" >
    322322      <table class="fullform outlined">
    323         <tbody class="section">
     323        <tbody class="sectionheader">
    324324          <tr>
    325325            <th colspan="6">Feature</th>
     
    369369        </tbody>
    370370       
    371         <tbody class="section">
     371        <tbody class="sectionheader">
    372372          <tr>
    373373            <th colspan="6">Plate position</th>
Note: See TracChangeset for help on using the changeset viewer.