From fa03f5d18d362d66565709ca271d89ffb4231a62 Mon Sep 17 00:00:00 2001
From: John <johnsampson@uvic.ca>
Date: Wed, 14 Feb 2024 00:50:34 +0000
Subject: [PATCH] - #178 Continue use of react-query for server state
 management

- Update all of preview components to use react-query hooks.
- Clean up old code, work into new state model.
- Add multiple guards for missing data or loading states.
---
 public/config.yaml                            |  9 +-
 src/components/daterange/sub/DataTrack.js     |  3 +-
 src/components/main/App/App.js                | 17 ++--
 src/components/main/App/use-initialize-app.js | 55 -----------
 src/components/main/Body/Body.js              | 11 ++-
 src/components/main/Body/station-data-tab.js  | 37 +++++++
 .../preview/StationPreview/GraphsBlock.js     | 99 ++++++++++++++-----
 .../preview/StationPreview/HeaderBlock.js     | 31 +++++-
 .../preview/StationPreview/NavBlock.js        | 30 ++++--
 .../preview/StationPreview/PreviewGraph.js    | 30 ++++--
 .../preview/StationPreview/RangeBlock.js      | 87 ++++++++--------
 .../preview/StationPreview/StationPreview.js  | 55 ++++-------
 src/index.js                                  | 13 ++-
 .../use-config-defaults.js                    | 55 +++++++++++
 .../use-station-variables-defaults.js         | 56 +++++++++++
 src/state/query-hooks/use-config.js           | 37 +++----
 .../use-station-variable-observations.js      | 18 +++-
 .../query-hooks/use-station-variables.js      |  7 ++
 src/state/query-hooks/use-station.js          | 21 +++-
 src/state/query-hooks/use-stations.js         |  8 +-
 src/state/slice-preview.js                    | 87 ++++++++++++++++
 src/state/state-store.js                      |  4 +
 22 files changed, 546 insertions(+), 224 deletions(-)
 mode change 100644 => 100755 public/config.yaml
 delete mode 100644 src/components/main/App/use-initialize-app.js
 create mode 100644 src/components/main/Body/station-data-tab.js
 create mode 100644 src/state/client-server-hooks/use-config-defaults.js
 create mode 100644 src/state/client-server-hooks/use-station-variables-defaults.js
 create mode 100644 src/state/slice-preview.js

diff --git a/public/config.yaml b/public/config.yaml
old mode 100644
new mode 100755
index 14cf2494..440b9cf0
--- a/public/config.yaml
+++ b/public/config.yaml
@@ -4,11 +4,11 @@ baseMap: BC
 # sdsUrl values will be replaced by dev or prod URLs when they become ready.
 # For now, we have demo instances inside the firewall.
 # Uses monsoon database
-sdsUrl: http://docker-dev02.pcic.uvic.ca:30512
+#sdsUrl: http://docker-dev02.pcic.uvic.ca:30512
 # Uses new database
 #sdsUrl: http://docker-dev02.pcic.uvic.ca:30562
 # Local instance
-#sdsUrl: http://localhost:5000
+sdsUrl: http://localhost:5000
 
 # Currently deployed metadata backends do not respond to provinces QP.
 # When they do, we can use stationsQpProvinces and lose stationFilters
@@ -34,3 +34,8 @@ pdpDataUrl: http://docker-dev02.pcic.uvic.ca:30514
 #stationStride: undefined
 #showReloadStationsButton: false
 #timingEnabled: false
+
+# Preview Options
+plotColor: "#1f77b4"
+dataRequestDurations: [1, 3, 6, 12] # months
+dataRequestDurationsDefault: 6 # months
diff --git a/src/components/daterange/sub/DataTrack.js b/src/components/daterange/sub/DataTrack.js
index 7039d0df..f4f4af2c 100644
--- a/src/components/daterange/sub/DataTrack.js
+++ b/src/components/daterange/sub/DataTrack.js
@@ -21,12 +21,11 @@ const baseHeight = 50;
 const getTrackStyle = ({ source, target, count, index, color }) => {
   const height = baseHeight / count / 2;
   const topPosition = -22 + (baseHeight / count) * index + height / 2;
-  console.log("### getTrackStyle", source, target, count, index, color);
   const basicStyle = {
     top: `${topPosition}px`,
     height: `${height}px`,
     left: `${source.percent}%`,
-    width: `calc(${target.percent - source.percent}% - 1px)`,
+    width: `calc(${target.percent - source.percent}% + 1px)`,
     backgroundColor: color,
   };
 
diff --git a/src/components/main/App/App.js b/src/components/main/App/App.js
index ddd843af..9e4400d8 100644
--- a/src/components/main/App/App.js
+++ b/src/components/main/App/App.js
@@ -1,19 +1,16 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Container } from "react-bootstrap";
 import Disclaimer from "../../info/Disclaimer";
 import Header from "../Header/Header";
-import useInitializeApp from "./use-initialize-app";
 import { Outlet } from "react-router-dom";
 
 import "./App.css";
-import { useConfig } from "../../../state/query-hooks/use-config";
-
-export default function App() {
-  const { isLoading, isError } = useConfig();
-  useInitializeApp();
+import { useConfigDefaults } from "../../../state/client-server-hooks/use-config-defaults";
+export const App = () => {
+  const { isLoading, isError } = useConfigDefaults();
 
   if (isError) {
-    return <div>{configErrorMessage}</div>;
+    return <div>An Error occoured while loading the app configuration.</div>;
   }
 
   if (isLoading) {
@@ -27,4 +24,6 @@ export default function App() {
       <Outlet />
     </Container>
   );
-}
+};
+
+export default App;
diff --git a/src/components/main/App/use-initialize-app.js b/src/components/main/App/use-initialize-app.js
deleted file mode 100644
index d7750a15..00000000
--- a/src/components/main/App/use-initialize-app.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// This hook performs a number of one-time app initializations.
-import { useEffect } from "react";
-import L from "leaflet";
-import { setLethargicMapScrolling } from "../../../utils/leaflet-extensions";
-import { setTimingEnabled } from "../../../utils/timing";
-import { useConfig } from "../../../state/query-hooks/use-config";
-
-function initializeApp(config) {
-  console.log("### initializeApp", config);
-  if (config === null) {
-    return;
-  }
-
-  // Set browser title
-  document.title = config.appTitle;
-
-  // Set up (polygon) drawing tool in Leaflet.
-  L.drawLocal.edit.toolbar.buttons = {
-    edit: "Edit shapes",
-    editDisabled: "No shapes to edit",
-    remove: "Remove shapes",
-    removeDisabled: "No shapes to remove",
-  };
-  L.drawLocal.edit.handlers.remove.tooltip = "Click shape to remove";
-  L.drawLocal.edit.toolbar.actions.clearAll = {
-    title: "Remove all shapes",
-    text: "Remove all",
-  };
-
-  // Initialize Lethargy, which fixes scrolling problems with Mac computers.
-  if (config.lethargy.enabled) {
-    setLethargicMapScrolling(
-      config.lethargy.stability,
-      config.lethargy.sensitivity,
-      config.lethargy.tolerance,
-    );
-  }
-
-  // Export timing values to non-component code
-  setTimingEnabled(config.timingEnabled);
-}
-
-/**
- * This hook loads the config and initializes the app. Primarily setting up Map, Scrolling behaviour and debug timing.
- *
- * @returns {void}
- */
-export default function useInitializeApp() {
-  const { data } = useConfig();
-  useEffect(() => {
-    if (data) {
-      initializeApp(data);
-    }
-  }, [data]);
-}
diff --git a/src/components/main/Body/Body.js b/src/components/main/Body/Body.js
index 48b1eec3..2db1d935 100644
--- a/src/components/main/Body/Body.js
+++ b/src/components/main/Body/Body.js
@@ -29,6 +29,7 @@ import { useConfig } from "../../../state/query-hooks/use-config";
 import { useStations } from "../../../state/query-hooks/use-stations";
 import { useVariables } from "../../../state/query-hooks/use-variables";
 import { useFrequencies } from "../../../state/query-hooks/use-frequencies";
+import { useNetworks } from "../../../state/query-hooks/use-networks";
 
 import css from "../common.module.css";
 
@@ -51,8 +52,12 @@ function Body() {
     isLoading: isFrequenciesLoading,
     isError: isFrequenciesError,
   } = useFrequencies();
+  const {
+    data: networks,
+    isLoading: networksLoading,
+    isError: networksError,
+  } = useNetworks();
 
-  // actions should be fixed functions on the store, so they shouldn't really change
   const actions = useStore(
     useShallow((state) => ({
       setStationsLimit: state.setStationsLimit,
@@ -117,7 +122,7 @@ function Body() {
                     <Select
                       options={config.stationDebugFetchLimitsOptions}
                       value={stnsLimit}
-                      onChange={setStnsLimit}
+                      onChange={actions.setStnsLimit}
                     />
                   </Col>
                 </Row>
@@ -184,7 +189,7 @@ function Body() {
             </Tab>
 
             <Tab eventKey={"Networks"} title={"Networks"}>
-              <NetworksMetadata />
+              <NetworksMetadata networks={networks} />
             </Tab>
           </Tabs>,
         ]}
diff --git a/src/components/main/Body/station-data-tab.js b/src/components/main/Body/station-data-tab.js
new file mode 100644
index 00000000..7bad7e28
--- /dev/null
+++ b/src/components/main/Body/station-data-tab.js
@@ -0,0 +1,37 @@
+// const StationDataTab = () => {
+//   return (
+//     <>
+//       <Row {...rowClasses}>
+//         <SelectionCounts
+//           allStations={stations}
+//           selectedStations={selectedStations}
+//         />
+//         <SelectionCriteria />
+//       </Row>
+
+//       <UnselectedThings
+//         selectedNetworksOptions={
+//           filterValuesNormal.selectedNetworksOptions
+//         }
+//         selectedVariablesOptions={
+//           filterValuesNormal.selectedVariablesOptions
+//         }
+//         selectedFrequenciesOptions={
+//           filterValuesNormal.selectedFrequenciesOptions
+//         }
+//       />
+
+//       <StationData
+//         filterValues={filterValuesNormal}
+//         selectedStations={selectedStations}
+//         dataDownloadUrl={dataDownloadUrl({
+//           config,
+//           filterValues: filterValuesNormal,
+//           polygon: area,
+//         })}
+//         dataDownloadFilename={dataDownloadFilename}
+//         rowClasses={rowClasses}
+//       />
+//     </>
+//   );
+// }
diff --git a/src/components/preview/StationPreview/GraphsBlock.js b/src/components/preview/StationPreview/GraphsBlock.js
index ae62e126..849a3583 100644
--- a/src/components/preview/StationPreview/GraphsBlock.js
+++ b/src/components/preview/StationPreview/GraphsBlock.js
@@ -3,40 +3,91 @@ import { Card, Col, Row } from "react-bootstrap";
 import map from "lodash/fp/map";
 import PreviewGraph from "./PreviewGraph";
 import { useStore } from "../../../state/state-store";
+import { useStation } from "../../../state/query-hooks/use-station";
+import { useStationVariables } from "../../../state/query-hooks/use-station-variables";
 
 const GraphsBlock = () => {
-  var { previewStation, previewStationVariables, showLegend } = useStore(
-    (state) => ({
-      previewStation: state.previewStation,
-      previewStationVariables: state.previewStationVariables,
-      showLegend: state.showLegend,
-    }),
-  );
+  const stationId = useStore((state) => state.stationId);
+  const showLegend = useStore((state) => state.showLegend);
+  const {
+    data: previewStation,
+    isLoading: isStationLoading,
+    isStationisError,
+  } = useStation(stationId);
+  const {
+    data: previewStationVariables,
+    isLoading: isVariableLoading,
+    isError: isVariableError,
+  } = useStationVariables(stationId);
+  const selectedStartDate = useStore((state) => state.selectedStartDate);
+  const selectedEndDate = useStore((state) => state.selectedEndDate);
 
   const graphWidth = showLegend ? 8 : 12;
   const legendWidth = showLegend ? 4 : 0;
 
+  if (isStationLoading || isVariableLoading) {
+    return (
+      <Row>
+        <Col xs={12} className="d-flex justify-content-center">
+          <Card>
+            <Card.Body>
+              <Card.Title>Loading...</Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    );
+  }
+
+  if (isStationisError || isVariableError) {
+    return (
+      <Row>
+        <Col xs={12} className="d-flex justify-content-center">
+          <Card>
+            <Card.Body>
+              <Card.Title>Error loading station variable data.</Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    );
+  }
+
+  if (!(previewStationVariables.variables?.length ?? 0 > 0)) {
+    return (
+      <Row>
+        <Col xs={12} className="d-flex justify-content-center">
+          <Card>
+            <Card.Body>
+              <Card.Title>No Variables available for this station.</Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    );
+  }
+
   return (
     <>
-      {map((variable) => {
-        return (
-          <Row key={`${previewStation.id}-${variable.id}`} className="mb-1">
-            <Col xs={graphWidth} className="d-flex justify-content-center">
+      {map((variable) => (
+        <Row key={`${previewStation.id}-${variable.id}`} className="mb-1">
+          <Col xs={graphWidth} className="d-flex justify-content-center">
+            {selectedStartDate && selectedEndDate && (
               <PreviewGraph variableId={variable.id} />
-            </Col>
-            {showLegend && (
-              <Col xs={legendWidth} className="d-flex">
-                <Card style={{ width: "100%" }}>
-                  <Card.Body>
-                    <Card.Title>{variable.display_name}</Card.Title>
-                    <Card.Body>{variable.description}</Card.Body>
-                  </Card.Body>
-                </Card>
-              </Col>
             )}
-          </Row>
-        );
-      })(previewStationVariables)}
+          </Col>
+          {showLegend && (
+            <Col xs={legendWidth} className="d-flex">
+              <Card style={{ width: "100%" }}>
+                <Card.Body>
+                  <Card.Title>{variable.display_name}</Card.Title>
+                  <Card.Body>{variable.description}</Card.Body>
+                </Card.Body>
+              </Card>
+            </Col>
+          )}
+        </Row>
+      ))(previewStationVariables.variables)}
     </>
   );
 };
diff --git a/src/components/preview/StationPreview/HeaderBlock.js b/src/components/preview/StationPreview/HeaderBlock.js
index 9aaccdd6..81ccf706 100644
--- a/src/components/preview/StationPreview/HeaderBlock.js
+++ b/src/components/preview/StationPreview/HeaderBlock.js
@@ -1,14 +1,15 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import map from "lodash/fp/map";
 import { Accordion, Table, Row, Col, Spinner } from "react-bootstrap";
+import { useStation } from "../../../state/query-hooks/use-station";
 import { useStore } from "../../../state/state-store";
 
 export const HeaderBlock = () => {
-  const { previewStation } = useStore((state) => ({
-    previewStation: state.previewStation,
-  }));
+  const stationId = useStore((state) => state.stationId);
+  const { data: previewStation, isLoading, isError } = useStation(stationId);
 
-  if (!previewStation) {
+  if (isLoading) {
     return (
       <Row>
         <Col xs={12} className="d-flex justify-content-center">
@@ -20,6 +21,28 @@ export const HeaderBlock = () => {
     );
   }
 
+  if (isError) {
+    return (
+      <Row>
+        <Col xs={12}>
+          <h1>Error loading station data.</h1>
+          <Link to="/">Return to map</Link>
+        </Col>
+      </Row>
+    );
+  }
+
+  if (!(previewStation.histories?.length ?? 0 > 0)) {
+    return (
+      <Row>
+        <Col xs={12}>
+          <h1>Station {previewStation.id} has no histories to display.</h1>
+          <Link to="/">Return to map</Link>
+        </Col>
+      </Row>
+    );
+  }
+
   return (
     <Row>
       <Col xs={12}>
diff --git a/src/components/preview/StationPreview/NavBlock.js b/src/components/preview/StationPreview/NavBlock.js
index 4e54c215..1e7ee255 100644
--- a/src/components/preview/StationPreview/NavBlock.js
+++ b/src/components/preview/StationPreview/NavBlock.js
@@ -11,27 +11,29 @@ import {
 } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
 import { useShallow } from "zustand/react/shallow";
-import { useStore } from "../../../state/state-store";
 import RangeBlock from "./RangeBlock";
 import EndDateControl from "./EndDateControl";
+import { useStationVariables } from "../../../state/query-hooks/use-station-variables";
+import { useStore } from "../../../state/state-store";
 
 const NavBlock = () => {
   const data = useStore(
     useShallow((state) => ({
-      previewStationVariables: state.previewStationVariables,
-      selectedEndDate: state.selectedEndDate,
-      selectedDuration: state.selectedDuration,
       showLegend: state.showLegend,
+      stationId: state.stationId,
     })),
   );
-
   const actions = useStore((state) => ({
-    setSelectedEndDate: state.setSelectedEndDate,
     setDurationBeforeEnd: state.setDurationBeforeEnd,
     toggleLegend: state.toggleLegend,
   }));
+  const {
+    data: previewStationVariables,
+    isLoading,
+    isError,
+  } = useStationVariables(data.stationId);
 
-  if (!data.previewStationVariables || !data.selectedEndDate) {
+  if (isLoading) {
     return (
       <Row>
         <Col xs={12}>
@@ -47,6 +49,20 @@ const NavBlock = () => {
     );
   }
 
+  if (!(previewStationVariables.variables?.length ?? 0 > 0)) {
+    return (
+      <Row>
+        <Col xs={12}>
+          <Card className="mb-2 mt-2 ">
+            <Card.Body>
+              <Card.Title>This station has no associated variables.</Card.Title>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    );
+  }
+
   return (
     <Card className="mb-2 mt-2">
       <Card.Header style={{ backgroundColor: "white" }}>
diff --git a/src/components/preview/StationPreview/PreviewGraph.js b/src/components/preview/StationPreview/PreviewGraph.js
index a1f645ae..01273642 100644
--- a/src/components/preview/StationPreview/PreviewGraph.js
+++ b/src/components/preview/StationPreview/PreviewGraph.js
@@ -3,35 +3,41 @@ import { Spinner } from "react-bootstrap";
 import map from "lodash/fp/map";
 import { useShallow } from "zustand/react/shallow";
 import { useStore } from "../../../state/state-store";
+import { useStationVariableObservations } from "../../../state/query-hooks/use-station-variable-observations";
 
 // Importing a smaller version of plotly allows us to significantly reduce the
 // bundle size (approx 5MB to 1MB) over the full version of plotly.
 // https://github.com/plotly/react-plotly.js?tab=readme-ov-file#customizing-the-plotlyjs-bundle
 import Plotly from "plotly.js-basic-dist";
 import createPlotlyComponent from "react-plotly.js/factory";
+import { useConfig } from "../../../state/query-hooks/use-config";
 const Plot = createPlotlyComponent(Plotly);
 
-const getPlotData = (state, variableId) => {
-  return (
-    state.previewObservations?.find((v) => v.variable.id === variableId) ?? null
-  );
-};
-
 const PreviewGraph = ({ variableId }) => {
-  const { previewObservations, selectedStartDate, selectedEndDate, config } =
+  const { stationId, selectedStartDate, selectedEndDate, showLegend } =
     useStore(
       useShallow((state) => ({
-        previewObservations: getPlotData(state, variableId),
+        stationId: state.stationId,
         selectedStartDate: state.selectedStartDate,
         selectedEndDate: state.selectedEndDate,
         showLegend: state.showLegend,
-        config: state.config,
       })),
     );
+  const { data: config } = useConfig();
+  const {
+    data: previewObservations,
+    isLoading,
+    isError,
+  } = useStationVariableObservations(
+    stationId,
+    variableId,
+    selectedStartDate,
+    selectedEndDate,
+  );
 
   console.log("### previewObservations", previewObservations);
 
-  if (previewObservations === null) {
+  if (isLoading) {
     return (
       <Spinner animation="border" role="status">
         <span className="visually-hidden">Loading...</span>
@@ -39,6 +45,10 @@ const PreviewGraph = ({ variableId }) => {
     );
   }
 
+  if (isError) {
+    return <div>Error loading observation data</div>;
+  }
+
   if ((previewObservations?.observations?.length ?? 0) === 0) {
     return (
       <div>
diff --git a/src/components/preview/StationPreview/RangeBlock.js b/src/components/preview/StationPreview/RangeBlock.js
index 7f58cece..50598608 100644
--- a/src/components/preview/StationPreview/RangeBlock.js
+++ b/src/components/preview/StationPreview/RangeBlock.js
@@ -8,75 +8,76 @@ import differenceInYears from "date-fns/differenceInYears";
 import startOfDecade from "date-fns/startOfDecade";
 import endOfDecade from "date-fns/endOfDecade";
 import { useStore } from "../../../state/state-store";
+import { useConfig } from "../../../state/query-hooks/use-config";
+import { useStationVariables } from "../../../state/query-hooks/use-station-variables";
 
 const millisecondsPerMonth = 2629746000;
 const millisedondsPerDay = 86400000;
 
 const RangeBlock = ({}) => {
-  const {
-    config,
-    minStartDate,
-    maxEndDate,
-    selectedStartDate,
-    selectedEndDate,
-    setSelectedStartDate,
-    setSelectedEndDate,
-    previewStationVariables,
-  } = useStore((state) => ({
-    config: state.config,
+  const { data: config } = useConfig();
+  const storeData = useStore((state) => ({
+    stationId: state.stationId,
     minStartDate: state.minStartDate,
     maxEndDate: state.maxEndDate,
     selectedStartDate: state.selectedStartDate,
     selectedEndDate: state.selectedEndDate,
+  }));
+  const actions = useStore((state) => ({
     setSelectedStartDate: state.setSelectedStartDate,
     setSelectedEndDate: state.setSelectedEndDate,
-    previewStationVariables: state.previewStationVariables,
   }));
 
-  const startTime = startOfDecade(minStartDate);
-  const endTime = addDays(endOfDecade(maxEndDate), 1);
+  const {
+    data: previewStationVariables,
+    isLoading,
+    isError,
+  } = useStationVariables(storeData.stationId);
+
+  if (!(previewStationVariables.variables?.length ?? 0 > 0)) {
+    return <div>This station has no variables associated with it.</div>;
+  }
+
+  if (isLoading || !storeData.selectedStartDate || !storeData.selectedEndDate) {
+    return <div>Loading...</div>;
+  }
 
-  // console.log("### start", startTime);
-  // console.log("### end", endTime);
+  console.log("### RangeBlock", storeData, previewStationVariables);
 
-  const selectedInterval = [selectedStartDate, selectedEndDate];
+  const startTime = startOfDecade(storeData.minStartDate);
+  const endTime = addDays(endOfDecade(storeData.maxEndDate), 1);
+
+  const selectedInterval = [
+    storeData.selectedStartDate,
+    storeData.selectedEndDate,
+  ];
 
   const error = null;
   const ticks = differenceInYears(endTime, startTime) / 10 + 1;
-  //console.log("### ticks", ticks);
-
-  const onTimeRangeChange = (range) => {
-    const [start, end] = range;
 
+  const onTimeRangeChange = ([start, end]) => {
     console.log(
       "### onTimeRangeChange",
       start,
       end,
-      selectedStartDate,
-      selectedEndDate,
+      storeData.selectedStartDate,
+      storeData.selectedEndDate,
     );
     console.log(
       "### diff",
-      differenceInDays(start, selectedStartDate),
-      differenceInDays(end, selectedEndDate),
+      differenceInDays(start, storeData.selectedStartDate),
+      differenceInDays(end, storeData.selectedEndDate),
     );
 
     // the range control will try to adjust its range to be aligned with its "step" value.
     // rejecting small adjustments made by the control prevent us getting into a loop of constant adjustments
     // if changing the step value, this may need to be adjusted to reject a larger range
-    if (Math.abs(differenceInDays(start, selectedStartDate)) > 1) {
-      setSelectedStartDate(start);
-    } else if (Math.abs(differenceInDays(end, selectedEndDate)) > 1) {
-      setSelectedEndDate(end);
+    if (Math.abs(differenceInDays(start, storeData.selectedStartDate)) > 1) {
+      actions.setSelectedStartDate(start);
+    } else if (Math.abs(differenceInDays(end, storeData.selectedEndDate)) > 1) {
+      actions.setSelectedEndDate(end);
     }
   };
-
-  // const onMode = (curr, next, step, reversed, getValue) => {
-  //   console.log("### mode", curr, next);
-  //   return curr;
-  // };
-
-  console.log("### config", config);
   return (
     <DateRange
       error={error}
@@ -88,12 +89,14 @@ const RangeBlock = ({}) => {
       onUpdateCallback={() => {}}
       onChangeCallback={onTimeRangeChange}
       //mode={onMode}
-      dataIntervals={previewStationVariables.map((data) => ({
-        start: new Date(data.min_obs_time),
-        end: new Date(data.max_obs_time),
-        type: "observation",
-        color: config.plotColor,
-      }))}
+      dataIntervals={
+        previewStationVariables.variables?.map((data) => ({
+          start: new Date(data.min_obs_time),
+          end: new Date(data.max_obs_time),
+          type: "observation",
+          color: config.plotColor,
+        })) ?? []
+      }
       //hideHandles={true}
     />
   );
diff --git a/src/components/preview/StationPreview/StationPreview.js b/src/components/preview/StationPreview/StationPreview.js
index 5943b510..04c9ff41 100644
--- a/src/components/preview/StationPreview/StationPreview.js
+++ b/src/components/preview/StationPreview/StationPreview.js
@@ -1,43 +1,24 @@
-import { useLoaderData } from "react-router-dom";
+import { useLoaderData, Link } from "react-router-dom";
 import React, { useEffect } from "react";
-import { Container, Spinner } from "react-bootstrap";
-import { useShallow } from "zustand/react/shallow";
-import { useStore } from "../../../state/state-store";
+import { Container, Spinner, Row, Col } from "react-bootstrap";
 import HeaderBlock from "./HeaderBlock";
 import NavBlock from "./NavBlock";
 import GraphsBlock from "./GraphsBlock";
+import { useStation } from "../../../state/query-hooks/use-station";
+import { useStationVariablesDefaults } from "../../../state/client-server-hooks/use-station-variables-defaults";
 
 export default function StationPreview() {
   const urlParams = useLoaderData();
-  const data = useStore(
-    useShallow((state) => ({
-      previewStation: state.previewStation,
-      previewVariables: state.previewStationVariables,
-      config: state.config,
-    })),
-  );
-  const actions = useStore((state) => ({
-    isConfigLoaded: state.isConfigLoaded,
-    loadPreviewStation: state.loadPreviewStation,
-    loadPreviewStationVariables: state.loadPreviewStationVariables,
-  }));
-
-  // load station we want to do a preview for, this may be instant if the stations are
-  // already loaded into the metadata. If missing it will ask the server
-  useEffect(() => {
-    if (actions.isConfigLoaded()) {
-      actions.loadPreviewStation(urlParams.stationId);
-    }
-  }, [data.config, urlParams.stationId]);
+  // initialize the zustand store with defaults based on data loaded from react query.
+  const {
+    data: previewStation,
+    isLoading: isStationLoading,
+    isError: isStationError,
+  } = useStation(urlParams.stationId);
+  const { data: previewStationVariables, isLoading } =
+    useStationVariablesDefaults(urlParams.stationId);
 
-  // once station is loaded we need to load our preview information
-  useEffect(() => {
-    if (actions.isConfigLoaded() && data.previewStation) {
-      actions.loadPreviewStationVariables(data.previewStation.id);
-    }
-  }, [data.config, data.previewStation]);
-
-  if (!data.previewStation) {
+  if (isLoading || isStationLoading) {
     return (
       <Container fluid className="StationPreview">
         <Spinner animation="border" role="status">
@@ -47,11 +28,17 @@ export default function StationPreview() {
     );
   }
 
+  const hasVariables = (previewStationVariables?.variables?.length ?? 0) > 0;
+
   return (
     <Container className="StationPreview mt-2">
       <HeaderBlock />
-      <NavBlock />
-      <GraphsBlock />
+      {hasVariables && (
+        <>
+          <NavBlock />
+          <GraphsBlock />
+        </>
+      )}
     </Container>
   );
 }
diff --git a/src/index.js b/src/index.js
index 2e6f34b5..eb5ee10b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,7 +7,11 @@ import {
 } from "react-router-dom";
 import { createRoot } from "react-dom/client";
 import App from "./components/main/App";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryCache,
+} from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import "bootstrap/dist/css/bootstrap.css";
@@ -38,7 +42,12 @@ const getBaseName = () => {
 };
 
 // Create a client
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) =>
+      console.error("An error occurred in the query cache", error),
+  }),
+});
 
 // Code split our bundle along our primary routes using the "lazy" function.
 // https://reactrouter.com/en/main/route/lazy
diff --git a/src/state/client-server-hooks/use-config-defaults.js b/src/state/client-server-hooks/use-config-defaults.js
new file mode 100644
index 00000000..768bff29
--- /dev/null
+++ b/src/state/client-server-hooks/use-config-defaults.js
@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+import L from "leaflet";
+import { setLethargicMapScrolling } from "../../utils/leaflet-extensions";
+import { setTimingEnabled } from "../../utils/timing";
+import { useConfig } from "../query-hooks/use-config";
+import { useStore } from "../state-store";
+
+/**
+ * This hook effectively runs once after config loads and provides various defaults to the app.
+ * @returns {object} results from useConfig hook.
+ */
+export const useConfigDefaults = () => {
+  const { data: config, isLoading, isError } = useConfig();
+  const setStationLimit = useStore((state) => state.setStationLimit);
+
+  useEffect(() => {
+    if (isLoading || isError || !!config) {
+      return;
+    }
+
+    // Set browser title
+    document.title = config.appTitle;
+
+    // Provide Leaflet defaults.
+    L.drawLocal.edit.toolbar.buttons = {
+      edit: "Edit shapes",
+      editDisabled: "No shapes to edit",
+      remove: "Remove shapes",
+      removeDisabled: "No shapes to remove",
+    };
+    L.drawLocal.edit.handlers.remove.tooltip = "Click shape to remove";
+    L.drawLocal.edit.toolbar.actions.clearAll = {
+      title: "Remove all shapes",
+      text: "Remove all",
+    };
+
+    // Initialize Lethargy, which fixes scrolling problems with Mac computers.
+    if (config.lethargy.enabled) {
+      setLethargicMapScrolling(
+        config.lethargy.stability,
+        config.lethargy.sensitivity,
+        config.lethargy.tolerance,
+      );
+    }
+
+    // Export timing values to non-component code
+    setTimingEnabled(config.timingEnabled);
+
+    setStationLimit(config.stationLimit);
+  }, [config]);
+
+  return { isLoading, isError, data: config };
+};
+
+export default useConfigDefaults;
diff --git a/src/state/client-server-hooks/use-station-variables-defaults.js b/src/state/client-server-hooks/use-station-variables-defaults.js
new file mode 100644
index 00000000..ef093825
--- /dev/null
+++ b/src/state/client-server-hooks/use-station-variables-defaults.js
@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+import flow from "lodash/fp/flow";
+import map from "lodash/fp/map";
+import max from "date-fns/max";
+import min from "date-fns/min";
+import subMonths from "date-fns/subMonths";
+import parseIso from "date-fns/parseISO";
+import { useStore } from "../state-store";
+import { useStationVariables } from "../query-hooks/use-station-variables";
+
+const getMaxEndDate = flow(
+  map("max_obs_time"), // (string []) Pluck max_obs_time from variable objects (ISO 8601 date string)
+  map(parseIso), // (Date []) Parse ISO 8601 date strings to JS Date objects
+  max, // (Date) Get the latest date
+);
+const getMinStartDate = flow(
+  map("min_obs_time"), // (string []) Pluck min_obs_time from variable objects (ISO 8601 date string)
+  map(parseIso), // (Date []) Parse ISO 8601 date strings to JS Date objects
+  min, // (Date) Get the earliest date
+);
+
+/**
+ * Layer 3. Integration between async server state and Zustand client state for preview station variables
+ * @param {number} stationId
+ * @returns
+ */
+export const useStationVariablesDefaults = (stationId) => {
+  const { data, isLoading, isError } = useStationVariables(stationId);
+  const selectedDuration = useStore((state) => state.selectedDuration);
+  const storeActions = useStore((state) => ({
+    setStationId: state.setStationId,
+    setSelectedEndDate: state.setSelectedEndDate,
+    setMaxEndDate: state.setMaxEndDate,
+    setMinStartDate: state.setMinStartDate,
+  }));
+
+  useEffect(() => {
+    // if stationid changes, this will clear default ranges and set duration back to default
+    storeActions.setStationId(stationId);
+
+    if (data && data.variables?.length > 0) {
+      const maxEndDate = getMaxEndDate(data.variables);
+      const selectedStartDate = subMonths(maxEndDate, selectedDuration);
+
+      console.log("### selected date range", selectedStartDate, maxEndDate);
+
+      // set default ranges
+      storeActions.setMinStartDate(getMinStartDate(data.variables));
+      storeActions.setMaxEndDate(maxEndDate);
+      // end date will also update start date based on selected duration.
+      storeActions.setSelectedEndDate(maxEndDate);
+    }
+  }, [stationId, data]);
+
+  return { isLoading, isError, stationId, data };
+};
diff --git a/src/state/query-hooks/use-config.js b/src/state/query-hooks/use-config.js
index b37faf99..7d00e29c 100644
--- a/src/state/query-hooks/use-config.js
+++ b/src/state/query-hooks/use-config.js
@@ -84,32 +84,17 @@ const getZoomMarkerRadius = (zmrSpec) => {
   };
 };
 
+/**
+ * Layer 1. Server fetch and config parsing.
+ * @returns {Promise<object>}
+ */
 const fetchConfig = async () => {
-  let config = {};
-  try {
-    const response = await fetch(`${process.env.PUBLIC_URL}/config.yaml`);
-    const yamlConfig = await response.text();
-    const fetchedConfig = yaml.load(yamlConfig);
-    config = { ...defaultConfig, ...fetchedConfig };
-  } catch (error) {
-    // set({
-    //   configError: (
-    //     <div>
-    //       Error loading or parsing config.yaml: <pre>{error.toString()}</pre>
-    //     </div>
-    //   ),
-    // });
-    throw error;
-  }
+  const response = await fetch(`${process.env.PUBLIC_URL}/config.yaml`);
+  const yamlConfig = await response.text();
+  const fetchedConfig = yaml.load(yamlConfig);
+  const config = { ...defaultConfig, ...fetchedConfig };
 
-  try {
-    checkMissingKeys(config);
-  } catch (error) {
-    // set({
-    //   configError: error.toString(),
-    // });
-    throw error;
-  }
+  checkMissingKeys(config);
 
   // Extend config with some env var values
   config.appVersion = process.env.REACT_APP_APP_VERSION ?? "unknown";
@@ -130,6 +115,10 @@ const fetchConfig = async () => {
 
 const CONFIG_QUERY_KEY = ["config"];
 
+/**
+ * Layer 2. Query caching, async state management and request deduplication.
+ * @returns {object}
+ */
 export const useConfig = () =>
   useQuery({
     queryKey: CONFIG_QUERY_KEY,
diff --git a/src/state/query-hooks/use-station-variable-observations.js b/src/state/query-hooks/use-station-variable-observations.js
index be761016..4bb2d387 100644
--- a/src/state/query-hooks/use-station-variable-observations.js
+++ b/src/state/query-hooks/use-station-variable-observations.js
@@ -1,11 +1,19 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import urljoin from "url-join";
+import formatISO from "date-fns/formatISO";
 import { useConfig } from "./use-config";
+import { useStore } from "../state-store";
 
 export const STATION_VARIABLE_OBSERVATIONS_QUERY_KEY =
   "station-variable-observations";
 
+const formatDateForApi = (date) => {
+  return formatISO(date, {
+    representation: "date",
+  });
+};
+
 export const getStationVariablesObservations = async ({
   config,
   stationId,
@@ -24,8 +32,8 @@ export const getStationVariablesObservations = async ({
     ),
     {
       params: {
-        start_date: startDate.toISOString(),
-        end_date: endDate.toISOString(),
+        start_date: formatDateForApi(startDate),
+        end_date: formatDateForApi(endDate),
       },
     },
   );
@@ -40,6 +48,12 @@ export const useStationVariableObservations = (
 ) => {
   const { data: config } = useConfig();
 
+  if (!stationId || !variableId || !startDate || !endDate) {
+    throw new Error(
+      "stationId, variableId, startDate, and endDate are required",
+    );
+  }
+
   return useQuery({
     queryKey: [
       STATION_VARIABLE_OBSERVATIONS_QUERY_KEY,
diff --git a/src/state/query-hooks/use-station-variables.js b/src/state/query-hooks/use-station-variables.js
index 63af368c..ea01284d 100644
--- a/src/state/query-hooks/use-station-variables.js
+++ b/src/state/query-hooks/use-station-variables.js
@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import urljoin from "url-join";
+import filter from "lodash/fp/filter";
 import { useConfig } from "./use-config";
 
 export const STATION_VARIABLES_QUERY_KEY = "station-variables";
@@ -9,6 +10,12 @@ export const getStationVariables = async ({ config, stationId }) => {
   const { data } = await axios.get(
     urljoin(config.sdsUrl, "stations", stationId, "variables"),
   );
+
+  // we only care about observations variables on the front end, filter out the rest
+  data.variables = filter((variable) => variable.tags.includes("observation"))(
+    data.variables,
+  );
+
   return data;
 };
 
diff --git a/src/state/query-hooks/use-station.js b/src/state/query-hooks/use-station.js
index 73a42399..921bf9ea 100644
--- a/src/state/query-hooks/use-station.js
+++ b/src/state/query-hooks/use-station.js
@@ -1,13 +1,28 @@
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import urljoin from "url-join";
+import { mapDeep } from "../../utils/fp";
 import { useConfig } from "./use-config";
+import isString from "lodash/fp/isString";
 
 export const STATION_QUERY_KEY = "station";
 
+// TODO: should this be replaced with date-fns?
+// Regex for ISO 8601 date strings; allows YYYY-MM-DD with optional T spec.
+// Now you've got two problems :)
+const ISO_8601 = /\d{4}-\d{2}-\d{2}(Td{2}:\d{2}:\d{2})?/;
+
+function transformIso8601Date(value) {
+  // If `value` is a string that matches the ISO 8601 date format,
+  // transform it to a JS Date.
+  // Otherwise return it unmolested.
+  const isDateString = isString(value) && ISO_8601.test(value);
+  return isDateString ? new Date(Date.parse(value)) : value;
+}
+
 export const getStationById = async ({ config, stationId }) => {
   const { data } = await axios.get(
-    urljoin(config.sdsUrl, "stations", stationId),
+    urljoin(config.sdsUrl, "stations", stationId.toString()),
     {
       transformResponse: axios.defaults.transformResponse.concat(
         mapDeep(transformIso8601Date),
@@ -20,6 +35,10 @@ export const getStationById = async ({ config, stationId }) => {
 export const useStation = (stationId) => {
   const { data: config } = useConfig();
 
+  if (!stationId) {
+    throw new Error("stationId is required");
+  }
+
   return useQuery({
     queryKey: [STATION_QUERY_KEY, stationId],
     queryFn: () => getStationById({ config, stationId }),
diff --git a/src/state/query-hooks/use-stations.js b/src/state/query-hooks/use-stations.js
index 10f4b402..e8f3a162 100644
--- a/src/state/query-hooks/use-stations.js
+++ b/src/state/query-hooks/use-stations.js
@@ -6,6 +6,7 @@ import isString from "lodash/fp/isString";
 import { useQuery } from "@tanstack/react-query";
 import { mapDeep } from "../../utils/fp";
 import { useConfig } from "./use-config";
+import { useStore } from "../state-store";
 import { filterExpressionsParser, filterPredicate } from "./filtering";
 
 // TODO: should this be replaced with date-fns?
@@ -21,7 +22,7 @@ function transformIso8601Date(value) {
   return isDateString ? new Date(Date.parse(value)) : value;
 }
 
-export const getStations = async ({ config }) => {
+export const getStations = async ({ config, stationLimit }) => {
   const parsedStationFilterExpressions = filterExpressionsParser(
     config.stationFilters,
   );
@@ -32,7 +33,7 @@ export const getStations = async ({ config }) => {
   const { data } = await axios.get(urljoin(config.sdsUrl, "stations"), {
     params: {
       offset: config.stationOffset,
-      limit: config.stationLimit,
+      limit: stationLimit,
       stride: config.stationStride,
       provinces: config.stationsQpProvinces,
     },
@@ -50,10 +51,11 @@ export const STATIONS_QUERY_KEY = "stations";
 
 export const useStations = () => {
   const { data: config } = useConfig();
+  const stationLimit = useStore((state) => state.stationLimit);
 
   return useQuery({
     queryKey: [STATIONS_QUERY_KEY],
-    queryFn: () => getStations({ config }),
+    queryFn: () => getStations({ config, stationLimit }),
     enabled: !!config,
     staleTime: 1000 * 60 * 60 * 24, // 24 hours
   });
diff --git a/src/state/slice-preview.js b/src/state/slice-preview.js
new file mode 100644
index 00000000..ac27e5a1
--- /dev/null
+++ b/src/state/slice-preview.js
@@ -0,0 +1,87 @@
+import isEqual from "date-fns/isEqual";
+import addMonths from "date-fns/addMonths";
+import subMonths from "date-fns/subMonths";
+
+export const createPreviewSlice = (set, get) => ({
+  stationId: null,
+  maxEndDate: null,
+  minStartDate: null,
+
+  selectedStartDate: null,
+  selectedEndDate: null,
+  selectedDuration: 6,
+
+  showLegend: true,
+
+  setStationId: (id) => {
+    if (id !== get().stationId) {
+      get().clearRanges();
+      set({ stationId: id });
+    }
+  },
+
+  setMaxEndDate: (date) => {
+    set({ maxEndDate: date });
+  },
+
+  setMinStartDate: (date) => {
+    set({ minStartDate: date });
+  },
+
+  /**
+   *
+   * @param {Date} date
+   */
+  setSelectedStartDate: (date) => {
+    const initialDate = get().selectedStartDate;
+    if (!isEqual(initialDate, date)) {
+      set({
+        selectedStartDate: date,
+        selectedEndDate: addMonths(date, get().selectedDuration),
+      });
+    }
+  },
+
+  /**
+   *
+   * @param {Date} date
+   */
+  setSelectedEndDate: (date) => {
+    const initialDate = get().selectedEndDate;
+    if (!isEqual(initialDate, date)) {
+      set({
+        selectedEndDate: date,
+        selectedStartDate: subMonths(date, get().selectedDuration),
+      });
+    }
+  },
+
+  /**
+   *
+   * @param {number} months
+   */
+  setDurationBeforeEnd: (months) => {
+    const initialDuration = get().selectedDuration;
+    if (initialDuration !== months) {
+      set({
+        selectedDuration: months,
+        selectedStartDate: subMonths(get().selectedEndDate, months),
+      });
+    }
+  },
+  clearRanges: () => {
+    set({
+      maxEndDate: null,
+      minStartDate: null,
+      selectedStartDate: null,
+      selectedEndDate: null,
+      selectedDuration: 6,
+    });
+  },
+
+  toggleLegend: () => {
+    set({ showLegend: !get().showLegend });
+  },
+});
+
+export default createPreviewSlice;
diff --git a/src/state/state-store.js b/src/state/state-store.js
index 15790633..4e91c54b 100644
--- a/src/state/state-store.js
+++ b/src/state/state-store.js
@@ -1,8 +1,12 @@
 import { create } from "zustand";
 import { createDebugSlice } from "./slice-debug";
+import { createPreviewSlice } from "./slice-preview";
 
 export const useStore = create((set, get) => ({
+  stationsLimit: null,
+
   ...createDebugSlice(set, get),
+  ...createPreviewSlice(set, get),
 
   // Actions
   setStationLimit: (limit) => set({ stationsLimit: limit }),