Reinstate tooltip

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}

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;
+}

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;
+}