From 9c6393fb8bfd14a436a6938eac14002161dba835 Mon Sep 17 00:00:00 2001
From: mbucknel <mbucknell@usgs.gov>
Date: Thu, 7 Jul 2022 10:12:38 -0500
Subject: [PATCH] Some refinements to only render the data in the brush after
 it has been loaded.

---
 .../components/hydrograph/index.js            |  7 +++-
 .../hydrograph/vue-components/graph-brush.vue | 35 ++++++++++---------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/index.js b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
index f38ff3077..aaca8e4a4 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/index.js
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/index.js
@@ -5,7 +5,7 @@ import {select} from 'd3-selection';
 import {bindActionCreators} from 'redux';
 import ReduxConnectVue from 'redux-connect-vue';
 import {createStructuredSelector} from 'reselect';
-import {createApp} from 'vue';
+import {createApp, ref} from 'vue';
 
 import config from 'ui/config.js';
 
@@ -107,6 +107,8 @@ export const attachToNode = function(store,
             'P7D' : 'P1Y'));
     }
 
+    const initialLoadingComplete = ref(false);
+
     // Fetch all data needed to render the hydrograph
     const fetchHydrographDataPromise = store.dispatch(retrieveHydrographData(siteno, agencyCd,
         getInputsForRetrieval(store.getState()), true));
@@ -149,6 +151,7 @@ export const attachToNode = function(store,
             mapStateToPropsFactory: createStructuredSelector
         });
         hydrographApp.provide('store', store);
+        hydrographApp.provide('initialLoadingComplete', initialLoadingComplete);
         hydrographApp.mount('#hydrograph-brush-container');
     }
     const legendControlsContainer = graphContainer.append('div')
@@ -178,6 +181,8 @@ export const attachToNode = function(store,
 
     // Once hydrograph data has been fetched, render the time series data.
     Promise.all(fetchDataPromises).then(() => {
+        console.log('Initial data loading is complete');
+        initialLoadingComplete.value = true;
         // selectedIVMethodID should be set regardless of whether we are showing only the graph but the preferred method ID
         // can not be determined until the data is fetched so that is done here.
         const initialIVMethodID = timeSeriesId || getPreferredIVMethodID(store.getState());
diff --git a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue
index c576976d9..de2c75796 100644
--- a/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue
+++ b/assets/src/scripts/monitoring-location/components/hydrograph/vue-components/graph-brush.vue
@@ -28,7 +28,6 @@
 import {brushX} from 'd3-brush';
 import {select} from 'd3-selection';
 import {useActions, useState} from 'redux-connect-vue';
-import {createStructuredSelector} from 'reselect';
 import {computed, inject, ref, watchEffect} from 'vue';
 
 import config from 'ui/config';
@@ -69,6 +68,7 @@ export default {
     });
 
     const reduxStore = inject('store');
+    const initialLoadingComplete = inject('initialLoadingComplete');
 
     const brushSvg = ref(null);
     const graphBrushGroup = ref(null);
@@ -115,7 +115,7 @@ export default {
       }
     };
 
-    const drawGraphBrush = function (svg, {layout, brushOffset, xScale}) {
+    const drawGraphBrush = function(svg, {layout, brushOffset, xScale}) {
       let selection;
       layoutHeight = layout.height;
 
@@ -134,7 +134,7 @@ export default {
       * on the left hand side, which in d3 brush terms is referred to as 'east' (data type 'e'), and then
       * 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 brushResizePath = function(d) {
         const east = d.type === 'e' ? 1 : 0;
         const x = east ? 1 : -1;
         const y = layoutHeight / 2;
@@ -177,26 +177,29 @@ export default {
     };
 
     watchEffect(() => {
-      console.log(`In watchEffect for brush x axis with ${graphBrushGroup.value}`);
       appendXAxis(select(graphBrushGroup.value), {xAxis: state.xAxis.value, layout: state.layout.value});
     });
 
     watchEffect(() => {
-      drawDataSegments(select(graphBrushGroup.value), {
-        visible: true,
-        segments: state.primaryIVDataSegments.value,
-        dataKind: 'primary',
-        xScale: state.xScale.value,
-        yScale: state.yScale.value
-      });
+      if (initialLoadingComplete.value) {
+        drawDataSegments(select(graphBrushGroup.value), {
+          visible: true,
+          segments: state.primaryIVDataSegments.value,
+          dataKind: 'primary',
+          xScale: state.xScale.value,
+          yScale: state.yScale.value
+        });
+      }
     });
 
     watchEffect(() => {
-      drawGroundwaterLevels(select(graphBrushGroup.value), {
-        levels: state.groundwaterLevelPoints.value,
-        xScale: state.xScale.value,
-        yScale: state.yScale.value
-      });
+      if (initialLoadingComplete.value) {
+        drawGroundwaterLevels(select(graphBrushGroup.value), {
+          levels: state.groundwaterLevelPoints.value,
+          xScale: state.xScale.value,
+          yScale: state.yScale.value
+        });
+      }
     });
 
     watchEffect(() => {
-- 
GitLab