From eaadaf5792f2d4f876ac12b90e5be369f9f0055f Mon Sep 17 00:00:00 2001
From: Mary Bucknell <mbucknell@usgs.gov>
Date: Thu, 12 Apr 2018 12:18:29 -0500
Subject: [PATCH] Moved the provisional alert inside the components.html
template. Reorganized the code that gets rendered to the hydrograph container
by making explicit containers for the graph, select timeseries, and alert
containers in the template. This required some reorganization of the
hydrograph/index.js code and its tests.
---
.../scripts/components/hydrograph/index.js | 35 ++++++++------
.../components/hydrograph/index.spec.js | 47 ++++++++++++++-----
assets/src/scripts/index.js | 1 +
.../styles/pages/_monitoring_location.scss | 2 +-
waterdata/templates/macros/components.html | 16 +++++++
waterdata/templates/monitoring_location.html | 14 ------
6 files changed, 74 insertions(+), 41 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index d7bfc2153..4de53869c 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -22,7 +22,7 @@ const { CIRCLE_RADIUS, CIRCLE_RADIUS_SINGLE_PT, SPARK_LINE_DIM, layoutSelector }
const { drawSimpleLegend, legendMarkerRowsSelector } = require('./legend');
const { plotSeriesSelectTable, availableTimeseriesSelector } = require('./parameters');
const { xScaleSelector, yScaleSelector, timeSeriesScalesByParmCdSelector } = require('./scales');
-const { currentVariableSelector, methodsSelector, isVisibleSelector, titleSelector,
+const { allTimeSeriesSelector, currentVariableSelector, methodsSelector, isVisibleSelector, titleSelector,
descriptionSelector, currentVariableTimeSeriesSelector, timeSeriesSelector } = require('./timeseries');
const { createTooltipFocus, createTooltipText } = require('./tooltip');
@@ -291,6 +291,7 @@ const timeSeriesGraph = function (elem) {
.call(createTitle)
.call(createTooltipText)
.append('svg')
+ .classed('hydrograph-svg', true)
.call(link((elem, layout) => elem.attr('viewBox', `0 0 ${layout.width + layout.margin.left + layout.margin.right} ${layout.height + layout.margin.top + layout.margin.bottom}`), layoutSelector))
.call(link(addSVGAccessibility, createStructuredSelector({
title: titleSelector,
@@ -326,13 +327,6 @@ const timeSeriesGraph = function (elem) {
showLabel: (state) => state.showMedianStatsLabel
})));
});
-
- elem.call(link(plotSeriesSelectTable, createStructuredSelector({
- availableTimeseries: availableTimeseriesSelector,
- lineSegmentsByParmCd: lineSegmentsByParmCdSelector('current'),
- timeSeriesScalesByParmCd: timeSeriesScalesByParmCdSelector('current')(SPARK_LINE_DIM),
- layout: layoutSelector
- })));
elem.append('div')
.call(link(plotSROnlyTable, createStructuredSelector({
tsKey: () => 'current',
@@ -435,14 +429,27 @@ const attachToNode = function (store, node, {siteno} = {}) {
store.dispatch(Actions.resizeUI(window.innerWidth, node.offsetWidth));
select(node)
- .call(provide(store))
+ .call(provide(store));
+ select(node).select('.graph-container')
.call(link(controlGraphDisplay, timeSeriesSelector('current')))
.call(timeSeriesGraph)
- .call(cursorSlider);
- select(node).append('div')
- .classed('ts-legend-controls-container', true)
- .call(timeSeriesLegend)
- .call(graphControls);
+ .call(cursorSlider)
+ .append('div')
+ .classed('ts-legend-controls-container', true)
+ .call(timeSeriesLegend)
+ .call(graphControls);
+ select(node).select('.select-timeseries-container')
+ .call(link(plotSeriesSelectTable, createStructuredSelector({
+ availableTimeseries: availableTimeseriesSelector,
+ lineSegmentsByParmCd: lineSegmentsByParmCdSelector('current'),
+ timeSeriesScalesByParmCd: timeSeriesScalesByParmCdSelector('current')(SPARK_LINE_DIM),
+ layout: layoutSelector
+ })));
+ select(node).select('.provisional-data-alert')
+ .call(link(function(elem, allTimeSeries) {
+ elem.attr('hidden', Object.keys(allTimeSeries).length ? null : true);
+
+ }, allTimeSeriesSelector));
window.onresize = function() {
diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js
index 66e540ceb..e0993eb27 100644
--- a/assets/src/scripts/components/hydrograph/index.spec.js
+++ b/assets/src/scripts/components/hydrograph/index.spec.js
@@ -135,8 +135,12 @@ describe('Hydrograph charting module', () => {
beforeEach(() => {
let body = select('body');
- body.append('div')
+ let component = body.append('div')
.attr('id', 'hydrograph');
+ component.append('div').attr('class', 'graph-container');
+ component.append('div').attr('class', 'select-timeseries-container');
+ component.append('div').attr('class', 'provisional-data-alert');
+
graphNode = document.getElementById('hydrograph');
});
@@ -155,7 +159,7 @@ describe('Hydrograph charting module', () => {
.call(provide(store))
.call(timeSeriesGraph);
let svgNodes = graphNode.getElementsByTagName('svg');
- expect(svgNodes.length).toBe(3);
+ expect(svgNodes.length).toBe(1);
expect(graphNode.innerHTML).toContain('hydrograph-container');
});
@@ -251,14 +255,13 @@ describe('Hydrograph charting module', () => {
width: 400,
currentVariableID: '45807197'
});
- select(graphNode)
- .call(provide(store))
- .call(timeSeriesGraph);
+
+ attachToNode(store, graphNode, {siteno: '123456788'});
});
it('should render the correct number svg nodes', () => {
- // one main hydrograph and two sparklines
- expect(selectAll('svg').size()).toBe(3);
+ // one main hydrograph, legend and two sparklines
+ expect(selectAll('svg').size()).toBe(4);
});
it('should have a title div', () => {
@@ -276,21 +279,21 @@ describe('Hydrograph charting module', () => {
it('should render timeseries data as a line', () => {
// There should be one segment per time-series. Each is a single
// point, so should be a circle.
- expect(selectAll('svg .line-segment').size()).toBe(2);
+ expect(selectAll('.hydrograph-svg .line-segment').size()).toBe(2);
});
it('should render a rectangle for masked data', () => {
- expect(selectAll('g.current-mask-group').size()).toBe(1);
+ expect(selectAll('.hydrograph-svg g.current-mask-group').size()).toBe(1);
});
it('should have a point for the median stat data with a label', () => {
- expect(selectAll('svg #median-points circle.median-data-series').size()).toBe(1);
- expect(selectAll('svg #median-points text').size()).toBe(0);
+ expect(selectAll('#median-points circle.median-data-series').size()).toBe(1);
+ expect(selectAll('#median-points text').size()).toBe(0);
});
it('show the labels for the median stat data showMedianStatsLabel is true', () => {
store.dispatch(Actions.showMedianStatsLabel(true));
- expect(selectAll('svg #median-points text').size()).toBe(1);
+ expect(selectAll('#median-points text').size()).toBe(1);
});
it('should have tooltips for the select series table', () => {
@@ -371,4 +374,24 @@ describe('Hydrograph charting module', () => {
expect(selectAll('#ts-compare-group .line-segment').size()).toBe(0);
});
});
+
+ describe('hiding/show provisional alert', () => {
+ it('Expects the provisional alert to be visible when time series data is provided', () => {
+ let store = configureStore(TEST_STATE);
+ attachToNode(store, graphNode, {siteno: '12345678'});
+
+ expect(select(graphNode).select('.provisional-data-alert').attr('hidden')).toBeNull();
+ });
+
+ it('Expects the provisional alert to be hidden when no time series data is provided', () => {
+ let store = configureStore({
+ ...TEST_STATE,
+ series: {},
+ currentVariableID: ''
+ });
+ attachToNode(store, graphNode, {siteno: '12345678'});
+
+ expect(select(graphNode).select('.provisional-data-alert').attr('hidden')).toBe('true');
+ });
+ });
});
diff --git a/assets/src/scripts/index.js b/assets/src/scripts/index.js
index 41f0c1b40..ac23ea17a 100644
--- a/assets/src/scripts/index.js
+++ b/assets/src/scripts/index.js
@@ -27,6 +27,7 @@ function main() {
for (let node of nodes) {
COMPONENTS[node.dataset.component](store, node, node.dataset);
}
+
} catch (err) {
// Send exception to Google Analytics.
window.ga('send', 'exception', {
diff --git a/assets/src/styles/pages/_monitoring_location.scss b/assets/src/styles/pages/_monitoring_location.scss
index 52e6fffa6..6b94874ef 100644
--- a/assets/src/styles/pages/_monitoring_location.scss
+++ b/assets/src/styles/pages/_monitoring_location.scss
@@ -24,7 +24,7 @@ table#site-summary {
word-wrap: break-word;
}
}
-#provisional-data-alert {
+.provisional-data-alert {
p {
height: 6em;
overflow-y: scroll;
diff --git a/waterdata/templates/macros/components.html b/waterdata/templates/macros/components.html
index c1141415a..f276cf344 100644
--- a/waterdata/templates/macros/components.html
+++ b/waterdata/templates/macros/components.html
@@ -1,5 +1,21 @@
{% macro TimeseriesComponent(site_no) -%}
<div class="wdfn-component" data-component="hydrograph" data-siteno="{{ site_no }}">
+ <div class="graph-container"></div>
+ <div class="select-timeseries-container"></div>
+ <div class="usa-alert usa-alert-info provisional-data-alert" role="alert" hidden>
+ <div class="usa-alert-body"><h3 class="usa-alert-heading">Provisional Data Statement</h3>
+ <p class="usa-alert-text">
+ Data are provisional and subject to revision until they have been thoroughly reviewed and received final approval.
+ Current condition data relayed by satellite or other telemetry are automatically screened to not display improbable
+ values until they can be verified. Provisional data may be inaccurate due to instrument malfunctions or physical
+ changes at the measurement site. Subsequent review based on field inspections and measurements may result in
+ significant revisions to the data. Data users are cautioned to consider carefully the provisional nature of the
+ information before using it for decisions that concern personal or public safety or the conduct of business that
+ involves substantial monetary or operational consequences. Information concerning the accuracy and appropriate uses
+ of these data or concerning other hydrologic data may be obtained from the USGS.
+ </p>
+ </div>
+ </div>
</div>
{%- endmacro %}
diff --git a/waterdata/templates/monitoring_location.html b/waterdata/templates/monitoring_location.html
index 91f5529b0..3c3dbe0ef 100644
--- a/waterdata/templates/monitoring_location.html
+++ b/waterdata/templates/monitoring_location.html
@@ -58,20 +58,6 @@
<p id="site-description">{{ components.Description(stations[0].site_no, location_with_values, parm_grp_summary) }}</p>
</div>
{{ components.TimeseriesComponent(stations[0].site_no) }}
- <div id="provisional-data-alert" class="usa-alert usa-alert-info" role="alert">
- <div class="usa-alert-body"><h3 class="usa-alert-heading">Provisional Data Statement</h3>
- <p class="usa-alert-text">
- Data are provisional and subject to revision until they have been thoroughly reviewed and received final approval.
- Current condition data relayed by satellite or other telemetry are automatically screened to not display improbable
- values until they can be verified. Provisional data may be inaccurate due to instrument malfunctions or physical
- changes at the measurement site. Subsequent review based on field inspections and measurements may result in
- significant revisions to the data. Data users are cautioned to consider carefully the provisional nature of the
- information before using it for decisions that concern personal or public safety or the conduct of business that
- involves substantial monetary or operational consequences. Information concerning the accuracy and appropriate uses
- of these data or concerning other hydrologic data may be obtained from the USGS.
- </p>
- </div>
- </div>
{% if stations[0].dec_lat_va and stations[0].dec_long_va %}
{{ components.FloodSliderComponent() }}
{{ components.MapComponent(stations[0].site_no, stations[0].dec_lat_va, stations[0].dec_long_va) }}
--
GitLab