feat: item search (#49)

* feat: use visibility

* feat: it's working

* feat: button size sm

* feat: add focus for item

* feat: download

* feat: remove css

* fix: remove css

Author: gadomski

src/components/stac/asset.tsx

@@ -1,6 +1,5 @@
 import {
   Card,
-  EmptyState,
   HStack,
   IconButton,
   type IconButtonProps,
@@ -10,7 +9,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { LuDownload, LuImageMinus } from "react-icons/lu";
+import { LuDownload } from "react-icons/lu";
 import type { StacAsset } from "stac-ts";
 
 export function Assets({ assets }: { assets: { [k: string]: StacAsset } }) {
@@ -31,9 +30,6 @@ export function AssetCard({
   asset: StacAsset;
 }) {
   const [showImage, setShowImage] = useState(false);
-  const [description, setDescription] = useState(
-    "Asset is not JPEG or PNG media type",
-  );
 
   const iconButtonProps: IconButtonProps = {
     size: "2xs",
@@ -52,33 +48,18 @@ export function AssetCard({
         </Text>
       </Card.Header>
       <Card.Body>
-        {(showImage && (
+        {showImage && (
           <Image
             src={asset.href}
             onError={() => {
-              setDescription("Image failed to load");
               setShowImage(false);
             }}
           ></Image>
-        )) || (
-          <EmptyState.Root size={"sm"}>
-            <EmptyState.Content>
-              <EmptyState.Indicator>
-                <LuImageMinus></LuImageMinus>
-              </EmptyState.Indicator>
-              <EmptyState.Title fontSize={"sm"}>
-                Cannot display
-              </EmptyState.Title>
-              <EmptyState.Description fontSize={"xs"}>
-                {description}
-              </EmptyState.Description>
-            </EmptyState.Content>
-          </EmptyState.Root>
         )}
+        <Text fontSize={"2xs"}>{asset.type}</Text>
       </Card.Body>
       <Card.Footer>
         <Stack gap={4}>
-          <Text fontSize={"2xs"}>{asset.type}</Text>
           <HStack>
             <IconButton {...iconButtonProps} asChild>
               <a href={asset.href}>

src/components/stac/hooks.ts

@@ -1,13 +1,20 @@
 import type { UseFileUploadReturn } from "@chakra-ui/react";
-import { useQuery } from "@tanstack/react-query";
+import {
+  useInfiniteQuery,
+  useQuery,
+  type DefaultError,
+  type InfiniteData,
+  type QueryKey,
+} from "@tanstack/react-query";
 import { isParquetFile, useDuckDb } from "duckdb-wasm-kit";
 import { useEffect, useState } from "react";
-import type { StacCollection } from "stac-ts";
+import type { StacCollection, StacItem } from "stac-ts";
 import { toaster } from "../ui/toaster";
 import type {
   NaturalLanguageCollectionSearchResult,
   StacCollections,
   StacItemCollection,
+  StacSearchRequest,
   StacValue,
 } from "./types";
 
@@ -79,6 +86,7 @@ export function useStacValue(
         return null;
       }
     },
+    enabled: !!href,
   });
 
   useEffect(() => {
@@ -110,7 +118,6 @@ export function useStacValue(
 
 export function useStacCollections(href: string | undefined) {
   const [currentHref, setCurrentHref] = useState<string | undefined>();
-  const [pages, setPages] = useState<StacCollections[]>([]);
   const [collections, setCollections] = useState<
     StacCollection[] | undefined
   >();
@@ -131,11 +138,11 @@ export function useStacCollections(href: string | undefined) {
         return null;
       }
     },
+    enabled: !!href,
   });
 
   useEffect(() => {
     setCurrentHref(href);
-    setPages([]);
     setCollections(undefined);
   }, [href]);
 
@@ -151,7 +158,10 @@ export function useStacCollections(href: string | undefined) {
 
   useEffect(() => {
     if (data) {
-      setPages((pages) => [...pages, data]);
+      setCollections((collections) => [
+        ...(collections ?? []),
+        ...data.collections,
+      ]);
       if (data) {
         const nextLink = data.links?.find((link) => link.rel == "next");
         if (nextLink) {
@@ -161,15 +171,103 @@ export function useStacCollections(href: string | undefined) {
     }
   }, [data]);
 
+  return { collections, isPending, error };
+}
+
+export function useItemSearch(searchRequest: StacSearchRequest | undefined) {
+  const [items, setItems] = useState<StacItem[] | undefined>();
+  const [numberMatched, setNumberMatched] = useState<number | undefined>();
+
+  const { data, error, hasNextPage, isFetching, fetchNextPage } =
+    useInfiniteQuery<
+      StacItemCollection | null,
+      DefaultError,
+      InfiniteData<StacItemCollection | null>,
+      QueryKey,
+      StacSearchRequest | undefined
+    >({
+      queryKey: ["item-search", searchRequest],
+      queryFn: async ({ pageParam }) => {
+        if (pageParam) {
+          const url = new URL(pageParam.link.href);
+          const method = (pageParam.link.method as string | undefined) || "GET";
+          const init: RequestInit = {
+            method,
+            headers: {
+              Accept: "application/json",
+              "Content-Type": "application/json",
+            },
+          };
+          if (method === "GET") {
+            if (pageParam.search.collections) {
+              url.searchParams.set(
+                "collections",
+                pageParam.search.collections.join(","),
+              );
+            }
+          } else {
+            if (pageParam.link.body) {
+              init.body = JSON.stringify(pageParam.link.body);
+            } else {
+              init.body = JSON.stringify(pageParam.search);
+            }
+          }
+          return await fetch(url, init).then((response) => {
+            if (response.ok) {
+              return response.json();
+            } else {
+              throw new Error(
+                `Error while searching ${url}: ${response.statusText}`,
+              );
+            }
+          });
+        } else {
+          return null;
+        }
+      },
+      initialPageParam: searchRequest,
+      getNextPageParam: (lastPage: StacItemCollection | null) => {
+        if (lastPage) {
+          const nextLink = lastPage.links?.find((link) => link.rel == "next");
+          if (nextLink && searchRequest) {
+            return {
+              search: searchRequest.search,
+              link: nextLink,
+            };
+          }
+        }
+      },
+      enabled: !!searchRequest,
+    });
+
   useEffect(() => {
-    if (pages.length > 0) {
-      setCollections(pages.flatMap((page) => page.collections));
+    if (data) {
+      setItems(data.pages.flatMap((page) => page?.features || []));
+      if (data.pages.length > 0 && data.pages[0]?.numberMatched) {
+        setNumberMatched(data.pages[0].numberMatched);
+      }
     } else {
-      setCollections(undefined);
+      setItems(undefined);
     }
-  }, [pages]);
+  }, [data]);
 
-  return { collections, isPending, error };
+  useEffect(() => {
+    if (searchRequest && hasNextPage && !isFetching) {
+      fetchNextPage();
+    }
+  }, [searchRequest, hasNextPage, isFetching, fetchNextPage]);
+
+  useEffect(() => {
+    if (error) {
+      toaster.create({
+        type: "error",
+        title: "Error while searching",
+        description: error.message,
+      });
+    }
+  }, [error]);
+
+  return { items, hasNextPage, numberMatched };
 }
 
 export function useNaturalLanguageCollectionSearch(

src/components/stac/item-collection.tsx

@@ -3,21 +3,24 @@ import {
   Card,
   CloseButton,
   DataList,
+  DownloadTrigger,
   Drawer,
   EmptyState,
   FormatNumber,
   HStack,
+  IconButton,
   Portal,
   Stack,
   Stat,
 } from "@chakra-ui/react";
-import { LuEyeOff, LuFileJson } from "react-icons/lu";
+import { LuDownload, LuEyeOff, LuFileJson, LuFocus } from "react-icons/lu";
 import type { StacItem } from "stac-ts";
-import { useStacMap } from "../../hooks";
+import { useFitBbox, useStacMap } from "../../hooks";
 import Loading from "../loading";
 import Item from "./item";
 import { type StacGeoparquetMetadata } from "./stac-geoparquet";
 import type { StacItemCollection } from "./types";
+import { getItemCollectionExtent } from "./utils";
 import Value from "./value";
 
 export default function ItemCollection({
@@ -30,9 +33,32 @@ export default function ItemCollection({
     stacGeoparquetMetadataIsPending,
     stacGeoparquetItem,
   } = useStacMap();
+  const fitBbox = useFitBbox();
+
   return (
     <Stack>
       <Value value={itemCollection} type="Item collection"></Value>
+      <HStack>
+        <DownloadTrigger
+          asChild
+          data={JSON.stringify(itemCollection)}
+          fileName={itemCollection.id || "item-collection" + ".json"}
+          mimeType="application/json"
+        >
+          <IconButton size={"sm"} variant={"subtle"}>
+            <LuDownload></LuDownload>
+          </IconButton>
+        </DownloadTrigger>
+        {itemCollection.features.length > 0 && (
+          <IconButton
+            size={"sm"}
+            variant={"subtle"}
+            onClick={() => fitBbox(getItemCollectionExtent(itemCollection))}
+          >
+            <LuFocus></LuFocus>
+          </IconButton>
+        )}
+      </HStack>
       {stacGeoparquetMetadataIsPending && <Loading></Loading>}
       {stacGeoparquetMetadata && (
         <StacGeoparquetMetadata

src/components/stac/item.tsx

@@ -1,13 +1,16 @@
-import { Button, Heading, Stack } from "@chakra-ui/react";
-import { LuExternalLink } from "react-icons/lu";
+import { Button, Heading, HStack, IconButton, Stack } from "@chakra-ui/react";
+import { LuExternalLink, LuFocus } from "react-icons/lu";
 import type { StacItem } from "stac-ts";
+import { useFitBbox } from "../../hooks";
 import { Assets } from "./asset";
 import Value, {
   SelfLinkButtons as BaseSelfLinkButtons,
   type SelfLinkButtonsProps,
 } from "./value";
 
 export default function Item({ item }: { item: StacItem }) {
+  const fitBbox = useFitBbox();
+
   return (
     <Stack>
       <Value
@@ -16,6 +19,18 @@ export default function Item({ item }: { item: StacItem }) {
         selfLinkButtonsType={SelfLinkButtons}
       ></Value>
 
+      <HStack>
+        {item.bbox && (
+          <IconButton
+            size={"xs"}
+            variant={"surface"}
+            onClick={() => item.bbox && fitBbox(item.bbox)}
+          >
+            <LuFocus></LuFocus>
+          </IconButton>
+        )}
+      </HStack>
+
       <Heading size={"md"} mt={4}>
         Assets
       </Heading>