From 27cc7a2d5fa8bb4fb54a50ca144457ed05ce9d88 Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 22 Jan 2025 15:55:00 +0000
Subject: [PATCH 1/2] fix(tooltip): reinstate tooltip

---
 src/index.tsx         |  2 ++
 src/tooltip/index.css | 30 ++++++++++++++++++++
 src/tooltip/index.ts  | 66 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 98 insertions(+)
 create mode 100644 src/tooltip/index.css
 create mode 100644 src/tooltip/index.ts

diff --git a/src/index.tsx b/src/index.tsx
index ae9a8a5b..46f799bb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,6 +23,7 @@ import { NextUIProvider } from "@nextui-org/react";
 import Toolbar from "./toolbar.js";
 import throttle from "lodash.throttle";
 import SidePanel from "./sidepanel/index";
+import { getTooltip } from "./tooltip/index.js";
 
 await initParquetWasm();
 
@@ -242,6 +243,7 @@ function App() {
               ? layers.concat(bboxSelectPolygonLayer)
               : layers
           }
+          getTooltip={(showTooltip && getTooltip) || undefined}
           getCursor={() => (isDrawingBBoxSelection ? "crosshair" : "grab")}
           pickingRadius={pickingRadius}
           onClick={onMapClickHandler}
diff --git a/src/tooltip/index.css b/src/tooltip/index.css
new file mode 100644
index 00000000..63b05448
--- /dev/null
+++ b/src/tooltip/index.css
@@ -0,0 +1,30 @@
+/* Set fonts based on jupyter defaults */
+.lonboard-tooltip {
+  font-family: var(--jp-ui-font-family);
+  font-size: var(--jp-ui-font-size1);
+}
+
+/* Remove spaces between table cells */
+.lonboard-tooltip table {
+  border-collapse: collapse;
+}
+
+/* Alternate row colors */
+.lonboard-tooltip table tr:nth-child(odd) {
+  background-color: white;
+}
+
+.lonboard-tooltip table tr:nth-child(even) {
+  background-color: rgb(241, 241, 241);
+}
+
+/* Define table cell borders and padding */
+.lonboard-tooltip td {
+  border: 1px solid rgb(204, 204, 204);
+  padding: 5px;
+}
+
+/* Make the first column bold */
+.lonboard-tooltip td:first-child {
+  font-weight: 450;
+}
\ No newline at end of file
diff --git a/src/tooltip/index.ts b/src/tooltip/index.ts
new file mode 100644
index 00000000..79e1e983
--- /dev/null
+++ b/src/tooltip/index.ts
@@ -0,0 +1,66 @@
+import { TooltipContent } from "@deck.gl/core/dist/lib/tooltip";
+import type { GeoArrowPickingInfo } from "@geoarrow/deck.gl-layers";
+
+import "./index.css";
+
+const rowIndexSymbol = Symbol.for("rowIndex");
+
+function toHtmlTable(featureProperties: Record<string, unknown>): string {
+  return `<table>
+      <tbody>
+        ${Object.keys(featureProperties)
+          .map((key) => {
+            const value = featureProperties[key];
+            return `<tr>
+              <td>${key}</td>
+              <td>${value}</td>
+            </tr>`;
+          })
+          .join("")}
+      </tbody>
+    </table>`;
+}
+
+export function getTooltip({ object }: GeoArrowPickingInfo): TooltipContent {
+  if (object) {
+    // If the row index is -1 or undefined, return
+    //
+    // Note that this is a private API, but this appears to be the only way to
+    // get this information
+    //
+    // Without this block, we end up showing a tooltip even when not hovering
+    // over a point
+    if (
+      object[rowIndexSymbol] === null ||
+      object[rowIndexSymbol] === undefined ||
+      (object[rowIndexSymbol] && object[rowIndexSymbol] < 0)
+    ) {
+      return null;
+    }
+
+    const jsonObj = object.toJSON();
+
+    if (!jsonObj) {
+      return null;
+    }
+
+    delete jsonObj["geometry"];
+
+    if (Object.keys(jsonObj).length === 0) {
+      return null;
+    }
+
+    return {
+      className: "lonboard-tooltip",
+      html: toHtmlTable(jsonObj),
+      style: {
+        backgroundColor: "#fff",
+        boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)",
+        color: "#000",
+        padding: "6px",
+      },
+    };
+  }
+
+  return null;
+}

From 68b6222267e876989bf8ffc3216b0c69ecd4402b Mon Sep 17 00:00:00 2001
From: Vitor George <vitor.george@gmail.com>
Date: Wed, 22 Jan 2025 19:53:02 +0000
Subject: [PATCH 2/2] prettier fix

---
 src/tooltip/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tooltip/index.css b/src/tooltip/index.css
index 63b05448..83382c11 100644
--- a/src/tooltip/index.css
+++ b/src/tooltip/index.css
@@ -27,4 +27,4 @@
 /* Make the first column bold */
 .lonboard-tooltip td:first-child {
   font-weight: 450;
-}
\ No newline at end of file
+}