refactor: coalesce items at the provider level

Author: gadomski

src/app.tsx

@@ -58,11 +58,7 @@ export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <MapProvider>
-        <StacMapProvider
-          href={href}
-          fileUpload={fileUpload}
-          temporalFilter={undefined} // TODO re-add temporal filtering: https://github.com/developmentseed/stac-map/issues/123
-        >
+        <StacMapProvider href={href} fileUpload={fileUpload}>
           <Box zIndex={0} position={"absolute"} top={0} left={0}>
             <FileUpload.RootProvider value={fileUpload} unstyled={true}>
               <FileUpload.Dropzone

src/components/map.tsx

@@ -46,7 +46,7 @@ export default function Map() {
     value,
     collections,
     items,
-    linkedItems,
+    filteredItems,
     picked,
     setPicked,
     stacGeoparquetTable,
@@ -100,7 +100,7 @@ export default function Map() {
     }),
     new GeoJsonLayer({
       id: "items",
-      data: (items || linkedItems) as Feature[] | undefined,
+      data: (filteredItems || items) as Feature[] | undefined,
       filled: true,
       stroked: true,
       getFillColor: fillColor,

src/context.ts

@@ -2,6 +2,7 @@ import type { Table } from "apache-arrow";
 import { createContext } from "react";
 import type { StacCollection, StacItem } from "stac-ts";
 import type { StacGeoparquetMetadata, StacValue } from "./types/stac";
+import type { TemporalFilter } from "./types/datetime";
 
 export const StacMapContext = createContext<StacMapContextType | null>(null);
 
@@ -14,10 +15,7 @@ interface StacMapContextType {
   /// Collections either loaded from the collections endpoint or linked from the value.
   collections: StacCollection[] | undefined;
 
-  /// STAC items linked form the value.
-  linkedItems: StacItem[] | undefined;
-
-  /// STAC items for visualization, often from search.
+  /// STAC items, either linked or from a search.
   items: StacItem[] | undefined;
 
   /// Set the items.
@@ -40,4 +38,13 @@ interface StacMapContextType {
 
   /// Set the picked item.
   setPicked: (value: StacItem | undefined) => void;
+
+  /// The temporal filter for items.
+  temporalFilter: TemporalFilter | undefined;
+
+  /// Sets the temporal filter.
+  setTemporalFilter: (temporalFilter: TemporalFilter | undefined) => void;
+
+  /// Filtered items.
+  filteredItems: StacItem[] | undefined;
 }

src/provider.tsx

@@ -1,5 +1,5 @@
 import type { UseFileUploadReturn } from "@chakra-ui/react";
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import type { StacItem } from "stac-ts";
 import { StacMapContext } from "./context";
 import useStacGeoparquet from "./hooks/stac-geoparquet";
@@ -9,14 +9,16 @@ import type { TemporalFilter } from "./types/datetime";
 export function StacMapProvider({
   href,
   fileUpload,
-  temporalFilter,
   children,
 }: {
   href: string | undefined;
   fileUpload: UseFileUploadReturn;
-  temporalFilter: TemporalFilter | undefined;
   children: ReactNode;
 }) {
+  const [unlinkedItems, setUnlinkedItems] = useState<StacItem[]>();
+  const [picked, setPicked] = useState<StacItem>();
+  const [temporalFilter, setTemporalFilter] = useState<TemporalFilter>();
+
   // TODO we should probably consolidate useStacValue and useStacGeoparquet into
   // a single hook, since they're coupled.
   const {
@@ -34,8 +36,10 @@ export function StacMapProvider({
     setId: setStacGeoparquetItemId,
     item: stacGeoparquetItem,
   } = useStacGeoparquet(parquetPath, temporalFilter);
-  const [items, setItems] = useState<StacItem[]>();
-  const [picked, setPicked] = useState<StacItem>();
+
+  const items = useMemo(() => {
+    return unlinkedItems || linkedItems;
+  }, [unlinkedItems, linkedItems]);
 
   useEffect(() => {
     if (value?.title || value?.id) {
@@ -44,30 +48,65 @@ export function StacMapProvider({
       document.title = "stac-map";
     }
 
-    setItems(undefined);
+    setUnlinkedItems(undefined);
     setPicked(undefined);
   }, [value]);
 
   useEffect(() => {
     setPicked(stacGeoparquetItem);
   }, [stacGeoparquetItem]);
 
+  const filteredItems = useMemo(() => {
+    if (items && temporalFilter) {
+      return items.filter((item) =>
+        isItemWithinTemporalFilter(item, temporalFilter),
+      );
+    } else {
+      return undefined;
+    }
+  }, [items, temporalFilter]);
+
   return (
     <StacMapContext.Provider
       value={{
         value,
         collections,
-        linkedItems,
         items,
-        setItems,
+        setItems: setUnlinkedItems,
         picked,
         setPicked,
         stacGeoparquetTable,
         stacGeoparquetMetadata,
         setStacGeoparquetItemId,
+        temporalFilter,
+        setTemporalFilter,
+        filteredItems,
       }}
     >
       {children}
     </StacMapContext.Provider>
   );
 }
+
+function isItemWithinTemporalFilter(
+  item: StacItem,
+  temporalFilter: TemporalFilter,
+) {
+  const start = item.properties?.start_datetime
+    ? new Date(item.properties.start_datetime)
+    : item.properties?.datetime
+      ? new Date(item.properties.datetime)
+      : null;
+  if (!start) {
+    return false;
+  }
+  const end = item.properties?.end_datetime
+    ? new Date(item.properties.end_datetime)
+    : item.properties?.datetime
+      ? new Date(item.properties.datetime)
+      : null;
+  if (!end) {
+    return false;
+  }
+  return start >= temporalFilter.start && end <= temporalFilter.end;
+}