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

Last change on this file since 5905 was 5905, checked in by Nicklas Nordborg, 10 years ago

References #1655: GUI improvements

  • Use relative font sizes (em and %) instead of pixel values. This should make it possible to use relative values for everything and we don't have to split up into size_*.css


  • Removed "valign" attribute from lots of tables.


  • Removed "wrap" attribute from lots of texarea fields.


  • Property svn:eol-style set to native
  • Property svn:keywords set to Date Id
File size: 17.2 KB
Line 
1<%-- $Id: plotter.jsp 5905 2011-12-12 08:42:09Z nicklas $
2  ------------------------------------------------------------------
3  BioArray Software Environment (BASE) - http:// base.thep.lu.se/
4
5  This file is part of BASE - BioArray Software Environment.
6  Available at http://base.thep.lu.se/
7
8  BASE is free software; you can redistribute it and/or
9  modify it under the terms of the GNU General Public License
10  as published by the Free Software Foundation; either version 3
11  of the License, or (at your option) any later version.
12
13  BASE is distributed in the hope that it will be useful,
14  but WITHOUT ANY WARRANTY; without even the implied warranty of
15  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16  GNU General Public License for more details.
17
18  You should have received a copy of the GNU General Public License
19  along with BASE. If not, see <http://www.gnu.org/licenses/>.
20  ------------------------------------------------------------------
21
22  @author Nicklas
23  @version 2.0
24--%>
25<%@ page pageEncoding="UTF-8" session="false"
26  import="net.sf.basedb.core.SessionControl"
27  import="net.sf.basedb.core.DbControl"
28  import="net.sf.basedb.core.Experiment"
29  import="net.sf.basedb.core.BioAssaySet"
30  import="net.sf.basedb.core.BioAssay"
31  import="net.sf.basedb.core.RawDataType"
32  import="net.sf.basedb.core.RawDataProperty"
33  import="net.sf.basedb.core.Formula"
34  import="net.sf.basedb.core.IntensityTransform"
35  import="net.sf.basedb.core.AnnotationType"
36  import="net.sf.basedb.core.ItemQuery"
37  import="net.sf.basedb.core.ItemResultList"
38  import="net.sf.basedb.core.Include"
39  import="net.sf.basedb.core.Permission"
40  import="net.sf.basedb.core.Item"
41  import="net.sf.basedb.core.data.ReporterData"
42  import="net.sf.basedb.core.query.Orders"
43  import="net.sf.basedb.core.query.Hql"
44  import="net.sf.basedb.core.query.Restrictions"
45  import="net.sf.basedb.core.query.Restriction"
46  import="net.sf.basedb.core.query.Expressions"
47  import="net.sf.basedb.clients.web.ExperimentExplorer"
48  import="net.sf.basedb.clients.web.Base"
49  import="net.sf.basedb.clients.web.DynamicUtil"
50  import="net.sf.basedb.clients.web.util.HTML"
51  import="net.sf.basedb.util.Values"
52  import="net.sf.basedb.clients.web.WebException"
53  import="net.sf.basedb.clients.web.taglib.table.TableColumn"
54  import="java.util.List"
55  import="java.util.LinkedList"
56%>
57<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
58<%@ taglib prefix="t" uri="/WEB-INF/tab.tld" %>
59<%!
60private static void addFormulaOption(StringBuilder options, String formula, String title, String description)
61{
62  options.append("<option value=\"").append(HTML.encodeTags(formula)).append("\"");
63  options.append(" title=\"").append(HTML.encodeTags(description)).append("\"");
64  options.append(">").append(HTML.encodeTags(title)).append("\n");
65}
66%>
67<%
68final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
69final float scale = Base.getScale(sc);
70final String ID = sc.getId();
71final DbControl dc = sc.newDbControl();
72try
73{
74  final int bioAssaySetId = Values.getInt(request.getParameter("bioAssaySetId"));
75  final int reporterIndex = Values.getInt(request.getParameter("reporterIndex"));
76  final int positionIndex = Values.getInt(request.getParameter("positionIndex"));
77  final String plotType = Values.getString(request.getParameter("type"), "assay");
78  final int annotationTypeId = Values.getInt(request.getParameter("annotationTypeId"));
79  final boolean needAverageMethod = positionIndex == ExperimentExplorer.SPOT_AVG;
80 
81  final BioAssaySet bas = BioAssaySet.getById(dc, bioAssaySetId);
82  final RawDataType rdt = bas.getRawDataType();
83  final Experiment experiment = bas.getExperiment();
84  final int maxRawMappings = bas.getMaxRawMappingsForSpot();
85  final IntensityTransform transform = bas.getIntensityTransform();
86  final ExperimentExplorer explorer = ExperimentExplorer.getExplorer(bas);
87  final ReporterData reporter = explorer.getReporter(dc, reporterIndex);
88  final List<AnnotationType> annotationTypes = explorer.getAnnotationTypes(dc, true);
89 
90  List<TableColumn> formulas = new LinkedList<TableColumn>();
91  DynamicUtil.addSpotColumns(formulas, dc, rdt.getChannels(), transform);
92  DynamicUtil.addFormulaColumns(formulas, dc, rdt, Formula.Type.COLUMN_EXPRESSION, 
93      transform, "", "", maxRawMappings == 1);
94  DynamicUtil.addExtraColumns(formulas, dc, bas, "ev", "#", "[Xtra] ");
95  if (maxRawMappings == 1)
96  {
97    DynamicUtil.addRawDataColumns(formulas, dc, rdt, "", "", "[Raw] ");
98  }
99 
100  StringBuilder formulaOptions = new StringBuilder();
101  for (TableColumn tc : formulas)
102  {
103    if (tc.getJepExpression() != null && tc.getDatatype().isNumerical())
104    {
105      if (!needAverageMethod || tc.getAverageMethod() != Formula.AverageMethod.NONE)
106      {
107        String jepExpression = tc.getJepExpression();
108        addFormulaOption(formulaOptions, jepExpression, tc.getTitle(), tc.getDescription());
109      }
110    }
111  }
112 
113  String title = HTML.encodeTags("Plot " + bas.getName());
114  final boolean hasCreateFilePermission = sc.hasPermission(Permission.CREATE, Item.FILE);
115  %>
116  <base:page type="popup" title="<%=title%>">
117  <base:head styles="tabcontrol.css" scripts="tabcontrol.js">
118  <script language="JavaScript">
119
120  var averageMethods = new Array();
121  <%
122  for (TableColumn tc : formulas)
123  {
124    if (tc.getJepExpression() != null && tc.getDatatype().isNumerical())
125    {
126      if (!needAverageMethod || tc.getAverageMethod() != Formula.AverageMethod.NONE)
127      {
128        %>
129        averageMethods[averageMethods.length] = '<%=tc.getAverageMethod().name()%>';
130        <%
131      }
132    }
133  }
134  %>
135 
136  function validate()
137  {
138    var plotType = getPlotType();
139    if (plotType == 'assay')
140    {
141      return validateAssayPlot();
142    }
143    else if (plotType == 'annotation')
144    {
145      return validateAnnotationPlot();
146    }
147    return false;
148  }
149 
150  function validateAssayPlot()
151  {
152    var frm = document.forms['assay'];
153    if (Main.trimString(frm.yFormula.value) == '')
154    {
155      alert("You must enter an expression for the Y axis");
156      frm.yFormula.focus();
157      return false;
158    }
159    return true;
160  }
161 
162  function validateAnnotationPlot()
163  {
164    var frm = document.forms['annotation'];
165    if (Main.trimString(frm.yFormula.value) == '')
166    {
167      alert("You must enter an expression for the Y axis");
168      frm.yFormula.focus();
169      return false;
170    }
171    return true;
172  }
173 
174  var plotType = '<%=plotType%>';
175  function getPlotType()
176  {
177    return plotType;
178  }
179
180  function switchTab(tabControlId, tabId)
181  {
182    if (tabId == 'assay' || tabId == 'annotation')
183    {
184      plotType = tabId;
185    }
186    TabControl.setActiveTab(tabControlId, tabId);
187  }
188
189  function presetOnChange(list, formula, label)
190  {
191    var index = list.selectedIndex;
192    var frm = list.form;
193    if (frm.averageMethod)
194    {
195      var avgMethod = averageMethods[index-1];
196      Forms.selectListOption(frm.averageMethod, avgMethod);
197    }
198    formula.value = list[index].value;
199    if (label && list[index].value != '') label.value = list[index].text;
200    list.selectedIndex = 0;
201  }
202   
203  function generatePlotUrl(fullSize)
204  {
205    if (validate())
206    {
207      var plotFrm = document.forms['plot'];
208      var url = getRoot() + 'views/experiments/explorer/plot';
209      url += '?ID=<%=ID%>&bioAssaySetId=<%=bioAssaySetId%>';
210      url += '&reporterIndex=<%=reporterIndex%>&positionIndex=<%=positionIndex%>';
211      url += '&title='+Main.encodeURI(plotFrm.title.value);
212      url += '&subTitle='+Main.encodeURI(plotFrm.subTitle.value);
213      if (fullSize)
214      {
215        url += '&width='+plotFrm.width.value;
216        url += '&height='+plotFrm.height.value;
217      }
218      var plotType = getPlotType();
219      if (plotType == 'assay')
220      {
221        var frm = document.forms['assay'];
222        url += '&type=assay';
223        url += '&subtype=' + frm.subtype[frm.subtype.selectedIndex].value;
224        url += '&y='+Main.encodeURI(frm.yFormula.value);
225        url += '&yLog='+(frm.yLog.checked ? 1 : 0);
226        url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
227        url += '&showXLabels='+(frm.hideXLabels.checked ? 0 : 1);
228        if (frm.averageMethod)
229        {
230          url += '&averageMethod=' + frm.averageMethod[frm.averageMethod.selectedIndex].value;
231        }
232      }
233      else if (plotType == 'annotation')
234      {
235        var frm = document.forms['annotation'];
236        url += '&type=annotation';
237        url += '&y='+Main.encodeURI(frm.yFormula.value);
238        url += '&yLog='+(frm.yLog.checked ? 1 : 0);
239        url += '&yLabel='+Main.encodeURI(frm.yLabel.value);
240        url += '&annotationTypeId=' + frm.annotationTypeId[frm.annotationTypeId.selectedIndex].value;
241      }
242      url += '&' + new Date().getTime();
243      return url;
244    }
245  }
246 
247  function openExpressionBuilder(title, frmName, inputName, formulaType)
248  {
249    if (!document.forms[frmName][inputName].disabled)
250    {
251      var restrictions = formulaType == '<%=Formula.Type.COLUMN_RESTRICTION.name()%>';
252      Main.expressionBuilder('<%=ID%>', title, frmName, inputName, formulaType, '<%=rdt.getId()%>', <%=rdt.getChannels()%>, restrictions, <%=bas.getId()%>);
253    }
254  }
255 
256  function previewPlot()
257  {
258    var url = generatePlotUrl(false);
259    if (url)
260    {
261      url += '&width=600&height=400';
262      var image = document.getElementById('preview');
263      if (image.src.indexOf('plot_select') == -1)
264      {
265        var background = document.getElementById('background');
266        background.src = image.src;
267      }
268      image.src = getRoot()+'images/plot_generating.gif';
269      // Otherwise, the browser refuses to display the 'plot_generating.gif' while we are waiting.
270      //setTimeout('changePreviewImage()', 100);
271      image.realImg = new Image();
272      image.realImg.onload = changePreviewImage;
273      image.realImg.src = url;
274    }
275  }
276 
277  function changePreviewImage()
278  {
279    var image = document.getElementById('preview');
280    image.src = image.realImg.src;
281    image.realImg = null;
282  }
283 
284  function viewPlot()
285  {
286    var url = generatePlotUrl(true);
287    if (url)
288    {
289      var frm = document.forms['plot'];
290      var width = parseInt(frm.width.value);
291      var height = parseInt(frm.height.value);
292      if (!width || width < 600) width = 600;
293      if (!height || height < 400) height = 400;
294      Main.openPopup('../../plotter/view.jsp?ID=<%=ID%>&title='+Main.encodeURI(frm.title.value), 'ViewPlot', width+50, height+100);
295    }
296  }
297 
298  function downloadPlot()
299  {
300    var url = generatePlotUrl(true);
301    if (url)
302    {
303      Main.openPopup('../../plotter/download.jsp?ID=<%=ID%>', 'DownloadPlot', 500, 260);
304    }
305  }
306 
307  function savePlotAs()
308  {
309    var url = generatePlotUrl(true);
310    if (url)
311    {
312      Main.openPopup('../../plotter/save_as.jsp?ID=<%=ID%>', 'SavePlotAs', 500, 260);
313    }
314  }
315 
316  function init()
317  {
318   
319  }
320  </script>
321  </base:head>
322  <base:body onload="init()">
323 
324  <h3 class="docked"><%=title%> <base:help tabcontrol="plotType" /></h3>
325  <div class="boxed">
326 
327  <table border="0" cellspacing="0" cellpadding="2" width="100%">
328  <tr >
329    <td>
330    <form name="plot">
331    <table class="form">
332    <tr>
333      <td class="prompt">Plot title</td>
334      <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="title" 
335        value="<%=HTML.encodeTags(bas.getName())%>"></td>
336    </tr>
337    <tr>
338      <td class="prompt">Subtitle</td>
339      <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="subTitle" 
340        value="<%=HTML.encodeTags(reporter.getName())%>"></td>
341    </tr>
342    <tr>
343      <td class="prompt">Width</td>
344      <td><input type="text" class="text" size="12" maxlength="10" name="width" 
345        value="800" onkeypress="return Numbers.integerOnly(event)"></td>
346      <td rowspan="2">(not used by preview)</td>
347    </tr>
348    <tr>
349      <td class="prompt">Height</td>
350      <td><input type="text" class="text" size="12" maxlength="10" name="height" 
351        value="600" onkeypress="return Numbers.integerOnly(event)"></td>
352    </tr>
353    </table>
354    </form>
355    <p>
356
357    <t:tabcontrol id="plotType" 
358      style="<%="width: "+(int)(scale*340)+"px;"%>" 
359      contentstyle="<%="height: "+(int)(scale*340)+"px;"%>"
360      active="<%=plotType%>" remember="false"
361      switch="switchTab">
362    <t:tab id="assay" title="By bioassay" helpid="explorer.assayplot"
363      tooltip="Create a line/bar plot with bioassays along the x axis">
364      <form name="assay">
365      <table border="0" cellspacing="0" cellpadding="2" class="form">
366      <tr>
367        <td class="prompt">Plot type</td>
368        <td colspan="2">
369          <select name="subtype">
370          <option value="line">Line plot</option>
371          <option value="bar">Bar plot</option>
372          </select>
373      </tr>
374      <tr>
375        <td class="prompt" colspan="3">Y-axis</td>
376      </tr>
377      <tr>
378        <td>&nbsp;Presets</td>
379        <td colspan="2">
380        <select name="yPresets" style="width: 20em;"
381          onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)" 
382          >
383          <option value="">- select from list or enter formula below -
384          <%=formulaOptions.toString()%>
385        </select>
386        </td>
387      </tr>
388      <tr>
389        <td>&nbsp;Expression</td>
390        <td><input type="text" class="text required" size="30" maxlength="255" name="yFormula"></td>
391        <td>
392          <base:button
393            title=""
394            image="expression_builder.gif"
395            tooltip="Use the Expression builder"
396            onclick="openExpressionBuilder('Y-axis expression', 'assay', 'yFormula', 'COLUMN_EXPRESSION')"
397          />
398        </td>
399      </tr>
400      <tr>
401        <td>&nbsp;Label</td>
402        <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="yLabel"></td>
403      </tr>
404      <tr>
405        <td>&nbsp;<label for="yLog">Log scale</label></td>
406        <td colspan="2"><input type="checkbox" name="yLog" id="yLog" value="1"></td>
407      </tr>
408      <%
409      if (positionIndex == ExperimentExplorer.SPOT_AVG)
410      {
411        %>
412        <tr>
413          <td>&nbsp;Average</td>
414          <td>
415            <select name="averageMethod">
416            <%
417            for (Formula.AverageMethod method : Formula.AverageMethod.values())
418            {
419              if (method != Formula.AverageMethod.NONE)
420              {
421                %>
422                <option value="<%=method.name()%>"><%=method.toString()%></option>
423                <%
424              }
425            }
426            %>
427            </select>
428          </td>
429        <% 
430      }
431      %>
432      <tr>
433        <td class="prompt" colspan="3">X-axis</td>
434      </tr>
435      <tr>
436        <td>&nbsp;<label for="hideXLabels">No labels</label></td>
437        <td><input type="checkbox" name="hideXLabels" id="hideXLabels" value="1"></td>
438      </tr>
439      </table>
440      </form>
441    </t:tab>
442    <t:tab id="annotation" title="By annotation" helpid="explorer.annotationplot"
443      tooltip="Create a box plot with annotation values along the x axis">
444      <form name="annotation">
445      <table border="0" cellspacing="0" cellpadding="2" class="form">
446      <tr>
447        <td class="prompt" colspan="3">Y-axis</td>
448      </tr>
449      <tr>
450        <td>&nbsp;Presets</td>
451        <td colspan="2">
452        <select name="yPresets" style="width: 20em;"
453          onchange="presetOnChange(this, this.form.yFormula, this.form.yLabel)" 
454          >
455          <option value="">- select from list or enter formula below -
456          <%=formulaOptions.toString()%>
457        </select>
458        </td>
459      </tr>
460      <tr>
461        <td>&nbsp;Expression</td>
462        <td><input type="text" class="text required" size="30" maxlength="255" name="yFormula"></td>
463        <td>
464          <base:button
465            title=""
466            image="expression_builder.gif"
467            tooltip="Use the Expression builder"
468            onclick="openExpressionBuilder('Y-axis expression', 'annotation', 'yFormula', 'COLUMN_EXPRESSION')"
469          />
470        </td>
471      </tr>
472      <tr>
473        <td>&nbsp;Label</td>
474        <td colspan="2"><input type="text" class="text" size="30" maxlength="255" name="yLabel"></td>
475      </tr>
476      <tr>
477        <td>&nbsp;<label for="yLogAnnotation">Log scale</label></td>
478        <td colspan="2"><input type="checkbox" name="yLog" id="yLogAnnotation" value="1"></td>
479      </tr>
480      <%
481      if (positionIndex == ExperimentExplorer.SPOT_AVG)
482      {
483        %>
484        <tr>
485          <td>&nbsp;Average</td>
486          <td>
487            <select name="averageMethod">
488            <%
489            for (Formula.AverageMethod method : Formula.AverageMethod.values())
490            {
491              if (method != Formula.AverageMethod.NONE)
492              {
493                %>
494                <option value="<%=method.name()%>"><%=method.toString()%></option>
495                <%
496              }
497            }
498            %>
499            </select>
500          </td>
501        <% 
502      }
503      %>
504      <tr>
505        <td class="prompt" colspan="3">X-axis</td>
506      </tr>
507      <tr>
508        <td>&nbsp;Annotation</td>
509        <td>
510          <select name="annotationTypeId">
511          <%
512          for (AnnotationType at : annotationTypes)
513          {
514            String selected = at.getId() == annotationTypeId ? "selected" : "";
515            %>
516            <option value="<%=at.getId()%>" <%=selected%>><%=HTML.encodeTags(at.getName())%>
517            <%
518          }
519          %>
520          </select>
521        </td>
522      </tr>
523      </table>
524      </form>
525    </t:tab>
526    </t:tabcontrol>
527    </td>
528    <td xstyle="width: 600px;">
529      <div style="position: relative; top: 0px; left: 0px; width: 600px; height: 400px; padding-bottom: 2px;">
530      <img src="../../../../images/plot_empty.png" id="background" 
531        style="position: absolute; top: 0px; left: 0px; z-index: 1; border: 1px solid #999999;">
532      <img src="../../../../images/plot_select.gif" id="preview" 
533        style="position: relative; top: 0px; left: 0px; z-index: 2; border: 1px solid #999999;">
534      </div>
535    </td>
536  </tr>
537  </table>
538  </div>
539    <p>
540    <div align="center">
541    <base:buttongroup>
542      <base:button title="Preview" onclick="previewPlot()" 
543        image="plotter_preview.gif" tooltip="Generate a preview of the plot" 
544      />
545      <base:button title="View&hellip;" onclick="viewPlot()" 
546        image="plotter.gif" tooltip="View a fullsized version of the plot (in a popup)" 
547      />
548      <base:button title="Download&hellip;" onclick="downloadPlot()" 
549        image="download.gif"
550        tooltip="Downlad a fullsized version of the plot to you computer" 
551      />
552      <base:button title="Save as&hellip;" onclick="savePlotAs()" 
553        image="<%=hasCreateFilePermission ? "saveas.gif" : "saveas_disabled.gif"%>"
554        disabled="<%=!hasCreateFilePermission%>"
555        tooltip="<%=hasCreateFilePermission ? 
556          "Save a fullsized version of the plot on the BASE server" :
557          "You don't have permission to create files" %>" 
558      />
559      <base:button onclick="window.close()" title="Close" />
560    </base:buttongroup>
561    </div>
562 
563  </base:body>
564  </base:page>
565  <%
566}
567finally
568{
569  if (dc != null) dc.close();
570}
571%>
Note: See TracBrowser for help on using the repository browser.