compares to method description

assets/src/scripts/monitoring-location/components/hydrograph/index.js

@@ -13,12 +13,12 @@ import {renderTimeSeriesUrlParams} from 'ml/url-params';
 import {retrieveHydrographData} from 'ml/store/hydrograph-data';
 import {retrieveHydrographParameters} from 'ml/store/hydrograph-parameters';
 import {setSelectedParameterCode, setCompareDataVisibility, setSelectedTimeSpan,
-    setSelectedIVMethodID
+    setSelectedIVMethodID, setSelectedIVMethodDescription
 } from 'ml/store/hydrograph-state';
 
 import {Actions as floodDataActions} from 'ml/store/flood-inundation';
 
-import {getPreferredIVMethodID} from './selectors/time-series-data';
+import {getPreferredIVMethodID, getSelectedMethodDescription} from './selectors/time-series-data';
 
 import {showDataIndicators} from './data-indicator';
 import {drawDataTables} from './data-table';
@@ -113,8 +113,10 @@ export const attachToNode = function(store,
         // selectedIVMethodID should be set regardless of whether we are showing only the graph but the preferred method ID
         // can not be determined until the data is fetched so that is done here.
         const initialIVMethodID = timeSeriesId || getPreferredIVMethodID(store.getState());
+
         store.dispatch(setSelectedIVMethodID(initialIVMethodID));
 
+
         showDataIndicators(false, store);
         let graphContainer = nodeElem.select('.graph-container');
         graphContainer.call(drawTimeSeriesGraph, store, siteno, agencyCd, sitename, thisShowMLName, !thisShowOnlyGraph);

assets/src/scripts/monitoring-location/components/hydrograph/selectors/time-series-data.js

@@ -168,3 +168,21 @@ export const getPreferredIVMethodID = createSelector(
         return sortedMethods && sortedMethods.methods.length ? sortedMethods.methods[0].methodID : null;
     }
 );
+
+
+export const getSelectedMethodDescription = createSelector(
+    getIVData('primary'),
+    getSelectedIVMethodID,
+    (ivData, selectedMethodID) => {
+        if (!ivData || !Object.keys(ivData.values).length) {
+            return null;
+        }
+        return Object.values(ivData.values)
+            .map(methodValues => {
+                return {
+                    methodID: methodValues.method.methodID,
+                    methodDescription: methodValues.method.methodDescription.replace('[', '').replace(']', '')
+                };
+            }).filter(methodDescription => methodDescription.methodID === selectedMethodID)[0];
+    }
+);

assets/src/scripts/monitoring-location/components/hydrograph/threshold-lines.js

 import {line as d3Line} from 'd3-shape';
 
 
-export const drawThresholdLines = function(svg, {xscale, yscale, parameterInformation, thresholds}) {
-    thresholds = {
-        'operatingLimits': [
-            {
-                'parameterCode': '00065',
-                'methodDescription': 'Primary Stage',
-                'thresholdDetails': [
-                    {
-                        'name': 'Operational limit (minimum)',
-                        'referenceCode': 'Operational limit - low-Public',
-                        'referenceValue': 2.05
-                    },
-                    {
-                        'name': 'Operational limit (maximum)',
-                        'referenceCode': 'Operational limit - high-Public',
-                        'referenceValue': 2.11
-                    }
-                ]
-            }
-        ]
-    };
+export const drawThresholdLines = function(svg, {xscale, yscale, parameterInformation, selectedMethodDescription, thresholds}) {
+    // thresholds = {
+    //     'operatingLimits': [
+    //         {
+    //             'parameterCode': '00065',
+    //             'methodDescription': '[High-flow backup abv 6.25 ft]',
+    //             'thresholdDetails': [
+    //                 {
+    //                     'name': 'Operational limit (minimum)',
+    //                     'referenceCode': 'Operational limit - low-Public',
+    //                     'referenceValue': 6.23
+    //                 },
+    //                 {
+    //                     'name': 'Operational limit (maximum)',
+    //                     'referenceCode': 'Operational limit - high-Public',
+    //                     'referenceValue': 6.25
+    //                 }
+    //             ]
+    //         }
+    //     ]
+    // };
+
+    console.log('in draw thresholds local values ', `parameter: ${parameterInformation.parameterCode}, method description: ${selectedMethodDescription.methodDescription}`)
 
     svg.select('#threshold-lines').remove();
     const container = svg.append('g')
@@ -36,9 +38,14 @@ export const drawThresholdLines = function(svg, {xscale, yscale, parameterInform
     const [yStart, yEnd] = yscale.domain();
     
     thresholds.operatingLimits.forEach(limitSet => {
-        if (parameterInformation !== null && limitSet.parameterCode === parameterInformation.parameterCode) {
+        console.log('limit set from API', limitSet)
+        if (
+            parameterInformation !== null &&
+            limitSet.parameterCode === parameterInformation.parameterCode &&
+            limitSet.methodDescription === selectedMethodDescription.methodDescription
+        ) {
+            console.log('got match ')
             limitSet.thresholdDetails.forEach(limit => {
-
                     const referenceCodeClass = limit.referenceCode.split('Operational ')[1].toLowerCase().split(' ').join('');
                     const group = container.append('g');
                     const yRange = yscale(limit.referenceValue);

assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js

@@ -19,7 +19,7 @@ import {getFloodLevelData} from './selectors/flood-level-data';
 import {getIVDataSegments, HASH_ID} from './selectors/iv-data';
 import {getMainLayout} from './selectors/layout';
 import {getMainXScale, getMainYScale} from './selectors/scales';
-import {getTitle, getDescription, isVisible} from './selectors/time-series-data';
+import {getTitle, getDescription, isVisible, getSelectedMethodDescription} from './selectors/time-series-data';
 
 import {drawGroundwaterLevels} from './discrete-data';
 import {drawFloodLevelLines} from './flood-level-lines';
@@ -226,6 +226,7 @@ export const drawTimeSeriesGraph = function(elem, store, siteNo, agencyCode, sit
             xscale: getMainXScale('current'),
             yscale: getMainYScale,
             parameterInformation: getPrimaryParameter,
+            selectedMethodDescription: getSelectedMethodDescription,
             thresholds: getThresholds
         })));
 

assets/src/scripts/monitoring-location/store/hydrograph-state.js

@@ -4,6 +4,7 @@ export const INITIAL_STATE = {
     selectedTimeSpan: 'P7D',
     selectedParameterCode: null,
     selectedIVMethodID: null,
+    selectedIVMethodDescription: null,
     graphCursorOffset: null,
     graphBrushOffset: null
 };
@@ -57,6 +58,23 @@ export const setSelectedIVMethodID = function(methodID) {
     };
 };
 
+/*
+ * Synchronous action to set the selected method description (which, in combination with the parameter code, site ID,
+ * and agency code) can uniquely identify a IV time series).
+ * Some parameter codes have more than one IV time series. The Sensor Things API uses a combination of the
+ * parameter code and method description, site ID, and agency code to differentiate between them.
+ * @param {String} methodDescription - this is a text description. This description is not unique between time series,
+ * however no parameter code at any monitoring location will have two methods with the same description.
+ * @return {Object} - Redux action
+ */
+export const setSelectedIVMethodDescription = function(methodDescription) {
+    console.log('set ', methodDescription)
+    return {
+        type: 'SET_SELECTED_IV_METHOD_DESCRIPTION',
+        methodDescription
+    };
+};
+
 /*
  * Synchronous action sets the time span of the hydrograph.
  * @param {String or Object} timeSpan - Can either be a String representing an ISO8601 Duration or an
@@ -133,6 +151,12 @@ export const hydrographStateReducer = function(hydrographState=INITIAL_STATE, ac
                 selectedIVMethodID: action.methodID
             };
 
+        case 'SET_SELECTED_IV_METHOD_DESCRIPTION':
+            return {
+                ...hydrographState,
+                selectedIVMethodDescription: action.methodDescription
+            };
+
         case 'SET_SELECTED_TIME_SPAN':
             if (typeof action.timeSpan === 'string') {
                 return {