Skip to content
This repository has been archived by the owner on Aug 1, 2024. It is now read-only.

Fix timeline #71

Merged
merged 4 commits into from
Sep 28, 2021
+567 −4,308
Merged

Fix timeline #71

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ced3ab3
Fix timeline
srezacova Sep 21, 2021
cc43155
Merge branch 'main' into fix-timeline
srezacova Sep 22, 2021
47f99f8
Show date if dataDate does not exist on timeline
srezacova Sep 24, 2021
d26f5ec
Merge branch 'main' of github.com:openkfw/Oscar into fix-timeline
MartinJurcoGlina Sep 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/SwipeableDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/ol/staticLayers/loaders/vectorSourceLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] &&
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/screens/Map/PublicMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
36 changes: 25 additions & 11 deletions frontend/src/screens/Map/TimeSeriesSlider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -80,22 +80,40 @@ const debounceSourceChange = debounce(changeModifiedLayerSource, 200);
const TimeSeriesSlider = ({ availableDates, modifiedLayer }) => {
const marks = [];
const labels = [];
const { dataDate } = availableDates[0];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would move this into the for cycle and iterate it, let { dataDate } = availableDates[i]; in case some entry doesn't have dataDate

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed:
@srezacova
Show date if dataDate does not exist on timeline
47f99f8


for (let i = 0; i < availableDates.length; i++) {
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],
});
}
}
Expand All @@ -105,10 +123,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
Expand All @@ -133,7 +147,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)}
/>
</>
);
Expand Down
Loading