Merge pull request #71 from openkfw/fix-timeline

Fix timeline

frontend/src/components/SwipeableDrawer.js

@@ -132,7 +132,7 @@ class SwipeableDrawer extends React.Component {
             <Grid
               container
               direction="row"
-              justify="center"
+              justifyContent="center"
               onTouchStart={this.handleTouchStart}
               onTouchMove={this.handleTouchMove}
               onTouchEnd={this.handleTouchEnd}

frontend/src/ol/staticLayers/loaders/vectorSourceLoader.js

@@ -15,27 +15,27 @@ const vectorSourceLoader = (layerData, handleIsLoading, title, type) => {
       if (response) {
         if (response.features && response.features[0]) {
           if (response.features[0].properties && !response.features[0].properties.hasOwnProperty(layerData.attribute)) {
-            let latestAttributes = [];
+            let attributes = [];
 
             if (layerData.attribute) {
               if (vectorSource.get('sliderDate') && layerData.timeseries) {
                 const searchParams = new URLSearchParams();
                 searchParams.append('attributeId', layerData.attribute);
                 searchParams.append('dateStart', vectorSource.get('sliderDate'));
                 searchParams.append('dateEnd', vectorSource.get('sliderDate'));
-                latestAttributes = await getAttributesData(searchParams);
+                attributes = await getAttributesData(searchParams);
               } else {
                 const searchParams = new URLSearchParams();
                 searchParams.append('attributeId', layerData.attribute);
                 searchParams.append('latestValues', true);
-                latestAttributes = await getAttributesData(searchParams);
+                attributes = await getAttributesData(searchParams);
               }
             }
 
             const { features } = response;
 
             const enrichedFeatures = features.map((feature) => {
-              const additionalData = latestAttributes.find(
+              const additionalData = attributes.find(
                 (d) =>
                   d.featureId &&
                   feature.properties[layerData.featureId] &&

frontend/src/screens/Map/PublicMap.js

@@ -168,11 +168,12 @@ const PublicMap = ({ isLoading, handleIsLoading }) => {
         // select correct layer and timeline, if timeseries data available
         if (modifiedLayer.get('timeseries')) {
           const availableDates = await getAvailableDates(modifiedLayer.get('attribute'));
-          if (availableDates.length > 1) {
+          if (availableDates && availableDates.length > 1) {
             setAvailableDates(availableDates);
             setTimeSeriesSlider(true);
             setModifiedLayer(modifiedLayer);
             modifiedLayer.getSource().unset('sliderDate');
+            modifiedLayer.getSource().unset('dataDate');
             modifiedLayer.getSource().refresh();
             modifiedLayer.setVisible(true);
           } else {

frontend/src/screens/Map/TimeSeriesSlider.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import Slider from '@material-ui/core/Slider';
 import { withStyles } from '@material-ui/core/styles';
 import { Tooltip } from '@material-ui/core';
@@ -80,22 +80,41 @@ const debounceSourceChange = debounce(changeModifiedLayerSource, 200);
 const TimeSeriesSlider = ({ availableDates, modifiedLayer }) => {
   const marks = [];
   const labels = [];
+  let dataDate;
 
   for (let i = 0; i < availableDates.length; i++) {
+    dataDate = availableDates[i].dataDate;
     if (i === 0 || i === availableDates.length - 1) {
+      if (dataDate) {
+        marks.push({
+          value: new Date(availableDates[i].date).getTime(),
+          label: availableDates[i].dataDate,
+        });
+        labels.push({
+          label: availableDates[i].dataDate,
+        });
+      } else {
+        marks.push({
+          value: new Date(availableDates[i].date).getTime(),
+          label: availableDates[i].date.split('T')[0],
+        });
+        labels.push({
+          label: availableDates[i].date.split('T')[0],
+        });
+      }
+    } else if (dataDate) {
       marks.push({
-        value: new Date(availableDates[i]).getTime(),
-        label: availableDates[i].split('T')[0],
+        value: new Date(availableDates[i].date).getTime(),
       });
       labels.push({
-        label: availableDates[i].split('T')[0],
+        label: availableDates[i].dataDate,
       });
     } else {
       marks.push({
-        value: new Date(availableDates[i]).getTime(),
+        value: new Date(availableDates[i].date).getTime(),
       });
       labels.push({
-        label: availableDates[i].split('T')[0],
+        label: availableDates[i].date.split('T')[0],
       });
     }
   }
@@ -105,10 +124,6 @@ const TimeSeriesSlider = ({ availableDates, modifiedLayer }) => {
 
   const [currentValue, setCurrentValue] = useState(undefined);
 
-  useEffect(() => {
-    setCurrentValue(modifiedLayer.getSource().get('sliderDate'));
-  }, [modifiedLayer]);
-
   const valueLabelFormat = (value) => {
     if (!currentValue) {
       return 'LAST'; // first load with no value set in slider
@@ -133,7 +148,7 @@ const TimeSeriesSlider = ({ availableDates, modifiedLayer }) => {
         min={minValue}
         max={maxValue}
         onChange={(_, value) => (value !== currentValue ? setCurrentValue(value) : null)}
-        onChangeCommitted={() => debounceSourceChange(currentValue, modifiedLayer)}
+        onChangeCommitted={() => debounceSourceChange(currentValue, modifiedLayer, availableDates, dataDate)}
       />
     </>
   );