Date filter #60

indraneel · 2025-07-09T23:57:45Z

Available PR templates

Default
Version Release
Alternatively delete and start empty

- Add DateRange interface for start/end dates and times - Add DateFilterPreset interface for quick filter options - Update StacSearch interface to include datetime field - Add date filter properties to StacMapContextType interface

- Add date filter utility functions for item filtering and STAC search formatting - Add date range validation and preset configurations - Add URL persistence utilities for date range serialization/deserialization - Support for date/time parsing and ISO 8601 formatting

- Add dateRange state and setDateRange function - Add clearDateRange and isDateFilterActive computed property - Integrate date filter state with existing context - Add URL persistence for date range state

- Add useFilteredSearchItems hook for client-side item filtering - Add useFilteredCollections hook for collection temporal filtering - Implement memoized filtering logic for performance - Support filtering based on item datetime and collection temporal extent

- Update stac-search hook to include datetime in STAC API requests - Add date range to query keys for proper cache invalidation - Update stac-geoparquet hook to filter DuckDB queries by datetime - Support server-side filtering for improved performance

- Add DateFilter component with preset options and custom date inputs - Integrate DateFilter into panel search tab - Add visual indicators for active date filters in search results - Support for quick presets and custom date range selection

- Update map to use filtered search items and collections - Add visual indicators for active date filters - Support for filtered GeoJSON layer generation - Maintain map performance with filtered datasets

gadomski

Awesome, thanks for this! #4 isn't well written (apologies), but there's actually two different types of "date time filtering" we support and that you implement in this PR:

Filtering of already-loaded items, whether those items are loaded into searchItems or value (via an item collection)
Setting the datetime interval on a search

I think we should separate the two, putting the "filter items already loaded" stuff in a new tab with the standard <LuFilter /> icon. That lets us access the filtering even if the value doesn't support search, e.g. with item collections.

gadomski · 2025-07-10T12:19:58Z

src/types/stac.ts

+export interface DateFilterPreset {
+  id: string;
+  label: string;
+  getDateRange: () => DateRange;
+}


Nit: this file has been (so far) just for "stac-y" values ... this feels like it should live in the date-filter component?

Please push back if that's not standard practice for react apps.

agreed, was being lazy. changed

gadomski · 2025-07-10T12:22:07Z

src/utils/date-filter.ts

+    item.properties?.datetime ||
+    item.properties?.start_datetime ||
+    item.properties?.end_datetime;


This isn't quite right because we're loosing the "range" part of an item's datetime. I think we'll need something like (pseudocode): ((item.datetime || item.start_datetime) >= effectiveStartDate) || ((item.datetime || item.end_datetime) <= effectiveEndDate)

gadomski · 2025-07-10T12:24:43Z

src/provider/stac-map.tsx

+    // Date filtering properties
+    dateRange,
+    setDateRange,
+    clearDateRange,
+    isDateFilterActive,


Curious (not sure one way or the other) if we want to pull this all the way up to the app's state, or keep it in panel. My instinct is to keep it in panel, because we'll want to re-set the date range whenever we change value, because the date range will be bound by (e.g.) a collection's temporal extents or the temporal extents of an item collection's items

unless i'm misunderstanding, this makes me think that dateRange should be in the app state since it's tied with value

It can be derived from value, but might be different for searching (find me all items in 2025) and filtering (now that I have a search result from the server API, narrow the items in that search result down to June 2025).

… temporal extents

indraneel · 2025-07-11T22:48:13Z

i split out client side temporal filtering and added a separate ui for it. not tested across all the various types of inputs fwiw but seems to function decently well. will respect the server-side search temporal boundaries and the collection-level boundaries if those exist

scrubber.mov

gadomski · 2025-07-12T01:47:29Z

Yoooo this is it. I'll take a look at the code tomorrow but the functionality is dank

gadomski

Thanks! This is looking good. Some notes as I monkey'd around.

Functionality change requests

When there's no temporal data available, let's disable the tab (since that's what we've been doing w/ the other tabs):

The default state when there's no filter looks a little funny -- not sure the right way to show the sliders, maybe just for the full collection temporal extent?

I think it'd be nice to have the slider on the search page too?

Bugs

I slid the date slider around a bunch and got a crash with Too many calls to Location or History APIs within a short timeframe.
On a reload of http://localhost:5173/stac-map/?href=https%3A%2F%2Fstac.eoapi.dev%2Fcollections%2FMAXAR_yellowstone_flooding22&dateRange=startDate%3D2022-06-15T18%253A27%253A58.000Z%26endDate%3D2022-06-18T18%253A18%253A32.000Z&clientFilter=clientStartDate%3D2022-06-16T06%253A45%253A04.414Z%26clientEndDate%3D2022-06-18T18%253A18%253A32.000Z, I got In HTML, <button> cannot be a descendant of <button>.
When searching against http://localhost:5173/stac-map/?href=https%3A%2F%2Fstac.eoapi.dev%2Fcollections%2FMAXAR_yellowstone_flooding22&dateRange=startDate%3D2022-06-15T18%253A27%253A58.000Z%26endDate%3D2022-06-18T18%253A18%253A32.000Z&clientFilter=clientStartDate%3D2022-06-16T06%253A45%253A04.414Z%26clientEndDate%3D2022-06-18T18%253A18%253A32.000Z, I clicked "this year" and got Uncaught Error: [zag-js/slider] The configured min, max, steporminStepsBetweenThumbs values are invalid

indraneel · 2025-07-14T15:58:31Z

Bugs should be fixed.

added most of the features suggested:

I disagree about the search slider. I think the UX value of the slider is to immediately see results as you interact with it, so I don't think it makes sense to have a slider that triggers a network request each time. I am open to the idea that this is clunky UX and worth refining (we can remove server side date filtering entirely? especially since we're allowing for client-side filtering too)

gadomski

Looking sharp, just a couple more things 🙇🏼

Since we only have one element on the search pane, we can remove the accordion:
Still get a Uncaught Error: [zag-js/slider] The configured min, max, steporminStepsBetweenThumbs values are invalid when I click "this year" for a collection that doesn't have data for this year.
I'm finding the buttons to be a little buggy if I just spam click them, so maybe just remove for now? IMO the slider gets us a MVP.
Can we get the temporal scrubber (filter pane) working for http://localhost:5173/stac-map/?href=https%3A%2F%2Fraw.githubusercontent.com%2Fdevelopmentseed%2Flabs-375-stac-geoparquet-backend%2Frefs%2Fheads%2Fmain%2Fdata%2Fnaip.parquet? I think filtering stac-geoparquet could a cool use-case.

indraneel · 2025-07-17T15:32:21Z

I can move the accordion
I'll look at the Yellowstone data to try to reproduce this but would appreciate reprod steps
I'll remove the scrubber zoom buttons if i can't get them to work properly
As discussed, making the scrubber this will require state changes so I'll attempt those

gadomski · 2025-07-17T15:34:52Z

Reprod for crash (with yarn dev):

Go to http://localhost:5173/stac-map/?href=https%3A%2F%2Fstac.eoapi.dev%2Fcollections%2FMAXAR_yellowstone_flooding22&dateRange=startDate%3D2022-06-15T18%253A27%253A58.000Z%26endDate%3D2022-06-18T18%253A18%253A32.000Z
Click on the search tab
Click on This year

indraneel added 9 commits July 9, 2025 19:02

feat: add date filter types and context interfaces

9c30a93

- Add DateRange interface for start/end dates and times - Add DateFilterPreset interface for quick filter options - Update StacSearch interface to include datetime field - Add date filter properties to StacMapContextType interface

feat: implement date filter state management in provider

acb9bba

- Add dateRange state and setDateRange function - Add clearDateRange and isDateFilterActive computed property - Integrate date filter state with existing context - Add URL persistence for date range state

feat: integrate date filtering with map component

1a4dad6

- Update map to use filtered search items and collections - Add visual indicators for active date filters - Support for filtered GeoJSON layer generation - Maintain map performance with filtered datasets

add time filtering

e254346

Update date-filter.ts

2f5759d

indraneel mentioned this pull request Jul 9, 2025

Date filter #58

Closed

indraneel added 2 commits July 9, 2025 19:59

fix: prettier

8f9a9b7

make datetime filter collapsible

3d071ee

gadomski requested changes Jul 10, 2025

View reviewed changes

indraneel added 5 commits July 10, 2025 15:47

move date filter types

4203499

add logic to reset date range when the STAC value changes, respecting…

e583a45

… temporal extents

fix date boundary check logic

1de5911

lint fix

32db869

lint fix

1b85277

indraneel requested a review from gadomski July 10, 2025 20:43

indraneel added 10 commits July 11, 2025 17:31

feat: implement dual date filtering system

46ba6a5

reorganize filters

9ef7977

feat: add sliding date filter

2a40e38

add zoom to scrubber

576da18

fix: prettier

4d86a3c

Update stac-geoparquet.ts

c15dd28

add some defensive checking to slider

a935fe5

Update item.tsx

df30e20

Merge branch 'fix-layout' into date-filter-new

8eaa295

lint/prettier fix

e5a2774

gadomski requested changes Jul 14, 2025

View reviewed changes

indraneel added 4 commits July 14, 2025 11:18

fix: add debounce to stop history from thrashing

7173605

fix: resolve slider validation error when clicking "this year"

ecceb16

fix: html button nesting error

8c125cc

feat: keep track of temporal data and disable tab accordingly

3de3085

indraneel added 2 commits July 14, 2025 11:58

feat: show full range for client side slider

7ca9037

fix: prettier

49106f6

gadomski self-requested a review July 14, 2025 16:07

indraneel mentioned this pull request Jul 14, 2025

feat: viewport bounds search #61

Open

gadomski requested changes Jul 16, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Date filter #60

Date filter #60

indraneel commented Jul 9, 2025

Uh oh!

gadomski left a comment

Uh oh!

gadomski Jul 10, 2025

Uh oh!

indraneel Jul 10, 2025

Uh oh!

gadomski Jul 10, 2025

Uh oh!

gadomski Jul 10, 2025

Uh oh!

indraneel Jul 10, 2025

Uh oh!

gadomski Jul 10, 2025

Uh oh!

indraneel commented Jul 11, 2025 •

edited

Loading

Uh oh!

gadomski commented Jul 12, 2025

Uh oh!

gadomski left a comment

Uh oh!

indraneel commented Jul 14, 2025 •

edited

Loading

Uh oh!

gadomski left a comment

Uh oh!

indraneel commented Jul 17, 2025

Uh oh!

gadomski commented Jul 17, 2025

Uh oh!

Uh oh!

Date filter #60

Are you sure you want to change the base?

Date filter #60

Conversation

indraneel commented Jul 9, 2025

Available PR templates

Uh oh!

gadomski left a comment

Choose a reason for hiding this comment

Uh oh!

gadomski Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

indraneel Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

gadomski Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

gadomski Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

indraneel Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

gadomski Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

indraneel commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gadomski commented Jul 12, 2025

Uh oh!

gadomski left a comment

Choose a reason for hiding this comment

Functionality change requests

Bugs

Uh oh!

indraneel commented Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gadomski left a comment

Choose a reason for hiding this comment

Uh oh!

indraneel commented Jul 17, 2025

Uh oh!

gadomski commented Jul 17, 2025

Uh oh!

Uh oh!

indraneel commented Jul 11, 2025 •

edited

Loading

indraneel commented Jul 14, 2025 •

edited

Loading