restructure to avoid necessary indentation

assets/src/scripts/components/hydrograph/parameters.js

@@ -84,120 +84,122 @@ export const addSparkLine = function(svgSelection, {seriesLineSegments, scales})
 export const plotSeriesSelectTable = function (elem, {availableTimeseries, lineSegmentsByParmCd, timeSeriesScalesByParmCd, layout}) {
     elem.select('#select-timeseries').remove();
 
+    if (!availableTimeseries.length) {
+        return;
+    }
+
     // only bother to create the table if there are timeseries available
-    if (availableTimeseries.length > 0) {
-        const screenSizeCheck = layout.windowWidth <= SMALL_SCREEN_WIDTH;
-        let columnHeaders;
-        if (screenSizeCheck) {
-            columnHeaders = ['Parameter Code', 'Description', 'Preview'];
-        } else {
-            columnHeaders = ['Parameter Code', 'Description', 'Now', 'Last Year', 'Median', 'Preview'];
-        }
-        const table = elem
-            .append('table')
-                .attr('id', 'select-timeseries')
-                .classed('usa-table-borderless', true);
-
-        table.append('caption').text('Select a timeseries');
-
-        table.append('thead')
-            .append('tr')
-                .selectAll('th')
-                .data(columnHeaders)
-                .enter().append('th')
-                    .attr('scope', 'col')
-                    .text(d => d);
-
-        table.append('tbody')
-            .selectAll('tr')
-            .data(availableTimeseries)
-            .enter().append('tr')
-                .attr('ga-on', 'click')
-                .attr('ga-event-category', 'TimeseriesGraph')
-                .attr('ga-event-action', 'selectTimeSeries')
-                .classed('selected', parm => parm[1].selected)
-                .on('click', dispatch(function (parm) {
-                    if (!parm[1].selected) {
-                        return Actions.setCurrentParameterCode(parm[0], parm[1].variableID);
-                    }
-                }))
-                .call(tr => {
-                    let parmCdCol = tr.append('td')
-                        .attr('scope', 'row');
-                    parmCdCol.append('span')
-                            .text(parm => parm[0]);
-                    parmCdCol.append('div')
-                            .attr('class', 'tooltip-item parameter-tooltip');
+    const screenSizeCheck = layout.windowWidth <= SMALL_SCREEN_WIDTH;
+    let columnHeaders;
+    if (screenSizeCheck) {
+        columnHeaders = ['Parameter Code', 'Description', 'Preview'];
+    } else {
+        columnHeaders = ['Parameter Code', 'Description', 'Now', 'Last Year', 'Median', 'Preview'];
+    }
+    const table = elem
+        .append('table')
+            .attr('id', 'select-timeseries')
+            .classed('usa-table-borderless', true);
+
+    table.append('caption').text('Select a timeseries');
+
+    table.append('thead')
+        .append('tr')
+            .selectAll('th')
+            .data(columnHeaders)
+            .enter().append('th')
+                .attr('scope', 'col')
+                .text(d => d);
+
+    table.append('tbody')
+        .selectAll('tr')
+        .data(availableTimeseries)
+        .enter().append('tr')
+            .attr('ga-on', 'click')
+            .attr('ga-event-category', 'TimeseriesGraph')
+            .attr('ga-event-action', 'selectTimeSeries')
+            .classed('selected', parm => parm[1].selected)
+            .on('click', dispatch(function (parm) {
+                if (!parm[1].selected) {
+                    return Actions.setCurrentParameterCode(parm[0], parm[1].variableID);
+                }
+            }))
+            .call(tr => {
+                let parmCdCol = tr.append('td')
+                    .attr('scope', 'row');
+                parmCdCol.append('span')
+                        .text(parm => parm[0]);
+                parmCdCol.append('div')
+                        .attr('class', 'tooltip-item parameter-tooltip');
+                tr.append('td')
+                    .text(parm => parm[1].description);
+                // if screen size is medium/large, place "Now", "Previous Year", and "Median Data" in the table
+                // under the appropriate column headers
+                if (!screenSizeCheck) {
                     tr.append('td')
-                        .text(parm => parm[1].description);
-                    // if screen size is medium/large, place "Now", "Previous Year", and "Median Data" in the table
-                    // under the appropriate column headers
-                    if (!screenSizeCheck) {
-                        tr.append('td')
-                            .html(parm => {
-                                const subScript = parm[1].currentTimeseriesCount > 1 ? `<sub>${parm[1].currentTimeseriesCount}</sub>` : '';
-                                return parm[1].currentTimeseriesCount ? `<i class="fa fa-check" aria-label="Current year data available"></i>${subScript}` : '';
-                            });
-                        tr.append('td')
-                            .html(parm => {
-                                const subScript = parm[1].compareTimeseriesCount > 1 ? `<sub>${parm[1].compareTimeseriesCount}</sub>` : '';
-                                return parm[1].compareTimeseriesCount ? `<i class="fa fa-check" aria-label="Previous year data available"></i>${subScript}` : '';
-                            });
-                        tr.append('td')
-                            .html(parm => {
-                                const subScript = parm[1].medianTimeseriesCount > 1 ? `<sub>${parm[1].medianTimeseriesCount}</sub>` : '';
-                                return parm[1].medianTimeseriesCount ? `<i class="fa fa-check" aria-label="Median data available"></i>${subScript}` : '';
-                            });
-                        }
+                        .html(parm => {
+                            const subScript = parm[1].currentTimeseriesCount > 1 ? `<sub>${parm[1].currentTimeseriesCount}</sub>` : '';
+                            return parm[1].currentTimeseriesCount ? `<i class="fa fa-check" aria-label="Current year data available"></i>${subScript}` : '';
+                        });
                     tr.append('td')
-                        .append('svg')
-                        .attr('width', SPARK_LINE_DIM.width.toString())
-                        .attr('height', SPARK_LINE_DIM.height.toString());
-                });
-
-        // seems to be more straight-forward to access an element's joined
-        // data by iterating over a selection...
-
-        // if screen size is small, place "Now", "Previous Year", and "Median Data" in a tooltip
-        if (screenSizeCheck) {
-            table.selectAll('div.tooltip-item').each(function() {
-                let selection = select(this);
-                selection.append('sup')
-                    .append('i')
-                        .attr('class', 'fa fa-info-circle');
-                let tooltipContent = selection.append('div').attr('class', 'tooltip');
-                let tooltipTable = tooltipContent.append('table')
-                    .attr('class', 'tooltip-table');
-                tooltipTable.append('caption').text('Available Data');
-                tooltipTable.append('thead')
-                    .append('tr')
-                        .selectAll('th')
-                        .data(['Now', 'Last Year', 'Median'])
-                        .enter()
-                        .append('th')
-                            .attr('scope', 'col')
-                            .text(d => d);
-
-                let tableRow = tooltipTable.append('tr');
-                tableRow.append('td')
-                    .html(d => d[1].currentTimeseriesCount ? '<i class="fa fa-check" aria-label="Current year data available"></i>' : '');
-                tableRow.append('td')
-                    .html(d => d[1].compareTimeseriesCount ? '<i class="fa fa-check" aria-label="Previous year data available"></i>' : '');
-                tableRow.append('td')
-                    .html(d => d[1].medianTimeseriesCount ? '<i class="fa fa-check" aria-label="Median data available"></i>' : '');
-
+                        .html(parm => {
+                            const subScript = parm[1].compareTimeseriesCount > 1 ? `<sub>${parm[1].compareTimeseriesCount}</sub>` : '';
+                            return parm[1].compareTimeseriesCount ? `<i class="fa fa-check" aria-label="Previous year data available"></i>${subScript}` : '';
+                        });
+                    tr.append('td')
+                        .html(parm => {
+                            const subScript = parm[1].medianTimeseriesCount > 1 ? `<sub>${parm[1].medianTimeseriesCount}</sub>` : '';
+                            return parm[1].medianTimeseriesCount ? `<i class="fa fa-check" aria-label="Median data available"></i>${subScript}` : '';
+                        });
+                    }
+                tr.append('td')
+                    .append('svg')
+                    .attr('width', SPARK_LINE_DIM.width.toString())
+                    .attr('height', SPARK_LINE_DIM.height.toString());
             });
-        }
-        table.selectAll('tbody svg').each(function(d) {
+
+    // seems to be more straight-forward to access an element's joined
+    // data by iterating over a selection...
+
+    // if screen size is small, place "Now", "Previous Year", and "Median Data" in a tooltip
+    if (screenSizeCheck) {
+        table.selectAll('div.tooltip-item').each(function() {
             let selection = select(this);
-            const parmCd = d[0];
-            const lineSegments = lineSegmentsByParmCd[parmCd] ? lineSegmentsByParmCd[parmCd] : [];
-            for (const seriesLineSegments of lineSegments) {
-                selection.call(addSparkLine, {
-                    seriesLineSegments: seriesLineSegments,
-                    scales: timeSeriesScalesByParmCd[parmCd]
-                });
-            }
+            selection.append('sup')
+                .append('i')
+                    .attr('class', 'fa fa-info-circle');
+            let tooltipContent = selection.append('div').attr('class', 'tooltip');
+            let tooltipTable = tooltipContent.append('table')
+                .attr('class', 'tooltip-table');
+            tooltipTable.append('caption').text('Available Data');
+            tooltipTable.append('thead')
+                .append('tr')
+                    .selectAll('th')
+                    .data(['Now', 'Last Year', 'Median'])
+                    .enter()
+                    .append('th')
+                        .attr('scope', 'col')
+                        .text(d => d);
+
+            let tableRow = tooltipTable.append('tr');
+            tableRow.append('td')
+                .html(d => d[1].currentTimeseriesCount ? '<i class="fa fa-check" aria-label="Current year data available"></i>' : '');
+            tableRow.append('td')
+                .html(d => d[1].compareTimeseriesCount ? '<i class="fa fa-check" aria-label="Previous year data available"></i>' : '');
+            tableRow.append('td')
+                .html(d => d[1].medianTimeseriesCount ? '<i class="fa fa-check" aria-label="Median data available"></i>' : '');
+
         });
     }
+    table.selectAll('tbody svg').each(function(d) {
+        let selection = select(this);
+        const parmCd = d[0];
+        const lineSegments = lineSegmentsByParmCd[parmCd] ? lineSegmentsByParmCd[parmCd] : [];
+        for (const seriesLineSegments of lineSegments) {
+            selection.call(addSparkLine, {
+                seriesLineSegments: seriesLineSegments,
+                scales: timeSeriesScalesByParmCd[parmCd]
+            });
+        }
+    });
 };