Timline_range_interaction by baloola · Pull Request #3325 · geosolutions-it/MapStore2

baloola · 2018-11-09T13:30:21Z

Description

This PR handles the following:

'proposed' initial range value and playback range that is retrieved from the data range itself ( does not work with all the scenarios (e.g. if the domain is a list of value or a single value )
align the range borders with currentTime and offsetTime, once one of them change, the correspondet side is changed as well.
click and drag on the range will move the whole range.
currentTime and offsetTime are included within the dimension state

Issues

Fix Range - Dragging #3281 - Range dragging
Fix Timeline - UI - Auto move timeline if snap is out of view range #3288 - Follow mode (@offtherailz)
Fix Animation - User defined step #3277 - User defined animation steps (@offtherailz)
Connected to Playback tool - UI - Other animation options and setup #3278 (@offtherailz)
Connected to TimeLine - Initial Time Range value #3252 - timer interval of the animation and other animation options depending on the mode

Please check if the PR fulfills these requirements

The commit message follows our guidelines: https://github.com/geosolutions-it/MapStore2/blob/master/CONTRIBUTING.md
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x", remove the others)

Bugfix
Feature

What is the current behavior? (You can also link to an open issue here)
see the issues

What is the new behavior?
see the description

Does this PR introduce a breaking change? (check one with "x", remove the other)

Yes
No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:
The PR uses a forked version of react-timeline-vis at @baloola repo (temporary)

offtherailz

Please apply the changes discussed:

Setup initial value of currentTime and offsetTime in an epic, one or both of them are missing when you select the range option, using arbitrary values. Display this initial values in the viewport is a good choice.
Question: it is an absolute time or a relative time? In the first case, I should use a name like currentTimeEnd, that is more cleaner
Timeline should not fail if the range is not defined, but wait until the 2 variables are defined to show the range.
Fix the bug sliding the timeline
Include VisJSTimelineWrapper in compoents

offtherailz · 2018-11-09T15:01:43Z

package.json

    "react-textfit": "1.1.0",
    "react-twitter-widgets": "1.3.0",
-    "react-visjs-timeline": "1.5.0",
+    "react-visjs-timeline": "baloola/react-visjs-timeline#master",


me and @giohappy say we should instead put the lib inside mapstore, it is only 190 lines of code, we can maintain this wrapper ;)

offtherailz · 2018-11-09T16:53:30Z

web/client/plugins/Timeline.jsx

+const { offsetEnabledSelector, selectedLayerSelector, timeLineCustomRange } = require('../selectors/timeline');
 const { withState, compose, branch, renderNothing } = require('recompose');
-const { selectTime, enableOffset, selectOffset } = require('../actions/timeline');
+const { selectTime, enableOffset, selectOffset, setCusomizedRange } = require('../actions/timeline');


Get directly range using dimension selector. If you need default values and they are not initialized, set them up with arbitrary values. If the values are in the viewport, the user can see them and so it's easier to change them.

So remove any occurence of timeLineCustomRange and replace it with currentTimeRange (vs currentTime) or some name that is easier to understand.

offtherailz · 2018-11-09T16:56:16Z

web/client/plugins/timeline/Timeline.jsx

+            timeLineCustomRange,
+            (current, range) => ({
+                        currentTime: current || range && range.startTimeLineRange || new Date().toISOString(),
+                        customizedRange: range


Here you have to use the currentTimeRange

offtherailz · 2018-11-09T16:58:10Z

web/client/selectors/dimension.js

+
+const layerDimensionRangeSelector = (state, layerId) => {
+    const timeRange = layerDimensionDataSelectorCreator(layerId, "time")(state);
+    const dataRange = timeRange && timeRange.domain && timeRange.domain.split('--');


This should work also witd domain value with list of values. Anyway, after your changes, you may not need it anymore

offtherailz · 2018-11-09T17:00:16Z

web/client/themes/default/less/timeline.less

    }

    .vis-item.vis-background.ms-current-range {
+        z-index: 60;


Maybe this is the reason of the bug for the scroll that don't work anymore.

offtherailz · 2018-11-09T17:00:40Z

web/client/selectors/timeline.js


+const mouseEventSelector = state => get(state, "timeline.mouseEvent");
+
+const timeLineCustomRange = state => {


Remove this selector

coveralls · 2018-11-10T05:03:07Z

Coverage decreased (-0.05%) to 80.802% when pulling 9c8c9b9 on baloola:timline_range into 34606fb on geosolutions-it:c127_geonode_integration.

baloola · 2018-11-13T16:43:04Z

@offtherailz as discussed, I'll be working an the timeline dragging on a separate PR, while this is getting reviewed

offtherailz

Noticed this issue: when enable animation and get back, dragging on range doesn't work.

note: We will enable both in the near future.
So:

Please fix this issue
Add a cursor: move to the css for draggable range on mouse hover
please use names that make sense. customizedRange and startTimeLineRange and endTimeLineRange does not makes too much sense. Even because customTime is already a concept of timeline itself.
You should rename them with with :
currentTimeRange, currentTimeRange.start currentTimeRange.end

fixing the timeline dragging bug

additional bug fixes Timeline dragging

Timeline work

adding timeline range policy

12bcb66

ghost assigned baloola Nov 9, 2018

ghost added pending review review labels Nov 9, 2018

baloola requested a review from offtherailz November 9, 2018 13:30

baloola added Timeline geonode_integration labels Nov 9, 2018

baloola added this to the 2018.03.00 milestone Nov 9, 2018

offtherailz requested changes Nov 9, 2018

View reviewed changes

baloola added 2 commits November 13, 2018 17:32

removing some unused action and setting initial offset

2a01665

merged Changes

0add24f

offtherailz and others added 2 commits November 13, 2018 17:55

Fix geosolutions-it#3277. Animation step functionalities

75bd09e

Update timeline.js

f62d306

ghost assigned offtherailz Nov 13, 2018

Sync animation mode toggle with guide layer

9650f37

offtherailz requested changes Nov 14, 2018

View reviewed changes

baloola and others added 12 commits November 14, 2018 14:52

fixing the timeline dragging bug

df333ac

Merge pull request #3 from baloola/timeline_dragging

961bf12

fixing the timeline dragging bug

Support follow cursor. Sort up code

c434a23

temporary merge WIP

65d945a

additional bug fixing

79df6e9

Update Timeline.jsx

8c41f1d

Merge pull request #4 from baloola/timeline_dragging

1c50639

additional bug fixes Timeline dragging

Fixed range playback on range and timeline events

0b95e41

Removed unused currentOffsetTime

f9ab938

Merge pull request #5 from offtherailz/timeline_work

5a54eb9

Timeline work

Update PlaybackSettings.jsx

573695c

Update Timeline.jsx

9c8c9b9

offtherailz approved these changes Nov 15, 2018

View reviewed changes

offtherailz merged commit f96f790 into geosolutions-it:c127_geonode_integration Nov 15, 2018

ghost removed pending review review labels Nov 15, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Timline_range_interaction#3325

Timline_range_interaction#3325
offtherailz merged 18 commits intogeosolutions-it:c127_geonode_integrationfrom
baloola:timline_range

baloola commented Nov 9, 2018 •

edited by offtherailz

Loading

Uh oh!

offtherailz left a comment

Uh oh!

offtherailz Nov 9, 2018

Uh oh!

offtherailz Nov 9, 2018

Uh oh!

offtherailz Nov 9, 2018

Uh oh!

offtherailz Nov 9, 2018

Uh oh!

offtherailz Nov 9, 2018

Uh oh!

offtherailz Nov 9, 2018

Uh oh!

coveralls commented Nov 10, 2018 •

edited

Loading

Uh oh!

baloola commented Nov 13, 2018

Uh oh!

offtherailz left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		const mouseEventSelector = state => get(state, "timeline.mouseEvent");

		const timeLineCustomRange = state => {

Conversation

baloola commented Nov 9, 2018 • edited by offtherailz Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Issues

Uh oh!

offtherailz left a comment

Choose a reason for hiding this comment

Uh oh!

offtherailz Nov 9, 2018

Choose a reason for hiding this comment

Uh oh!

offtherailz Nov 9, 2018

Choose a reason for hiding this comment

Uh oh!

offtherailz Nov 9, 2018

Choose a reason for hiding this comment

Uh oh!

offtherailz Nov 9, 2018

Choose a reason for hiding this comment

Uh oh!

offtherailz Nov 9, 2018

Choose a reason for hiding this comment

Uh oh!

offtherailz Nov 9, 2018

Choose a reason for hiding this comment

Uh oh!

coveralls commented Nov 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

baloola commented Nov 13, 2018

Uh oh!

offtherailz left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

baloola commented Nov 9, 2018 •

edited by offtherailz

Loading

coveralls commented Nov 10, 2018 •

edited

Loading