source: trunk/www/views/experiments/explorer/view/plotter.jsp @ 5142

<%-- $Id: plotter.jsp 5142 2009-10-19 07:11:18Z 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 3
  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 BASE. If not, see <http://www.gnu.org/licenses/>.
  ------------------------------------------------------------------

  @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.IntensityTransform"
  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.data.ReporterData"
  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.ExperimentExplorer"
  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
{
  final int bioAssaySetId = Values.getInt(request.getParameter("bioAssaySetId"));
  final int reporterIndex = Values.getInt(request.getParameter("reporterIndex"));
  final int positionIndex = Values.getInt(request.getParameter("positionIndex"));
  final String plotType = Values.getString(request.getParameter("type"), "line");
  final int annotationTypeId = Values.getInt(request.getParameter("annotationTypeId"));
  final boolean needAverageMethod = positionIndex == ExperimentExplorer.SPOT_AVG;
  
  final BioAssaySet bas = BioAssaySet.getById(dc, bioAssaySetId);
  final RawDataType rdt = bas.getRawDataType();
  final Experiment experiment = bas.getExperiment();
  final int maxRawMappings = bas.getMaxRawMappingsForSpot();
  final IntensityTransform transform = bas.getIntensityTransform();
  final ExperimentExplorer explorer = ExperimentExplorer.getExplorer(bas);
  final ReporterData reporter = explorer.getReporter(dc, reporterIndex);
  final List<AnnotationType> annotationTypes = explorer.getAnnotationTypes(dc, true);
  
  List<TableColumn> formulas = new LinkedList<TableColumn>();
  DynamicUtil.addSpotColumns(formulas, dc, rdt.getChannels(), transform);
  DynamicUtil.addFormulaColumns(formulas, dc, rdt, Formula.Type.COLUMN_EXPRESSION, 
      transform, "", "", 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())
    {
      if (!needAverageMethod || tc.getAverageMethod() != Formula.AverageMethod.NONE)
      {
        String jepExpression = tc.getJepExpression();
        addFormulaOption(formulaOptions, jepExpression, tc.getTitle(), tc.getDescription());
      }
    }
  }
  
  String title = HTML.encodeTags("Plot " + bas.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">

  var averageMethods = new Array();
  <%
  for (TableColumn tc : formulas)
  {
    if (tc.getJepExpression() != null && tc.getDatatype().isNumerical())
    {
      if (!needAverageMethod || tc.getAverageMethod() != Formula.AverageMethod.NONE)
      {
        %>
        averageMethods[averageMethods.length] = '<%=tc.getAverageMethod().name()%>';
        <%
      }
    }
  }
  %>
  
  function validate()
  {
    var plotType = getPlotType();
    if (plotType == 'line')
    {
      return validateLinePlot();
    }
    else if (plotType == 'box')
    {
      return validateBoxPlot();
    }
    return false;
  }
  
  function validateLinePlot()
  {
    var frm = document.forms['line'];
    if (Main.trimString(frm.yFormula.value) == '')
    {
      alert("You must enter an expression for the Y axis");
      frm.yFormula.focus();
      return false;
    }
    return true;
  }
  
  function validateBoxPlot()
  {
    var frm = document.forms['box'];
    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 == 'line' || tabId == 'box')
    {
      plotType = tabId;
    }
    TabControl.setActiveTab(tabControlId, tabId);
  }

  function presetOnChange(list, formula, label)
  {
    var index = list.selectedIndex;
    var frm = list.form;
    if (frm.averageMethod)
    {
      var avgMethod = averageMethods[index-1];
      Forms.selectListOption(frm.averageMethod, avgMethod);
    }
    formula.value = list[index].value;
    if (label && list[index].value != '') label.value = list[index].text;
    list.selectedIndex = 0;
  }
    
  function generatePlotUrl(fullSize)
  {
    if (validate())
    {
      var plotFrm = 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);
      if (fullSize)
      {
        url += '&width='+plotFrm.width.value;
        url += '&height='+plotFrm.height.value;
      }
      var plotType = getPlotType();
      if (plotType == 'line')
      {
        var frm = document.forms['line'];
        url += '&type=line';
        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)
        {
          url += '&averageMethod=' + frm.averageMethod[frm.averageMethod.selectedIndex].value;
        }
      }
      else if (plotType == 'box')
      {
        var frm = document.forms['box'];
        url += '&type=box';
        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;
      }
      url += '&' + new Date().getTime();
      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);
      image.realImg = new Image();
      image.realImg.onload = changePreviewImage;
      image.realImg.src = url;
    }
  }
  
  function changePreviewImage()
  {
    var image = document.getElementById('preview');
    image.src = image.realImg.src;
    image.realImg = null;
  }
  
  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('../../plotter/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('../../plotter/download.jsp?ID=<%=ID%>', 'DownloadPlot', 500, 260);
    }
  }
  
  function savePlotAs()
  {
    var url = generatePlotUrl(true);
    if (url)
    {
      Main.openPopup('../../plotter/save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 500, 260);
    }
  }
  
  function init()
  {
    
  }
  </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(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" 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;"%>"
      active="<%=plotType%>" remember="false"
      switch="switchTab">
    <t:tab id="line" title="Line plot" helpid="explorer.lineplot"
      tooltip="Create a line plot with bioassays along the x axis">
      <form name="line">
      <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', 'line', '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>
      <%
      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;No labels</td>
        <td><input type="checkbox" name="hideXLabels" value="1"></td>
      </tr>
      </table>
      </form>
    </t:tab>
    <t:tab id="box" title="Box plot" helpid="explorer.boxplot"
      tooltip="Create a box plot with annotation values along the x axis">
      <form name="box">
      <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', 'box', '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>
      <%
      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>
    <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();
}
%>