From 7b11f8dfbc53558de0014f749845ccd65a70f708 Mon Sep 17 00:00:00 2001
From: Aaron Briggs <abriggs@contractor.usgs.gov>
Date: Mon, 5 Oct 2020 16:49:36 -0500
Subject: [PATCH] added start of refactored state for user inputs
---
.../components/hydrograph/index.js | 1 -
.../components/hydrograph/selectors/axes.js | 4 ++--
.../selectors/time-series-selector.js | 12 ++++++-----
.../selectors/time-series-selector.spec.js | 6 +++---
.../monitoring-location/store/index.js | 7 ++++++-
.../instantaneous-value-time-series-data.js | 4 ++--
...stantaneous-value-time-series-data.spec.js | 2 +-
.../instantaneous-value-time-series-state.js | 21 ++++++++++++++++++-
.../scripts/monitoring-location/url-params.js | 20 +++++++++---------
9 files changed, 51 insertions(+), 26 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 5ff49f346..47fb3251e 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -112,7 +112,6 @@ export const attachToNode = function (store,
store.dispatch(statisticsDataActions.retrieveMedianStatistics(siteno));
}
-
fetchDataPromise.then(() => {
// Hide the loading indicator
nodeElem
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js
index 1f00091c7..1cfbe8fc8 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/axes.js
@@ -3,7 +3,7 @@ import memoize from 'fast-memoize';
import {createSelector} from 'reselect';
import {generateTimeTicks} from '../../../../d3-rendering/tick-marks';
-import {getCurrentDateRangeKind, getCurrentParmCd} from '../../../selectors/time-series-selector';
+import {getCurrentDateRange, getCurrentParmCd} from '../../../selectors/time-series-selector';
import {convertCelsiusToFahrenheit, convertFahrenheitToCelsius} from '../../../../utils';
import {getYTickDetails} from './domain';
@@ -92,7 +92,7 @@ export const getAxes = memoize(kind => createSelector(
getYLabel,
getTsTimeZone,
getCurrentParmCd,
- getCurrentDateRangeKind,
+ getCurrentDateRange,
getSecondaryYLabel,
(xScale, yScale, secondaryYScale, yTickDetails, layout, plotYLabel, ianaTimeZone, parmCd, plotSecondaryYLabel) => {
return {
diff --git a/assets/src/scripts/monitoring-location/selectors/time-series-selector.js b/assets/src/scripts/monitoring-location/selectors/time-series-selector.js
index 33bc4bdf5..b2b67f287 100644
--- a/assets/src/scripts/monitoring-location/selectors/time-series-selector.js
+++ b/assets/src/scripts/monitoring-location/selectors/time-series-selector.js
@@ -25,11 +25,13 @@ export const getUserInputTimeRangeSelectionButton = state => state.ivTimeSeriesS
export const getUserInputCustomTimeRangeSelectionButton = state => state.ivTimeSeriesState.userInputCustomTimeRangeSelectionButton;
+export const getUserInputNumberOfDays = state => state.ivTimeSeriesState.userInputNumberOfDays;
+
export const getCurrentVariableID = state => state.ivTimeSeriesState.currentIVVariableID;
export const getCurrentMethodID = state => state.ivTimeSeriesState.currentIVMethodID;
-export const getCurrentDateRangeKind = (state) => {
+export const getCurrentDateRange = (state) => {
return state.ivTimeSeriesState.currentIVDateRange || null;
};
@@ -41,7 +43,7 @@ export const getCustomTimeRange = state => state.ivTimeSeriesState.customIVTimeR
export const getTimeSeries = state => state.ivTimeSeriesData.timeSeries ? state.ivTimeSeriesData.timeSeries : {};
-export const getUserInputNumberOfDays = state => state.ivTimeSeriesState.userInputNumberOfDays;
+
export const hasAnyTimeSeries = createSelector(
getTimeSeries,
@@ -100,10 +102,10 @@ export const getCurrentParmCd = createSelector(
* selected variable.
*/
export const getTsRequestKey = memoize((tsKey, period, parmCd) => createSelector(
- getCurrentDateRangeKind,
+ getCurrentDateRange,
getCurrentParmCd,
- (dateRangeKind, currentParmCd) => {
- const periodToUse = period ? period : dateRangeKind;
+ (dateRange, currentParmCd) => {
+ const periodToUse = period ? period : dateRange;
let result = `${tsKey}:${periodToUse}`;
if (periodToUse !== 'P7D') {
diff --git a/assets/src/scripts/monitoring-location/selectors/time-series-selector.spec.js b/assets/src/scripts/monitoring-location/selectors/time-series-selector.spec.js
index 1a92823f5..abcb10f47 100644
--- a/assets/src/scripts/monitoring-location/selectors/time-series-selector.spec.js
+++ b/assets/src/scripts/monitoring-location/selectors/time-series-selector.spec.js
@@ -3,7 +3,7 @@ import {
getSourceInfo,
getSiteCodes,
getCurrentVariableID,
- getCurrentDateRangeKind,
+ getCurrentDateRange,
getTimeSeries,
hasAnyTimeSeries,
getMonitoringLocationName,
@@ -505,9 +505,9 @@ describe('monitoring-location/selectors/time-series-selector', () => {
});
});
- describe('getCurrentDateRangeKind', () => {
+ describe('getCurrentDateRange', () => {
it('Return the current date range', () => {
- expect(getCurrentDateRangeKind({
+ expect(getCurrentDateRange({
ivTimeSeriesState: {
currentIVDateRange: 'P30D'
}
diff --git a/assets/src/scripts/monitoring-location/store/index.js b/assets/src/scripts/monitoring-location/store/index.js
index 7e9904e51..f5bcf82e3 100644
--- a/assets/src/scripts/monitoring-location/store/index.js
+++ b/assets/src/scripts/monitoring-location/store/index.js
@@ -62,9 +62,14 @@ export const configureStore = function (initialState) {
audiblePlayId: null,
loadingIVTSKeys: [],
ivGraphBrushOffset: null,
+ userInputs: {
+ userInputCustomTimeRangeSelectionButton: 'days-input',
+ userInputTimeRangeSelectionButton: 'P7D',
+ userInputNumberOfDays: ''
+ },
userInputCustomTimeRangeSelectionButton: 'days-input',
userInputTimeRangeSelectionButton: 'P7D',
- userInputNumberOfDays: null
+ userInputNumberOfDays: ''
},
dailyValueTimeSeriesState: {
cursorOffset: null
diff --git a/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-data.js b/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-data.js
index b357cb87b..b00de46eb 100644
--- a/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-data.js
+++ b/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-data.js
@@ -12,7 +12,7 @@ import {calcStartTime, sortedParameters} from '../../utils';
import {getPreviousYearTimeSeries, getTimeSeries} from '../../web-services/models';
import {
- getCurrentDateRangeKind,
+ getCurrentDateRange,
getCurrentParmCd, getCustomTimeRange, getRequestTimeRange,
getTimeSeriesCollectionIds,
getTsRequestKey,
@@ -345,7 +345,7 @@ const updateIVCurrentVariableAndRetrieveTimeSeries = function(siteno, variableID
return function(dispatch, getState) {
dispatch(ivTimeSeriesStateActions.setCurrentIVVariable(variableID));
const state = getState();
- const currentDateRange = getCurrentDateRangeKind(state);
+ const currentDateRange = getCurrentDateRange(state);
if (currentDateRange === 'custom') {
const timeRange = getCustomTimeRange(state);
diff --git a/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-data.spec.js b/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-data.spec.js
index 561dbb268..b8bde1962 100644
--- a/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-data.spec.js
+++ b/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-data.spec.js
@@ -29,7 +29,7 @@ describe('monitoring-location/store/instantaneous-value-time-series-data module'
}
},
ivTimeSeriesState: {
- currentDateRangeKind: 'P7D',
+ currentDateRange: 'P7D',
loadingIVTSKeys: []
}
},
diff --git a/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-state.js b/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-state.js
index a60e3dffd..b63284af3 100644
--- a/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-state.js
+++ b/assets/src/scripts/monitoring-location/store/instantaneous-value-time-series-state.js
@@ -45,7 +45,7 @@ const setCurrentIVMethodID = function(methodID) {
/*
* Synchronous action sets the date range kind of the IV data.
- * @param {String} dateRangeKind - represents an ISO 8601 Duration or "custom"
+ * @param {String} dateRange - represents an ISO 8601 Duration or "custom"
* @return {Object} - Redux action
*/
const setCurrentIVDateRange = function(dateRange) {
@@ -112,6 +112,15 @@ const setUserInputNumberOfDays = function(userInputNumberOfDays) {
};
};
+const setUserInputs = function(userInputTimeRangeSelectionButton, userInputCustomTimeRangeSelectionButton, userInputNumberOfDays) {
+ return {
+ type: 'SET_USER_INPUTS',
+ userInputTimeRangeSelectionButton,
+ userInputCustomTimeRangeSelectionButton,
+ userInputNumberOfDays
+ };
+};
+
/*
* Synchronous action sets the IV graph cursor offset - This is the difference
* in cursor position and graph start time, in milliseconds
@@ -288,6 +297,16 @@ export const ivTimeSeriesStateReducer = function(ivTimeSeriesState={}, action) {
userInputNumberOfDays: action.userInputNumberOfDays
};
+ case 'SET_USER_INPUTS':
+ return {
+ ...ivTimeSeriesState,
+ userInputs: {
+ userInputTimeRangeSelectionButton: action.userInputTimeRangeSelectionButton,
+ userInputCustomTimeRangeSelectionButton: action.userInputTimeRangeSelectionButton,
+ userInputNumberOfDays: action.userInputNumberOfDays
+ }
+ };
+
case 'SET_IV_GRAPH_CURSOR_OFFSET':
return {
...ivTimeSeriesState,
diff --git a/assets/src/scripts/monitoring-location/url-params.js b/assets/src/scripts/monitoring-location/url-params.js
index 6b219197b..32621fe5c 100644
--- a/assets/src/scripts/monitoring-location/url-params.js
+++ b/assets/src/scripts/monitoring-location/url-params.js
@@ -2,7 +2,7 @@ import {DateTime} from 'luxon';
import {createStructuredSelector} from 'reselect';
import {listen} from '../lib/d3-redux';
-import {getCurrentMethodID, getAllMethodsForCurrentVariable, getCurrentDateRangeKind, getCustomTimeRange, getCurrentParmCd}
+import {getCurrentMethodID, getAllMethodsForCurrentVariable, getCurrentDateRange, getCustomTimeRange, getCurrentParmCd}
from './selectors/time-series-selector';
import {getIanaTimeZone} from './selectors/time-zone-selector';
@@ -21,23 +21,23 @@ export const renderTimeSeriesUrlParams = function(store) {
methodId: getCurrentMethodID,
methods: getAllMethodsForCurrentVariable,
compare: (state) => state.ivTimeSeriesState.showIVTimeSeries.compare,
- currentDateRangeKind: getCurrentDateRangeKind,
+ currentDateRange: getCurrentDateRange,
customTimeRange: getCustomTimeRange,
timeZone: getIanaTimeZone
- }), ({parameterCode, methodId, methods, compare, currentDateRangeKind, customTimeRange, timeZone}) => {
+ }), ({parameterCode, methodId, methods, compare, currentDateRange, customTimeRange, timeZone}) => {
let params = new window.URLSearchParams();
- /* filter the 'currentDateRangeKind', which comes in one of two forms
+ /* filter the 'currentDateRange', which comes in one of two forms
* 'P{some number}{Day or Year code}' (like P30D or P1Y) or the word 'custom'.
* In this case, 'custom' is a selection not using the 'period query', such as start and end date calender dates.
* If the user selection is the default of 'P7D' or of the type 'custom', we will leave it as is.
* Otherwise, we will filter the code so it is generic and in the form of 'P'
* so that it will work for any arbitrary number of days in query parameters such as P20D.
*/
- const filteredCurrentDateRangeKind =
- currentDateRangeKind === 'P7D' ? 'P7D' :
- currentDateRangeKind === 'custom' ? currentDateRangeKind :
- currentDateRangeKind !== null ? currentDateRangeKind.substr(0, 1) : '';
+ const filteredCurrentDateRange =
+ currentDateRange === 'P7D' ? 'P7D' :
+ currentDateRange === 'custom' ? currentDateRange :
+ currentDateRange !== null ? currentDateRange.substr(0, 1) : '';
if (parameterCode) {
params.set('parameterCode', parameterCode);
@@ -47,11 +47,11 @@ export const renderTimeSeriesUrlParams = function(store) {
params.set('timeSeriesId', methodId);
}
- switch(filteredCurrentDateRangeKind) {
+ switch(filteredCurrentDateRange) {
case 'P7D':
break;
case 'P':
- params.set('period', currentDateRangeKind);
+ params.set('period', currentDateRange);
break;
case 'custom':
params.set(
--
GitLab