Cleaning up code, adding comments

assets/src/scripts/monitoring-location/components/hydrograph/GraphControlsApp.vue

-<template>
-  <div class="graph-controls-container">
-    <GraphControls />
-  </div>
-</template>
-
-<script>
-import GraphControls from './vue-components/graph-controls.vue';
-
-export default {
-  name: 'GraphControlsApp',
-  components: {
-    GraphControls
-  }
-};
-</script>

assets/src/scripts/monitoring-location/components/hydrograph/HydrographApp.vue

@@ -17,7 +17,7 @@
 <script>
 import GraphBrush from './vue-components/graph-brush.vue';
 import CursorSlider from './vue-components/cursor-slider.vue';
-import HydrographLegend from './vue-components/legend.vue';
+import HydrographLegend from './vue-components/hydrograph-legend.vue';
 import GraphControls from './vue-components/graph-controls.vue';
 import {useState} from 'redux-connect-vue';
 

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.test.js → assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.test.js

 import {mount} from '@vue/test-utils';
-import {bindActionCreators} from 'redux';
-import ReduxConnectVue from 'redux-connect-vue';
-import {createStructuredSelector} from 'reselect';
 
 import config from 'ui/config';
 import * as utils from 'ui/utils';
-import {format} from 'd3-format';
 
 import {configureStore} from 'ml/store';
 
 import {TEST_PRIMARY_IV_DATA, TEST_GW_LEVELS} from '../mock-hydrograph-state';
 
-import HydrographLegend from './legend.vue';
+import HydrographLegend from './hydrograph-legend.vue';
 
-import {getMainLayout} from '../selectors/layout';
 import {getLegendMarkerRows} from '../selectors/legend-data';
 import {getLegendMarkers as getDVLegendMarkerRows} from '../../daily-value-hydrograph/selectors/legend-data';
 
@@ -124,21 +119,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
             store = configureStore(TEST_STATE);
 
             wrapper = mount(HydrographLegend, {
-                global: {
-                    plugins: [
-                        [ReduxConnectVue, {
-                            store,
-                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
-                            mapStateToPropsFactory: createStructuredSelector
-                        }]
-                    ]
-                },
                 props: {
                     legendMarkerRows: getLegendMarkerRows(TEST_STATE),
-                    layout: getMainLayout.resultFunc(200, 600, {
-                        tickValues: [5, 10, 15],
-                        tickFormat: format('d')
-                    })
+                    layout: { 
+                        "width": 992, 
+                        "height": 496, 
+                        "windowWidth": 1041, 
+                        "margin": { 
+                            "bottom": 5, 
+                            "top": 25, 
+                            "left": 55, 
+                            "right": 25 
+                        } 
+                    }
                 }
             });
         });
@@ -149,21 +142,19 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
 
         it('Should have the correct number of legend markers when working for the DV graph', async() => {
             wrapper = mount(HydrographLegend, {
-                global: {
-                    plugins: [
-                        [ReduxConnectVue, {
-                            store: configureStore(DV_TEST_STATE),
-                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
-                            mapStateToPropsFactory: createStructuredSelector
-                        }]
-                    ]
-                },
                 props: {
                     legendMarkerRows: getDVLegendMarkerRows(DV_TEST_STATE),
-                    layout: getMainLayout.resultFunc(200, 600, {
-                        tickValues: [5, 10, 15],
-                        tickFormat: format('d')
-                    })
+                    layout: { 
+                        "width": 992, 
+                        "height": 496, 
+                        "windowWidth": 1041, 
+                        "margin": { 
+                            "bottom": 5, 
+                            "top": 25, 
+                            "left": 55, 
+                            "right": 25 
+                        } 
+                    }
                 }
             });
             await wrapper.vm.$nextTick();
@@ -172,15 +163,6 @@ describe('monitoring-location/components/hydrograph/legend module', () => {
 
         it('If no markers are provided legend-svg will contain no groups', async() => {
             wrapper = mount(HydrographLegend, {
-                global: {
-                    plugins: [
-                        [ReduxConnectVue, {
-                            store,
-                            mapDispatchToPropsFactory: (actionCreators) => (dispatch) => bindActionCreators(actionCreators, dispatch),
-                            mapStateToPropsFactory: createStructuredSelector
-                        }]
-                    ]
-                },
                 props: {
                     legendMarkerRows: [],
                     layout: {}

assets/src/scripts/monitoring-location/components/hydrograph/vue-components/legend.vue → assets/src/scripts/monitoring-location/components/hydrograph/vue-components/hydrograph-legend.vue

@@ -24,6 +24,10 @@ import {select} from 'd3-selection';
 import {mediaQuery} from 'ui/utils';
 import config from 'ui/config';
 
+/*
+ * @vue-prop {Array of Arrays} legendMarkerRows - array of rows to be displayed. Each array contains objects with the text to be displayed.
+ * @vue-prop {Object} layout - Object with the properties:  height, margin (object with bottom, top, left, and right), width, and window width
+ */
 export default {
   name: 'HydrographLegend',
   props: {
@@ -65,15 +69,8 @@ export default {
           let lastMarker;
 
           const getNewXPosition = function(markerGroup, lastXPosition) {
-            // Long story short, firefox is unable to get the bounding box if
-            // the svg element isn't actually taking up space and visible. Folks on the
-            // internet seem to have gotten around this by setting `visibility:hidden`
-            // to hide things, but that would still mean the elements will take up space.
-            // which we don't want. So, here's some error handling for getBBox failures.
-            // This handling ends up not creating the legend, but that's okay because the
-            // graph is being shown anyway. A more detailed discussion of this can be found at:
-            // https://bugzilla.mozilla.org/show_bug.cgi?id=612118 and
-            // https://stackoverflow.com/questions/28282295/getbbox-of-svg-when-hidden.
+            //This try/catch allows unit tests to run. The JSDOM browser
+            //can throw an error when calling getBBox
             try {
                 const markerGroupBBox = markerGroup.node().getBBox();
                 return markerGroupBBox.x + markerGroupBBox.width + MARKER_GROUP_X_OFFSET;