From acb0eff60678615a5ff8805e1bfd1b5287c21f5c Mon Sep 17 00:00:00 2001
From: mbucknell <mbucknell@usgs.gov>
Date: Thu, 26 Sep 2019 12:05:20 -0500
Subject: [PATCH] Added a method-picker which gets rerendered whenever the time
series displayed changes.
---
.../scripts/components/hydrograph/index.js | 17 +++++++----
.../scripts/components/hydrograph/legend.js | 1 -
.../components/hydrograph/method-picker.js | 29 +++++++++++++++++++
.../components/hydrograph/time-series.js | 16 +++++-----
.../components/hydrograph/time-series.spec.js | 21 ++++++++++----
.../scripts/selectors/time-series-selector.js | 2 +-
6 files changed, 66 insertions(+), 20 deletions(-)
create mode 100644 assets/src/scripts/components/hydrograph/method-picker.js
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index eab3264bb..4cc00bd00 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -2,27 +2,32 @@
* Hydrograph charting module.
*/
import { extent } from 'd3-array';
-
import { line as d3Line, curveStepAfter } from 'd3-shape';
import { select } from 'd3-selection';
-import { createStructuredSelector } from 'reselect';
+
import { DateTime } from 'luxon';
+import { createStructuredSelector } from 'reselect';
+
import { addSVGAccessibility } from '../../accessibility';
import config from '../../config';
import { dispatch, link, provide } from '../../lib/redux';
+import { getTimeSeriesCollectionIds, isLoadingTS } from '../../selectors/time-series-selector';
import { Actions } from '../../store';
import { callIf, mediaQuery } from '../../utils';
+
import { audibleUI } from './audible';
import { appendAxes, axesSelector } from './axes';
import { cursorSlider } from './cursor';
-import { lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, MASK_DESC, HASH_ID, getCurrentVariableMedianStatPoints } from './drawing-data';
+import { lineSegmentsByParmCdSelector, currentVariableLineSegmentsSelector, MASK_DESC, HASH_ID,
+ getCurrentVariableMedianStatPoints } from './drawing-data';
import { CIRCLE_RADIUS_SINGLE_PT, SPARK_LINE_DIM, layoutSelector } from './layout';
import { drawSimpleLegend, legendMarkerRowsSelector } from './legend';
+import { drawMethodPicker } from './method-picker'
import { plotSeriesSelectTable, availableTimeSeriesSelector } from './parameters';
import { xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector } from './scales';
-import { allTimeSeriesSelector, isVisibleSelector, titleSelector, descriptionSelector, currentVariableTimeSeriesSelector, hasTimeSeriesWithPoints } from './time-series';
+import { allTimeSeriesSelector, isVisibleSelector, titleSelector, descriptionSelector,
+ currentVariableTimeSeriesSelector, hasTimeSeriesWithPoints } from './time-series';
import { createTooltipFocus, createTooltipText } from './tooltip';
-import { getTimeSeriesCollectionIds, isLoadingTS } from '../../selectors/time-series-selector';
const drawMessage = function(elem, message) {
@@ -314,6 +319,7 @@ const graphControls = function(elem) {
const compareControlDiv = graphControlDiv.append('li')
.classed('usa-checkbox', true);
+
compareControlDiv.append('input')
.classed('usa-checkbox__input', true)
.attr('type', 'checkbox')
@@ -543,6 +549,7 @@ export const attachToNode = function (store, node, {siteno, parameter, compare,
select(node)
.call(provide(store))
.call(link(noDataAlert, getTimeSeriesCollectionIds('current', 'P7D')))
+ .call(callIf(interactive, drawMethodPicker))
.call(callIf(interactive, dateRangeControls), siteno)
.select('.loading-indicator-container')
.call(link(loadingIndicator, createStructuredSelector({
diff --git a/assets/src/scripts/components/hydrograph/legend.js b/assets/src/scripts/components/hydrograph/legend.js
index a2da7cdc7..eb0381eaa 100644
--- a/assets/src/scripts/components/hydrograph/legend.js
+++ b/assets/src/scripts/components/hydrograph/legend.js
@@ -7,7 +7,6 @@ import { CIRCLE_RADIUS } from './layout';
import { defineLineMarker, defineTextOnlyMarker, defineRectangleMarker } from './markers';
import { currentVariableLineSegmentsSelector, HASH_ID, MASK_DESC } from './drawing-data';
import config from '../../config';
-import { getMethods } from '../../selectors/time-series-selector';
import { getCurrentVariableMedianMetadata } from '../../selectors/median-statistics-selector';
import { mediaQuery } from '../../utils';
diff --git a/assets/src/scripts/components/hydrograph/method-picker.js b/assets/src/scripts/components/hydrograph/method-picker.js
new file mode 100644
index 000000000..072e5693d
--- /dev/null
+++ b/assets/src/scripts/components/hydrograph/method-picker.js
@@ -0,0 +1,29 @@
+/**
+ * Pick list for methods module
+ */
+
+import{ link } from '../../lib/redux';
+
+import { getAllMethodsForCurrentVariable } from './time-series';
+
+export const drawMethodPicker = function(elem) {
+ const pickerContainer = elem.insert('div', ':nth-child(2)')
+ .attr('id', 'ts-method-select-container');
+
+ pickerContainer.append('label')
+ .attr('class', 'usa-label')
+ .attr('for', 'method-picker')
+ .text('Available Methods');
+ pickerContainer.append('select')
+ .attr('class', 'usa-select')
+ .attr('id', 'method-picker')
+ .call(link(function(elem, methods) {
+ elem.selectAll('option').remove();
+ methods.forEach((method) => {
+ elem.append('option')
+ .attr('value', method.methodId)
+ .text(method.methodDescription ? `${method.methodDescription} (${method.methodID})` : method.methodID);
+ });
+ }, getAllMethodsForCurrentVariable));
+};
+
diff --git a/assets/src/scripts/components/hydrograph/time-series.js b/assets/src/scripts/components/hydrograph/time-series.js
index e314f6cd1..b6c96df5f 100644
--- a/assets/src/scripts/components/hydrograph/time-series.js
+++ b/assets/src/scripts/components/hydrograph/time-series.js
@@ -93,12 +93,14 @@ export const getAllTimeSeriesForCurrentVariable = createSelector(
allTimeSeriesSelector,
(variable, timeSeries) => {
let ts = {};
- Object.keys(timeSeries).forEach(key => {
- const series= timeSeries[key];
- if (series.variable === variable.oid) {
- ts[key] = series;
- }
- });
+ if (variable) {
+ Object.keys(timeSeries).forEach(key => {
+ const series = timeSeries[key];
+ if (series.variable === variable.oid) {
+ ts[key] = series;
+ }
+ });
+ }
return ts;
}
);
@@ -117,7 +119,7 @@ export const getAllMethodsForCurrentVariable = createSelector(
const currentMethodIds = uniq(Object.values(timeSeries).map((ts) => ts.method));
return allMethods.filter((method) => {
- return _includes(currentMethodIds, method.methodId);
+ return _includes(currentMethodIds, method.methodID);
});
}
);
diff --git a/assets/src/scripts/components/hydrograph/time-series.spec.js b/assets/src/scripts/components/hydrograph/time-series.spec.js
index 575e48c9c..30645721e 100644
--- a/assets/src/scripts/components/hydrograph/time-series.spec.js
+++ b/assets/src/scripts/components/hydrograph/time-series.spec.js
@@ -171,15 +171,15 @@ const TEST_DATA = {
methods: {
69329: {
methodDescription: '',
- methodId: 69928
+ methodID: 69928
},
69330: {
methodDescription: '4.1 ft from riverbed (middle)',
- methodId: 69930
+ methodID: 69930
},
69331: {
methodDescription: '1.0 ft from riverbed (bottom)',
- methodId: 69931
+ methodID: 69931
}
},
queryInfo: {
@@ -214,7 +214,7 @@ const TEST_DATA = {
}
};
-fdescribe('TimeSeries module', () => {
+describe('TimeSeries module', () => {
describe('allTimesSeriesSelector', () => {
@@ -355,6 +355,15 @@ fdescribe('TimeSeries module', () => {
describe('getAllTimeSeriesForCurrentVariable', () => {
+ it('Expect no time series if the current variable is not set', () => {
+ const newTestData = {
+ ...TEST_DATA,
+ timeSeriesState: {
+ }
+ };
+ expect(getAllTimeSeriesForCurrentVariable(newTestData)).toEqual({});
+ });
+
it('Expect no time series if the current variable does not have any timeSeries', () => {
const newTestData = {
...TEST_DATA,
@@ -478,11 +487,11 @@ fdescribe('TimeSeries module', () => {
expect(result.length).toEqual(2);
expect(result).toContain({
methodDescription: '4.1 ft from riverbed (middle)',
- methodId: 69930
+ methodID: 69930
});
expect(result).toContain({
methodDescription: '1.0 ft from riverbed (bottom)',
- methodId: 69931
+ methodID: 69931
});
});
});
diff --git a/assets/src/scripts/selectors/time-series-selector.js b/assets/src/scripts/selectors/time-series-selector.js
index 9af629a1b..87f43c0a6 100644
--- a/assets/src/scripts/selectors/time-series-selector.js
+++ b/assets/src/scripts/selectors/time-series-selector.js
@@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
*/
export const getVariables = state => state.series.variables ? state.series.variables : null;
-export const getMethods = state => state.series.methods ? state.series.methods : null;
+export const getMethods = state => state.series.methods ? state.series.methods : {};
export const getQueryInfo = state => state.series.queryInfo || {};
--
GitLab