diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 4cc00bd003ae6666f7788627c76a73faee223dc3..235c02962c8df982d7096529713374dcfd0633bc 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -22,7 +22,7 @@ import { lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, MASK
getCurrentVariableMedianStatPoints } from './drawing-data';
import { CIRCLE_RADIUS_SINGLE_PT, SPARK_LINE_DIM, layoutSelector } from './layout';
import { drawSimpleLegend, legendMarkerRowsSelector } from './legend';
-import { drawMethodPicker } from './method-picker'
+import { drawMethodPicker } from './method-picker';
import { plotSeriesSelectTable, availableTimeSeriesSelector } from './parameters';
import { xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector } from './scales';
import { allTimeSeriesSelector, isVisibleSelector, titleSelector, descriptionSelector,
diff --git a/assets/src/scripts/components/hydrograph/method-picker.js b/assets/src/scripts/components/hydrograph/method-picker.js
index 072e5693d10602e0d8ae729b2d8cd6273e11f68e..c8b1b389189e09efb93065c0c780b2d6401473a1 100644
--- a/assets/src/scripts/components/hydrograph/method-picker.js
+++ b/assets/src/scripts/components/hydrograph/method-picker.js
@@ -2,8 +2,10 @@
* Pick list for methods module
*/
-import{ link } from '../../lib/redux';
+import { select } from 'd3-selection';
+import{ dispatch, link } from '../../lib/redux';
+import { Actions } from '../../store';
import { getAllMethodsForCurrentVariable } from './time-series';
export const drawMethodPicker = function(elem) {
@@ -17,13 +19,21 @@ export const drawMethodPicker = function(elem) {
pickerContainer.append('select')
.attr('class', 'usa-select')
.attr('id', 'method-picker')
+ .on('change', dispatch(function() {
+ console.log('Setting current method id ' + select(this).property('value'));
+ return Actions.setCurrentMethodID(parseInt(select(this).property('value')));
+ }))
.call(link(function(elem, methods) {
elem.selectAll('option').remove();
methods.forEach((method) => {
elem.append('option')
- .attr('value', method.methodId)
- .text(method.methodDescription ? `${method.methodDescription} (${method.methodID})` : method.methodID);
+ .text(method.methodDescription ? `${method.methodDescription} (${method.methodID})` : method.methodID)
+ .node().value = method.methodID;
});
+ if (methods.length) {
+ console.log('setting select value to ' + methods[0].methodID);
+ elem.dispatch('change');
+ }
}, getAllMethodsForCurrentVariable));
};
diff --git a/assets/src/scripts/components/hydrograph/method-picker.spec.js b/assets/src/scripts/components/hydrograph/method-picker.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..9f66450d40506c74a370bc3383942624bbc85ca1
--- /dev/null
+++ b/assets/src/scripts/components/hydrograph/method-picker.spec.js
@@ -0,0 +1,81 @@
+import { select } from 'd3-selection';
+
+import { provide } from '../../lib/redux';
+import { configureStore } from '../../store';
+
+import { drawMethodPicker } from './method-picker';
+
+describe('method-picker', () => {
+
+ describe('drawMethodPicker', () => {
+ const DATA = [12, 13, 14, 15, 16].map(hour => {
+ return {
+ dateTime: new Date(`2018-01-03T${hour}:00:00.000Z`).getTime(),
+ qualifiers: ['P'],
+ value: hour
+ };
+ });
+
+ const TEST_STATE = {
+ series: {
+ timeSeries: {
+ '00010:current': {
+ points: DATA,
+ tsKey: 'current:P7D',
+ variable: '00010id',
+ method: 69930
+ },
+ '00010:compare': {
+ points: DATA,
+ tsKey: 'compare:P7D',
+ variable: '00010id',
+ method: 69931
+ }
+ },
+ variables: {
+ '00010id': {
+ oid: '00010id',
+ variableCode: {
+ value: '00010'
+ },
+ unit: {
+ unitCode: 'deg C'
+ }
+ }
+ },
+ methods: {
+ 69930: {
+ methodDescription: 'Description 1',
+ methodID: 69930
+ },
+ 69931: {
+ methodDescription: 'Description 2',
+ methodID: 69931
+ }
+ }
+ },
+ timeSeriesState: {
+ currentVariableID: '00010id'
+ }
+ };
+
+ let div;
+ beforeEach(() => {
+ div = select('body').append('div');
+ });
+
+ afterEach(() => {
+ div.remove();
+ });
+
+ let store = configureStore(TEST_STATE);
+
+ it('Creates a picker and sets the currentMethodID', () => {
+ div.call(provide(store))
+ .call(drawMethodPicker);
+
+ expect(div.select('select').property('value')).toEqual('69930');
+ expect(store.getState().timeSeriesState.currentMethodID).toEqual(69930);
+ });
+ });
+});
diff --git a/assets/src/scripts/index.spec.js b/assets/src/scripts/index.spec.js
index a9edd2e7b949f52f5ba88d07876b8ade172c40f9..3be7cf1b941f2435250b1ed1be9b1a71dc015d1f 100644
--- a/assets/src/scripts/index.spec.js
+++ b/assets/src/scripts/index.spec.js
@@ -21,6 +21,7 @@ import './components/hydrograph/index.spec';
import './components/hydrograph/layout.spec';
import './components/hydrograph/legend.spec';
import './components/hydrograph/markers.spec';
+import './components/hydrograph/method-picker.spec';
import './components/hydrograph/parameters.spec';
import './components/hydrograph/scales.spec';
import './components/hydrograph/time-series.spec';
diff --git a/assets/src/scripts/selectors/time-series-selector.js b/assets/src/scripts/selectors/time-series-selector.js
index 87f43c0a6db2a80b069a6228543dafbe1fd01077..992eef86016463f7737ed6ba438b4ce52eb97dfb 100644
--- a/assets/src/scripts/selectors/time-series-selector.js
+++ b/assets/src/scripts/selectors/time-series-selector.js
@@ -14,6 +14,8 @@ export const getRequests = state => state.series.requests || {};
export const getCurrentVariableID = state => state.timeSeriesState.currentVariableID;
+export const getCurrentMethodID = state => state.timeSeriesState.currentMethodID;
+
export const getCurrentDateRange = state => state.timeSeriesState.currentDateRange;
export const getLoadingTsKeys = state => state.timeSeriesState.loadingTSKeys;
diff --git a/assets/src/scripts/store/index.js b/assets/src/scripts/store/index.js
index 77feea8ee9a1d602df77f5b2b1e17bd2ea35a04d..cff39e31ef0403f1ecfb48c328c9cb74e100235c 100644
--- a/assets/src/scripts/store/index.js
+++ b/assets/src/scripts/store/index.js
@@ -323,6 +323,12 @@ export const Actions = {
variableID
};
},
+ setCurrentMethodID(methodID) {
+ return {
+ type: 'SET_CURRENT_METHOD_ID',
+ methodID
+ };
+ },
setCurrentDateRange(period) {
return {
type: 'SET_CURRENT_DATE_RANGE',
diff --git a/assets/src/scripts/store/time-series-state-reducer.js b/assets/src/scripts/store/time-series-state-reducer.js
index 340a1679d0b6a20680aab123bbca4545994fe9b2..4c383b300fe9d00cbc821765fc942ab81b21134c 100644
--- a/assets/src/scripts/store/time-series-state-reducer.js
+++ b/assets/src/scripts/store/time-series-state-reducer.js
@@ -20,6 +20,13 @@ const setCurrentVariable = function(timeSeriesState, action) {
};
};
+const setCurrentMethodID = function(timeSeriesState, action) {
+ return {
+ ...timeSeriesState,
+ currentMethodID: action.methodID
+ };
+};
+
const setCurrentDateRange = function(timeSeriesState, action) {
return {
...timeSeriesState,
@@ -76,6 +83,7 @@ export const timeSeriesStateReducer = function(timeSeriesState={}, action) {
switch (action.type) {
case 'TOGGLE_TIME_SERIES' : return toggleTimeSeries(timeSeriesState, action);
case 'SET_CURRENT_VARIABLE': return setCurrentVariable(timeSeriesState, action);
+ case 'SET_CURRENT_METHOD_ID': return setCurrentMethodID(timeSeriesState, action);
case 'SET_CURRENT_DATE_RANGE': return setCurrentDateRange(timeSeriesState, action);
case 'SET_CURSOR_OFFSET': return setCursorOffset(timeSeriesState, action);
case 'TIME_SERIES_PLAY_ON': return timeSeriesPlayOn(timeSeriesState, action);