diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 5315d48f15a1fba242539128a79d6a4158ae358b..d7d224ee5b59ff3d25d68b9b9433bc373e9a1b07 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -31,7 +31,7 @@ import {retrieveHydrographData} from 'ml/store/hydrograph-data';
import {drawGraphBrush} from './graph-brush';
//import {drawGraphControls} from './graph-controls';
import {drawTimeSeriesLegend} from './legend';
-//import {drawMethodPicker} from './method-picker';
+import {drawMethodPicker} from './method-picker';
//import {plotSeriesSelectTable} from './parameters';
import {drawTimeSeriesGraph} from './time-series-graph';
import {drawTooltipCursorSlider} from './tooltip';
@@ -63,13 +63,13 @@ export const attachToNode = function(store,
period,
startDT,
endDT,
- timeSeriesId, // This must be converted to an integer
+ timeSeriesId,
showOnlyGraph = false,
showMLName = false
} = {}) {
const nodeElem = select(node);
- if (!siteno && !config.ivPeriodOfRecord && !config.gwPeriodOfRecord) {
- select(node).call(drawWarningAlert, {title: 'Hydrograph Alert', body: 'No IV or field visit data is available.'});
+ if (!config.ivPeriodOfRecord && !config.gwPeriodOfRecord) {
+ select(node).select('.graph-container').call(drawInfoAlert, {title: 'Hydrograph Alert', body: 'No IV or field visit data is available.'});
return;
}
@@ -95,34 +95,10 @@ export const attachToNode = function(store,
.select('.loading-indicator-container')
.call(drawLoadingIndicator, {showLoadingIndicator: false, sizeClass: 'fa-3x'});
- /* TODO: add this back in
- //Update time series state
- if (parameterCode) {
- const isThisParamCode = function(variable) {
- return variable.variableCode.value === parameterCode;
- };
- const thisVariable = Object.values(getVariables(store.getState())).find(isThisParamCode);
- if (thisVariable) {
- store.dispatch(ivTimeSeriesStateActions.setCurrentIVVariable(thisVariable.oid));
- }
- }
- if (!getCurrentVariableID(store.getState())) {
- //Sort variables and use the first one as the current variable
- const sortedVars = sortedParameters(getVariables(store.getState()));
- if (sortedVars.length) {
- store.dispatch(ivTimeSeriesStateActions.setCurrentIVVariable(sortedVars[0].oid));
- }
- }
- if (compare) {
- store.dispatch(ivTimeSeriesStateActions.setIVTimeSeriesVisibility('compare', true));
- }
- if (timeSeriesId) {
- store.dispatch(ivTimeSeriesStateActions.setCurrentIVMethodID(parseInt(timeSeriesId)));
- }
- */
- // Initial data has been fetched and initial state set. We can render the hydrograph elements
- // Set up rendering functions for the graph-container
+ // Initial data has been fetched. We can render the hydrograph elements
+ // Initialize method picker before rendering time series
let graphContainer = nodeElem.select('.graph-container')
+ .call(drawMethodPicker, store, timeSeriesId)
.call(drawTimeSeriesGraph, store, siteno, agencyCode, sitename, showMLName, !showOnlyGraph);
if (!showOnlyGraph) {
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.js b/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.js
index 9702905d2442d0f8c82e974bc805d8cfc2a650c5..eba088b5a4c4ffacd82cf30851d00e42e7d342ea 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/method-picker.js
@@ -7,12 +7,14 @@ import {createStructuredSelector} from 'reselect';
import{link} from 'ui/lib/d3-redux';
-import {getCurrentMethodID, getAllMethodsForCurrentVariable} from 'ml/selectors/time-series-selector';
-import {Actions} from 'ml/store/instantaneous-value-time-series-state';
+import {getPrimaryMethods} from 'ml/selectors/hydrograph-data-selector';
+import {getSelectedIVMethodID} from 'ml/selectors/hydrograph-state-selector';
+import {setSelectedIVMethodID} from 'ml/store/hydrograph-state';
-import { } from './selectors/time-series-data';
-
-export const drawMethodPicker = function(elem, store) {
+export const drawMethodPicker = function(elem, store, initialTimeSeriesId) {
+ if (initialTimeSeriesId) {
+ store.dispatch(setSelectedIVMethodID(initialTimeSeriesId));
+ }
const pickerContainer = elem.insert('div', ':nth-child(2)')
.attr('id', 'ts-method-select-container');
@@ -24,15 +26,20 @@ export const drawMethodPicker = function(elem, store) {
.attr('class', 'usa-select')
.attr('id', 'method-picker')
.on('change', function() {
- store.dispatch(Actions.setCurrentIVMethodID(parseInt(select(this).property('value'))));
+ store.dispatch(setSelectedIVMethodID(select(this).property('value')));
})
- .call(link(store, function(elem, {methods, currentMethodId}) {
- const currentMethodIdString = parseInt(currentMethodId);
+ .call(link(store, function(elem, {methods}) {
+ let selectedMethodID = getSelectedIVMethodID(store.getState());
elem.selectAll('option').remove();
+ if (methods.length &&
+ (!selectedMethodID || !methods.find(method => method.methodID === selectedMethodID))) {
+ // Set the selected method ID to the first one in the list
+ selectedMethodID = methods[0].methodID;
+ }
methods.forEach((method) => {
elem.append('option')
.text(method.methodDescription ? `${method.methodDescription}` : 'None')
- .attr('selected', currentMethodIdString === method.methodID ? true : null)
+ .attr('selected', method.methodID === selectedMethodID ? true : null)
.node().value = method.methodID;
});
pickerContainer.property('hidden', methods.length <= 1);
@@ -40,8 +47,7 @@ export const drawMethodPicker = function(elem, store) {
elem.dispatch('change');
}
}, createStructuredSelector({
- methods: getAllMethodsForCurrentVariable,
- currentMethodId: getCurrentMethodID
+ methods: getPrimaryMethods
})));
};
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/time-series-data.js b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/time-series-data.js
index 69fc295cdf134f27beed8728e49ae53bf6882fb9..94ce2d816974c41c471cd029ddc9b5ace1dc47ce 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/selectors/time-series-data.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/selectors/time-series-data.js
@@ -59,8 +59,11 @@ export const getTitle = createSelector(
getPrimaryMethods,
(parameter, methodID, methods) => {
let title = parameter ? parameter.name : '';
- if (methodID && methods && methods[methodID].methodDescription) {
- title = `${title}, ${methods[methodID].methodDescription}`;
+ if (methodID && methods.length) {
+ const thisMethod = methods.find(method => method.methodID === methodID);
+ if (thisMethod.methodDescription) {
+ title = `${title}, $${thisMethod.methodDescription}`;
+ }
}
return title;
}
diff --git a/assets/src/scripts/monitoring-location/store/hydrograph-data.js b/assets/src/scripts/monitoring-location/store/hydrograph-data.js
index 1c73e0c215d57b9b169aed641e0d4b5eea2a89fd..f5b31f8528814e3082a65cc154f3dfcb52697094 100644
--- a/assets/src/scripts/monitoring-location/store/hydrograph-data.js
+++ b/assets/src/scripts/monitoring-location/store/hydrograph-data.js
@@ -132,7 +132,10 @@ const retrieveIVData = function(siteno, dataKind, {parameterCode, period, startT
dateTime: DateTime.fromISO(point.dateTime).toMillis()
};
}),
- method: value.method[0]
+ method: {
+ ...value.method[0],
+ methodID: value.method[0].methodID.toString()
+ }
};
return valuesByMethodId;
}, {});
diff --git a/assets/src/scripts/monitoring-location/store/hydrograph-state.js b/assets/src/scripts/monitoring-location/store/hydrograph-state.js
index d4d0be0e121548f0bb5c3070bb11df852b378423..6e53e5d86306d0122fa2da9ce38ede5d755c22a0 100644
--- a/assets/src/scripts/monitoring-location/store/hydrograph-state.js
+++ b/assets/src/scripts/monitoring-location/store/hydrograph-state.js
@@ -4,7 +4,7 @@ export const INITIAL_STATE = {
selectedDateRange: 'P7D',
selectedCustomTimeRange: null,
selectedParameterCode: null,
- selectedIVMethodId: null,
+ selectedIVMethodID: null,
graphCursorOffset: null,
graphBrushOffset: null,
userInputsForTimeRange: {