feat(dashboard): refine activity telemetry and maps
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { UserMapLocation } from "./user-world-map";
|
||||
|
||||
export function MapViewToggle({ locations, children }: { locations: UserMapLocation[]; children: ReactNode }) {
|
||||
const [view, setView] = useState<"overview" | "interactive">("overview");
|
||||
|
||||
return (
|
||||
<div className="mt-6">
|
||||
<div aria-label="Map view" className="flex flex-wrap gap-2" role="group">
|
||||
<button aria-controls="map-overview-panel" aria-pressed={view === "overview"} className={`border px-4 py-2 font-mono text-[10px] font-bold uppercase ${view === "overview" ? "border-ink bg-ink text-canvas" : "border-line"}`} id="map-overview-tab" onClick={() => setView("overview")} type="button">World overview</button>
|
||||
<button aria-controls="map-interactive-panel" aria-pressed={view === "interactive"} className={`border px-4 py-2 font-mono text-[10px] font-bold uppercase ${view === "interactive" ? "border-ink bg-ink text-canvas" : "border-line"}`} id="map-interactive-tab" onClick={() => setView("interactive")} type="button">Interactive OpenStreetMap</button>
|
||||
</div>
|
||||
<p className="mt-2 max-w-2xl text-[10px] leading-4 text-muted">Selecting the interactive view requests map tiles from OpenStreetMap, which receives your IP address, the portal origin, and the geographic area being viewed.</p>
|
||||
<div aria-labelledby="map-overview-tab" hidden={view !== "overview"} id="map-overview-panel" role="region">{children}</div>
|
||||
<div aria-labelledby="map-interactive-tab" hidden={view !== "interactive"} id="map-interactive-panel" role="region">
|
||||
{view === "interactive" && <InteractiveMap locations={locations} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InteractiveMap({ locations }: { locations: UserMapLocation[] }) {
|
||||
const container = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!container.current) return;
|
||||
let cancelled = false;
|
||||
let cleanup = () => {};
|
||||
|
||||
void import("leaflet").then((leaflet) => {
|
||||
if (cancelled || !container.current) return;
|
||||
const map = leaflet.map(container.current, { minZoom: 1, worldCopyJump: true }).setView([20, 0], 2);
|
||||
leaflet.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
|
||||
maxZoom: 19,
|
||||
referrerPolicy: "strict-origin-when-cross-origin",
|
||||
}).addTo(map);
|
||||
|
||||
const bounds: [number, number][] = [];
|
||||
for (const user of locations) {
|
||||
const marker = leaflet.circleMarker([user.latitude, user.longitude], {
|
||||
radius: 8,
|
||||
color: "#eee8d8",
|
||||
weight: 3,
|
||||
fillColor: "#a32f1b",
|
||||
fillOpacity: 1,
|
||||
}).addTo(map);
|
||||
const tooltip = document.createElement("span");
|
||||
tooltip.textContent = `${user.nickname} · ${user.location}`;
|
||||
marker.bindTooltip(tooltip, { direction: "top" });
|
||||
const userPath = `/admin/users/${user.userId}`;
|
||||
marker.on("click", () => window.location.assign(userPath));
|
||||
const element = marker.getElement();
|
||||
element?.setAttribute("aria-label", `${user.nickname}, ${user.location}`);
|
||||
element?.setAttribute("role", "link");
|
||||
element?.setAttribute("tabindex", "0");
|
||||
element?.addEventListener("focus", () => marker.openTooltip());
|
||||
element?.addEventListener("blur", () => marker.closeTooltip());
|
||||
element?.addEventListener("keydown", (event) => {
|
||||
const keyboardEvent = event as KeyboardEvent;
|
||||
if (keyboardEvent.key === "Enter" || keyboardEvent.key === " ") {
|
||||
keyboardEvent.preventDefault();
|
||||
window.location.assign(userPath);
|
||||
}
|
||||
});
|
||||
bounds.push([user.latitude, user.longitude]);
|
||||
}
|
||||
if (bounds.length) map.fitBounds(bounds, { padding: [40, 40], maxZoom: 6 });
|
||||
cleanup = () => map.remove();
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
cleanup();
|
||||
};
|
||||
}, [locations]);
|
||||
|
||||
return <div aria-label="Interactive map of latest approximate user locations" className="mt-3 h-[32rem] max-h-[70vh] min-h-80 border border-line" ref={container} role="region" />;
|
||||
}
|
||||
@@ -8,6 +8,7 @@ describe("UserWorldMap", () => {
|
||||
userId: "11111111-1111-4111-8111-111111111111",
|
||||
name: "Dani",
|
||||
discordUsername: "dani",
|
||||
nickname: "Dani (Steve)",
|
||||
latitude: 37.4056,
|
||||
longitude: -122.0775,
|
||||
location: "Mountain View, California, US",
|
||||
@@ -20,7 +21,14 @@ describe("UserWorldMap", () => {
|
||||
expect(markup).toContain('class="map-marker-target"');
|
||||
expect(markup).toContain("Latest approximate location for registered users");
|
||||
expect(markup).toContain('href="/admin/users/11111111-1111-4111-8111-111111111111"');
|
||||
expect(markup).toContain("Dani (Steve)");
|
||||
expect(markup).toContain("Mountain View, California, US");
|
||||
expect(markup).toContain("World overview");
|
||||
expect(markup).toContain("Interactive OpenStreetMap");
|
||||
expect(markup).toContain("OpenStreetMap, which receives your IP address");
|
||||
expect(markup).toContain("map-marker-tooltip");
|
||||
expect(markup).toContain('id="map-overview-panel"');
|
||||
expect(markup).not.toContain("tile.openstreetmap.org");
|
||||
expect(markup).toContain("Natural Earth, public domain");
|
||||
expect(markup).toContain("2 without coordinates");
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { geoEquirectangular, geoPath } from "d3-geo";
|
||||
import { feature } from "topojson-client";
|
||||
import countriesTopologyJson from "world-atlas/countries-110m.json";
|
||||
import Link from "next/link";
|
||||
import { MapViewToggle } from "./map-view-toggle";
|
||||
|
||||
const WIDTH = 1_000;
|
||||
const HEIGHT = 500;
|
||||
@@ -16,6 +17,7 @@ export interface UserMapLocation {
|
||||
userId: string;
|
||||
name: string;
|
||||
discordUsername: string;
|
||||
nickname: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
location: string;
|
||||
@@ -35,7 +37,8 @@ export function UserWorldMap({ locations, unavailableCount }: { locations: UserM
|
||||
<p className="max-w-sm text-xs leading-5 text-muted">{locations.length} mapped · {unavailableCount} without coordinates. Locations are approximate IP intelligence, not precise device positions.</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 overflow-hidden border border-line bg-[#b9d4d1]">
|
||||
<MapViewToggle locations={locations}>
|
||||
<div className="mt-3 overflow-hidden border border-line bg-[#b9d4d1]">
|
||||
<svg aria-labelledby="user-world-map-title user-world-map-description" className="h-auto w-full" role="group" viewBox={`0 0 ${WIDTH} ${HEIGHT}`}>
|
||||
<title id="user-world-map-title">Latest approximate location for registered users</title>
|
||||
<desc id="user-world-map-description">An open-data world map with one linked marker for every user whose latest geolocated observation has valid coordinates. A complete text list follows.</desc>
|
||||
@@ -52,18 +55,26 @@ export function UserWorldMap({ locations, unavailableCount }: { locations: UserM
|
||||
if (!projected) return null;
|
||||
const x = Math.min(WIDTH - 14, Math.max(14, projected[0]));
|
||||
const y = Math.min(HEIGHT - 14, Math.max(14, projected[1]));
|
||||
const tooltipWidth = Math.min(260, Math.max(110, user.nickname.length * 8 + 24));
|
||||
const tooltipX = Math.min(WIDTH - tooltipWidth - 4, Math.max(4, x - tooltipWidth / 2));
|
||||
const tooltipY = y > 46 ? y - 38 : y + 18;
|
||||
return (
|
||||
<a aria-label={`${user.name}, ${user.location}, last seen ${user.observedAt.toISOString()}`} href={`/admin/users/${user.userId}`} key={user.userId}>
|
||||
<circle className="map-marker-target" cx={x} cy={y} fill="none" pointerEvents="stroke" r="7" stroke="transparent" strokeWidth="24" vectorEffect="non-scaling-stroke" />
|
||||
<circle className="map-marker" cx={x} cy={y} fill="var(--accent)" pointerEvents="none" r="7" stroke="var(--panel)" strokeWidth="3">
|
||||
<title>{user.name} · {user.location} · {user.classification}</title>
|
||||
<a aria-label={`${user.nickname}, ${user.location}, last seen ${user.observedAt.toISOString()}`} className="map-marker-link" href={`/admin/users/${user.userId}`} key={user.userId}>
|
||||
<circle className="map-marker-target" cx={x} cy={y} fill="none" pointerEvents="stroke" r="7" stroke="transparent" strokeWidth="24" vectorEffect="non-scaling-stroke">
|
||||
<title>{user.nickname} · {user.location} · {user.classification}</title>
|
||||
</circle>
|
||||
<circle className="map-marker" cx={x} cy={y} fill="var(--accent)" pointerEvents="none" r="7" stroke="var(--panel)" strokeWidth="3" />
|
||||
<g aria-hidden="true" className="map-marker-tooltip" pointerEvents="none">
|
||||
<rect fill="var(--ink)" height="28" rx="2" width={tooltipWidth} x={tooltipX} y={tooltipY} />
|
||||
<text dominantBaseline="middle" fill="var(--panel)" fontFamily="var(--font-mono)" fontSize="12" textAnchor="middle" x={tooltipX + tooltipWidth / 2} y={tooltipY + 14}>{user.nickname}</text>
|
||||
</g>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</MapViewToggle>
|
||||
<p className="mt-2 text-right font-mono text-[9px] text-muted">Map boundaries: Natural Earth, public domain</p>
|
||||
|
||||
<details className="mt-5 border-t border-line pt-4">
|
||||
@@ -73,7 +84,7 @@ export function UserWorldMap({ locations, unavailableCount }: { locations: UserM
|
||||
<caption className="sr-only">Latest approximate registered-user locations</caption>
|
||||
<thead className="border-b border-line font-mono text-[9px] uppercase tracking-wider text-muted"><tr><th className="py-3 pr-4" scope="col">User</th><th className="p-3" scope="col">Location</th><th className="p-3" scope="col">Network</th><th className="p-3" scope="col">Source</th><th className="py-3 pl-4" scope="col">Last observed</th></tr></thead>
|
||||
<tbody className="divide-y divide-line">
|
||||
{locations.map((user) => <tr key={user.userId}><th className="py-3 pr-4 text-left" scope="row"><Link className="font-mono font-bold underline underline-offset-4" href={`/admin/users/${user.userId}`}>{user.name}</Link><span className="mt-1 block font-mono text-[9px] font-normal text-muted">@{user.discordUsername}</span></th><td className="p-3">{user.location}</td><td className="p-3 font-mono uppercase">{user.classification}</td><td className="p-3">{user.source}</td><td className="py-3 pl-4 font-mono text-[9px]"><time dateTime={user.observedAt.toISOString()}>{user.observedAt.toISOString()}</time></td></tr>)}
|
||||
{locations.map((user) => <tr key={user.userId}><th className="py-3 pr-4 text-left" scope="row"><Link className="font-mono font-bold underline underline-offset-4" href={`/admin/users/${user.userId}`}>{user.nickname}</Link><span className="mt-1 block font-mono text-[9px] font-normal text-muted">@{user.discordUsername}</span></th><td className="p-3">{user.location}</td><td className="p-3 font-mono uppercase">{user.classification}</td><td className="p-3">{user.source}</td><td className="py-3 pl-4 font-mono text-[9px]"><time dateTime={user.observedAt.toISOString()}>{user.observedAt.toISOString()}</time></td></tr>)}
|
||||
{!locations.length && <tr><td className="py-6 text-muted" colSpan={5}>No user observations currently include valid coordinates.</td></tr>}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user