feat: use an accordion in the panel

Kind of a major rewrite, as we also get rid of the context and just prop
drill to our heart's content.

Author: gadomski

src/app.tsx

@@ -1,30 +1,18 @@
-import {
-  Alert,
-  Box,
-  Container,
-  FileUpload,
-  Flex,
-  GridItem,
-  SimpleGrid,
-  useBreakpointValue,
-  useFileUpload,
-} from "@chakra-ui/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Box, Container, FileUpload, useFileUpload } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { MapProvider } from "react-map-gl/dist/esm/exports-maplibre";
-import Header from "./components/header";
 import Map from "./components/map";
-import Panel from "./components/panel";
 import { Toaster } from "./components/ui/toaster";
-import { StacMapProvider } from "./provider";
+import Overlay from "./components/overlay";
+import useStacValue from "./hooks/stac-value";
+import type { BBox2D, Color } from "./types/map";
+import type { StacCollection } from "stac-ts";
+
+const lineColor: Color = [207, 63, 2, 100];
+const fillColor: Color = [207, 63, 2, 50];
 
 export default function App() {
-  const queryClient = new QueryClient({});
+  // The href of a STAC value. Everything is derived from the href.
   const [href, setHref] = useState<string | undefined>(getInitialHref());
-  const fileUpload = useFileUpload({ maxFiles: 1 });
-  const isHeaderAbovePanel = useBreakpointValue({ base: true, md: false });
-
   useEffect(() => {
     function handlePopState() {
       setHref(new URLSearchParams(location.search).get("href") ?? "");
@@ -35,7 +23,6 @@ export default function App() {
       window.removeEventListener("popstate", handlePopState);
     };
   }, []);
-
   useEffect(() => {
     if (href && new URLSearchParams(location.search).get("href") != href) {
       history.pushState(null, "", "?href=" + href);
@@ -44,73 +31,92 @@ export default function App() {
     }
   }, [href]);
 
+  // Uploading a file sets the href to its local name.
+  const fileUpload = useFileUpload({ maxFiles: 1 });
   useEffect(() => {
     // It should never be more than 1.
     if (fileUpload.acceptedFiles.length == 1) {
       setHref(fileUpload.acceptedFiles[0].name);
     }
   }, [fileUpload.acceptedFiles]);
 
-  const header = (
-    <Header href={href} setHref={setHref} fileUpload={fileUpload}></Header>
-  );
+  // State derived from the href.
+  const { value, error, collections } = useStacValue({ href, fileUpload });
+  useEffect(() => {
+    if (value && (value.title || value.id)) {
+      document.title = "stac-map | " + (value.title || value.id);
+    } else {
+      document.title = "stac-map";
+    }
+  }, [value]);
 
-  return (
-    <QueryClientProvider client={queryClient}>
-      <MapProvider>
-        <StacMapProvider href={href} fileUpload={fileUpload}>
-          <Box zIndex={0} position={"absolute"} top={0} left={0}>
-            <FileUpload.RootProvider value={fileUpload} unstyled={true}>
-              <FileUpload.Dropzone
-                disableClick={true}
-                style={{
-                  height: "100dvh",
-                  width: "100dvw",
-                }}
-              >
-                <ErrorBoundary FallbackComponent={MapFallback}>
-                  <Map></Map>
-                </ErrorBoundary>
-              </FileUpload.Dropzone>
-            </FileUpload.RootProvider>
-          </Box>
-          <Container zIndex={1} fluid h={"dvh"} py={4} pointerEvents={"none"}>
-            <SimpleGrid columns={{ base: 1, md: 3 }} gap={4}>
-              {isHeaderAbovePanel && <GridItem colSpan={1}>{header}</GridItem>}
-              <GridItem colSpan={1}>
-                <Panel
-                  href={href}
-                  setHref={setHref}
-                  fileUpload={fileUpload}
-                ></Panel>
-              </GridItem>
-              {!isHeaderAbovePanel && (
-                <GridItem colSpan={2} hideBelow={"md"}>
-                  {header}
-                </GridItem>
-              )}
-            </SimpleGrid>
-          </Container>
-          <Toaster></Toaster>
-        </StacMapProvider>
-      </MapProvider>
-    </QueryClientProvider>
-  );
-}
+  // User-controlled state.
+  const [bbox, setBbox] = useState<BBox2D>();
+  const [datetimeBounds, setDatetimeBounds] = useState();
+  const [filter, setFilter] = useState(true);
+  const [filteredCollections, setFilteredCollections] =
+    useState<StacCollection[]>();
+
+  useEffect(() => {
+    if (filter && collections && bbox) {
+      setFilteredCollections(
+        collections.filter((collection) =>
+          isCollectionInBbox(collection, bbox),
+        ),
+      );
+    } else {
+      setFilteredCollections(undefined);
+    }
+  }, [collections, filter, bbox]);
 
-function MapFallback({ error }: { error: Error }) {
   return (
-    <Flex h={"100dvh"} w={"100dvw"} alignItems="center" justifyContent="center">
-      <Box>
-        <Alert.Root status="error">
-          <Alert.Indicator />
-          <Alert.Content>
-            <Alert.Title>Error while rendering the map</Alert.Title>
-            <Alert.Description>{error.message}</Alert.Description>
-          </Alert.Content>
-        </Alert.Root>
+    <>
+      <Box zIndex={-1} position={"absolute"} top={0} left={0} h="100dvh">
+        <FileUpload.RootProvider value={fileUpload} unstyled={true}>
+          <FileUpload.Dropzone
+            disableClick={true}
+            style={{
+              height: "100dvh",
+              width: "100dvw",
+            }}
+          ></FileUpload.Dropzone>
+        </FileUpload.RootProvider>
+      </Box>
+      <Box h={"100dvh"}>
+        <Map
+          value={value}
+          collections={collections}
+          filteredCollections={filteredCollections}
+          fillColor={fillColor}
+          lineColor={lineColor}
+          setBbox={setBbox}
+        ></Map>
       </Box>
-    </Flex>
+      <Container
+        zIndex={1}
+        fluid
+        h="100dvh"
+        pointerEvents={"none"}
+        position={"absolute"}
+        top={0}
+        left={0}
+        pt={2}
+      >
+        <Overlay
+          href={href}
+          setHref={setHref}
+          fileUpload={fileUpload}
+          value={value}
+          error={error}
+          collections={collections}
+          filteredCollections={filteredCollections}
+          filter={filter}
+          setFilter={setFilter}
+          bbox={bbox}
+        ></Overlay>
+      </Container>
+      <Toaster></Toaster>
+    </>
   );
 }
 
@@ -123,3 +129,29 @@ function getInitialHref() {
   }
   return href;
 }
+
+function isCollectionInBbox(collection: StacCollection, bbox: BBox2D) {
+  if (bbox[2] - bbox[0] >= 360) {
+    // A global bbox always contains every collection
+    return true;
+  }
+  const collectionBbox = collection?.extent?.spatial?.bbox?.[0];
+  if (collectionBbox) {
+    return (
+      !(
+        collectionBbox[0] < bbox[0] &&
+        collectionBbox[1] < bbox[1] &&
+        collectionBbox[2] > bbox[2] &&
+        collectionBbox[3] > bbox[3]
+      ) &&
+      !(
+        collectionBbox[0] > bbox[2] ||
+        collectionBbox[1] > bbox[3] ||
+        collectionBbox[2] < bbox[0] ||
+        collectionBbox[3] < bbox[1]
+      )
+    );
+  } else {
+    return false;
+  }
+}