From 521571154dc72fb59346322e6248948814c29ac8 Mon Sep 17 00:00:00 2001
From: Aaron Briggs <abriggs@contractor.usgs.gov>
Date: Wed, 18 Nov 2020 20:13:54 -0600
Subject: [PATCH] adding tool tips
---
.../components/hydrograph/index.js | 23 ++++++++++++++++++-
.../templates/macros/components.html | 12 ++++++----
2 files changed, 30 insertions(+), 5 deletions(-)
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index 677169f63..f16e238a7 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -5,6 +5,8 @@ import {select} from 'd3-selection';
import {createStructuredSelector} from 'reselect';
import config from 'ui/config.js';
+import {appendTooltip} from 'ui/tooltips';
+
import {drawWarningAlert, drawInfoAlert} from 'd3render/alerts';
import {drawLoadingIndicator} from 'd3render/loading-indicator';
import {link} from 'ui/lib/d3-redux';
@@ -67,6 +69,7 @@ export const attachToNode = function(store,
showMLName = false
} = {}) {
const nodeElem = select(node);
+
if (!siteno) {
select(node).call(drawWarningAlert, {title: 'Hydrograph Alert', body: 'No data is available.'});
return;
@@ -163,12 +166,21 @@ export const attachToNode = function(store,
nodeElem.select('.ts-legend-controls-container')
.call(drawGraphControls, store);
+
+ // Add the tooltips that are always on
+ nodeElem.select('#station-tooltip')
+ .call(appendTooltip, 'Monitoring location data as shown on graph');
+ nodeElem.select('#metadata-tooltip')
+ .call(appendTooltip, 'Information about this monitoring location');
// 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('#station-compare-data-download-link').text('').attr('href', '');
nodeElem.select('#median-data-download-link').text('').attr('href', '');
+ nodeElem.select('#compare-tooltip')
+ nodeElem.select('#median-tooltip')
+
const href = createHrefForDownloadLinks(currentIVDateRange, queryInformation, parameterCode, 'current');
nodeElem.select('#station-data-download-link')
.attr('href', href);
@@ -176,8 +188,11 @@ export const attachToNode = function(store,
if (showIVTimeSeries.compare) {
const href = createHrefForDownloadLinks(currentIVDateRange, queryInformation, parameterCode, 'compare');
nodeElem.select('#station-compare-data-download-link')
- .text('Data from last year for current timespan')
+ .text('Compare')
.attr('href', href);
+
+ nodeElem.select('#compare-tooltip')
+ .call(appendTooltip, 'Data from last year with the same timespan as in graph');
}
if (showIVTimeSeries.median && parameterCode === '00060') {
@@ -185,6 +200,12 @@ export const attachToNode = function(store,
nodeElem.select('#median-data-download-link')
.text('Median data')
.attr('href', href);
+
+ if (document.getElementById('myElementId') === null) {
+ console.log('no find 2')
+ }
+ nodeElem.select('#median-tooltip')
+ .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`;
diff --git a/wdfn-server/waterdata/templates/macros/components.html b/wdfn-server/waterdata/templates/macros/components.html
index 05ca5f31f..7b0b7b208 100644
--- a/wdfn-server/waterdata/templates/macros/components.html
+++ b/wdfn-server/waterdata/templates/macros/components.html
@@ -19,17 +19,20 @@
<ul class="usa-fieldset usa-list--unstyled">
<li>
<a id="station-data-download-link" class="usa-link" target="_blank" rel="noopener">
- Monitoring location data shown on current graph
+ Current
</a>
+ <span id="station-tooltip"></span>
</li>
- <li class="usa-link">
+ <li>
<a id="station-compare-data-download-link" class="usa-link" target="_blank" rel="noopener"></a>
+ <span id="compare-tooltip"></span>
</li>
- <li class="usa-link">
+ <li>
<a id="median-data-download-link" class="usa-link" target="_blank" rel="noopener"></a>
+ <span id="median-tooltip"></span>
</li>
<li>
- Information about this Monitoring Location (metadata) -
+ Metadata -
<a id="metadata-download-link" class="usa-link" target="_blank" rel="noopener">
standard
</a>
@@ -37,6 +40,7 @@
<a id="metadata-expanded-download-link" class="usa-link" target="_blank" rel="noopener">
expanded
</a>
+ <span id="metadata-tooltip"></span>
</li>
</ul>
</div>
--
GitLab