[Time Conductor] Time of Interest implementation

[charlesh88]

Issue to cover implementing the first version of the Time of Interest element (TOI) in the Time Conductor and views.

• Extends work done in [Time Conductor] Initial realtime/historical reconciliation #933.
• UI is here, starting on page 53.

Master task list

• TOI will visually manifest in plots and historic tables.
• TOI in real-time will allow manipulation of the offset position of "now". See UI, page 58.
• Date-sorted tables will scroll to bring the TOI into view at the time it is set.
• Tables not sorted by date will not display the TOI or support TOI scrolling.
• Panning the TC such that the TOI goes "out of view" to either side of the TC bounds will reset and disable the TOI, taking it "out of play". Views will all update accordingly.
• Changing the TC bounds via datetime inputs will reset the TOI and take it out of play.
• Views should support proportional placement of the TOI. For example, setting the TOI near the right edge of the TC (say about 10% of the total width of the TC time area) would also place the TOI in synced plots at the same proportion in the available view: near the right edge. Plots should not pan or zoom due to a TOI manipulation.
• Date-sorted tables would scroll in such a way as to approximate this as well.
• Setting the TOI does not cause unsynced elements to re-sync with the TC.
  • If the TOI would be in view with the unsynced element, then it should be displayed.
  • Re-syncing the element would cause the TOI to appear as expected in that element.
• Allow user to drag (or right-click at a position) to set the TOI element in views, such as plots and tables.
• Position TOI in new plots
• Pan TOI into view in plots
• Alt-click to set TOI in new plots
• Fix positioning issues in time conductor when using % left
• Fix label-to-left issues (may defer)
• Default sort order in tables
• Document code
• Fix code style issues
• Problems in tables with bounds changes. Does not display current TOI when TC is panned, zoomed, etc.
• Tests

Future

• Make TOI draggable. See [Time Conductor] Time of Interest implementation #1193 (comment)

Older notes

Notes from discussion with Andrew, 9/15/16

Initial version

• TOI element is only draggable in the Time Conductor (TC). Dragging/setting in individual views will be supported in a future version. TOI is placed via alt+click
• TOI will visually manifest in plots and historic tables.
• TOI in real-time will allow manipulation of the offset position of "now". See UI, page 58.
• Date-sorted tables will scroll to bring the TOI into view at the time it is set.
• Tables not sorted by date will not display the TOI or support TOI scrolling.
• Panning the TC such that the TOI goes "out of view" to either side of the TC bounds will reset and disable the TOI, taking it "out of play". Views will all update accordingly.
• Changing the TC bounds via datetime inputs will reset the TOI and take it out of play.
• Views should support proportional placement of the TOI. For example, setting the TOI near the right edge of the TC (say about 10% of the total width of the TC time area) would also place the TOI in synced plots at the same proportion in the available view: near the right edge. Plots should not pan or zoom due to a TOI manipulation.
• Date-sorted tables would scroll in such a way as to approximate this as well.
• Setting the TOI does not cause unsynced elements to re-sync with the TC.
  • If the TOI would be in view with the unsynced element, then it should be displayed.
  • Re-syncing the element would cause the TOI to appear as expected in that element.
• Dragging the TOI to the far right of the TC should result in a "snap to" action that takes the TOI out of play. This is achieved by dismissing the TOI via a button revealed on hover.

Future functionality

• Allow user to drag (or right-click at a position) to set the TOI element in views, such as plots and tables.
• Need to work out a lot of nuance, particularly around
  • Panning/marquee-zooming the TOI out of view.
  • Setting the TOI in an unsynced element - everything else re-syncs and the bounds of the TC are updated; may need a "Are you sure?" dialog on that action.

[charlesh88]

From discussion yesterday 9/15/16 Charles, Pete and Andrew:

• Much more utility with TOI setting in plots and tables directly, rather than via the TC. So let's go after that in the first implementation.
• Rather than docking the TOI line when not enabled, hovering in the plot area will display the time at the cursor position. Clicking will establish a TOI line at that position. A set TOI can be removed by clicking a close button. See more details and drawings in Plot v2 sketches.pdf.

[charlesh88]

@akhenry Just pushed some significant work on the TOI element in plots. Very much WIP at this point, I wouldn't integrate yet - there's a static TOI element sitting in the template right now. Markup in plot.html has some not insignificant mods, but nothing that messes us up if we need to turn off the TOI element. I'll pick this up Monday morning first thing.

[charlesh88]

From discussion with @akhenry 9/20/16:

• TOI in TC should behave same as design in plots:
  • As user moves cursor in visualization bar, TOI element follows cursor and displays datetime at the cursor position.
  • Single-click pins the TOI in position in the TC; user able to continue mousing around the data viz area as noted in the previous bullet.
  • Mousing over the pinned TOI element displays a "X" close control. Ideally, the pinned TOI also supports a contextual "Remove" menu ability.

Todo:

• Add TOI element to table view.
• Add hover and close-state TOI element to TC.
• Once Pete's plots are integrated into Open, apply markup/CSS changes in progress to those.

[charlesh88]

@akhenry I've pushed my finished work (for now) on the TOI element to open1193. It's been implemented in current plots, mct-table and the TC. Some usage notes:

General

• In TC and plots, I've added two instances of the TOI element: one meant as the hover element and one as the pinned version.
• The hover element shows when the user hovers in the object view, and the pinned version shows as well when it has been pinned and is "active".
• When the TOI is "pinned", add ng-class "active" to the pinned element. I've stubbed that in with 'active': false.
• When a TOI is pinned and active, it dims down while the user is actively hovering. When the user hovers over the pinned active TOI, the hover TOI is hidden, and the pinned TOI is undimmed and displays a close "x" button. Clicking that should remove ".active" from the pinned TOI.

Plots and Time Conductor

• The hover TOI should follow the cursor exactly as the user moves around. In plots, this active area is both the plot display area and the X axis ticks. In the TC, it's the data visualization bar.
  • I've actually suppressed the cursor when the user hovers in the visualization area of the TC, as the TOI element will act as the cursor there.
• It's understood that we'll migrate the markup and CSS when we integrate Pete's plots into open.

Tables

• Tables use a different approach: there is no markup for the TOI. Instead, I handle everything via hover events on table rows. The clock and close "x" icon elements are created via CSS pseudo class :before statements.
• The idea (for now) is that you'll click a row to pin the TOI; when that happens the row gets l-toi active pinned added to it. I've stubbed in ng-class stuff for this in mct-table.
• The idea is that the user will click a pinned row to unpin it.
• Hover behavior is the same as in plots and the TC.
• We still need to modify the table hover behavior so that the TOI is not active unless the user has sorted by date. One thought about how to do that is to put a class in the table element itself when the user is sorting by date; I can use CSS to suppress the TOI display behavior and you can enable/disable any ng-clicks as well.
• We may of course need to adjust this once you have a look.

[charlesh88]

From design review 9/26/16, Charles, Pete, Victor, Mark:

• Hover value:
  • Don’t show vertical line.
  • Just show value and datestamp for single point hover, even in combo stacked/overlay plot situation. Do this like a tooltip, but without a delay.
  • Highlight legend item when hovering on point, or, allow sub-object selection of a point and highlight in legend on that action. Explore this with dev.
• More involved click gesture to set TOI, something like ctrl-click. Allow user to remove TOI as current.
• Want TOI to be draggable, sync update with all other elements in view. This is very important, but can be post-V1 functionality.
• Want ability to sync temporal extents from one object to others (including TC) but that should be a separate gesture from setting the TOI.
• When setting the TOI, do want other components to maintain their previous temporal extents, but pan to bring the TOI into view.
  • Plot A is zoomed to 1 hour, and panned back a day relative to plot B and TC, which are zoomed to 4 hours.
  • Set TOI in plot A: result is plot B and TC both requery, but maintain their 4 hour duration. Plot A doesn’t change.
  • Set TOI in plot B: result is plot A requeries; plot B and TC don’t change (except to display the TOI element).
• Values in legend are Ok, but don’t do hover values there. Instead, TOI should drive the values displayed in the legend, or if not set, “now” or latest data in temporal extents (current functionality).

@akhenry Let's discuss today when you're in.

[charlesh88]

WIP pushed to open1193. @akhenry You're good to pull: main elements are present in markup, but CSS still needs a bunch of cosmetic fixing; I'll continue in open1193 (unless you prefer otherwise) and we'll integrate that later.

[charlesh88]

@akhenry Have pushed final changes to TOI element. Now works properly in TC, tables, and old plots. Also fixed cursor: grab in Time Conductor. Check it out and let me know what you think.

[larkin]

At end of Robinson/beginning of Roddenberry we will review this and decompose any remaining tasks into follow-up issues.