simplify code and make it more readable

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

@@ -12,7 +12,7 @@ const { dispatch, link, provide } = require('../../lib/redux');
 const { appendAxes, axesSelector } = require('./axes');
 const { ASPECT_RATIO_PERCENT, MARGIN, CIRCLE_RADIUS, layoutSelector } = require('./layout');
 const { drawSimpleLegend, legendDisplaySelector, createLegendMarkers } = require('./legend');
-const { pointsSelector, lineSegmentsSelector, isVisibleSelector } = require('./points');
+const { pointsSelector, lineSegmentsSelector, isVisibleSelector, MASK_DESC } = require('./points');
 const { xScaleSelector, yScaleSelector } = require('./scales');
 const { Actions, configureStore } = require('./store');
 const { createTooltip } = require('./tooltip');
@@ -62,10 +62,8 @@ const plotDataLine = function (elem, {visible, lines, tsDataKey, xScale, yScale}
                 .attr('d', tsLine);
         }
         else {
-            let maskName = line.classes.dataMask.toLowerCase();
-            if (maskName === '***') {
-                maskName = 'unavailable';
-            }
+            let maskCode = line.classes.dataMask.toLowerCase();
+            let maskDisplayName = MASK_DESC[maskCode].replace(' ', '-').toLowerCase();
             let xMaskExtent = extent(line.points, d => d.time);
             let [xDomainStart, xDomainEnd] = xMaskExtent;
             let [yRangeStart, yRangeEnd] = yScale.domain();
@@ -78,7 +76,7 @@ const plotDataLine = function (elem, {visible, lines, tsDataKey, xScale, yScale}
                 .attr('y', yScale(yRangeEnd))
                 .attr('width', xScale(xDomainEnd) - xScale(xDomainStart))
                 .attr('height', Math.abs(yScale(yRangeEnd)- yScale(yRangeStart)))
-                .attr('class', `mask ${maskName}-mask`);
+                .attr('class', `mask ${maskDisplayName}-mask`);
 
             let patternId = tsDataKey === 'compare' ? 'url(#hash-135)' : 'url(#hash-45)';
 

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

@@ -2,6 +2,7 @@
 const { createSelector } = require('reselect');
 const { defineLineMarker, defineCircleMarker, defineRectangleMarker, rectangleMarker } = require('./markers');
 const { CIRCLE_RADIUS } = require('./layout');
+const { MASK_DESC } = require('./points');
 
 
 /**
@@ -146,10 +147,9 @@ const createLegendMarkers = function(dataPlotElements, lineSegments=[]) {
     lineSegments.map(segment => masks.push(segment.classes.dataMask));
     let uniqueMasks = new Set(masks.filter(x => x !== null));
     for (let uniqueMask of uniqueMasks) {
-        let maskLower = uniqueMask.toLowerCase();
-        let maskClass = `${maskLower}-mask`;
-        let maskText = maskLower.charAt(0).toUpperCase() + maskLower.slice(1);
-        marker = defineRectangleMarker(null, maskClass, maskText, null);
+        let maskDisplayName = MASK_DESC[uniqueMask];
+        let maskClass = `${maskDisplayName.replace(' ', '-').toLowerCase()}-mask`;
+        marker = defineRectangleMarker(null, maskClass, maskDisplayName, null);
         legendMarkers.push(marker);
     }
     return legendMarkers;

assets/src/scripts/components/hydrograph/legend.spec.js

@@ -109,7 +109,7 @@ describe('Legend module', () => {
             ]);
         });
 
-        fit('should line segment markers for display', () => {
+        it('should line segment markers for display', () => {
             let result = createLegendMarkers({
                 dataItems: ['current', 'medianStatistics'],
                 metadata: {
@@ -120,11 +120,11 @@ describe('Legend module', () => {
                 }
             }, [
                 {
-                    classes: {approved: false, estimated: false, dataMask: 'ICE'},
+                    classes: {approved: false, estimated: false, dataMask: 'ice'},
                     points: []
                 },
                 {
-                    classes: {approved: false, estimated: false, dataMask: 'FLD'},
+                    classes: {approved: false, estimated: false, dataMask: 'eqp'},
                     points: []
                 }
             ]);
@@ -164,8 +164,8 @@ describe('Legend module', () => {
                 {
                     type: rectangleMarker,
                     domId: null,
-                    domClass: 'fld-mask',
-                    text: 'Flood',
+                    domClass: 'equipment-malfunction-mask',
+                    text: 'Equipment Malfunction',
                     groupId: null,
                     fill: null
                 }

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

 const { createSelector, defaultMemoize: memoize } = require('reselect');
 const { setEquality } = require('../../utils');
 
+const MASK_DESC = {
+    ice: 'Ice',
+    fld: 'Flood',
+    bkw: 'Backwater',
+    zfl: 'Zeroflow',
+    dry: 'Dry',
+    ssn: 'Seasonal',
+    pr: 'Partial Record',
+    rat: 'Rating Development',
+    eqp: 'Equipment Malfunction',
+    mnt: 'Maintenance',
+    dis: 'Discontinued',
+    tst: 'Test',
+    pmp: 'Pump',
+    '***': 'Unavailable'
+};
 
 /**
  * Returns the points for a given timeseries.
@@ -41,22 +57,7 @@ const lineSegmentsSelector = memoize(tsDataKey => createSelector(
 
         let lastClasses = {};
 
-        const masks = new Set([
-            'ICE',
-            'FLD',
-            'BKW',
-            'ZFL',
-            'DRY',
-            'SSN',
-            'PR',
-            'RAT',
-            'EQP',
-            'MNT',
-            'DIS',
-            '***',
-            'TST',
-            'PMP'
-        ]);
+        const masks = new Set(Object.keys(MASK_DESC));
 
         for (let pt of points) {
             // Classes to put on the line with this point.
@@ -66,7 +67,7 @@ const lineSegmentsSelector = memoize(tsDataKey => createSelector(
                 dataMask: null
             };
             if (pt.value === null) {
-                let qualifiers = new Set(pt.qualifiers.map(q => q.toUpperCase()));
+                let qualifiers = new Set(pt.qualifiers.map(q => q.toLowerCase()));
                 // current business rules specify that a particular data point
                 // will only have at most one masking qualifier
                 let maskIntersection = new Set([...masks].filter(x => qualifiers.has(x)));
@@ -102,4 +103,4 @@ const lineSegmentsSelector = memoize(tsDataKey => createSelector(
 ));
 
 
-module.exports = { pointsSelector, lineSegmentsSelector, isVisibleSelector };
+module.exports = { pointsSelector, lineSegmentsSelector, isVisibleSelector, MASK_DESC };

assets/src/scripts/components/hydrograph/points.spec.js

@@ -145,7 +145,7 @@ describe('Points module', () => {
                     classes: {
                         approved: false,
                         estimated: false,
-                        dataMask: 'ICE'
+                        dataMask: 'ice'
                     },
                     points: [{
                         value: null,
@@ -158,7 +158,7 @@ describe('Points module', () => {
                     classes: {
                         approved: false,
                         estimated: false,
-                        dataMask: 'FLD'
+                        dataMask: 'fld'
                     },
                     points: [{
                         value: null,

assets/src/styles/components/_hydrograph.scss

@@ -102,37 +102,37 @@ $estimated: black;
         .ice-mask {
             fill: #33daff;
         }
-        .fld-mask {
+        .flood-mask {
             fill: #0c7d40;
         }
-        .zfl-mask {
+        .zeroflow-mask {
             fill: #f4f727;
         }
         .dry-mask {
             fill: #9a9b77;
         }
-        .ssn-mask {
+        .seasonal-mask {
             fill: #17fc04;
         }
-        .pr-mask {
+        .partial-record-mask {
             fill: #ec14fe;
         }
-        .rat-mask {
+        .rating-development-mask {
             fill: #fe141b;
         }
-        .eqp-mask {
+        .equipment-malfunction-mask {
             fill: #0557fc;
         }
-        .mnt-mask {
+        .maintenance-mask {
             fill: #01fab6;
         }
         .unavailable-mask {
             fill: #abb2b9;
         }
-        .tst-mask {
+        .test-mask {
             fill: #4729a5;
         }
-        .pmp-mask {
+        .pump-mask {
             fill: #3498db;
         }
     }