source: trunk/www/common/annotations/annotate.jsp @ 7213

<%-- $Id: annotate.jsp 7213 2016-10-19 12:18:53Z nicklas $
  ------------------------------------------------------------------
  Copyright (C) 2005 Nicklas Nordborg
  Copyright (C) 2006 Jari Häkkinen, Nicklas Nordborg
  Copyright (C) 2007 Nicklas Nordborg

  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 pageEncoding="UTF-8" session="false"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.Item"
  import="net.sf.basedb.core.Type"
  import="net.sf.basedb.core.BasicItem"
  import="net.sf.basedb.core.Permission"
  import="net.sf.basedb.core.Annotatable"
  import="net.sf.basedb.core.Nameable"
  import="net.sf.basedb.core.Protocol"
  import="net.sf.basedb.core.Subtypable"
  import="net.sf.basedb.core.ItemSubtype"
  import="net.sf.basedb.core.BioPlateType"
  import="net.sf.basedb.core.BioPlate"
  import="net.sf.basedb.core.AnnotationSet"
  import="net.sf.basedb.core.Annotation"
  import="net.sf.basedb.core.Unit"
  import="net.sf.basedb.core.Quantity"
  import="net.sf.basedb.core.AnnotatableProxy"
  import="net.sf.basedb.core.ItemQuery"
  import="net.sf.basedb.core.Include"
  import="net.sf.basedb.core.ItemResultList"
  import="net.sf.basedb.core.AnnotationType"
  import="net.sf.basedb.core.AnnotationTypeCategory"
  import="net.sf.basedb.core.PermissionDeniedException"
  import="net.sf.basedb.core.query.Expressions"
  import="net.sf.basedb.core.query.Restrictions"
  import="net.sf.basedb.core.query.Hql"
  import="net.sf.basedb.core.query.Orders"
  import="net.sf.basedb.util.NameableComparator"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.util.HTML"
  import="net.sf.basedb.util.formatter.Formatter"
  import="net.sf.basedb.clients.web.formatter.FormatterFactory"
  import="net.sf.basedb.clients.web.formatter.FormatterSettings"
  import="net.sf.basedb.clients.web.AnnotationUtil"
  import="net.sf.basedb.util.Values"
  import="org.json.simple.JSONObject"
  import="org.json.simple.JSONArray"
  import="java.util.ArrayList"
  import="java.util.List"
  import="java.util.Date"
  import="java.util.Set"
  import="java.util.HashSet"
  import="java.util.TreeSet"
  import="java.util.Map"
  import="java.util.HashMap"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
<%@ taglib prefix="m" uri="/WEB-INF/menu.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final Item itemType = Item.valueOf(request.getParameter("item_type"));
final int itemId = Values.getInt(request.getParameter("item_id"));
final int protocolId = Values.getInt(request.getParameter("protocol_id"), -1);
final int subtypeId = Values.getInt(request.getParameter("subtype_id"), -1);
final int annotationId = Values.getInt(request.getParameter("annotation_id"));
int annotationTypeId = Values.getInt(request.getParameter("annotationtype_id"));
final boolean standalone = Values.getBoolean(request.getParameter("standalone"));

// Parent items may have been submitted by caller
// Each parameter is ITEMTYPE:ID:ID:...
String[] parents = request.getParameterValues("parents");

final DbControl dc = sc.newDbControl();
try
{
  // Date and time formats
  String dateFormat = FormatterSettings.getDateFormat(sc);
  String htmlDateFormat = HTML.encodeTags(dateFormat);
  String dateTimeFormat = FormatterSettings.getDateTimeFormat(sc);
  String htmlDateTimeFormat = HTML.encodeTags(dateTimeFormat);
  
  Annotatable item = null;
  
  if (annotationId != 0)
  {
    Annotation a = Annotation.getById(dc, annotationId);
    item = a.getAnnotationSet().getItem();
    annotationTypeId = a.getAnnotationType().getId();
  }
  else if (itemId != 0)
  {
    item = (Annotatable)itemType.getById(dc, itemId);
  }
  final boolean annotatePermission = item == null ? true : item.hasPermission(Permission.RESTRICTED_WRITE);
  
  // Load the current item and it's protocol
  // NOTE! User may have selected a different protocol in the form than what is
  // currently saved so if a protocol_id is sent in the request we use that
  Protocol protocol = null;
  boolean readProtocol = true;
  try
  {
    if (protocolId == - 1 && item != null)
    {
      protocol = item.getProtocol();
    }
    else if (protocolId > 0)
    {
      protocol = Protocol.getById(dc, protocolId);
    }
  }
  catch (PermissionDeniedException ex)
  {
    readProtocol = false;
  }
  
  // Load the current subtype
  // NOTE! User may have selected a different subtype in the form than what is
  // currently saved so if a subtype_id is sent in the request we use that
  String selectedCategoryName = null;
  try
  {
    ItemSubtype subtype = null;
    if (subtypeId > 0)
    {
      subtype = ItemSubtype.getById(dc, subtypeId);
    }
    else if (item instanceof Subtypable)
    {
      subtype = ((Subtypable)item).getItemSubtype();
    }
    else if (item instanceof BioPlate)
    {
      BioPlateType bpt = ((BioPlate)item).getBioPlateType();
      subtype = bpt.getItemSubtype();
      if (subtype == null) selectedCategoryName = bpt.getName();
    }
    if (subtype != null) selectedCategoryName = subtype.getName();
  }
  catch (PermissionDeniedException ex)
  {}
  
  //selectedCategoryName = "Test"; // DEBUG!!
  
  if (standalone)
  {
    sc.getCurrentContext(itemType).setObject("item", item); 
  }

  String title = "Annotate " + 
    HTML.encodeTags((item instanceof Nameable ? ((Nameable)item).getName() : 
      (item == null ? " new item" : item.toString())));

  // Queries to retrieve annotation types and protocol parameters
  ItemQuery<AnnotationType> annotationTypeQuery = null;
  String message = null;
  if (item instanceof AnnotatableProxy)
  {
    AnnotatableProxy proxy = (AnnotatableProxy)item;
    annotationTypeQuery = Base.getAnnotationTypesQuery(proxy);
    message = proxy.getAnnotationMessage();
  }
  else
  {
    annotationTypeQuery = Base.getAnnotationTypesQuery(itemType, false);
  }
  final ItemQuery<AnnotationType> parameterQuery = Base.getProtocolParametersQuery(protocol);

  // Holds all categories that we have found
  final Set<AnnotationTypeCategory> allCategories = 
    new TreeSet<AnnotationTypeCategory>(new NameableComparator(false));
  
  // Load existing annotations
  AnnotationSet as = null;
  Map<AnnotationType, Annotation> primary = new HashMap<AnnotationType, Annotation>();
  List<Annotation> inherited = new ArrayList<Annotation>();
  if (item != null && item.isAnnotated())
  {
    // Load the existing annotations
    as = item.getAnnotationSet();
    ItemQuery<Annotation> aQuery = as.getAnnotations(null);
    aQuery.order(Orders.asc(Hql.property("annotationType.name")));
    List<Annotation> annotations = aQuery.list(dc);
    for (Annotation a : annotations)
    {
      try
      {
        if (a.getSource() == Annotation.Source.PRIMARY)
        {
          primary.put(a.getAnnotationType(), a);
        }
        else
        {
          inherited.add(a);
        }
      }
      catch (PermissionDeniedException ex)
      {}
    }
  }
  
  // Load all annotation types that available from multiple sources:
  // * As defined by the server admin for the current item type
  // * Existing on the current item
  // * Defined as protocol parameters for the current protocol
  Set<AnnotationType> annotationTypes = new TreeSet<AnnotationType>(new NameableComparator(false));
  Set<AnnotationType> protocolParameters = new HashSet<AnnotationType>();
  annotationTypes.addAll(annotationTypeQuery.list(dc));
  annotationTypes.addAll(primary.keySet());
  if (parameterQuery != null) 
  {
    protocolParameters.addAll(parameterQuery.list(dc));
    annotationTypes.addAll(protocolParameters);
  }

  // Build JSON objects for all annotation types, the current values and annotation type categories
  JSONArray jsonAnnotations = new JSONArray();
  for (AnnotationType at : annotationTypes)
  {
    Annotation a = primary.get(at);
    if (at.isRemoved() && a == null) continue;
    JSONObject json = AnnotationUtil.createJsonForAnnotationTypeAndAnnotation(dc, at, a, null, protocolParameters.contains(at), allCategories);
    jsonAnnotations.add(json);
  }
  for (Annotation a : inherited)
  {
    AnnotationType at = a.getAnnotationType();
    JSONObject json = AnnotationUtil.createJsonForAnnotationTypeAndAnnotation(dc, at, a, null, false, allCategories);
    jsonAnnotations.add(json);
  }
  
  // Build JSON for parents submitted via request parameter
  JSONArray jsonParents = new JSONArray();
  if (parents != null)
  {
    for (String p : parents) jsonParents.add(p);
  }
  boolean canInherit = jsonParents.size() > 0;
  if (!canInherit && item != null)
  {
    Set<Annotatable> parentItems = item.getAnnotatableParents();
    canInherit = parentItems != null && parentItems.size() > 0;
  }
  %>
  <base:page type="<%=standalone ? "popup" : "iframe"%>" title="<%=title%>">
  <base:head scripts="~annotate.js,menu.js" styles="parameters.css,toolbar.css,menu.css">
  <style>
  .first-primary:before
  {
    content: '― Primary Annotations ―';
    font-variant: small-caps;
    font-size: 80%;
    font-weight: bold;
    color: #999999;
  }
  
  .first-inherited:before
  {
    content: '― Inherited & Cloned ―';
    font-variant: small-caps;
    font-size: 80%;
    font-weight: bold;
    color: #999999;
  }
  
  
  .parameterlist .param 
  {
    padding-right: 20px;
  }
  .parameterlist .param.selected 
  {
    padding-right: 20px;
  }
  .parameterlist .param:hover 
  {
    padding-right: 18px;
  }
  
  .parameterlist .param input, .parameterlist .check-all
  {
    position: absolute;
    right: 1px;
    margin-top: 1px;
  }
  .parameterlist .check-all
  {
    padding-right: 2px;
  }
  
  #selected-name
  {
    font-weight: bold;
  }
  
  #selected-description
  {
    margin-left: 0px; 
    margin-right: 0px;
    display: none;
  }
  
  #none-selected
  {
    display: none;
    margin-top: 2em;
  }
  
  #selected-container > div
  {
    display: none;
  }
  
  #selected-container.none-selected #none-selected
  {
    display: block;
  }
  #selected-container.none-selected.no-annotations #none-selected
  {
    display: none;
  }
  
  #selected-container.has-selected #info-container
  {
    display: block;
  }
  
  #selected-container.has-description #selected-description
  {
    display: block;
  }

  #selected-container.INHERITED #inherited-container,
  #selected-container.CLONED #inherited-container
  {
    display: block;
    border-left-width: 2px;
    padding: 2px 5px;
    margin: 0.5em 0;
  }

  #selected-container.inherited-missing #inherited-missing
  {
    display: block;
    border-left-width: 2px;
    padding: 2px 5px;
    margin: 0.5em 0;
  }
  #selected-container.inherited-missing #inherited-container
  {
    display: none;
  }
  
  #inherited-item
  {
    font-style: italic;
  }
  
  #inherited-modified, #inherited-clone
  {
    display: none;
  }

  #selected-container.modified #inherited-modified
  {
    display: inline;
  }
  
  #selected-container.INHERITED #inherited-clone
  {
    display: inline;
  }
  
  #selected-container.PRIMARY #input-container,
  #selected-container.CLONED #input-container
  {
    display: block;
  }
  
  #input-container > div
  {
    display: none;
  }
  
  #selected-container.ENUM-SINGLE #ENUM-SINGLE
  {
    display: block;
  }
  #selected-container.ENUM-MULTIPLE #ENUM-MULTIPLE
  {
    display: block;
  }
  #selected-container.ENUM-RADIO-CHECKBOX #ENUM-RADIO-CHECKBOX
  {
    display: block;
  }
  #selected-container.STRING #STRING-container
  {
    display: block;
  }
  #selected-container.TEXT #TEXT-container
  {
    display: block;
  }
  #selected-container.INT #INT-container
  {
    display: block;
  }
  #selected-container.LONG #LONG-container
  {
    display: block;
  }
  #selected-container.FLOAT #FLOAT-container
  {
    display: block;
  }
  #selected-container.DOUBLE #DOUBLE-container
  {
    display: block;
  }
  #selected-container.BOOLEAN #BOOLEAN-container
  {
    display: block;
  }
  #selected-container.DATE #DATE-container
  {
    display: block;
  }
  #selected-container.TIMESTAMP #TIMESTAMP-container
  {
    display: block;
  }
  #selected-container.has-unit .numeric
  {
    float: left;
    margin-right: 0.25em;
  }
  #selected-container.has-unit #unit-container
  {
    display: block;
  }
  #selected-container.multiple #multiple-container
  {
    display: block;
  }
  
  #selected-container.no-annotate-permission #input-container
  {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
    filter: url(filters.svg#grayscale);
  }
  #selected-container.no-annotate-permission #no-annotate-permission
  {
    display: block;
  }
  .not-specified
  {
    font-style: italic;
  }
  </style>
  </base:head>
  <base:body>
    <%
    if (standalone)
    {
      %>
      <h1><%=title%> <base:help helpid="annotations.edit" /></h1>
      <div class="content">
      <%
    }
    %>
    <div id="page-data" class="datacontainer"
      data-item-type="<%=itemType.name() %>"
      data-item-id="<%=itemId %>"
      data-annotations="<%=HTML.encodeTags(jsonAnnotations.toJSONString()) %>"
      data-parents="<%=HTML.encodeTags(jsonParents.toJSONString()) %>"
      data-annotation-type-id="<%=annotationTypeId%>"
      data-annotation-id="<%=annotationId %>"
      data-date-format="<%=htmlDateFormat%>"
      data-datetime-format="<%=htmlDateTimeFormat%>"
      ></div>
    <form name="annotations">
    
    <m:menu
      id="more-actions"
      style="display: none;"> 
      <m:menuitem id="btnSync" title="Sync" icon="cloned-outofsync.png" 
        tooltip="Synchronize the selected annotation"
      />
      <m:menuitem id="btnClone" title="Clone" icon="cloned.png" 
        tooltip="Clone the selected annotations"
      />
      <m:menuitem id="btnUnclone" title="Unclone" icon="inherited.png" 
        tooltip="Revert cloned annotations to inherited"
      />
    </m:menu>
    
    
    <div class="absolutefull">
      <div class="absolutefull bg-filled-100 rightborder" style="width: 18em;">
        <div class="absolutefull" style="height: 2em;">
          <table style="margin: auto; height: 100%;"><tr><td>
          <base:icon image="filter.png" />
          <select name="categories" id="categories" style="width: 15em;">
          <option value="-1">- all -
          <%
          if (protocol != null)
          {
            %>
            <option value="-2">- protocol parameters -
            <%
          }
          %>
          <option value="0">- uncategorized -
          <%
          for (AnnotationTypeCategory category : allCategories)
          {
            boolean selected = category.getName().equals(selectedCategoryName);
            %>
            <option value="<%=category.getId()%>"
              title="<%=HTML.encodeTags(category.getDescription())%>"
              <%=selected ? "selected" : "" %>
            ><%=HTML.encodeTags(category.getName())%>
            <%
          }
          %>
          </select>
          </td></tr></table>
        </div>
        
        <div id="annotation-list" class="absolutefull parameterlist topborder" 
          style="top: 2em; bottom: 3em;">
          <tbl:toolbar subclass="bottomborder" visible="<%=canInherit || annotationTypes.size()>0 || inherited.size()>0 %>">
            <tbl:button id="btnAdd" title="Inherit&hellip;" image="add.png" 
              tooltip="Inherit more annotations..."
              disabled="<%=!canInherit%>"
            />
            <tbl:button id="btnDelete" title="Delete" image="remove.png" 
              tooltip="Delete annotations"
            />
            <tbl:button id="btnMore" 
              subclass="auto-init"
              data-auto-init="menu-anchor"
              data-menu-id="more-actions"
              title="<img src=\"../../images/mini_scroll_down.png\">" image="menu.png" 
              tooltip="More actions..."
              />
          </tbl:toolbar>
            <%
            if (annotationTypes.size() == 0 && inherited.size() == 0)
            {
              %>
              <div class="messagecontainer error">
                There are no annotation types defined for this kind of item.
              </div>
              <%
            }
            %>
          <div id="primary-list">
            <div class="first-primary">
              <base:icon id="check-all-primary" image="check_uncheck.png" subclass="check-all" 
                tooltip="Toggle all (use CTRL, ALT or SHIFT to check/uncheck)"
              />
            </div>
          </div>
          <div id="inherited-list">
            <div class="first-inherited">
              <base:icon id="check-all-inherited" image="check_uncheck.png" subclass="check-all" 
                tooltip="Toggle all (use CTRL, ALT or SHIFT to check/uncheck)"
              />
            </div>
          </div>
        </div>
        
        <div class="absolutefull topborder" style="top: auto; bottom: 0em; height: 3em;">
          <table style="height: 100%; margin:auto;"><tr><td>
          <base:icon image="hasvalues.png" /> = has value(s)<br>
          <base:icon image="parameter.png" /> = protocol parameter
          </td></tr></table>
        </div>
      </div>
      
      <div class="absolutefull input100" style="left: 18em; padding: 8px;">
        <%
        if (message != null)
        {
          %>
          <div class="messagecontainer help" style="margin-top: 0.2em;"><%=message%></div>
          <%
        }
        %>
        <div id="selected-container">
          <div id="none-selected" class="messagecontainer note">
            <base:icon image="goback.png" /> Select an annotation.
          </div>

          <div id="no-annotate-permission" class="messagecontainer error">
            You do not have permission to change this annotation.
          </div>

          <div id="info-container">
            <span id="selected-name">Name</span>
            (<span id="selected-type">type</span>)
          </div>
          
          <div id="inherited-container" class="bg-filled-100">
            <span id="inherited-item"></span><br>
            <span id="inherited-values"></span>
            <span id="inherited-modified">(modified; <span id="sync-modified" class="link" title="Synchronize the annotation values with the parent item">sync</span>)</span>
            <span id="inherited-clone">(<span id="convert-to-cloned" class="link" title="Clone the annotation values from the parent">clone</span>)</span>
          </div>
                    
          <div id="inherited-missing" class="bg-filled-100">
            Cloned from an unknown item.
          </div>
        
          <div id="input-container">
            <div id="multiple-container">
              
              <select name="multi-values" id="multi-values" size="5" style="width: calc(100% - 8px);">
              </select>
              <table>
              <tr>
                <td><base:button id="btnMultiAdd" title="Add" tooltip="Add a new value" /></td>
                <td><base:button id="btnMultiRemove" title="Remove" tooltip="Remove the selected values"/></td>
              </tr>
              </table>
            </div>
          
            <div id="ENUM-SINGLE">
              <select name="ENUM-SINGLE-input" id="ENUM-SINGLE-input" 
                style="min-width: 15em;">
              </select>
            </div>
              
            <div id="ENUM-MULTIPLE">
              <select name="ENUM-MULTIPLE-input" id="ENUM-MULTIPLE-input" 
                multiple size="10" style="min-width: 15em;">
              </select>
            </div>
              
            <div id="ENUM-RADIO-CHECKBOX">
              radios/checkboxes
            </div>
        
            <div id="STRING-container">
              <input name="STRING-input" id="STRING-input" 
                type="text" class="text"
                maxlength="255" value="">
            </div>
            
            <div id="TEXT-container">
              <table style="width: 100%;">
              <tr>
                <td>
                <textarea name="TEXT-input" id="TEXT-input" 
                  class="text" rows="5"></textarea>
                </td>
                <td style="width: 20px;">
                  <base:icon
                    id="TEXT-zoom"
                    image="zoom.png"
                    tooltip="Edit in larger window" 
                  />
                </td>
              </tr>
              </table>
            </div>
            
            <div id="INT-container" class="numeric">
              <input 
                name="INT-input" id="INT-input"
                class="text" type="text" 
                value="" style="width: 12em;" maxlength="20">
            </div>

            <div id="LONG-container" class="numeric">
              <input 
                name="LONG-input" id="LONG-input"
                class="text" type="text" 
                value="" style="width: 12em;" maxlength="20">
            </div>
            
            <div id="FLOAT-container" class="numeric">
              <input 
                name="FLOAT-input" id="FLOAT-input"
                class="text" type="text"
                value="" style="width: 12em;" maxlength="20">
            </div>

            <div id="DOUBLE-container" class="numeric">
              <input 
                name="DOUBLE-input" id="DOUBLE-input"
                class="text" type="text" 
                value="" style="width: 12em;" maxlength="20">
            </div>
          
            <div id="unit-container">
              <select name="unit" id="unit" style="min-width: 5em;"></select>
            </div>
            
            <div id="DATE-container">
              <table>
              <tr>
              <td>
                <input 
                  name="DATE-input" id="DATE-input"
                  class="text" type="text" 
                  value="" style="width: 15em;" maxlength="20" 
                  title="Enter date in format: <%=htmlDateFormat%>">
              </td>
              <td>
                <base:button 
                  id="DATE-calendar"
                  image="calendar.png"
                  title="Calendar&hellip;" 
                  tooltip="Select a date from a calendar"
                />
              </td>
              </tr>
              </table>
            </div>
            
            <div id="TIMESTAMP-container">
              <table>
              <tr>
              <td>
                <input 
                  name="TIMESTAMP-input" id="TIMESTAMP-input"
                  class="text" type="text" 
                  value="" style="width: 15em;" maxlength="20" 
                  title="Enter date + time in format: <%=htmlDateTimeFormat%>">
              </td>
              <td>
                <base:button 
                  id="TIMESTAMP-calendar"
                  image="calendar.png"
                  title="Calendar&hellip;" 
                  tooltip="Select date and time from a calendar"
                />
              </td>
              </tr>
              </table>
            </div>
          
            <div id="BOOLEAN-container">
              <label class="not-specified"><input type="radio" name="BOOLEAN-input" id="BOOLEAN-input-NULL" 
                value="" checked>- not specified -</label><br>
              <label><input type="radio" name="BOOLEAN-input" id="BOOLEAN-input-TRUE" 
                value="true">true</label><br>
              <label><input type="radio" name="BOOLEAN-input" id="BOOLEAN-input-FALSE"
                value="false">false</label>
            </div>
            
            
          </div>
          
          <div id="selected-description" class="messagecontainer help">
          </div>
        </div>
  
      </div>
    </div>
    </form>
    <%
    if (standalone)
    {
      %>
      </div>
      <base:buttongroup subclass="dialogbuttons topborder">
        <base:button id="btnSave" title="Save" visible="<%=annotatePermission%>" />
        <base:button id="close" title="Cancel"  visible="<%=annotatePermission%>" />
        <base:button id="close" title="Close" visible="<%=!annotatePermission%>" />
      </base:buttongroup>
      <form name="modified" method="post" action="index.jsp?ID=<%=ID%>">
        <input type="hidden" name="cmd" value="SaveAnnotations">
        <input type="hidden" name="item_type" value="<%=itemType.name()%>">
        <input type="hidden" name="item_id" value="<%=itemId%>">
      </form>
      <%
    }
    %>
  </base:body>
  </base:page>
  <%
}
finally
{
  if (dc != null) dc.close();
}
%>