fix: refit the graph on the value axis when the query results change (#5041)

Author: TCL735

src/visualization/utils/useVisDomainSettings.ts

@@ -173,9 +173,25 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
     return getValidRange(data, timeRange)
   }, [storedDomain, data]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const [domain, setDomain] = useState(initialDomain)
+  /*
+   * preZoomDomain:
+   *   - can be changed only by the query results
+   *   - uses one-way state to capture the very first set of values
+   */
   const [preZoomDomain] = useOneWayState(initialDomain)
 
+  /*
+   * domain:
+   *   - can be changed by user action: zooming or unzooming
+   *   - zooming will trigger a new query if the windowPeriod changes
+   *   - unzooming will revert the query results back to its original state
+   *     (before zooming), but does not query
+   *
+   *   - can be changed also by the preZoomDomain, by syncing,
+   *     to keep the graph fitted, and does not query
+   */
+  const [domain, setDomain] = useState(initialDomain)
+
   const getAllVariablesWithTimeDomain = (state: AppState) =>
     getAllVariablesForZoomRequery(state, timeRange ? domain : [])
   const orgId = useSelector(getOrg)?.id
@@ -185,13 +201,6 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
     getWindowPeriodFromVariables(query, variables)
   )
 
-  /*
-   * When the user zooms in, re-run the query
-   * When the user un-zooms, do not re-run but revert back to old data
-   * Hence re-run the query only when both conditions are met:
-   * - the window period changes from the domain changing (zooming in)
-   * - the domain does not equal the original pre-zoom domain (unzooming)
-   */
   useEffect(() => {
     const updatedWindowPeriod = getWindowPeriodFromVariables(query, variables)
     if (isNotEqual(windowPeriod, updatedWindowPeriod)) {
@@ -224,6 +233,15 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
     }
   }, [domain]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  // sync preZoomDomain and domain
+  //   - when query results change to refit the graph
+  //   - except when it is the time axis to prevent a shrunken graph
+  useEffect(() => {
+    if (!timeRange && isNotEqual(preZoomDomain, domain)) {
+      setDomain(preZoomDomain)
+    }
+  }, [preZoomDomain]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const setZoomDomain = (updatedDomain: number[]) => {
     setRequeryStatus(RemoteDataState.NotStarted)
     if (!preZoomResult) {
@@ -272,9 +290,25 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
     return storedDomain
   }, [storedDomain, data]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const [domain, setDomain] = useState(initialDomain)
+  /*
+   * preZoomDomain:
+   *   - can be changed only by the query results
+   *   - uses one-way state to capture the very first set of values
+   */
   const [preZoomDomain] = useOneWayState(initialDomain)
 
+  /*
+   * domain:
+   *   - can be changed by user action: zooming or unzooming
+   *   - zooming will trigger a new query if the windowPeriod changes
+   *   - unzooming will revert the query results back to its original state
+   *     (before zooming), but does not query
+   *
+   *   - can be changed also by the preZoomDomain, by syncing,
+   *     to keep the graph fitted, and does not query
+   */
+  const [domain, setDomain] = useState(initialDomain)
+
   const getAllVariablesWithTimeDomain = (state: AppState) =>
     getAllVariablesForZoomRequery(state, timeRange ? domain : [])
   const orgId = useSelector(getOrg)?.id
@@ -284,13 +318,6 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
     getWindowPeriodFromVariables(query, variables)
   )
 
-  /*
-   * When the user zooms in, re-run the query
-   * When the user un-zooms, do not re-run but revert back to old data
-   * Hence re-run the query only when both conditions are met:
-   * - the window period changes from the domain changing (zooming in)
-   * - the domain does not equal the original pre-zoom domain (unzooming)
-   */
   useEffect(() => {
     const updatedWindowPeriod = getWindowPeriodFromVariables(query, variables)
     if (isNotEqual(windowPeriod, updatedWindowPeriod)) {
@@ -323,6 +350,15 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
     }
   }, [domain]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  // sync preZoomDomain and domain
+  //   - when query results change to refit the graph
+  //   - except when it is the time axis to prevent a shrunken graph
+  useEffect(() => {
+    if (!timeRange && isNotEqual(preZoomDomain, domain)) {
+      setDomain(preZoomDomain)
+    }
+  }, [preZoomDomain]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const setZoomDomain = (updatedDomain: number[]) => {
     setRequeryStatus(RemoteDataState.NotStarted)
     if (!preZoomResult) {