feat: workin it

Author: gadomski

src/App.tsx

@@ -1,28 +1,24 @@
 import { Box } from "@chakra-ui/react";
+import { Layer } from "@deck.gl/core";
+import { useState } from "react";
 import "./app.css";
-import Map from "./components/map";
+import { Map } from "./components/map";
 import Overlay from "./components/overlay";
-import { StacProvider } from "./components/stac/provider";
 import { Toaster } from "./components/ui/toaster";
 
 function App() {
+  const [layers, setLayers] = useState<Layer[]>([]);
+
   return (
-    <StacProvider>
-      <Box
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          zIndex: 0,
-        }}
-      >
-        <Map></Map>
+    <>
+      <Box position={"absolute"} top={0} left={0} zIndex={0}>
+        <Map layers={layers}></Map>
       </Box>
-      <Box style={{ zIndex: 1 }}>
-        <Overlay></Overlay>
+      <Box zIndex={1}>
+        <Overlay setLayers={setLayers}></Overlay>
       </Box>
       <Toaster></Toaster>
-    </StacProvider>
+    </>
   );
 }
 

src/components/footer.tsx

@@ -1,72 +1,52 @@
 import {
   Button,
-  Group,
   HStack,
   Input,
+  InputGroup,
   Menu,
   Portal,
-  type MenuSelectionDetails,
 } from "@chakra-ui/react";
-import { useState } from "react";
-import { useStacDispatch } from "./stac/hooks";
-import { ColorModeButton } from "./ui/color-mode";
+import { type Dispatch, type SetStateAction } from "react";
+import { LuSearch } from "react-icons/lu";
 
-export default function Header() {
-  const [href, setHref] = useState<string>("");
-  const dispatch = useStacDispatch();
-
-  async function onSelectExample(details: MenuSelectionDetails) {
-    setHref(details.value);
-    dispatch({ type: "set-href", href: details.value });
-  }
+const EXAMPLES = [
+  ["eoAPI DevSeed", "https://stac.eoapi.dev/"],
+  [
+    "Microsoft Planetary Computer",
+    "https://planetarycomputer.microsoft.com/api/stac/v1",
+  ],
+  [
+    "Simple item",
+    "https://raw.githubusercontent.com/radiantearth/stac-spec/refs/heads/master/examples/simple-item.json",
+  ],
+];
 
+export default function Header({
+  setHref,
+}: {
+  setHref: Dispatch<SetStateAction<string>>;
+}) {
   return (
-    <HStack spaceX={2} pointerEvents={"auto"}>
-      <Group
-        attached
-        w={"full"}
-        as={"form"}
-        onSubmit={async (e) => {
-          e.preventDefault();
-          dispatch({ type: "set-href", href });
-        }}
-      >
-        <Input
-          variant={"subtle"}
-          flex={"1"}
-          value={href}
-          onChange={(e) => setHref(e.currentTarget.value)}
-        ></Input>
-        <Button
-          variant={"outline"}
-          bg={"bg.subtle"}
-          type={"submit"}
-          hideBelow={"md"}
-        >
-          Load
-        </Button>
-      </Group>
-      <Menu.Root onSelect={onSelectExample}>
+    <HStack py={4} pointerEvents={"auto"}>
+      <InputGroup w="full" startElement={<LuSearch></LuSearch>}>
+        <Input flex={1} variant={"subtle"} rounded={4}></Input>
+      </InputGroup>
+      <Menu.Root onSelect={(details) => setHref(details.value)}>
         <Menu.Trigger asChild>
-          <Button variant={"subtle"}>Examples</Button>
+          <Button variant={"surface"}>Examples</Button>
         </Menu.Trigger>
         <Portal>
           <Menu.Positioner>
             <Menu.Content>
-              <Menu.Item value="https://stac.eoapi.dev/">
-                eoAPI DevSeed STAC
-              </Menu.Item>
-              <Menu.Item value="https://planetarycomputer.microsoft.com/api/stac/v1">
-                Microsoft Planetary Computer
-              </Menu.Item>
-              <Menu.Item value="https://raw.githubusercontent.com/developmentseed/labs-375-stac-geoparquet-backend/refs/heads/main/data/naip.parquet">
-                Colorado NAIP
-              </Menu.Item>
+              {EXAMPLES.map(([text, href], index) => (
+                <Menu.Item key={"example-" + index} value={href}>
+                  {text}
+                </Menu.Item>
+              ))}
             </Menu.Content>
           </Menu.Positioner>
         </Portal>
       </Menu.Root>
-      <ColorModeButton></ColorModeButton>
     </HStack>
   );
 }

src/components/header.tsx

@@ -1,15 +1,12 @@
 import { Layer, type DeckProps } from "@deck.gl/core";
 import { MapboxOverlay } from "@deck.gl/mapbox";
-import { GeoArrowPolygonLayer } from "@geoarrow/deck.gl-layers";
-import { GeoJsonLayer } from "deck.gl";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import {
   Map as MaplibreMap,
   useControl,
   type MapRef,
 } from "react-map-gl/maplibre";
-import { useStac } from "./stac/hooks";
 import { useColorModeValue } from "./ui/color-mode";
 
 function DeckGLOverlay(props: DeckProps) {
@@ -18,78 +15,13 @@ function DeckGLOverlay(props: DeckProps) {
   return <></>;
 }
 
-export default function Map() {
-  const { table, bbox, geojson } = useStac();
-  const [tableLayer, setTableLayer] = useState<GeoArrowPolygonLayer>();
-  const [geoJsonLayer, setGeoJsonLayer] = useState<Layer>();
-  const [layers, setLayers] = useState<Layer[]>([]);
+export function Map({ layers }: { layers: Layer[] }) {
   const mapRef = useRef<MapRef>(null);
   const mapStyle = useColorModeValue(
     "positron-gl-style",
     "dark-matter-gl-style"
   );
 
-  useEffect(() => {
-    if (table) {
-      const layer = new GeoArrowPolygonLayer({
-        id: "geoarrow-polygons",
-        data: table,
-        stroked: true,
-        filled: true,
-        getFillColor: () => {
-          return [207, 63, 2, 100];
-        },
-        pickable: true,
-        autoHighlight: true,
-        highlightColor: [252, 192, 38],
-      });
-      setTableLayer(layer);
-    } else {
-      setTableLayer(undefined);
-    }
-  }, [table]);
-
-  useEffect(() => {
-    if (bbox) {
-      if (mapRef.current) {
-        mapRef.current.fitBounds(
-          [
-            [bbox[0], bbox[1]],
-            [bbox[2], bbox[3]],
-          ],
-          { padding: 100 }
-        );
-      }
-    }
-  }, [bbox]);
-
-  useEffect(() => {
-    if (geojson) {
-      const layer = new GeoJsonLayer({
-        id: "geojson",
-        data: geojson,
-        stroked: false,
-        filled: true,
-        pickable: true,
-        getFillColor: [160, 160, 180, 200],
-      });
-      setGeoJsonLayer(layer);
-    } else {
-      setGeoJsonLayer(undefined);
-    }
-  }, [geojson]);
-
-  useEffect(() => {
-    const layers = [];
-    if (geoJsonLayer) {
-      layers.push(geoJsonLayer);
-    }
-    if (tableLayer) {
-      layers.push(tableLayer);
-    }
-    setLayers(layers);
-  }, [geoJsonLayer, tableLayer]);
-
   return (
     <MaplibreMap
       ref={mapRef}

src/components/map.tsx

@@ -1,14 +1,19 @@
 import { Container } from "@chakra-ui/react";
-import Footer from "./footer";
+import type { Layer } from "@deck.gl/core";
+import { useState, type Dispatch, type SetStateAction } from "react";
 import Header from "./header";
-import Panel from "./panel";
+import { Panel } from "./panel";
 
-export default function Overlay() {
+export default function Overlay({
+  setLayers,
+}: {
+  setLayers: Dispatch<SetStateAction<Layer[]>>;
+}) {
+  const [href, setHref] = useState("");
   return (
-    <Container fluid py={2} h={"100vh"} pointerEvents={"none"}>
-      <Header></Header>
-      <Panel></Panel>
-      <Footer></Footer>
+    <Container fluid h={"100vh"} pointerEvents={"none"}>
+      <Header setHref={setHref}></Header>
+      <Panel href={href} setLayers={setLayers}></Panel>
     </Container>
   );
 }