Date filter

src/components/date-filter.tsx

@@ -0,0 +1,184 @@
+import {
+  Alert,
+  Button,
+  ButtonGroup,
+  HStack,
+  Input,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { LuCalendar, LuX } from "react-icons/lu";
+import { DATE_FILTER_PRESETS, isValidDateRange } from "../utils/date-filter";
+
+export interface DateRange {
+  startDate: Date | null;
+  endDate: Date | null;
+  startTime?: string; // HH:mm format
+  endTime?: string; // HH:mm format
+}
+
+export interface DateFilterPreset {
+  id: string;
+  label: string;
+  getDateRange: () => DateRange;
+}
+
+interface DateFilterProps {
+  dateRange: DateRange;
+  setDateRange: (dateRange: DateRange) => void;
+  clearDateRange: () => void;
+  isDateFilterActive: boolean;
+  title?: string;
+  description?: string;
+}
+
+export default function DateFilter({
+  dateRange,
+  setDateRange,
+  clearDateRange,
+  isDateFilterActive,
+  title = "Date & Time Filter",
+  description,
+}: DateFilterProps) {
+  const handlePresetSelect = (preset: (typeof DATE_FILTER_PRESETS)[0]) => {
+    setDateRange(preset.getDateRange());
+  };
+
+  const handleCustomDateChange = (
+    field: keyof DateRange,
+    value: Date | string | null,
+  ) => {
+    setDateRange({ ...dateRange, [field]: value });
+  };
+
+  const handleTimeChange = (field: "startTime" | "endTime", value: string) => {
+    setDateRange({ ...dateRange, [field]: value || undefined });
+  };
+
+  return (
+    <VStack
+      gap={4}
+      align="stretch"
+      p={4}
+      borderWidth={1}
+      borderRadius="md"
+      bg="white"
+      shadow="sm"
+    >
+      <HStack justify="space-between" align="center">
+        <HStack>
+          <LuCalendar />
+          <Text fontSize="sm" fontWeight="medium">
+            {title}
+          </Text>
+        </HStack>
+        {isDateFilterActive && (
+          <Button
+            size="sm"
+            variant="ghost"
+            colorScheme="red"
+            onClick={clearDateRange}
+          >
+            <LuX /> Clear
+          </Button>
+        )}
+      </HStack>
+
+      {description && (
+        <Text fontSize="xs" color="gray.600">
+          {description}
+        </Text>
+      )}
+
+      <VStack gap={3} align="stretch">
+        <Text fontSize="sm" fontWeight="medium">
+          Quick Presets
+        </Text>
+        <ButtonGroup size="sm" variant="outline" flexWrap="wrap">
+          {DATE_FILTER_PRESETS.map((preset) => (
+            <Button key={preset.id} onClick={() => handlePresetSelect(preset)}>
+              {preset.label}
+            </Button>
+          ))}
+        </ButtonGroup>
+
+        <Text fontSize="sm" fontWeight="medium">
+          Custom Range
+        </Text>
+        <VStack gap={3} align="stretch">
+          {/* Start Date and Time */}
+          <VStack align="stretch" gap={2}>
+            <Text fontSize="xs" fontWeight="medium">
+              Start Date & Time
+            </Text>
+            <HStack gap={2}>
+              <Input
+                type="date"
+                size="sm"
+                flex={1}
+                value={dateRange.startDate?.toISOString().split("T")[0] || ""}
+                onChange={(e) =>
+                  handleCustomDateChange(
+                    "startDate",
+                    e.target.value ? new Date(e.target.value) : null,
+                  )
+                }
+              />
+              <Input
+                type="time"
+                size="sm"
+                flex={1}
+                value={dateRange.startTime || ""}
+                onChange={(e) => handleTimeChange("startTime", e.target.value)}
+              />
+            </HStack>
+          </VStack>
+
+          <VStack align="stretch" gap={2}>
+            <Text fontSize="xs" fontWeight="medium">
+              End Date & Time
+            </Text>
+            <HStack gap={2}>
+              <Input
+                type="date"
+                size="sm"
+                flex={1}
+                value={dateRange.endDate?.toISOString().split("T")[0] || ""}
+                onChange={(e) =>
+                  handleCustomDateChange(
+                    "endDate",
+                    e.target.value ? new Date(e.target.value) : null,
+                  )
+                }
+              />
+              <Input
+                type="time"
+                size="sm"
+                flex={1}
+                value={dateRange.endTime || ""}
+                onChange={(e) => handleTimeChange("endTime", e.target.value)}
+              />
+            </HStack>
+          </VStack>
+        </VStack>
+
+        {!isValidDateRange(dateRange) && (
+          <Alert.Root status="error">
+            <Alert.Indicator />
+            <Alert.Content>
+              <Alert.Description>
+                Start date/time must be before or equal to end date/time
+              </Alert.Description>
+            </Alert.Content>
+          </Alert.Root>
+        )}
+
+        {isDateFilterActive && (
+          <Text fontSize="xs" color="green.600" fontWeight="medium">
+            ✓ Date & time filter is active
+          </Text>
+        )}
+      </VStack>
+    </VStack>
+  );
+}

src/components/filter.tsx

@@ -0,0 +1,12 @@
+import SlidingDateFilter from "./sliding-date-filter";
+
+export default function Filter() {
+  return (
+    <>
+      <SlidingDateFilter
+        title="Temporal Scrubber"
+        description="Scrub through the temporal range of loaded data"
+      />
+    </>
+  );
+}

src/components/map.tsx

@@ -14,6 +14,10 @@ import {
 } from "react-map-gl/maplibre";
 import type { StacCollection } from "stac-ts";
 import useStacMap from "../hooks/stac-map";
+import {
+  useFilteredSearchItems,
+  useFilteredCollections,
+} from "../hooks/stac-filtered-data";
 import { useColorModeValue } from "./ui/color-mode";
 
 function DeckGLOverlay(props: DeckProps) {
@@ -46,15 +50,17 @@ export default function Map() {
   );
   const {
     value,
-    collections,
-    searchItems,
     stacGeoparquetTable,
     stacGeoparquetMetadata,
     stacGeoparquetItem,
     setStacGeoparquetItemId,
     setPicked,
     picked,
   } = useStacMap();
+
+  const filteredSearchItems = useFilteredSearchItems();
+  const filteredCollections = useFilteredCollections();
+
   const [data, setData] = useState<GeoJSON | Feature[]>();
   const [visible, setVisible] = useState(true);
   const [filled, setFilled] = useState(true);
@@ -66,10 +72,12 @@ export default function Map() {
   useEffect(() => {
     switch (value?.type) {
       case "Catalog":
-        setBbbox(collections && getCollectionsExtent(collections));
+        setBbbox(
+          filteredCollections && getCollectionsExtent(filteredCollections),
+        );
         setData(
-          collections &&
-            collections.map((collection) =>
+          filteredCollections &&
+            filteredCollections.map((collection) =>
               bboxPolygon(collection.extent?.spatial?.bbox?.[0] as BBox),
             ),
         );
@@ -97,7 +105,7 @@ export default function Map() {
         setFilled(true);
         setPickable(true);
     }
-  }, [value, collections]);
+  }, [value, filteredCollections]);
 
   useEffect(() => {
     if (stacGeoparquetTable) {
@@ -161,14 +169,14 @@ export default function Map() {
   }, [bbox]);
 
   useEffect(() => {
-    if (searchItems.length > 0) {
+    if (filteredSearchItems.length > 0) {
       setVisible(false);
     } else {
       setVisible(true);
     }
-  }, [searchItems]);
+  }, [filteredSearchItems]);
 
-  const searchLayers = searchItems.map((items, index) => {
+  const searchLayers = filteredSearchItems.map((items, index) => {
     return new GeoJsonLayer({
       id: `search-${index}`,
       data: items as Feature[],

src/components/panel.tsx

@@ -1,20 +1,30 @@
-import { SkeletonText, Tabs } from "@chakra-ui/react";
+import { SkeletonText, Tabs, Accordion, HStack, Text } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import {
   LuInfo,
   LuMousePointerClick,
   LuSearch,
   LuUpload,
+  LuFilter,
 } from "react-icons/lu";
 import type { StacLink } from "stac-ts";
 import useStacMap from "../hooks/stac-map";
 import useStacValue from "../hooks/stac-value";
 import ItemSearch from "./search/item";
 import Upload from "./upload";
 import Value from "./value";
+import Filter from "./filter";
 
 export default function Panel() {
-  const { value, picked } = useStacMap();
+  const {
+    value,
+    picked,
+    dateRange,
+    setDateRange,
+    clearDateRange,
+    isDateFilterActive,
+    hasTemporalData,
+  } = useStacMap();
   const [tab, setTab] = useState<string>("upload");
   const [itemSearchLinks, setItemSearchLinks] = useState<StacLink[]>([]);
   const { value: root } = useStacValue(
@@ -62,6 +72,9 @@ export default function Panel() {
         >
           <LuSearch></LuSearch>
         </Tabs.Trigger>
+        <Tabs.Trigger value="filter" disabled={!hasTemporalData}>
+          <LuFilter></LuFilter>
+        </Tabs.Trigger>
         <Tabs.Trigger value="picked" disabled={!picked}>
           <LuMousePointerClick></LuMousePointerClick>
         </Tabs.Trigger>
@@ -77,13 +90,41 @@ export default function Panel() {
         </Tabs.Content>
         <Tabs.Content value="search">
           {value && itemSearchLinks.length > 0 && (
-            <ItemSearch
-              value={value}
-              links={itemSearchLinks}
-              defaultLink={itemSearchLinks[0]}
-            ></ItemSearch>
+            <Accordion.Root
+              variant="outline"
+              size="sm"
+              collapsible
+              defaultValue={["item-search"]}
+            >
+              <Accordion.Item value="item-search">
+                <Accordion.ItemTrigger>
+                  <HStack justify="space-between" width="100%">
+                    <Text fontSize="sm" fontWeight="medium">
+                      Item Search
+                    </Text>
+                    <Accordion.ItemIndicator />
+                  </HStack>
+                </Accordion.ItemTrigger>
+                <Accordion.ItemContent>
+                  <Accordion.ItemBody>
+                    <ItemSearch
+                      value={value}
+                      links={itemSearchLinks}
+                      defaultLink={itemSearchLinks[0]}
+                      dateRange={dateRange}
+                      setDateRange={setDateRange}
+                      clearDateRange={clearDateRange}
+                      isDateFilterActive={isDateFilterActive}
+                    />
+                  </Accordion.ItemBody>
+                </Accordion.ItemContent>
+              </Accordion.Item>
+            </Accordion.Root>
           )}
         </Tabs.Content>
+        <Tabs.Content value="filter">
+          <Filter />
+        </Tabs.Content>
         <Tabs.Content value="picked">
           {picked && <Value value={picked}></Value>}
         </Tabs.Content>