Fix #3345 fixing the initial component re-rendering (#3376)

web/client/plugins/timeline/TimelineComponent.jsx → web/client/components/time/TimelineComponent.jsx

@@ -83,12 +83,11 @@ class Timeline extends React.Component {
   shouldComponentUpdate(nextProps) {
       const { items, groups, options, selection, customTimes } = this.props;
 
-      const itemsChange = items !== nextProps.items || (items || []).length !== (nextProps.items || []).length;
+      const itemsChange = items !== nextProps.items;
       const groupsChange = groups !== nextProps.groups;
       const optionsChange = options !== nextProps.options;
       const customTimesChange = customTimes !== nextProps.customTimes;
       const selectionChange = selection !== nextProps.selection;
-
       return (
         itemsChange ||
         groupsChange ||
@@ -130,8 +129,8 @@ class Timeline extends React.Component {
           timelineOptions = omit(options, 'start', 'end');
 
           this.$el.setWindow(options.start, options.end, {
-          animation: animate
-      });
+            animation: animate
+          });
       }
 
       this.$el.setOptions(timelineOptions);
@@ -142,7 +141,24 @@ class Timeline extends React.Component {
           this.$el.setGroups(groupsDataset);
       }
 
-      this.$el.setItems(items);
+      /*
+      ** the init() function keeps re-triggerd with change of some props
+      * when the item is set at the first init(), it return no range (vis-timelin.js)
+      * in this case we emit 'change' action to create a view range from th new items.
+      **/
+      if ( items && items.length > 0) {
+          // first setItems is triggerd only when the component recieve items. trigger 'change' event to create  view range.
+          if (!this.$el.initialFitDone) {
+              this.$el.setItems(items);
+              this.$el.emit('changed');
+          }else {
+              // when we have a change in items we perform set item (e.g zoom /move events)
+              this.$el.setItems(items);
+          }
+      // when there is a view range but no items on the timeline (e.g. user moved the timeline where there are no data). we re-set items again
+      }else if (this.$el.initialRangeChangeDone) {
+          this.$el.setItems(items);
+      }
       this.$el.setSelection(selection, selectionOptions);
 
       if (currentTime) {

web/client/components/time/__tests__/TimelineComponent-test.jsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2018, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Timeline = require('../TimelineComponent');
+const expect = require('expect');
+
+describe('test TimelineComponent module component', () => {
+    beforeEach((done) => {
+        document.body.innerHTML = '<div id="container"></div>';
+        setTimeout(done);
+    });
+
+    afterEach((done) => {
+        ReactDOM.unmountComponentAtNode(document.getElementById("container"));
+        document.body.innerHTML = '';
+        setTimeout(done);
+    });
+
+    it('test TimelineComponent creation', () => {
+        const comp = ReactDOM.render(<Timeline />, document.getElementById("container"));
+        expect(comp).toExist();
+
+    });
+    it('test TimelineComponent re-rendering on props change', () => {
+        const actions = {
+            rangeChange: () => { }
+        };
+        const comp = ReactDOM.render(<Timeline currentTime="2016-02-24T12:00:00.000Z" rangechangedHandler={actions.rangeChange} />, document.getElementById("container"));
+        const reComp = ReactDOM.render(<Timeline currentTime="2016-02-24T12:00:00.000Z" rangechangedHandler={actions.rangeChange} collapse = {false} items= {[ {id: '1', start: new Date(0), end: new Date(0), type: 'point', content: ''}, {id: '2', start: new Date(970821881894), end: new Date(970821881894), type: 'point', content: ''}] }/>, document.getElementById("container"));
+        expect(comp).toExist();
+        expect(reComp).toExist();
+        const point = document.querySelector('.vis-point');
+        expect(point).toExist();
+    });
+
+});

web/client/plugins/Timeline.jsx

@@ -13,7 +13,7 @@ const Timeline = require('./timeline/Timeline');
 const InlineDateTimeSelector = require('../components/time/InlineDateTimeSelector');
 const Toolbar = require('../components/misc/toolbar/Toolbar');
 const { offsetEnabledSelector, currentTimeSelector, layersWithTimeDataSelector } = require('../selectors/dimension');
-const { selectedLayerSelector, currentTimeRangeSelector } = require('../selectors/timeline');
+const { currentTimeRangeSelector } = require('../selectors/timeline');
 const { mapLayoutValuesSelector } = require('../selectors/maplayout');
 
 const { withState, compose, branch, renderNothing, withStateHandlers, withProps, defaultProps } = require('recompose');
@@ -41,15 +41,13 @@ const TimelinePlugin = compose(
     connect(
         createSelector(
             layersWithTimeDataSelector,
-            selectedLayerSelector,
             currentTimeSelector,
             currentTimeRangeSelector,
             offsetEnabledSelector,
             playbackRangeSelector,
             statusSelector,
-            (layers, selectedLayer, currentTime, currentTimeRange, offsetEnabled, playbackRange, status) => ({
+            (layers, currentTime, currentTimeRange, offsetEnabled, playbackRange, status) => ({
                 layers,
-                selectedLayer,
                 currentTime,
                 currentTimeRange,
                 offsetEnabled,
@@ -236,7 +234,6 @@ const TimelinePlugin = compose(
                             visible: canExpand,
                             tooltip: <Message msgId= {collapsed ? "timeline.expand" : "timeline.collapse"}/>,
                             glyph: collapsed ? 'resize-full' : 'resize-small',
-                            // we perform a check if the timeline data is loaded before allowing the user to expand the timeline and render an empty component
                             onClick: () => setOptions({ ...options, collapsed: !collapsed })
                         }
                     ]} />

web/client/plugins/timeline/Timeline.jsx

@@ -327,6 +327,6 @@ const enhance = compose(
         })
     )
 );
-const Timeline = require('./TimelineComponent');
+const Timeline = require('../../components/time/TimelineComponent');
 
 module.exports = enhance(Timeline);