birdclaw 0.8.2 → 0.8.3

package/src/routes/network-map.tsx

@@ -16,13 +16,9 @@ import {
 	useState,
 } from "react";
 import "mapbox-gl/dist/mapbox-gl.css";
-import type * as GeoJSON from "geojson";
-import Supercluster from "supercluster";
 import type { MapRef } from "react-map-gl/mapbox";
-import { useSelectedAccountId } from "#/components/account-selection";
-import { fetchQueryEnvelope } from "#/lib/api-client";
-import type { NetworkMapKind, NetworkMapResponse } from "#/lib/network-map";
-import type { QueryEnvelope } from "#/lib/types";
+import { useNetworkMapController } from "#/components/network-map-controller";
+import type { NetworkMapResponse } from "#/lib/network-map";
 import {
 	cx,
 	errorCopyClass,
@@ -41,104 +37,32 @@ import {
 	statusCopyClass,
 } from "#/lib/ui";
 
+import {
+	CLUSTER_LEAF_SAMPLE_SIZE,
+	WORLD_VIEWPORT,
+	type ClusterAggregateProperties,
+	type ClusterResult,
+	type MapFeature,
+	type MapViewport,
+	type ReactMapboxModule,
+	type SelectedOverlay,
+	avatarInitial,
+	avatarPath,
+	buildClusterIndex,
+	clusterGradient,
+	compareClusterFeatures,
+	formatNumber,
+	formatRelationship,
+	getClusterDisplayAnchor,
+	isCluster,
+	readViewport,
+	relationshipColor,
+} from "#/components/network-map-model";
+
 export const Route = createFileRoute("/network-map")({
 	component: NetworkMapRoute,
 });
 
-type ReactMapboxModule = typeof import("react-map-gl/mapbox");
-type MapFeature = NetworkMapResponse["features"][number];
-type MapBounds = [number, number, number, number];
-
-interface ClusterPointProperties {
-	featureIndex: number;
-	handle: string;
-	name: string;
-	avatarUrl: string | null;
-	relationship: MapFeature["properties"]["relationship"];
-	followersCount: number;
-}
-
-interface ClusterAggregateProperties {
-	followers: number;
-	following: number;
-	mutual: number;
-}
-
-interface ClusterFeatureProperties extends ClusterAggregateProperties {
-	cluster: true;
-	cluster_id: number;
-	point_count: number;
-	point_count_abbreviated: string | number;
-}
-
-type ClusterPointFeature = GeoJSON.Feature<
-	GeoJSON.Point,
-	ClusterPointProperties
->;
-type ClusterFeature = GeoJSON.Feature<GeoJSON.Point, ClusterFeatureProperties>;
-type ClusterResult = ClusterPointFeature | ClusterFeature;
-type MapViewport = { bounds: MapBounds; zoom: number };
-type MapTarget = {
-	getBounds: () => {
-		getWest: () => number;
-		getSouth: () => number;
-		getEast: () => number;
-		getNorth: () => number;
-	};
-	getZoom: () => number;
-};
-
-type SelectedOverlay =
-	| { kind: "profile"; feature: MapFeature }
-	| {
-			kind: "cluster";
-			coordinates: [number, number];
-			count: number;
-			features: MapFeature[];
-			stats: ClusterAggregateProperties;
-	  };
-
-const CLUSTER_LEAF_SAMPLE_SIZE = 48;
-
-const MAP_TYPES: Array<{ value: NetworkMapKind; label: string }> = [
-	{ value: "all", label: "All" },
-	{ value: "followers", label: "Followers" },
-	{ value: "following", label: "Following" },
-	{ value: "mutual", label: "Mutual" },
-];
-
-const WORLD_BOUNDS: MapBounds = [-180, -85, 180, 85];
-const WORLD_VIEWPORT: MapViewport = { bounds: WORLD_BOUNDS, zoom: 1.15 };
-
-async function fetchMap(
-	type: NetworkMapKind,
-	refresh: boolean,
-	accountId?: string,
-	signal?: AbortSignal,
-) {
-	const url = new URL("/api/network-map", window.location.origin);
-	url.searchParams.set("type", type);
-	url.searchParams.set("limit", "50000");
-	url.searchParams.set("geocodeLimit", refresh ? "80" : "12");
-	if (accountId) url.searchParams.set("account", accountId);
-	if (refresh) url.searchParams.set("refresh", "true");
-	const response = await fetch(url, { signal });
-	if (!response.ok) {
-		throw new Error(`Map request failed (${String(response.status)})`);
-	}
-	return (await response.json()) as NetworkMapResponse;
-}
-
-function formatNumber(value: number) {
-	return new Intl.NumberFormat().format(value);
-}
-
-function formatRelationship(value: MapFeature["properties"]["relationship"]) {
-	if (value === "mutual") return "mutual";
-	if (value === "following") return "following";
-	return "follower";
-}
-
 function StatTile({
 	icon: Icon,
 	label,
@@ -184,29 +108,6 @@ function useMapboxModule() {
 	return { module, error };
 }
 
-function relationshipColor(
-	relationship: MapFeature["properties"]["relationship"],
-) {
-	if (relationship === "mutual") return "#22c55e";
-	if (relationship === "following") return "#f59e0b";
-	return "#1d9bf0";
-}
-
-function avatarInitial(feature: MapFeature) {
-	return (feature.properties.name || feature.properties.handle || "?")
-		.slice(0, 1)
-		.toUpperCase();
-}
-
-function avatarPath(feature: MapFeature) {
-	if (!feature.properties.avatarUrl) return null;
-	const query = new URLSearchParams({
-		profileId: feature.properties.profileId,
-		v: feature.properties.avatarUrl,
-	});
-	return `/api/avatar?${query.toString()}`;
-}
-
 function Avatar({
 	feature,
 	size = 36,
@@ -244,136 +145,6 @@ function Avatar({
 	);
 }
 
-function clusterGradient(stats: ClusterAggregateProperties) {
-	const total = Math.max(1, stats.followers + stats.following + stats.mutual);
-	const mutual = (stats.mutual / total) * 100;
-	const following = mutual + (stats.following / total) * 100;
-	return `conic-gradient(#22c55e 0 ${mutual}%, #f59e0b ${mutual}% ${following}%, #1d9bf0 ${following}% 100%)`;
-}
-
-function buildClusterIndex(features: MapFeature[]) {
-	const points: ClusterPointFeature[] = features.map(
-		(feature, featureIndex) => ({
-			type: "Feature",
-			geometry: feature.geometry,
-			properties: {
-				featureIndex,
-				handle: feature.properties.handle,
-				name: feature.properties.name,
-				avatarUrl: feature.properties.avatarUrl,
-				relationship: feature.properties.relationship,
-				followersCount: feature.properties.followersCount,
-			},
-		}),
-	);
-	return new Supercluster<ClusterPointProperties, ClusterAggregateProperties>({
-		maxZoom: 18,
-		minPoints: 2,
-		radius: 64,
-		map: (props) => ({
-			followers: props.relationship === "followers" ? 1 : 0,
-			following: props.relationship === "following" ? 1 : 0,
-			mutual: props.relationship === "mutual" ? 1 : 0,
-		}),
-		reduce: (accumulated, props) => {
-			accumulated.followers += props.followers;
-			accumulated.following += props.following;
-			accumulated.mutual += props.mutual;
-		},
-	}).load(points);
-}
-
-function isCluster(item: ClusterResult): item is ClusterFeature {
-	return "cluster" in item.properties && item.properties.cluster === true;
-}
-
-function compareClusterFeatures(a: MapFeature, b: MapFeature) {
-	return (
-		b.properties.followersCount - a.properties.followersCount ||
-		a.properties.handle.localeCompare(b.properties.handle)
-	);
-}
-
-function getClusterDisplayAnchor(
-	features: MapFeature[],
-	fallback: [number, number],
-): [number, number] {
-	const buckets = new Map<
-		string,
-		{ coordinates: [number, number]; count: number; followers: number }
-	>();
-	for (const feature of features) {
-		const [lng, lat] = feature.geometry.coordinates;
-		const key = `${lng.toFixed(4)},${lat.toFixed(4)}`;
-		const existing = buckets.get(key);
-		if (existing) {
-			existing.count += 1;
-			existing.followers += feature.properties.followersCount;
-		} else {
-			buckets.set(key, {
-				coordinates: [lng, lat],
-				count: 1,
-				followers: feature.properties.followersCount,
-			});
-		}
-	}
-	const best = [...buckets.values()].sort(
-		(a, b) => b.count - a.count || b.followers - a.followers,
-	)[0];
-	return best?.coordinates ?? fallback;
-}
-
-function readViewport(target: unknown): MapViewport | null {
-	if (!target || typeof target !== "object") return null;
-	const map = target as Partial<MapTarget>;
-	if (
-		typeof map.getBounds !== "function" ||
-		typeof map.getZoom !== "function"
-	) {
-		return null;
-	}
-	const bounds = map.getBounds();
-	return {
-		bounds: [
-			bounds.getWest(),
-			bounds.getSouth(),
-			bounds.getEast(),
-			bounds.getNorth(),
-		],
-		zoom: map.getZoom(),
-	};
-}
-
-function boundsContainFeature(bounds: MapBounds, feature: MapFeature) {
-	const [west, south, east, north] = bounds;
-	const [lng, lat] = feature.geometry.coordinates;
-	const normalizedWest = ((west + 540) % 360) - 180;
-	const normalizedEast = ((east + 540) % 360) - 180;
-	const inLatitude = lat >= Math.max(-85, south) && lat <= Math.min(85, north);
-	const inLongitude =
-		east - west >= 360
-			? true
-			: normalizedWest <= normalizedEast
-				? lng >= normalizedWest && lng <= normalizedEast
-				: lng >= normalizedWest || lng <= normalizedEast;
-	return inLatitude && inLongitude;
-}
-
-function featureMatchesSearch(feature: MapFeature, search: string) {
-	const needle = search.trim().toLowerCase();
-	if (!needle) return true;
-	return [
-		feature.properties.name,
-		feature.properties.handle,
-		feature.properties.location,
-		feature.properties.resolvedLocation ?? "",
-		formatRelationship(feature.properties.relationship),
-	]
-		.join(" ")
-		.toLowerCase()
-		.includes(needle);
-}
-
 function ProfileMarker({ feature }: { feature: MapFeature }) {
 	const color = relationshipColor(feature.properties.relationship);
 	return (
@@ -847,95 +618,21 @@ function VisibleProfilesPanel({
 }
 
 function NetworkMapRoute() {
-	const [type, setType] = useState<NetworkMapKind>("all");
-	const [meta, setMeta] = useState<QueryEnvelope | null>(null);
-	const [metaLoaded, setMetaLoaded] = useState(false);
-	const [data, setData] = useState<NetworkMapResponse | null>(null);
-	const [error, setError] = useState<string | null>(null);
-	const [loading, setLoading] = useState(true);
-	const [viewport, setViewport] = useState<MapViewport>(WORLD_VIEWPORT);
-	const [visibleSearch, setVisibleSearch] = useState("");
-	const selectedAccountId = useSelectedAccountId(meta?.accounts);
-	const mapRequestIdRef = useRef(0);
-	const mapAbortControllerRef = useRef<AbortController | null>(null);
-
-	const load = useCallback(
-		(refresh = false) => {
-			const requestId = mapRequestIdRef.current + 1;
-			mapRequestIdRef.current = requestId;
-			mapAbortControllerRef.current?.abort();
-			const controller = new AbortController();
-			mapAbortControllerRef.current = controller;
-			setLoading(true);
-			setError(null);
-			fetchMap(type, refresh, selectedAccountId, controller.signal)
-				.then((nextData) => {
-					if (mapRequestIdRef.current !== requestId) return;
-					setData(nextData);
-				})
-				.catch((cause: unknown) => {
-					if (
-						controller.signal.aborted ||
-						mapRequestIdRef.current !== requestId
-					) {
-						return;
-					}
-					setError(cause instanceof Error ? cause.message : "Map unavailable");
-				})
-				.finally(() => {
-					if (mapRequestIdRef.current === requestId) {
-						setLoading(false);
-					}
-				});
-		},
-		[selectedAccountId, type],
-	);
-
-	useEffect(() => {
-		const controller = new AbortController();
-		fetchQueryEnvelope({ signal: controller.signal })
-			.then(setMeta)
-			.catch(() => {
-				// The map can still load against the default account if status is down.
-			})
-			.finally(() => {
-				if (!controller.signal.aborted) setMetaLoaded(true);
-			});
-		return () => controller.abort();
-	}, []);
-
-	useEffect(() => {
-		if (!metaLoaded) return;
-		load(false);
-	}, [load, metaLoaded]);
-
-	useEffect(
-		() => () => {
-			mapAbortControllerRef.current?.abort();
-		},
-		[],
-	);
-
-	const visibleFeatures = useMemo(
-		() =>
-			(data?.features ?? [])
-				.slice()
-				.filter((feature) => boundsContainFeature(viewport.bounds, feature))
-				.sort(
-					(a, b) =>
-						b.properties.followersCount - a.properties.followersCount ||
-						a.properties.handle.localeCompare(b.properties.handle),
-				),
-		[data, viewport],
-	);
-
-	const filteredVisibleFeatures = useMemo(
-		() =>
-			visibleFeatures
-				.filter((feature) => featureMatchesSearch(feature, visibleSearch))
-				.slice(0, 160),
-		[visibleFeatures, visibleSearch],
-	);
+	const {
+		type,
+		setType,
+		viewport,
+		setViewport,
+		visibleSearch,
+		setVisibleSearch,
+		data,
+		loading,
+		error,
+		refresh,
+		visibleFeatures,
+		filteredVisibleFeatures,
+		mapTypes,
+	} = useNetworkMapController();
 
 	return (
 		<section className="flex min-h-screen flex-col min-[1180px]:h-screen min-[1180px]:min-h-0 min-[1180px]:overflow-hidden">
@@ -953,7 +650,7 @@ function NetworkMapRoute() {
 						<button
 							className={secondaryButtonClass}
 							type="button"
-							onClick={() => load(true)}
+							onClick={() => refresh()}
 							disabled={loading}
 						>
 							<RefreshCw className={cx("size-4", loading && "animate-spin")} />
@@ -963,7 +660,7 @@ function NetworkMapRoute() {
 				</div>
 				<div className="border-t border-[var(--line)] px-4 py-3">
 					<div className={segmentedClass}>
-						{MAP_TYPES.map((item) => (
+						{mapTypes.map((item) => (
 							<button
 								key={item.value}
 								type="button"

package/src/routes/rate-limits.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useQuery } from "@tanstack/react-query";
 import {
 	Activity,
 	AlertTriangle,
@@ -7,7 +8,8 @@ import {
 	RefreshCw,
 	ShieldCheck,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
+import { queryKeys } from "#/lib/query-client";
 import type {
 	XurlRateLimitEndpointSnapshot,
 	XurlRateLimitEvent,
@@ -192,26 +194,16 @@ function EventRow({
 }
 
 function RateLimitsRoute() {
-	const [snapshot, setSnapshot] = useState<XurlRateLimitSnapshot | null>(null);
-	const [error, setError] = useState<string | null>(null);
-	const [loading, setLoading] = useState(true);
+	const rateLimitsQuery = useQuery({
+		queryKey: queryKeys.rateLimits,
+		queryFn: fetchRateLimits,
+		staleTime: 60_000,
+	});
+	const snapshot = rateLimitsQuery.data ?? null;
+	const loading = rateLimitsQuery.isFetching;
+	const error = rateLimitsQuery.error;
 	const nowMs = useMemo(() => Date.now(), [snapshot]);
 
-	const load = useCallback(() => {
-		setLoading(true);
-		setError(null);
-		fetchRateLimits()
-			.then(setSnapshot)
-			.catch((cause: unknown) => {
-				setError(cause instanceof Error ? cause.message : "Rate limits failed");
-			})
-			.finally(() => setLoading(false));
-	}, []);
-
-	useEffect(() => {
-		load();
-	}, [load]);
-
 	return (
 		<section className="flex min-h-screen flex-col">
 			<header className={pageHeaderClass}>
@@ -238,7 +230,7 @@ function RateLimitsRoute() {
 						<button
 							className={secondaryButtonClass}
 							disabled={loading}
-							onClick={load}
+							onClick={() => void rateLimitsQuery.refetch()}
 							type="button"
 						>
 							<RefreshCw
@@ -251,7 +243,11 @@ function RateLimitsRoute() {
 				</div>
 			</header>
 
-			{error ? <div className={errorCopyClass}>{error}</div> : null}
+			{error ? (
+				<div className={errorCopyClass}>
+					{error instanceof Error ? error.message : "Rate limits failed"}
+				</div>
+			) : null}
 
 			{snapshot ? (
 				<>

package/src/lib/client-cache.ts

@@ -1,109 +0,0 @@
-const DEFAULT_MAX_ENTRIES = 100;
-
-interface ClientCacheEntry<T> {
-	value: T;
-	updatedAt: number;
-}
-
-interface LoadClientCacheOptions {
-	force?: boolean;
-	maxAgeMs?: number;
-}
-
-const values = new Map<string, ClientCacheEntry<unknown>>();
-const pending = new Map<string, Promise<unknown>>();
-const revisions = new Map<string, number>();
-let generation = 0;
-
-function cacheToken(key: string) {
-	return `${String(generation)}:${String(revisions.get(key) ?? 0)}`;
-}
-
-function invalidateKey(key: string) {
-	revisions.set(key, (revisions.get(key) ?? 0) + 1);
-}
-
-function pruneCache() {
-	while (values.size > DEFAULT_MAX_ENTRIES) {
-		const oldestKey = values.keys().next().value as string | undefined;
-		if (!oldestKey) return;
-		values.delete(oldestKey);
-	}
-}
-
-export function readClientCache<T>(
-	key: string,
-	maxAgeMs = Number.POSITIVE_INFINITY,
-) {
-	const entry = values.get(key) as ClientCacheEntry<T> | undefined;
-	if (!entry) return undefined;
-	if (Date.now() - entry.updatedAt > maxAgeMs) {
-		values.delete(key);
-		return undefined;
-	}
-	return entry.value;
-}
-
-export function writeClientCache<T>(key: string, value: T) {
-	values.delete(key);
-	values.set(key, { value, updatedAt: Date.now() });
-	pruneCache();
-	return value;
-}
-
-export function loadClientCache<T>(
-	key: string,
-	load: () => Promise<T>,
-	{
-		force = false,
-		maxAgeMs = Number.POSITIVE_INFINITY,
-	}: LoadClientCacheOptions = {},
-) {
-	if (force) {
-		invalidateKey(key);
-		values.delete(key);
-		pending.delete(key);
-	} else {
-		const cached = readClientCache<T>(key, maxAgeMs);
-		if (cached !== undefined) return Promise.resolve(cached);
-	}
-
-	const active = pending.get(key) as Promise<T> | undefined;
-	if (active) return active;
-
-	const token = cacheToken(key);
-	let request: Promise<T>;
-	request = load()
-		.then((value) => {
-			if (cacheToken(key) === token) writeClientCache(key, value);
-			return value;
-		})
-		.finally(() => {
-			if (pending.get(key) === request) pending.delete(key);
-		});
-	pending.set(key, request);
-	return request;
-}
-
-export function deleteClientCache(key: string) {
-	invalidateKey(key);
-	values.delete(key);
-	pending.delete(key);
-}
-
-export function deleteClientCacheByPrefix(prefix: string) {
-	const keys = new Set([...values.keys(), ...pending.keys()]);
-	for (const key of keys) {
-		if (!key.startsWith(prefix)) continue;
-		invalidateKey(key);
-		values.delete(key);
-		pending.delete(key);
-	}
-}
-
-export function clearClientCache() {
-	generation += 1;
-	values.clear();
-	pending.clear();
-	revisions.clear();
-}