Fix globe rendering fallback in detail overlay

Author: Rieranthony

apps/geoip/src/main.py

@@ -88,7 +88,6 @@ async def health(response: Response) -> HealthResponse:
 	@app.post("/v1/lookup", response_model=LookupResponse)
 	async def lookup(payload: LookupRequest) -> LookupResponse:
 		try:
-			logger.info("getting info for %s", payload.ip)
 			return await asyncio.to_thread(app.state.geoip_manager.lookup, payload.ip)
 		except RuntimeError as error:
 			raise HTTPException(status_code=503, detail=str(error)) from error

apps/web/src/app/(dashboard)/[websiteSlug]/overlays/detail-page-overlay.test.tsx

@@ -349,6 +349,40 @@ describe("ContactVisitorDetailView", () => {
 		expect(html).not.toContain('data-slot="mock-globe"');
 	});
 
+	it("falls back to another visitor with coordinates when the hero visitor has none", async () => {
+		const html = await renderView({
+			globeVisitors: [
+				{
+					...heroVisitor,
+					id: "visitor-2",
+					latitude: 48.8566,
+					longitude: 2.3522,
+					currentPage: {
+						...heroVisitor.currentPage,
+						path: "/docs",
+					},
+				},
+			],
+			heroVisitor: {
+				...heroVisitor,
+				latitude: null,
+				longitude: null,
+			},
+		});
+
+		expect(html).toContain(
+			'data-slot="contact-visitor-detail-desktop-globe-wrapper"'
+		);
+		expect(html).toContain(
+			'data-slot="contact-visitor-detail-mobile-globe-wrapper"'
+		);
+		expect(html).toContain(
+			'data-focus="{"latitude":48.8566,"longitude":2.3522}"'
+		);
+		expect(html).toContain('data-id="visitor-2"');
+		expect(html).toContain('data-page-label="/docs"');
+	});
+
 	it("renders loading, error, and empty states", async () => {
 		const loadingHtml = await renderView({
 			isLoading: true,

apps/web/src/app/(dashboard)/[websiteSlug]/overlays/detail-page-overlay.tsx

@@ -54,6 +54,7 @@ type ContactVisitorDetailViewProps = {
 	mode: "contact" | "visitor";
 	contact: DetailContact | null;
 	deviceDetailsById: DeviceDetailById;
+	globeVisitors?: readonly (VisitorDetail | null | undefined)[];
 	heroVisitor: VisitorDetail | null;
 	isError: boolean;
 	isLoading: boolean;
@@ -175,6 +176,31 @@ function inferDeviceKind(params: {
 		: "desktop";
 }
 
+function hasGlobeCoordinates<
+	T extends {
+		latitude: number | null;
+		longitude: number | null;
+	},
+>(
+	visitor: T | null | undefined
+): visitor is T & {
+	latitude: number;
+	longitude: number;
+} {
+	return visitor?.latitude != null && visitor.longitude != null;
+}
+
+function pickGlobeVisitor(params: {
+	heroVisitor: VisitorDetail | null;
+	visitors?: readonly (VisitorDetail | null | undefined)[];
+}) {
+	if (hasGlobeCoordinates(params.heroVisitor)) {
+		return params.heroVisitor;
+	}
+
+	return params.visitors?.find(hasGlobeCoordinates) ?? null;
+}
+
 function buildHeroDetails(params: {
 	contact: DetailContact | null;
 	heroVisitor: VisitorDetail | null;
@@ -245,28 +271,44 @@ function buildHeroDetails(params: {
 
 function buildHeroGlobeData(params: {
 	hero: HeroDetails;
-	heroVisitor: VisitorDetail | null;
+	globeVisitor: VisitorDetail | null;
 }): HeroGlobeData | null {
-	const { hero, heroVisitor } = params;
+	const { globeVisitor, hero } = params;
 
-	if (heroVisitor?.latitude == null || heroVisitor.longitude == null) {
+	if (!hasGlobeCoordinates(globeVisitor)) {
 		return null;
 	}
 
+	const countryDetails = resolveCountryDetails({
+		city: globeVisitor.city,
+		country: globeVisitor.country,
+		countryCode: globeVisitor.countryCode,
+		locale: globeVisitor.language,
+		timezone: globeVisitor.timezone,
+	});
+	const locationLabel =
+		hero.locationLabel ||
+		[globeVisitor.city, countryDetails.name ?? countryDetails.code ?? null]
+			.filter(Boolean)
+			.join(", ") ||
+		null;
+
 	return {
 		focus: {
-			latitude: heroVisitor.latitude,
-			longitude: heroVisitor.longitude,
+			latitude: globeVisitor.latitude,
+			longitude: globeVisitor.longitude,
 		},
 		visitor: {
 			avatarUrl: hero.avatarUrl,
-			id: heroVisitor.id,
-			latitude: heroVisitor.latitude,
-			locationLabel: hero.locationLabel,
-			longitude: heroVisitor.longitude,
+			id: globeVisitor.id,
+			latitude: globeVisitor.latitude,
+			locationLabel,
+			longitude: globeVisitor.longitude,
 			name: hero.title,
 			pageLabel:
-				heroVisitor.currentPage?.path ?? heroVisitor.currentPage?.title ?? null,
+				globeVisitor.currentPage?.path ??
+				globeVisitor.currentPage?.title ??
+				null,
 		},
 	};
 }
@@ -549,6 +591,7 @@ function DevicesSection({
 function DetailPrimaryPanel({
 	contact,
 	hero,
+	globeVisitors,
 	heroVisitor,
 	leadVisitorSummary,
 	mode,
@@ -557,6 +600,7 @@ function DetailPrimaryPanel({
 }: {
 	contact: DetailContact | null;
 	hero: HeroDetails;
+	globeVisitors?: readonly (VisitorDetail | null | undefined)[];
 	heroVisitor: VisitorDetail | null;
 	leadVisitorSummary: LeadVisitorSummary | null;
 	mode: "contact" | "visitor";
@@ -579,7 +623,10 @@ function DetailPrimaryPanel({
 	);
 	const heroGlobeData = buildHeroGlobeData({
 		hero,
-		heroVisitor,
+		globeVisitor: pickGlobeVisitor({
+			heroVisitor,
+			visitors: globeVisitors,
+		}),
 	});
 
 	return (
@@ -680,8 +727,8 @@ function DetailPrimaryPanel({
 								<Globe
 									allowDrag={false}
 									autoRotate={false}
-									className="min-h-[240px]"
 									focus={heroGlobeData.focus}
+									minHeight={240}
 									visitors={[heroGlobeData.visitor]}
 								/>
 							</div>
@@ -700,8 +747,8 @@ function DetailPrimaryPanel({
 							<Globe
 								allowDrag={false}
 								autoRotate={false}
-								className="min-h-[240px]"
 								focus={heroGlobeData.focus}
+								minHeight={240}
 								visitors={[heroGlobeData.visitor]}
 							/>
 						</div>
@@ -858,6 +905,7 @@ function DetailSecondaryPanel({
 export function ContactVisitorDetailView({
 	contact,
 	deviceDetailsById,
+	globeVisitors,
 	heroVisitor,
 	isError,
 	isLoading,
@@ -919,6 +967,7 @@ export function ContactVisitorDetailView({
 			>
 				<DetailPrimaryPanel
 					contact={contact}
+					globeVisitors={globeVisitors}
 					hero={hero}
 					heroVisitor={heroVisitor}
 					leadVisitorSummary={leadVisitorSummary}
@@ -1048,6 +1097,9 @@ export function ContactVisitorDetailOverlay() {
 					: (visitorQuery.data?.contact ?? null)
 			}
 			deviceDetailsById={deviceDetailsById}
+			globeVisitors={contactVisitorDetailsQueries.map(
+				(query) => query.data ?? null
+			)}
 			heroVisitor={resolvedHeroVisitor}
 			isError={
 				activeDetail.type === "contact"

apps/web/src/components/globe/index.test.tsx

@@ -121,6 +121,12 @@ function installDomGlobals(window: Window) {
 	});
 }
 
+function getGlobeRoot() {
+	return Array.from(document.getElementsByTagName("div")).find(
+		(element) => element.getAttribute("data-slot") === "globe-root"
+	) as HTMLElement | undefined;
+}
+
 describe("Globe", () => {
 	beforeEach(() => {
 		activeRoot = null;
@@ -199,4 +205,32 @@ describe("Globe", () => {
 
 		expect(createGlobeMock).toHaveBeenCalledTimes(1);
 	});
+
+	it("applies a default min-height and lets callers override it", async () => {
+		const { act } = await import("react");
+		const { createRoot } = await import("react-dom/client");
+		const { Globe } = await import("./index");
+
+		mountNode = document.createElement("div");
+		document.body.appendChild(mountNode);
+		activeRoot = createRoot(mountNode);
+
+		await act(async () => {
+			activeRoot?.render(<Globe allowDrag={false} autoRotate={false} />);
+		});
+
+		let globeRoot = getGlobeRoot();
+
+		expect(globeRoot?.style.minHeight).toBe("220px");
+
+		await act(async () => {
+			activeRoot?.render(
+				<Globe allowDrag={false} autoRotate={false} minHeight={260} />
+			);
+		});
+
+		globeRoot = getGlobeRoot();
+
+		expect(globeRoot?.style.minHeight).toBe("260px");
+	});
 });

apps/web/src/components/globe/index.tsx

@@ -46,6 +46,7 @@ export type GlobeProps = {
 	autoRotate?: boolean;
 	rotationSpeed?: number;
 	allowDrag?: boolean;
+	minHeight?: number | string | null;
 };
 
 type DragState = {
@@ -83,6 +84,7 @@ export function Globe({
 	autoRotate = true,
 	rotationSpeed = DEFAULT_GLOBE_ROTATION_SPEED,
 	allowDrag = true,
+	minHeight = 220,
 }: GlobeProps) {
 	const id = useId();
 	const { resolvedTheme } = useTheme();
@@ -321,6 +323,13 @@ export function Globe({
 	const allowHorizontalDrag =
 		allowDrag && longitude === undefined && focusView === null;
 	const allowVerticalDrag = allowHorizontalDrag && tilt === undefined;
+	const rootStyle: React.CSSProperties | undefined =
+		minHeight == null
+			? undefined
+			: {
+					minHeight:
+						typeof minHeight === "number" ? `${minHeight}px` : minHeight,
+				};
 
 	function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {
 		if (!allowHorizontalDrag) {
@@ -405,6 +414,7 @@ export function Globe({
 			onPointerMove={handlePointerMove}
 			onPointerUp={finishPointerDrag}
 			ref={containerRef}
+			style={rootStyle}
 		>
 			<canvas
 				className="size-full"