From b30d08ba7bbe7d4698c9559bf7beca6a262274bf Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Tue, 25 Feb 2020 11:40:35 -0600
Subject: [PATCH] Added code to set parameters in the url.
---
.../scripts/components/hydrograph/index.js | 6 ++-
assets/src/scripts/index.js | 17 +++----
assets/src/scripts/url-params.js | 48 +++++++++++++++++++
3 files changed, 61 insertions(+), 10 deletions(-)
create mode 100644 assets/src/scripts/url-params.js
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index b02ac0cfd..ddf4f300f 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -8,9 +8,9 @@ import {createStructuredSelector} from 'reselect';
import config from '../../config';
import {drawWarningAlert, drawInfoAlert} from '../../d3-rendering/alerts';
import {link} from '../../lib/d3-redux';
-import {isLoadingTS, hasAnyTimeSeries, getTimeSeries, getCurrentParmCd,
- getVariables} from '../../selectors/time-series-selector';
+import {hasAnyTimeSeries, getCurrentParmCd, getVariables} from '../../selectors/time-series-selector';
import {Actions} from '../../store';
+import {renderTimeSeriesUrlParams} from '../../url-params';
import {cursorSlider} from './cursor';
import {drawDateRangeControls} from './date-controls';
@@ -146,6 +146,8 @@ export const attachToNode = function (store,
}), store));
nodeElem.select('.provisional-data-alert')
.attr('hidden', null);
+
+ renderTimeSeriesUrlParams(store);
}
}
});
diff --git a/assets/src/scripts/index.js b/assets/src/scripts/index.js
index 8826d34eb..d9a383965 100644
--- a/assets/src/scripts/index.js
+++ b/assets/src/scripts/index.js
@@ -3,15 +3,16 @@ import './polyfills';
import wdfnviz from 'wdfn-viz';
// Load misc Javascript helpers for general page interactivity.
-import { register } from './helpers';
+import {register} from './helpers';
register();
-import { configureStore } from './store';
+import {configureStore} from './store';
+import {getParamString} from './url-params';
-import { attachToNode as EmbedComponent } from './components/embed';
-import { attachToNode as DailyValueHydrographComponent } from './components/dailyValueHydrograph';
-import { attachToNode as HydrographComponent } from './components/hydrograph';
-import { attachToNode as MapComponent } from './components/map';
+import {attachToNode as EmbedComponent} from './components/embed';
+import {attachToNode as DailyValueHydrographComponent} from './components/dailyValueHydrograph';
+import {attachToNode as HydrographComponent} from './components/hydrograph';
+import {attachToNode as MapComponent} from './components/map';
const COMPONENTS = {
embed: EmbedComponent,
@@ -20,6 +21,7 @@ const COMPONENTS = {
map: MapComponent
};
+
const load = function () {
let nodes = document.getElementsByClassName('wdfn-component');
let store = configureStore({
@@ -31,8 +33,7 @@ const load = function () {
// If options is specified on the node, expect it to be a JSON string.
// Otherwise, use the dataset attributes as the component options.
const options = node.dataset.options ? JSON.parse(node.dataset.options) : node.dataset;
- let hash = window.location.hash;
- const hashOptions = hash.length ? Object.fromEntries(new window.URLSearchParams(hash.substring(1))) : {};
+ const hashOptions = Object.fromEntries(new window.URLSearchParams(getParamString()));
COMPONENTS[node.dataset.component](store, node, Object.assign({}, options, hashOptions));
}
diff --git a/assets/src/scripts/url-params.js b/assets/src/scripts/url-params.js
new file mode 100644
index 000000000..6ffe66073
--- /dev/null
+++ b/assets/src/scripts/url-params.js
@@ -0,0 +1,48 @@
+import {DateTime} from 'luxon';
+import {createStructuredSelector} from 'reselect';
+
+import {listen} from './lib/d3-redux';
+import {getCurrentMethodID, getMethods, getCurrentDateRange, getCustomTimeRange, getCurrentParmCd,
+ getIanaTimeZone} from './selectors/time-series-selector';
+
+export const getParamString = function() {
+ const hash = window.location.hash;
+ return hash.length ? hash.substring(1) : '';
+};
+
+export const renderTimeSeriesUrlParams = function(store) {
+// subscribe to selectors for setting url parameter state
+ listen(store, createStructuredSelector({
+ parameterCode: getCurrentParmCd,
+ methodId: getCurrentMethodID,
+ methods: getMethods,
+ compare: (state) => state.timeSeriesState.showSeries.compare,
+ currentDateRange: getCurrentDateRange,
+ customTimeRange: getCustomTimeRange,
+ timeZone: getIanaTimeZone
+ }), ({parameterCode, methodId, methods, compare, currentDateRange, customTimeRange, timeZone}) => {
+ let params = new window.URLSearchParams();
+ params.set('parameterCode', parameterCode);
+ if (Object.keys(methods).length > 1) {
+ params.set('timeSeriesId', methodId);
+ }
+ switch(currentDateRange) {
+ case 'P30D':
+ case 'P1Y':
+ params.set('period', currentDateRange);
+ break;
+ case 'custom':
+ params.set(
+ 'startDT',
+ DateTime.fromMillis(customTimeRange.startDT, {zone: timeZone}).toFormat('yyyy-LL-dd'));
+ params.set(
+ 'endDT',
+ DateTime.fromMillis(customTimeRange.endDT, {zone: timeZone}).toFormat('yyyy-LL-dd'));
+ }
+ if (compare) {
+ params.set('compare', true);
+ }
+
+ window.location.hash = `#${params.toString()}`;
+ });
+};
--
GitLab