Merge branch 'master' of https://github.com/usgs/waterdataui into WDFN_watermark

# pulling changes

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,
@@ -332,13 +333,6 @@ const timeSeriesGraph = function (elem) {
                     .attr('y', '10')
                     .attr('xlink:href', STATIC_URL + '/img/USGS_green_logo.svg');
             });
-
-    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',
@@ -441,14 +435,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() {

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');
+        });
+    });
 });

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', {

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;

waterdata/templates/macros/components.html

 {% 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 %}
 

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) }}