Styling and peer review comments

assets/src/scripts/monitoring-location/components/hydrograph/data-table.js

@@ -8,6 +8,7 @@ import {link} from 'ui/lib/d3-redux';
 import {getGroundwaterLevelsTableData} from './selectors/discrete-data';
 import {getIVTableData} from './selectors/iv-data';
 import {drawDownloadForm} from './download-data';
+import {appendButton} from './select-actions';
 
 const TABLE_CAPTION = {
     iv: 'Instantaneous value data',
@@ -107,7 +108,18 @@ export const drawDataTables = function(elem, store, siteno, agencyCd) {
             dataKind: () => 'gw',
             currentData: getGroundwaterLevelsTableData
         })));
-    elem.append('div')
-        .attr('id', 'download-graph-data-container')
-        .call(drawDownloadForm, store, siteno, agencyCd);
+    var container = elem.append('div')
+        .attr('class', 'select-actions-container');
+    var buttonGroup = container.append('ul')
+        .attr('class', 'select-actions-button-group usa-button-group');
+    appendButton(buttonGroup, {
+        uswdsIcon:'file_download',
+        buttonLabel:'Retrieve data',
+        idOfDivToControl: 'download-graph-data-container-data-table'
+    });
+    container.append('div')
+        .attr('id', 'download-graph-data-container-data-table')
+        .attr('hidden', 'true')
+        .call(drawDownloadForm, store, siteno, agencyCd, 'data-table');
+
 };
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/data-table.test.js

@@ -46,7 +46,7 @@ describe('monitoring-location/components/hydrograph/data-table', () => {
         const gwTable = testDiv.select('#gw-table-container').select('table');
         expect(gwTable.select('caption').text()).toBe('Field visit data');
         expect(gwTable.selectAll('tr').size()).toBe(5);
-        const downloadSection = testDiv.select('#download-graph-data-container');
+        const downloadSection = testDiv.select('#download-graph-data-container-data-table');
         expect(downloadSection.selectAll('input[type="radio"]').size()).toBe(3);
     });
 

assets/src/scripts/monitoring-location/components/hydrograph/download-data.js

@@ -83,10 +83,6 @@ const getSiteMetaDataURL = function(siteno) {
     });
 };
 
-const uniqueNumber = (length=16) => {
-    return parseInt(Math.ceil(Math.random() * Date.now()).toPrecision(length).toString().replace('.', ''));
-};
-
 /*
  * Helper function to render a single checkbox in container.
  */
@@ -97,7 +93,7 @@ const drawRadioButton = function(container, inputID, label, value, nameSuffix) {
         .attr('class', 'usa-radio__input')
         .attr('id', inputID)
         .attr('type', 'radio')
-        .attr('name', 'retrieve-value-'+nameSuffix)
+        .attr('name', `retrieve-value-${nameSuffix}`)
         .attr('value', value);
     radioContainer.append('label')
         .attr('class', 'usa-radio__label')
@@ -113,27 +109,27 @@ const drawRadioButtons = function(container, {
     hasVisibleCompareIVData,
     hasVisibleMedianData,
     hasVisibleGroundwaterLevels,
-    primaryParameter
+    primaryParameter,
+    uniqueId
 }) {
     container.select('.download-radio-container').remove();
-    let uniqueSuffix = uniqueNumber();
     const radioContainer = container.append('div')
         .attr('class', 'download-radio-container');
     if (primaryParameter && !isCalculatedTemperature(primaryParameter.parameterCode)) {
         if (hasVisiblePrimaryIVData) {
-            radioContainer.call(drawRadioButton, 'download-primary-iv-data-'+uniqueSuffix, 'Current time-series data', 'primary', uniqueSuffix);
+            radioContainer.call(drawRadioButton, `download-primary-iv-data-${uniqueId}`, 'Current time-series data', 'primary', uniqueId);
         }
         if (hasVisibleCompareIVData) {
-            radioContainer.call(drawRadioButton, 'download-compare-iv-data-'+uniqueSuffix, 'Prior year time-series data', 'compare', uniqueSuffix);
+            radioContainer.call(drawRadioButton, `download-compare-iv-data-${uniqueId}`, 'Prior year time-series data', 'compare', uniqueId);
         }
         if (hasVisibleMedianData) {
-            radioContainer.call(drawRadioButton, 'download-median-data-'+uniqueSuffix, 'Median', 'median', uniqueSuffix);
+            radioContainer.call(drawRadioButton, `download-median-data-${uniqueId}`, 'Median', 'median', uniqueId);
         }
         if (hasVisibleGroundwaterLevels) {
-            radioContainer.call(drawRadioButton, 'download-field-visits-'+uniqueSuffix, 'Field visits', 'groundwater-levels', uniqueSuffix);
+            radioContainer.call(drawRadioButton, `download-field-visits-${uniqueId}`, 'Field visits', 'groundwater-levels', uniqueId);
         }
     }
-    radioContainer.call(drawRadioButton, 'download-site-meta-data-'+uniqueSuffix, 'About this location', 'site', uniqueSuffix);
+    radioContainer.call(drawRadioButton, `download-site-meta-data-${uniqueId}`, 'About this location', 'site', uniqueId);
 };
 
 /*
@@ -143,7 +139,7 @@ const drawRadioButtons = function(container, {
  * @param {Redux store} store
  * @param {String} siteno
  */
-export const drawDownloadForm = function(container, store, siteno, agencyCd) {
+export const drawDownloadForm = function(container, store, siteno, agencyCd, uniqueId) {
     const downloadContainer = container.append('div');
     const formContainer = downloadContainer.append('div')
         .attr('class', 'usa-form')
@@ -159,7 +155,10 @@ export const drawDownloadForm = function(container, store, siteno, agencyCd) {
             hasVisibleCompareIVData: hasVisibleIVData('compare'),
             hasVisibleMedianData: hasVisibleMedianStatisticsData,
             hasVisibleGroundwaterLevels: hasVisibleGroundwaterLevels,
-            primaryParameter: getPrimaryParameter
+            primaryParameter: getPrimaryParameter,
+            uniqueId: () => {
+                return uniqueId;
+            }
         })));
 
     const downloadButton = formContainer.append('button')

assets/src/scripts/monitoring-location/components/hydrograph/index.test.js

@@ -341,7 +341,8 @@ describe('monitoring-location/components/hydrograph module', () => {
         });
 
         it('should have two download data forms', () => {
-            expect(selectAll('#download-graph-data-container').size()).toBe(2);
+            expect(selectAll('#download-graph-data-container').size()).toBe(1);
+            expect(selectAll('#download-graph-data-container-data-table').size()).toBe(1);
         });
 
         it('should have method select element', () => {

assets/src/scripts/monitoring-location/components/hydrograph/select-actions.js

@@ -8,7 +8,7 @@ import {drawDownloadForm} from './download-data';
 /*
  * Helper function to render a select action button on listContainer
  */
-const appendButton = function(listContainer, {uswdsIcon, buttonLabel, idOfDivToControl}) {
+export const appendButton = function(listContainer, {uswdsIcon, buttonLabel, idOfDivToControl}) {
     const button = listContainer.append('li')
         .attr('class', 'usa-button-group__item')
         .append('button')
@@ -78,5 +78,5 @@ export const drawSelectActions = function(container, store, siteno, agencyCode)
     container.append('div')
         .attr('id', 'download-graph-data-container')
         .attr('hidden', true)
-        .call(drawDownloadForm, store, siteno, agencyCode);
+        .call(drawDownloadForm, store, siteno, agencyCode, 'container');
 };

assets/src/styles/components/hydrograph/_app.scss

@@ -68,7 +68,7 @@
     }
   }
 
-  #download-graph-data-container > div {
+  [id^='download-graph-data-container'] > div {
     @include uswds.grid-row;
     @include uswds.grid-gap;
     @include uswds.u-padding(2);