fix: search over antimeridian (#79)

* fix: move picked clearing up to the provider

* refactor: getStartAndEndDatetime

* fix: normalize bbox

* fix: typing

Author: gadomski

src/components/search/item.tsx

@@ -15,7 +15,6 @@ import {
   Select,
   Stack,
   Switch,
-  Text,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { LuPause, LuPlay, LuSearch, LuX } from "react-icons/lu";
@@ -34,7 +33,7 @@ export default function ItemSearch({
   collection: StacCollection;
   links: StacLink[];
 }) {
-  const { setItems, setPicked } = useStacMap();
+  const { setItems } = useStacMap();
   const [search, setSearch] = useState<StacSearch>();
   const [link, setLink] = useState<StacLink | undefined>(links[0]);
   const [datetime, setDatetime] = useState<string>();
@@ -44,9 +43,8 @@ export default function ItemSearch({
   useEffect(() => {
     if (!search) {
       setItems(undefined);
-      setPicked(undefined);
     }
-  }, [search, setItems, setPicked]);
+  }, [search, setItems]);
 
   const methods = createListCollection({
     items: links.map((link) => {
@@ -82,8 +80,6 @@ export default function ItemSearch({
         <Switch.Control></Switch.Control>
       </Switch.Root>
 
-      <Text></Text>
-
       <Datetime
         interval={collection.extent?.temporal?.interval[0]}
         setDatetime={setDatetime}
@@ -132,7 +128,14 @@ export default function ItemSearch({
               datetime,
               bbox:
                 useViewportBounds && map
-                  ? map.getBounds().toArray().flat()
+                  ? normalizeBbox(
+                      map.getBounds().toArray().flat() as [
+                        number,
+                        number,
+                        number,
+                        number,
+                      ],
+                    )
                   : undefined,
             })
           }
@@ -356,3 +359,26 @@ function DatetimeInput({
     </Field.Root>
   );
 }
+
+function normalizeBbox(bbox: [number, number, number, number]) {
+  if (bbox[2] - bbox[0] >= 360) {
+    return [-180, bbox[1], 180, bbox[3]];
+  } else if (bbox[0] < -180) {
+    return normalizeBbox([bbox[0] + 360, bbox[1], bbox[2] + 360, bbox[3]]);
+  } else if (bbox[0] > 180) {
+    return normalizeBbox([bbox[0] - 360, bbox[1], bbox[2] - 360, bbox[3]]);
+  } else if (bbox[2] > 180) {
+    // Antimeridian-crossing
+    toaster.create({
+      type: "info",
+      title: "Viewport crosses the antimeridian",
+      description:
+        "The viewport crosses the antimeridian, and many STAC API servers do not support bounding boxes that cross +/- 180° longitude. We're narrowing the viewport to only search to only one side.",
+    });
+    if ((bbox[0] + bbox[2]) / 2 > 180) {
+      return [-180, bbox[1], bbox[2] - 360, bbox[3]];
+    } else {
+      return [bbox[0], bbox[1], 180, bbox[3]];
+    }
+  }
+}

src/provider.tsx

@@ -63,20 +63,19 @@ export function StacMapProvider({ children }: { children: ReactNode }) {
     setTemporalFilter(undefined);
   }, [value, setStacGeoparquetItemId]);
 
+  useEffect(() => {
+    setPicked(undefined);
+  }, [items]);
+
   useEffect(() => {
     if (items) {
       let start: Date | null = null;
       let end: Date | null = null;
       items.forEach((item) => {
-        const itemStartStr =
-          item.properties.start_datetime || item.properties.datetime;
-        const itemStart = itemStartStr ? new Date(itemStartStr) : null;
+        const { start: itemStart, end: itemEnd } = getStartAndEndDatetime(item);
         if (!start || (itemStart && itemStart < start)) {
           start = itemStart;
         }
-        const itemEndStr =
-          item.properties.end_datetime || item.properties.datetime;
-        const itemEnd = itemEndStr ? new Date(itemEndStr) : null;
         if (!end || (itemEnd && itemEnd > end)) {
           end = itemEnd;
         }
@@ -92,12 +91,7 @@ export function StacMapProvider({ children }: { children: ReactNode }) {
       if (temporalFilter) {
         setFilteredItems(
           items.filter((item) => {
-            const startStr =
-              item.properties.start_datetime || item.properties.datetime;
-            const start = startStr ? new Date(startStr) : null;
-            const endStr =
-              item.properties.end_datetime || item.properties.datetime;
-            const end = endStr ? new Date(endStr) : null;
+            const { start, end } = getStartAndEndDatetime(item);
             return (
               (!start || start >= temporalFilter.start) &&
               (!end || end <= temporalFilter.end)
@@ -165,3 +159,11 @@ function getInitialHref() {
   }
   return href;
 }
+
+function getStartAndEndDatetime(item: StacItem) {
+  const startStr = item.properties.start_datetime || item.properties.datetime;
+  const start = startStr ? new Date(startStr) : null;
+  const endStr = item.properties.end_datetime || item.properties.datetime;
+  const end = endStr ? new Date(endStr) : null;
+  return { start, end };
+}