diff --git a/src/components/controls/daterange/index.js b/src/components/controls/DateRange.js similarity index 93% rename from src/components/controls/daterange/index.js rename to src/components/controls/DateRange.js index 94bc90fd..b006175f 100644 --- a/src/components/controls/daterange/index.js +++ b/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) => ( { - if (isLoading || countData === null) { + if (isLoading || !countData) { return { observations: null, climatologies: null }; } const monthlyObservations = totalCounts( diff --git a/src/components/info/StationData.js b/src/components/info/StationData.js index 807d344f..37c3100e 100644 --- a/src/components/info/StationData.js +++ b/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} diff --git a/src/components/preview/RangeBlock.js b/src/components/preview/RangeBlock.js index 1a0984c0..b129215c 100644 --- a/src/components/preview/RangeBlock.js +++ b/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", diff --git a/src/state/client-server-hooks/use-station-variables-defaults.js b/src/state/client-server-hooks/use-station-variables-defaults.js index b89c874c..d3bd4ecc 100644 --- a/src/state/client-server-hooks/use-station-variables-defaults.js +++ b/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)); diff --git a/src/utils/pdp-data-service.js b/src/utils/pdp-data-service.js index 966215db..e92cd7d9 100644 --- a/src/utils/pdp-data-service.js +++ b/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)}`; };