From 7f79c9cb006123a9cb921c9db582af9f0b35f168 Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Mon, 3 Jan 2022 16:30:27 -0600
Subject: [PATCH] Code needs to be seriously cleaned up and the radio buttons
are not getting set correctly.
---
.../daily-value-hydrograph/graph-controls.js | 99 ++++++++-----------
.../daily-value-hydrograph/index.js | 39 ++++----
.../daily-value-time-series-selector.js | 2 +-
.../templates/macros/components.html | 6 +-
.../templates/monitoring_location.html | 2 +-
5 files changed, 68 insertions(+), 80 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/graph-controls.js b/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/graph-controls.js
index 2691e9c19..e54c731ba 100644
--- a/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/graph-controls.js
+++ b/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/graph-controls.js
@@ -8,68 +8,55 @@ import {Actions} from 'ml/store/daily-value-time-series';
* @param {Object} elem - D3 selection
* @param {Object} store - Redux Store
*/
-const drawDVTimeSeriesSelection = function(ul, store) {
-
- const availTimeSeries = store.getState()
- .dailyValueTimeSeriesData.availableDVTimeSeries;
- const tsByParameterCode = _.groupBy(availTimeSeries, (ts) => {
+const drawDVTimeSeriesSelection = function(container, store, monitoringLocationId, initialParameterCode) {
+ const availableTimeSeries = store.getState().dailyValueTimeSeriesData.availableDVTimeSeries;
+ const tsByParameterCode = _.groupBy(availableTimeSeries, (ts) => {
return ts.parameterCode;
});
const availableParameterCodes = Object.keys(tsByParameterCode);
if (availableParameterCodes.length > 1) {
- let divSize = 30;
-
- ul.append('li')
- .text('Parameter Codes:');
-
- availableParameterCodes.forEach((key, idx) => {
- const paramCd = groupedTs[key][0].parameterCode;
- const ts_id = groupedTs[key][0].id.split('-')[2];
- const monitorLoc = `${groupedTs[key][0].id.split('-')[0]}-${groupedTs[key][0].id.split('-')[1]}`;
- const element = ul.append('li')
- .classed('usa-radio', true);
+ container.append('legend')
+ .attr('class', 'usa-legend')
+ .text('Parameter codes:');
- const input = element.append('input')
- .classed('usa-radio__input', true)
+ availableParameterCodes.forEach((parameterCode) => {
+ const inputId = `code-${parameterCode}-radio`;
+ const inputContainer = container.append('div')
+ .attr('class', 'usa-radio');
+ inputContainer.append('input')
+ .attr('class', 'usa-radio__input')
+ .attr('id', inputId)
.attr('type', 'radio')
- .attr('id', `code-${paramCd}-radio`)
- .attr('aria-labelledby', `code-${paramCd}-label`)
- .attr('ga-on', 'click')
- .attr('ga-event-category', 'DVSeriesGraph')
- .attr('ga-event-action', 'toggleParameterCode')
- .attr('name', 'dvParamCd');
-
- if (idx == 0) {
- input.attr('checked', 'checked');
- }
-
- input.on('click', function() {
- store.dispatch(Actions.retrieveDVTimeSeries(
- monitorLoc, ts_id
- )).then(function() {
- store.dispatch(Actions.setCurrentDVTimeSeriesIds(
- input.attr('data-00002'),
- input.attr('data-00003'),
- input.attr('data-00001')));
+ .attr('name', inputId)
+ .attr('value', parameterCode)
+ .attr('checked', initialParameterCode === parameterCode ? true: null)
+ .on('click', function() {
+ let min, max, mean = null;
+ tsByParameterCode[parameterCode]
+ .filter(ts => ['00001', '00002', '00003'].includes(ts.statisticCode))
+ .forEach(ts => {
+ store.dispatch(Actions.retrieveDVTimeSeries(monitoringLocationId, ts.id));
+ switch (ts.statisticCode) {
+ case '00001':
+ max = ts.id;
+ break;
+ case '00002':
+ min = ts.id;
+ break;
+ case '00003':
+ mean = ts.id;
+ break;
+ }
+ });
+ store.dispatch(Actions.setCurrentDVTimeSeriesIds(min, mean, max));
});
- });
+ inputContainer.append('label')
+ .attr('class', 'usa-radio__label')
+ .attr('for', inputId)
+ .text(parameterCode);
- element.append('label')
- .classed('usa-radio__label', true)
- .attr('id', `code-${paramCd}-label`)
- .attr('for', `code-${paramCd}-radio`)
- .text(`${paramCd}`);
-
- groupedTs[key].forEach((ts) => {
- element.select('input[type="radio"]')
- .attr(`data-${ts.statisticCode}`, ts_id);
- });
-
- divSize += 30;
});
-
- select('.dv-legend-container ').style('min-height', `${divSize}px`);
}
};
@@ -77,11 +64,11 @@ const drawDVTimeSeriesSelection = function(ul, store) {
* Create the parameter code toggle for the daily values time series graph.
* @param {Object} elem - D3 selection
* @param {Object} store - Redux Store
+ * @param {String} monitoringLocationId - Generally of form agency_cd-siteno
*/
-export const drawGraphControls = function(elem, store) {
- const tsSelectionContainer = elem.append('div')
+export const drawGraphControls = function(elem, store, monitoringLocationId, initialParameterCode) {
+ elem.append('div')
.attr('id', 'dv-parameter-code-toggle')
.classed('usa-fieldset', true)
-
- .call(drawDVTimeSeriesSelection, store);
+ .call(drawDVTimeSeriesSelection, store, monitoringLocationId, initialParameterCode);
};
diff --git a/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/index.js b/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/index.js
index 2ebac7e5c..e6a66fd59 100644
--- a/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/daily-value-hydrograph/index.js
@@ -22,19 +22,15 @@ const STATISTIC_CODES = {
};
/*
- * Returns the set of time series for a single parameter code. That code must
- * be in GROUND_WATER_LEVELS_PARM_CD and contain one or more STATISTIC_CODES. If more
- * than one parameter code has time series than the one with the most of the
- * desired statistics codes will be chosen.
- * @return Object - available time series object
+ * Returns the set of time series for the best parameter code.
+ * @return Array - of ts to use initially.
*/
-const getBestAvailableTimeSeriesToUse = function(availableTimeSeries) {
- const gwAvailableTimeSeries = availableTimeSeries
- .filter(ts => includes(GROUND_WATER_LEVELS_PARM_CD, ts.parameterCode))
- .filter(ts => includes(Object.values(STATISTIC_CODES), ts.statisticCode));
- let gwByParmCode = groupBy(gwAvailableTimeSeries, ts => ts.parameterCode);
- let bestParamToUse = Object.values(gwByParmCode).sort((a, b) => a.length - b.length);
- return bestParamToUse.length ? bestParamToUse[0] : [];
+const getInitialTimeSeriesToUse = function(availableTimeSeries) {
+ const bestTimeSeries = availableTimeSeries.filter(ts => ts.best);
+ const bestParameterCode = bestTimeSeries.length ? bestTimeSeries[0].parameterCode : availableTimeSeries[0].parameterCode
+
+ return availableTimeSeries
+ .filter(ts => ts.parameterCode === bestParameterCode && ['00001', '00002', '00003'].includes(ts.statisticCode));
};
/*
@@ -47,7 +43,8 @@ const getBestAvailableTimeSeriesToUse = function(availableTimeSeries) {
export const attachToNode = function(store,
node,
{
- siteno
+ siteno,
+ agencyCd
} = {}) {
const nodeElem = select(node);
if (!siteno) {
@@ -58,18 +55,19 @@ export const attachToNode = function(store,
return;
}
- const monitoringLocationId = `USGS-${siteno}`;
+ const monitoringLocationId = `${agencyCd}-${siteno}`;
const loadingIndicator = nodeElem.select('.loading-indicator-container')
.call(drawLoadingIndicator, {
showLoadingIndicator: true
});
const fetchAvailableDVTimeSeries = store.dispatch(Actions.retrieveAvailableDVTimeSeries(monitoringLocationId));
fetchAvailableDVTimeSeries.then(() => {
- const bestAvailableTimeSeries = getBestAvailableTimeSeriesToUse(getAvailableDVTimeSeries(store.getState()));
- if (bestAvailableTimeSeries.length) {
- const fetchDVTimeSeries = bestAvailableTimeSeries
- .map(availableTs => availableTs.id)
- .map(id => store.dispatch(Actions.retrieveDVTimeSeries(monitoringLocationId, id)));
+ const availableTimeSeries = getAvailableDVTimeSeries(store.getState());
+ if (availableTimeSeries.length) {
+ const initialTimeSeries = getInitialTimeSeriesToUse(availableTimeSeries);
+ const fetchDVTimeSeries =
+ initialTimeSeries
+ .map(ts => store.dispatch(Actions.retrieveDVTimeSeries(monitoringLocationId, ts.id)));
Promise.allSettled(fetchDVTimeSeries).then(() => {
let min, mean, max = null;
let allDVTimeSeries = getAllDVTimeSeries(store.getState());
@@ -83,13 +81,14 @@ export const attachToNode = function(store,
break;
case 'MAXIMUM':
max = tsId;
+ break;
}
});
store.dispatch(Actions.setCurrentDVTimeSeriesIds(min, mean, max));
loadingIndicator.call(drawLoadingIndicator, {showLoadingIndicator: false});
let graphContainer = nodeElem.select('.graph-container');
graphContainer
- .call(drawGraphControls, store)
+ .call(drawGraphControls, store, monitoringLocationId, initialTimeSeries[0].parameterCode)
.call(drawTimeSeriesGraph, store)
.call(drawTooltipCursorSlider, store)
.call(drawGraphBrush, store)
diff --git a/assets/src/scripts/monitoring-location/selectors/daily-value-time-series-selector.js b/assets/src/scripts/monitoring-location/selectors/daily-value-time-series-selector.js
index b548dfbc5..e2f938774 100644
--- a/assets/src/scripts/monitoring-location/selectors/daily-value-time-series-selector.js
+++ b/assets/src/scripts/monitoring-location/selectors/daily-value-time-series-selector.js
@@ -130,7 +130,7 @@ export const getCurrentDVTimeSeriesUnitOfMeasure = createSelector(
let result = '';
if (currentTimeSeries) {
let ts = currentTimeSeries.min || currentTimeSeries.mean || currentTimeSeries.max;
- result = ts.properties.unitOfMeasureName ? ts.properties.unitOfMeasureName : '';
+ result = ts && ts.properties && ts.properties.unitOfMeasureName ? ts.properties.unitOfMeasureName : '';
}
return result;
}
diff --git a/wdfn-server/waterdata/templates/macros/components.html b/wdfn-server/waterdata/templates/macros/components.html
index 81cd5e79b..6476edaca 100644
--- a/wdfn-server/waterdata/templates/macros/components.html
+++ b/wdfn-server/waterdata/templates/macros/components.html
@@ -42,8 +42,10 @@
</div>
{%- endmacro %}
-{% macro DailyValueTimeSeriesComponent(site_no, time_series_id) -%}
- <div class="wdfn-component" data-component="dv-hydrograph" data-siteno="{{ site_no }}">
+{% macro DailyValueTimeSeriesComponent(site_no, agency_cd) -%}
+ <div class="wdfn-component" data-component="dv-hydrograph"
+ data-siteno="{{ site_no }}"
+ data-agency-cd="{{ agency_cd }}">
<div class="loading-indicator-container"></div>
<div class="graph-container usa-prose"></div>
</div>
diff --git a/wdfn-server/waterdata/templates/monitoring_location.html b/wdfn-server/waterdata/templates/monitoring_location.html
index e6b31a230..f058986b9 100644
--- a/wdfn-server/waterdata/templates/monitoring_location.html
+++ b/wdfn-server/waterdata/templates/monitoring_location.html
@@ -177,7 +177,7 @@
</button>
</h3>
<div id="dv-graph-container">
- {{ components.DailyValueTimeSeriesComponent(stations[0].site_no) }}
+ {{ components.DailyValueTimeSeriesComponent(stations[0].site_no, stations[0].agency_cd) }}
</div>
</div>
</div>
--
GitLab