removing unused code, tests

assets/src/scripts/monitoring-location/components/hydrograph/cursor-slider.js

-import {sliderTop} from 'd3-simple-slider';
-import {createStructuredSelector} from 'reselect';
-
-import {link} from 'ui/lib/d3-redux';
-
-import {getGraphCursorOffset} from 'ml/selectors/hydrograph-state-selector';
-
-import {setGraphCursorOffset} from 'ml/store/hydrograph-state';
-
-import {getMainXScale} from './selectors/scales';
-import {getMainLayout} from './selectors/layout';
-
-
-
-/*
- * Renders the cursor slider and sets up the redux event handlers to update the slider
- * when needed.
- * @param {D3 selection} svg
- * @param {Redux store} store
- */
-export const drawCursorSlider = function(svg, store) {
-    const slider = sliderTop()
-        .displayValue(false)
-        .ticks(0);
-
-    svg.append('g')
-        .attr('class', 'cursor-slider-group')
-        .attr('ga-on', 'click')
-        .attr('ga-event-category', 'hydrograph-interaction')
-        .attr('ga-event-action', 'clickOnSlider')
-        .call(link(store, (group, {xScale, layout}, store ) => {
-            const [startMillis, endMillis] = xScale.domain();
-            const [startX, endX] = xScale.range();
-            const cursorOffset = getGraphCursorOffset(store.getState());
-
-            slider
-                .min(startMillis)
-                .max(endMillis)
-                .width(endX - startX);
-            slider.silentValue(cursorOffset ? slider.min() + cursorOffset : slider.max());
-
-            group
-                .attr('transform', `translate(${layout.margin.left},15)`)
-                .call(slider);
-            slider.on('onchange', (val) => {
-                store.dispatch(setGraphCursorOffset(val - startMillis));
-            });
-        }, createStructuredSelector({
-            xScale: getMainXScale('current'),
-            layout: getMainLayout
-        }), store))
-        .call(link(store, (group, cursorOffset) => {
-            slider.silentValue(cursorOffset ? slider.min() + cursorOffset : slider.max());
-        }, getGraphCursorOffset));
-};
-

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

-import {select} from 'd3-selection';
-
-import config from 'ui/config';
-import * as utils from 'ui/utils';
-
-import {configureStore} from 'ml/store';
-
-import {TEST_PRIMARY_IV_DATA, TEST_CURRENT_TIME_RANGE} from './mock-hydrograph-state';
-import {drawCursorSlider} from './cursor-slider';
-
-describe('monitoring-location/components/hydrograph/cursor-slider', () => {
-    utils.mediaQuery = jest.fn().mockReturnValue(true);
-    config.locationTimeZone = 'America/Chicago';
-    const TEST_STATE = {
-        hydrographData: {
-            primaryIVData: TEST_PRIMARY_IV_DATA,
-            currentTimeRAnge: TEST_CURRENT_TIME_RANGE
-        },
-        hydrographState: {
-            graphCursorOffset: 500000
-        },
-        ui: {
-            windowWidth: 1300,
-            width: 990
-        }
-    };
-
-    describe('drawCursorSlider', () => {
-        let svg;
-        let store;
-        beforeEach(() => {
-            svg = select('body').append('svg');
-            store = configureStore(TEST_STATE);
-        });
-
-        afterEach(() => {
-            svg.remove();
-        });
-
-        it('Creates a cursor slider', () => {
-            drawCursorSlider(svg, store);
-
-            const sliderGroup = svg.selectAll('.cursor-slider-group');
-            expect(sliderGroup.size()).toBe(1);
-            expect(sliderGroup.selectAll('.slider').size()).toBe(1);
-        });
-    });
-});
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/tooltip.js

@@ -15,7 +15,6 @@ import {getCursorTime, getIVDataCursorPoint, getIVDataTooltipPoint, getGroundwat
 import {getMainLayout} from './selectors/layout';
 import {getMainXScale, getMainYScale} from './selectors/scales';
 import {getPrimaryParameter} from './selectors/time-series-data';
-import {drawCursorSlider} from './cursor-slider';
 
 
 const getIVDataTooltipTextInfo = function(point, dataKind, unitCode) {
@@ -165,28 +164,3 @@ export const drawTooltipFocus = function(elem, store) {
         setGraphCursorOffset)
     );
 };
-
-/*
- * Initial rendering of the tooltip slider
- * @param {D3 selection} elem
- * @param {Redux store} store
- */
-export const initializeTooltipCursorSlider = function(elem, store) {
-    elem.append('svg')
-        .classed('cursor-slider-svg', true)
-        .attr('xmlns', 'http://www.w3.org/2000/svg')
-        .call(link(store, (elem, layout) => {
-                elem.attr('viewBox', `0 0 ${layout.width + layout.margin.left + layout.margin.right} 25`);
-            }, getMainLayout));
-};
-
-/*
- * Renders the cursor slider used to move the tooltip focus and sets up handlers
- * to update the slider as the tooltip focus changes.
- * @param {D3 selection} elem
- * @param {Redux store} store
- */
-export const drawTooltipCursorSlider = function(elem, store) {
-    elem.select('.cursor-slider-svg')
-        .call(drawCursorSlider, store);
-};

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

@@ -6,7 +6,7 @@ import * as utils from 'ui/utils';
 import {configureStore} from 'ml/store';
 
 import {TEST_GW_LEVELS, TEST_PRIMARY_IV_DATA, TEST_SECONDARY_IV_DATA, TEST_CURRENT_TIME_RANGE} from './mock-hydrograph-state';
-import {drawTooltipText, drawTooltipFocus, drawTooltipCursorSlider, initializeTooltipCursorSlider} from './tooltip';
+import {drawTooltipText, drawTooltipFocus} from './tooltip';
 
 describe('monitoring-location/components/hydrograph/tooltip module', () => {
     utils.mediaQuery = jest.fn().mockReturnValue(true);
@@ -146,27 +146,4 @@ describe('monitoring-location/components/hydrograph/tooltip module', () => {
             expect(svg.select('.focus-overlay').size()).toBe(1);
         });
     });
-
-    describe('initializeTooltipCursorSlider and drawTooltipCursorSlider', () => {
-        let div;
-        beforeEach(() => {
-            div = select('body').append('div');
-        });
-
-        afterEach(() => {
-            div.remove();
-        });
-
-        it('should render the cursor slider', () => {
-            let store = configureStore(TEST_STATE);
-            initializeTooltipCursorSlider(div, store);
-            drawTooltipCursorSlider(div, store);
-
-            const sliderSvg = div.selectAll('.cursor-slider-svg');
-            const slider = sliderSvg.selectAll('.slider');
-
-            expect(sliderSvg.size()).toBe(1);
-            expect(slider.size()).toBe(1);
-        });
-    });
 });

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.test.js

@@ -4,6 +4,7 @@ import ReduxConnectVue from 'redux-connect-vue';
 import {createStructuredSelector} from 'reselect';
 import {configureStore} from 'ml/store';
 import * as utils from 'ui/utils';
+import {Actions as uiActions} from 'ml/store/ui-state';
 import {TEST_PRIMARY_IV_DATA, TEST_CURRENT_TIME_RANGE} from '../mock-hydrograph-state';
 
 import CursorSlider from './cursor-slider.vue';
@@ -52,5 +53,18 @@ describe('monitoring-location/components/hydrograph/cursor-slider', () => {
             expect(sliderGroup).toHaveLength(1);
             expect(wrapper.vm.group.getAttribute('transform')).toContain('translate');
         });
+
+        it('Expects that changing the ui width will change the viewBox and transforms', async() => {
+            const viewBox = wrapper.find('.cursor-slider-svg').attributes('viewBox');
+            const sliderGroup = wrapper.find('.cursor-slider-group');
+            utils.mediaQuery.mockReturnValue(false);
+            store.dispatch(uiActions.resizeUI(400, 350));
+            await wrapper.vm.$nextTick();
+
+            expect(wrapper.find('.cursor-slider-svg').attributes('viewBox')).not.toEqual(viewBox);
+            expect(wrapper.find('.cursor-slider-group').attributes('translate')).not.toEqual(sliderGroup);
+        });
+
+
     });
 });
\ No newline at end of file

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/cursor-slider.vue

@@ -10,6 +10,7 @@
       ga-on="click"
       ga-event-category="hydrograph-interaction"
       ga-event-action="clickOnSlider"
+      :transform="transform"
     />
   </svg>
 </template>
@@ -43,46 +44,46 @@ export default {
 
     const group = ref(null);
 
+    const transform = computed(() => {
+      return `translate(${state.layout.value.margin.left},15)`;
+    });
+
     const viewBox = computed(() => {
       return `0 0 ${state.layout.value.width + state.layout.value.margin.left + state.layout.value.margin.right} 25`;
     });
 
-    const initializeCursorSlider = function() {
-      const slider = sliderTop()
-        .displayValue(false)
-        .ticks(0);
-
-      watchEffect(() => {
-        const [startMillis, endMillis] = state.xScale.value.domain();
-        const [startX, endX] = state.xScale.value.range();
-
-        slider
-          .min(startMillis)
-          .max(endMillis)
-          .width(endX - startX);
-        slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
-
-        if (group.value) {
-          group.value.setAttribute('transform', `translate(${state.layout.value.margin.left},15)`);
-          select(`.${group.value.className.baseVal}`).call(slider);
-        }
-
-        slider.on('onchange', (val) => {
-          actions.setGraphCursorOffset(val - startMillis);
-        });
-      });
+    const slider = sliderTop()
+      .displayValue(false)
+      .ticks(0);
+
+    watchEffect(() => {
+      const [startMillis, endMillis] = state.xScale.value.domain();
+      const [startX, endX] = state.xScale.value.range();
+
+      slider
+        .min(startMillis)
+        .max(endMillis)
+        .width(endX - startX);
+      slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
 
-      watchEffect(() => {
-        slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
+      if (group.value) {
+        select(group.value).call(slider);
+      }
+
+      slider.on('onchange', (val) => {
+        actions.setGraphCursorOffset(val - startMillis);
       });
-    };
+    });
 
-    initializeCursorSlider();
+    watchEffect(() => {
+      slider.silentValue(state.cursorOffset.value ? slider.min() + state.cursorOffset.value : slider.max());
+    });
     
     return {
       ...state,
       viewBox,
-      group
+      group,
+      transform
     };
   }
 };