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

@@ -1,6 +1,6 @@
 {
   "name": "stac-map",
-  "description": "A map-first, single-page, statically-hosted STAC search and visualization tool, with stac-geoparquet support",
+  "description": "A map-first single-page STAC search and visualization tool with stac-geoparquet support",
   "author": {
     "name": "Pete Gadomski",
     "email": "pete.gadomski@gmail.com"
@@ -9,6 +9,10 @@
     {
       "name": "Indraneel Purohit",
       "email": "indraneelpurohit@gmail.com"
+    },
+    {
+      "name": "Sandra Hoang",
+      "email": "sandrahoang686@gmail.com"
     }
   ],
   "homepage": "https://github.com/developmentseed/stac-map/",
@@ -20,7 +24,8 @@
     "url": "https://github.com/developmentseed/stac-map/issues"
   },
   "license": "MIT",
-  "version": "0.0.1",
+  "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -35,11 +40,10 @@
   "dependencies": {
     "@chakra-ui/react": "^3.31.0",
     "@deck.gl/core": "^9.2.6",
-    "@deck.gl/geo-layers": "^9.2.6",
     "@deck.gl/layers": "^9.2.6",
     "@deck.gl/mapbox": "^9.2.6",
     "@developmentseed/deck.gl-geotiff": "^0.1.0",
-    "@developmentseed/deck.gl-raster": "^0.1.0",
+    "@devseed-ui/collecticons-chakra": "^4.0.0",
     "@duckdb/duckdb-wasm": "^1.32.0",
     "@emotion/react": "^11.13.5",
     "@geoarrow/deck.gl-layers": "^0.3.0",
@@ -60,8 +64,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,85 @@
-import { useEffect, useMemo, useState } from "react";
-import { Box, Container, FileUpload, useFileUpload } from "@chakra-ui/react";
-import type { StacCollection, StacItem } from "stac-ts";
-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 { useEffect } from "react";
+import { LuHeart } from "react-icons/lu";
+import { MapProvider } from "react-map-gl/maplibre";
+import { Box, Container, FileUpload, HStack, Link } from "@chakra-ui/react";
+import { CollecticonBrandDevelopmentSeed2 } from "@devseed-ui/collecticons-chakra";
+import { useDuckDb } from "duckdb-wasm-kit";
+import Map from "./components/map";
+import Overlay from "./components/overlay";
+import { useStore } from "./store";
+import { getCurrentHref } from "./utils/href";
+import { uploadFile } from "./utils/upload";
 
 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);
+  const setUploadedFile = useStore((state) => state.setUploadedFile);
+  const { db } = useDuckDb();
+  const setConnection = useStore((state) => state.setConnection);
 
-  // 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]);
+    function handlePopState() {
+      setHref(getCurrentHref() ?? "");
+    }
+    window.addEventListener("popstate", handlePopState);
 
-  useEffect(() => {
-    setcogHref(picked && getCogHref(picked));
-  }, [picked]);
+    if (getCurrentHref()) {
+      try {
+        new URL(getCurrentHref());
+      } catch {
+        history.pushState(null, "", location.pathname);
+      }
+    }
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [setHref]);
 
   useEffect(() => {
-    setPicked(stacGeoparquetItem);
-  }, [stacGeoparquetItem]);
+    if (db) {
+      (async () => {
+        const connection = await db.connect();
+        await connection.query("LOAD spatial;");
+        await connection.query("LOAD icu;");
+        setConnection(connection);
+      })();
+    }
+  }, [db, setConnection]);
 
   return (
-    <>
+    <MapProvider>
       <Box h={"100dvh"}>
-        <FileUpload.RootProvider value={fileUpload} unstyled={true}>
+        <FileUpload.Root
+          unstyled={true}
+          onFileAccept={(details) => {
+            uploadFile({
+              file: details.files[0],
+              setUploadedFile,
+              db,
+            });
+          }}
+          disabled={!db}
+        >
+          <FileUpload.HiddenInput />
           <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>
+            <Map />
           </FileUpload.Dropzone>
-        </FileUpload.RootProvider>
+        </FileUpload.Root>
       </Box>
       <Container
         zIndex={1}
@@ -129,30 +91,20 @@ 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>
-    </>
+      <HStack
+        position={"absolute"}
+        bottom={4}
+        left={8}
+        fontWeight={"lighter"}
+        fontSize={"small"}
+      >
+        Created with <LuHeart /> by{" "}
+        <Link href="https://developmentseed.org/">
+          Development Seed <CollecticonBrandDevelopmentSeed2 />
+        </Link>
+      </HStack>
+    </MapProvider>
   );
 }