Update linestring and polygon as well

developmentseed · Oct 4, 2023 · e8b1a10 · e8b1a10
1 parent 20df93a
commit e8b1a10
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 77 deletions.
diff --git a/src/linestring.tsx b/src/linestring.tsx
@@ -2,8 +2,9 @@ import * as React from "react";
 import { createRender, useModelState } from "@anywidget/react";
 import Map from "react-map-gl/maplibre";
 import DeckGL from "@deck.gl/react/typed";
-import * as arrow from "apache-arrow";
 import { GeoArrowPathLayer } from "@geoarrow/deck.gl-layers";
+import { useParquetWasm } from "./parquet";
+import { useAccessorState, useTableBufferState } from "./accessor";
 
 const INITIAL_VIEW_STATE = {
   latitude: 10,
@@ -17,7 +18,9 @@ const MAP_STYLE =
   "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
 
 function App() {
-  let [dataView] = useModelState<DataView>("table_buffer");
+  const [wasmReady] = useParquetWasm();
+
+  let [dataRaw] = useModelState<DataView>("table_buffer");
   let [widthUnits] = useModelState("width_units");
   let [widthScale] = useModelState("width_scale");
   let [widthMinPixels] = useModelState("width_min_pixels");
@@ -26,46 +29,32 @@ function App() {
   let [capRounded] = useModelState("cap_rounded");
   let [miterLimit] = useModelState("miter_limit");
   let [billboard] = useModelState("billboard");
-  let [getColor] = useModelState("get_color");
-  let [getWidth] = useModelState("get_width");
-
-  const layers = [];
+  let [getColorRaw] = useModelState("get_color");
+  let [getWidthRaw] = useModelState("get_width");
 
-  if (dataView && dataView.byteLength > 0) {
-    const arrowTable = arrow.tableFromIPC(dataView.buffer);
-    // TODO: allow other names
-    const geometryColumnIndex = arrowTable.schema.fields.findIndex(
-      (field) => field.name == "geometry"
-    );
+  const [dataTable] = useTableBufferState(wasmReady, dataRaw);
+  const [getColor] = useAccessorState(wasmReady, getColorRaw);
+  const [getWidth] = useAccessorState(wasmReady, getWidthRaw);
 
-    const geometryField = arrowTable.schema.fields[geometryColumnIndex];
-    const geoarrowTypeName = geometryField.metadata.get("ARROW:extension:name");
-    switch (geoarrowTypeName) {
-      case "geoarrow.linestring":
-        {
-          const layer = new GeoArrowPathLayer({
-            id: "geoarrow-path",
-            data: arrowTable,
-
-            ...(widthUnits && { widthUnits }),
-            ...(widthScale && { widthScale }),
-            ...(widthMinPixels && { widthMinPixels }),
-            ...(widthMaxPixels && { widthMaxPixels }),
-            ...(jointRounded && { jointRounded }),
-            ...(capRounded && { capRounded }),
-            ...(miterLimit && { miterLimit }),
-            ...(billboard && { billboard }),
-            ...(getColor && { getColor }),
-            ...(getWidth && { getWidth }),
-          });
-          layers.push(layer);
-        }
-        break;
+  const layers = [];
+  if (dataTable) {
+    // @ts-ignore
+    const layer = new GeoArrowPathLayer({
+      id: "geoarrow-path",
+      data: dataTable,
 
-      default:
-        console.warn(`no layer supported for ${geoarrowTypeName}`);
-        break;
-    }
+      ...(widthUnits && { widthUnits }),
+      ...(widthScale && { widthScale }),
+      ...(widthMinPixels && { widthMinPixels }),
+      ...(widthMaxPixels && { widthMaxPixels }),
+      ...(jointRounded && { jointRounded }),
+      ...(capRounded && { capRounded }),
+      ...(miterLimit && { miterLimit }),
+      ...(billboard && { billboard }),
+      ...(getColor && { getColor }),
+      ...(getWidth && { getWidth }),
+    });
+    layers.push(layer);
   }
 
   return (

diff --git a/src/point.tsx b/src/point.tsx
@@ -45,7 +45,7 @@ function App() {
   const [getLineWidth] = useAccessorState(wasmReady, getLineWidthRaw);
 
   const layers = [];
-  if (wasmReady && dataTable) {
+  if (dataTable) {
     // @ts-ignore
     const layer = new GeoArrowScatterplotLayer({
       id: "geoarrow-points",

diff --git a/src/polygon.tsx b/src/polygon.tsx
@@ -2,8 +2,9 @@ import * as React from "react";
 import { createRender, useModelState } from "@anywidget/react";
 import Map from "react-map-gl/maplibre";
 import DeckGL from "@deck.gl/react/typed";
-import * as arrow from "apache-arrow";
 import { GeoArrowSolidPolygonLayer } from "@geoarrow/deck.gl-layers";
+import { useParquetWasm } from "./parquet";
+import { useAccessorState, useTableBufferState } from "./accessor";
 
 const INITIAL_VIEW_STATE = {
   latitude: 10,
@@ -17,48 +18,37 @@ const MAP_STYLE =
   "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json";
 
 function App() {
-  let [dataView] = useModelState<DataView>("table_buffer");
+  const [wasmReady] = useParquetWasm();
+
+  let [dataRaw] = useModelState<DataView>("table_buffer");
   let [filled] = useModelState("filled");
   let [extruded] = useModelState("extruded");
   let [wireframe] = useModelState("wireframe");
   let [elevationScale] = useModelState("elevation_scale");
-  let [getElevation] = useModelState("get_elevation");
-  let [getFillColor] = useModelState("get_fill_color");
-  let [getLineColor] = useModelState("get_line_color");
-
-  const layers = [];
+  let [getElevationRaw] = useModelState("get_elevation");
+  let [getFillColorRaw] = useModelState("get_fill_color");
+  let [getLineColorRaw] = useModelState("get_line_color");
 
-  if (dataView && dataView.byteLength > 0) {
-    const arrowTable = arrow.tableFromIPC(dataView.buffer);
-    // TODO: allow other names
-    const geometryColumnIndex = arrowTable.schema.fields.findIndex(
-      (field) => field.name == "geometry"
-    );
+  const [dataTable] = useTableBufferState(wasmReady, dataRaw);
+  const [getElevation] = useAccessorState(wasmReady, getElevationRaw);
+  const [getFillColor] = useAccessorState(wasmReady, getFillColorRaw);
+  const [getLineColor] = useAccessorState(wasmReady, getLineColorRaw);
 
-    const geometryField = arrowTable.schema.fields[geometryColumnIndex];
-    const geoarrowTypeName = geometryField.metadata.get("ARROW:extension:name");
-    switch (geoarrowTypeName) {
-      case "geoarrow.polygon":
-        {
-          const layer = new GeoArrowSolidPolygonLayer({
-            id: "geoarrow-polygons",
-            data: arrowTable,
-            ...(filled && { filled }),
-            ...(extruded && { extruded }),
-            ...(wireframe && { wireframe }),
-            ...(elevationScale && { elevationScale }),
-            ...(getElevation && { getElevation }),
-            ...(getFillColor && { getFillColor }),
-            ...(getLineColor && { getLineColor }),
-          });
-          layers.push(layer);
-        }
-        break;
-
-      default:
-        console.warn(`no layer supported for ${geoarrowTypeName}`);
-        break;
-    }
+  const layers = [];
+  if (dataTable) {
+    // @ts-ignore
+    const layer = new GeoArrowSolidPolygonLayer({
+      id: "geoarrow-polygons",
+      data: dataTable,
+      ...(filled && { filled }),
+      ...(extruded && { extruded }),
+      ...(wireframe && { wireframe }),
+      ...(elevationScale && { elevationScale }),
+      ...(getElevation && { getElevation }),
+      ...(getFillColor && { getFillColor }),
+      ...(getLineColor && { getLineColor }),
+    });
+    layers.push(layer);
   }
 
   return (