feat: Reinstate tooltip (#736)

Contributes to #586. 

@kylebarron this just restore the original tooltip files, re-enabling
the feature that was removed in #636. I think the tooltip need
improvements on the layout to break lines in a similar way the sidepanel
does. But we can address it in separate if we want to restore the
feature right away.

---------

Co-authored-by: Kyle Barron <kyle@developmentseed.org>

Author: vgeorge

lonboard/_map.py

@@ -190,10 +190,18 @@ def on_click(self, callback: Callable, *, remove: bool = False) -> None:
     """One or more `Layer` objects to display on this map.
     """
 
-    show_tooltip = t.Bool(default_value=True).tag(sync=True)
+    show_tooltip = t.Bool(default_value=False).tag(sync=True)
     """
     Whether to render a tooltip on hover on the map.
 
+    - Type: `bool`
+    - Default: `False`
+    """
+
+    show_side_panel = t.Bool(default_value=True).tag(sync=True)
+    """
+    Whether to render a side panel upon clicking on elements.
+
     - Type: `bool`
     - Default: `True`
     """

lonboard/types/map.py

@@ -20,5 +20,6 @@ class MapKwargs(TypedDict, total=False):
     parameters: dict[str, Any]
     picking_radius: int
     show_tooltip: bool
+    show_side_panel: bool
     use_device_pixels: int | float | bool
     view_state: dict[str, Any]

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();
 
@@ -98,6 +99,7 @@ function App() {
   const [mapStyle] = useModelState<string>("basemap_style");
   const [mapHeight] = useModelState<number>("_height");
   const [showTooltip] = useModelState<boolean>("show_tooltip");
+  const [showSidePanel] = useModelState<boolean>("show_side_panel");
   const [pickingRadius] = useModelState<number>("picking_radius");
   const [useDevicePixels] = useModelState<number | boolean>(
     "use_device_pixels",
@@ -221,7 +223,7 @@ function App() {
       >
         <Toolbar />
 
-        {showTooltip && highlightedFeature && (
+        {showSidePanel && highlightedFeature && (
           <SidePanel
             info={highlightedFeature}
             onClose={() => actorRef.send({ type: "Close side panel" })}
@@ -243,6 +245,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;
+}