Time UI control to select a specific time instant etc

[meh9]

For a few projects we have a need for a UI control for timeseries data that allows the user to select a specific time instant from the ones being made available by the dataset.

For example, in GEOGLAM we have time series data that spans 17 years with up to 4 time instants per month (776 instants in total), in AREMI we have the Solar Satellite data (http://gis.aremi.nationalmap.gov.au/bom/wms) with hourly coverage of 1 year (8760 time instants). It becomes difficult to impossible to select a specific time instant using the time slider at the bottom in these cases, so we need a better way to control it.

My naive idea of what we need is a drop down in the workbench, by the layer legend, that has the time instants listed in them. The user can use the dropdown to select an instant and the time slider then jumps to that time and the layer is updated on the screen.

However, 8760 items in a dropdown is perhaps not the best user experience, either for usability or performance, so maybe we can come up with something better?

Note that this will most likely feed into the TerriaCube project, where we need to be able to select 2 time instants so that we can compare the data between them.

[RacingTadpole]

I've had a dream of optionally showing only discrete times on the timeline, eg. when only yearly or monthly data is available - see https://github.com/TerriaJS/terriajs/issues/1955 (see the example link there too).

Perhaps solving that issue could help solve this one: once you zoom into the timeline far enough that there are less than X discrete times to show (which might be no zooming at all), the timeline switches to the discrete version.

For that to be a real solution, would probably need to make the timeline zooming feature more obvious as well.

[RacingTadpole]

Actually looking at how the zooming into the timeline works, I think the biggest problem is this: the labels on the timeline don't become any more fine-grained than days as you zoom in. If they did, you'd have much less trouble realising you are now looking at hours, or minutes, or even seconds, and picking exactly which time point you want. Eg. the timeline starts at: and zooming in can get you to this impossible-to-decipher situation:

Note if the original scale of the csv file is only hours, it displays sensibly: zooming to although the problem re-emerges at the level of seconds:

[meh9]

Thanks @RacingTadpole, I think your change is good and makes the time slider better in general, but I'm not sure that it improves things for this particular feature request.

Hangon, let me mock up what I think we need.

[meh9]

Ok, my mockup!

What I'm imagining is that when we detect a timeseries layer (or perhaps when we set a param in the init file) we show a date picker, that has the days where there is data highlighted. In addition to that we then have a time dropdown that has the possibly multiple times where there is data on the selected day. Both are updated when clicking on the timeline, and the timeline is updated when these new controls are used.

@philipgrimmett thoughts?

This would then be made into some form of component, because the next step that is required for future features is that we need to be able to select 2 individual timestamps, and then either

1. switch between the preloaded imagery of the two times to see changes in ground cover
2. request all imagery between the two times from the server

[kring]

If we were really cool, we'd allow comparison using a splitter, like this; http://cesiumjs.org/Cesium/Apps/Sandcastle/gallery/Imagery%20Layers%20Split.html

[tobybellwood]

The date period selector in Google analytics is IMHO pretty good - from/to pick and type, as well as pre-canned periods...

[meh9]

@kring that splitter is actually exactly what the user has asked for...

[meh9]

@tobybellwood yes, I think the Google Analytics date range picker is pretty good, but it's also pretty complicated for beginners, don't you think?

[RacingTadpole]

My gut reaction is that we already have the time slider for picking dates and times, and if it's not working for people, ideally we'd think first about understanding why, and whether we can improve it. Eg:

• If the problem is finding datetimes when data is available, then we could make the slider show discrete bars for the available times (eg. here) - although working out when to show this vs a continuous slider may be tricky.
• If the problem is choosing two (or more?) different dates to show at once, they could still be chosen off the slider, with some new UI around it (and maybe Cesium's splitter to show them on the map).
• If the problem is that people don't realise they can zoom into the timeslider, we should make this more obvious.

I'd prefer to be sure that these types of solutions don't help before introducing a second datetime picker.

[tobybellwood]

hehe - I'm just some random guy throwing in ideas from the outside - what do I know :-)

[meh9]

• Yes, I think people don't know that you can zoom into the timeslider - I didn't until a month or so ago.

• It's definitely a problem to find the days/times that a layer has data for. We have layers with a lot of time instances (solar satellite for one year with 8760 hourly timestamps, rainfall data over 35 years with 1296 timestamps, etc), so using the timeslider to zoom in to find a specific timestamp from the initial 35 year timeslider down to somewhere that you can see 10 day intervals, then back out, and so on, is a lot of effort. In most of our cases the users know what dates they are interested in, so picking it from a date picker is likely to be more efficient.

Yes, the Cesium splitter is definitely something we should think about - this is exactly the solution that has been proposed, but I want to make sure that we do what works best for what the users want to do.

I would be very happy for the timeslider to be improved to the point that it would support doing this kind of work, but it feels like it would take significant effort and redesign to make that happen (I think it would need significantly more screen realestate in order to support having several different kinds of markers with labels(?) on it, indicators for where data exists, ...). To me, a date picker (which TerriaJS already has) is another way of doing the same thing, keep the screen realestate in the workbench side of the screen, supports selecting discrete timestamps, hopefully visual indication of data availability, etc.

[tobybellwood]

Is it possible to preselect defined initial date/time ranges at a catalog level - i.e. have a catalog item for "last week", "this year" etc - if not, then this could be a convenient workaround?

[axman6]

You can zoom into the time slider? Had no idea!

[philipgrimmett]

@meh9 I think I agree with Arthur re. keeping the focus on the timeline, not the workbench item. The relationship between the two components isn't particularly clear, given that they're separated spatially (also workbench items can disappear beneath the fold). I've done a quick sketch of how a date picker might work in the timeline. Maybe once a date has been selected available times could also be highlighted on the timeline?

[meh9]

@philipgrimmett ok, but how will we select two different times at the same time? The final goal will be to be able to select two different times and then compare the imagery between them, possibly using a slider as @kring commented.

A future but related use case is also to select 2 times and then requesting the composite from the server of all the time instances between the two dates.

Maybe have a chat with @kring, he had some ideas.

[RacingTadpole]

@philipgrimmett yes, @kring suggested that in the catalog item's init settings, you can set a flag which turns off the timeline, and replaces it with a date picker on the left. That's consistent with how some WMS items already display dropdown menus of possible values for dimensions there. And consistent with not having both a timeslider and a date picker at once.

[philipgrimmett]

@meh9 I've sketched out a few screens for the workbench UI: https://invis.io/WGCO4COV6#/244651416_datePicker-Concept-1

I'm also working on a terria-wide comparison tool concept with @kring, but I just wanted to run this one by you first (it's a little more contained)

[meh9]

@philipgrimmett I like that!

I think my only comment is to maybe start with just a single date picker to select time for the layer, and then instead of the second box saying Select Time... it can say Compare With..., and once that has a date we add in the Temporal comparison.

This perhaps also lends itself to being able to do different things with two dates - the second use case I mentioned is to show a composite of all data between two dates. So when you pick the second date maybe have controls on the date picker, or a second follow on modal, asking what "function" to use for the two timestamps: Compare, Composite aggregation, ...

Awesome mockup though! :D

[meh9]

@philipgrimmett also, that's fantastic imagery you found, it shows differences in land use! I am totally showing this on the PfoD day next week! \o/

[RacingTadpole]

Something to consider - if there's other data also on show, do we assume it goes on the left side? Is there ever a case where you want to slide between two different combinations of datasets?

An idea Kevin and I came up with to solve that: allow datasets to be duplicated on the workbench, and you only pick a single time on each one. Then there's a way to specify whether a given dataset appears on the left or the right of the splitter. (And a way to turn the splitter on/off.)

[meh9]

@RacingTadpole oooh that's a really good idea, it means we can compare "any" data (how will the divider technically work with non-raster data like points or polygons?) like the Cesium example @kring posted above, so we could do a "reveal" by pulling back a layer that obscures other data, etc. That's really cool!

[RacingTadpole]

Yay - I like it too :-) It would mean you could compare data with any two different settings, not just dates, too. I don't know how the splitter works yet, but I hope it works with any entities on the map, not just raster images...

[meh9]

In my mind, we have a divider which splits the view into a "left" pane and a "right" pane. The divider can be moved left and right to expose more or less of each of the two panes.

Perhaps the divider should always be present, and the "top" layer is the one shown in the divider pane. If the divider handle that is used to drag it left and right defaults to the right side of the screen it means that the most recently added/top layer is fully shown on top of all other layers. You can then at any time grab the handle on the right side and drag it to the left in order to reveal the other layers in the rest of the stack.

There may have to be some arbitrary rule that if a layer is added twice, in order to get two different time instances of that layer showing, then the imagery for the two instances of that layer do not blend when one of them is in the left pane - this is so that transparent pixels from one time instance doesn't allow pixels from the other time to show through.

@RacingTadpole @philipgrimmett @kring thoughts?

[philipgrimmett]

Invision concept for workbench duplication with split screen comparison: https://invis.io/CJCPOICNK#/245120993_datePicker-Concept-1

Screen capture here: https://www.dropbox.com/s/4rt1lb41i37x7aa/terria-compare-v2.mp4?dl=0

Happy to walk through, discuss ect. @meh9 @kring @RacingTadpole

[meh9]

@philipgrimmett I like it, good work!

But things get complicated quickly doesn't it.

[meh9]

@philipgrimmett It might be useful to have step-arrows next to the time field display to step forward or back through the time instances?

(Note that my mockup below is missing the obvious extra space between the inner arrows and the split screen handle.)

The use case is that if you are viewing the raw satellite images then you will often see cloud, and may have to tweak an image forward or back in the timeseries to get one that is cloud free.

[philipgrimmett]

@meh9 Good idea - just updated the invision prototype

[kring]

I think it might be wise to keep the controls away from the splitter. The whole point of the splitter is to let users compare layers by moving it and watching what happens at the transition point. Having stuff occluding the transition point is going to be really annoying. :)

[philipgrimmett]

@kring potentially annoying, but it's always possible to offset the occluded area by dragging the map (not ideal). One alternative is to fade out the dates while the slider is in motion (2 second delay?). We could also allow the center slide button/control to be dragged vertically within a set range? Would that be easy to prototype?

[meh9]

@kring yeah, I see what you mean. However, on the old mockup it actually took me a while before I noticed the two date indicators at the top of the screen, and it felt like a good change to me to have them with the slider because it made it very clear what was happening and what the intention of the slider was.

Having the arrows somewhere else (like where we actually select the date) may be better.

The more complicated we make it the more I'm thinking we should go back to the simple implementation. :(

[kring]

Yeah, those things would help. A couple things to think about:

1. Is attaching the times to the splitter draggy thing better than just putting them at the bottoms of their respective splitter panes? (Mats just partially answered this above)
2. What if I I'm not comparing two dates, but two non-time-dynamic layers? Or two different elevations of the same layer? Or two stacks of layers?

[philipgrimmett]

@kring (cc: @meh9) Re. your second point: dealing with non-time-dynamic layers shouldn't be too much of an issue. Again, you would want to fade out the labels while the slider is in motion, then fade them back in with a brief delay. Given that multiple datasets will be assigned left/right, I'd agree that they should be anchored to the bottom of the screen. Extra: you could switch layers between left/right frame by dragging the white label? Concept screen (note that I've added a 'duplicate' action to the workbench items):

[RacingTadpole]

This issue has now got three different things going on: • My original PR to improve zooming in the timeline (complete) • "Time UI control to select a specific time instant" (the title) • A splitter to show two time instants at once (the bulk of the recent discussion). To stay sane, I'm going to going to close this and open two new issues for the last two.