#178 PR feedback, console log, state access

- Remove or comment no longer needed console.logs - Reduce state access repetition by using pick
pacificclimate · Mar 11, 2024 · 4bccc21 · 4bccc21
1 parent 23c7670
commit 4bccc21
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 258 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -24,22 +24,11 @@
       "name": "vscode-jest-tests",
       "request": "launch",
       "runtimeExecutable": "npm",
-      "runtimeArgs": [
-        "run",
-        "test",
-        "--runInBand"
-        //"--env=jest-environment-jsdom-sixteen",
-        //"--transformIgnorePatterns \"node_modules/(?!date-fns)/\""
-      ],
-      "args": [
-        //   "--runInBand",
-        //   "--fileDirname", // ADDING THE CURRENT FILENAME DIR FOR THE SCRIPT
-        //   "${fileDirname}"
-      ],
+      "runtimeArgs": ["run", "test", "--runInBand"],
+      "args": [],
       "cwd": "${workspaceFolder}",
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen"
-      // "program": "${workspaceFolder}/tools/vscode-jest-tests/index.js" // THE SCRIPT
     }
   ]
 }
diff --git a/src/components/controls/IncludeStationsWithNoObsControl.js b/src/components/controls/IncludeStationsWithNoObsControl.js
@@ -1,18 +1,17 @@
-import PropTypes from "prop-types";
 import React from "react";
+import { useShallow } from "zustand/react/shallow";
 
-import InfoPopup from "../util/InfoPopup/InfoPopup";
+import InfoPopup from "@/components/util/InfoPopup";
 import CheckboxControl from "./CheckboxControl";
 import { useStationsStore } from "@/state/client/stations-store";
 
 export default function IncludeStationsWithNoObsControl() {
-  const {
-    includeStationsWithNoObs: value,
-    toggleIncludeStationsWithNoObs: onChange,
-  } = useStationsStore((state) => ({
-    includeStationsWithNoObs: state.includeStationsWithNoObs,
-    toggleIncludeStationsWithNoObs: state.toggleIncludeStationsWithNoObs,
-  }));
+  const { value, onChange } = useStationsStore(
+    useShallow((state) => ({
+      value: state.includeStationsWithNoObs,
+      onChange: state.toggleIncludeStationsWithNoObs,
+    })),
+  );
   const label = "Include stations with no observations";
   return (
     <CheckboxControl

diff --git a/src/components/controls/OnlyWithClimatologyControl.js b/src/components/controls/OnlyWithClimatologyControl.js
@@ -1,14 +1,15 @@
 import React from "react";
+import { useShallow } from "zustand/react/shallow";
+import pick from "lodash/fp/pick";
 
 import CheckboxControl from "./CheckboxControl";
 import { useStationsStore } from "@/state/client/stations-store";
 
 export default function OnlyWithClimatologyControl() {
   const { onlyWithClimatology: value, toggleOnlyWithClimatology: onChange } =
-    useStationsStore((state) => ({
-      onlyWithClimatology: state.onlyWithClimatology,
-      toggleOnlyWithClimatology: state.toggleOnlyWithClimatology,
-    }));
+    useStationsStore(
+      useShallow(pick(["onlyWithClimatology", "toggleOnlyWithClimatology"])),
+    );
   const label = "Only include stations with climatology";
   return <CheckboxControl {...{ value, onChange, label }} />;
 }
diff --git a/src/components/controls/StationFilters.js b/src/components/controls/StationFilters.js
@@ -23,6 +23,8 @@
 
 import React from "react";
 import { Col, Row } from "react-bootstrap";
+import { useShallow } from "zustand/react/shallow";
+import pick from "lodash/fp/pick";
 
 import SelectionCounts from "@/components/info/SelectionCounts";
 import IncludeStationsWithNoObsControl from "@/components/controls/IncludeStationsWithNoObsControl";
@@ -31,29 +33,18 @@ import VariableSelector from "@/components/selectors/VariableSelector";
 import FrequencySelector from "@/components/selectors/FrequencySelector";
 import DateSelector from "@/components/selectors/DateSelector";
 import OnlyWithClimatologyControl from "@/components/controls/OnlyWithClimatologyControl";
-import { useVariables } from "@/state/query-hooks/use-variables";
-import { useFrequencies } from "@/state/query-hooks/use-frequencies";
 import { useStationsStore } from "@/state/client/stations-store";
 import { useStore } from "@/state/client/state-store";
 import { useConfigContext } from "@/state/context-hooks/use-config-context";
 
 function StationFilters({ rowClasses = "mb-3" }) {
   const config = useConfigContext();
-  const { data: allVariables } = useVariables();
-  const { data: allFrequencies } = useFrequencies();
   const { startDate, endDate, setStartDate, setEndDate } = useStationsStore(
-    (state) => ({
-      // dates
-      startDate: state.startDate,
-      endDate: state.endDate,
-      setStartDate: state.setStartDate,
-      setEndDate: state.setEndDate,
-    }),
+    useShallow(pick(["startDate", "endDate", "setStartDate", "setEndDate"])),
+  );
+  const { stationsLimit, setStationsLimit } = useStore(
+    useShallow(pick(["stationsLimit", "setStationsLimit"])),
   );
-  const { stationsLimit, setStationsLimit } = useStore((state) => ({
-    stationsLimit: state.stationsLimit,
-    setStationsLimit: state.setStationsLimit,
-  }));
 
   return (
     <>

diff --git a/src/components/controls/daterange/index.js b/src/components/controls/daterange/index.js
@@ -73,7 +73,7 @@ const getFormattedIntervals = (
       return { id: `${classPrefix}-${index}`, source, target, type, color };
     });
 
-  console.log("### formattedBlockedDates", formattedBlockedDates);
+  // console.log("### formattedBlockedDates", formattedBlockedDates);
 
   return formattedBlockedDates;
 };
@@ -171,8 +171,6 @@ class DateRange extends React.Component {
       hideHandles,
     } = this.props;
 
-    console.log("### dataIntervals", this.props.dataIntervals);
-
     const domain = timelineInterval.map((t) => Number(t));
 
     const disabledIntervals = this.disabledIntervals;

diff --git a/src/components/info/NetworksMetadata.js b/src/components/info/NetworksMetadata.js
@@ -1,8 +1,6 @@
 // This component renders a table showing a selected subset of network metadata.
-// This component wraps React Table v6. All props passed to this component are
-// passed into React Table.
+// This component wraps React Table v8.
 
-import PropTypes from "prop-types";
 import React from "react";
 import { Table } from "react-bootstrap";
 import {
@@ -77,7 +75,7 @@ function NetworksMetadata() {
     return "Loading...";
   }
 
-  console.log("### NetworksMetadata", table.getRowModel(), networks);
+  //console.log("### NetworksMetadata", table.getRowModel(), networks);
 
   const getSortedCssClass = (column) => {
     const classes = [];

diff --git a/src/components/info/ObservationCounts.js b/src/components/info/ObservationCounts.js
@@ -1,7 +1,9 @@
 import PropTypes from "prop-types";
 import React, { useMemo } from "react";
+import { useShallow } from "zustand/react/shallow";
+import pick from "lodash/fp/pick";
+import reduce from "lodash/fp/reduce";
 import { Table } from "react-bootstrap";
-import { reduce } from "lodash/fp";
 import InfoPopup from "@/components/util/InfoPopup";
 import logger from "@/logger";
 import { getTimer } from "@/utils/timing";
@@ -28,15 +30,10 @@ const totalCounts = timer.timeThis("totalCounts")((counts, stations) =>
 
 function ObservationCounts({ clipToDate }) {
   const { selectedStations: stations } = useStationFilteringContext();
-  const { startDate, endDate } = useStationsStore((state) => ({
-    startDate: state.startDate,
-    endDate: state.endDate,
-  }));
-  const {
-    data: countData,
-    isLoading,
-    isError,
-  } = useObservationCounts(
+  const { startDate, endDate } = useStationsStore(
+    useShallow(pick(["startDate", "endDate"])),
+  );
+  const { data: countData, isLoading } = useObservationCounts(
     clipToDate ? dateToStrForQuery(startDate) : null,
     clipToDate ? dateToStrForQuery(endDate) : null,
   );

diff --git a/src/components/info/StationData.js b/src/components/info/StationData.js
@@ -1,12 +1,11 @@
 import PropTypes from "prop-types";
 import React, { useState } from "react";
+import { useShallow } from "zustand/react/shallow";
+import pick from "lodash/fp/pick";
 import { Button, ButtonToolbar, Col, Row } from "react-bootstrap";
 import capitalize from "lodash/fp/capitalize";
 import map from "lodash/fp/map";
-import {
-  dataDownloadTarget,
-  dataDownloadFilename,
-} from "@/utils/pdp-data-service";
+import { dataDownloadTarget } from "@/utils/pdp-data-service";
 import FileFormatSelector from "@/components/selectors/FileFormatSelector";
 import ClipToDateControl from "@/components/controls/ClipToDateControl";
 import SelectionCounts from "@/components/info/SelectionCounts";
@@ -36,15 +35,19 @@ function StationData({ rowClasses }) {
     selectedVariablesIds,
     selectedFrequencies,
     onlyWithClimatology,
-  } = useStationsStore((state) => ({
-    polygon: state.selectedArea,
-    startDate: state.startDate,
-    endDate: state.endDate,
-    selectedNetworksUris: state.selectedNetworks,
-    selectedVariablesIds: state.selectedVariables,
-    selectedFrequencies: state.selectedFrequencies,
-    onlyWithClimatology: state.onlyWithClimatology,
-  }));
+  } = useStationsStore(
+    useShallow(
+      pick([
+        "polygon",
+        "startDate",
+        "endDate",
+        "selectedNetworksUris",
+        "selectedVariablesIds",
+        "selectedFrequencies",
+        "onlyWithClimatology",
+      ]),
+    ),
+  );
 
   const [dataFormat, setFileFormat] = useState();
   const [clipToDate, setClipToDate] = useState(false);

diff --git a/src/components/main/Body/StationFilteringProvider.js b/src/components/main/Body/StationFilteringProvider.js
@@ -1,13 +1,13 @@
-import { useState, useTransition, useEffect, useMemo } from "react";
+import { useState, useTransition, useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
+import pick from "lodash/fp/pick";
 import { StationFilteringContext } from "@/state/context-hooks/use-station-filtering-context";
 import { useStationsStore } from "@/state/client/stations-store";
 import { stationAreaFilter, stationFilter } from "@/utils/station-filtering";
 import { useStations } from "@/state/query-hooks/use-stations";
 import { useVariables } from "@/state/query-hooks/use-variables";
 
 export const StationFilteringProvider = ({ children }) => {
-  console.log("provider render");
   const {
     includeStationsWithNoObs,
     startDate,
@@ -18,18 +18,18 @@ export const StationFilteringProvider = ({ children }) => {
     onlyWithClimatology,
     area,
   } = useStationsStore(
-    useShallow((state) => ({
-      includeStationsWithNoObs: state.includeStationsWithNoObs,
-      startDate: state.startDate,
-      endDate: state.endDate,
-      selectedNetworks: state.selectedNetworks,
-      selectedVariables: state.selectedVariables,
-      selectedFrequencies: state.selectedFrequencies,
-      onlyWithClimatology: state.onlyWithClimatology,
-      stations: state.stations,
-      variables: state.variables,
-      area: state.area,
-    })),
+    useShallow(
+      pick([
+        "includeStationsWithNoObs",
+        "startDate",
+        "endDate",
+        "selectedNetworks",
+        "selectedVariables",
+        "selectedFrequencies",
+        "onlyWithClimatology",
+        "area",
+      ]),
+    ),
   );
   const { data: stations, isLoading: isStationsLoading } = useStations();
   const { data: variables, isLoading: isVariablesLoading } = useVariables();
@@ -44,17 +44,17 @@ export const StationFilteringProvider = ({ children }) => {
       if (!isStationsLoading && !isVariablesLoading) {
         compFilteredStations = stationFilter({
           filterValues: {
-            includeStationsWithNoObs: includeStationsWithNoObs,
-            startDate: startDate,
-            endDate: endDate,
-            selectedNetworks: selectedNetworks,
-            selectedVariables: selectedVariables,
-            selectedFrequencies: selectedFrequencies,
-            onlyWithClimatology: onlyWithClimatology,
+            includeStationsWithNoObs,
+            startDate,
+            endDate,
+            selectedNetworks,
+            selectedVariables,
+            selectedFrequencies,
+            onlyWithClimatology,
           },
           metadata: {
-            stations: stations,
-            variables: variables,
+            stations,
+            variables,
           },
         });
       }

diff --git a/src/components/preview/RangeBlock.js b/src/components/preview/RangeBlock.js
@@ -1,4 +1,6 @@
 import React from "react";
+import { useShallow } from "zustand/react/shallow";
+import pick from "lodash/fp/pick";
 import DateRange from "@/components/controls/daterange";
 import addDays from "date-fns/addDays";
 import differenceInDays from "date-fns/differenceInDays";
@@ -9,28 +11,29 @@ import { useStore } from "@/state/client/state-store";
 import { useStationVariables } from "@/state/query-hooks/use-station-variables";
 import useConfigContext from "@/state/context-hooks/use-config-context";
 
-const millisecondsPerMonth = 2629746000;
+//const millisecondsPerMonth = 2629746000;
 const millisedondsPerDay = 86400000;
 
 const RangeBlock = ({}) => {
   const config = useConfigContext();
-  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,
-  }));
+  const storeData = useStore(
+    useShallow(
+      pick([
+        "stationId",
+        "minStartDate",
+        "maxEndDate",
+        "selectedStartDate",
+        "selectedEndDate",
+      ]),
+    ),
+  );
+  const actions = useStore(
+    useShallow(pick(["setSelectedStartDate", "setSelectedEndDate"])),
+  );
 
-  const {
-    data: previewStationVariables,
-    isLoading,
-    isError,
-  } = useStationVariables(storeData.stationId);
+  const { data: previewStationVariables, isLoading } = useStationVariables(
+    storeData.stationId,
+  );
 
   if (!(previewStationVariables.variables?.length ?? 0 > 0)) {
     return <div>This station has no variables associated with it.</div>;
@@ -40,7 +43,7 @@ const RangeBlock = ({}) => {
     return <div>Loading...</div>;
   }
 
-  console.log("### RangeBlock", storeData, previewStationVariables);
+  //console.log("### RangeBlock", storeData, previewStationVariables);
 
   const startTime = startOfDecade(storeData.minStartDate);
   const endTime = addDays(endOfDecade(storeData.maxEndDate), 1);
@@ -54,18 +57,18 @@ const RangeBlock = ({}) => {
   const ticks = differenceInYears(endTime, startTime) / 10 + 1;
 
   const onTimeRangeChange = ([start, end]) => {
-    console.log(
-      "### onTimeRangeChange",
-      start,
-      end,
-      storeData.selectedStartDate,
-      storeData.selectedEndDate,
-    );
-    console.log(
-      "### diff",
-      differenceInDays(start, storeData.selectedStartDate),
-      differenceInDays(end, storeData.selectedEndDate),
-    );
+    // console.log(
+    //   "### onTimeRangeChange",
+    //   start,
+    //   end,
+    //   storeData.selectedStartDate,
+    //   storeData.selectedEndDate,
+    // );
+    // console.log(
+    //   "### diff",
+    //   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