stuff

2026-07-01 15:20:58 +02:00 · 2025-07-03 00:00:00 +00:00
parent a72f201cca
commit c3379b0bee
6 changed files with 399 additions and 45 deletions
@@ -8,7 +8,9 @@ export async function GET(req: Request) {
    const maxLat = searchParams.get("maxLat");
    const minLng = searchParams.get("minLng");
    const maxLng = searchParams.get("maxLng");
-    const positions = await getNodePositions({ minLat, maxLat, minLng, maxLng });
+    const nodeTypes = searchParams.getAll("nodeTypes");
+    const lastSeen = searchParams.get("lastSeen");
+    const positions = await getNodePositions({ minLat, maxLat, minLng, maxLng, nodeTypes, lastSeen });
    return NextResponse.json(positions);
  } catch (error) {
    return NextResponse.json({ error: "Failed to fetch node positions" }, { status: 500 });
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Header from "../components/Header";
+import { ConfigProvider } from "../components/ConfigContext";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -30,8 +31,10 @@ export default function RootLayout({
        style={{ '--header-height': '64px' } as React.CSSProperties}
      >
        <div className="flex flex-col min-h-screen w-full">
-          <Header />
-          <main className="flex-1 flex flex-col w-full">{children}</main>
+          <ConfigProvider>
+            <Header />
+            <main className="flex-1 flex flex-col w-full">{children}</main>
+          </ConfigProvider>
        </div>
      </body>
    </html>
@@ -1,12 +1,187 @@
 "use client";
-import React, { ReactNode } from "react";
+import React, { createContext, useContext, useState, useEffect, useRef, useLayoutEffect, ReactNode } from "react";
+
+// Config shape
+type NodeType = "meshcore" | "meshtastic";
+export type Config = {
+  nodeTypes: NodeType[]; // which node types to show
+  lastSeen: number | null; // seconds, or null for forever
+  tileLayer: string; // add tileLayer selection
+  clustering?: boolean; // add clustering toggle
+};
+
+const TILE_LAYERS = [
+  { key: "openstreetmap", label: "OpenStreetMap" },
+  { key: "opentopomap", label: "OpenTopoMap" },
+  { key: "esri", label: "Esri World Imagery" },
+];
+
+const DEFAULT_CONFIG: Config = {
+  nodeTypes: ["meshcore", "meshtastic"],
+  lastSeen: 86400, // 24h in seconds
+  tileLayer: "openstreetmap", // default
+  clustering: true, // default to clustering enabled
+};
+
+const LAST_SEEN_OPTIONS = [
+  { value: 1800, label: "30m" },
+  { value: 3600, label: "1h" },
+  { value: 7200, label: "2h" },
+  { value: 14400, label: "4h" },
+  { value: 28800, label: "8h" },
+  { value: 86400, label: "24h" },
+  { value: 604800, label: "1w" },
+  { value: null, label: "Forever (all time)" },
+];
+
+const ConfigContext = createContext<any>(null);

-// Placeholder ConfigProvider that just renders children
 export function ConfigProvider({ children }: { children: ReactNode }) {
-  return <>{children}</>;
+  const [config, setConfig] = useState<Config>(DEFAULT_CONFIG);
+  const [open, setOpen] = useState(false);
+  const configButtonRef = useRef<HTMLElement | null>(null);
+  const firstRender = useRef(true);
+
+  // Load from localStorage
+  useEffect(() => {
+    const stored = localStorage.getItem("meshExplorerConfig");
+    if (stored) {
+      try {
+        setConfig({ ...DEFAULT_CONFIG, ...JSON.parse(stored) });
+      } catch {}
+    }
+  }, []);
+
+  // Save to localStorage
+  useEffect(() => {
+    if (!firstRender.current) {
+      localStorage.setItem("meshExplorerConfig", JSON.stringify(config));
+    } else {
+      firstRender.current = false;
+    }
+  }, [config]);
+
+  // Expose openConfig for header button
+  const openConfig = () => setOpen(true);
+  const closeConfig = () => setOpen(false);
+
+  return (
+    <ConfigContext.Provider value={{ config, setConfig, openConfig, configButtonRef }}>
+      {children}
+      {open && <ConfigPopover config={config} setConfig={setConfig} onClose={closeConfig} anchorRef={configButtonRef} />}
+    </ConfigContext.Provider>
+  );
 }

-// Dummy useConfig hook
 export function useConfig() {
-  return {};
+  return useContext(ConfigContext);
+}
+
+function ConfigPopover({ config, setConfig, onClose, anchorRef }: { config: Config, setConfig: (c: Config) => void, onClose: () => void, anchorRef: React.RefObject<HTMLElement | null> }) {
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Click outside to close
+  useEffect(() => {
+    function handle(e: MouseEvent) {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(e.target as Node) &&
+        anchorRef.current &&
+        !anchorRef.current.contains(e.target as Node)
+      ) {
+        onClose();
+      }
+    }
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [onClose, anchorRef]);
+
+  // Use fixed positioning and CSS to keep the popover on screen
+  return (
+    <div
+      ref={popoverRef}
+      className="z-[2000] bg-white dark:bg-neutral-900 rounded-lg shadow-lg p-6 min-w-[320px] max-w-[calc(100vw-16px)] max-h-[calc(100vh-16px)] overflow-auto border border-gray-200 dark:border-neutral-700 fixed top-16 right-4 flex flex-col"
+      style={{ boxSizing: 'border-box' }}
+    >
+      <button
+        className="absolute top-2 right-2 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
+        onClick={onClose}
+        aria-label="Close config"
+      >
+        <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+      </button>
+      <h2 className="text-lg font-semibold mb-4">Map Filters</h2>
+      <div className="mb-4">
+        <div className="font-medium mb-2">Node Types</div>
+        <label className="flex items-center gap-2 mb-1">
+          <input
+            type="checkbox"
+            checked={config.nodeTypes.includes("meshcore")}
+            onChange={e => {
+              setConfig({
+                ...config,
+                nodeTypes: e.target.checked
+                  ? Array.from(new Set([...config.nodeTypes, "meshcore"]))
+                  : config.nodeTypes.filter(t => t !== "meshcore"),
+              });
+            }}
+          />
+          <span className="text-blue-700 dark:text-blue-400">Meshcore</span>
+        </label>
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={config.nodeTypes.includes("meshtastic")}
+            onChange={e => {
+              setConfig({
+                ...config,
+                nodeTypes: e.target.checked
+                  ? Array.from(new Set([...config.nodeTypes, "meshtastic"]))
+                  : config.nodeTypes.filter(t => t !== "meshtastic"),
+              });
+            }}
+          />
+          <span className="text-green-600 dark:text-green-400">Meshtastic</span>
+        </label>
+      </div>
+      <div className="mb-2">
+        <div className="font-medium mb-2">Last Seen</div>
+        <select
+          className="w-full p-2 border rounded"
+          value={config.lastSeen === null ? '' : config.lastSeen}
+          onChange={e => {
+            setConfig({ ...config, lastSeen: e.target.value === '' ? null : Number(e.target.value) });
+          }}
+        >
+          {LAST_SEEN_OPTIONS.map(opt => (
+            <option key={String(opt.value)} value={opt.value === null ? '' : opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="mb-2">
+        <div className="font-medium mb-2">Tile Layer</div>
+        <select
+          className="w-full p-2 border rounded"
+          value={config.tileLayer}
+          onChange={e => setConfig({ ...config, tileLayer: e.target.value })}
+        >
+          {TILE_LAYERS.map(opt => (
+            <option key={opt.key} value={opt.key}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
+      <div className="mb-2">
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={config.clustering !== false}
+            onChange={e => setConfig({ ...config, clustering: e.target.checked })}
+          />
+          <span>Enable marker clustering</span>
+        </label>
+      </div>
+    </div>
+  );
 } 
@@ -9,7 +9,7 @@ interface HeaderProps {
 }

 export default function Header({ configButtonRef }: HeaderProps) {
-  const { openConfig } = useConfig();
+  const { openConfig, configButtonRef: contextButtonRef } = useConfig();
  return (
    <header className="w-full flex items-center justify-between px-6 py-3 bg-white dark:bg-neutral-900 shadow z-20">
      <nav className="flex gap-6 items-center">
@@ -18,7 +18,7 @@ export default function Header({ configButtonRef }: HeaderProps) {
        <Link href="/docs">Docs</Link>
      </nav>
      <button
-        ref={configButtonRef}
+        ref={configButtonRef || contextButtonRef}
        onClick={openConfig}
        className="flex items-center gap-2 px-3 py-2 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800"
        aria-label="Open configuration menu"
@@ -7,6 +7,7 @@ import L from "leaflet";
 import 'leaflet.markercluster/dist/leaflet.markercluster.js';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+import { useConfig } from "./ConfigContext";

 const DEFAULT = {
  lat: 47.6062, // Seattle
@@ -27,37 +28,148 @@ type NodePosition = {
 type ClusteredMarkersProps = { nodes: NodePosition[] };
 function ClusteredMarkers({ nodes }: ClusteredMarkersProps) {
  const map = useMap();
+  const { config } = useConfig ? useConfig() : { config: undefined };
  useEffect(() => {
    if (!map) return;
-    const markers = (L as any).markerClusterGroup();
-    nodes.forEach((node: NodePosition) => {
-      const markerClass =
-        node.type === "meshtastic"
-          ? "custom-node-marker custom-node-marker--green"
-          : node.type === "meshcore"
-          ? "custom-node-marker custom-node-marker--blue custom-node-marker--top"
-          : "custom-node-marker";
-      const label = node.short_name ? `<div class='custom-node-label'>${node.short_name}</div>` : '';
-      const icon = L.divIcon({
-        className: 'custom-node-marker-container',
-        iconSize: [16, 32],
-        iconAnchor: [8, 8],
-        html: `${label}<div class='${markerClass}'></div>`,
-      });
-      const marker = L.marker([node.latitude, node.longitude], { icon });
-      let popupHtml = `<div><div><b>ID:</b> ${node.from_node_id}</div><div><b>Lat:</b> ${node.latitude}</div><div><b>Lng:</b> ${node.longitude}</div>`;
-      if (node.altitude !== undefined) popupHtml += `<div><b>Alt:</b> ${node.altitude}</div>`;
-      if (node.last_seen) popupHtml += `<div><b>Last seen:</b> ${node.last_seen}</div>`;
-      if (node.type) popupHtml += `<div><b>Type:</b> ${node.type}</div>`;
-      popupHtml += `</div>`;
-      marker.bindPopup(popupHtml);
-      markers.addLayer(marker);
+    // Remove any previous layers
+    map.eachLayer((layer: any) => {
+      if (layer && layer._isClusterLayer) {
+        map.removeLayer(layer);
+      }
    });
-    map.addLayer(markers);
-    return () => {
-      map.removeLayer(markers);
-    };
-  }, [map, nodes]);
+    if (config?.clustering === false) {
+      // Add markers individually
+      const markerLayers: any[] = [];
+      nodes.forEach((node: NodePosition) => {
+        const markerClass =
+          node.type === "meshtastic"
+            ? "custom-node-marker custom-node-marker--green"
+            : node.type === "meshcore"
+            ? "custom-node-marker custom-node-marker--blue custom-node-marker--top"
+            : "custom-node-marker";
+        const label = node.short_name ? `<div class='custom-node-label'>${node.short_name}</div>` : '';
+        const icon = L.divIcon({
+          className: 'custom-node-marker-container',
+          iconSize: [16, 32],
+          iconAnchor: [8, 8],
+          html: `${label}<div class='${markerClass}'></div>`,
+        });
+        const marker = L.marker([node.latitude, node.longitude], { icon });
+        (marker as any).options.nodeData = node;
+        let popupHtml = `<div><div><b>ID:</b> ${node.from_node_id}</div><div><b>Lat:</b> ${node.latitude}</div><div><b>Lng:</b> ${node.longitude}</div>`;
+        if (node.altitude !== undefined) popupHtml += `<div><b>Alt:</b> ${node.altitude}</div>`;
+        if (node.last_seen) popupHtml += `<div><b>Last seen:</b> ${node.last_seen}</div>`;
+        if (node.type) popupHtml += `<div><b>Type:</b> ${node.type}</div>`;
+        popupHtml += `</div>`;
+        marker.bindPopup(popupHtml);
+        marker.addTo(map);
+        markerLayers.push(marker);
+      });
+      // Mark for cleanup
+      markerLayers.forEach(layer => { layer._isClusterLayer = true; });
+      return () => {
+        markerLayers.forEach(layer => map.removeLayer(layer));
+      };
+    } else {
+      // Clustered mode (existing logic)
+      const iconCreateFunction = (cluster: any) => {
+        const children = cluster.getAllChildMarkers();
+        let meshtasticCount = 0;
+        let meshcoreCount = 0;
+        children.forEach((marker: any) => {
+          const node = marker.options && marker.options.nodeData;
+          if (node?.type === 'meshtastic') meshtasticCount++;
+          else if (node?.type === 'meshcore') meshcoreCount++;
+        });
+        const total = meshtasticCount + meshcoreCount;
+        const percentMeshcore = total ? meshcoreCount / total : 0;
+        const percentMeshtastic = total ? meshtasticCount / total : 0;
+        // Pie chart SVG
+        const r = 18;
+        const c = 2 * Math.PI * r;
+        const meshcoreArc = percentMeshcore * c;
+        const meshtasticArc = percentMeshtastic * c;
+        return L.divIcon({
+          html: `
+            <div style="position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent;">
+              <svg width="40" height="40" viewBox="0 0 40 40" style="border-radius: 50%; background: transparent;">
+                <circle
+                  r="18"
+                  cx="20"
+                  cy="20"
+                  fill="#fff"
+                  stroke="#fff"
+                  stroke-width="4"
+                  opacity="0.7"
+                />
+                <circle
+                  r="18"
+                  cx="20"
+                  cy="20"
+                  fill="transparent"
+                  stroke="#2563eb"
+                  stroke-width="36"
+                  stroke-dasharray="${meshcoreArc} ${c - meshcoreArc}"
+                  stroke-dashoffset="0"
+                  transform="rotate(-90 20 20)"
+                  opacity="0.7"
+                />
+                <circle
+                  r="18"
+                  cx="20"
+                  cy="20"
+                  fill="transparent"
+                  stroke="#22c55e"
+                  stroke-width="36"
+                  stroke-dasharray="${meshtasticArc} ${c - meshtasticArc}"
+                  stroke-dashoffset="-${meshcoreArc}"
+                  transform="rotate(-90 20 20)"
+                  opacity="0.7"
+                />
+              </svg>
+              <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #111; font-weight: bold; font-size: 15px; line-height: 1; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff; background: none; opacity: 1; z-index: 200; pointer-events: none;">${total}</span>
+            </div>
+          `,
+          className: 'custom-cluster-icon',
+          iconSize: [40, 40],
+          iconAnchor: [20, 20],
+        });
+      };
+      const markers = (L as any).markerClusterGroup({
+        iconCreateFunction,
+        maxClusterRadius: 40,
+      });
+      nodes.forEach((node: NodePosition) => {
+        const markerClass =
+          node.type === "meshtastic"
+            ? "custom-node-marker custom-node-marker--green"
+            : node.type === "meshcore"
+            ? "custom-node-marker custom-node-marker--blue custom-node-marker--top"
+            : "custom-node-marker";
+        const label = node.short_name ? `<div class='custom-node-label'>${node.short_name}</div>` : '';
+        const icon = L.divIcon({
+          className: 'custom-node-marker-container',
+          iconSize: [16, 32],
+          iconAnchor: [8, 8],
+          html: `${label}<div class='${markerClass}'></div>`,
+        });
+        const marker = L.marker([node.latitude, node.longitude], { icon });
+        (marker as any).options.nodeData = node;
+        let popupHtml = `<div><div><b>ID:</b> ${node.from_node_id}</div><div><b>Lat:</b> ${node.latitude}</div><div><b>Lng:</b> ${node.longitude}</div>`;
+        if (node.altitude !== undefined) popupHtml += `<div><b>Alt:</b> ${node.altitude}</div>`;
+        if (node.last_seen) popupHtml += `<div><b>Last seen:</b> ${node.last_seen}</div>`;
+        if (node.type) popupHtml += `<div><b>Type:</b> ${node.type}</div>`;
+        popupHtml += `</div>`;
+        marker.bindPopup(popupHtml);
+        markers.addLayer(marker);
+      });
+      markers._isClusterLayer = true;
+      map.addLayer(markers);
+      return () => {
+        map.removeLayer(markers);
+      };
+    }
+  }, [map, nodes, config?.clustering]);
  return null;
 }

@@ -67,6 +179,27 @@ export default function MapView() {
  const [loading, setLoading] = useState(false);
  const fetchController = useRef<AbortController | null>(null);
  const lastRequestedBounds = useRef<[[number, number], [number, number]] | null>(null);
+  const { config } = useConfig ? useConfig() : { config: undefined };
+
+  type TileLayerKey = 'openstreetmap' | 'opentopomap' | 'esri';
+  const tileLayerOptions: Record<TileLayerKey, { url: string; attribution: string; maxZoom: number; subdomains?: string[] }> = {
+    openstreetmap: {
+      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      attribution: 'Tiles &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>',
+      maxZoom: 22,
+    },
+    opentopomap: {
+      url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+      attribution: 'Tiles &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      maxZoom: 17,
+    },
+    esri: {
+      url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+      attribution: 'Tiles &copy; <a href="https://developers.arcgis.com/documentation/mapping-apis-and-services/deployment/basemap-attribution/">Esri</a> | Data from <a target="_blank" href="https://meshtastic.org/docs/software/integrations/mqtt/">Meshtastic</a>',
+      maxZoom: 21,
+    },
+  };
+  const selectedTileLayer = tileLayerOptions[(config?.tileLayer as TileLayerKey) || 'openstreetmap'];

  function fetchNodes(bounds?: [[number, number], [number, number]]) {
    if (fetchController.current) {
@@ -75,10 +208,25 @@ export default function MapView() {
    const controller = new AbortController();
    fetchController.current = controller;
    setLoading(true);
-    let url = "/api/node-positions";
+    let url = "/api/map";
+    const params = [];
    if (bounds) {
      const [[minLat, minLng], [maxLat, maxLng]] = bounds;
-      url += `?minLat=${minLat}&maxLat=${maxLat}&minLng=${minLng}&maxLng=${maxLng}`;
+      params.push(`minLat=${minLat}`);
+      params.push(`maxLat=${maxLat}`);
+      params.push(`minLng=${minLng}`);
+      params.push(`maxLng=${maxLng}`);
+    }
+    if (config?.nodeTypes && config.nodeTypes.length > 0) {
+      for (const type of config.nodeTypes) {
+        params.push(`nodeTypes=${encodeURIComponent(type)}`);
+      }
+    }
+    if (config?.lastSeen !== null && config?.lastSeen !== undefined) {
+      params.push(`lastSeen=${config.lastSeen}`);
+    }
+    if (params.length > 0) {
+      url += `?${params.join("&")}`;
    }
    fetch(url, { signal: controller.signal })
      .then((res) => res.json())
@@ -147,19 +295,35 @@ export default function MapView() {
    return null;
  }

+  // Set initial bounds on first render using the map instance
+  function InitialBoundsSetter() {
+    const map = useMap();
+    useEffect(() => {
+      if (!bounds && map) {
+        const b = map.getBounds();
+        setBounds([
+          [b.getSouthWest().lat, b.getSouthWest().lng],
+          [b.getNorthEast().lat, b.getNorthEast().lng],
+        ]);
+      }
+    }, [map]);
+    return null;
+  }
+
  useEffect(() => {
    fetchController.current?.abort(); // abort any in-flight request on effect cleanup
    if (bounds) {
      fetchNodes(bounds);
      lastRequestedBounds.current = bounds;
    } else {
-      fetchNodes();
+      // Don't fetch until bounds is set
+      setNodePositions([]);
      lastRequestedBounds.current = null;
    }
    return () => {
      fetchController.current?.abort();
    };
-  }, [bounds]);
+  }, [bounds, config?.nodeTypes, config?.lastSeen]);

  return (
    <div style={{ width: "100%", height: "100%", position: "relative" }}>
@@ -174,10 +338,13 @@ export default function MapView() {
        style={{ width: "100%", height: "100%", zIndex: 1 }}
        className="bg-gray-200"
      >
+        <InitialBoundsSetter />
        <MapEventCatcher />
        <TileLayer
-          attribution='&copy; OpenStreetMap contributors'
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution={selectedTileLayer.attribution}
+          url={selectedTileLayer.url}
+          maxZoom={selectedTileLayer.maxZoom}
+          {...(selectedTileLayer.subdomains ? { subdomains: selectedTileLayer.subdomains } : {})}
        />
        <ClusteredMarkers nodes={nodePositions} />
      </MapContainer>
@@ -1,7 +1,7 @@
 "use server";
 import { clickhouse } from "./clickhouse";

-export async function getNodePositions({ minLat, maxLat, minLng, maxLng }: { minLat?: string | null, maxLat?: string | null, minLng?: string | null, maxLng?: string | null } = {}) {
+export async function getNodePositions({ minLat, maxLat, minLng, maxLng, nodeTypes, lastSeen }: { minLat?: string | null, maxLat?: string | null, minLng?: string | null, maxLng?: string | null, nodeTypes?: string[], lastSeen?: string | null } = {}) {
    let where = [
      "latitude IS NOT NULL",
      "longitude IS NOT NULL"
@@ -10,6 +10,13 @@ export async function getNodePositions({ minLat, maxLat, minLng, maxLng }: { min
    if (maxLat) where.push(`latitude <= ${maxLat}`);
    if (minLng) where.push(`longitude >= ${minLng}`);
    if (maxLng) where.push(`longitude <= ${maxLng}`);
+    if (nodeTypes && nodeTypes.length > 0) {
+      const types = nodeTypes.map(t => `'${t}'`).join(",");
+      where.push(`type IN (${types})`);
+    }
+    if (lastSeen !== null && lastSeen !== undefined && lastSeen !== "") {
+      where.push(`last_seen >= now() - INTERVAL ${lastSeen} SECOND`);
+    }
    const query = `SELECT node_id, name, short_name, latitude, longitude, last_seen, type FROM unified_latest_nodeinfo WHERE ${where.join(" AND ")}`;
    const rows = await clickhouse.query(query).toPromise();
    return rows as Array<{