Positioning the Annotations pane so as much annotations about the selected data field are visible as possible
RS-518
RS-854

Problem

Dominic made a movie to illustrate the problem:

Currently the icon works as follows;

1. If the icon is clicked and there are no annotations then it launches an annotation dialogue box
   This situation should not occur. You should click the add annotation button to create an annotation.
2. If annotation already exisit then it displays the annotations.
3. If you click the button next to an item that has an annotation then the screen jumps to the top of the page where the annotation page is displayed. You then cannot see the data field if it is further down the screen. In other words the annotation pane is diviorced from the data fields.
4. If you do the same thing but there are no annotations then the dialogue appears on the same screen but then jumps to the top once the annotation is saved.
   This should not happen (also note 1 above)

Desired Behavior

Dominic: the functionality that associates a data field with its annotations was part of the discussions around these pages in confluence.

• UI Redesign (Sofia)#Data annotation with notes. Vlado: I don't see it there
• UI redesign of Nuxeo#Dominics annotations of the UI. Vlado: I see note "if to click on an annotation that the related field in the record will come into focus" and "Page scrolls to the record or annotations"
  The annotations should roll with the selected field otherwise you will not be able to see the annotations associated with the field you selected and when you scroll up you can’t see the field you selected. This is fairly fundamental to the data annotation tool.

On Select Data Field

The annotation pane should be displayed juxtaposed with the selected data field.

The annotation pane should appear at the top of the screen but below the menus if they are on screen.
When a data field is selected further down the screen window so that the menus disappear, selecting a data field should make the annotation pane appear at the top of the screen so that the data field and the associated annotations are on the same screen - as below.

If the selected field has no annotations then if the user selects "add annotation" then the dialogue box appears on the same screen and when saved the annotation pane appears at the top of the screen not at the top of the window (under the menus) which are not visible.

Scrolling Up

When the screen is scrolled upwards the annotations pane should scroll to the top of the screen and then stick and stay at the top of the screen even if the data field selected disappears from sight.

Joiner

The UI design has a visible link between the field and the annotation pane.
This displays when the data field and the associated annotations are on the same screen but disappears when the data field is gone from view.

Go To Data Field

Suggestion: The annotation pane has an arrow which points downwards when the data field is further down the window. Or has a button saying "go to data field". See http://www.jqueryrain.com/2012/04/best-jquery-scroll-to-top-tutorial-plugin-with-example-demo/
This means that the user can get back quickly to the selected data field.

Scrolling Down

When scrolling down the user will need to see the bottom of the annotation pane so that all the annotations can be viewed even when the annotation pane is larger than the window. When the user reaches the bottom of the annotation pane there are two options.

• Option 1 – The annotation pane is not sticky and the user must scroll back up themselves. A visual indicator is connected between the annotation pane and the data field to indicate that the user is back to the original position.
• Option 2- The downward scroll works the same as upwards except that the user scrolls downward until s/he reachers the botton of the annotation pane at which point the annotation is sticky and the bottom of the pane always sits at the bottom of the screen. When the user scrolls up the annotation pane scrolls up until the top of the annotation pane is at the top of the screen at which point it becomes sticky.

Summary

1. Annotation pane sticky at top for scrolling up and at bottom for scrolling down.
2. Normal scroll until the top or bottom are reached.
3. Indicator which allows the user to get to selected data field quickly (up and down indicators).
4. Connection between data field and annotation pane when both on screen.

Considerations

Svetoslav: the selected field gets a CSS class data-wrap that causes the gray background around it

Vlado: The problem is clear, but the solution is not simple, because:

1. The Data pane could be shorter than the Annotations pane (eg BM data is often short, but comments could be numerous)
2. The data field is selected on click only, but:
3. User can navigate to another data section (Production, Research, Exhibitions, etc)
4. User can collapse a data subsection, which can hide the data field inside that collapsed subsection
5. User can scroll the browser window

Sticky Annotation Pane

Typically the Annotation Pane is shorter than the Data Pane (but not always).
If the Annotation Pane scrolls normally with the window, this can easily cause lots of blank space below or above it.
In order to maximize the displayed annotations, the pane's top or bottom should stick to the top or bottom of the window.

Dominic did a JS mockup here: http://jsfiddle.net/dKDJz/4/

• You can experiment by editing directly on page
• May bear out you contention of a sticky annotation top and bottom as along as the graduation from top and bottom is nicely controlled.
• I have added extra items etc to see it when it runs off the page.

Vlado: nice job!
I did some testing based on 3 factors:

• is the Data (left) pane taller/smaller than Annotation (right) pane?
• is the Window taller/smaller than Annotation pane?
• are we scrolling up or down?

Here are the results (NOKn means "Not OK"):

• case1: taller, taller, down:
  • NOK1: top of pane can get hidden
    
    Some better calculation is needed to maximize use at top (while preserving header).
    For RS, better to get the dimension dynamically instead of hard-coding it!
  • NOK2: bottom of pane overlaps footer
    
    Calculation is needed to preserve the footer
  • NOK3: There's a position where pane jumps from top to bottom. In this situation the pane could stick to top all the time, which I think is better
• case2: taller, taller, up
  • The behavior is the same as for case1
• case3: taller, smaller, down
  • NOK4: There is a position where there is whitespace below the frame, yet top of the frame is not visible
    
  • Also NOK2
• case4: taller, smaller, up
  • NOK5: There is a position towards the top where the pane jumps from "sticky top" to NOK4

These tests require a small edit to remove Posts from the HTML (TODO Anna?)

• case5: smaller, taller, down
• case6: smaller, taller, up
• case7: smaller, smaller, down
• case8: smaller, smaller, up

Requirements

Below are the requirements agreed to date. As discussion progresses, we can add more.

Position Annotation Pane on Select Data Field

When a data field is selected, that field is obviously on screen.
To show as many Annotations as possible, position the Annotations pane at:

• the top of the browser window, or
• the top of the Annotations column
• whichever is GREATER (i.e. the Annotation pane cannot go above the Annotation column)

(Note: the "joiner" is currently missing)

Forbid Collapse of Selected Data Field

• When a data field is selected, disable the Collapse button (down-arrow) of all subsections where the field belongs.
  There can be 0 (the field is not in a subsection), 1 (top-level subsection) or 2 (nested subsection).
• When a different field is selected, enable the Collapse buttons of the old field
• On load, all Collapse buttons are active

Developer: first describe here how you'd do this, and provide estimate