feat: Update StopMapModal and Estimates to use selectedCirculationId for better clarity and consistency

2 files changed, 21 insertions, 10 deletions

diff --git a/src/frontend/app/components/StopMapModal.tsx b/src/frontend/app/components/StopMapModal.tsx
index 91cd513..ad73fc2 100644
--- a/src/frontend/app/components/StopMapModal.tsx
+++ b/src/frontend/app/components/StopMapModal.tsx
@@ -22,6 +22,7 @@ export interface Position {
 }
 
 export interface ConsolidatedCirculationForMap {
+  id: string;
   line: string;
   route: string;
   currentPosition?: Position;
@@ -37,7 +38,7 @@ interface StopMapModalProps {
   region: RegionId;
   isOpen: boolean;
   onClose: () => void;
-  selectedCirculationIndex?: number;
+  selectedCirculationId?: string;
 }
 
 export const StopMapModal: React.FC<StopMapModalProps> = ({
@@ -46,7 +47,7 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
   region,
   isOpen,
   onClose,
-  selectedCirculationIndex,
+  selectedCirculationId,
 }) => {
   const { theme } = useApp();
   const [styleSpec, setStyleSpec] = useState<any | null>(null);
@@ -62,17 +63,19 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
     [circulations]
   );
 
-  // Use selectedCirculationIndex if provided, otherwise use first bus with position
+  // Use selectedCirculationId if provided, otherwise use first bus with position
   const selectedBus = useMemo(() => {
-    if (selectedCirculationIndex !== undefined) {
-      const circulation = circulations[selectedCirculationIndex];
+    if (selectedCirculationId !== undefined) {
+      const circulation = circulations.find(
+        (c) => c.id === selectedCirculationId
+      );
       if (circulation?.currentPosition) {
         return circulation;
       }
     }
     // Fallback to first bus with position
     return busesWithPosition.length > 0 ? busesWithPosition[0] : null;
-  }, [selectedCirculationIndex, circulations, busesWithPosition]);
+  }, [selectedCirculationId, circulations, busesWithPosition]);
 
   const center = useMemo(() => {
     if (selectedBus?.currentPosition) {
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index 024ea73..7b11a95 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -37,6 +37,13 @@ export interface ConsolidatedCirculation {
   };
 }
 
+export const getCirculationId = (c: ConsolidatedCirculation): string => {
+  if (c.schedule?.tripId) {
+    return `trip:${c.schedule.tripId}`;
+  }
+  return `rt:${c.line}:${c.route}:${c.realTime?.minutes ?? "?"}`;
+};
+
 interface ErrorInfo {
   type: "network" | "server" | "unknown";
   status?: number;
@@ -80,8 +87,8 @@ export default function Estimates() {
   const [favourited, setFavourited] = useState(false);
   const [isManualRefreshing, setIsManualRefreshing] = useState(false);
   const [isMapModalOpen, setIsMapModalOpen] = useState(false);
-  const [selectedCirculationIdx, setSelectedCirculationIdx] = useState<
-    number | undefined
+  const [selectedCirculationId, setSelectedCirculationId] = useState<
+    string | undefined
   >(undefined);
   const { region } = useApp();
   const regionConfig = getRegionConfig(region);
@@ -255,7 +262,7 @@ export default function Estimates() {
               dataDate={dataDate}
               regionConfig={regionConfig}
               onCirculationClick={(estimate, idx) => {
-                setSelectedCirculationIdx(idx);
+                setSelectedCirculationId(getCirculationId(estimate));
                 setIsMapModalOpen(true);
               }}
             />
@@ -268,6 +275,7 @@ export default function Estimates() {
             stop={stopData}
             region={region}
             circulations={(data ?? []).map((c) => ({
+              id: getCirculationId(c),
               line: c.line,
               route: c.route,
               currentPosition: c.currentPosition,
@@ -279,7 +287,7 @@ export default function Estimates() {
             }))}
             isOpen={isMapModalOpen}
             onClose={() => setIsMapModalOpen(false)}
-            selectedCirculationIndex={selectedCirculationIdx}
+            selectedCirculationId={selectedCirculationId}
           />
         )}
       </div>