Play first current and compare series (like the tooltips)

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

-const { max, min } = require('d3-array');
 const { scaleLinear } = require('d3-scale');
 const { select } = require('d3-selection');
 const memoize = require('fast-memoize');
 const { createSelector, createStructuredSelector } = require('reselect');
 
-const { flatPointsSelector } = require('./timeseries');
+const { yScaleSelector } = require('./scales');
 const { tsDatumSelector } = require('./tooltip');
 
 const { dispatch, link } = require('../../lib/redux');
@@ -14,49 +13,25 @@ const { Actions } = require('../../store');
 // Higher tones get lower volume
 const volumeScale = scaleLinear().range([2, .3]);
 
-
 const AudioContext = window.AudioContext || window.webkitAudioContext;
 const getAudioContext = memoize(function () {
-    return AudioContext ? new AudioContext() : null;
-});
-
-// Create a compressor node, to prevent clipping noises
-const getCompressor = memoize(audioCtx => {
-    const compressor = audioCtx.createDynamicsCompressor();
-    compressor.threshold.setValueAtTime(-50, getAudioContext().currentTime);
-    compressor.knee.setValueAtTime(40, getAudioContext().currentTime);
-    compressor.ratio.setValueAtTime(12, getAudioContext().currentTime);
-    compressor.attack.setValueAtTime(0, getAudioContext().currentTime);
-    compressor.release.setValueAtTime(0.25, getAudioContext().currentTime);
-    return compressor;
+    return new AudioContext();
 });
 
-const getOscillator = function(audioCtx, value) {
+export const createSound = memoize(/* eslint-disable no-unused-vars */ tsKey => {
+    const audioCtx = getAudioContext();
     const oscillator = audioCtx.createOscillator();
-    //oscillator.type = 'triangle';
-    oscillator.type = 'sine';
-
-    // Set the frequency, in hertz
-    oscillator.frequency.value = value;
-
-    return oscillator;
-};
-
-const getGainNode = function(audioCtx, value) {
     const gainNode = audioCtx.createGain();
-    gainNode.gain.value = volumeScale(value);
-    gainNode.gain.value = 1;
-
-    return gainNode;
-};
+    const compressor = audioCtx.createDynamicsCompressor();
 
-export const createSound = function (value) {
-    const audioCtx = getAudioContext();
-    const oscillator = getOscillator(audioCtx, value);
-    const gainNode = getGainNode(audioCtx, value);
-    const compressor = getCompressor(audioCtx);
+    compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
+    compressor.knee.setValueAtTime(40, audioCtx.currentTime);
+    compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
+    compressor.attack.setValueAtTime(0, audioCtx.currentTime);
+    compressor.release.setValueAtTime(0.25, audioCtx.currentTime);
 
     // Connect the oscillator to the gainNode to modulate volume
+    oscillator.type = 'sine';
     oscillator.connect(gainNode);
 
     // Connect the gainNode to the compressor to address clipping
@@ -68,23 +43,35 @@ export const createSound = function (value) {
     // Start the oscillator
     oscillator.start();
 
-    // This rapidly ramps sound down
-    gainNode.gain.setTargetAtTime(0, audioCtx.currentTime, .2);
-};
+    return {oscillator, gainNode, compressor};
+});
 
-const audibleScale = function (domain) {
-    return scaleLinear().domain(domain).range([80, 1500]);
+export const updateSound = function ({enabled, points}) {
+    const audioCtx = getAudioContext();
+    for (const tsKey of Object.keys(points)) {
+        const point = points[tsKey];
+        const {oscillator, gainNode} = createSound(tsKey);
+        oscillator.frequency.setTargetAtTime(
+            enabled && point ? point : null,
+            audioCtx.currentTime,
+            .2
+        );
+        gainNode.gain.setTargetAtTime(
+            enabled && point ? volumeScale(point) : null,
+            audioCtx.currentTime,
+            .2
+        );
+    }
 };
 
 export const audibleInterfaceOnSelector = state => state.audibleInterfaceOn;
 
 export const audibleScaleSelector = memoize(tsKey => createSelector(
-    flatPointsSelector(tsKey),
-    (points) => {
-        return audibleScale([
-            min(points.map((datum) => datum.value)),
-            max(points.map((datum) => datum.value))
-        ]);
+    yScaleSelector,
+    (scale) => {
+        const audibleScale = scale.copy();
+        audibleScale.range([80, 1500]);
+        return audibleScale;
     }
 ));
 
@@ -94,15 +81,6 @@ export const audibleUI = function (elem) {
         return;
     }
 
-    elem.append('audio')
-        .attr('id', 'audible-controls')
-        .attr('controls', true)
-        .attr('muted', true)
-        .style('width', '100%')
-        .on('change', function () {
-            console.log(arguments);
-        });
-
     elem.append('input')
         .attr('type', 'checkbox')
         .attr('id', 'audible-checkbox')
@@ -121,18 +99,21 @@ export const audibleUI = function (elem) {
 
     // Listen for focus changes, and play back the audio representation of
     // the selected points.
-    // FIXME: Handle more than just the first current time series.
-    elem.call(link(function (elem, {datum, enabled, scale}) {
-        if (!enabled) {
-            return;
-        }
-        if (!datum) {
-            return;
-        }
-        createSound(scale(datum.value));
+    // TODO: Handle more than just the first time series of each tsKey. This can
+    // piggyback on work to support multiple tooltip selections.
+    elem.call(link(function (elem, {enabled, datumCurrent, datumCompare, yScaleCurrent, yScaleCompare}) {
+        updateSound({
+            points: {
+                current: datumCurrent ? yScaleCurrent(datumCurrent.value) : null,
+                compare: datumCompare ? yScaleCompare(datumCompare.value) : null
+            },
+            enabled
+        });
     }, createStructuredSelector({
-        datum: tsDatumSelector('current'),
         enabled: audibleInterfaceOnSelector,
-        scale: audibleScaleSelector('current')
+        datumCurrent: tsDatumSelector('current'),
+        datumCompare: tsDatumSelector('compare'),
+        yScaleCurrent: audibleScaleSelector('current'),
+        yScaleCompare: audibleScaleSelector('compare')
     })));
 };

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

@@ -2,14 +2,79 @@ const { select } = require('d3-selection');
 
 const { audibleUI } = require('./audible');
 
+const { provide } = require('../../lib/redux');
+const { Actions, configureStore } = require('../../store');
+
+
+const TEST_STATE = {
+    series: {
+        timeSeries: {
+            '00060:current': {
+                startTime: new Date('2018-01-02T15:00:00.000-06:00'),
+                endTime: new Date('2018-01-02T15:00:00.000-06:00'),
+                points: [{
+                    dateTime: new Date('2018-01-02T15:00:00.000-06:00'),
+                    value: 10,
+                    qualifiers: ['P']
+                }],
+                method: 'method1',
+                tsKey: 'current',
+                variable: 45807197
+            },
+            '00060:compare': {
+                startTime: new Date('2018-01-02T15:00:00.000-06:00'),
+                endTime: new Date('2018-01-02T15:00:00.000-06:00'),
+                points: [{
+                    dateTime: new Date('2018-01-02T15:00:00.000-06:00'),
+                    value: 10,
+                    qualifiers: ['P']
+                }],
+                method: 'method1',
+                tsKey: 'compare',
+                variable: 45807197
+            }
+        },
+        variables: {
+            '45807197': {
+                variableCode: '00060',
+                oid: 45807197,
+                unit: {
+                    unitCode: 'unitCode'
+                }
+            }
+        }
+    },
+    currentVariableID: '45807197',
+    showSeries: {
+        current: true,
+        compare: true
+    }
+};
+
 
 describe('Audible interface', () => {
+    let container;
     beforeEach(() => {
+        container = select('body').append('div');
+        container
+            .call(provide(configureStore(TEST_STATE)))
+            .call(audibleUI);
     });
 
     afterEach(() => {
+        container.remove();
+    });
+
+    it('renders', () => {
+        const checkbox = select('#audible-checkbox');
+        expect(checkbox).toBeTruthy();
     });
 
-    it('checkbox created successfully', () => {
+    it('does nothing unexpected when playing a sound', () => {
+        Actions.toggleAudibleInterface(true);
+        Actions.setTooltipTime(
+            TEST_STATE.series.timeSeries['00060:current'].points[0].dateTime,
+            TEST_STATE.series.timeSeries['00060:compare'].points[0].dateTime
+        );
     });
 });

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

@@ -358,9 +358,9 @@ const attachToNode = function (store, node, {siteno} = {}) {
     store.dispatch(Actions.resizeUI(window.innerWidth, node.offsetWidth));
     select(node)
         .call(provide(store))
-        .call(audibleUI)
         .call(timeSeriesGraph)
         .call(timeSeriesLegend)
+        .call(audibleUI)
         .select('.hydrograph-last-year-input')
             .on('change', dispatch(function () {
                 return Actions.toggleTimeseries('compare', this.checked);

assets/src/styles/components/_hydrograph.scss

@@ -203,3 +203,7 @@ table#select-timeseries {
     }
 
 }
+
+#audible-label {
+    padding-left: 2em;
+}