From 61e40f82d0d24fc36cb30ac8dcedcb12e49fd991 Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Fri, 13 Aug 2021 09:48:13 -0500
Subject: [PATCH] Added code to render the parameter list with info from the
period of record so that initially rendering doesn't have to wait for the
hydrograph parameters retrieval to complete.
---
.../components/hydrograph/index.js | 23 ++++----
.../components/hydrograph/parameters.js | 53 +++++++++----------
.../selectors/hydrograph-data-selector.js | 4 +-
.../store/hydrograph-parameters.js | 41 +++++++++++++-
.../monitoring-location/store/index.js | 5 +-
5 files changed, 82 insertions(+), 44 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 04ceaf940..a864dcd94 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -102,6 +102,8 @@ export const attachToNode = function(store,
.classed('ts-legend-controls-container', true);
if (!showOnlyGraph) {
legendControlsContainer.call(drawGraphControls, store, siteno);
+ nodeElem.select('.select-time-series-container')
+ .call(drawSelectionList, store, siteno);
}
const fetchHydrographDataPromise = store.dispatch(retrieveHydrographData(siteno, {
@@ -114,19 +116,20 @@ export const attachToNode = function(store,
}));
// if showing the controls, fetch the parameters
- let fetchParametersPromise;
if (!thisShowOnlyGraph) {
- fetchParametersPromise = store.dispatch(retrieveHydrographParameters(siteno));
+ store.dispatch(retrieveHydrographParameters(siteno));
}
- // Fetch waterwatch flood levels
- const fetchFloodLevelsPromise = store.dispatch(floodDataActions.retrieveWaterwatchData(siteno));
-
let fetchDataPromises = [fetchHydrographDataPromise];
- // If flood levels are to be shown then wait to render the hydrograph until those have been fetched.
- if (parameterCode === config.GAGE_HEIGHT_PARAMETER_CODE) {
- fetchDataPromises.push(fetchFloodLevelsPromise);
+ // Fetch waterwatch flood levels
+ if (config.GAGE_HEIGHT_PARAMETER_CODE in config.ivPeriodOfRecord) {
+ const fetchFloodLevelsPromise = store.dispatch(floodDataActions.retrieveWaterwatchData(siteno));
+ // If flood levels are to be shown then wait to render the hydrograph until those have been fetched.
+ if (parameterCode === config.GAGE_HEIGHT_PARAMETER_CODE) {
+ fetchDataPromises.push(fetchFloodLevelsPromise);
+ }
}
+
Promise.all(fetchDataPromises).then(() => {
// 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.
@@ -147,10 +150,6 @@ export const attachToNode = function(store,
nodeElem.select('#iv-data-table-container')
.call(drawDataTables, store);
- fetchParametersPromise.then(() => {
- nodeElem.select('.select-time-series-container')
- .call(drawSelectionList, store, siteno);
- });
renderTimeSeriesUrlParams(store);
}
})
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
index ecbafa8e1..069c8bcd2 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
@@ -1,6 +1,3 @@
-// Required to initialize USWDS components after page load (WaterAlert ToolTips)
-import {tooltip} from 'uswds-components';
-
import {select} from 'd3-selection';
import config from 'ui/config';
@@ -245,32 +242,32 @@ export const drawSelectionList = function(container, store, siteno) {
.attr('class', 'usa-prose')
.text('Select Data to Graph');
const selectionList = container.append('div')
- .attr('id', 'select-time-series')
- .attr('class', 'main-parameter-selection-container');
-
- parameters.forEach(parameter => {
- // Add the main grid rows
- const containerRow = drawContainingRow(selectionList, store, siteno, parameter.parameterCode);
- // Add the nested grid rows
- drawTopPeriodOfRecordRow(containerRow, parameter);
- drawRadioButtonRow(containerRow, parameter, store);
- // Add the expansion container in nested grid
- const expansionContainerRow = containerRow.append('div')
- .attr('id', `expansion-container-row-${parameter.parameterCode}`)
- .attr('class', 'expansion-container-row')
- .attr('hidden', 'true');
+ .attr('id', 'select-time-series')
+ .attr('class', 'main-parameter-selection-container')
+ .call(link(store, (selectionList, parameters) => {
+ selectionList.selectAll('.grid-row-container-row').remove();
- // Add the rows nested in the expansion container
- if (parameter.waterAlert.hasWaterAlert) {
- drawWaterAlertRow(expansionContainerRow, siteno, parameter);
- }
- });
+ parameters.forEach(parameter => {
+ // Add the main grid rows
+ const containerRow = drawContainingRow(selectionList, store, siteno, parameter.parameterCode);
+ // Add the nested grid rows
+ drawTopPeriodOfRecordRow(containerRow, parameter);
+ drawRadioButtonRow(containerRow, parameter, store);
+ // Add the expansion container in nested grid
+ const expansionContainerRow = containerRow.append('div')
+ .attr('id', `expansion-container-row-${parameter.parameterCode}`)
+ .attr('class', 'expansion-container-row')
+ .attr('hidden', 'true');
- // Draw method picker. This can only appear in the selected parameter row because
- // we only know the methods for the currently selected data. Let the code figure out
- // whether to draw it and where to put it whenever the sorted IV Methods change.
- selectionList.call(link(store, drawMethodPicker, getSortedIVMethods, store));
+ // Add the rows nested in the expansion container
+ if (parameter.waterAlert.hasWaterAlert) {
+ drawWaterAlertRow(expansionContainerRow, siteno, parameter);
+ }
+ });
- // Activate the USWDS toolTips for WaterAlert subscriptions
- tooltip.on(container.node());
+ }, getAvailableParameters));
+ // Draw method picker. This can only appear in the selected parameter row because
+ // we only know the methods for the currently selected data. Let the code figure out
+ // whether to draw it and where to put it whenever the sorted IV Methods change.
+ selectionList.call(link(store, drawMethodPicker, getSortedIVMethods, store));
};
\ No newline at end of file
diff --git a/assets/src/scripts/monitoring-location/selectors/hydrograph-data-selector.js b/assets/src/scripts/monitoring-location/selectors/hydrograph-data-selector.js
index a5e553087..2850e1a1c 100644
--- a/assets/src/scripts/monitoring-location/selectors/hydrograph-data-selector.js
+++ b/assets/src/scripts/monitoring-location/selectors/hydrograph-data-selector.js
@@ -18,7 +18,9 @@ export const getTimeRange = memoize((timeRangeKind) => state => state.hydrograph
* @param {String} dataKind - 'primary' or 'compare'
* @return {Function}
*/
-export const getIVData = memoize((dataKind) => state => state.hydrographData[`${dataKind}IVData`] || null);
+export const getIVData = memoize((dataKind) => state => {
+ return state.hydrographData[`${dataKind}IVData`] || null;
+});
/*
* Returns a selector function which returns the median statistics data
diff --git a/assets/src/scripts/monitoring-location/store/hydrograph-parameters.js b/assets/src/scripts/monitoring-location/store/hydrograph-parameters.js
index 492de4a8e..b867b0a76 100644
--- a/assets/src/scripts/monitoring-location/store/hydrograph-parameters.js
+++ b/assets/src/scripts/monitoring-location/store/hydrograph-parameters.js
@@ -101,7 +101,46 @@ export const retrieveHydrographParameters = function(siteno) {
};
};
-export const hydrographParametersReducer = function(hydrographParameters={}, action) {
+export const initializeParameters = function() {
+ let ivVars = {};
+ if (config.ivPeriodOfRecord) {
+ const ivParameterCodes = Object.keys(config.ivPeriodOfRecord);
+ ivParameterCodes.forEach(parameterCode => {
+ ivVars[parameterCode] = {
+ parameterCode: parameterCode,
+ name: '',
+ description: '',
+ hasIVData: true
+ };
+
+ // If it is a celsius parameterCode, add a variable for calculated Fahrenheit.
+ if (config.TEMPERATURE_PARAMETERS.celsius.includes(parameterCode) &&
+ !hasMeasuredFahrenheitParameter(parameterCode, ivParameterCodes)) {
+ const fahrenheitParameterCode = `${parameterCode}${config.CALCULATED_TEMPERATURE_VARIABLE_CODE}`;
+ ivVars[fahrenheitParameterCode] = {
+ parameterCode: fahrenheitParameterCode,
+ name: '',
+ description: '',
+ hasIVdata: true
+ };
+ }
+ });
+ }
+ let gwVars = {};
+ if (config.gwPeriodOfRecord) {
+ Object.keys(config.gwPeriodOfRecord).forEach(parameterCode => {
+ gwVars[parameterCode] = {
+ parameterCode: parameterCode,
+ name: '',
+ description: '',
+ hasGWLevelsData: true
+ };
+ });
+ }
+ return merge({}, gwVars, ivVars);
+};
+
+export const hydrographParametersReducer = function(hydrographParameters= {}, action) {
switch(action.type) {
case 'UPDATE_HYDROGRAPH_PARAMETERS': {
return {
diff --git a/assets/src/scripts/monitoring-location/store/index.js b/assets/src/scripts/monitoring-location/store/index.js
index 8e169d5b5..781710d7d 100644
--- a/assets/src/scripts/monitoring-location/store/index.js
+++ b/assets/src/scripts/monitoring-location/store/index.js
@@ -7,7 +7,8 @@ import {
floodDataReducer as floodData,
floodStateReducer as floodState} from './flood-inundation';
import {hydrographDataReducer as hydrographData} from './hydrograph-data';
-import {hydrographParametersReducer as hydrographParameters} from './hydrograph-parameters';
+import {hydrographParametersReducer as hydrographParameters,
+ initializeParameters} from './hydrograph-parameters';
import {hydrographStateReducer as hydrographState,
INITIAL_STATE as HYDROGRAPH_INITIAL_STATE
} from './hydrograph-state';
@@ -34,7 +35,7 @@ const MIDDLEWARES = [thunk];
export const configureStore = function(initialState) {
initialState = {
hydrographData: {},
- hydrographParameters: {},
+ hydrographParameters: initializeParameters(),
hydrographState: HYDROGRAPH_INITIAL_STATE,
dailyValueTimeSeriesData: {},
floodData: {
--
GitLab