refactor!: rewrite with zustand

.env.example

@@ -0,0 +1,6 @@
+# STAC Natural Query API endpoint
+VITE_STAC_NATURAL_QUERY_API=https://api.stac-semantic-search.k8s.labs.ds.io
+
+# Base URL for STAC Browser external links
+# Default: https://radiantearth.github.io/stac-browser/#/external/
+VITE_STAC_BROWSER_URL="https://radiantearth.github.io/stac-browser/#/external/"

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 tests/**/__screenshots__/
 codebook.toml
+.env

package.json

@@ -35,11 +35,12 @@
   "dependencies": {
     "@chakra-ui/react": "^3.31.0",
     "@deck.gl/core": "^9.2.5",
+    "@deck.gl/extensions": "^9.2.5",
     "@deck.gl/geo-layers": "^9.2.5",
     "@deck.gl/layers": "^9.2.5",
     "@deck.gl/mapbox": "^9.2.5",
+    "@deck.gl/mesh-layers": "^9.2.5",
     "@developmentseed/deck.gl-geotiff": "^0.1.0",
-    "@developmentseed/deck.gl-raster": "^0.1.0",
     "@duckdb/duckdb-wasm": "^1.32.0",
     "@emotion/react": "^11.13.5",
     "@geoarrow/deck.gl-layers": "^0.3.0",
@@ -60,8 +61,10 @@
     "react-icons": "^5.5.0",
     "react-map-gl": "^8.1.0",
     "react-markdown": "^10.1.0",
+    "shiki": "^3.21.0",
     "stac-ts": "^1.0.4",
-    "stac-wasm": "^0.0.3"
+    "stac-wasm": "^0.0.3",
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

src/app.tsx

@@ -1,123 +1,47 @@
-import { useEffect, useMemo, useState } from "react";
-import { Box, Container, FileUpload, useFileUpload } from "@chakra-ui/react";
-import type { StacCollection, StacItem } from "stac-ts";
+import { useEffect } from "react";
+import { MapProvider } from "react-map-gl/maplibre";
+import { Box, Container } from "@chakra-ui/react";
+import Map from "./components/map";
+import Overlay from "./components/overlay";
 import { Toaster } from "./components/ui/toaster";
-import useHrefParam from "./hooks/href-param";
-import useStacChildren from "./hooks/stac-children";
-import useStacFilters from "./hooks/stac-filters";
-import useStacValue from "./hooks/stac-value";
-import Map from "./layers/map";
-import Overlay from "./layers/overlay";
-import type { BBox2D, Color } from "./types/map";
-import type { DatetimeBounds, StacValue } from "./types/stac";
-import getDateTimes from "./utils/datetimes";
-import { getCogHref } from "./utils/stac";
-import getDocumentTitle from "./utils/title";
-
-// TODO make this configurable by the user.
-const lineColor: Color = [207, 63, 2, 100];
-const fillColor: Color = [207, 63, 2, 50];
+import { useStore } from "./store";
+import { getCurrentHref } from "./utils/href";
 
 export default function App() {
-  // User state
-  const { href, setHref } = useHrefParam();
-  const fileUpload = useFileUpload({
-    maxFiles: 1,
-    onFileChange: (details) => {
-      if (details.acceptedFiles.length === 1) {
-        setHref(details.acceptedFiles[0].name);
-      }
-    },
-  });
-  const [userCollections, setCollections] = useState<StacCollection[]>();
-  const [userItems, setItems] = useState<StacItem[]>();
-  const [picked, setPicked] = useState<StacValue>();
-  const [bbox, setBbox] = useState<BBox2D>();
-  const [datetimeBounds, setDatetimeBounds] = useState<DatetimeBounds>();
-  const [filter, setFilter] = useState(true);
-  const [stacGeoparquetItemId, setStacGeoparquetItemId] = useState<string>();
-  const [cogHref, setcogHref] = useState<string>();
-
-  // Derived state
-  const {
-    value,
-    error,
-    items: linkedItems,
-    geoparqetTable,
-    stacGeoparquetItem,
-  } = useStacValue({
-    href,
-    fileUpload,
-    datetimeBounds: filter ? datetimeBounds : undefined,
-    stacGeoparquetItemId,
-  });
-  const collectionsLink = value?.links?.find((link) => link.rel === "data");
-  const { catalogs, collections: linkedCollections } = useStacChildren({
-    value,
-    enabled: !!value && !collectionsLink,
-  });
-  const collections = collectionsLink ? userCollections : linkedCollections;
-  const items = userItems || linkedItems;
-  const { filteredCollections, filteredItems } = useStacFilters({
-    collections,
-    items,
-    filter,
-    bbox,
-    datetimeBounds,
-  });
-
-  const datetimes = useMemo(
-    () => (value ? getDateTimes(value, items, collections) : null),
-    [value, items, collections]
-  );
+  const href = useStore((state) => state.href);
+  const setHref = useStore((state) => state.setHref);
 
-  // Effects
   useEffect(() => {
-    document.title = getDocumentTitle(value);
-  }, [value]);
+    if (href && getCurrentHref() != href) {
+      history.pushState(null, "", "?href=" + href);
+    } else if (href === "") {
+      history.pushState(null, "", location.pathname);
+    }
+  }, [href]);
 
   useEffect(() => {
-    setPicked(undefined);
-    setItems(undefined);
-    setDatetimeBounds(undefined);
-    setcogHref(value && getCogHref(value));
-  }, [value]);
-
-  useEffect(() => {
-    setcogHref(picked && getCogHref(picked));
-  }, [picked]);
+    function handlePopState() {
+      setHref(getCurrentHref() ?? "");
+    }
+    window.addEventListener("popstate", handlePopState);
+
+    if (getCurrentHref()) {
+      try {
+        new URL(getCurrentHref());
+      } catch {
+        history.pushState(null, "", location.pathname);
+      }
+    }
 
-  useEffect(() => {
-    setPicked(stacGeoparquetItem);
-  }, [stacGeoparquetItem]);
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [setHref]);
 
   return (
-    <>
+    <MapProvider>
       <Box h={"100dvh"}>
-        <FileUpload.RootProvider value={fileUpload} unstyled={true}>
-          <FileUpload.Dropzone
-            disableClick={true}
-            style={{
-              height: "100dvh",
-              width: "100dvw",
-            }}
-          >
-            <Map
-              value={value}
-              geoparquetTable={geoparqetTable}
-              collections={collections}
-              filteredCollections={filteredCollections}
-              items={filteredItems}
-              fillColor={fillColor}
-              lineColor={lineColor}
-              setBbox={setBbox}
-              picked={picked}
-              setPicked={setPicked}
-              setStacGeoparquetItemId={setStacGeoparquetItemId}
-              cogHref={cogHref}
-            ></Map>
-          </FileUpload.Dropzone>
-        </FileUpload.RootProvider>
+        <Map />
       </Box>
       <Container
         zIndex={1}
@@ -129,30 +53,9 @@ export default function App() {
         left={0}
         pt={4}
       >
-        <Overlay
-          href={href}
-          setHref={setHref}
-          fileUpload={fileUpload}
-          value={value}
-          error={error}
-          catalogs={catalogs}
-          setCollections={setCollections}
-          collections={filteredCollections}
-          totalNumOfCollections={collections?.length}
-          filter={filter}
-          setFilter={setFilter}
-          bbox={bbox}
-          setPicked={setPicked}
-          picked={picked}
-          items={filteredItems}
-          setItems={setItems}
-          setDatetimeBounds={setDatetimeBounds}
-          cogHref={cogHref}
-          setcogHref={setcogHref}
-          datetimes={datetimes}
-        ></Overlay>
+        <Overlay />
       </Container>
-      <Toaster></Toaster>
-    </>
+      <Toaster />
+    </MapProvider>
   );
 }

src/components/assets.tsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from "react";
+import { LuDownload, LuFileImage } from "react-icons/lu";
+import {
+  Badge,
+  ButtonGroup,
+  Clipboard,
+  Group,
+  Heading,
+  HStack,
+  IconButton,
+  RadioCard,
+  Stack,
+} from "@chakra-ui/react";
+import type { StacAsset } from "stac-ts";
+import { useStore } from "../store";
+
+export default function Assets({
+  assets,
+}: {
+  assets: { [k: string]: StacAsset };
+}) {
+  const setGeotiffHref = useStore((store) => store.setGeotiffHref);
+  let defaultValue = null;
+  for (const [key, asset] of Object.entries(assets)) {
+    if (!defaultValue && isGeotiff(asset)) {
+      defaultValue = key;
+    }
+    if (defaultValue && isGeotiff(asset) && asset.roles?.includes("visual")) {
+      defaultValue = key;
+    }
+  }
+  const [value, setValue] = useState<string | null>(defaultValue);
+
+  useEffect(() => {
+    if (value) {
+      setGeotiffHref(assets[value]?.href);
+    } else {
+      setGeotiffHref(null);
+    }
+  }, [assets, value, setGeotiffHref]);
+
+  return (
+    <Stack>
+      <Heading size={"md"}>
+        <HStack>
+          <LuFileImage /> Assets
+        </HStack>
+      </Heading>
+      <RadioCard.Root
+        value={value}
+        onValueChange={(e) => setValue(e.value)}
+        size={"sm"}
+      >
+        <Group orientation="vertical">
+          {Object.entries(assets).map(([key, asset]) => (
+            <Asset key={key} assetKey={key} asset={asset} />
+          ))}
+        </Group>
+      </RadioCard.Root>
+    </Stack>
+  );
+}
+
+function Asset({ assetKey, asset }: { assetKey: string; asset: StacAsset }) {
+  const scheme = asset.href.split(":").at(0);
+
+  return (
+    <RadioCard.Item
+      value={assetKey}
+      width={"full"}
+      disabled={!isGeotiff(asset)}
+    >
+      <RadioCard.ItemHiddenInput />
+      <RadioCard.ItemControl>
+        <RadioCard.ItemContent>
+          <RadioCard.ItemText>{asset.title || assetKey}</RadioCard.ItemText>
+          <RadioCard.ItemDescription>
+            <Badge>{scheme}</Badge>
+            {asset.type && <Badge>{asset.type}</Badge>}
+          </RadioCard.ItemDescription>
+        </RadioCard.ItemContent>
+        <RadioCard.ItemIndicator />
+      </RadioCard.ItemControl>
+      <RadioCard.ItemAddon>
+        <ButtonGroup size={"xs"} variant={"plain"}>
+          <Clipboard.Root value={asset.href}>
+            <Clipboard.Trigger asChild>
+              <IconButton>
+                <Clipboard.Indicator />
+              </IconButton>
+            </Clipboard.Trigger>
+          </Clipboard.Root>
+          {scheme?.startsWith("http") && (
+            <IconButton asChild>
+              <a href={asset.href}>
+                <LuDownload />
+              </a>
+            </IconButton>
+          )}
+        </ButtonGroup>
+      </RadioCard.ItemAddon>
+    </RadioCard.Item>
+  );
+}
+
+function isGeotiff(asset: StacAsset) {
+  return (
+    asset.type?.startsWith("image/tiff; application=geotiff") &&
+    asset.href.startsWith("http")
+  );
+}