Merge pull request #267 from OneBusAway/feat/hide-agency-prefixes-ui

Feat/hide-agency-prefixes-ui

Author: aaronbrethorst

src/components/RouteItem.svelte

@@ -1,12 +1,16 @@
 <script>
+	import { removeAgencyPrefix } from '$lib/utils';
+
 	let { handleModalRouteClick, route } = $props();
 
 	function getDisplayRouteName() {
-		if (route.shortName && route.longName) {
-			return `${route.shortName} - ${route.longName}`;
-		} else if (route.shortName && route.description) {
-			return `${route.shortName} - ${route.description}`;
-		} else if (!route.shortName && (route.longName || route.description)) {
+		const cleanShortName = route.shortName ? removeAgencyPrefix(route.shortName) : null;
+
+		if (cleanShortName && route.longName) {
+			return `${cleanShortName} - ${route.longName}`;
+		} else if (cleanShortName && route.description) {
+			return `${cleanShortName} - ${route.description}`;
+		} else if (!cleanShortName && (route.longName || route.description)) {
 			return `${route.agencyInfo.name} - ${route.longName || route.description}`;
 		}
 	}

src/components/search/SearchPane.svelte

@@ -12,6 +12,7 @@
 	import TripPlan from '$components/trip-planner/TripPlan.svelte';
 	import { isMapLoaded } from '$src/stores/mapStore';
 	import { answeredSurveys, surveyStore } from '$stores/surveyStore';
+	import { removeAgencyPrefix } from '$lib/utils';
 
 	let {
 		clearPolylines,
@@ -171,7 +172,7 @@
 						<SearchResultItem
 							on:click={() => handleRouteClick(route)}
 							icon={prioritizedRouteTypeForDisplay(route.type)}
-							title={`${$t('route')} ${route.nullSafeShortName || route.id}`}
+							title={`${$t('route')} ${removeAgencyPrefix(route.nullSafeShortName || route.id)}`}
 							subtitle={route.description}
 						/>
 					{/each}

src/components/stops/StopPageHeader.svelte

@@ -7,6 +7,7 @@
 	import { page } from '$app/stores';
 
 	import { t } from 'svelte-i18n';
+	import { removeAgencyPrefix } from '$lib/utils';
 	let { stopName, stopId, stopDirection } = $props();
 </script>
 
@@ -30,7 +31,7 @@
 			<div class="rounded-md bg-gray-50 px-2 py-1">
 				<FontAwesomeIcon icon={faMapMarkerAlt} />
 				<strong>{$t('schedule_for_stop.stop_id')}:</strong>
-				{stopId}
+				{removeAgencyPrefix(stopId)}
 			</div>
 			<div class="rounded-md bg-gray-50 px-2 py-1">
 				<CompassArrow {stopDirection} />

src/components/stops/StopPane.svelte

@@ -15,6 +15,7 @@
 	import HeroQuestion from '$components/surveys/HeroQuestion.svelte';
 	import analytics from '$lib/Analytics/PlausibleAnalytics';
 	import { filterActiveAlerts } from '$components/service-alerts/serviceAlertsHelper';
+	import { removeAgencyPrefix } from '$lib/utils';
 
 	/**
 	 * @typedef {Object} Props
@@ -184,7 +185,7 @@
 						class="relative flex flex-col gap-y-1 rounded-lg bg-brand-secondary bg-opacity-80 p-4"
 					>
 						<h1 class="h1 mb-0 text-white">{stop.name}</h1>
-						<h2 class="h2 mb-0 text-white">{$t('stop')} #{stop.id}</h2>
+						<h2 class="h2 mb-0 text-white">{$t('stop')} #{removeAgencyPrefix(stop.id)}</h2>
 						{#if routeShortNames && routeShortNames.length > 0}
 							<h2 class="h2 mb-0 text-white">{$t('routes')}: {routeShortNames.join(', ')}</h2>
 						{/if}

src/components/stops/__tests__/StopPageHeader.test.js

@@ -69,7 +69,7 @@ describe('StopPageHeader', () => {
 		render(StopPageHeader, { props: defaultProps });
 
 		expect(screen.getByText('Stop ID:')).toBeInTheDocument();
-		expect(screen.getByText('1_75403')).toBeInTheDocument();
+		expect(screen.getByText('75403')).toBeInTheDocument();
 	});
 
 	test('displays stop direction with proper label', () => {
@@ -178,7 +178,7 @@ describe('StopPageHeader', () => {
 
 		render(StopPageHeader, { props: propsWithDifferentId });
 
-		expect(screen.getByText('1_12345')).toBeInTheDocument();
+		expect(screen.getByText('12345')).toBeInTheDocument();
 
 		// Check that tab links use the new stop ID
 		const arrivalsTab = screen.getByRole('link', { name: /arrivals & departures/i });

src/components/stops/__tests__/StopPane.test.js

@@ -164,7 +164,7 @@ describe('StopPane', () => {
 		// Component should render but not show arrival data since fetch is pending
 		// Check that the main content areas are not present
 		expect(screen.queryByText('Pine St & 3rd Ave')).not.toBeInTheDocument();
-		expect(screen.queryByText('Stop #1_75403')).not.toBeInTheDocument();
+		expect(screen.queryByText('Stop #75403')).not.toBeInTheDocument();
 	});
 
 	test('displays arrival data when provided directly', async () => {
@@ -197,7 +197,7 @@ describe('StopPane', () => {
 			expect(screen.getByText('Pine St & 3rd Ave')).toBeInTheDocument();
 		});
 
-		expect(screen.getByText('Stop #1_75403')).toBeInTheDocument();
+		expect(screen.getByText('Stop #75403')).toBeInTheDocument();
 		expect(screen.getByText('Routes: 10, 11')).toBeInTheDocument();
 	});
 
@@ -219,7 +219,7 @@ describe('StopPane', () => {
 			{ timeout: 3000 }
 		);
 
-		expect(screen.getByText('Stop #1_75403')).toBeInTheDocument();
+		expect(screen.getByText('Stop #75403')).toBeInTheDocument();
 		expect(screen.getByText('Routes: 10, 11')).toBeInTheDocument();
 	});
 
@@ -262,7 +262,7 @@ describe('StopPane', () => {
 
 		await waitFor(() => {
 			expect(screen.getByText('Pine St & 3rd Ave')).toBeInTheDocument();
-			expect(screen.getByText('Stop #1_75403')).toBeInTheDocument();
+			expect(screen.getByText('Stop #75403')).toBeInTheDocument();
 		});
 	});
 
@@ -498,7 +498,7 @@ describe('StopPane', () => {
 
 			const headings = screen.getAllByRole('heading', { level: 2 });
 			expect(headings).toHaveLength(2);
-			expect(headings[0]).toHaveTextContent('Stop #1_75403');
+			expect(headings[0]).toHaveTextContent('Stop #75403');
 			expect(headings[1]).toHaveTextContent('Routes: 10, 11');
 		});
 	});

src/lib/utils.js

@@ -6,3 +6,29 @@ export function debounce(func, wait) {
 		timeout = setTimeout(() => func.apply(this, args), wait);
 	};
 }
+
+/**
+ * Removes the agency prefix from an ID string, returning only the numeric part.
+ * Handles IDs in the format "AGENCY_ID" or "AGENCY_NUMBER" where the separator is an underscore.
+ *
+ * @param {string} idString - The full ID string (e.g., "MTS_41242", "1_41242")
+ * @returns {string} The ID without the agency prefix (e.g., "41242")
+ *
+ * @example
+ * removeAgencyPrefix("MTS_41242") // returns "41242"
+ * removeAgencyPrefix("1_41242")   // returns "41242"
+ * removeAgencyPrefix("41242")     // returns "41242" (no prefix to remove)
+ */
+export function removeAgencyPrefix(idString) {
+	if (!idString || typeof idString !== 'string') {
+		return idString;
+	}
+
+	const underscoreIndex = idString.indexOf('_');
+	if (underscoreIndex === -1) {
+		return idString;
+	}
+
+	// Return everything after the first underscore
+	return idString.substring(underscoreIndex + 1);
+}

src/tests/lib/utils.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
-import { debounce } from '$lib/utils';
+import { debounce, removeAgencyPrefix } from '$lib/utils';
 
 describe('debounce', () => {
 	beforeEach(() => {
@@ -105,3 +105,35 @@ describe('debounce', () => {
 		expect(mockFn).toBeCalledTimes(1);
 	});
 });
+
+describe('removeAgencyPrefix', () => {
+	it('should remove agency prefix from ID strings', () => {
+		expect(removeAgencyPrefix('MTS_41242')).toBe('41242');
+		expect(removeAgencyPrefix('1_75403')).toBe('75403');
+		expect(removeAgencyPrefix('40_12345')).toBe('12345');
+	});
+
+	it('should return original string if no underscore found', () => {
+		expect(removeAgencyPrefix('41242')).toBe('41242');
+		expect(removeAgencyPrefix('NoPrefix')).toBe('NoPrefix');
+	});
+
+	it('should handle null and undefined inputs', () => {
+		expect(removeAgencyPrefix(null)).toBe(null);
+		expect(removeAgencyPrefix(undefined)).toBe(undefined);
+	});
+
+	it('should handle non-string inputs', () => {
+		expect(removeAgencyPrefix(123)).toBe(123);
+		expect(removeAgencyPrefix({})).toStrictEqual({});
+	});
+
+	it('should handle empty strings', () => {
+		expect(removeAgencyPrefix('')).toBe('');
+	});
+
+	it('should handle strings with multiple underscores', () => {
+		expect(removeAgencyPrefix('1_2_3_4')).toBe('2_3_4');
+		expect(removeAgencyPrefix('agency_route_stop')).toBe('route_stop');
+	});
+});