fix: save per-collection searches (#302)

fix: attach upload button to input

fix: don't get SAS for public Planetary Computer assets

fix: sign Planetary Computer thumbnails

fix: don't break when there's no collections in a catalog

Author: gadomski

src/components/footer.tsx

@@ -12,7 +12,7 @@ export default function Footer() {
       fontWeight={"lighter"}
       fontSize={"small"}
     >
-      v{version} | Created with <LuHeart /> by{" "}
+      v{version} | Crafted with <LuHeart /> by{" "}
       <Link href="https://developmentseed.org/">
         Development Seed <CollecticonBrandDevelopmentSeed2 />
       </Link>

src/components/header.tsx

@@ -1,38 +1,14 @@
-import { Button, FileUpload, HStack, IconButton } from "@chakra-ui/react";
-import { useDuckDb } from "duckdb-wasm-kit";
-import { LuUpload } from "react-icons/lu";
-import { useStore } from "../store";
-import { uploadFile } from "../utils/upload";
+import { Button, HStack } from "@chakra-ui/react";
 import { Examples } from "./examples";
 import HrefInput from "./href-input";
 import { ColorModeButton } from "./ui/color-mode";
 import { ProjectionButton } from "./ui/projection";
 import { SettingsButton } from "./ui/settings";
 
 export default function Header() {
-  const setUploadedFile = useStore((store) => store.setUploadedFile);
-  const { db } = useDuckDb();
-
   return (
     <HStack pointerEvents={"auto"}>
       <HrefInput />
-      <FileUpload.Root
-        flex={0}
-        onFileAccept={(details) =>
-          uploadFile({
-            file: details.files[0],
-            setUploadedFile,
-            db,
-          })
-        }
-      >
-        <FileUpload.HiddenInput />
-        <FileUpload.Trigger asChild>
-          <IconButton bg={"bg.muted/90"} variant={"outline"} disabled={!db}>
-            <LuUpload />
-          </IconButton>
-        </FileUpload.Trigger>
-      </FileUpload.Root>
       <Examples>
         <Button bg={"bg.muted/90"} variant={"outline"}>
           Examples

src/components/href-input.tsx

@@ -1,10 +1,21 @@
-import { Box, Input } from "@chakra-ui/react";
+import {
+  Box,
+  FileUpload,
+  IconButton,
+  Input,
+  InputGroup,
+} from "@chakra-ui/react";
+import { useDuckDb } from "duckdb-wasm-kit";
+import { LuUpload } from "react-icons/lu";
 import { useStore } from "../store";
+import { uploadFile } from "../utils/upload";
 
 export default function HrefInput() {
   const setHref = useStore((state) => state.setHref);
   const input = useStore((state) => state.input);
   const setInput = useStore((state) => state.setInput);
+  const setUploadedFile = useStore((store) => store.setUploadedFile);
+  const { db } = useDuckDb();
 
   return (
     <Box
@@ -15,12 +26,33 @@ export default function HrefInput() {
       }}
       flex="1"
     >
-      <Input
-        bg={"bg.muted/90"}
-        placeholder="Enter a url to a STAC API, JSON, or GeoParquet"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-      ></Input>
+      <InputGroup
+        endElement={
+          <FileUpload.Root
+            onFileAccept={(details) =>
+              uploadFile({
+                file: details.files[0],
+                setUploadedFile,
+                db,
+              })
+            }
+          >
+            <FileUpload.HiddenInput />
+            <FileUpload.Trigger asChild>
+              <IconButton variant={"plain"} size={"sm"} disabled={!db}>
+                <LuUpload />
+              </IconButton>
+            </FileUpload.Trigger>
+          </FileUpload.Root>
+        }
+      >
+        <Input
+          bg={"bg.muted/90"}
+          placeholder="Enter a url to a STAC API, JSON, or GeoParquet"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+        />
+      </InputGroup>
     </Box>
   );
 }

src/components/ui/thumbnail.tsx

@@ -1,10 +1,45 @@
+import { usePlanetaryComputerToken } from "@/hooks/planetary-computer";
+import type { AzureBlobStorageContainer } from "@/types/planetary-computer";
+import {
+  parsePlanetaryComputerContainer,
+  signPlanetaryComputerHref,
+} from "@/utils/planetary-computer";
 import { Center, Image } from "@chakra-ui/react";
+import { useMemo } from "react";
 import type { StacAsset } from "stac-ts";
 
 export default function Thumbnail({ asset }: { asset: StacAsset }) {
+  const planetaryComputerContainer = parsePlanetaryComputerContainer(
+    asset.href
+  );
+  if (planetaryComputerContainer)
+    return (
+      <PlanetaryComputerThumbnail
+        href={asset.href}
+        container={planetaryComputerContainer}
+      />
+    );
+  else return <HrefThumbnail href={asset.href} />;
+}
+
+function PlanetaryComputerThumbnail({
+  href,
+  container,
+}: {
+  href: string;
+  container: AzureBlobStorageContainer;
+}) {
+  const { data: token } = usePlanetaryComputerToken({ container });
+  const signedHref = useMemo(() => {
+    if (token) return signPlanetaryComputerHref(href, token);
+  }, [token, href]);
+  if (signedHref) return <HrefThumbnail href={signedHref} />;
+}
+
+function HrefThumbnail({ href }: { href: string }) {
   return (
     <Center>
-      <Image src={asset.href} maxH={"250px"} />
+      <Image src={href} maxH={"250px"} />
     </Center>
   );
 }

src/components/value/search.tsx

@@ -2,6 +2,7 @@ import { Section } from "@/components/section";
 import { useStacSearch } from "@/hooks/stac";
 import { useItems } from "@/hooks/store";
 import { useStore } from "@/store/index.ts";
+import { toSearchKey } from "@/store/items";
 import type { StacSearch } from "@/types/stac";
 import { paddedBbox } from "@/utils/bbox";
 import { getCollectionDatetimes } from "@/utils/stac";
@@ -47,23 +48,22 @@ interface SetSearchParams {
 }
 
 export default function Search({ href, collection }: Props) {
-  const search = useStore((store) => store.search);
-  const setSearch = useStore((store) => store.setSearch);
+  const searches = useStore((store) => store.searches);
+  const setSearchState = useStore((store) => store.setSearch);
   const setSearchedItems = useStore((store) => store.setSearchedItems);
-  const result = useStacSearch({ href, search });
   const setDatetimeBounds = useStore((store) => store.setDatetimeBounds);
-
   const [fetchAll, setFetchAll] = useState(false);
 
+  const searchKey = { href, collection };
+  const searchKeyString = toSearchKey(searchKey);
+  const search = searches[searchKeyString] || { collections: [collection.id] };
+  const setSearch = (s: StacSearch) => setSearchState(searchKey, s);
+  const result = useStacSearch({ href, search });
+
   const numberMatched = useMemo(() => {
     if (result.data) return result.data.pages.at(0)?.numberMatched;
   }, [result.data]);
 
-  useEffect(() => {
-    if (search.collections.at(0) !== collection.id)
-      setSearch({ collections: [collection.id] });
-  }, [collection, setSearch, search]);
-
   useEffect(() => {
     if (result.data)
       setSearchedItems(result.data.pages.map((page) => page?.features || []));

src/store/href.ts

@@ -28,6 +28,7 @@ export const createHrefSlice: StateCreator<State, [], [], HrefState> = (
       pickedItem: null,
       staticItems: null,
       searchedItems: null,
+      searches: {},
       datetimeBounds: null,
       datetimeFilter: null,
       stacGeoparquetTable: null,

src/store/items.ts

@@ -1,13 +1,15 @@
-import type { StacItem } from "stac-ts";
+import type { StacCollection, StacItem } from "stac-ts";
 import type { StateCreator } from "zustand";
 import type { State } from ".";
 import type { StacSearch } from "../types/stac";
 
 export type ItemSource = "static" | "searched";
 
+export type SearchKey = { href: string; collection: StacCollection };
+
 export interface ItemsState {
-  search: StacSearch;
-  setSearch: (search: StacSearch) => void;
+  searches: Record<string, StacSearch>;
+  setSearch: (key: SearchKey, search: StacSearch) => void;
   staticItems: StacItem[] | null;
   setStaticItems: (items: StacItem[] | null) => void;
   addItem: (item: StacItem) => void;
@@ -26,15 +28,22 @@ export interface ItemsState {
   setVisualizeItemBounds: (visualize: boolean) => void;
 }
 
+export function toSearchKey({ href, collection }: SearchKey): string {
+  return `${href}:${collection.id}`;
+}
+
 export const createItemsSlice: StateCreator<State, [], [], ItemsState> = (
   set,
   get
 ) => ({
-  search: {
-    collections: [],
-  },
-  setSearch: (search) => {
-    set({ search });
+  searches: {},
+  setSearch: (key, search) => {
+    set({
+      searches: {
+        ...get().searches,
+        [toSearchKey(key)]: search,
+      },
+    });
   },
   staticItems: null,
   setStaticItems: (items) => {

src/utils/planetary-computer.ts

@@ -9,7 +9,10 @@ export function parsePlanetaryComputerContainer(
 ): AzureBlobStorageContainer | null {
   try {
     const url = new URL(href);
-    if (url.host.endsWith("blob.core.windows.net"))
+    if (
+      url.host.endsWith("blob.core.windows.net") &&
+      !url.host.startsWith("ai4edatasetspublicassets")
+    )
       return {
         storageAccount: url.hostname.split(".")[0],
         container: url.pathname.split("/")[1],

src/utils/stac.ts

@@ -359,17 +359,19 @@ export function getBbox(
 }
 
 function getCollectionsBbox(collections: StacCollection[]) {
-  return sanitizeBbox(
-    collections
-      .map((collection) => getCollectionExtents(collection))
-      .filter((extents) => !!extents)
-      .reduce((accumulator, currentValue) => {
-        return [
-          Math.min(accumulator[0], currentValue[0]),
-          Math.min(accumulator[1], currentValue[1]),
-          Math.max(accumulator[2], currentValue[2]),
-          Math.max(accumulator[3], currentValue[3]),
-        ];
-      })
-  );
+  if (collections.length > 1)
+    return sanitizeBbox(
+      collections
+        .map((collection) => getCollectionExtents(collection))
+        .filter((extents) => !!extents)
+        .reduce((accumulator, currentValue) => {
+          return [
+            Math.min(accumulator[0], currentValue[0]),
+            Math.min(accumulator[1], currentValue[1]),
+            Math.max(accumulator[2], currentValue[2]),
+            Math.max(accumulator[3], currentValue[3]),
+          ];
+        })
+    );
+  else return null;
 }

tests/utils/planetary-computer.spec.ts

@@ -17,6 +17,13 @@ describe("parsePlanetaryComputerContainer", () => {
     });
   });
 
+  test("parses public storage to null", () => {
+    const result = parsePlanetaryComputerContainer(
+      "https://ai4edatasetspublicassets.blob.core.windows.net/assets/path/to/file.tiff"
+    );
+    expect(result).toBeNull();
+  });
+
   test("returns null for non-Azure URL", () => {
     expect(
       parsePlanetaryComputerContainer("https://example.com/file.tiff")
@@ -42,7 +49,7 @@ describe("signPlanetaryComputerHref", () => {
   test("adds token to URL query string", () => {
     const token: PlanetaryComputerToken = {
       token: "sv=2019-12-12&st=2021-01-01&se=2021-01-02&sr=c&sp=rl&sig=abc123",
-      msft_request_id: "request-id",
+      "msft:expiry": "2026-02-05T12:00:00Z",
     };
     const result = signPlanetaryComputerHref(
       "https://myaccount.blob.core.windows.net/container/file.tiff",
@@ -56,7 +63,7 @@ describe("signPlanetaryComputerHref", () => {
   test("replaces existing query string", () => {
     const token: PlanetaryComputerToken = {
       token: "newsig=xyz",
-      msft_request_id: "request-id",
+      "msft:expiry": "2026-02-05T12:00:00Z",
     };
     const result = signPlanetaryComputerHref(
       "https://myaccount.blob.core.windows.net/container/file.tiff?oldsig=abc",
@@ -74,7 +81,7 @@ describe("signPlanetaryComputerHrefFromTokens", () => {
       myaccount: {
         mycontainer: {
           token: "sig=abc123",
-          msft_request_id: "request-id",
+          "msft:expiry": "2026-02-05T12:00:00Z",
         },
       },
     };
@@ -101,7 +108,7 @@ describe("signPlanetaryComputerHrefFromTokens", () => {
       otheraccount: {
         othercontainer: {
           token: "sig=abc123",
-          msft_request_id: "request-id",
+          "msft:expiry": "2026-02-05T12:00:00Z",
         },
       },
     };