diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js index 04ceaf9401bd2219036bb7058163f652912ae5cc..a864dcd94c6a64caa60c260d8c2d63b28934c04a 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 ecbafa8e1880dd80e6b19d42a1b377ae0aa4567e..069c8bcd22c1ec98af172d17e45be92f2d01693c 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 a5e553087c6df7570bca63b777c1fd58c1327b6e..2850e1a1c049c106d4f6a224a0c66d9e9f5c4cd1 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 492de4a8ecde3d5d5125873132ff6a2f07e505ff..b867b0a76a1ea7e1e3b94ecd0ea561cdb89bf942 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 8e169d5b5e1dad11f49a2e75426c6de935c02df6..781710d7d38cf90a84a7acf235177743534cff0b 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: {