From 7d41d39068d57b7d3a0a6b744e055dd8c7eac6a5 Mon Sep 17 00:00:00 2001
From: Kyle Barron <kyle@developmentseed.org>
Date: Wed, 6 Aug 2025 22:49:45 -0400
Subject: [PATCH] wip: Compass widget

---
 package-lock.json |  9 ++++-----
 package.json      |  1 +
 src/index.tsx     | 11 ++++++++++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 18fbe3aa..849e882f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@deck.gl/extensions": "^9.1.14",
         "@deck.gl/layers": "^9.1.14",
         "@deck.gl/react": "^9.1.14",
+        "@deck.gl/widgets": "^9.1.14",
         "@geoarrow/deck.gl-layers": "^0.3.1",
         "@nextui-org/react": "^2.4.8",
         "@xstate/react": "^5.0.0",
@@ -1343,10 +1344,9 @@
       }
     },
     "node_modules/@deck.gl/widgets": {
-      "version": "9.1.13",
-      "resolved": "https://registry.npmjs.org/@deck.gl/widgets/-/widgets-9.1.13.tgz",
-      "integrity": "sha512-6nriLKNzXovWrm4Lj9MAdYf2W9/bSwJ1Rlq4jc8WvrOr1wtIJ7j6NdHlfGUs2Vv1PLt72M0jSqMwHQQevLvsqQ==",
-      "peer": true,
+      "version": "9.1.14",
+      "resolved": "https://registry.npmjs.org/@deck.gl/widgets/-/widgets-9.1.14.tgz",
+      "integrity": "sha512-hEyvvrqxEr7ujqTyTbdm5VTwY4oMYKNsLyXKjxWerHCIyfT971UYyV4cbILqvYf+L8spE146NFqwx0jj1bBqWw==",
       "dependencies": {
         "preact": "^10.17.0"
       },
@@ -12378,7 +12378,6 @@
       "version": "10.26.9",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.26.9.tgz",
       "integrity": "sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
diff --git a/package.json b/package.json
index fbaf458d..8adb5571 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@deck.gl/extensions": "^9.1.14",
     "@deck.gl/layers": "^9.1.14",
     "@deck.gl/react": "^9.1.14",
+    "@deck.gl/widgets": "^9.1.14",
     "@geoarrow/deck.gl-layers": "^0.3.1",
     "@babel/runtime": "^7.26.0",
     "@nextui-org/react": "^2.4.8",
diff --git a/src/index.tsx b/src/index.tsx
index cea874a4..e9c9e51f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,8 +3,10 @@ import { useEffect, useCallback, useState } 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";
+import { CompassWidget, FullscreenWidget } from "@deck.gl/react";
+import DeckGL, { useWidget } from "@deck.gl/react";
 import { MapViewState, PickingInfo, type Layer } from "@deck.gl/core";
+// import { FullscreenWidget } from "@deck.gl/widgets";
 import { BaseLayerModel, initializeLayer } from "./model/index.js";
 import type { WidgetModel } from "@jupyter-widgets/base";
 import { initParquetWasm } from "./parquet.js";
@@ -142,6 +144,11 @@ function App() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [stateCounter, setStateCounter] = useState<Date>(new Date());
 
+  // const CompassWidget = (props) => {
+  //   const widget = useWidget(UniversalCompassWidget, props);
+  //   return null;
+  // };
+
   useEffect(() => {
     const loadAndUpdateLayers = async () => {
       try {
@@ -280,6 +287,8 @@ function App() {
               mapStyle={mapStyle || DEFAULT_MAP_STYLE}
               customAttribution={customAttribution}
             ></Map>
+            <CompassWidget id={`compass-${mapId}`} placement="top-left" />
+            <FullscreenWidget id={`fullscreen-${mapId}`} placement="top-left" />
           </DeckGL>
         </div>
       </div>