Enable multi-selection and enhanced inspector panel UX

site/src/App.jsx

@@ -7,16 +7,19 @@ import { useState, useEffect, useRef } from "react";
 import Tour from "./Tour";
 import StartupBox from "./StartupBox";
 import { ThemeProvider } from "@mui/material";
+import { useNavigatorState } from "./navigator/Navigator";
 
 function App() {
   const [modeName, setModeName] = useState(getTheme());
   const [run, setRun] = useState(false);
   const [tour, setTour] = useState(!(localStorage.getItem("tour") === "true"));
   const [open, setOpen] = useState(tour);
-  const [navigatorOpen, setNavigatorOpen] = useState(!open);
-  const [mapEntity, setMapEntity] = useState({});
+  const [navigatorOpen, setNavigatorOpen] = useNavigatorState(open);
+
+  const [features, setFeatures] = useState([]);
   const [zoom, setZoom] = useState(0);
   const themeRef = useRef(null);
+  const [activeFeature, setActiveFeature] = useState(null);
 
   const startTour = () => {
     setOpen(false);
@@ -46,7 +49,7 @@ function App() {
         <Tour
           run={run}
           modeName={modeName}
-          setMapEntity={setMapEntity}
+          setFeatures={setFeatures}
           setNavigatorOpen={setNavigatorOpen}
           themeRef={themeRef}
         />
@@ -59,12 +62,14 @@ function App() {
           />
           <Map
             mode={modeName}
-            mapEntity={mapEntity}
-            setMapEntity={setMapEntity}
+            features={features}
+            setFeatures={setFeatures}
             setZoom={setZoom}
             navigatorOpen={navigatorOpen}
             setNavigatorOpen={setNavigatorOpen}
             themeRef={themeRef}
+            setActiveFeature={setActiveFeature}
+            activeFeature={activeFeature}
           />
         </MapProvider>
       </ThemeProvider>

site/src/CustomControls.css

@@ -6,12 +6,17 @@
   color: black;
   margin: 4px;
   outline: none;
+  pointer-events: none;
 
   .title {
     padding: 2px 0;
   }
 }
 
+.custom-controls * {
+  pointer-events: auto;
+}
+
 div.bug-nub {
   float: right;
   margin-top: 146px;

site/src/FeatureSelector.css

@@ -0,0 +1,66 @@
+.popup-content {
+  padding: 2px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.theme-dark .maplibregl-popup-content {
+  background-color: #121212;
+  color: #fff;
+}
+
+.theme-dark .maplibregl-popup-close-button {
+  color: #fff;
+}
+
+.feature-selector-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.theme-light .feature-item.active {
+  background-color: #eee;
+}
+
+.theme-dark .feature-item.active {
+  background-color: #333;
+}
+
+.feature-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+}
+
+.theme-light .feature-item {
+  border-bottom: 1px solid #eee;
+}
+
+.theme-dark .feature-item {
+  border-bottom: 1px solid #333;
+}
+
+.theme-light .feature-item:hover {
+  background-color: #f5f5f5;
+}
+
+.theme-dark .feature-item:hover {
+  background-color: #2a2a2a;
+}
+
+.feature-item:last-child {
+  border-bottom: none;
+}
+
+.theme-light .feature-item span {
+  font-size: 14px;
+  color: #333;
+}
+
+.theme-dark .feature-item span {
+  font-size: 14px;
+  color: #eee;
+}

site/src/FeatureSelector.jsx

@@ -0,0 +1,66 @@
+import { Popup } from "react-map-gl/maplibre";
+import PropTypes from "prop-types";
+import ThemeIcon from "./inspector_panel/ThemeIcon";
+import FeatureTitle from "./FeatureTitle";
+import "./FeatureSelector.css";
+
+export default function FeaturePopup({
+  coordinates,
+  features,
+  onClose,
+  activeFeature,
+  setActiveFeature,
+}) {
+  if (!coordinates || features.length < 2) return null;
+  return (
+    <Popup
+      longitude={coordinates.longitude}
+      latitude={coordinates.latitude}
+      onClose={onClose}
+      closeButton={true}
+      closeOnClick={false}
+    >
+      <div className="popup-content">
+        <div className="feature-selector-title">Select a feature</div>
+        {features.map((feature, index) => {
+          const entity = {
+            theme: feature.source,
+            type: feature.sourceLayer,
+            ...feature.properties,
+          };
+          return (
+            <div
+              key={index}
+              className={`feature-item${
+                feature === activeFeature ? " active" : ""
+              }`}
+              onClick={() => {
+                if (feature === activeFeature) {
+                  setActiveFeature(null);
+                } else {
+                  setActiveFeature(feature);
+                }
+              }}
+            >
+              <ThemeIcon theme={entity.theme} />
+              <span>
+                <FeatureTitle entity={entity} />
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </Popup>
+  );
+}
+
+FeaturePopup.propTypes = {
+  coordinates: PropTypes.shape({
+    longitude: PropTypes.number,
+    latitude: PropTypes.number,
+  }),
+  features: PropTypes.array.isRequired,
+  onClose: PropTypes.func.isRequired,
+  activeFeature: PropTypes.object,
+  setActiveFeature: PropTypes.func.isRequired,
+};

site/src/FeatureTitle.jsx

@@ -0,0 +1,37 @@
+import PropTypes from "prop-types";
+
+export default function FeatureTitle({ entity }) {
+  if (entity.theme === "addresses") {
+    const addressParts = [entity.number, entity.unit, entity.street].filter(
+      Boolean
+    );
+
+    return addressParts.join(" ");
+  }
+
+  return (
+    entity["@name"] ||
+    (entity["names"] && JSON.parse(entity["names"]).primary) ||
+    `${entity["type"]}${
+      entity["subtype"] && entity["subtype"] !== entity["type"]
+        ? ` (${entity["subtype"]})`
+        : ""
+    }`
+  );
+}
+
+FeatureTitle.propTypes = {
+  entity: PropTypes.shape({
+    theme: PropTypes.string,
+    "@name": PropTypes.string,
+    names: PropTypes.string,
+    type: PropTypes.string,
+    subtype: PropTypes.string,
+    country: PropTypes.string,
+    postcode: PropTypes.string,
+    street: PropTypes.string,
+    number: PropTypes.string,
+    unit: PropTypes.string,
+    postal_city: PropTypes.string,
+  }).isRequired,
+};