TimeLine - Display issues at certain screen sizes and 'infinite loop in redraw?' errors in console

[ElenaGallo]

Description

With a laptop-size screen, opening this map with a timeline, an errors appears in console.

The WARNING comes from the library we use to render the timeline, the issue does not happen only with the time intervals but also with the points time (Meteorite Landings layer)

recording_1.mp4

How to reproduce

-With a 1366x769 px screen or less, open this map

• Open the console
• Pan hover the timeline

Expected Result

The timeline is always visible and no error appears in console

Current Result

The 'WARNING: infinite loop in redraw?' appears on console and the timeline disappears for a moment

• Not browser related

Browser info

(use this site: https://www.whatsmybrowser.org/ for non expert users)

Browser Affected	Version
Internet Explorer
Edge
Chrome
Firefox
Safari

Other useful information

[Igi-ID]

The issue stems from the library itself and is correctly logged. It has been reported here, here and here. It has been fixed in this PR. Notice that the version of the fix is 6.3.1 and the library is different.

We use this library as a runtime dependency, the version used is 4.21, then we leverage vis.Timeline for our Timeline plugin. It is the only plugin that depends on this library, which makes things slightly easier to fix. The library itself is deprecated and split into new repos as seen by this post. A valid course of action to fix this issue would be to swap our current dependency to https://github.com/visjs/vis-timeline, which is:

• What we currently need and use.
• It is regularly maintained.
• Potentially smaller in size.

Introducing the fix would require further tests of the Timeline plugin in order to ensure that everything still works and potentially new behavior is accounted for.

The bug occurs due to a border calculation of the dom elements that are produced. It can be triggered by simply zooming in and out on the browser as well as triggering resizing of the elements by different methods. It is therefore not restricted to smaller screen resolutions, as seen on the video below.

9828_repro.mp4

.

[Igi-ID]

Changing vis to vis-timeline latest causes the following problems:

• Enabling time range (via the button) causes a critical failure. The exception stems from this line, itemsData is null during the props update. At other states of the program, itemsData may not be null but the getDataSet method does not exist on the object.

9828_crit.mp4

• Show / hide layers name button does not toggle the left bar with the name of the layers.

9828_layer_name_toggle.mp4

• Scrolling inside the time slider is working differently, maybe as an intentional change from the library. The (mouse) wheel event fires only inside the bottom row of the expanded timeline, where the months and years are presented as well as near the "current time" line. In our current implementation it fires over the data row everywhere and not in the bottom row.

9828_scrolling_time_ranges.mp4

• Having multiple layers on the map and toggling between them in the timeline (by clicking the name in the left bar), creates a resize flicker as intermittently a third member(layer) is added to the list with the name current-range.

9828_toggle_layers_flicker.mp4

• The shadow box container which represents the inside of a time range does not resize when the time range is changed. It lags one update behind or rather it updates on a different trigger, so typically this indicates a props update issue.

9828_time_range_shadow_box.mp4

• Clicking the "show only times available in the viewport" button makes the data bars in the timeline disappear. This is also present on dev.

9828_data_bar_disappear.mp4

Running the functional tests produce a single test failure with the following exception:

SUMMARY:
√ 8099 tests completed
i 5 tests skipped
‼ 135 tests slow
× 1 test failed

FAILED TESTS:
  test TimelineComponent module component
    × re-rendering rangeItems do not change current items (optimization) (slow: 0.106 secs)
      Chrome Headless 120.0.6099.225 (Windows 10)
    Error: Expected <div class="vis-item vis-point vis-readonly">...</div> to be <div class="vis-item vis-point vis-readonly" style="transform: translateX(-502.027px);">...</div>
        at assert (webpack://mapstore2/./node_modules/expect/lib/assert.js?:29:9)
        at Expectation.toBe (webpack://mapstore2/./node_modules/expect/lib/Expectation.js?:70:28)
        at Context.eval (webpack://mapstore2/./web/client/components/time/__tests__/TimelineComponent-test.jsx?:133:59)