From 7ca135e6feaf66655c6c5d025e0f77dc0913b15f Mon Sep 17 00:00:00 2001
From: Isaac Brodsky <isaac@isaacbrodsky.com>
Date: Mon, 29 Jun 2026 18:54:53 -0700
Subject: [PATCH 1/7] website: reenable navigation with style adjustment and
 preview

---
 website/src/components/explorer/details.jsx | 79 +++++++++++++++++----
 website/src/components/explorer/index.tsx   | 11 ++-
 website/src/components/explorer/map.jsx     | 56 +++++++++++++--
 website/src/components/styled.js            |  9 ++-
 4 files changed, 130 insertions(+), 25 deletions(-)

diff --git a/website/src/components/explorer/details.jsx b/website/src/components/explorer/details.jsx
index ea43688569..a05ff4bb83 100644
--- a/website/src/components/explorer/details.jsx
+++ b/website/src/components/explorer/details.jsx
@@ -1,6 +1,6 @@
 // Contains code adapted from https://observablehq.com/@nrabinowitz/h3-index-inspector under the ISC license
 
-import React, { useCallback } from "react";
+import React, { useCallback, useEffect } from "react";
 import {
   cellToBoundary,
   cellToParent,
@@ -62,27 +62,68 @@ function cellUnits(hex) {
     : { area: UNITS.m2, dist: UNITS.m };
 }
 
-function ClickableH3Index({ hex, setUserInput }) {
+function ClickableH3Index({ hex, setUserInput, onHoverCells }) {
   const onClick = useCallback(() => {
     setUserInput(hex);
-  }, [hex, setUserInput]);
+    if (onHoverCells) {
+      onHoverCells([]);
+    }
+  }, [hex, setUserInput, onHoverCells]);
+
+  const onMouseEnter = useCallback(() => {
+    if (onHoverCells) {
+      onHoverCells([hex]);
+    }
+  }, [onHoverCells]);
+  const onMouseLeave = useCallback(() => {
+    if (onHoverCells) {
+      onHoverCells([]);
+    }
+  }, [onHoverCells]);
 
   return (
-    <a onClick={onClick} style={{ cursor: "pointer" }}>
+    <a
+      onClick={onClick}
+      style={{ cursor: "pointer" }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
       {hex}
     </a>
   );
 }
 
-function ClickableH3IndexList({ hexes, setUserInput, showAll = true }) {
+function ClickableH3IndexList({
+  hexes,
+  setUserInput,
+  showAll = true,
+  onHoverCells,
+}) {
   const onShowAllClick = useCallback(() => {
     setUserInput(hexes.join(", "));
   }, [hexes, setUserInput]);
+
+  const showAllOnMouseEnter = useCallback(() => {
+    if (onHoverCells) {
+      onHoverCells(hexes);
+    }
+  }, [onHoverCells]);
+  const showAllOnMouseLeave = useCallback(() => {
+    if (onHoverCells) {
+      onHoverCells([]);
+    }
+  }, [onHoverCells]);
+
   return (
     <>
       {hexes.map((hex, index) => {
         const link = (
-          <ClickableH3Index key={hex} setUserInput={setUserInput} hex={hex} />
+          <ClickableH3Index
+            key={hex}
+            setUserInput={setUserInput}
+            hex={hex}
+            onHoverCells={onHoverCells}
+          />
         );
         if (index === 0) {
           return link;
@@ -93,7 +134,12 @@ function ClickableH3IndexList({ hexes, setUserInput, showAll = true }) {
       {showAll ? (
         <>
           &nbsp;
-          <a onClick={onShowAllClick} style={{ cursor: "pointer" }}>
+          <a
+            onClick={onShowAllClick}
+            style={{ cursor: "pointer" }}
+            onMouseEnter={showAllOnMouseEnter}
+            onMouseLeave={showAllOnMouseLeave}
+          >
             (show all)
           </a>
         </>
@@ -110,6 +156,7 @@ export function SelectedHexDetails({
   splitUserInput,
   showNavigation = true,
   showDetails = true,
+  onHoverCells,
 }) {
   if (splitUserInput.length === 1) {
     const hex = splitUserInput[0];
@@ -141,7 +188,6 @@ export function SelectedHexDetails({
 
     return (
       <p style={{ marginBottom: "0" }}>
-        Lat./Lng.: <tt>{coords}</tt>
         {showCellId ? (
           <>
             <br />
@@ -149,11 +195,15 @@ export function SelectedHexDetails({
           </>
         ) : null}
         {showNavigation ? (
-          <>
-            <br />
+          <details>
+            <summary>Relations</summary>
             Parent:{" "}
             {parent ? (
-              <ClickableH3Index hex={parent} setUserInput={setUserInput} />
+              <ClickableH3Index
+                hex={parent}
+                setUserInput={setUserInput}
+                onHoverCells={onHoverCells}
+              />
             ) : (
               <tt>(none)</tt>
             )}
@@ -163,6 +213,7 @@ export function SelectedHexDetails({
               <ClickableH3IndexList
                 hexes={children}
                 setUserInput={setUserInput}
+                onHoverCells={onHoverCells}
               />
             ) : (
               <tt>(none)</tt>
@@ -172,15 +223,18 @@ export function SelectedHexDetails({
             <ClickableH3IndexList
               hexes={neighbors}
               setUserInput={setUserInput}
+              onHoverCells={onHoverCells}
             />
             <br />
-          </>
+          </details>
         ) : (
           <></>
         )}
         {showDetails ? (
           <details>
             <summary>Details</summary>
+            Lat./Lng.: <tt>{coords}</tt>
+            <br />
             Resolution: <tt>{res}</tt>
             <br />
             Base cell: <tt>{baseCell}</tt>
@@ -208,6 +262,7 @@ export function SelectedHexDetails({
           hexes={splitUserInput}
           setUserInput={setUserInput}
           showAll={false}
+          onHoverCells={onHoverCells}
         />
       </p>
     );
diff --git a/website/src/components/explorer/index.tsx b/website/src/components/explorer/index.tsx
index 49c75d04c8..a0fb377a20 100644
--- a/website/src/components/explorer/index.tsx
+++ b/website/src/components/explorer/index.tsx
@@ -1,6 +1,6 @@
 // Contains code adapted from https://observablehq.com/@nrabinowitz/h3-index-inspector under the ISC license
 
-import React, { useCallback, useMemo, ReactNode } from "react";
+import React, { useCallback, useMemo, ReactNode, useState } from "react";
 import { isValidCell, latLngToCell, getResolution } from "h3-js";
 import {
   Banner,
@@ -15,6 +15,7 @@ import { WhereAmIButton } from "./where-am-i";
 import geojson2h3 from "geojson2h3";
 import wkt from "wkt";
 import { Feature, MultiPolygon, Polygon } from "geojson";
+import { useColorMode } from "@docusaurus/theme-common";
 
 const CELL_COUNT_THRESHOLD = 50;
 const CELL_COUNT_UPPER_THRESHOLD = 5000;
@@ -217,6 +218,8 @@ function zoomToResolution(zoom: number) {
 export default function HomeExporer({ children }: { children: ReactNode }) {
   const [userInput, setUserInput] = useQueryState("hex", "");
   const [userResolution, setUserResolution] = useQueryState<number>("res", -1);
+  const [previewCells, setPreviewCells] = useState<string[]>([]);
+  const { colorMode } = useColorMode();
 
   const { splitUserInput, showCellId, inputGeoJson, showResolutionInput } =
     useMemo(
@@ -285,10 +288,11 @@ export default function HomeExporer({ children }: { children: ReactNode }) {
               userValidHex={userValidHex}
               objectOnClick={objectOnClick}
               coordinateOnClick={coordinateOnClick}
+              previewCells={previewCells}
             />
           </DemoContainer>
         </HeroExampleContainer>
-        <BannerContainer>
+        <BannerContainer colorMode={colorMode}>
           <textarea
             value={userInput}
             onChange={(e) => {
@@ -309,8 +313,9 @@ export default function HomeExporer({ children }: { children: ReactNode }) {
               splitUserInput={splitUserInput}
               showCellId={showCellId}
               setUserInput={setUserInput}
-              showNavigation={false}
+              showNavigation={true}
               showDetails={true}
+              onHoverCells={setPreviewCells}
             />
           ) : null}
           {showResolutionInput !== null ? (
diff --git a/website/src/components/explorer/map.jsx b/website/src/components/explorer/map.jsx
index f2580b72d6..aa6aa0fbe2 100644
--- a/website/src/components/explorer/map.jsx
+++ b/website/src/components/explorer/map.jsx
@@ -17,6 +17,7 @@ import { MOBILE_CUTOFF_WINDOW_WIDTH } from "../common";
 import { useHex } from "./useHex";
 import { GeoJsonLayer } from "deck.gl";
 import { PathStyleExtension } from "@deck.gl/extensions";
+import { useColorMode } from "@docusaurus/theme-common";
 
 const INITIAL_VIEW_STATE = {
   longitude: -74.012,
@@ -40,6 +41,7 @@ const MAP_STYLE = "mapbox://styles/mapbox/light-v11";
  * @param {string} [opts.mapStyle]
  * @param {({ hex: string }) => void | undefined} [opts.objectOnClick]
  * @param {({ coordinate: [number, number], zoom: number, resolution: number }) => void | undefined} [opts.coordinateOnClick]
+ * @param {string[] | undefined} [opts.previewCells]
  * @returns
  */
 export function ExplorerMap(opts) {
@@ -51,6 +53,7 @@ export function ExplorerMap(opts) {
     mapStyle = MAP_STYLE,
     objectOnClick = undefined,
     coordinateOnClick = undefined,
+    previewCells = undefined,
   } = opts;
   const context = useDocusaurusContext();
   const [currentInitialViewState, setCurrentInitialViewState] =
@@ -58,6 +61,7 @@ export function ExplorerMap(opts) {
   const [deckLoaded, setDeckLoaded] = useState(false);
   const deckRef = useRef();
   const [windowWidth, setWindowWidth] = useState(null);
+  const { colorMode } = useColorMode();
 
   useEffect(() => {
     const updateWidth = () => {
@@ -160,6 +164,30 @@ export function ExplorerMap(opts) {
         }),
       ]
     : [];
+  const inputPreviewLayers = previewCells
+    ? [
+        new H3HexagonLayer({
+          id: "previewhex",
+          data: previewCells.map((hex) => ({ hex })),
+          getHexagon: (d) => d.hex,
+          extruded: false,
+          filled: false,
+          stroked: true,
+          getLineColor: [120, 120, 120],
+          getLineWidth: 2,
+          lineWidthUnits: "pixels",
+          lineWidthMinPixels: 1,
+          highPrecision: true,
+          pickable: false,
+          filled: false,
+          // @ts-expect-error
+          getDashArray: [5, 5],
+          dashJustified: true,
+          dashGapPickable: true,
+          extensions: [new PathStyleExtension({ dash: true })],
+        }),
+      ]
+    : [];
 
   const layers = userValidHex
     ? [
@@ -179,17 +207,31 @@ export function ExplorerMap(opts) {
           filled: true,
           getFillColor: [0, 0, 0, 30],
         }),
+        ...inputPreviewLayers,
         ...inputGeoJsonLayers,
       ]
     : backgroundHexLayers;
 
-  const getTooltip = useCallback(({ object }) => {
-    if (object && object.hex) {
-      return {
-        html: `<tt>${object.hex}</tt>`,
-      };
-    }
-  }, []);
+  const getTooltip = useCallback(
+    ({ object }) => {
+      if (object && object.hex) {
+        return {
+          html: `<tt>${object.hex}</tt>`,
+          style:
+            colorMode === "dark"
+              ? {
+                  backgroundColor: "black",
+                  color: "white",
+                }
+              : {
+                  backgroundColor: "white",
+                  color: "black",
+                },
+        };
+      }
+    },
+    [colorMode],
+  );
 
   const getCursor = useCallback(({ isHovering }) => {
     if (isHovering) {
diff --git a/website/src/components/styled.js b/website/src/components/styled.js
index db3d920135..7480c7abb0 100644
--- a/website/src/components/styled.js
+++ b/website/src/components/styled.js
@@ -10,13 +10,13 @@ export const DemoContainer = styled.div`
   .deck-tooltip {
     position: absolute;
     padding: 4px 12px;
-    background: rgba(0, 0, 0, 0.8);
-    color: var(--ifm-color-white);
+    border-radius: 4px;
     max-width: 300px;
     font-size: 12px;
     z-index: 9;
     pointer-events: none;
     white-space: nowrap;
+    cursor: pointer;
   }
 `;
 
@@ -50,9 +50,12 @@ export const BannerContainer = styled(Container)`
   z-index: 0;
   width: auto;
   max-width: 20em;
-  background-color: white;
+  background-color: ${({ colorMode }) =>
+    colorMode === "dark" ? "black" : "white"};
+  color: ${({ colorMode }) => (colorMode === "dark" ? "white" : "black")};
   border-radius: 20px;
   padding: 1rem;
+  font-size: 12px;
 `;
 
 export const HeroExampleContainer = styled.div`

From 5e6e9f194489490046a1cf40b9644f25cf425a14 Mon Sep 17 00:00:00 2001
From: Isaac Brodsky <isaac@isaacbrodsky.com>
Date: Mon, 29 Jun 2026 19:06:24 -0700
Subject: [PATCH 2/7] map style theming

---
 website/src/components/explorer/map.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/website/src/components/explorer/map.jsx b/website/src/components/explorer/map.jsx
index aa6aa0fbe2..f18a8e9269 100644
--- a/website/src/components/explorer/map.jsx
+++ b/website/src/components/explorer/map.jsx
@@ -29,7 +29,8 @@ const INITIAL_VIEW_STATE = {
   minZoom: 0,
 };
 
-const MAP_STYLE = "mapbox://styles/mapbox/light-v11";
+const LIGHT_MAP_STYLE = "mapbox://styles/mapbox/light-v11";
+const DARK_MAP_STYLE = "mapbox://styles/mapbox/dark-v11";
 
 /**
  *
@@ -38,7 +39,6 @@ const MAP_STYLE = "mapbox://styles/mapbox/light-v11";
  * @param {object | null} opts.inputGeoJson
  * @param {boolean} opts.userValidHex
  * @param {Object} [opts.initialViewState]
- * @param {string} [opts.mapStyle]
  * @param {({ hex: string }) => void | undefined} [opts.objectOnClick]
  * @param {({ coordinate: [number, number], zoom: number, resolution: number }) => void | undefined} [opts.coordinateOnClick]
  * @param {string[] | undefined} [opts.previewCells]
@@ -50,7 +50,6 @@ export function ExplorerMap(opts) {
     inputGeoJson = null,
     userValidHex = false,
     initialViewState = INITIAL_VIEW_STATE,
-    mapStyle = MAP_STYLE,
     objectOnClick = undefined,
     coordinateOnClick = undefined,
     previewCells = undefined,
@@ -148,8 +147,9 @@ export function ExplorerMap(opts) {
         new GeoJsonLayer({
           id: "userinput",
           data: inputGeoJson,
-          getFillColor: [0, 0, 0],
-          getLineColor: [100, 100, 100],
+          getFillColor: colorMode === "dark" ? [250, 250, 250] : [0, 0, 0],
+          getLineColor:
+            colorMode === "dark" ? [220, 220, 220] : [100, 100, 100],
           getLineWidth: 1,
           lineWidthMinPixels: 1,
           lineWidthUnits: "pixels",
@@ -173,7 +173,8 @@ export function ExplorerMap(opts) {
           extruded: false,
           filled: false,
           stroked: true,
-          getLineColor: [120, 120, 120],
+          getLineColor:
+            colorMode === "dark" ? [140, 140, 140] : [120, 120, 120],
           getLineWidth: 2,
           lineWidthUnits: "pixels",
           lineWidthMinPixels: 1,
@@ -198,14 +199,15 @@ export function ExplorerMap(opts) {
           extruded: false,
           filled: false,
           stroked: true,
-          getLineColor: [0, 0, 0],
+          getLineColor: colorMode === "dark" ? [255, 255, 255] : [0, 0, 0],
           getLineWidth: 2,
           lineWidthUnits: "pixels",
           lineWidthMinPixels: 2,
           highPrecision: true,
           pickable: true,
           filled: true,
-          getFillColor: [0, 0, 0, 30],
+          getFillColor:
+            colorMode === "dark" ? [255, 255, 255, 30] : [0, 0, 0, 30],
         }),
         ...inputPreviewLayers,
         ...inputGeoJsonLayers,
@@ -284,7 +286,7 @@ export function ExplorerMap(opts) {
         interactive={false}
         projection={"mercator"}
         mapboxAccessToken={context.siteConfig.customFields.mapboxAccessToken}
-        mapStyle={mapStyle}
+        mapStyle={colorMode === "dark" ? DARK_MAP_STYLE : LIGHT_MAP_STYLE}
       />
     </DeckGL>
   );

From e564c20d518d7c903afd201ccada2fca486d19e8 Mon Sep 17 00:00:00 2001
From: Isaac Brodsky <isaac@isaacbrodsky.com>
Date: Mon, 29 Jun 2026 19:07:01 -0700
Subject: [PATCH 3/7] remove unused change

---
 website/src/components/styled.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/src/components/styled.js b/website/src/components/styled.js
index 7480c7abb0..f0ecff96ea 100644
--- a/website/src/components/styled.js
+++ b/website/src/components/styled.js
@@ -16,7 +16,6 @@ export const DemoContainer = styled.div`
     z-index: 9;
     pointer-events: none;
     white-space: nowrap;
-    cursor: pointer;
   }
 `;
 

From 4d6a0cdc67c9c719605c7797c3c5fa42fd0f7648 Mon Sep 17 00:00:00 2001
From: Isaac Brodsky <isaac@isaacbrodsky.com>
Date: Tue, 30 Jun 2026 09:06:00 -0700
Subject: [PATCH 4/7] fix bad `string` reference

---
 website/src/components/explorer/map.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/explorer/map.jsx b/website/src/components/explorer/map.jsx
index f18a8e9269..0ae7e57f5b 100644
--- a/website/src/components/explorer/map.jsx
+++ b/website/src/components/explorer/map.jsx
@@ -249,7 +249,7 @@ export function ExplorerMap(opts) {
         if (objectOnClick) {
           objectOnClick({ hex: object.hex });
         }
-      } else if (object && object instanceof string) {
+      } else if (object && typeof object === "string") {
         if (objectOnClick) {
           objectOnClick({ hex: object });
         }

From 126bf90bf8e93feb59321e2373683e1eecfb2595 Mon Sep 17 00:00:00 2001
From: Isaac Brodsky <isaac@isaacbrodsky.com>
Date: Tue, 30 Jun 2026 09:16:49 -0700
Subject: [PATCH 5/7] fix react deps

---
 website/src/components/explorer/details.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/components/explorer/details.jsx b/website/src/components/explorer/details.jsx
index a05ff4bb83..3be8dd26c7 100644
--- a/website/src/components/explorer/details.jsx
+++ b/website/src/components/explorer/details.jsx
@@ -74,7 +74,7 @@ function ClickableH3Index({ hex, setUserInput, onHoverCells }) {
     if (onHoverCells) {
       onHoverCells([hex]);
     }
-  }, [onHoverCells]);
+  }, [hex, onHoverCells]);
   const onMouseLeave = useCallback(() => {
     if (onHoverCells) {
       onHoverCells([]);
@@ -107,7 +107,7 @@ function ClickableH3IndexList({
     if (onHoverCells) {
       onHoverCells(hexes);
     }
-  }, [onHoverCells]);
+  }, [hexes, onHoverCells]);
   const showAllOnMouseLeave = useCallback(() => {
     if (onHoverCells) {
       onHoverCells([]);

From 5a222b2fe9716df587446e62f3e06c7c3489d1f7 Mon Sep 17 00:00:00 2001
From: Isaac Brodsky <isaac@isaacbrodsky.com>
Date: Tue, 30 Jun 2026 09:45:47 -0700
Subject: [PATCH 6/7] remove unused import

---
 website/src/components/explorer/details.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/explorer/details.jsx b/website/src/components/explorer/details.jsx
index 3be8dd26c7..fe9737ff69 100644
--- a/website/src/components/explorer/details.jsx
+++ b/website/src/components/explorer/details.jsx
@@ -1,6 +1,6 @@
 // Contains code adapted from https://observablehq.com/@nrabinowitz/h3-index-inspector under the ISC license
 
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
 import {
   cellToBoundary,
   cellToParent,

From 92fbadd2dd5fd87b63d8f930e0f8ddacefd3c5f7 Mon Sep 17 00:00:00 2001
From: Isaac Brodsky <isaac@isaacbrodsky.com>
Date: Wed, 1 Jul 2026 10:41:22 -0700
Subject: [PATCH 7/7] label the resolution input

---
 website/src/components/explorer/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/website/src/components/explorer/index.tsx b/website/src/components/explorer/index.tsx
index a0fb377a20..b71bfc7e2d 100644
--- a/website/src/components/explorer/index.tsx
+++ b/website/src/components/explorer/index.tsx
@@ -1,6 +1,6 @@
 // Contains code adapted from https://observablehq.com/@nrabinowitz/h3-index-inspector under the ISC license
 
-import React, { useCallback, useMemo, ReactNode, useState } from "react";
+import React, { useCallback, useMemo, ReactNode, useState, useId } from "react";
 import { isValidCell, latLngToCell, getResolution } from "h3-js";
 import {
   Banner,
@@ -220,6 +220,7 @@ export default function HomeExporer({ children }: { children: ReactNode }) {
   const [userResolution, setUserResolution] = useQueryState<number>("res", -1);
   const [previewCells, setPreviewCells] = useState<string[]>([]);
   const { colorMode } = useColorMode();
+  const resolutionInputId = useId();
 
   const { splitUserInput, showCellId, inputGeoJson, showResolutionInput } =
     useMemo(
@@ -320,12 +321,14 @@ export default function HomeExporer({ children }: { children: ReactNode }) {
           ) : null}
           {showResolutionInput !== null ? (
             <div>
+              <label htmlFor={resolutionInputId}>Resolution:</label>
               <input
+                id={resolutionInputId}
                 type="number"
                 min="0"
                 max="15"
-                placeholder="Resolution"
-                value={`${userResolution}`}
+                placeholder="Auto"
+                value={`${userResolution !== -1 ? userResolution : ""}`}
                 onChange={(e) => {
                   try {
                     const res = parseInt(e.target.value, 10);
@@ -337,6 +340,9 @@ export default function HomeExporer({ children }: { children: ReactNode }) {
                     console.error(err);
                   }
                 }}
+                style={{
+                  marginLeft: "0.25em",
+                }}
               />
             </div>
           ) : null}