From ac23156dae87d532585b5657f7e72a5ab35b94a9 Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Thu, 20 Feb 2020 16:16:43 -0600
Subject: [PATCH] Now passing in site lat long from server to html/javascript.
Using this in the hydrograph component to fetch the time zone explictly at
the same time as the initial time series, unless the initial time series
fetch (such as custom dates) requires a time zone.
---
.../components/hydrograph/date-controls.js | 17 ++-
.../scripts/components/hydrograph/index.js | 106 +++++++++---------
assets/src/scripts/store/index.js | 8 +-
.../templates/monitoring_location.html | 8 ++
4 files changed, 73 insertions(+), 66 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/date-controls.js b/assets/src/scripts/components/hydrograph/date-controls.js
index 5c8919a60..314835bb6 100644
--- a/assets/src/scripts/components/hydrograph/date-controls.js
+++ b/assets/src/scripts/components/hydrograph/date-controls.js
@@ -33,15 +33,14 @@ export const drawDateRangeControls = function(elem, store, siteno) {
const initialDateRange = getCurrentDateRange(store.getState());
let initialCustomTimeRange;
- /* TODO: add back in once we straighten out time zone retrieval */
- //if (initialDateRange === 'custom') {
- // const customTimeRangeInMillis = getCustomTimeRange(store.getState());
- // const locationIanaTimeZone = getIanaTimeZone(store.getState());
- // initialCustomTimeRange = {
- // start : DateTime.fromMillis(customTimeRangeInMillis.startDT, {zone: locationIanaTimeZone}).toFormat('LL/dd/yyyy'),
- // end: DateTime.fromMillis(customTimeRangeInMillis.endDT, {zone: locationIanaTimeZone}).toFormat('LL/dd/yyyy')
- // };
- // }
+ if (initialDateRange === 'custom') {
+ const customTimeRangeInMillis = getCustomTimeRange(store.getState());
+ const locationIanaTimeZone = getIanaTimeZone(store.getState());
+ initialCustomTimeRange = {
+ start : DateTime.fromMillis(customTimeRangeInMillis.startDT, {zone: locationIanaTimeZone}).toFormat('yyyy-LL-dd'),
+ end: DateTime.fromMillis(customTimeRangeInMillis.endDT, {zone: locationIanaTimeZone}).toFormat('yyyy-LL-dd')
+ };
+ }
const container = elem.insert('div', ':nth-child(2)')
.attr('id', 'ts-daterange-select-container')
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index aba149763..48333e2bd 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -58,42 +58,52 @@ export const attachToNode = function (store,
store.dispatch(Actions.resizeUI(window.innerWidth, node.offsetWidth));
nodeElem
.select('.loading-indicator-container')
- .call(link(store, drawLoadingIndicator, createStructuredSelector({
- showLoadingIndicator: isLoadingTS('current', 'P7D'),
- sizeClass: () => 'fa-3x'
- })));
+ .call(link(store, drawLoadingIndicator, createStructuredSelector({
+ showLoadingIndicator: isLoadingTS('current', 'P7D'),
+ sizeClass: () => 'fa-3x'
+ })));
- let fetchPromise;
+ // Fetch time zone
+ const fetchTimeZonePromise = store.dispatch(Actions.retrieveLocationTimeZone(CONFIG.siteLocation.latitude, CONFIG.siteLocation.longitude));
+ let fetchDataPromise;
if (showOnlyGraph) {
// Only fetch what is needed
if (parameterCode && period) {
- fetchPromise = store.dispatch(Actions.retrieveCustomTimePeriodTimeSeries(siteno, parameterCode, period));
+ fetchDataPromise = store.dispatch(Actions.retrieveCustomTimePeriodTimeSeries(siteno, parameterCode, period));
} else if (parameterCode && startDT && endDT) {
- fetchPromise = store.dispatch(Actions.retrieveDataForDateRange(siteno, startDT, endDT, parameterCode));
+ // Don't fetch until time zone is available
+ fetchDataPromise = fetchTimeZonePromise.then(() => {
+ store.dispatch(Actions.retrieveDataForDateRange(siteno, startDT, endDT, parameterCode));
+ });
} else {
- fetchPromise = store.dispatch(Actions.retrieveTimeSeries(siteno, parameterCode ? [parameterCode] : null));
+ fetchDataPromise = store.dispatch(Actions.retrieveTimeSeries(siteno, parameterCode ? [parameterCode] : null));
}
} else {
// Retrieve all parameter codes for 7 days and median statistics
- fetchPromise = store.dispatch(Actions.retrieveTimeSeries(siteno))
+ fetchDataPromise = store.dispatch(Actions.retrieveTimeSeries(siteno))
.then(() => {
// Fetch any extended data needed to set initial state
const currentParamCode = parameterCode ? parameterCode : getCurrentParmCd(store.getState());
if (period === 'P30D' || period === 'P1Y') {
store.dispatch(Actions.retrieveExtendedTimeSeries(siteno, period, currentParamCode));
} else if (startDT && endDT) {
- store.dispatch(Actions.retrieveDataForDateRange(siteno, startDT, endDT, currentParamCode));
+ console.log('Waiting for time zone promise');
+ fetchTimeZonePromise.then(() => {
+ console.log('time zone retrieved. Retrieving custom date range');
+ store.dispatch(Actions.retrieveDataForDateRange(siteno, startDT, endDT, currentParamCode));
+ });
}
});
store.dispatch(Actions.retrieveMedianStatistics(siteno));
}
- fetchPromise.then(() => {
+ fetchDataPromise.then(() => {
+ console.log('fetchDataPromise then is bein processed');
if (!hasAnyTimeSeries(store.getState())) {
drawInfoAlert(nodeElem, {body: 'No time series data available for this site'});
} else {
//Update time series state
if (parameterCode) {
- const isThisParamCode = function(variable) {
+ const isThisParamCode = function (variable) {
return variable.variableCode.value === parameterCode;
};
const thisVariable = Object.values(getVariables(store.getState())).find(isThisParamCode);
@@ -102,47 +112,43 @@ export const attachToNode = function (store,
if (compare) {
store.dispatch(Actions.toggleTimeSeries('compare', true));
}
- }
- });
- // Set currentDateRange prior to rendering so initial state is correct
- if (period || (startDT && endDT)) {
- store.dispatch(Actions.setCurrentDateRange(period ? period : 'custom'));
- store.dispatch(Actions.setCustomDateRange())
- }
-
- // Set up rendering functions for the graph-container
- let graphContainer = nodeElem.select('.graph-container')
- .call(link(store, controlDisplay, hasAnyTimeSeries))
- .call(drawTimeSeriesGraph, store, siteno, showMLName);
- if (!showOnlyGraph) {
- graphContainer.call(cursorSlider, store);
- graphContainer.call(drawGraphBrush, store);
- }
- graphContainer.append('div')
- .classed('ts-legend-controls-container', true)
- .call(drawTimeSeriesLegend, store);
+ // Initial data has been fetched and initial state set. We can render the hydrograph elements
+ // Set up rendering functions for the graph-container
+ let graphContainer = nodeElem.select('.graph-container')
+ .call(link(store, controlDisplay, hasAnyTimeSeries))
+ .call(drawTimeSeriesGraph, store, siteno, showMLName);
+ if (!showOnlyGraph) {
+ graphContainer.call(cursorSlider, store);
+ graphContainer.call(drawGraphBrush, store);
+ }
+ graphContainer.append('div')
+ .classed('ts-legend-controls-container', true)
+ .call(drawTimeSeriesLegend, store);
- // Add UI interactive elements and the provisional data alert.
- if (!showOnlyGraph) {
- nodeElem
- .call(drawMethodPicker, store)
- .call(drawDateRangeControls, store, siteno);
+ // Add UI interactive elements and the provisional data alert.
+ if (!showOnlyGraph) {
+ console.log('Rendering date range controls')
+ nodeElem
+ .call(drawMethodPicker, store)
+ .call(drawDateRangeControls, store, siteno);
- nodeElem.select('.ts-legend-controls-container')
- .call(drawGraphControls, store);
+ nodeElem.select('.ts-legend-controls-container')
+ .call(drawGraphControls, store);
- nodeElem.select('.select-time-series-container')
- .call(link(store, plotSeriesSelectTable, createStructuredSelector({
- siteno: () => siteno,
- availableTimeSeries: availableTimeSeriesSelector,
- lineSegmentsByParmCd: lineSegmentsByParmCdSelector('current', 'P7D'),
- timeSeriesScalesByParmCd: timeSeriesScalesByParmCdSelector('current', 'P7D', SPARK_LINE_DIM)
- }), store));
- nodeElem.select('.provisional-data-alert')
- .call(link(store, function(elem, allTimeSeries) {
- elem.attr('hidden', Object.keys(allTimeSeries).length ? null : true);
- }, getTimeSeries));
- }
+ nodeElem.select('.select-time-series-container')
+ .call(link(store, plotSeriesSelectTable, createStructuredSelector({
+ siteno: () => siteno,
+ availableTimeSeries: availableTimeSeriesSelector,
+ lineSegmentsByParmCd: lineSegmentsByParmCdSelector('current', 'P7D'),
+ timeSeriesScalesByParmCd: timeSeriesScalesByParmCdSelector('current', 'P7D', SPARK_LINE_DIM)
+ }), store));
+ nodeElem.select('.provisional-data-alert')
+ .call(link(store, function (elem, allTimeSeries) {
+ elem.attr('hidden', Object.keys(allTimeSeries).length ? null : true);
+ }, getTimeSeries));
+ }
+ }
+ });
window.onresize = function() {
store.dispatch(Actions.resizeUI(window.innerWidth, node.offsetWidth));
diff --git a/assets/src/scripts/store/index.js b/assets/src/scripts/store/index.js
index e3b2062b7..32bad7cfe 100644
--- a/assets/src/scripts/store/index.js
+++ b/assets/src/scripts/store/index.js
@@ -85,18 +85,12 @@ export const Actions = {
return getTimeSeries({sites: [siteno], params}).then(
series => {
const collection = normalize(series, requestKey);
- // get the lat/lon of the site
- const location = collection.sourceInfo ? collection.sourceInfo[siteno].geoLocation.geogLocation : {};
- const latitude = location.latitude || null;
- const longitude = location.longitude || null;
// Get the start/end times of this request's range.
const notes = collection.queryInfo[requestKey].notes;
const endTime = notes.requestDT;
const startTime = calcStartTime('P7D', endTime, 'local');
- if (latitude !== null && longitude !== null) {
- dispatch(Actions.retrieveLocationTimeZone(latitude, longitude));
- }
+
// Trigger a call to get last year's data
dispatch(Actions.retrieveCompareTimeSeries(siteno, 'P7D', startTime, endTime));
diff --git a/wdfn-server/waterdata/templates/monitoring_location.html b/wdfn-server/waterdata/templates/monitoring_location.html
index 3e26681ab..c5457c8f5 100644
--- a/wdfn-server/waterdata/templates/monitoring_location.html
+++ b/wdfn-server/waterdata/templates/monitoring_location.html
@@ -28,6 +28,14 @@
{{ json_ld }}
</script>
{% endif %}
+ {% if stations|length == 1 %}
+ <script type="text/javascript">
+ CONFIG['siteLocation'] = {
+ latitude: {{ stations[0].dec_lat_va }},
+ longitude: {{ stations[0].dec_long_va }}
+ };
+ </script>
+ {% endif %}
{% endblock page_script %}
{% set body_id = 'monitoring-location' %}
--
GitLab