Select by bounding box

lonboard/_layer.py

@@ -183,6 +183,20 @@ def _add_extension_traits(self, extensions: Sequence[BaseExtension]):
     - Default: `False`
     """
 
+    selected_bounds = traitlets.List(
+        trait=traitlets.Float(allow_none=False),
+        allow_none=True,
+        default_value=None,
+        sync=True,
+    )
+    """
+    Bounds selected by the user, represented as a list of floats
+     representing [minx, miny, maxx, maxy]
+    We make this available on the map, as well as each layer, for convenience.
+    This tries to copy Shapely in representing bounds:
+     https://shapely.readthedocs.io/en/stable/manual.html#object.bounds
+    """
+
     selected_index = traitlets.Int(None, allow_none=True).tag(sync=True)
     """
     The positional index of the most-recently clicked on row of data.

lonboard/_map.py

@@ -156,6 +156,21 @@ def __init__(
     - Default: `5`
     """
 
+    selected_bounds = traitlets.List(
+        trait=traitlets.Float(allow_none=False),
+        allow_none=True,
+        default_value=None,
+        sync=True,
+    )
+    """
+    Bounds selected by the user, represented as a list of floats
+     representing [minx, miny, maxx, maxy]
+    This tries to copy Shapely in representing bounds:
+     https://shapely.readthedocs.io/en/stable/manual.html#object.bounds
+
+    QUESTION: is this how we should represent bounds for the python object?
+    """
+
     basemap_style = traitlets.Unicode(CartoBasemap.PositronNoLabels).tag(sync=True)
     """
     A MapLibre-compatible basemap style.

src/index.tsx

@@ -1,15 +1,17 @@
 import * as React from "react";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { createRender, useModelState, useModel } from "@anywidget/react";
 import type { Initialize, Render } from "@anywidget/types";
 import Map from "react-map-gl/maplibre";
-import DeckGL from "@deck.gl/react/typed";
+import DeckGL, { DeckGLRef } from "@deck.gl/react/typed";
+import { PolygonLayer } from "@deck.gl/layers/typed";
+import type { PickingInfo } from "@deck.gl/core/typed";
 import { MapViewState, type Layer } from "@deck.gl/core/typed";
 import { BaseLayerModel, initializeLayer } from "./model/index.js";
 import type { WidgetModel } from "@jupyter-widgets/base";
 import { initParquetWasm } from "./parquet.js";
 import { getTooltip } from "./tooltip/index.js";
-import { isDefined, loadChildModels } from "./util.js";
+import { getPolygon, isDefined, loadChildModels } from "./util.js";
 import { v4 as uuidv4 } from "uuid";
 import { Message } from "./types.js";
 import { flyTo } from "./actions/fly-to.js";
@@ -62,19 +64,28 @@ async function getChildModelState(
 }
 
 function App() {
-  let model = useModel();
+  const model = useModel();
 
-  let [pythonInitialViewState] = useModelState<MapViewState>(
+  const [pythonInitialViewState] = useModelState<MapViewState>(
     "_initial_view_state",
   );
-  let [mapStyle] = useModelState<string>("basemap_style");
-  let [mapHeight] = useModelState<number>("_height");
-  let [showTooltip] = useModelState<boolean>("show_tooltip");
-  let [pickingRadius] = useModelState<number>("picking_radius");
-  let [useDevicePixels] = useModelState<number | boolean>("use_device_pixels");
-  let [parameters] = useModelState<object>("parameters");
-
-  let [initialViewState, setInitialViewState] = useState(
+  const [mapStyle] = useModelState<string>("basemap_style");
+  const [mapHeight] = useModelState<number>("_height");
+  const [showTooltip] = useModelState<boolean>("show_tooltip");
+  const [pickingRadius] = useModelState<number>("picking_radius");
+  const [boundsModel, setBoundsModel] =
+    useModelState<Array<number>>("selected_bounds");
+  const [selectionMode, setSelectionMode] = useState<boolean | string>(false);
+  const [selectionObjectCount, setSelectionObjectCount] = useState<
+    boolean | number
+  >(false);
+  const [hoverBBoxLayer, setHoverBBoxLayer] = useState<any>(false);
+  const [useDevicePixels] = useModelState<number | boolean>(
+    "use_device_pixels",
+  );
+  const [parameters] = useModelState<object>("parameters");
+
+  const [initialViewState, setInitialViewState] = useState(
     pythonInitialViewState,
   );
 
@@ -91,15 +102,15 @@ function App() {
   });
 
   const [mapId] = useState(uuidv4());
-
-  let [subModelState, setSubModelState] = useState<
+  const mapRef = useRef<DeckGLRef>(null);
+  const [subModelState, setSubModelState] = useState<
     Record<string, BaseLayerModel>
   >({});
 
-  let [childLayerIds] = useModelState<string[]>("layers");
+  const [childLayerIds] = useModelState<string[]>("layers");
 
   // Fake state just to get react to re-render when a model callback is called
-  let [stateCounter, setStateCounter] = useState<Date>(new Date());
+  const [stateCounter, setStateCounter] = useState<Date>(new Date());
 
   useEffect(() => {
     const callback = async () => {
@@ -144,8 +155,154 @@ function App() {
     }
   }, []);
 
+  // State is an array of: [screen coordinates, geographic coordinates]
+  const [selectionStart, setSelectionStart] = useState<
+    undefined | [[number, number], number[] | undefined]
+  >();
+  const [selectionEnd, setSelectionEnd] = useState<
+    undefined | [[number, number], number[] | undefined]
+  >();
+
+  function onSelectClick() {
+    if (!selectionMode) {
+      setSelectionMode("selecting");
+    }
+    if (selectionMode === "selected") {
+      setSelectionMode(false);
+      setSelectionStart(undefined);
+      setSelectionEnd(undefined);
+    }
+  }
+
+  function onMapClick(info: PickingInfo) {
+    if (!selectionMode || selectionMode === "selected") return;
+    if (selectionStart !== undefined && selectionEnd === undefined) {
+      setSelectionEnd([[info.x, info.y], info.coordinate]);
+      const pt1 = selectionStart[0];
+      const pt2 = [info.x, info.y];
+
+      const width = Math.abs(pt2[0] - pt1[0]);
+      const height = Math.abs(pt2[1] - pt1[1]);
+      const left = Math.min(pt1[0], pt2[0]);
+      const top = Math.min(pt1[1], pt2[1]);
+      const selectedObjects = mapRef.current?.pickObjects({
+        x: left,
+        y: top,
+        width,
+        height,
+      });
+      setSelectionMode("selected");
+      setHoverBBoxLayer(false);
+      setSelectionObjectCount(selectedObjects ? selectedObjects.length : 0);
+
+      // set this to what Shapely uses to represent Bounds
+      const bounds = [
+        Math.min(pt1[0], pt2[0]),
+        Math.min(pt1[1], pt2[1]),
+        Math.max(pt1[0], pt2[0]),
+        Math.max(pt1[1], pt2[1]),
+      ];
+      setBoundsModel(bounds);
+
+      // now we need to set the selected_bounds on each layer
+      loadChildModels(model.widget_manager, childLayerIds).then(layerModels => {
+        layerModels.forEach(layer => {
+          layer.set('selected_bounds', bounds);
+          layer.save_changes();
+        });
+      }).catch(e => {
+        console.log('error setting selected_bounds state on layer models', e);
+      });
+    } else {
+      setSelectionStart([[info.x, info.y], info.coordinate]);
+      setSelectionEnd(undefined);
+    }
+  }
+
+  function onMapHover(hoverInfo: PickingInfo) {
+    if (selectionMode !== "selecting") return;
+    const hoverCoords = hoverInfo.coordinate;
+    if (selectionStart && hoverCoords) {
+      const pt1 = selectionStart[1];
+      const pt2 = hoverCoords;
+      if (!pt1 || !pt2) return;
+      const data = [
+        {
+          polygon: getPolygon(pt1, pt2),
+        },
+      ];
+      const bboxLayer = new PolygonLayer({
+        id: "selection-layer",
+        data,
+        filled: true,
+        getFillColor: [0, 0, 0, 50],
+        stroked: true,
+        getLineWidth: 2,
+        lineWidthUnits: "pixels",
+        getPolygon: (d) => d.polygon,
+      });
+      console.log(bboxLayer);
+      setHoverBBoxLayer(bboxLayer);
+    }
+    return;
+  }
+
+  const selectionIndicator = useMemo(() => {
+    if (!selectionMode) return undefined;
+    if (selectionStart && selectionEnd) {
+      const pt1 = selectionStart[1];
+      const pt2 = selectionEnd[1];
+      if (!pt1 || !pt2) return undefined;
+      const data = [
+        {
+          polygon: getPolygon(pt1, pt2),
+        },
+      ];
+      return new PolygonLayer({
+        id: "selection-layer",
+        data,
+        filled: true,
+        getFillColor: [0, 0, 0, 30],
+        stroked: true,
+        getLineWidth: 2,
+        lineWidthUnits: "pixels",
+        getPolygon: (d) => d.polygon,
+      });
+    } else {
+      return undefined;
+    }
+  }, [selectionStart, selectionEnd, selectionMode]);
+
+  if (selectionIndicator) {
+    layers.push(selectionIndicator);
+  }
+
+  if (hoverBBoxLayer) {
+    layers.push(hoverBBoxLayer);
+  }
+
   return (
-    <div id={`map-${mapId}`} style={{ height: mapHeight || "100%" }}>
+    <div id={`map-${mapId}`} style={{ height: "100%" }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "2px",
+          right: "2px",
+          backgroundColor: "#fff",
+          padding: "2px",
+          zIndex: "1000",
+          height: "12px",
+        }}
+        onClick={onSelectClick}
+      >
+        {!selectionMode ? "Click to start selecting" : ""}
+        {selectionMode === "selecting"
+          ? "Click two points on map to draw bounding box"
+          : ""}
+        {selectionMode === "selected"
+          ? `${selectionObjectCount} objects selected. Click to Unselect.`
+          : ""}
+      </div>
       <DeckGL
         initialViewState={
           ["longitude", "latitude", "zoom"].every((key) =>
@@ -159,6 +316,9 @@ function App() {
         // @ts-expect-error
         getTooltip={showTooltip && getTooltip}
         pickingRadius={pickingRadius}
+        onClick={onMapClick}
+        onHover={onMapHover}
+        ref={mapRef}
         useDevicePixels={isDefined(useDevicePixels) ? useDevicePixels : true}
         // https://deck.gl/docs/api-reference/core/deck#_typedarraymanagerprops
         _typedArrayManagerProps={{

src/model/base-layer.ts

@@ -32,6 +32,7 @@ export abstract class BaseLayerModel extends BaseModel {
     this.initRegularAttribute("visible", "visible");
     this.initRegularAttribute("opacity", "opacity");
     this.initRegularAttribute("auto_highlight", "autoHighlight");
+    this.initRegularAttribute("selected_bounds", "selectedBounds");
 
     this.extensions = [];
   }

src/util.ts

@@ -21,3 +21,7 @@ export async function loadChildModels(
 export function isDefined<T>(value: T | undefined | null): value is T {
   return value !== undefined && value !== null;
 }
+
+export function getPolygon(pt1: number[], pt2: number[]) {
+  return [pt1, [pt1[0], pt2[1]], pt2, [pt2[0], pt1[1]], pt1];
+}