Added code to set parameters in the url.

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);
             }
         }
     });

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));
     }
 

assets/src/scripts/url-params.js

+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()}`;
+    });
+};