Merge pull request #184 from pacificclimate/station-data-1.6.0-bugfix

#183 Bug fixes; ranges ordering, race condition

src/components/controls/daterange/index.js → src/components/controls/DateRange.js

@@ -34,13 +34,13 @@ import {
   addMinutes,
 } from "date-fns";
 
-import SliderRail from "./sub/SliderRail";
-import DisabledTrack from "./sub/Track";
-import DataTrack from "./sub/DataTrack";
-import Tick from "./sub/Tick";
-import Handle from "./sub/Handle";
+import SliderRail from "./daterange/sub/SliderRail";
+import DisabledTrack from "./daterange/sub/Track";
+import DataTrack from "./daterange/sub/DataTrack";
+import Tick from "./daterange/sub/Tick";
+import Handle from "./daterange/sub/Handle";
 
-import "./styles/index.scss";
+import "./daterange/styles/index.scss";
 
 const getTimelineConfig = (timelineStart, timelineLength) => (date) => {
   const percent =
@@ -59,19 +59,17 @@ const getFormattedIntervals = (
   const timelineLength = differenceInMilliseconds(endTime, startTime);
   const getConfig = getTimelineConfig(startTime, timelineLength);
 
-  const formattedBlockedDates = blockedDates
-    .sort((a, b) => a.start - b.start)
-    .map((interval, index) => {
-      let { start, end, type, color } = interval;
+  const formattedBlockedDates = blockedDates.map((interval, index) => {
+    let { start, end, type, color } = interval;
 
-      if (isBefore(start, startTime)) start = startTime;
-      if (isAfter(end, endTime)) end = endTime;
+    if (isBefore(start, startTime)) start = startTime;
+    if (isAfter(end, endTime)) end = endTime;
 
-      const source = getConfig(start);
-      const target = getConfig(end);
+    const source = getConfig(start);
+    const target = getConfig(end);
 
-      return { id: `${classPrefix}-${index}`, source, target, type, color };
-    });
+    return { id: `${classPrefix}-${index}`, source, target, type, color };
+  });
 
   // console.log("### formattedBlockedDates", formattedBlockedDates);
 
@@ -261,6 +259,7 @@ class DateRange extends React.Component {
                     ({ id, source, target, type, color }, index) => (
                       <DataTrack
                         key={id}
+                        id={id}
                         source={source}
                         target={target}
                         getTrackProps={getTrackProps}

src/components/info/ObservationCounts.js

@@ -41,7 +41,7 @@ function ObservationCounts({ clipToDate }) {
   const loadingMessage = "Loading ...";
 
   const countTotals = useMemo(() => {
-    if (isLoading || countData === null) {
+    if (isLoading || !countData) {
       return { observations: null, climatologies: null };
     }
     const monthlyObservations = totalCounts(

src/components/info/StationData.js

@@ -5,7 +5,10 @@ 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 } from "@/utils/pdp-data-service";
+import {
+  dataDownloadTarget,
+  dataDownloadFilename,
+} from "@/utils/pdp-data-service";
 import FileFormatSelector from "@/components/selectors/FileFormatSelector";
 import ClipToDateControl from "@/components/controls/ClipToDateControl";
 import SelectionCounts from "@/components/info/SelectionCounts";
@@ -29,7 +32,7 @@ function StationData({ rowClasses }) {
   const { data: allFrequencies } = useFrequencies();
 
   const {
-    polygon,
+    area: polygon,
     startDate,
     endDate,
     selectedNetworks: selectedNetworksUris,
@@ -39,7 +42,7 @@ function StationData({ rowClasses }) {
   } = useStationsStore(
     useShallow(
       pick([
-        "polygon",
+        "area",
         "startDate",
         "endDate",
         "selectedNetworks",
@@ -117,7 +120,14 @@ function StationData({ rowClasses }) {
                       className={"me-2"}
                       disabled={urlTooLong}
                       href={urlTooLong ? undefined : downloadUrl}
-                      download={urlTooLong ? undefined : downloadUrl}
+                      download={
+                        urlTooLong
+                          ? undefined
+                          : dataDownloadFilename({
+                              dataCategory,
+                              fileFormat: dataFormat,
+                            })
+                      }
                     >
                       {linkLabel}
                     </Button>

src/components/preview/RangeBlock.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useShallow } from "zustand/react/shallow";
 import pick from "lodash/fp/pick";
-import DateRange from "@/components/controls/daterange";
+import DateRange from "@/components/controls/DateRange";
 import addDays from "date-fns/addDays";
 import differenceInDays from "date-fns/differenceInDays";
 import differenceInYears from "date-fns/differenceInYears";
@@ -93,6 +93,7 @@ const RangeBlock = ({}) => {
       //mode={onMode}
       dataIntervals={
         previewStationVariables.variables?.map((data) => ({
+          variableId: data.id,
           start: new Date(data.min_obs_time),
           end: new Date(data.max_obs_time),
           type: "observation",

src/state/client-server-hooks/use-station-variables-defaults.js

@@ -4,10 +4,9 @@ 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 "../client/state-store";
-import { useStationVariables } from "../query-hooks/use-station-variables";
+import { useStore } from "@/state/client/state-store";
+import { useStationVariables } from "@/state/query-hooks/use-station-variables";
 
 const getMaxEndDate = flow(
   map("max_obs_time"), // (string []) Pluck max_obs_time from variable objects (ISO 8601 date string)
@@ -27,7 +26,6 @@ const getMinStartDate = flow(
  */
 export const useStationVariablesDefaults = (stationId) => {
   const { data, isLoading, isError } = useStationVariables(stationId);
-  const selectedDuration = useStore((state) => state.selectedDuration);
   const storeActions = useStore(
     useShallow((state) => ({
       setStationId: state.setStationId,
@@ -37,15 +35,13 @@ export const useStationVariablesDefaults = (stationId) => {
     })),
   );
 
+  storeActions.setStationId(stationId);
+
   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));

src/utils/pdp-data-service.js

@@ -1,17 +1,13 @@
 import { makeURI } from "./uri";
 import assignAll from "lodash/fp/assignAll";
 import capitalize from "lodash/fp/capitalize";
-import filter from "lodash/fp/filter";
-import flatten from "lodash/fp/flatten";
 import flow from "lodash/fp/flow";
 import get from "lodash/fp/get";
 import join from "lodash/fp/join";
 import map from "lodash/fp/map";
 import padCharsStart from "lodash/fp/padCharsStart";
-import tap from "lodash/fp/tap";
 import uniq from "lodash/fp/uniq";
 import { geoJSON2WKT } from "./geographic-encodings";
-import { includes, some } from "lodash";
 
 const pad2 = padCharsStart("0", 2);
 
@@ -141,5 +137,5 @@ export const dataDownloadTarget = ({
 //   };
 
 export const dataDownloadFilename = ({ dataCategory, fileFormat }) => {
-  return `${{ dataCategory, fileFormat }}.${get("value", fileFormat)}`;
+  return `${dataCategory}.${get("value", fileFormat)}`;
 };