source: trunk/www/views/experiments/plotter/index.jsp @ 3015

<%-- $Id: index.jsp 3015 2006-12-11 11:35:36Z nicklas $
  ------------------------------------------------------------------
  BioArray Software Environment (BASE) - http:// base.thep.lu.se/

  This file is part of BASE - BioArray Software Environment.
  Available at http://base.thep.lu.se/

  BASE is free software; you can redistribute it and/or
  modify it under the terms of the GNU General Public License
  as published by the Free Software Foundation; either version 2
  of the License, or (at your option) any later version.

  BASE is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 59 Temple Place - Suite 330,
  Boston, MA  02111-1307, USA.
  ------------------------------------------------------------------

  @author Nicklas
  @version 2.0
--%>
<%@ page session="false"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.Experiment"
  import="net.sf.basedb.core.BioAssaySet"
  import="net.sf.basedb.core.BioAssay"
  import="net.sf.basedb.core.RawDataType"
  import="net.sf.basedb.core.RawDataProperty"
  import="net.sf.basedb.core.Formula"
  import="net.sf.basedb.core.AnnotationType"
  import="net.sf.basedb.core.ItemQuery"
  import="net.sf.basedb.core.ItemResultList"
  import="net.sf.basedb.core.Include"
  import="net.sf.basedb.core.Permission"
  import="net.sf.basedb.core.Item"
  import="net.sf.basedb.core.query.Orders"
  import="net.sf.basedb.core.query.Hql"
  import="net.sf.basedb.core.query.Restrictions"
  import="net.sf.basedb.core.query.Restriction"
  import="net.sf.basedb.core.query.Expressions"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.DynamicUtil"
  import="net.sf.basedb.clients.web.util.HTML"
  import="net.sf.basedb.util.Values"
  import="net.sf.basedb.clients.web.WebException"
  import="net.sf.basedb.clients.web.taglib.table.TableColumn"
  import="java.util.List"
  import="java.util.LinkedList"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="t" uri="/WEB-INF/tab.tld" %>
<%!
private static void addFormulaOption(StringBuilder options, String formula, String title, String description)
{
  options.append("<option value=\"").append(HTML.encodeTags(formula)).append("\"");
  options.append(" title=\"").append(HTML.encodeTags(description)).append("\"");
  options.append(">").append(HTML.encodeTags(title)).append("\n");
}

%>
<%
final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
final float scale = Base.getScale(sc);
final String ID = sc.getId();
final DbControl dc = sc.newDbControl();
try
{
  int bioAssaySetId = Values.getInt(request.getParameter("bioassayset_id"));
  int bioAssayId = Values.getInt(request.getParameter("bioassay_id"));
  BioAssay ba = bioAssayId == 0 ? null : BioAssay.getById(dc, bioAssayId);
  BioAssaySet bas = ba == null ? BioAssaySet.getById(dc, bioAssaySetId) : ba.getBioAssaySet();
  RawDataType rdt = bas.getRawDataType();
  Experiment experiment = bas.getExperiment();
  int maxRawMappings = bas.getMaxRawMappingsForSpot();
  
  List<TableColumn> formulas = new LinkedList<TableColumn>();
  DynamicUtil.addSpotColumns(formulas, dc, rdt.getChannels());
  DynamicUtil.addFormulaColumns(formulas, dc, rdt, Formula.Type.COLUMN_EXPRESSION, "", "", maxRawMappings == 1);
  DynamicUtil.addExtraColumns(formulas, dc, bas, "ev", "#", "[Xtra] ");
  if (maxRawMappings == 1)
  {
    DynamicUtil.addRawDataColumns(formulas, dc, rdt, "", "", "[Raw] ");
  }
  
  StringBuilder formulaOptions = new StringBuilder();
  for (TableColumn tc : formulas)
  {
    if (tc.getJepExpression() != null && tc.getDatatype().isNumerical())
    {
      String jepExpression = tc.getJepExpression();
      addFormulaOption(formulaOptions, jepExpression, tc.getTitle(), tc.getDescription());
    }
  }
  
  StringBuilder filterOptions = new StringBuilder();
  ItemQuery<Formula> formulaQuery = Formula.getQuery(Formula.Type.COLUMN_RESTRICTION, rdt);
  formulaQuery.order(Orders.asc(Hql.property("name")));
  formulaQuery.include(Include.MINE, Include.SHARED, Include.IN_PROJECT, Include.OTHERS);
  for (Formula formula : formulaQuery.list(dc))
  {
    String f = formula.getFormulas().get(0);
    if (maxRawMappings == 1 || !f.contains("raw("))
    {
      addFormulaOption(filterOptions, f, 
        formula.getName(), formula.getDescription());
    }
  }
  
  // Annnotations -- experimental factors and bioassay annotations
  final ItemQuery<AnnotationType> query = AnnotationType.getQuery(null);
  query.join(Hql.leftJoin("experiments", Item.EXPERIMENT.getAlias()));
  query.join(Hql.innerJoin("itemTypes", "itemType"));
  Restriction ef = Restrictions.eq(
    Hql.alias(Item.EXPERIMENT.getAlias()), 
    Hql.entity(experiment)
  );
  Restriction baa = Restrictions.eq(
    Hql.alias("itemType"),
    Expressions.integer(Item.BIOASSAY.getValue())
  );
  query.restrict(Restrictions.or(ef, baa));
  query.include(Include.MINE, Include.SHARED, Include.IN_PROJECT, Include.OTHERS);
  query.order(Orders.asc(Hql.property("name")));
  List<AnnotationType> experimentalFactors = query.list(dc);
  
  String title = HTML.encodeTags("Plot " + (ba == null ? bas.getName() : ba.getName()));
  
  final boolean hasCreateFilePermission = sc.hasPermission(Permission.CREATE, Item.FILE);
  
  %>
  <base:page type="popup" title="<%=title%>">
  <base:head styles="tabcontrol.css" scripts="tabcontrol.js">
  <script language="JavaScript">

  function validate()
  {
    var plotType = getPlotType();
    if (plotType == 'scatter')
    {
      return validateScatterPlot();
    }
    else if (plotType == 'histogram')
    {
      return validateHistogramPlot();
    }
    return false;
  }
  function validateScatterPlot()
  {
    var frm = document.forms['scatter'];
    if (Main.trimString(frm.yFormula.value) == '')
    {
      alert("You must enter an expression for the Y axis");
      frm.yFormula.focus();
      return false;
    }
    else if (Main.trimString(frm.xFormula.value) == '')
    {
      alert("You must enter an expression for the X axis");
      frm.xFormula.focus();
      return false;
    }
    return true;
  }
  function validateHistogramPlot()
  {
    var frm = document.forms['histogram'];
    var yAggregate = Forms.getCheckedRadio(frm.yAggregate).value;
    if (Main.trimString(frm.xFormula.value) == '')
    {
      alert("You must enter an expression for the X axis");
      frm.xFormula.focus();
      return false;
    }
    else if (yAggregate != 'count' && Main.trimString(frm.yFormula.value) == '')
    {
      alert("You must enter an expression for the Y axis");
      frm.yFormula.focus();
      return false;
    }
    return true;
  }

  var plotType = 'scatter';
  function getPlotType()
  {
    return plotType;
  }

  function switchTab(tabControlId, tabId)
  {
    if (tabId == 'scatter' || tabId == 'histogram')
    {
      plotType = tabId;
    }
    TabControl.setActiveTab(tabControlId, tabId);
  }

  function presetOnChange(list, formula, label)
  {
    var index = list.selectedIndex;
    formula.value = list[index].value;
    if (label && list[index].value != '') label.value = list[index].text;
    list.selectedIndex = 0;
  }
  
  function aggregateOnChange()
  {
    var frm = document.forms['histogram'];
    var selected = Forms.getCheckedRadio(frm.yAggregate);
    var isCount = selected.value == 'count';
    frm.yFormula.disabled = isCount;
    frm.yPresets.disabled = isCount;
    frm.yLog.disabled = isCount;
    for (var i = 0; i < frm.hiloAggregate.length; i++)
    {
      frm.hiloAggregate[i].disabled = isCount;
    }
    if (isCount)
    {
      Main.removeClass(frm.yFormula, 'required');
      frm.yLabel.value = 'Count';
    }
    else
    {
      Main.addClass(frm.yFormula, 'required');
      var yPreset = frm.yPresets[frm.yPresets.selectedIndex];
      if (yPreset.value != '') frm.yLabel.value = yPreset.text;
    }
  }
  
  function annotationOnChange(list)
  {
    var frm = document.forms['plot'];
    var selected = list[list.selectedIndex];
    var value = selected.value && selected.value != '$' ? selected.text : '';
    value = value.replace('\[A\] ', '');
    frm.subTitle.value = value;
    
    var annotationFrm = document.forms['annotation'];
    if (selected.value.substring(0, 1) == '$')
    {
      annotationFrm.annotationExp.disabled = true;
    }
    else
    {
      if (selected.value)
      {
        annotationFrm.annotationExp.value = selected.value;
      }
      annotationFrm.annotationExp.disabled = false;
      annotationFrm.annotationExp.focus();
    }
  }
  
  function annotationExpressionOnChange()
  {
    var annotationFrm = document.forms['annotation'];
    annotationFrm.annotationPresets.selectedIndex = annotationFrm.annotationPresets.length-1;
  }
  
  function generatePlotUrl(fullSize)
  {
    if (validate())
    {
      var plotFrm = 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);
      if (fullSize)
      {
        url += '&width='+plotFrm.width.value;
        url += '&height='+plotFrm.height.value;
      }
      
      var filterFrm = document.forms['filter'];
      if (filterFrm.filter.value != '')
      {
        url += '&filter='+Main.encodeURI(filterFrm.filter.value);
      }
      
      var annotationFrm = document.forms['annotation'];
      var annotation = '';
      if (!annotationFrm.annotationExp.disabled)
      {
        if (annotationFrm.annotationExp.value)
        {
          annotation = '=' + annotationFrm.annotationExp.value;
        }
      }
      else
      {
        annotation = annotationFrm.annotationPresets[annotationFrm.annotationPresets.selectedIndex].value.substring(1);
      }
      if (annotation)
      {
        url += '&annotation='+Main.encodeURI(annotation);
      }

      var plotType = getPlotType();
      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);
      }
      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 += '&binSize='+Main.encodeURI(frm.binSize.value);
        url += '&yAggregate='+yAggregate;
        if (yAggregate != 'count')
        {
          url += '&y='+Main.encodeURI(frm.yFormula.value);
          url += '&yLog='+(frm.yLog.checked ? 1 : 0);
          url += '&hiloAggregate='+Forms.getCheckedRadio(frm.hiloAggregate).value
        }
        url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
      }
      return url;
    }
  }
  
  function openExpressionBuilder(title, frmName, inputName, formulaType)
  {
    if (!document.forms[frmName][inputName].disabled)
    {
      var restrictions = formulaType == '<%=Formula.Type.COLUMN_RESTRICTION.name()%>';
      Main.expressionBuilder('<%=ID%>', title, frmName, inputName, formulaType, '<%=rdt.getId()%>', <%=rdt.getChannels()%>, restrictions, <%=bas.getId()%>);
    }
  }
  
  function previewPlot()
  {
    var url = generatePlotUrl(false);
    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);
    }
  }
  
  function changePreviewImage()
  {
    var url = generatePlotUrl(false);
    if (url)
    {
      document.getElementById('preview').src = url;
    }
  }
  
  function viewPlot()
  {
    var url = generatePlotUrl(true);
    if (url)
    {
      var frm = document.forms['plot'];
      var width = parseInt(frm.width.value);
      var height = parseInt(frm.height.value);
      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);
    }
  }
  
  function downloadPlot()
  {
    var url = generatePlotUrl(true);
    if (url)
    {
      Main.openPopup('download.jsp?ID=<%=ID%>', 'DownloadPlot', 500, 260);
    }
  }
  
  function savePlotAs()
  {
    var url = generatePlotUrl(true);
    if (url)
    {
      Main.openPopup('save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 500, 260);
    }
  }
  
  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 valign="bottom">
    <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" valign="center">(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;Log scale</td>
        <td colspan="2"><input type="checkbox" name="yLog" 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>Log scale</td>
        <td colspan="2"><input type="checkbox" name="xLog" value="1"></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" value="count" checked onchange="aggregateOnChange()"> Count
          <input type="radio" name="yAggregate" value="mean" onchange="aggregateOnChange()"> Mean
        </td>
      </tr>
      <tr>
        <td>&nbsp;Hi-lo</td>
        <td colspan="2">
          <input type="radio" name="hiloAggregate" value="" checked> None
          <input type="radio" name="hiloAggregate" value="hilomaxmin"> Min/Max
          <input type="radio" name="hiloAggregate" value="hilostdev"> Stdev
        </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;Log scale</td>
        <td colspan="2"><input type="checkbox" name="yLog" 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>Log scale</td>
        <td colspan="2"><input type="checkbox" name="xLog" 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>
    
    <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>
    <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>
  
  </base:body>
  </base:page>
  <%
}
finally
{
  if (dc != null) dc.close();
}
%>