feat: uplaod json

Author: gadomski

package.json

@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/geojson": "^7946.0.16",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",

src/components/header.tsx

@@ -16,6 +16,7 @@ export default function Header() {
   const dispatch = useStacDispatch();
 
   async function onSelectExample(details: MenuSelectionDetails) {
+    setHref(details.value);
     dispatch({ type: "set-href", href: details.value });
   }
 

src/components/map.tsx

@@ -1,6 +1,7 @@
-import { type DeckProps } from "@deck.gl/core";
+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 {
@@ -18,8 +19,10 @@ function DeckGLOverlay(props: DeckProps) {
 }
 
 export default function Map() {
-  const { table, bbox } = useStac();
-  const [layers, setLayers] = useState<GeoArrowPolygonLayer[]>([]);
+  const { table, bbox, geojson } = useStac();
+  const [tableLayer, setTableLayer] = useState<GeoArrowPolygonLayer>();
+  const [geoJsonLayer, setGeoJsonLayer] = useState<Layer>();
+  const [layers, setLayers] = useState<Layer[]>([]);
   const mapRef = useRef<MapRef>(null);
   const mapStyle = useColorModeValue(
     "positron-gl-style",
@@ -40,9 +43,9 @@ export default function Map() {
         autoHighlight: true,
         highlightColor: [252, 192, 38],
       });
-      setLayers([layer]);
+      setTableLayer(layer);
     } else {
-      setLayers([]);
+      setTableLayer(undefined);
     }
   }, [table]);
 
@@ -60,6 +63,33 @@ export default function Map() {
     }
   }, [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/panel.tsx

@@ -11,7 +11,7 @@ import {
 } from "@chakra-ui/react";
 import { useDuckDb } from "duckdb-wasm-kit";
 import { useEffect, useState } from "react";
-import { LuInfo, LuUpload } from "react-icons/lu";
+import { LuFilter, LuInfo, LuSearch, LuUpload } from "react-icons/lu";
 import { useStac, useStacDispatch } from "./stac/hooks";
 import type { StacValue } from "./stac/types";
 
@@ -49,14 +49,21 @@ export default function Panel() {
     // This should always be true since we set maxFiles to 1
     if (fileUpload.acceptedFiles.length == 1) {
       const file = fileUpload.acceptedFiles[0];
-      if (db) {
-        (async () => {
-          const buffer = await file.arrayBuffer();
-          // TODO do we need to clean up, eventually?
-          db.registerFileBuffer(file.name, new Uint8Array(buffer));
-          dispatch({ type: "set-href", href: file.name });
-        })();
-      }
+      (async () => {
+        if (file.name.endsWith(".parquet")) {
+          if (db) {
+            const buffer = await file.arrayBuffer();
+            // TODO do we need to clean up, eventually?
+            db.registerFileBuffer(file.name, new Uint8Array(buffer));
+            dispatch({ type: "set-href", href: file.name });
+          }
+        } else {
+          const text = await file.text();
+          const value = JSON.parse(text);
+          dispatch({ type: "set-href" });
+          dispatch({ type: "set-value", value });
+        }
+      })();
     }
   }, [fileUpload.acceptedFiles, db, dispatch]);
 
@@ -83,6 +90,12 @@ export default function Panel() {
           <Tabs.Trigger value="value">
             <LuInfo></LuInfo>
           </Tabs.Trigger>
+          <Tabs.Trigger value="search" disabled={true}>
+            <LuSearch></LuSearch>
+          </Tabs.Trigger>
+          <Tabs.Trigger value="filter" disabled={true}>
+            <LuFilter></LuFilter>
+          </Tabs.Trigger>
           <Tabs.Trigger value="upload">
             <LuUpload></LuUpload>
           </Tabs.Trigger>

src/components/stac/provider.tsx

@@ -66,12 +66,26 @@ function reducer(state: StacState, action: StacAction) {
           href: action.href,
           value: undefined,
           table: undefined,
+          geojson: undefined,
         };
       } else {
         return state;
       }
-    case "set-value":
-      return { ...state, value: action.value };
+    case "set-value": {
+      const newState = { ...state, value: action.value };
+      if (
+        ["Feature", "FeatureCollection"].includes(action.value.type) &&
+        action.value.geometry !== null
+      ) {
+        // @ts-expect-error We know that we want this here
+        newState.geojson = action.value;
+      }
+      if (action.value.bbox !== undefined) {
+        // @ts-expect-error Man this is hard
+        newState.bbox = action.value.bbox;
+      }
+      return newState;
+    }
     case "set-table":
       return { ...state, table: action.table };
     case "set-bbox":

src/components/stac/types.ts

@@ -1,4 +1,5 @@
 import { Table } from "apache-arrow";
+import type { Feature, FeatureCollection } from "geojson";
 import { type Dispatch } from "react";
 import type { StacCatalog, StacCollection, StacItem } from "stac-ts";
 
@@ -18,11 +19,12 @@ export type StacState = {
   href?: string;
   value?: StacValue;
   table?: Table;
+  geojson?: Feature | FeatureCollection;
   bbox?: number[];
 };
 
 export type StacAction =
-  | { type: "set-href"; href: string }
+  | { type: "set-href"; href?: string }
   | { type: "set-value"; value: StacValue }
   | { type: "set-table"; table: Table }
   | { type: "set-bbox"; bbox: number[] };