From 14176364f07924e9c289cb0d5ad8a86189eccb78 Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Wed, 26 Feb 2020 11:46:55 -0600
Subject: [PATCH] Refactored to pass in site location to the rendering function
and then make the call to query for the time zone. This means bringing in the
axios dependency to graph-server to make a service call to the OGCAPI to get
the location.
---
.../components/hydrograph/drawing-data.js | 16 ++-
.../components/hydrograph/graph-controls.js | 16 +--
.../scripts/components/hydrograph/index.js | 9 +-
.../components/hydrograph/method-picker.js | 4 +-
.../scripts/components/hydrograph/scales.js | 18 +--
.../components/hydrograph/time-series.js | 71 +-----------
.../scripts/selectors/time-series-selector.js | 70 +++++++++++
assets/src/scripts/store/index.js | 42 ++-----
assets/src/scripts/url-params.js | 4 +-
assets/tests/scripts/global-config.js | 6 +-
graph-server/package-lock.json | 26 +++++
graph-server/package.json | 1 +
graph-server/src/renderer/index.js | 109 ++++++++++--------
.../templates/macros/components.html | 4 +-
.../templates/monitoring_location.html | 10 +-
15 files changed, 208 insertions(+), 198 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/drawing-data.js b/assets/src/scripts/components/hydrograph/drawing-data.js
index da476aab6..8d206bc24 100644
--- a/assets/src/scripts/components/hydrograph/drawing-data.js
+++ b/assets/src/scripts/components/hydrograph/drawing-data.js
@@ -1,16 +1,14 @@
-import { set } from 'd3-collection';
+import {set} from 'd3-collection';
import memoize from 'fast-memoize';
import find from 'lodash/find';
-import { DateTime } from 'luxon';
-import { createSelector } from 'reselect';
-import { format } from 'd3-format';
+import {DateTime} from 'luxon';
+import {createSelector} from 'reselect';
+import {format} from 'd3-format';
import config from '../../config';
-import { getVariables, getCurrentMethodID, getTimeSeries, getTsRequestKey, getRequestTimeRange, getIanaTimeZone }
- from '../../selectors/time-series-selector';
-import { getCurrentVariableMedianStatistics } from '../../selectors/median-statistics-selector';
-
-import { getCurrentVariableTimeSeries, getTimeSeriesForTsKey } from './time-series';
+import {getVariables, getCurrentMethodID, getTimeSeries, getCurrentVariableTimeSeries, getTimeSeriesForTsKey,
+ getTsRequestKey, getRequestTimeRange, getIanaTimeZone} from '../../selectors/time-series-selector';
+import {getCurrentVariableMedianStatistics} from '../../selectors/median-statistics-selector';
export const MASK_DESC = {
diff --git a/assets/src/scripts/components/hydrograph/graph-controls.js b/assets/src/scripts/components/hydrograph/graph-controls.js
index fb53e3695..6d616eebc 100644
--- a/assets/src/scripts/components/hydrograph/graph-controls.js
+++ b/assets/src/scripts/components/hydrograph/graph-controls.js
@@ -1,11 +1,11 @@
-/**
- * Hydrograph controls module.
- */
-import { Actions } from '../../store';
-import { link } from '../../lib/d3-redux';
-import { audibleUI } from './audible';
-import { getCurrentVariableMedianStatistics } from '../../selectors/median-statistics-selector';
-import { isVisibleSelector, getCurrentVariableTimeSeries } from './time-series';
+
+import {link} from '../../lib/d3-redux';
+import {getCurrentVariableTimeSeries} from '../../selectors/time-series-selector';
+import {Actions} from '../../store';
+
+import {audibleUI} from './audible';
+import {getCurrentVariableMedianStatistics} from '../../selectors/median-statistics-selector';
+import {isVisibleSelector} from './time-series';
/*
* Create the show audible toggle, last year toggle, and median toggle for the time series graph.
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 7c13552b6..c1dc93bda 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -36,11 +36,16 @@ const controlDisplay = function(elem, showElem) {
elem.attr('hidden', showElem ? null : true);
};
-
+/*
+ * Renders the hydrograph on the node element using the Redux store for state information. The siteno, latitude, and
+ * longitude are required parameters. All others are optional and are used to set the initial state of the hydrograph.
+ */
export const attachToNode = function (store,
node,
{
siteno,
+ latitude,
+ longitude,
parameterCode,
compare,
period,
@@ -63,7 +68,7 @@ export const attachToNode = function (store,
.call(drawLoadingIndicator, {showLoadingIndicator: true, sizeClass: 'fa-3x'});
// Fetch time zone
- const fetchTimeZonePromise = store.dispatch(Actions.retrieveLocationTimeZone(config.siteLocation.latitude, config.siteLocation.longitude));
+ const fetchTimeZonePromise = store.dispatch(Actions.retrieveLocationTimeZone(latitude, longitude));
let fetchDataPromise;
if (showOnlyGraph) {
// Only fetch what is needed
diff --git a/assets/src/scripts/components/hydrograph/method-picker.js b/assets/src/scripts/components/hydrograph/method-picker.js
index 92bc05c8e..91bff95e9 100644
--- a/assets/src/scripts/components/hydrograph/method-picker.js
+++ b/assets/src/scripts/components/hydrograph/method-picker.js
@@ -7,10 +7,10 @@ import {createStructuredSelector} from 'reselect';
import{link} from '../../lib/d3-redux';
import config from '../../config';
-import {getCurrentMethodID} from '../../selectors/time-series-selector';
+import {getCurrentMethodID, getAllMethodsForCurrentVariable} from '../../selectors/time-series-selector';
import {Actions} from '../../store';
-import { getAllMethodsForCurrentVariable } from './time-series';
+import { } from './time-series';
export const drawMethodPicker = function(elem, store) {
if (!config.MULTIPLE_TIME_SERIES_METADATA_SELECTOR_ENABLED) {
diff --git a/assets/src/scripts/components/hydrograph/scales.js b/assets/src/scripts/components/hydrograph/scales.js
index 0bc80d08a..0ac67a8af 100644
--- a/assets/src/scripts/components/hydrograph/scales.js
+++ b/assets/src/scripts/components/hydrograph/scales.js
@@ -1,12 +1,14 @@
-import { scaleLinear, scaleSymlog } from 'd3-scale';
+import {scaleLinear, scaleSymlog} from 'd3-scale';
import memoize from 'fast-memoize';
-import { createSelector } from 'reselect';
-import { getYDomain, SYMLOG_PARMS } from './domain';
-import { getLayout } from './layout';
-import { getTimeSeriesForTsKey, TEMPERATURE_PARAMETERS } from './time-series';
-import { visiblePointsSelector, pointsByTsKeySelector } from './drawing-data';
-import { getVariables, getCurrentParmCd, getRequestTimeRange } from '../../selectors/time-series-selector';
-import { convertCelsiusToFahrenheit, convertFahrenheitToCelsius } from '../../utils';
+import {createSelector} from 'reselect';
+
+import {getVariables, getCurrentParmCd, getRequestTimeRange, getTimeSeriesForTsKey} from '../../selectors/time-series-selector';
+import {convertCelsiusToFahrenheit, convertFahrenheitToCelsius} from '../../utils';
+
+import {getYDomain, SYMLOG_PARMS} from './domain';
+import {visiblePointsSelector, pointsByTsKeySelector} from './drawing-data';
+import {getLayout} from './layout';
+import {TEMPERATURE_PARAMETERS} from './time-series';
const REVERSE_AXIS_PARMS = [
'72019',
diff --git a/assets/src/scripts/components/hydrograph/time-series.js b/assets/src/scripts/components/hydrograph/time-series.js
index 7f0c9e970..f2006c8ab 100644
--- a/assets/src/scripts/components/hydrograph/time-series.js
+++ b/assets/src/scripts/components/hydrograph/time-series.js
@@ -1,12 +1,10 @@
import { timeFormat } from 'd3-time-format';
import memoize from 'fast-memoize';
-import _includes from 'lodash/includes';
-import uniq from 'lodash/uniq';
import { createSelector } from 'reselect';
import {
- getRequestTimeRange, getCurrentVariable, getTsRequestKey, getIanaTimeZone, getCurrentParmCd, getCurrentMethodID,
- getMethods, getTimeSeries
+ getRequestTimeRange, getCurrentVariable, getTimeSeriesForTsKey, getIanaTimeZone, getCurrentParmCd, getCurrentMethodID,
+ getMethods
} from '../../selectors/time-series-selector';
@@ -38,71 +36,6 @@ export const TEMPERATURE_PARAMETERS = {
// Create a time formatting function from D3's timeFormat
const formatTime = timeFormat('%c %Z');
-/**
- * Returns a selector that, for a given tsKey and period:
- * Selects all time series data. If period is null then, the currentDateRange is used
- * @param {String} tsKey Time-series key
- * @param {String} period or null date range using ISO-8601 duration;
- * @param {Object} state Redux state
- * @return {Object} - Keys are tsID, values are time-series data
- */
-export const getTimeSeriesForTsKey = memoize((tsKey, period) => createSelector(
- getTsRequestKey(tsKey, period),
- getTimeSeries,
- (tsRequestKey, timeSeries) => {
- let x = {};
- Object.keys(timeSeries).forEach(key => {
- const series = timeSeries[key];
- if (series.tsKey === tsRequestKey) {
- x[key] = series;
- }
- });
- return x;
- }
-));
-
-/**
- * Returns a selector that, for a given tsKey:
- * Selects all time series for the current time series variable and current date range.
- * @param {String} tsKey Time-series key
- * @param {Object} state Redux state
- * @return {Object} Time-series data
- */
-export const getCurrentVariableTimeSeries = memoize((tsKey, period) => createSelector(
- getTimeSeriesForTsKey(tsKey, period),
- getCurrentVariable,
- (timeSeries, variable) => {
- let ts = {};
- if (variable) {
- Object.keys(timeSeries).forEach(key => {
- const series = timeSeries[key];
- if (series.variable === variable.oid) {
- ts[key] = series;
- }
- });
- }
- return ts;
- }
-));
-
-/*
- * @param {String} tsKey - current or compare
- * @param {String} or null period - date range of interest specified as an ISO-8601 duration. If null, P7D is assumed
- * @param {String} or null parmCd - Only need to specify if period is something other than P7D or null
- * return {Array} an object containing method_id and method_description properties
- */
-export const getAllMethodsForCurrentVariable = createSelector(
- getMethods,
- getCurrentVariableTimeSeries('current', 'P7D'),
- (methods, timeSeries) => {
- const allMethods = Object.values(methods);
- const currentMethodIds = uniq(Object.values(timeSeries).map((ts) => ts.method));
-
- return allMethods.filter((method) => {
- return _includes(currentMethodIds, method.methodID);
- });
- }
-);
export const hasTimeSeriesWithPoints = memoize((tsKey, period) => createSelector(
getTimeSeriesForTsKey(tsKey, period),
diff --git a/assets/src/scripts/selectors/time-series-selector.js b/assets/src/scripts/selectors/time-series-selector.js
index 840adc14a..78326ecfc 100644
--- a/assets/src/scripts/selectors/time-series-selector.js
+++ b/assets/src/scripts/selectors/time-series-selector.js
@@ -2,6 +2,8 @@ import { DateTime } from 'luxon';
import memoize from 'fast-memoize';
import { createSelector } from 'reselect';
+import uniq from 'lodash/uniq';
+import _includes from 'lodash/includes';
/*
* Selectors that return properties from the state
@@ -205,3 +207,71 @@ export const isLoadingTS = memoize((tsKey, period, parmCd) => createSelector(
getTsRequestKey(tsKey, period, parmCd),
(loadingTSKeys, tsRequestKey) => loadingTSKeys.includes(tsRequestKey)
));
+
+/**
+ * Returns a selector that, for a given tsKey and period:
+ * Selects all time series data. If period is null then, the currentDateRange is used
+ * @param {String} tsKey Time-series key
+ * @param {String} period or null date range using ISO-8601 duration;
+ * @param {Object} state Redux state
+ * @return {Object} - Keys are tsID, values are time-series data
+ */
+export const getTimeSeriesForTsKey = memoize((tsKey, period) => createSelector(
+ getTsRequestKey(tsKey, period),
+ getTimeSeries,
+ (tsRequestKey, timeSeries) => {
+ let x = {};
+ Object.keys(timeSeries).forEach(key => {
+ const series = timeSeries[key];
+ if (series.tsKey === tsRequestKey) {
+ x[key] = series;
+ }
+ });
+ return x;
+ }
+));
+
+
+/**
+ * Returns a selector that, for a given tsKey:
+ * Selects all time series for the current time series variable and current date range.
+ * @param {String} tsKey Time-series key
+ * @param {Object} state Redux state
+ * @return {Object} Time-series data
+ */
+export const getCurrentVariableTimeSeries = memoize((tsKey, period) => createSelector(
+ getTimeSeriesForTsKey(tsKey, period),
+ getCurrentVariable,
+ (timeSeries, variable) => {
+ let ts = {};
+ if (variable) {
+ Object.keys(timeSeries).forEach(key => {
+ const series = timeSeries[key];
+ if (series.variable === variable.oid) {
+ ts[key] = series;
+ }
+ });
+ }
+ return ts;
+ }
+));
+
+/*
+ * @param {String} tsKey - current or compare
+ * @param {String} or null period - date range of interest specified as an ISO-8601 duration. If null, P7D is assumed
+ * @param {String} or null parmCd - Only need to specify if period is something other than P7D or null
+ * return {Array} an object containing method_id and method_description properties
+ */
+export const getAllMethodsForCurrentVariable = createSelector(
+ getMethods,
+ getCurrentVariableTimeSeries('current', 'P7D'),
+ (methods, timeSeries) => {
+ const allMethods = Object.values(methods);
+ const currentMethodIds = uniq(Object.values(timeSeries).map((ts) => ts.method));
+
+ return allMethods.filter((method) => {
+ return _includes(currentMethodIds, method.methodID);
+ });
+ }
+);
+
diff --git a/assets/src/scripts/store/index.js b/assets/src/scripts/store/index.js
index 37418e6c7..d716df744 100644
--- a/assets/src/scripts/store/index.js
+++ b/assets/src/scripts/store/index.js
@@ -75,22 +75,14 @@ export const Actions = {
);
};
},
- retrieveTimeSeries(siteno, params=null, fetchTimeZone=false) {
+ retrieveTimeSeries(siteno, params=null) {
return function (dispatch, getState) {
const currentState = getState();
const requestKey = getTsRequestKey('current', 'P7D')(currentState);
dispatch(Actions.addTimeSeriesLoading([requestKey]));
- let fetchTimeZonePromise;
-
- let fetchTimeSeriesPromise = getTimeSeries({sites: [siteno], params}).then(
+ return getTimeSeries({sites: [siteno], params}).then(
series => {
const collection = normalize(series, requestKey);
- if (fetchTimeZone) {
- const location = collection.sourceInfo ? collection.sourceInfo[siteno].geoLocation.geogLocation : {};
- fetchTimeZonePromise = dispatch(Actions.retrieveLocationTimeZone(location.latitude || null, location.longitude || null));
- } else {
- fetchTimeZonePromise = Promise.resolve();
- }
// Get the start/end times of this request's range.
const notes = collection.queryInfo[requestKey].notes;
@@ -117,8 +109,6 @@ export const Actions = {
dispatch(Actions.toggleTimeSeries('current', false));
}
);
-
- return Promise.all(fetchTimeSeriesPromise, fetchTimeZonePromise);
};
},
retrieveCompareTimeSeries(site, period, startTime, endTime) {
@@ -148,23 +138,16 @@ export const Actions = {
};
},
- retrieveCustomTimePeriodTimeSeries(site, parameterCd, period, fetchTimeZone=false) {
+ retrieveCustomTimePeriodTimeSeries(site, parameterCd, period) {
return function(dispatch, getState) {
const state = getState();
const parmCd = parameterCd;
const requestKey = getTsRequestKey('current', 'custom', parmCd)(state);
- let fetchTimeZonePromise;
dispatch(Actions.setCurrentDateRange('custom'));
dispatch(Actions.addTimeSeriesLoading([requestKey]));
- let fetchTimeSeriesPromise = getTimeSeries({sites: [site], params: [parmCd], period: period}).then(
+ return getTimeSeries({sites: [site], params: [parmCd], period: period}).then(
series => {
const collection = normalize(series, requestKey);
- if (fetchTimeZone) {
- const location = collection.sourceInfo ? collection.sourceInfo[site].geoLocation.geogLocation : {};
- fetchTimeZonePromise = dispatch(Actions.retrieveLocationTimeZone(location.latitude || null, location.longitude || null));
- } else {
- fetchTimeZonePromise = Promise.resolve();
- }
const variables = Object.values(collection.variables);
const variableToDraw = find(variables, v => v.variableCode.value === parameterCd);
dispatch(Actions.setCurrentVariable(variableToDraw.variableCode.variableID));
@@ -177,11 +160,10 @@ export const Actions = {
dispatch(Actions.removeTimeSeriesLoading([requestKey]));
}
);
- return Promise.all(fetchTimeZonePromise, fetchTimeSeriesPromise);
};
},
- retrieveCustomTimeSeries(site, startTime, endTime, parmCd, fetchTimeZone=false) {
+ retrieveCustomTimeSeries(site, startTime, endTime, parmCd) {
return function(dispatch, getState) {
const state = getState();
const thisParmCd = parmCd ? parmCd : getCurrentParmCd(state);
@@ -190,8 +172,7 @@ export const Actions = {
dispatch(Actions.setCustomDateRange(startTime, endTime));
dispatch(Actions.addTimeSeriesLoading([requestKey]));
dispatch(Actions.toggleTimeSeries('median', false));
- let fetchTimeZonePromise;
- let fetchTimeSeriesPromise = getTimeSeries({
+ return getTimeSeries({
sites: [site],
params: [thisParmCd],
startDate: startTime,
@@ -199,12 +180,6 @@ export const Actions = {
}).then(
series => {
const collection = normalize(series, requestKey);
- if (fetchTimeZone) {
- const location = collection.sourceInfo ? collection.sourceInfo[site].geoLocation.geogLocation : {};
- fetchTimeZonePromise = dispatch(Actions.retrieveLocationTimeZone(location.latitude || null, location.longitude || null));
- } else {
- fetchTimeZonePromise = Promise.resolve();
- }
dispatch(Actions.addSeriesCollection(requestKey, collection));
dispatch(Actions.removeTimeSeriesLoading([requestKey]));
},
@@ -214,7 +189,6 @@ export const Actions = {
dispatch(Actions.removeTimeSeriesLoading([requestKey]));
}
);
- return Promise.all(fetchTimeZonePromise, fetchTimeSeriesPromise);
};
},
retrieveExtendedTimeSeries(site, period, paramCd=null) {
@@ -460,14 +434,14 @@ export const Actions = {
return dispatch(Actions.retrieveCustomTimeSeries(siteno, startTime, endTime));
};
},
- retrieveDataForDateRange(siteno, startTimeStr, endTimeStr, parmCd, fetchTimeZone=false) {
+ retrieveDataForDateRange(siteno, startTimeStr, endTimeStr, parmCd) {
return function(dispatch, getState) {
const state = getState();
const locationIanaTimeZone = getIanaTimeZone(state);
const startTime = new DateTime.fromISO(startTimeStr,{zone: locationIanaTimeZone}).toMillis();
const endTime = new DateTime.fromISO(endTimeStr, {zone: locationIanaTimeZone}).toMillis();
- dispatch(Actions.retrieveCustomTimeSeries(siteno, startTime, endTime, parmCd, fetchTimeZone));
+ dispatch(Actions.retrieveCustomTimeSeries(siteno, startTime, endTime, parmCd));
};
},
setGageHeightFromStageIndex(index) {
diff --git a/assets/src/scripts/url-params.js b/assets/src/scripts/url-params.js
index fa59e8391..d778aa082 100644
--- a/assets/src/scripts/url-params.js
+++ b/assets/src/scripts/url-params.js
@@ -2,7 +2,7 @@ import {DateTime} from 'luxon';
import {createStructuredSelector} from 'reselect';
import {listen} from './lib/d3-redux';
-import {getCurrentMethodID, getMethods, getCurrentDateRange, getCustomTimeRange, getCurrentParmCd,
+import {getCurrentMethodID, getAllMethodsForCurrentVariable, getCurrentDateRange, getCustomTimeRange, getCurrentParmCd,
getIanaTimeZone} from './selectors/time-series-selector';
/*
@@ -18,7 +18,7 @@ export const renderTimeSeriesUrlParams = function(store) {
listen(store, createStructuredSelector({
parameterCode: getCurrentParmCd,
methodId: getCurrentMethodID,
- methods: getMethods,
+ methods: getAllMethodsForCurrentVariable,
compare: (state) => state.timeSeriesState.showSeries.compare,
currentDateRange: getCurrentDateRange,
customTimeRange: getCustomTimeRange,
diff --git a/assets/tests/scripts/global-config.js b/assets/tests/scripts/global-config.js
index 6fb291e6f..b8fe1b79f 100644
--- a/assets/tests/scripts/global-config.js
+++ b/assets/tests/scripts/global-config.js
@@ -1,11 +1,7 @@
var CONFIG = {
TIMESERIES_AUDIO_ENABLED: true,
MULTIPLE_TIME_SERIES_METADATA_SELECTOR_ENABLED: true,
- FIM_GIS_ENDPOINT: 'https:/fakelegendservice.com',
- siteLocation: {
- latitude: 43.5,
- longitude: -100.0
- }
+ FIM_GIS_ENDPOINT: 'https:/fakelegendservice.com'
};
var mockOscillator = function() {
diff --git a/graph-server/package-lock.json b/graph-server/package-lock.json
index 707f3fa55..5dd7a8b81 100644
--- a/graph-server/package-lock.json
+++ b/graph-server/package-lock.json
@@ -333,6 +333,14 @@
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
"dev": true
},
+ "axios": {
+ "version": "0.19.2",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+ "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+ "requires": {
+ "follow-redirects": "1.5.10"
+ }
+ },
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1012,6 +1020,24 @@
"path-exists": "^4.0.0"
}
},
+ "follow-redirects": {
+ "version": "1.5.10",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+ "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+ "requires": {
+ "debug": "=3.1.0"
+ },
+ "dependencies": {
+ "debug": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+ "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+ "requires": {
+ "ms": "2.0.0"
+ }
+ }
+ }
+ },
"foreground-child": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
diff --git a/graph-server/package.json b/graph-server/package.json
index d42c6e071..c632a251e 100644
--- a/graph-server/package.json
+++ b/graph-server/package.json
@@ -22,6 +22,7 @@
},
"homepage": "https://github.com/usgs/waterdataui#readme",
"dependencies": {
+ "axios": "^0.19.2",
"body-parser": "1.19.0",
"express": "4.17.1",
"express-cache-headers": "0.1.4",
diff --git a/graph-server/src/renderer/index.js b/graph-server/src/renderer/index.js
index 46a7a8ad4..290d8f929 100644
--- a/graph-server/src/renderer/index.js
+++ b/graph-server/src/renderer/index.js
@@ -1,61 +1,74 @@
+const axios = require('axios');
+
const renderPNG = require('./render-png');
const SERVICE_ROOT = process.env.SERVICE_ROOT || 'https://waterservices.usgs.gov/nwis';
const PAST_SERVICE_ROOT = process.env.PAST_SERVICE_ROOT || 'https://nwis.waterservices.usgs.gov/nwis';
const STATIC_ROOT = process.env.STATIC_ROOT || 'https://waterdata.usgs.gov/nwisweb/wsgi/static';
+const OGC_SITE_ENDPOINT = process.env.OGC_SITE_ENDPOINT || 'https://labs.waterdata.usgs.gov/api/ogcAPI/collections/monitoring-locations/items/'
const renderToResponse = function (res, {siteID, parameterCode, compare, period, startDT, endDT, showMLName}) {
console.log(`Using static root ${STATIC_ROOT}`);
- const componentOptions = {
- siteno: siteID,
- parameterCode: parameterCode,
- compare: compare,
- period: period,
- startDT: startDT,
- endDT: endDT,
- cursorOffset: false,
- showOnlyGraph : true,
- showMLName: showMLName
- };
- renderPNG({
- pageURL: 'http://wdfn-graph-server',
- pageContent: `<!DOCTYPE html>
- <html lang="en">
- <head>
- <script>
- var CONFIG = {
- SERVICE_ROOT: '${SERVICE_ROOT}',
- PAST_SERVICE_ROOT: '${PAST_SERVICE_ROOT}',
- MULTIPLE_TIME_SERIES_METADATA_SELECTOR_ENABLED: false,
- STATIC_URL: '${STATIC_ROOT}'
- };
- </script>
- <link rel="stylesheet" href="${STATIC_ROOT}/main.css">
- <script src="${STATIC_ROOT}/bundle.js"></script>
- </head>
- <body>
- <div class="wdfn-component" data-component="hydrograph" data-options='${JSON.stringify(componentOptions)}'>
- <div class="graph-container"></div>
- </div>
- </body>
- </html>`,
- viewportSize: {
- width: 1200,
- height: 1200
- },
- componentOptions
- }).then(function (buffer) {
- res.setHeader('Content-Type', 'image/png');
- res.write(buffer, 'binary');
- res.end(null, 'binary');
- }).catch(function (error) {
- console.log(error);
- res.status(500);
- res.send({
- error: error
+ console.log(`Retrieving site id with ${OGC_SITE_ENDPOINT}USGS-${siteID}?f=json`);
+ axios.get(`${OGC_SITE_ENDPOINT}USGS-${siteID}?f=json`)
+ .then((resp) => {
+ const componentOptions = {
+ siteno: siteID,
+ latitude: resp.data.geometry.coordinates[1],
+ longitude: resp.data.geometry.coordinates[0],
+ parameterCode: parameterCode,
+ compare: compare,
+ period: period,
+ startDT: startDT,
+ endDT: endDT,
+ cursorOffset: false,
+ showOnlyGraph: true,
+ showMLName: showMLName
+ };
+
+ renderPNG({
+ pageURL: 'http://wdfn-graph-server',
+ pageContent: `<!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <script>
+ var CONFIG = {
+ SERVICE_ROOT: '${SERVICE_ROOT}',
+ PAST_SERVICE_ROOT: '${PAST_SERVICE_ROOT}',
+ MULTIPLE_TIME_SERIES_METADATA_SELECTOR_ENABLED: false,
+ STATIC_URL: '${STATIC_ROOT}'
+ };
+ </script>
+ <link rel="stylesheet" href="${STATIC_ROOT}/main.css">
+ <script src="${STATIC_ROOT}/bundle.js"></script>
+ </head>
+ <body>
+ <div class="wdfn-component" data-component="hydrograph" data-options='${JSON.stringify(componentOptions)}'>
+ <div class="graph-container"></div>
+ </div>
+ </body>
+ </html>`,
+ viewportSize: {
+ width: 1200,
+ height: 1200
+ },
+ componentOptions
+ }).then(function (buffer) {
+ res.setHeader('Content-Type', 'image/png');
+ res.write(buffer, 'binary');
+ res.end(null, 'binary');
+ }).catch(function (error) {
+ console.log(error);
+ res.status(500);
+ res.send({
+ error: error
+ });
+ });
+ })
+ .catch((error) => {
+ console.log(`Failed to fetch site metadata: ${error}`);
});
- });
};
diff --git a/wdfn-server/waterdata/templates/macros/components.html b/wdfn-server/waterdata/templates/macros/components.html
index 0f002d75c..c76e531b2 100644
--- a/wdfn-server/waterdata/templates/macros/components.html
+++ b/wdfn-server/waterdata/templates/macros/components.html
@@ -1,5 +1,5 @@
-{% macro TimeSeriesComponent(site_no) -%}
- <div class="wdfn-component" data-component="hydrograph" data-siteno="{{ site_no }}">
+{% macro TimeSeriesComponent(site_no, latitude, longitude) -%}
+ <div class="wdfn-component" data-component="hydrograph" data-siteno="{{ site_no }}" data-latitude="{{ latitude }}" data-longitude="{{ longitude }}">
<div class="loading-indicator-container"></div>
<div class="graph-container"></div>
<div class="select-time-series-container"></div>
diff --git a/wdfn-server/waterdata/templates/monitoring_location.html b/wdfn-server/waterdata/templates/monitoring_location.html
index c5457c8f5..6a56006d8 100644
--- a/wdfn-server/waterdata/templates/monitoring_location.html
+++ b/wdfn-server/waterdata/templates/monitoring_location.html
@@ -28,14 +28,6 @@
{{ 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' %}
@@ -77,7 +69,7 @@
<p id="site-description">{{ components.Description(stations[0].site_no, location_with_values, parm_grp_summary) }}</p>
</div>
- {{ components.TimeSeriesComponent(stations[0].site_no) }}
+ {{ components.TimeSeriesComponent(stations[0].site_no, stations[0].dec_lat_va, stations[0].dec_long_va) }}
{% if monitoring_camera.exists %}
<div class="usa-accordion" style="margin-top:1em;">
--
GitLab