Changeset 5924

Timestamp:

Jan 13, 2012, 2:10:52 PM (11 years ago)

Author:

Nicklas Nordborg

Message:

References #1655: GUI improvements

Plot functions for spot data and in experiment explorer.

Location:

trunk

Files:

• src/clients/web/net/sf/basedb/clients/web/servlet/ExperimentExplorerPlotServlet.java (modified) (2 diffs)
• src/clients/web/net/sf/basedb/clients/web/servlet/PlotServlet.java (modified) (2 diffs)
• www/admin/extensions/details.jsp (modified) (1 diff)
• www/images/parameter.gif (modified) (previous)
• www/images/plot_empty.png (modified) (previous)
• www/images/plot_empty_400x300.png (modified) (previous)
• www/images/plot_error.gif (deleted)
• www/images/plot_error.png (added)
• www/images/plot_generating.gif (modified) (previous)
• www/images/plot_generating_400x300.gif (modified) (previous)
• www/images/plot_select.gif (deleted)
• www/images/plot_select.png (added)
• www/images/required.gif (modified) (previous)
• www/include/styles/main.css (modified) (8 diffs)
• www/include/styles/popup.css (modified) (2 diffs)
• www/include/styles/tabcontrol.css (modified) (1 diff)
• www/lims/arraydesigns/features/view_feature.jsp (modified) (5 diffs)
• www/lims/arrayslides/create_wizard.jsp (modified) (1 diff)
• www/views/experiments/bioassays/view_bioassay.jsp (modified) (1 diff)
• www/views/experiments/bioassaysets/analysis_tree.jsp (modified) (1 diff)
• www/views/experiments/bioassaysets/view_bioassayset.jsp (modified) (2 diffs)
• www/views/experiments/explorer/view/plotter.jsp (modified) (10 diffs)
• www/views/experiments/explorer/view/view.jsp (modified) (2 diffs)
• www/views/experiments/plotter/download.jsp (modified) (2 diffs)
• www/views/experiments/plotter/index.jsp (modified) (16 diffs)
• www/views/experiments/plotter/save_as.jsp (modified) (2 diffs)
• www/views/experiments/plotter/view.jsp (modified) (1 diff)
• www/views/jobs/view_job.jsp (modified) (3 diffs)
• www/views/rawbioassays/edit_spotimages.jsp (modified) (2 diffs)
• www/views/rawbioassays/rawdata/view_rawdata.jsp (modified) (6 diffs)

trunk/src/clients/web/net/sf/basedb/clients/web/servlet/ExperimentExplorerPlotServlet.java

@@ -332 +332 @@
         if (title != null) chart.setTitle(title);
         if (subTitle != null) chart.addSubtitle(new TextTitle(subTitle));
+        chart.setBackgroundPaint(null);
 
         // Render the image
@@ -352 +353 @@
         {
           // Otherwise... create a new (bigger) image...
-          image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
+          image = new BufferedImage(width, height, BufferedImage.TYPE_4BYTE_ABGR);
           Graphics2D g = image.createGraphics();
-          g.setBackground(Color.WHITE);
+          g.setBackground(new Color(255, 255, 255, 0));
           g.clearRect(0, 0, width, height);
           g.setColor(Color.BLACK);

trunk/src/clients/web/net/sf/basedb/clients/web/servlet/PlotServlet.java

@@ -563 +563 @@
           if (!hasAnnotation) chart.removeLegend();
           if (subTitle != null) chart.addSubtitle(new TextTitle(subTitle));
+          chart.setBackgroundPaint(null);
           image = chart.createBufferedImage(width, height);
         }
@@ -663 +664 @@
         {
           // Something went wrong when genering the error image - send redirect to a predefined image
-          response.sendRedirect(request.getContextPath() + "/images/plot_error.gif");
+          response.sendRedirect(request.getContextPath() + "/images/plot_error.png");
         }
       }

trunk/www/admin/extensions/details.jsp

@@ -362 +362 @@
         {
           %>
-          <tbody class="section">
+          <tbody class="sectionheader">
             <tr>
               <th colspan="2">Extension point</th>

trunk/www/include/styles/main.css

@@ -54 +54 @@
 {
   border: 0px;
-  xvertical-align: text-bottom;
+  vertical-align: text-bottom;
 }
 
@@ -375 +375 @@
 .bottomborder
 {
-  border-bottom: 1px solid #A0A0A0;
+  border-bottom: 1px solid #A0A0A0 !important;
 }
 
@@ -381 +381 @@
 .topborder
 {
-  border-top: 1px solid #A0A0A0;
+  border-top: 1px solid #A0A0A0 !important;
 }
 
@@ -387 +387 @@
 .rightborder
 {
-  border-right: 1px solid #A0A0A0;
+  border-right: 1px solid #A0A0A0 !important;
 }
 
@@ -393 +393 @@
 .leftborder
 {
-  border-left: 1px solid #A0A0A0;
+  border-left: 1px solid #A0A0A0 !important;
 }
 
@@ -399 +399 @@
 .filled
 {
-  background: #E8E8E8;
+  background: #E8E8E8 !important;
 }
 
@@ -513 +513 @@
 }
 
+/* Regular cells have a white background */
+table.fullform > tbody > tr > td
+{
+  background: #FFFFFF;
+  padding: 0px 2px 0px 2px;
+}
+
 /* First row has no top border */
 table.fullform > tbody > tr:first-child > th, table.fullform > tbody > tr:first-child > td
@@ -528 +535 @@
 
 /* A section row should span the entire table */
-table.fullform > tbody.section > tr > th
+table.fullform > tbody.sectionheader > tr > th, table.fullform > tbody.sectionheader > tr > td
 {
   border-top: 1px solid #A0A0A0;
   border-bottom: 1px solid #A0A0A0;
   border-right: 0px;
+  background: #E8E8E8;
   white-space: normal;
 }
 
-/* First tbody section shouldn't have a top border */
-table.fullform > tbody.section:first-child > tr > th
+/* First child after a section header shouldn't have a top border */
+table.fullform > tbody.sectionheader:first-child > tr > th
 {
   border-top: 0px solid #A0A0A0;
 }
 
-/* Regular cells have a white background */
-table.fullform > tbody > tr > td
-{
-  background: #FFFFFF;
-  padding: 0px 2px 0px 2px;
+/* A simple section has a solid top border on the first child row */
+table.fullform > tbody.simplesection > tr:first-child > *
+{
+  border-top: 1px solid #A0A0A0;
 }
 

trunk/www/include/styles/popup.css

@@ -85 +85 @@
 }
 
-
 /* fullcc is used for 100% width+height content that is centered vertically+horizontally */
 .popup .content table.fullcc
@@ -128 +127 @@
 }
 
+.popup .legend img
+{
+  vertical-align: middle !important;
+}
+
 /* 
   Buttons and related 

trunk/www/include/styles/tabcontrol.css

@@ -139 +139 @@
   border-top: 1px solid #A0A0A0;
 }
+
+
+/* Specific for tabcontrol with tabs on top */
+.tabsattop .tabs
+{
+  vertical-align: bottom;
+}
+
+.tabsattop .tab 
+{
+  /* Rounded corners at bottom */
+  border-radius: 5px 5px 0px 0px;
+}
+
+/* Hide bottom border from active tab */
+.tabsattop .tab.active
+{
+  border-bottom: 1px solid #E8E8E8 !important;
+  border-top: 2px solid #2288AA !important;
+  padding-top: 1px !important;
+}
+
+/* Add bottom border on tabspace */
+.tabsattop .tabspace
+{
+  border-bottom: 1px solid #A0A0A0;
+}
+
+.tabsattop .tabfillbefore
+{
+  width: 5px;
+  min-width: 5px;
+  max-width: 5px;
+  border-bottom: 1px solid #A0A0A0;
+}
+
+.tabsattop .tabfillafter
+{
+  width: 99%;
+  border-bottom: 1px solid #A0A0A0;
+}
+
 
 /* Use all but the bottom 2em for tab contents */

trunk/www/lims/arraydesigns/features/view_feature.jsp

@@ -120 +120 @@
     
       <table class="fullform outlined">
-      <tbody class="section">
+      <tbody class="sectionheader">
         <tr>
           <th colspan="6">Array design</th>
@@ -140 +140 @@
       </tbody>
       
-      <tbody class="section">
+      <tbody class="sectionheader">
         <tr>
           <th colspan="6">Feature / block</th>
@@ -189 +189 @@
       </tbody>
       
-      <tbody class="section">
+      <tbody class="sectionheader">
         <tr>
           <th colspan="6">Plage / well</th>
@@ -255 +255 @@
       <t:tab id="reporter" title="Reporter" >
         <table class="fullform outlined">
-        <tbody class="section">
+        <tbody class="sectionheader">
           <tr>
             <th colspan="4">Common reporter properties</th>
@@ -286 +286 @@
         </tbody>
         
-        <tbody class="section">
+        <tbody class="sectionheader">
           <tr>
             <th colspan="4">Extended reporter properties</th>

trunk/www/lims/arrayslides/create_wizard.jsp

@@ -338 +338 @@
             <col span="2" style="width: 47%;">
           </colgroup>
-          <tbody class="section">
+          <tbody class="sectionheader">
           <tr>
             <th>&nbsp;</th>

trunk/www/views/experiments/bioassays/view_bioassay.jsp

@@ -119 +119 @@
     function openPlotTool()
     {
-      Main.openPopup('../plotter/index.jsp?ID=<%=ID%>&bioassay_id=<%=itemId%>', 'Plotter', 1000, 700);
+      Main.openPopup('../plotter/index.jsp?ID=<%=ID%>&bioassay_id=<%=itemId%>', 'Plotter', 1050, 700);
     }
     </script>

trunk/www/views/experiments/bioassaysets/analysis_tree.jsp

@@ -382 +382 @@
     function openPlotTool(itemId)
     {
-      Main.openPopup('../plotter/index.jsp?ID=<%=ID%>&bioassayset_id='+itemId, 'Plotter', 1000, 700);
+      Main.openPopup('../plotter/index.jsp?ID=<%=ID%>&bioassayset_id='+itemId, 'Plotter', 1050, 700);
     }
     function openExperimentExplorer(itemId)

trunk/www/views/experiments/bioassaysets/view_bioassayset.jsp

@@ -214 +214 @@
         {
           img.src = img.realImg.src;
+          img.style.background = 'transparent';
           setTimeout('loadNextImage()', 100);
         };
@@ -248 +249 @@
     </script>
     <style>
-    .plot {
-      border: 1px solid #666666; 
+    .plot 
+    {
+      border: 1px solid #A0A0A0; 
       background-image: url('../../../images/plot_empty_400x300.png');
       margin: 2px;

trunk/www/views/experiments/explorer/view/plotter.jsp

@@ -136 +136 @@
   function validate()
   {
-    var plotType = getPlotType();
-    if (plotType == 'assay')
-    {
-      return validateAssayPlot();
-    }
-    else if (plotType == 'annotation')
-    {
-      return validateAnnotationPlot();
-    }
-    return false;
-  }
-  
-  function validateAssayPlot()
-  {
-    var frm = document.forms['assay'];
+    var frm = document.forms['plot'];
     if (Main.trimString(frm.yFormula.value) == '')
     {
@@ -160 +146 @@
   }
   
-  function validateAnnotationPlot()
-  {
-    var frm = document.forms['annotation'];
-    if (Main.trimString(frm.yFormula.value) == '')
-    {
-      alert("You must enter an expression for the Y axis");
-      frm.yFormula.focus();
-      return false;
-    }
-    return true;
-  }
-  
-  var plotType = '<%=plotType%>';
   function getPlotType()
   {
-    return plotType;
-  }
-
-  function switchTab(tabControlId, tabId)
-  {
-    if (tabId == 'assay' || tabId == 'annotation')
-    {
-      plotType = tabId;
-    }
-    TabControl.setActiveTab(tabControlId, tabId);
-  }
-
+    var frm = document.forms['plot'];
+    return Forms.getCheckedRadio(frm.plotType).value;
+  }
+
+  function plotTypeOnChange()
+  {
+    var plotType = getPlotType();
+    var frm = document.forms['plot'];
+    var isAssayPlot = plotType == 'assay';
+    frm.annotationTypeId.disabled = isAssayPlot;
+    frm.subtype.disabled = !isAssayPlot;
+  }
+  
   function presetOnChange(list, formula, label)
   {
@@ -205 +179 @@
     if (validate())
     {
-      var plotFrm = document.forms['plot'];
+      var frm = document.forms['plot'];
       var url = getRoot() + 'views/experiments/explorer/plot';
       url += '?ID=<%=ID%>&bioAssaySetId=<%=bioAssaySetId%>';
       url += '&reporterIndex=<%=reporterIndex%>&positionIndex=<%=positionIndex%>';
-      url += '&title='+Main.encodeURI(plotFrm.title.value);
-      url += '&subTitle='+Main.encodeURI(plotFrm.subTitle.value);
+      url += '&title='+Main.encodeURI(frm.title.value);
+      url += '&subTitle='+Main.encodeURI(frm.subTitle.value);
       if (fullSize)
       {
-        url += '&width='+plotFrm.width.value;
-        url += '&height='+plotFrm.height.value;
+        url += '&width='+frm.width.value;
+        url += '&height='+frm.height.value;
       }
+      
+      url += '&y='+Main.encodeURI(frm.yFormula.value);
+      url += '&yLog='+(frm.yLog.checked ? 1 : 0);
+      url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
+      
       var plotType = getPlotType();
+      url += '&type='+plotType;
+      url += '&showXLabels='+(frm.hideXLabels.checked ? 0 : 1);
+      
       if (plotType == 'assay')
       {
-        var frm = document.forms['assay'];
-        url += '&type=assay';
         url += '&subtype=' + frm.subtype[frm.subtype.selectedIndex].value;
-        url += '&y='+Main.encodeURI(frm.yFormula.value);
-        url += '&yLog='+(frm.yLog.checked ? 1 : 0);
-        url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
-        url += '&showXLabels='+(frm.hideXLabels.checked ? 0 : 1);
         if (frm.averageMethod)
         {
@@ -233 +209 @@
       else if (plotType == 'annotation')
       {
-        var frm = document.forms['annotation'];
-        url += '&type=annotation';
-        url += '&y='+Main.encodeURI(frm.yFormula.value);
-        url += '&yLog='+(frm.yLog.checked ? 1 : 0);
-        url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
         url += '&annotationTypeId=' + frm.annotationTypeId[frm.annotationTypeId.selectedIndex].value;
       }
@@ -259 +230 @@
     if (url)
     {
-      url += '&width=600&height=400';
-      var image = document.getElementById('preview');
-      if (image.src.indexOf('plot_select') == -1)
-      {
-        var background = document.getElementById('background');
-        background.src = image.src;
-      }
-      image.src = getRoot()+'images/plot_generating.gif';
-      // Otherwise, the browser refuses to display the 'plot_generating.gif' while we are waiting.
-      //setTimeout('changePreviewImage()', 100);
-      image.realImg = new Image();
-      image.realImg.onload = changePreviewImage;
-      image.realImg.src = url;
+      url += '&width=540&height=360';
+
+      var overlayImg = document.getElementById('overlay');
+      overlayImg.src = getRoot()+'images/plot_generating.gif';
+      
+      var previewImg = document.getElementById('preview');
+      previewImg.realImg = new Image();
+      previewImg.realImg.onload = changePreviewImage;
+      previewImg.realImg.src = url;
     }
   }
@@ -277 +244 @@
   function changePreviewImage()
   {
-    var image = document.getElementById('preview');
-    image.src = image.realImg.src;
-    image.realImg = null;
+    var previewImg = document.getElementById('preview');
+    previewImg.src = previewImg.realImg.src;
+    previewImg.realImg = null;
+    var overlayImg = document.getElementById('overlay');
+    overlayImg.src = getRoot() + 'images/blankbutton.gif';
   }
   
@@ -292 +261 @@
       if (!width || width < 600) width = 600;
       if (!height || height < 400) height = 400;
-      Main.openPopup('../../plotter/view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+50, height+100);
+      Main.openPopup('../../plotter/view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+150, height+100);
     }
   }
@@ -301 +270 @@
     if (url)
     {
-      Main.openPopup('../../plotter/download.jsp?ID=<%=ID%>', 'DownloadPlot', 500, 260);
+      Main.openPopup('../../plotter/download.jsp?ID=<%=ID%>', 'DownloadPlot', 300, 200);
     }
   }
@@ -310 +279 @@
     if (url)
     {
-      Main.openPopup('../../plotter/save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 500, 260);
+      Main.openPopup('../../plotter/save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 450, 300);
     }
   }
@@ -316 +285 @@
   function init()
   {
-    
+    plotTypeOnChange();
   }
   </script>
   </base:head>
   <base:body onload="init()">
-  
-  <h3 class="docked"><%=title%> <base:help tabcontrol="plotType" /></h3>
-  <div class="boxed">
-  
-  <table border="0" cellspacing="0" cellpadding="2" width="100%">
-  <tr >
-    <td>
-    <form name="plot">
-    <table class="form">
-    <tr>
-      <td class="prompt">Plot title</td>
-      <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="title" 
-        value="<%=HTML.encodeTags(bas.getName())%>"></td>
-    </tr>
-    <tr>
-      <td class="prompt">Subtitle</td>
-      <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="subTitle" 
-        value="<%=HTML.encodeTags(reporter.getName())%>"></td>
-    </tr>
-    <tr>
-      <td class="prompt">Width</td>
-      <td><input type="text" class="text" size="12" maxlength="10" name="width" 
-        value="800" onkeypress="return Numbers.integerOnly(event)"></td>
-      <td rowspan="2">(not used by preview)</td>
-    </tr>
-    <tr>
-      <td class="prompt">Height</td>
-      <td><input type="text" class="text" size="12" maxlength="10" name="height" 
-        value="600" onkeypress="return Numbers.integerOnly(event)"></td>
-    </tr>
-    </table>
-    </form>
-    <p>
-
-    <t:tabcontrol id="plotType" 
-      style="<%="width: "+(int)(scale*340)+"px;"%>" 
-      contentstyle="<%="height: "+(int)(scale*340)+"px;"%>"
-      active="<%=plotType%>" remember="false"
-      switch="switchTab">
-    <t:tab id="assay" title="By bioassay" helpid="explorer.assayplot"
-      tooltip="Create a line/bar plot with bioassays along the x axis">
-      <form name="assay">
-      <table border="0" cellspacing="0" cellpadding="2" class="form">
+  <h1><%=title%> <base:help helpid="explorer.plotter" /></h1>
+  <form name="plot">
+  <div class="content bottomborder">
+    <div class="absolutefull rightborder" style="right: 550px;">
+  
+      <table class="fullform input100 smaller">
+      <tbody>
       <tr>
-        <td class="prompt">Plot type</td>
-        <td colspan="2">
-          <select name="subtype">
-          <option value="line">Line plot</option>
-          <option value="bar">Bar plot</option>
-          </select>
+        <th>Plot title</th>
+        <td colspan="2"><input type="text" class="text" maxlength="255" name="title" 
+          value="<%=HTML.encodeTags(bas.getName())%>"></td>
       </tr>
       <tr>
-        <td class="prompt" colspan="3">Y-axis</td>
+        <th class="subprompt">Subtitle</th>
+        <td colspan="2"><input type="text" class="text" maxlength="255" name="subTitle" 
+          value="<%=HTML.encodeTags(reporter.getName())%>"></td>
       </tr>
-      <tr>
-        <td>&nbsp;Presets</td>
-        <td colspan="2">
-        <select name="yPresets" style="width: 20em;"
-          onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)" 
-          >
-          <option value="">- select from list or enter formula below -
-          <%=formulaOptions.toString()%>
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Expression</td>
-        <td><input type="text" class="text required" size="30" maxlength="255" name="yFormula"></td>
-        <td>
-          <base:button
-            title=""
-            image="expression_builder.gif"
-            tooltip="Use the Expression builder"
-            onclick="openExpressionBuilder('Y-axis expression', 'assay', 'yFormula', 'COLUMN_EXPRESSION')"
-          />
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Label</td>
-        <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="yLabel"></td>
-      </tr>
-      <tr>
-        <td>&nbsp;<label for="yLog">Log scale</label></td>
-        <td colspan="2"><input type="checkbox" name="yLog" id="yLog" value="1"></td>
-      </tr>
-      <%
-      if (positionIndex == ExperimentExplorer.SPOT_AVG)
-      {
+        <tr>
+          <th>Width</th>
+          <td colspan="2"><input type="text" class="text" style="width: 10em;" maxlength="10" name="width" 
+            value="900" onkeypress="return Numbers.integerOnly(event)"> (not used by preview)</td>
+        </tr>
+        <tr>
+          <th>Height</th>
+          <td colspan="2"><input type="text" class="text" style="width: 10em;" maxlength="10" name="height" 
+            value="600" onkeypress="return Numbers.integerOnly(event)"></td>
+        </tr>
+        <tr>
+          <th class="subprompt"></th>
+          <td colspan="2"></td>
+        </tr>
+      </tbody>
+      
+      <tbody class="simplesection">
+        <tr>
+          <th>Y-axis</th>
+          <td>
+          <select name="yPresets" style="width: 25em;"
+            onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)" 
+            >
+            <option value="">- select from list or enter formula below -
+            <%=formulaOptions.toString()%>
+          </select>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Expression</th>
+          <td><input type="text" class="text required" maxlength="255" name="yFormula"></td>
+          <td>
+            <base:icon
+              image="expression_builder.gif"
+              tooltip="Use the Expression builder"
+              onclick="openExpressionBuilder('Y-axis expression', 'plot', 'yFormula', 'COLUMN_EXPRESSION')"
+            />
+          </td>
+        </tr>
+        <tr>
+          <th class="subprompt">Label</th>
+          <td><input type="text" class="text" maxlength="255" name="yLabel"></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt"><label for="yLog">Log scale</label></th>
+          <td><input type="checkbox" name="yLog" id="yLog" value="1"></td>
+          <td></td>
+        </tr>
+        <%
+        if (positionIndex == ExperimentExplorer.SPOT_AVG)
+        {
+          %>
+          <tr>
+            <th class="subprompt">Average method</td>
+            <td>
+              <select name="averageMethod">
+              <%
+              for (Formula.AverageMethod method : Formula.AverageMethod.values())
+              {
+                if (method != Formula.AverageMethod.NONE)
+                {
+                  %>
+                  <option value="<%=method.name()%>"><%=method.toString()%></option>
+                  <%
+                }
+              }
+              %>
+              </select>
+            </td>
+            <td></td>
+          </tr>
+          <%  
+        }
         %>
         <tr>
-          <td>&nbsp;Average</td>
+          <th>X-axis</th>
           <td>
-            <select name="averageMethod">
+            <input type="radio" name="plotType" value="assay" onchange="plotTypeOnChange()"
+              id="plotTypeAssay" <%=plotType.equals("assay") ? "checked" : ""%>
+              ><label for="plotTypeAssay"
+              title="Creates a line/bar plot with bioassays along the x axis">Bioassays</label>
+            <input type="radio" name="plotType" value="annotation" onchange="plotTypeOnChange()"
+              id="plotTypeAnnotation" <%=plotType.equals("annotation") ? "checked" : ""%>
+              ><label for="plotTypeAnnotation" 
+              title="Creates a box plot with annotation values along the x axis">Annotation</label>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Annotation</td>
+          <td>
+            <select name="annotationTypeId" class="selectionlist">
             <%
-            for (Formula.AverageMethod method : Formula.AverageMethod.values())
+            for (AnnotationType at : annotationTypes)
             {
-              if (method != Formula.AverageMethod.NONE)
-              {
-                %>
-                <option value="<%=method.name()%>"><%=method.toString()%></option>
-                <%
-              }
+              String selected = at.getId() == annotationTypeId ? "selected" : "";
+              %>
+              <option value="<%=at.getId()%>" <%=selected%>><%=HTML.encodeTags(at.getName())%>
+              <%
             }
             %>
             </select>
           </td>
-        <%  
-      }
-      %>
-      <tr>
-        <td class="prompt" colspan="3">X-axis</td>
-      </tr>
-      <tr>
-        <td>&nbsp;<label for="hideXLabels">No labels</label></td>
-        <td><input type="checkbox" name="hideXLabels" id="hideXLabels" value="1"></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt"><label for="hideXLabels">No labels</label></th>
+          <td><input type="checkbox" name="hideXLabels" id="hideXLabels" value="1"></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Plot type</th>
+          <td>
+            <select name="subtype">
+            <option value="line">Line plot</option>
+            <option value="bar">Bar plot</option>
+            </select>
+          <td></td>
+        </tr>
+      </tbody>
+
+      <tr class="dynamic">
+        <th></th>
+        <td colspan="2"></td>
       </tr>
       </table>
-      </form>
-    </t:tab>
-    <t:tab id="annotation" title="By annotation" helpid="explorer.annotationplot"
-      tooltip="Create a box plot with annotation values along the x axis">
-      <form name="annotation">
-      <table border="0" cellspacing="0" cellpadding="2" class="form">
-      <tr>
-        <td class="prompt" colspan="3">Y-axis</td>
-      </tr>
-      <tr>
-        <td>&nbsp;Presets</td>
-        <td colspan="2">
-        <select name="yPresets" style="width: 20em;"
-          onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)" 
-          >
-          <option value="">- select from list or enter formula below -
-          <%=formulaOptions.toString()%>
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Expression</td>
-        <td><input type="text" class="text required" size="30" maxlength="255" name="yFormula"></td>
-        <td>
-          <base:button
-            title=""
-            image="expression_builder.gif"
-            tooltip="Use the Expression builder"
-            onclick="openExpressionBuilder('Y-axis expression', 'annotation', 'yFormula', 'COLUMN_EXPRESSION')"
-          />
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Label</td>
-        <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="yLabel"></td>
-      </tr>
-      <tr>
-        <td>&nbsp;<label for="yLogAnnotation">Log scale</label></td>
-        <td colspan="2"><input type="checkbox" name="yLog" id="yLogAnnotation" value="1"></td>
-      </tr>
-      <%
-      if (positionIndex == ExperimentExplorer.SPOT_AVG)
-      {
-        %>
-        <tr>
-          <td>&nbsp;Average</td>
-          <td>
-            <select name="averageMethod">
-            <%
-            for (Formula.AverageMethod method : Formula.AverageMethod.values())
-            {
-              if (method != Formula.AverageMethod.NONE)
-              {
-                %>
-                <option value="<%=method.name()%>"><%=method.toString()%></option>
-                <%
-              }
-            }
-            %>
-            </select>
-          </td>
-        <%  
-      }
-      %>
-      <tr>
-        <td class="prompt" colspan="3">X-axis</td>
-      </tr>
-      <tr>
-        <td>&nbsp;Annotation</td>
-        <td>
-          <select name="annotationTypeId">
-          <%
-          for (AnnotationType at : annotationTypes)
-          {
-            String selected = at.getId() == annotationTypeId ? "selected" : "";
-            %>
-            <option value="<%=at.getId()%>" <%=selected%>><%=HTML.encodeTags(at.getName())%>
-            <%
-          }
-          %>
-          </select>
-        </td>
-      </tr>
-      </table>
-      </form>
-    </t:tab>
-    </t:tabcontrol>
-    </td>
-    <td xstyle="width: 600px;">
-      <div style="position: relative; top: 0px; left: 0px; width: 600px; height: 400px; padding-bottom: 2px;">
-      <img src="../../../../images/plot_empty.png" id="background" 
-        style="position: absolute; top: 0px; left: 0px; z-index: 1; border: 1px solid #999999;">
-      <img src="../../../../images/plot_select.gif" id="preview" 
-        style="position: relative; top: 0px; left: 0px; z-index: 2; border: 1px solid #999999;">
-      </div>
-    </td>
-  </tr>
-  </table>
+
+    </div>
+    <div class="absolutefull filled" style="width: 550px; left: auto;">
+      <img src="../../../../images/plot_empty.png" id="preview" 
+        style="position: absolute; top: 5px; z-index: 1;">
+      <img src="../../../../images/plot_select.png" id="overlay" 
+        style="position: absolute; top: 5px; z-index: 2;">
+    </div>
+  
   </div>
-    <p>
-    <div align="center">
-    <base:buttongroup>
-      <base:button title="Preview" onclick="previewPlot()" 
-        image="plotter_preview.gif" tooltip="Generate a preview of the plot" 
-      />
-      <base:button title="View&hellip;" onclick="viewPlot()" 
-        image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)" 
-      />
-      <base:button title="Download&hellip;" onclick="downloadPlot()" 
-        image="download.gif"
-        tooltip="Downlad a fullsized version of the plot to you computer" 
-      />
-      <base:button title="Save as&hellip;" onclick="savePlotAs()" 
-        image="<%=hasCreateFilePermission ? "saveas.gif" : "saveas_disabled.gif"%>"
-        disabled="<%=!hasCreateFilePermission%>"
-        tooltip="<%=hasCreateFilePermission ? 
-          "Save a fullsized version of the plot on the BASE server" :
-          "You don't have permission to create files" %>" 
-      />
-      <base:button onclick="window.close()" title="Close" />
-    </base:buttongroup>
-    </div>
+  </form>
+  
+  <base:buttongroup subclass="dialogbuttons">
+    <base:button title="Preview" onclick="previewPlot()" 
+      image="plotter_preview.gif" tooltip="Generate a preview of the plot" 
+    />
+    <base:button title="View&hellip;" onclick="viewPlot()" 
+      image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)" 
+    />
+    <base:button title="Download&hellip;" onclick="downloadPlot()" 
+      image="download.gif"
+      tooltip="Downlad a fullsized version of the plot to your computer" 
+    />
+    <base:button title="Save as&hellip;" onclick="savePlotAs()" 
+      image="saveas.gif"
+      disabled="<%=!hasCreateFilePermission%>"
+      tooltip="<%=hasCreateFilePermission ? 
+        "Save a fullsized version of the plot on the BASE server" :
+        "You don't have permission to create files" %>" 
+    />
+    <base:button onclick="window.close()" title="Close" />
+  </base:buttongroup>
   
   </base:body>

trunk/www/views/experiments/explorer/view/view.jsp

@@ -264 +264 @@
       url += '&reporterIndex=<%=reporterIndex%>';
       url += '&positionIndex=<%=positionIndex%>';
-      Main.openPopup(url, 'AssayPlot', 1100, 700);
+      Main.openPopup(url, 'AssayPlot', 1050, 700);
     }
     function annotationPlot(annotationType)
@@ -273 +273 @@
       url += '&positionIndex=<%=positionIndex%>';
       url += '&annotationTypeId=' + annotationType;
-      Main.openPopup(url, 'AnnotationPlot', 1100, 700);
+      Main.openPopup(url, 'AnnotationPlot', 1050, 700);
     }
   </script>

trunk/www/views/experiments/plotter/download.jsp

@@ -35 +35 @@
 final String ID = sc.getId();
 %>
-<base:page type="popup" title="Save as">
+<base:page type="popup" title="Generating plot">
 <base:head>
   <script language="JavaScript">
-  // Initialise - set focus to filename field
   function download()
   {
@@ -48 +47 @@
 </base:head>
 <base:body onload="download()">
-  <p>
+  <h1>Generating plot...</h1>
 
-  <base:note type="info" title="Generating plot">
-  Generating plot. Please wait...
-  </base:note>
+  <div class="content">
+    <table class="fullcc"><tr><td>
+    <b>Generating plot. Please wait...</b>
+    </td></tr></table>
+  </div>
 
-    <table align="center">
-    <tr>
-      <td><base:button onclick="window.close();" title="Close" /></td>
-    </tr>
-    </table>
-
-
+  <base:buttongroup subclass="dialogbuttons">
+    <base:button onclick="window.close();" title="Close" />
+  </base:buttongroup>
 </base:body>
 </base:page>

trunk/www/views/experiments/plotter/index.jsp

@@ -154 +154 @@
   function validateScatterPlot()
   {
-    var frm = document.forms['scatter'];
-    if (Main.trimString(frm.yFormula.value) == '')
+    var frm = document.forms['plot'];
+    if (Main.trimString(frm.yFormulaScatter.value) == '')
     {
       alert("You must enter an expression for the Y axis");
-      frm.yFormula.focus();
+      frm.yFormulaScatter.focus();
       return false;
     }
-    else if (Main.trimString(frm.xFormula.value) == '')
+    else if (Main.trimString(frm.xFormulaScatter.value) == '')
     {
       alert("You must enter an expression for the X axis");
-      frm.xFormula.focus();
+      frm.xFormulaScatter.focus();
       return false;
     }
@@ -171 +171 @@
   function validateHistogramPlot()
   {
-    var frm = document.forms['histogram'];
+    var frm = document.forms['plot'];
     var yAggregate = Forms.getCheckedRadio(frm.yAggregate).value;
-    if (Main.trimString(frm.xFormula.value) == '')
+    if (Main.trimString(frm.xFormulaHistogram.value) == '')
     {
       alert("You must enter an expression for the X axis");
-      frm.xFormula.focus();
+      frm.xFormulaHistogram.focus();
       return false;
     }
-    else if (yAggregate != 'count' && Main.trimString(frm.yFormula.value) == '')
+    else if (yAggregate != 'count' && Main.trimString(frm.yFormulaHistogram.value) == '')
     {
       alert("You must enter an expression for the Y axis");
-      frm.yFormula.focus();
+      frm.yFormulaHistogram.focus();
       return false;
     }
@@ -188 +188 @@
   }
 
-  var plotType = 'scatter';
   function getPlotType()
   {
-    return plotType;
-  }
-
-  function switchTab(tabControlId, tabId)
-  {
-    if (tabId == 'scatter' || tabId == 'histogram')
-    {
-      plotType = tabId;
-    }
-    TabControl.setActiveTab(tabControlId, tabId);
+    var frm = document.forms['plot'];
+    return Forms.getCheckedRadio(frm.plotType).value;
+  }
+
+  function plotTypeOnChange()
+  {
+    var isScatter = getPlotType() == 'scatter';
+    Main.showHide('scatterSection', isScatter);
+    Main.showHide('histogramSection', !isScatter);
   }
 
@@ -213 +211 @@
   function aggregateOnChange()
   {
-    var frm = document.forms['histogram'];
+    var frm = document.forms['plot'];
     var selected = Forms.getCheckedRadio(frm.yAggregate);
     var isCount = selected.value == 'count';
-    frm.yFormula.disabled = isCount;
-    frm.yPresets.disabled = isCount;
-    frm.yLog.disabled = isCount;
+    frm.yFormulaHistogram.disabled = isCount;
+    frm.yPresetsHistogram.disabled = isCount;
+    frm.yLogHistogram.disabled = isCount;
     for (var i = 0; i < frm.hiloAggregate.length; i++)
     {
@@ -225 +223 @@
     if (isCount)
     {
-      Main.removeClass(frm.yFormula, 'required');
-      frm.yLabel.value = 'Count';
+      Main.removeClass(frm.yFormulaHistogram, 'required');
+      frm.yLabelHistogram.value = 'Count';
     }
     else
     {
-      Main.addClass(frm.yFormula, 'required');
-      var yPreset = frm.yPresets[frm.yPresets.selectedIndex];
-      if (yPreset.value != '') frm.yLabel.value = yPreset.text;
+      Main.addClass(frm.yFormulaHistogram, 'required');
+      var yPreset = frm.yPresetsHistogram[frm.yPresetsHistogram.selectedIndex];
+      if (yPreset.value != '') frm.yLabelHistogram.value = yPresetHistogram.text;
     }
   }
@@ -244 +242 @@
     frm.subTitle.value = value;
     
-    var annotationFrm = document.forms['annotation'];
     if (selected.value.substring(0, 1) == '$')
     {
-      annotationFrm.annotationExp.disabled = true;
+      frm.annotationExp.disabled = true;
     }
     else
@@ -253 +250 @@
       if (selected.value)
       {
-        annotationFrm.annotationExp.value = selected.value;
+        frm.annotationExp.value = selected.value;
       }
-      annotationFrm.annotationExp.disabled = false;
-      annotationFrm.annotationExp.focus();
+      frm.annotationExp.disabled = false;
+      frm.annotationExp.focus();
     }
   }
@@ -262 +259 @@
   function annotationExpressionOnChange()
   {
-    var annotationFrm = document.forms['annotation'];
-    annotationFrm.annotationPresets.selectedIndex = annotationFrm.annotationPresets.length-1;
+    var frm = document.forms['plot'];
+    frm.annotationPresets.selectedIndex = annotationFrm.annotationPresets.length-1;
   }
   
@@ -270 +267 @@
     if (validate())
     {
-      var plotFrm = document.forms['plot'];
+      var frm = document.forms['plot'];
       var url = 'plot?ID=<%=ID%>&bioassayset_id=<%=bioAssaySetId%>&bioassay_id=<%=bioAssayId%>';
-      url += '&title='+Main.encodeURI(plotFrm.title.value);
-      url += '&subTitle='+Main.encodeURI(plotFrm.subTitle.value);
+      url += '&title='+Main.encodeURI(frm.title.value);
+      url += '&subTitle='+Main.encodeURI(frm.subTitle.value);
       if (fullSize)
       {
-        url += '&width='+plotFrm.width.value;
-        url += '&height='+plotFrm.height.value;
+        url += '&width='+frm.width.value;
+        url += '&height='+frm.height.value;
       }
       
-      var filterFrm = document.forms['filter'];
-      if (filterFrm.filter.value != '')
+      if (frm.filter.value != '')
       {
-        url += '&filter='+Main.encodeURI(filterFrm.filter.value);
+        url += '&filter='+Main.encodeURI(frm.filter.value);
       }
       
-      var annotationFrm = document.forms['annotation'];
       var annotation = '';
-      if (!annotationFrm.annotationExp.disabled)
+      if (!frm.annotationExp.disabled)
       {
-        if (annotationFrm.annotationExp.value)
+        if (frm.annotationExp.value)
         {
-          annotation = '=' + annotationFrm.annotationExp.value;
+          annotation = '=' + frm.annotationExp.value;
         }
       }
       else
       {
-        annotation = annotationFrm.annotationPresets[annotationFrm.annotationPresets.selectedIndex].value.substring(1);
+        annotation = frm.annotationPresets[frm.annotationPresets.selectedIndex].value.substring(1);
       }
       if (annotation)
@@ -307 +302 @@
       if (plotType == 'scatter')
       {
-        var frm = document.forms['scatter'];
         url += '&type=scatter';
-        url += '&x='+Main.encodeURI(frm.xFormula.value);
-        url += '&xLog='+(frm.xLog.checked ? 1 : 0);
-        url += '&xLabel='+Main.encodeURI(frm.xLabel.value);
-        url += '&y='+Main.encodeURI(frm.yFormula.value);
-        url += '&yLog='+(frm.yLog.checked ? 1 : 0);
-        url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
+        url += '&x='+Main.encodeURI(frm.xFormulaScatter.value);
+        url += '&xLabel='+Main.encodeURI(frm.xLabelScatter.value);
+        url += '&xLog='+(frm.xLogScatter.checked ? 1 : 0);
+        url += '&y='+Main.encodeURI(frm.yFormulaScatter.value);
+        url += '&yLabel='+Main.encodeURI(frm.yLabelScatter.value);
+        url += '&yLog='+(frm.yLogScatter.checked ? 1 : 0);
       }
       else
       {
-        var frm = document.forms['histogram'];
         var yAggregate = Forms.getCheckedRadio(frm.yAggregate).value;
         url += '&type=histogram';
-        url += '&x='+Main.encodeURI(frm.xFormula.value);
-        url += '&xLog='+(frm.xLog.checked ? 1 : 0);
-        url += '&xLabel='+Main.encodeURI(frm.xLabel.value);
+        url += '&x='+Main.encodeURI(frm.xFormulaHistogram.value);
+        url += '&xLabel='+Main.encodeURI(frm.xLabelHistogram.value);
+        url += '&xLog='+(frm.xLogHistogram.checked ? 1 : 0);
         url += '&binSize='+Main.encodeURI(frm.binSize.value);
         url += '&yAggregate='+yAggregate;
+        url += '&yLabel='+Main.encodeURI(frm.yLabelHistogram.value);
         if (yAggregate != 'count')
         {
-          url += '&y='+Main.encodeURI(frm.yFormula.value);
-          url += '&yLog='+(frm.yLog.checked ? 1 : 0);
+          url += '&y='+Main.encodeURI(frm.yFormulaHistogram.value);
+          url += '&yLog='+(frm.yLogHistogram.checked ? 1 : 0);
           url += '&hiloAggregate='+Forms.getCheckedRadio(frm.hiloAggregate).value
         }
-        url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
       }
       return url;
@@ -352 +345 @@
     if (url)
     {
-      url += '&width=600&height=400';
-      var image = document.getElementById('preview');
-      if (image.src.indexOf('plot_select') == -1)
-      {
-        var background = document.getElementById('background');
-        background.src = image.src;
-      }
-      image.src = getRoot()+'images/plot_generating.gif';
-      // Otherwise, the browser refuses to display the 'plot_generating.gif' while we are waiting.
-      //setTimeout('changePreviewImage()', 100);
-      image.realImg = new Image();
-      image.realImg.onload = changePreviewImage;
-      image.realImg.src = url;
+      url += '&width=540&height=360';
+
+      var overlayImg = document.getElementById('overlay');
+      overlayImg.src = getRoot()+'images/plot_generating.gif';
+      
+      var previewImg = document.getElementById('preview');
+      previewImg.realImg = new Image();
+      previewImg.realImg.onload = changePreviewImage;
+      previewImg.realImg.src = url;
     }
   }
@@ -370 +359 @@
   function changePreviewImage()
   {
-    var image = document.getElementById('preview');
-    image.src = image.realImg.src;
-    image.realImg = null;
+    var previewImg = document.getElementById('preview');
+    previewImg.src = previewImg.realImg.src;
+    previewImg.realImg = null;
+    var overlayImg = document.getElementById('overlay');
+    overlayImg.src = getRoot() + 'images/blankbutton.gif';
   }
   
@@ -385 +376 @@
       if (!width || width < 600) width = 600;
       if (!height || height < 400) height = 400;
-      Main.openPopup('view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+50, height+100);
+      Main.openPopup('view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+150, height+100);
     }
   }
@@ -394 +385 @@
     if (url)
     {
-      Main.openPopup('download.jsp?ID=<%=ID%>', 'DownloadPlot', 500, 260);
+      Main.openPopup('download.jsp?ID=<%=ID%>', 'DownloadPlot', 300, 200);
     }
   }
@@ -403 +394 @@
     if (url)
     {
-      Main.openPopup('save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 500, 260);
+      Main.openPopup('save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 450, 300);
     }
   }
@@ -409 +400 @@
   function init()
   {
-    aggregateOnChange();
   }
   </script>
   </base:head>
   <base:body onload="init()">
-  
-  <h3 class="docked"><%=title%> <base:help tabcontrol="plotType" /></h3>
-  <div class="boxed">
-  
-  <table border="0" cellspacing="0" cellpadding="2" width="100%">
-  <tr >
-    <td>
-    <form name="plot">
-    <table class="form">
-    <tr>
-      <td class="prompt">Plot title</td>
-      <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="title" 
-        value="<%=HTML.encodeTags(ba == null ? bas.getName() : ba.getName())%>"></td>
-    </tr>
-    <tr>
-      <td class="prompt">Subtitle</td>
-      <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="subTitle" 
-        value=""></td>
-    </tr>
-    <tr>
-      <td class="prompt">Width</td>
-      <td><input type="text" class="text" size="12" maxlength="10" name="width" 
-        value="800" onkeypress="return Numbers.integerOnly(event)"></td>
-      <td rowspan="2">(not used by preview)</td>
-    </tr>
-    <tr>
-      <td class="prompt">Height</td>
-      <td><input type="text" class="text" size="12" maxlength="10" name="height" 
-        value="600" onkeypress="return Numbers.integerOnly(event)"></td>
-    </tr>
-    </table>
-    </form>
-    <p>
-
-    <t:tabcontrol id="plotType" style="<%="width: "+(int)(scale*340)+"px;"%>" contentstyle="<%="height: "+(int)(scale*340)+"px;"%>"
-      switch="switchTab">
-    <t:tab id="scatter" title="Scatter plot" helpid="plotter.scatterplot"
-      tooltip="Create a scatter plot">
-      <form name="scatter">
-      <table border="0" cellspacing="0" cellpadding="2" class="form">
-      <tr>
-        <td class="prompt" colspan="3">Y-axis</td>
-      </tr>
-      <tr>
-        <td>&nbsp;Presets</td>
-        <td colspan="2">
-        <select name="yPresets" style="width: 20em;"
-          onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)" 
-          >
-          <option value="">- select from list or enter formula below -
-          <%=formulaOptions.toString()%>
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Expression</td>
-        <td><input type="text" class="text required" size="30" maxlength="255" name="yFormula"></td>
-        <td>
-          <base:button
-            title=""
-            image="expression_builder.gif"
-            tooltip="Use the Expression builder"
-            onclick="openExpressionBuilder('Y-axis expression', 'scatter', 'yFormula', 'COLUMN_EXPRESSION')"
-          />
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Label</td>
-        <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="yLabel"></td>
-      </tr>
-      <tr>
-        <td>&nbsp;<label for="yLogScatter">Log scale</label></td>
-        <td colspan="2"><input type="checkbox" name="yLog" id="yLogScatter" value="1"></td>
-      </tr>
-      <tr>
-        <td class="prompt" colspan="3">X-axis</td>
-      </tr>
-      <tr>
-        <td>Presets</td>
-        <td colspan="2">
-        <select name="xPresets" style="width: 20em;"
-          onchange="presetOnChange(this, this.form.xFormula, this.form.xLabel)" 
-          >
-          <option value="">- select from list or enter formula below -
-          <%=formulaOptions.toString()%>
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td>Expression</td>
-        <td><input type="text" class="text required" size="30" maxlength="255" name="xFormula"></td>
-        <td>
-          <base:button
-            title=""
-            image="expression_builder.gif"
-            tooltip="Use the Expression builder"
-            onclick="openExpressionBuilder('X-axis expression', 'scatter', 'xFormula', 'COLUMN_EXPRESSION')"
-          />
-        </td>
-      </tr>
-      <tr>
-        <td>Label</td>
-        <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="xLabel"></td>
-      </tr>
-      <tr>
-        <td><label for="xLogScatter">Log scale</label></td>
-        <td colspan="2"><input type="checkbox" name="xLog" id="xLogScatter" value="1"></td>
+  <h1><%=title%> <base:help helpid="plotter" /></h1>
+  <form name="plot">
+  <div class="content bottomborder">
+    <div class="absolutefull rightborder" style="right: 550px;">
+      <table class="fullform input100 smaller">
+      <tbody>
+        <tr>
+          <th>Plot title</th>
+          <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="title" 
+            value="<%=HTML.encodeTags(ba == null ? bas.getName() : ba.getName())%>"></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Subtitle</th>
+          <td colspan="2"><input type="text" class="text" maxlength="255" name="subTitle" 
+            value=""></td>
+        </tr>
+        <tr>
+          <th>Width</th>
+          <td colspan="2"><input type="text" class="text" style="width: 10em;" maxlength="10" name="width" 
+            value="900" onkeypress="return Numbers.integerOnly(event)"> (not used by preview)</td>
+        </tr>
+        <tr>
+          <th>Height</th>
+          <td colspan="2"><input type="text" class="text" style="width: 10em;" maxlength="10" name="height" 
+            value="600" onkeypress="return Numbers.integerOnly(event)"></td>
+        </tr>
+        <tr>
+          <th class="subprompt"></th>
+          <td colspan="2"></td>
+        </tr>
+      </tbody>
+      <tbody class="sectionheader">
+        <tr>
+          <th>Plot type</th>
+          <td colspan="2">
+            <input type="radio" name="plotType" value="scatter" onchange="plotTypeOnChange()"
+              id="plotTypeScatter" checked><label for="plotTypeScatter">Scatter</label>
+            <input type="radio" name="plotType" value="histogram" onchange="plotTypeOnChange()"
+              id="plotTypeHistogram"><label for="plotTypeHistogram">Histogram</label>
+          </td>
+        </tr>
+      </tbody>
+      <tbody id="scatterSection">
+        <tr>
+          <th>Y-axis</th>
+          <td>
+          <select name="yPresetsScatter" style="width: 25em;"
+            onchange="presetOnChange(this, this.form.yFormulaScatter, this.form.yLabelScatter)" 
+            >
+            <option value="">- select from list or enter formula below -
+            <%=formulaOptions.toString()%>
+          </select>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Expression</th>
+          <td><input type="text" class="text required" maxlength="255" name="yFormulaScatter"></td>
+          <td>
+            <base:icon
+              image="expression_builder.gif"
+              tooltip="Use the Expression builder"
+              onclick="openExpressionBuilder('Y-axis expression', 'plot', 'yFormulaScatter', 'COLUMN_EXPRESSION')"
+            />
+          </td>
+        </tr>
+        <tr>
+          <th class="subprompt">Y label</th>
+          <td><input type="text" class="text" maxlength="255" name="yLabelScatter" value=""></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt"><label for="yLogScatter">Log scale</label></th>
+          <td><input type="checkbox" name="yLogScatter" id="yLogScatter" value="1"></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>X-axis</th>
+          <td>
+          <select name="xPresetsScatter" style="width: 25em;"
+            onchange="presetOnChange(this, this.form.xFormulaScatter, this.form.xLabelScatter)" 
+            >
+            <option value="">- select from list or enter formula below -
+            <%=formulaOptions.toString()%>
+          </select>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Expression</th>
+          <td><input type="text" class="text required" maxlength="255" name="xFormulaScatter"></td>
+          <td>
+            <base:icon
+              image="expression_builder.gif"
+              tooltip="Use the Expression builder"
+              onclick="openExpressionBuilder('X-axis expression', 'plot', 'xFormulaScatter', 'COLUMN_EXPRESSION')"
+            />
+          </td>
+        </tr>
+        <tr>
+          <th class="subprompt">X label</th>
+          <td><input type="text" class="text" maxlength="255" name="xLabelScatter" value=""></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt"><label for="xLogScatter">Log scale</label></th>
+          <td><input type="checkbox" name="xLogScatter" id="xLogScatter" value="1"></td>
+          <td></td>
+        </tr>
+      </tbody>
+      
+      <tbody id="histogramSection" style="display: none;">
+        <tr>
+          <th>Y-axis</th>
+          <td>
+            <input type="radio" name="yAggregate" id="yAggregateCount" value="count" checked 
+              onchange="aggregateOnChange()"><label for="yAggregateCount">Count</label>
+            <input type="radio" name="yAggregate" id="yAggregateMean" value="mean"
+              onchange="aggregateOnChange()"><label for="yAggregateMean">Mean</label>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Hi-lo</th>
+          <td>
+            <input type="radio" name="hiloAggregate" id="hiloAggregateNone" value="" checked
+              ><label for="hiloAggregateNone">None</label>
+            <input type="radio" name="hiloAggregate" id="hiloAggregateMinMax" value="hilomaxmin"
+              ><label for="hiloAggregateMinMax">Min/Max</label>
+            <input type="radio" name="hiloAggregate" id="hiloAggregateStdev" value="hilostdev"
+              ><label for="hiloAggregateStdev">Stdev</label>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Presets</th>
+          <td>
+          <select name="yPresetsHistogram" style="width: 25em;"
+            onchange="presetOnChange(this, this.form.yFormulaHistogram, this.form.yLabelHistogram)" 
+            disabled
+            >
+            <option value="">- select from list or enter formula below -
+            <%=formulaOptions.toString()%>
+          </select>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Expression</th>
+          <td><input type="text" class="text" maxlength="255" name="yFormulaHistogram" disabled></td>
+          <td>
+            <base:icon
+              image="expression_builder.gif"
+              tooltip="Use the Expression builder"
+              onclick="openExpressionBuilder('Y-axis expression', 'plot', 'yFormulaHistogram', 'COLUMN_EXPRESSION')"
+            />
+          </td>
+        </tr>
+        <tr>
+          <th class="subprompt">Y label</th>
+          <td><input type="text" class="text" maxlength="255" name="yLabelHistogram" value="Count"></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt"><label for="yLogHistogram">Log scale</label></th>
+          <td><input type="checkbox" name="yLogHistogram" id="yLogHistogram" value="1"></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>X-axis</th>
+          <td>
+          <select name="xPresetsHistogram"  style="width: 25em;"
+            onchange="presetOnChange(this, this.form.xFormulaHistogram, this.form.xLabelHistogram)" 
+            >
+            <option value="">- select from list or enter formula below -
+            <%=formulaOptions.toString()%>
+          </select>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Expression</th>
+          <td><input type="text" class="text required" maxlength="255" name="xFormulaHistogram"></td>
+          <td>
+            <base:icon
+              image="expression_builder.gif"
+              tooltip="Use the Expression builder"
+              onclick="openExpressionBuilder('X-axis expression', 'plot', 'xFormulaHistogram', 'COLUMN_EXPRESSION')"
+            />
+          </td>
+        </tr>
+        <tr>
+          <th class="subprompt">X label</th>
+          <td><input type="text" class="text" maxlength="255" name="xLabelHistogram" value=""></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt"><label for="xLogHistogram">Log scale</label></th>
+          <td><input type="checkbox" name="xLogHistogram" id="xLogHistogram" value="1"></td>
+          <td></td>
+        </tr>
+        <tr>
+          <th class="subprompt">Bin size</th>
+          <td><input type="text" class="text" name="binSize" value="1" style="width: 10em;"></td>
+          <td></td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <th class="subprompt"></th>
+          <td colspan="2"></td>
+        </tr>
+      </tbody>
+      <tbody class="sectionheader">
+        <tr>
+          <th colspan="3">Filter &amp; annotations</th>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <th>Filter</th>
+          <td colspan="2">
+            <select name="filterPresets" style="width: 25em;"
+              onchange="presetOnChange(this, this.form.filter, null)" 
+              >
+              <option value="">- select from list or enter formula below -
+              <%=filterOptions.toString()%>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <th class="subprompt"></th>
+          <td><input type="text" class="text" maxlength="255" name="filter" placeholder="leave empty to plot all values"></td>
+          <td>
+            <base:icon
+              image="expression_builder.gif"
+              tooltip="Use the Expression builder"
+              onclick="openExpressionBuilder('Filter expression', 'plot', 'filter', 'COLUMN_RESTRICTION')"
+            />
+          </td>
+        </tr>
+        <tr>
+          <th>Annotation</th>
+          <td colspan="2">
+            <select name="annotationPresets" onchange="annotationOnChange(this)" style="width: 25em;">
+              <option value="$">- none -
+              <%
+              if (ba == null)
+              {
+                %>
+                <option value="$bioassay">Bioassay
+                <option value="$spots">Spots
+                <option value="$arrayDesign.name">Array design
+                <option value="$software.name">Software
+                <option value="$protocol.name">Protocol
+                <option value="$scan.scanner.name">Scanner
+                <option value="$scan.protocol.name">Scanning protocol
+                <option value="$scan.hybridization.protocol.name">Hybridization protocol
+                <option value="$scan.hybridization.creationEvent.eventDate">Hybridization date
+                <option value="" disabled>- annotations -
+                <%
+                for (AnnotationType at : experimentalFactors)
+                {
+                  %>
+                  <option value="$<%=at.getId()%>">[A] <%=HTML.encodeTags(at.getName())%>
+                  <%
+                }
+              }
+              %>
+              <option value="" disabled>- expressions -
+              <%=filterOptions.toString()%>
+              <option value="">Other...
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <th class="subprompt"></th>
+          <td><input type="text" class="text" maxlength="255" name="annotationExp"
+            onchange="annotationExpressionOnChange()" disabled></td>
+          <td>
+            <base:icon
+              image="expression_builder.gif"
+              tooltip="Use the Expression builder"
+              onclick="openExpressionBuilder('Annotation filter', 'plot', 'annotationExp', 'COLUMN_RESTRICTION')"
+            />
+          </td>
+        </tr>
+      </tbody>
+      <tr class="dynamic">
+        <th></th>
+        <td colspan="2"></td>
       </tr>
       </table>
-      </form>
-    </t:tab>
-
-    <t:tab id="histogram" title="Histogram plot" helpid="plotter.histogram"
-      tooltip="Create a histogram plot">
-      <form name="histogram">
-      <table border="0" cellspacing="0" cellpadding="2" class="form">
-      <tr>
-        <td class="prompt" >Y-axis</td>
-        <td colspan="2">
-          <input type="radio" name="yAggregate" id="yAggregateCount" value="count" checked 
-            onchange="aggregateOnChange()"><label for="yAggregateCount">Count</label>
-          <input type="radio" name="yAggregate" id="yAggregateMean" value="mean"
-            onchange="aggregateOnChange()"><label for="yAggregateMean">Mean</label>
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Hi-lo</td>
-        <td colspan="2">
-          <input type="radio" name="hiloAggregate" id="hiloAggregateNone" value="" checked
-            ><label for="hiloAggregateNone">None</label>
-          <input type="radio" name="hiloAggregate" id="hiloAggregateMinMax" value="hilomaxmin"
-            ><label for="hiloAggregateMinMax">Min/Max</label>
-          <input type="radio" name="hiloAggregate" id="hiloAggregateStdev" value="hilostdev"
-            ><label for="hiloAggregateStdev">Stdev</label>
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Presets</td>
-        <td colspan="2">
-        <select name="yPresets" style="width: 20em;"
-          onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)" 
-          disabled
-          >
-          <option value="">- select from list or enter formula below -
-          <%=formulaOptions.toString()%>
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Expression</td>
-        <td><input type="text" class="text" size="30" maxlength="255" name="yFormula" disabled></td>
-        <td>
-          <base:button
-            title=""
-            image="expression_builder.gif"
-            tooltip="Use the Expression builder"
-            onclick="openExpressionBuilder('Y-axis expression', 'histogram', 'yFormula', 'COLUMN_EXPRESSION')"
-          />
-        </td>
-      </tr>
-
-      <tr>
-        <td>&nbsp;Label</td>
-        <td colspan="2"><input type="text" class="text" size="30" maxlength="255" 
-          name="yLabel" value="Count"></td>
-      </tr>
-      <tr>
-        <td>&nbsp;<label for="yLogHist">Log scale</label></td>
-        <td colspan="2"><input type="checkbox" name="yLog" id="yLogHist" value="1"></td>
-      </tr>
-      <tr>
-        <td class="prompt" colspan="3">X-axis</td>
-      </tr>
-      <tr>
-        <td>Presets</td>
-        <td colspan="2">
-        <select name="xPresets"  style="width: 20em;"
-          onchange="presetOnChange(this, this.form.xFormula, this.form.xLabel)" 
-          >
-          <option value="">- select from list or enter formula below -
-          <%=formulaOptions.toString()%>
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td>Expression</td>
-        <td><input type="text" class="text required" size="30" 
-          maxlength="255" name="xFormula"></td>
-        <td>
-          <base:button
-            title=""
-            image="expression_builder.gif"
-            tooltip="Use the Expression builder"
-            onclick="openExpressionBuilder('X-axis expression', 'histogram', 'xFormula', 'COLUMN_EXPRESSION')"
-          />
-        </td>
-      </tr>
-      <tr>
-        <td>Label</td>
-        <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="xLabel"></td>
-      </tr>
-      <tr>
-        <td><label for="xLogHist">Log scale</label></td>
-        <td colspan="2"><input type="checkbox" name="xLog" id="xLogHist" value="1"></td>
-      </tr>
-      <tr>
-        <td>Bin size</td>
-        <td colspan="2"><input type="text" class="text" name="binSize" value="1"></td>
-      </tr>
-      </table>
-      </form>
-    </t:tab>
+    </div>
     
-    <t:tab id="filter" title="Filter" helpid="plotter.filter"
-      tooltip="Specify a filter for spots that should be included in the plot">
-      <form name="filter">
-      <table border="0" cellspacing="0" cellpadding="2" class="form">
-      <tr>
-        <td class="prompt" colspan="2">Filter</td>
-      </tr>
-      <tr>
-        <td>&nbsp;Presets</td>
-        <td colspan="2">
-        <select name="filterPresets" style="width: 20em;"
-          onchange="presetOnChange(this, this.form.filter, null)" 
-          >
-          <option value="">- select from list or enter formula below -
-          <%=filterOptions.toString()%>
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Expression</td>
-        <td><input type="text" class="text" size="30" maxlength="255" name="filter"></td>
-        <td>
-          <base:button
-            title=""
-            image="expression_builder.gif"
-            tooltip="Use the Expression builder"
-            onclick="openExpressionBuilder('Filter expression', 'filter', 'filter', 'COLUMN_RESTRICTION')"
-          />
-        </td>
-      </tr>
-      </table>
-      </form>
-    </t:tab>
-    
-    <t:tab id="annotation" title="Annotation" helpid="plotter.annotation"
-      tooltip="Specify a property or expression for sub-grouping the plotted values">
-      <form name="annotation">
-      
-      <table border="0" cellspacing="0" cellpadding="2" class="form">
-      <tr>
-        <td class="prompt" colspan="2">Annotation</td>
-      </tr>
-      <tr>
-        <td>&nbsp;Presets</td>
-        <td colspan="2">
-        <select name="annotationPresets" onchange="annotationOnChange(this)">
-          <option value="$">- none -
-          <%
-          if (ba == null)
-          {
-            %>
-            <option value="$bioassay">Bioassay
-            <option value="$spots">Spots
-            <option value="$arrayDesign.name">Array design
-            <option value="$software.name">Software
-            <option value="$protocol.name">Protocol
-            <option value="$scan.scanner.name">Scanner
-            <option value="$scan.protocol.name">Scanning protocol
-            <option value="$scan.hybridization.protocol.name">Hybridization protocol
-            <option value="$scan.hybridization.creationEvent.eventDate">Hybridization date
-            <option value="" disabled>- annotations -
-            <%
-            for (AnnotationType at : experimentalFactors)
-            {
-              %>
-              <option value="$<%=at.getId()%>">[A] <%=HTML.encodeTags(at.getName())%>
-              <%
-            }
-          }
-          %>
-          <option value="" disabled>- expressions -
-          <%=filterOptions.toString()%>
-          <option value="">Other...
-        </select>
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;Expression</td>
-        <td><input type="text" class="text" size="30" maxlength="255" name="annotationExp"
-          onchange="annotationExpressionOnChange()" disabled></td>
-        <td>
-          <base:button
-            title=""
-            image="expression_builder.gif"
-            tooltip="Use the Expression builder"
-            onclick="openExpressionBuilder('Annotation filter', 'annotation', 'annotationExp', 'COLUMN_RESTRICTION')"
-          />
-        </td>
-      </tr>
-      </table>
-      </form>
-    </t:tab> 
-    
-    </t:tabcontrol>
-    </td>
-    <td xstyle="width: 600px;">
-      <div style="position: relative; top: 0px; left: 0px; width: 600px; height: 400px; padding-bottom: 2px;">
-      <img src="../../../images/plot_empty.png" id="background" 
-        style="position: absolute; top: 0px; left: 0px; z-index: 1; border: 1px solid #999999;">
-      <img src="../../../images/plot_select.gif" id="preview" 
-        style="position: relative; top: 0px; left: 0px; z-index: 2; border: 1px solid #999999;">
-      </div>
-    </td>
-  </tr>
-  </table>
+    <div class="absolutefull filled" style="width: 550px; left: auto;">
+        
+          <img src="../../../images/plot_empty.png" id="preview" 
+            style="position: absolute; top: 5px; z-index: 1;">
+          <img src="../../../images/plot_select.png" id="overlay" 
+            style="position: absolute; top: 5px; z-index: 2;">
+    </div>
   </div>
-    <p>
-    <div align="center">
-    <base:buttongroup>
-      <base:button title="Preview" onclick="previewPlot()" 
-        image="plotter_preview.gif" tooltip="Generate a preview of the plot" 
-      />
-      <base:button title="View&hellip;" onclick="viewPlot()" 
-        image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)" 
-      />
-      <base:button title="Download&hellip;" onclick="downloadPlot()" 
-        image="download.gif"
-        tooltip="Downlad a fullsized version of the plot to you computer" 
-      />
-      <base:button title="Save as&hellip;" onclick="savePlotAs()" 
-        image="<%=hasCreateFilePermission ? "saveas.gif" : "saveas_disabled.gif"%>"
-        disabled="<%=!hasCreateFilePermission%>"
-        tooltip="<%=hasCreateFilePermission ? 
-          "Save a fullsized version of the plot on the BASE server" :
-          "You don't have permission to create files" %>" 
-      />
-      <base:button onclick="window.close()" title="Close" />
-    </base:buttongroup>
-    </div>
+  </form>
+  
+  <base:buttongroup subclass="dialogbuttons">
+    <base:button title="Preview" onclick="previewPlot()" 
+      image="plotter_preview.gif" tooltip="Generate a preview of the plot" 
+    />
+    <base:button title="View&hellip;" onclick="viewPlot()" 
+      image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)" 
+    />
+    <base:button title="Download&hellip;" onclick="downloadPlot()" 
+      image="download.gif"
+      tooltip="Downlad a fullsized version of the plot to your computer" 
+    />
+    <base:button title="Save as&hellip;" onclick="savePlotAs()" 
+      image="saveas.gif"
+      disabled="<%=!hasCreateFilePermission%>"
+      tooltip="<%=hasCreateFilePermission ? 
+        "Save a fullsized version of the plot on the BASE server" :
+        "You don't have permission to create files" %>" 
+    />
+    <base:button onclick="window.close()" title="Close" />
+  </base:buttongroup>
   
   </base:body>

trunk/www/views/experiments/plotter/save_as.jsp

@@ -82 +82 @@
         url += '&overwrite=' + (frm.overwrite.checked ? 1 : 0);
         Main.hide('save');
+        Main.hide('buttons');
         Main.show('generating');
         location.href = url;
@@ -90 +91 @@
 </base:head>
 <base:body onload="init()">
-  <p>
-  <form name="saveas" onsubmit="return false;"> 
+  <h1>Save plot</h1>
+  
+  <form name="saveas" onsubmit="return false;">
+  <div class="content bottomborder" id="save">
+    <table class="fullform input100 smaller">
+    <tr>
+      <th>Save as</th>
+      <td>
+        <table style="width: 100%;">
+        <tr>
+          <td><input type="text" class="text" name="path" value=""></td>
+          <td style="width: 10em;"><base:button 
+            title="Browse&hellip;"
+            onclick="browseOnClick()"
+            /></td>
+        </tr>
+        </table>
+      </td>
+    </tr>
+    <tr>
+      <th class="subprompt"></th>
+      <td>
+        <input type="checkbox" name="overwrite" id="overwrite" value="1"><label for="overwrite">Overwrite existing file</label><br>
+      </td>
+    </tr>
+    <tr class="dynamic">
+      <th></th>
+      <td></td>
+    </table>
+  </div>
+  </form>
 
-  <div id="save">
-    <h3 class="docked">Save as <base:help helpid="plotter.saveas" /></h3>
-    <div class="boxed" align="center">
-      <br>
-      <table class="form" cellspacing="0" border="0">
-        <tr >
-          <td class="prompt">Filename</td>
-          <td>
-            <table border="0" cellspacing="0" cellpadding="0">
-            <tr>
-            <td><input type="text" class="text" name="path" size="40" value="">&nbsp;</td>
-            <td><base:button 
-                title="Browse..."
-                onclick="browseOnClick()"
-                /></td>
-            </tr>
-            </table>
-            <input type="checkbox" name="overwrite" id="overwrite" value="1"><label for="overwrite">Overwrite existing file</label><br>
-          </td>
-        </tr>
-      </table>
-      <p>
-    </div>
-
-    <table align="center">
-    <tr>
-      <td width="50%"><base:button onclick="saveAs();" title="Ok" /></td>
-      <td width="50%"><base:button onclick="window.close();" title="Cancel" /></td>
-    </tr>
-    </table>
-
-  </div>
-
-  <div id="generating" style="display: none">
-    <base:note type="info" title="Generating plot">
-    Generating plot. Please wait...
-    </base:note>
+  <base:buttongroup subclass="dialogbuttons" id="buttons">
+    <base:button onclick="saveAs();" title="Ok" />
+    <base:button onclick="window.close();" title="Cancel" />
+  </base:buttongroup>
+  
+  <div class="content" id="generating" style="display: none">
+    <table class="fullcc"><tr><td>
+    <b>Generating plot. Please wait...</b>
+    </td></tr></table>
   </div>
   
-  </form>
-
-
 </base:body>
 </base:page>

trunk/www/views/experiments/plotter/view.jsp

@@ -56 +56 @@
 </base:head>
 <base:body onload="view()">
-  <p>
-
-    <h3 class="docked"><%=title%></h3>
-    <div class="boxed">
-    <img src="../../../images/plot_generating.gif" id="plot">
+    <h1><%=title%></h1>
+    <div class="content">
+      <table class="fullcc"><tr><td>
+      <img src="../../../images/plot_generating.gif" id="plot">
+      </td></tr></table>
     </div>
 
-    <table align="center">
-    <tr>
-      <td><base:button onclick="window.close();" title="Close" /></td>
-    </tr>
-    </table>
-
+    <base:buttongroup subclass="dialogbuttons">
+      <base:button onclick="window.close();" title="Close" />
+    </base:buttongroup>
 
 </base:body>

trunk/www/views/jobs/view_job.jsp

@@ -482 +482 @@
       <t:tab id="parameters" title="Parameters" helpid="job.view.parameters">
         <table class="fullform outlined">
-        <tbody class="section">
+        <tbody class="sectionheader">
           <tr>
             <th colspan="2">Job parameters</th>
@@ -544 +544 @@
           %>
           </tbody>
-          <tbody class="section">
+          <tbody class="sectionheader">
             <tr>
               <th colspan="2">Plugin configuration parameters</th>
@@ -560 +560 @@
           %>
           </tbody>
-          <tbody class="section">
+          <tbody class="sectionheader">
             <tr>
               <th colspan="2">Plugin configuration parameters</th>

trunk/www/views/rawbioassays/edit_spotimages.jsp

@@ -204 +204 @@
     <div class="content filled bottomborder">
       <table class="fullform input100">
-      <tbody class="section">
+      <tbody class="sectionheader">
         <tr>
           <th colspan="4">Scale, offset, etc. for the spots</th>
@@ -252 +252 @@
       </tr>
       </tbody>
-      <tbody class="section">
+      <tbody class="sectionheader">
         <tr>
           <th colspan="4">Raw image files</th>

trunk/www/views/rawbioassays/rawdata/view_rawdata.jsp

@@ -109 +109 @@
     
       <table class="fullform outlined larger">
-      <tbody class="section">
+      <tbody class="sectionheader">
         <tr>
           <th colspan="4">Common rawdata properties</th>
@@ -168 +168 @@
       </tbody>
       
-      <tbody class="section">
+      <tbody class="sectionheader">
         <tr>
           <th colspan="4"><%=rawDataType.getName()%> properties</th>
@@ -222 +222 @@
       <t:tab id="reporter" title="Reporter" >
         <table class="fullform outlined">
-        <tbody class="section">
+        <tbody class="sectionheader">
           <tr>
             <th colspan="4">Common reporter properties</th>
@@ -253 +253 @@
         </tbody>
         
-        <tbody class="section">
+        <tbody class="sectionheader">
           <tr>
             <th colspan="4">Extended reporter properties</th>
@@ -321 +321 @@
       <t:tab id="feature" title="Feature / well" >
       <table class="fullform outlined">
-        <tbody class="section">
+        <tbody class="sectionheader">
           <tr>
             <th colspan="6">Feature</th>
@@ -369 +369 @@
         </tbody>
         
-        <tbody class="section">
+        <tbody class="sectionheader">
           <tr>
             <th colspan="6">Plate position</th>