From 6cf3c7f56dd6be3ddbc0399d308bbbdb85bcb7af Mon Sep 17 00:00:00 2001
From: Aaron Briggs <abriggs@contractor.usgs.gov>
Date: Fri, 20 Nov 2020 15:05:09 -0600
Subject: [PATCH] moved link code to module
---
.../components/hydrograph/download-links.js | 74 ++++++++++++++++++-
.../components/hydrograph/index.js | 68 +----------------
.../components/hydrograph/parameters.js | 5 ++
.../templates/macros/components.html | 30 +-------
4 files changed, 82 insertions(+), 95 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/download-links.js b/assets/src/scripts/monitoring-location/components/hydrograph/download-links.js
index 1e368e495..f034e153b 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/download-links.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/download-links.js
@@ -3,17 +3,27 @@
*/
import config from 'ui/config.js';
+import{link} from 'ui/lib/d3-redux';
+
+import {appendInfoTooltip} from 'd3render/info-tooltip';
+
+import {select} from 'd3-selection';
+import {createStructuredSelector} from 'reselect';
+
+import {getCurrentParmCd, getCurrentDateRange, getShowIVTimeSeries} from 'ml/selectors/time-series-selector';
+
+import {getQueryInformation} from './selectors/time-series-data';
/*
* Uses information from the state to structure a URL that will work with WaterServices
- * @param {String} currentIVDateRange
- * @param {Object} queryInformation - from the application state under ivTimeSeriesData>queryInfo; contains
+ * @param {String} currentIVDateRange - a string with the form of 'P{a number of days}D, 'P1Y', or 'custom'
+ * @param {Object} queryInformation - from the application state, contains
* URL queries for WaterServices - but they require reformatting to use
- * @param {String} parameterCode - a five digit number indicating the type of data
+ * @param {String} parameterCode - a five digit number indicating the type of time series data
* @param {String} timeSeriesType - one of two options, 'current' or 'compare'
* @return {String} a URL usable to retrieve station data from WaterServices
*/
-export const createHrefForDownloadLinks = function(currentIVDateRange, queryInformation, parameterCode, timeSeriesType) {
+export const createUrlForDownloadLinks = function(currentIVDateRange, queryInformation, parameterCode, timeSeriesType) {
let url = '';
const key = currentIVDateRange === 'P7D' ? `${timeSeriesType}:${currentIVDateRange}` : `${timeSeriesType}:${currentIVDateRange}:${parameterCode}`;
@@ -33,3 +43,59 @@ export const createHrefForDownloadLinks = function(currentIVDateRange, queryInfo
return url;
};
+export const renderDownloadLinks = function(elem, store, siteno) {
+ elem.select('#iv-graph-data-download-container').call(link(store, (container, {currentIVDateRange, parameterCode, showIVTimeSeries, queryInformation}) => {
+ container.select('#iv-data-download-list').remove();
+
+ const addStandardAttributes = function(element) {
+ return element.attr('class', 'usa-link')
+ .attr('target', '_blank')
+ .attr('rel', 'noopener');
+ };
+
+ const listOfDownloadLinks = container.append('ul')
+ .attr('id', 'iv-data-download-list')
+ .attr('class', 'usa-fieldset usa-list--unstyled');
+
+ const monitoringLocationDownloadLink = listOfDownloadLinks.append('li');
+ addStandardAttributes(monitoringLocationDownloadLink.append('a'))
+ .text('Current')
+ .attr('href', createUrlForDownloadLinks(currentIVDateRange, queryInformation, parameterCode, 'current'));
+ monitoringLocationDownloadLink.call(appendInfoTooltip, 'Monitoring location data as shown on graph');
+
+ if (showIVTimeSeries.compare) {
+ const compareDownloadLink = listOfDownloadLinks.append('li');
+ addStandardAttributes(compareDownloadLink.append('a'))
+ .text('Compare')
+ .attr('href', createUrlForDownloadLinks(currentIVDateRange, queryInformation, parameterCode, 'compare'));
+ compareDownloadLink.call(appendInfoTooltip, 'Data from last year with the same duration as in graph');
+ }
+
+ if (showIVTimeSeries.median && parameterCode === '00060') {
+ const medianDownloadLink = listOfDownloadLinks.append('li');
+ addStandardAttributes(medianDownloadLink.append('a'))
+ .text('Median')
+ .attr('href', `${config.SERVICE_ROOT}/stat/?format=rdb&sites=${siteno}&statReportType=daily&statTypeCd=median¶meterCd=00060`);
+ medianDownloadLink.call(appendInfoTooltip, 'Median data for timespan shown on graph');
+ }
+
+ const metadataDownloadLink = listOfDownloadLinks.append('li')
+ .text('Metadata - ');
+ addStandardAttributes(metadataDownloadLink.append('a'))
+ .text('standard')
+ .attr('href', `${config.SERVICE_ROOT}/site/?format=rdb&sites=${siteno}&siteStatus=all`);
+ metadataDownloadLink.append('span')
+ .text(' or ');
+ addStandardAttributes(metadataDownloadLink.append('a'))
+ .text('expanded')
+ .attr('href', `${config.SERVICE_ROOT}/site/?format=rdb&sites=${siteno}&siteOutput=expanded&siteStatus=all`);
+ metadataDownloadLink.call(appendInfoTooltip, 'Information about this monitoring location');
+
+ }, createStructuredSelector({
+ currentIVDateRange: getCurrentDateRange,
+ parameterCode: getCurrentParmCd,
+ showIVTimeSeries: getShowIVTimeSeries,
+ queryInformation: getQueryInformation
+ })));
+};
+
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index ada6cc23c..52ca11e7a 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -9,7 +9,8 @@ import {link} from 'ui/lib/d3-redux';
import {drawWarningAlert, drawInfoAlert} from 'd3render/alerts';
import {drawLoadingIndicator} from 'd3render/loading-indicator';
-import {appendTooltip} from 'd3render/tooltips';
+import {appendInfoTooltip} from 'd3render/info-tooltip';
+
import {hasAnyTimeSeries, getCurrentParmCd, getVariables, getCurrentDateRange, getShowIVTimeSeries} from 'ml/selectors/time-series-selector';
import {Actions as ivTimeSeriesDataActions} from 'ml/store/instantaneous-value-time-series-data';
@@ -21,7 +22,7 @@ import {renderTimeSeriesUrlParams} from 'ml/url-params';
import {drawDateRangeControls} from './date-controls';
import {drawDataTable} from './data-table';
-import {createHrefForDownloadLinks} from './download-links';
+import {createUrlForDownloadLinks, renderDownloadLinks} from './download-links';
import {drawGraphBrush} from './graph-brush';
import {drawGraphControls} from './graph-controls';
import {isPeriodWithinAcceptableRange, isPeriodCustom} from './hydrograph-utils';
@@ -168,68 +169,7 @@ export const attachToNode = function(store,
nodeElem.select('.ts-legend-controls-container')
.call(drawGraphControls, store);
- // Construct and add the hrefs needed so users can download the data corresponding to the currently displayed hydrograph with the 'download data' links
- nodeElem.select('#iv-download-container').call(link(store, (container, {currentIVDateRange, parameterCode, showIVTimeSeries, queryInformation}) => {
- // The 'compare' and 'median' links are only available if those options are selected, so remove and replace if needed
- nodeElem.select('#compare-data-link').text('').attr('href', '');
- nodeElem.select('#median-data-download-link').text('').attr('href', '');
-
- // Remove any old tooltips. Then add new ones
- nodeElem.select('#monitoring-location-download-tooltip').remove();
- nodeElem.select('#compare-download-tooltip').remove();
- nodeElem.select('#median-download-tooltip').remove();
- nodeElem.select('#metadata-download-tooltip').remove();
-
- const monitoringLocationTooltipContainer = nodeElem.select('#monitoring-location-download-list-item').append('span')
- .attr('id', 'monitoring-location-download-tooltip');
- monitoringLocationTooltipContainer.call(appendTooltip, 'Monitoring location data as shown on graph');
-
- const metaDataTooltipContainer = nodeElem.select('#metadata-download-list-item').append('span')
- .attr('id', 'metadata-download-tooltip');
- metaDataTooltipContainer.call(appendTooltip, 'Information about this monitoring location');
-
- // Toggle the user selected tooltips
- nodeElem.select('#compare-download-tooltip').style('display', `${showIVTimeSeries.compare ? 'inline' : 'none'}`);
- nodeElem.select('#median-download-tooltip').style('display', `${showIVTimeSeries.median ? 'inline' : 'none'}`);
-
- // Create and insert the urls that corresponds to the data shown on current graph into the links
- const href = createHrefForDownloadLinks(currentIVDateRange, queryInformation, parameterCode, 'current');
- nodeElem.select('#monitoring-location-link')
- .attr('href', href);
-
- if (showIVTimeSeries.compare) {
- const href = createHrefForDownloadLinks(currentIVDateRange, queryInformation, parameterCode, 'compare');
- nodeElem.select('#compare-data-link')
- .text('Compare')
- .attr('href', href);
-
- const compareTooltipContainer = nodeElem.select('#compare-download-list-item').append('span')
- .attr('id', 'compare-download-tooltip');
- compareTooltipContainer.call(appendTooltip, 'Data from last year with the same timespan as in graph');
- }
-
- if (showIVTimeSeries.median && parameterCode === '00060') {
- const href = `${config.SERVICE_ROOT}/stat/?format=rdb&sites=${siteno}&statReportType=daily&statTypeCd=median¶meterCd=00060`;
- nodeElem.select('#median-data-download-link')
- .text('Median data')
- .attr('href', href);
-
- const medianTooltipContainer = nodeElem.select('#median-download-list-item').append('span')
- .attr('id', 'median-download-tooltip');
- medianTooltipContainer.call(appendTooltip, 'Median data for timespan shown on graph');
- }
- const hrefMetadata = `${config.SERVICE_ROOT}/site/?format=rdb&sites=${siteno}&siteStatus=all`;
- const hrefMetadataExpanded = `${config.SERVICE_ROOT}/site/?format=rdb&sites=${siteno}&siteOutput=expanded&siteStatus=all`;
- nodeElem.select('#metadata-download-link')
- .attr('href', hrefMetadata);
- nodeElem.select('#metadata-expanded-download-link')
- .attr('href', hrefMetadataExpanded);
- }, createStructuredSelector({
- currentIVDateRange: getCurrentDateRange,
- parameterCode: getCurrentParmCd,
- showIVTimeSeries: getShowIVTimeSeries,
- queryInformation: getQueryInformation
- })));
+ nodeElem.call(renderDownloadLinks, store, siteno);
nodeElem.select('#iv-data-table-container')
.call(drawDataTable, store);
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
index 4345f3a4e..81892670d 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/parameters.js
@@ -1,3 +1,6 @@
+// Required to initialize USWDS components after page load (WaterAlert ToolTips)
+import components from 'uswds/src/js/components';
+
import {line} from 'd3-shape';
import {select} from 'd3-selection';
@@ -179,6 +182,8 @@ export const plotSeriesSelectTable = function(elem,
.attr('title', 'Subscribe to text or email alerts based on thresholds that you set')
.text('Subscribe');
});
+ // Activate the USWDS toolTips for WaterAlert subscriptions
+ components.tooltip.init(elem.node());
table.property('scrollTop', scrollTop);
diff --git a/wdfn-server/waterdata/templates/macros/components.html b/wdfn-server/waterdata/templates/macros/components.html
index 2b4ca0d80..cc00f76e1 100644
--- a/wdfn-server/waterdata/templates/macros/components.html
+++ b/wdfn-server/waterdata/templates/macros/components.html
@@ -9,37 +9,13 @@
</p>
</div>
<div class="select-time-series-container"></div>
- <div class="graph-data usa-accordion">
+ <div class="iv-graph-data-download usa-accordion">
<h2 class="usa-accordion__heading">
- <button class="usa-accordion__button" aria-expanded="false" aria-controls="iv-download-container">
+ <button class="usa-accordion__button" aria-expanded="false" aria-controls="iv-graph-data-download-container">
Download this graph's data
</button>
</h2>
- <div id="iv-download-container" class="usa-accordion__content usa-prose">
- <ul class="usa-fieldset usa-list--unstyled">
- <li id="monitoring-location-download-list-item">
- <a id="monitoring-location-link" class="usa-link" target="_blank" rel="noopener">
- Current
- </a>
- </li>
- <li id="compare-download-list-item">
- <a id="compare-data-link" class="usa-link" target="_blank" rel="noopener"></a>
- </li>
- <li id="median-download-list-item">
- <a id="median-data-download-link" class="usa-link" target="_blank" rel="noopener"></a>
- </li>
- <li id="metadata-download-list-item">
- Metadata -
- <a id="metadata-download-link" class="usa-link" target="_blank" rel="noopener">
- standard
- </a>
- or
- <a id="metadata-expanded-download-link" class="usa-link" target="_blank" rel="noopener">
- expanded
- </a>
- </li>
- </ul>
- </div>
+ <div id="iv-graph-data-download-container" class="usa-accordion__content usa-prose"></div>
</div>
<div class="graph-data usa-accordion">
<h2 class="usa-accordion__heading">
--
GitLab