diff --git a/frontend/src/components/PathModal.tsx b/frontend/src/components/PathModal.tsx
index 61d30d3..1a9883f 100644
--- a/frontend/src/components/PathModal.tsx
+++ b/frontend/src/components/PathModal.tsx
@@ -406,9 +406,12 @@ interface HopNodeProps {
distanceUnit: DistanceUnit;
}
+const AMBIGUOUS_MATCH_PREVIEW_LIMIT = 3;
+
function HopNode({ hop, hopNumber, prevLocation, distanceUnit }: HopNodeProps) {
const isAmbiguous = hop.matches.length > 1;
const isUnknown = hop.matches.length === 0;
+ const [expanded, setExpanded] = useState(false);
// Calculate distance from previous location for a contact
// Returns null if prev location unknown/ambiguous or contact has no valid location
@@ -447,27 +450,38 @@ function HopNode({ hop, hopNumber, prevLocation, distanceUnit }: HopNodeProps) {
<UNKNOWN>
) : isAmbiguous ? (
- {hop.matches.map((contact) => {
- const dist = getDistanceForContact(contact);
- const hasLocation = isValidLocation(contact.lat, contact.lon);
- return (
-
- {contact.name || contact.public_key.slice(0, 12)}
- {dist !== null && (
-
- - {formatDistance(dist, distanceUnit)}
-
- )}
- {hasLocation && (
-
- )}
-
- );
- })}
+ {(expanded ? hop.matches : hop.matches.slice(0, AMBIGUOUS_MATCH_PREVIEW_LIMIT)).map(
+ (contact) => {
+ const dist = getDistanceForContact(contact);
+ const hasLocation = isValidLocation(contact.lat, contact.lon);
+ return (
+
+ {contact.name || contact.public_key.slice(0, 12)}
+ {dist !== null && (
+
+ - {formatDistance(dist, distanceUnit)}
+
+ )}
+ {hasLocation && (
+
+ )}
+
+ );
+ }
+ )}
+ {!expanded && hop.matches.length > AMBIGUOUS_MATCH_PREVIEW_LIMIT && (
+
+ )}
) : (