Updates to initially render all elements associated with the hydrograph data...

Updates to initially render all elements associated with the hydrograph data before the data is fetched to limit the content changing.

assets/src/scripts/monitoring-location/components/hydrograph/graph-brush.js

@@ -20,6 +20,37 @@ import {getBrushXScale, getBrushYScale} from './selectors/scales';
 import {drawDataSegments} from './time-series-lines';
 import {drawGroundwaterLevels} from './discrete-data';
 
+const BRUSH_HINT_TOP_POSITION = 9;
+
+export const initializeGraphBrush = function(container, store) {
+    const div = container.append('div')
+        .attr('class', 'hydrograph-container');
+    div.append('svg')
+        .classed('brush-svg', true)
+        .attr('xmlns', 'http://www.w3.org/2000/svg')
+        .attr('ga-on', 'click')
+        .attr('ga-event-category', 'hydrograph-interaction')
+        .attr('ga-event-action', 'clickOnBrush')
+        .call(link(store, (elem, layout) => {
+                elem.attr('viewBox', `0 0 ${layout.width + layout.margin.left + layout.margin.right} ${layout.height + layout.margin.bottom + layout.margin.top}`);
+            }, getBrushLayout
+        ))
+        .call(svgTarget => {
+            svgTarget.append('text')
+                .classed('brush-text-hint', true)
+                .text('drag handles to change timeframe')
+                .call(link(store, (elem, layout) => elem.attr('transform', `translate(${layout.width / 2 + layout.margin.left}, ${BRUSH_HINT_TOP_POSITION})`),
+                    getBrushLayout
+                ));
+        })
+        .call(svg => {
+            svg.append('g')
+                .attr('class', 'graph-brush-group')
+                .call(link(store, (elem, layout) => elem.attr('transform', `translate(${layout.margin.left}, ${layout.margin.top})`),
+                    getBrushLayout
+                ));
+        });
+};
 
 /*
  * Renders a brush element within container for the main graph
@@ -27,7 +58,6 @@ import {drawGroundwaterLevels} from './discrete-data';
  * @param {Redux store} store
  */
 export const drawGraphBrush = function(container, store) {
-    const BRUSH_HINT_TOP_POSITION = 9;
     let customHandle;
     let layoutHeight;
 
@@ -54,56 +84,33 @@ export const drawGraphBrush = function(container, store) {
             const adjustedBrush = brushRange.map(xScale.invert, xScale);
 
             store.dispatch(setGraphBrushOffset(
-                adjustedBrush[0]- xScale.domain()[0],
+                adjustedBrush[0] - xScale.domain()[0],
                 xScale.domain()[1] - adjustedBrush[1]));
         }
     };
 
-    const div = container.append('div')
-        .attr('class', 'hydrograph-container');
-    div.append('svg')
-        .classed('brush-svg', true)
-        .attr('xmlns', 'http://www.w3.org/2000/svg')
-        .attr('ga-on', 'click')
-        .attr('ga-event-category', 'hydrograph-interaction')
-        .attr('ga-event-action', 'clickOnBrush')
-        .call(link(store,(elem, layout) => {
-                elem.attr('viewBox', `0 0 ${layout.width + layout.margin.left + layout.margin.right} ${layout.height + layout.margin.bottom + layout.margin.top}`);
-            }, getBrushLayout
-        ))
-        .call(svgTarget => {
-            svgTarget.append('text')
-                .classed('brush-text-hint', true)
-                .text('drag handles to change timeframe')
-                .call(link(store,(elem, layout) => elem.attr('transform', `translate(${layout.width / 2 + layout.margin.left}, ${BRUSH_HINT_TOP_POSITION})`),
-                    getBrushLayout
-                ));
-        })
-        .call(svg => {
-            svg.append('g')
-                .call(link(store,(elem, layout) => elem.attr('transform', `translate(${layout.margin.left}, ${layout.margin.top})`),
-                    getBrushLayout
-                ))
-                .call(link(store, appendXAxis, createStructuredSelector({
-                    xAxis: getBrushXAxis,
-                    layout: getBrushLayout
-                })))
-                .call(link(store, drawDataSegments, createStructuredSelector({
-                    visible: () => true,
-                    segments: getIVDataSegments('primary'),
-                    dataKind: () => 'primary',
-                    xScale: getBrushXScale,
-                    yScale: getBrushYScale,
-                    enableClip: () => false
-                })))
-                .call(link(store, drawGroundwaterLevels, createStructuredSelector({
-                    levels: getGroundwaterLevelPoints,
-                    xScale: getBrushXScale,
-                    yScale: getBrushYScale,
-                    enableClip: () => false
-                })));
-        })
-        .call(link(store, (svg, {layout, hydrographBrushOffset, xScale}) => {
+    const svg = container.select('.brush-svg');
+    svg.call(svg => {
+        svg.select('.graph-brush-group')
+            .call(link(store, appendXAxis, createStructuredSelector({
+                xAxis: getBrushXAxis,
+                layout: getBrushLayout
+            })))
+            .call(link(store, drawDataSegments, createStructuredSelector({
+                visible: () => true,
+                segments: getIVDataSegments('primary'),
+                dataKind: () => 'primary',
+                xScale: getBrushXScale,
+                yScale: getBrushYScale,
+                enableClip: () => false
+            })))
+            .call(link(store, drawGroundwaterLevels, createStructuredSelector({
+                levels: getGroundwaterLevelPoints,
+                xScale: getBrushXScale,
+                yScale: getBrushYScale,
+                enableClip: () => false
+            })));
+        svg.call(link(store, (svg, {layout, hydrographBrushOffset, xScale}) => {
             let selection;
             layoutHeight = layout.height;
 
@@ -123,7 +130,7 @@ export const drawGraphBrush = function(container, store) {
             * inverted for the right hand custom handle. Here 'east' will be a value of either 1 or 0 (in effect, making
             * it a boolean value of 'east' or 'not east' */
             const brushResizePath = function(d) {
-                const east = d.type === 'e' ? 1:0;
+                const east = d.type === 'e' ? 1 : 0;
                 const x = east ? 1 : -1;
                 const y = layoutHeight / 2;
 
@@ -168,4 +175,5 @@ export const drawGraphBrush = function(container, store) {
             hydrographBrushOffset: getGraphBrushOffset,
             xScale: getBrushXScale
         })));
+    });
 };

assets/src/scripts/monitoring-location/components/hydrograph/graph-controls.js

@@ -17,7 +17,6 @@ const hasIVData = function(parameterCode) {
     return config.ivPeriodOfRecord && parameterCode in config.ivPeriodOfRecord;
 };
 
-
 /*
  * Create the last year toggle, and median toggle for the time series graph.
  * @param {Object} elem - D3 selection

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

@@ -22,14 +22,14 @@ import {getPreferredIVMethodID} from './selectors/time-series-data';
 
 import {showDataIndicators} from './data-indicator';
 import {drawDataTables} from './data-table';
-import {drawGraphBrush} from './graph-brush';
+import {initializeGraphBrush, drawGraphBrush} from './graph-brush';
 import {drawGraphControls} from './graph-controls';
 import {drawTimeSeriesLegend} from './legend';
 import {drawSelectionList} from './parameters';
 import {drawSelectActions} from './select-actions';
 import {drawShortcutDaysBeforeButtons} from './days-before-shortcuts';
-import {drawTimeSeriesGraph} from './time-series-graph';
-import {drawTooltipCursorSlider} from './tooltip';
+import {initializeTimeSeriesGraph, drawTimeSeriesGraphData} from './time-series-graph';
+import {initializeTooltipCursorSlider, drawTooltipCursorSlider} from './tooltip';
 
 /*
  * Renders the hydrograph on the node element using the Redux store for state information. The siteno, latitude, and
@@ -91,7 +91,18 @@ export const attachToNode = function(store,
         select(node).select('.select-actions-container').call(drawSelectActions, store, siteno);
     }
 
-    showDataIndicators(true);
+    const graphContainer = nodeElem.select('.graph-container');
+    graphContainer.call(initializeTimeSeriesGraph, store, siteno, agencyCd, sitename, thisShowMLName, !thisShowOnlyGraph);
+    showDataIndicators(true, store);
+    if (!showOnlyGraph) {
+        initializeTooltipCursorSlider(graphContainer, store);
+        initializeGraphBrush(graphContainer, store);
+    }
+    const legendControlsContainer = graphContainer.append('div')
+        .classed('ts-legend-controls-container', true);
+    if (!showOnlyGraph) {
+        legendControlsContainer.call(drawGraphControls, store, siteno);
+    }
 
     const fetchHydrographDataPromise = store.dispatch(retrieveHydrographData(siteno, {
         parameterCode: parameterCode,
@@ -123,21 +134,16 @@ export const attachToNode = function(store,
         store.dispatch(setSelectedIVMethodID(initialIVMethodID));
 
         showDataIndicators(false, store);
-        let graphContainer = nodeElem.select('.graph-container');
-        graphContainer.call(drawTimeSeriesGraph, store, siteno, agencyCd, sitename, thisShowMLName, !thisShowOnlyGraph);
+        graphContainer.call(drawTimeSeriesGraphData, store, !thisShowOnlyGraph);
 
         if (!thisShowOnlyGraph) {
             graphContainer
                 .call(drawTooltipCursorSlider, store)
                 .call(drawGraphBrush, store);
         }
-        const legendControlsContainer = graphContainer.append('div')
-            .classed('ts-legend-controls-container', true)
-            .call(drawTimeSeriesLegend, store);
+        legendControlsContainer.call(drawTimeSeriesLegend, store);
 
         if (!thisShowOnlyGraph) {
-            legendControlsContainer.call(drawGraphControls, store, siteno);
-
             nodeElem.select('#iv-data-table-container')
                 .call(drawDataTables, store);
 

assets/src/scripts/monitoring-location/components/hydrograph/time-series-graph.js

@@ -136,15 +136,7 @@ const drawWatermark = function(elem, store) {
         }, getMainLayout));
 };
 
-/*
- * Renders the IV time series graph with the D3 elem using the state information in store.
- * @param {D3 selection} elem
- * @param {Redux store} store
- * @param {String} siteNo
- * @param {Boolean} showMLName - If true add the monitoring location name to the top of the graph
- * @param {Boolean} showTooltip - If true render the tooltip text and add the tooltip focus element
- */
-export const drawTimeSeriesGraph = function(elem, store, siteNo, agencyCode, sitename, showMLName, showTooltip) {
+export const initializeTimeSeriesGraph = function(elem, store, siteNo, agencyCode, sitename, showMLName, showTooltip) {
     let graphDiv;
     graphDiv = elem.append('div')
         .attr('class', 'hydrograph-container')
@@ -156,7 +148,7 @@ export const drawTimeSeriesGraph = function(elem, store, siteNo, agencyCode, sit
     if (showTooltip) {
         graphDiv.call(drawTooltipText, store);
     }
-    const graphSvg = graphDiv.append('svg')
+    graphDiv.append('svg')
         .attr('xmlns', 'http://www.w3.org/2000/svg')
         .classed('hydrograph-svg', true)
         .call(link(store,(elem, layout) => {
@@ -177,6 +169,18 @@ export const drawTimeSeriesGraph = function(elem, store, siteNo, agencyCode, sit
             idPrefix: () => 'hydrograph'
         })))
         .call(addDefsPatterns);
+};
+
+/*
+ * Renders the IV time series graph with the D3 elem using the state information in store.
+ * @param {D3 selection} elem
+ * @param {Redux store} store
+ * @param {Boolean} showTooltip - If true render the tooltip text and add the tooltip focus element
+ */
+export const drawTimeSeriesGraphData = function(elem, store, showTooltip) {
+    const graphDiv = elem.select('.hydrograph-container');
+
+    const graphSvg = graphDiv.select('svg');
 
     const dataGroup = graphSvg.append('g')
         .attr('class', 'plot-data-lines-group')

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

@@ -153,18 +153,22 @@ export const drawTooltipFocus = function(elem, 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
  * @param {D3 selection} elem
  * @param {Redux store} store
  */
 export const drawTooltipCursorSlider = 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))
+    elem.select('.cursor-slider-svg')
         .call(link(store, drawCursorSlider, createStructuredSelector({
             cursorOffset: getGraphCursorOffset,
             xScale: getMainXScale('current'),

assets/src/scripts/monitoring-location/index.js

@@ -15,10 +15,10 @@ import {attachToNode as MapComponent} from 'ml/components/map';
 import {attachToNode as NetworkListComponent} from 'ml/components/network-list';
 
 const COMPONENTS = {
-    cameras: CameraComponent,
     embed: EmbedComponent,
-    'dv-hydrograph': DailyValueHydrographComponent,
     hydrograph: HydrographComponent,
+    cameras: CameraComponent,
+    'dv-hydrograph': DailyValueHydrographComponent,
     map: MapComponent,
     'network-list': NetworkListComponent
 };