@abcagency/hc-ui-components 1.5.1 → 1.5.2

package/src/components/modules/list/header-item.js

@@ -57,7 +57,7 @@ const HeaderItem = ({
 			size="none"
 			className={`
 				hc-p-2 hc-rounded-none hc-text-left hc-normal-case hover:hc-bg-uiAccent/5 focus:hc-bg-uiAccent/5
-				${field.toLowerCase() === "position" ? "hc-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
+				${field.toLowerCase() === "title" ? "hc-pl-7 hc-col-span-4" : (field.toLowerCase() === "state" || field.toLowerCase() == "favorite") ? "hc-col-span-1" : "hc-col-span-2"}
 				${className ?? ""}
 			`}
 			{...rest}

package/src/components/modules/maps/map-list.js

@@ -8,7 +8,7 @@ const MapList = ({ showMap, loading, list, map, filter, mapPosition, containerSt
 				style={containerStyle}
 				className={`
 					${showMap === false ? "md:hc-grid-rows-[100%]" : "md:hc-grid-rows-[50%_50%]"}
-					hc-hidden md:hc-grid md:hc-pt-4 hc-overflow-hidden hc-relative bg-gray-100
+					hc-hidden md:hc-grid hc-overflow-hidden hc-relative bg-gray-100
 				`}
 			>
 				{mapPosition && mapPosition === 'top' && showMap ? (

package/src/contexts/mapContext.tsx

@@ -37,37 +37,38 @@ interface MapProviderProps {
   children: ReactNode;
   resetFilters: boolean;
 	defaultZoomOverride?: number | null;
+	localStorageKey?: string;
 }
 
-export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters, defaultZoomOverride }) => {
-	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(getStorageObject('selectedListItem'));
-	const [location, setLocation] = useState<any>(getStorageObject('location'));
-	const [center, setCenter] = useState<LatLng>(getStorageObject("center", { lat: 39.8283, lng: -98.5795 }) || { lat: 39.8283, lng: -98.5795 });
-	const [zoom, setZoom] = useState<number>(getStorageObject("zoom", 9) || 9);
+export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters, defaultZoomOverride, localStorageKey = '' }) => {
+	const [selectedListItem, setSelectedListItem] = useState<Listing | null>(getStorageObject(localStorageKey + 'selectedListItem'));
+	const [location, setLocation] = useState<any>(getStorageObject(localStorageKey + 'location'));
+	const [center, setCenter] = useState<LatLng>(getStorageObject(localStorageKey + "center", { lat: 39.8283, lng: -98.5795 }) || { lat: 39.8283, lng: -98.5795 });
+	const [zoom, setZoom] = useState<number>(getStorageObject(localStorageKey + "zoom", 9) || 9);
 	const [selectedPlaces, setSelectedPlaces] = useState<string[]>([]);
 	const [mapInteracted, setMapInteracted] = useState<boolean>(false);
-	const [firstLoadListItem] = useState<any>(getStorageObject('selectedListItem', { id: "defaultId" }));
+	const [firstLoadListItem] = useState<any>(getStorageObject(localStorageKey + 'selectedListItem', { id: "defaultId" }));
 	const userSetZoom = useRef<boolean>(true);
 
 	useEffect(() => {
-		setStorageObject("selectedListItem", selectedListItem);
-	}, [selectedListItem]);
+		setStorageObject(localStorageKey + "selectedListItem", selectedListItem);
+	}, [selectedListItem, localStorageKey]);
 
 	useEffect(() => {
-		localStorage.setItem("zoom", zoom.toString());
-	}, [zoom]);
+		localStorage.setItem(localStorageKey + "zoom", zoom.toString());
+	}, [zoom, localStorageKey]);
 
 	useEffect(() => {
 		if (location == null) {
-			localStorage.removeItem("location");
+			localStorage.removeItem(localStorageKey + "location");
 		} else {
-			setStorageObject("location", location);
+			setStorageObject(localStorageKey + "location", location);
 		}
-	}, [location]);
+	}, [location, localStorageKey]);
 
 	useEffect(() => {
-		setStorageObject("center", center);
-	}, [center]);
+		setStorageObject(localStorageKey + "center", center);
+	}, [center, localStorageKey]);
 
 	const selectItem = (item: Listing, itemLocation: LatLng | null, zoom: number, center: LatLng) => {
 		setSelectedListItem(item);
@@ -98,7 +99,7 @@ export const MapProvider: React.FC<MapProviderProps> = ({ children, resetFilters
 	}, [resetFilters]);
 
 	const selectLocationEntity = (location: LatLng) => {
-		localStorage.removeItem("selectedListItem");
+		localStorage.removeItem(localStorageKey + "selectedListItem");
 		setTimeout(() => setLocation(location), 200);
 		setSelectedListItem(null);
 	};

package/src/contexts/mapListContext.tsx

@@ -53,6 +53,7 @@ interface MapListContextProps {
   hiddenFilters?: string[];
   containerStyle?: any;
   ExpandListComponent?: React.ComponentType<{ listing: any }> | ((listing: any) => JSX.Element) | null;
+  noEntities?: boolean;
 }
 
 const MapListContext = createContext<MapListContextProps | undefined>(undefined);
@@ -93,8 +94,11 @@ interface MapListProviderProps {
   defaultFilters?: Record<string, any>;
   containerStyle?: any;
 	localStorageKey: string;
-	getListingEntitiesCallback?: (entityIds: number[], origin?: string) => Promise<ListingEntity[]>;
+	getListingEntitiesCallback?: (origin?: string) => Promise<any>;
   ExpandListComponent?: React.ComponentType<{ listing: Listing }> | ((listing: Listing) => JSX.Element) | null;
+  hideMap?: boolean;
+  hideFilters?: boolean;
+  noEntities?: boolean;
 }
 
 export const MapListProvider: React.FC<MapListProviderProps> = ({
@@ -118,13 +122,16 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	containerStyle,
 	ExpandListComponent,
 	getListingEntitiesCallback,
-	localStorageKey
+	localStorageKey,
+	hideMap = false,
+	hideFilters = false,
+	noEntities = false
 }) => {
 	const firstLoadFilters = () =>{
 		let urlFilters = filtersFromURL(window.location)?.filters;
 		return  (setFiltersUrl === true && urlFilters && Object.keys(urlFilters).length > 0) ? urlFilters  : getStorageObject(localStorageKey + 'selectedFilters', {}) || {}
 	}
-	
+
 	const firstLoadQuery = (): string | null => {
 		if (resetFilters) return null;
 		// Check URL first
@@ -135,7 +142,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		// Fall back to localStorage
 		return getQuery(localStorageKey);
 	}
-	
+
 	const [allListings, setAllListings] = useState<Listing[]>([]);
 	const [filteredListings, setFilteredListings] = useState<Listing[]>([]);
 	const [loading, setLoading] = useState<boolean>(false);
@@ -144,7 +151,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 	const [sortSetting, setSortSetting] = useState<{ field: string; type: string }>(getStorageObject(localStorageKey + 'sortSetting', { field: 'position', type: 'asc' }) || { field: 'position', type: 'asc' });
 	const [listingEntities, setListingEntities] = useState<Record<number, ListingEntity> | null>({});
 	const [firstLoad, setFirstLoad] = useState<boolean>(true);
-	const [commuteLocation, setCommuteLocation] = useState<any | null>(getStorageObject('commuteLocation'));
+	const [commuteLocation, setCommuteLocation] = useState<any | null>(getStorageObject(localStorageKey + 'commuteLocation'));
 	const [selectedFilters, setSelectedFilters] = useState<Record<string, any>>(() => resetFilters ? {} : firstLoadFilters());
 	const [filterOptions, setFilterOptions] = useState<any>();
 	const [recruiters, setRecruiters] = useState<Record<number, Recruiter>>({});
@@ -161,7 +168,7 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		if (!sortSetting) return;
 		localStorage.setItem(localStorageKey + 'sortSetting', JSON.stringify(sortSetting));
 		setNewFilteredListings(filteredListings);
-	}, [sortSetting, localStorageKey]);
+	}, [sortSetting, localStorageKey, filteredListings]);
 
 	useEffect(() => {
 		const loadedFavorites = JSON.parse(localStorage.getItem(localStorageKey + 'favorites') || '[]');
@@ -172,34 +179,32 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		setStorageObject(localStorageKey + "commuteLocation", commuteLocation);
 	}, [commuteLocation, localStorageKey]);
 
+
 	useEffect(() => {
-		if (!commuteLocation) return;
+		if (!commuteLocation || noEntities) return;
 
 		async function fetchEntities() {
-			const distinctEntityIds = [
-				...new Set(allListings.map(listing => listing.entityId ?? -1))
-			];
 			try {
-				console.log(getListingEntitiesCallback);
-				console.log("fetching entities")
-				const fetchedEntities = getListingEntitiesCallback !== null && getListingEntitiesCallback !== undefined ? await getListingEntitiesCallback(distinctEntityIds,
-					`${commuteLocation.lat}, ${commuteLocation.lng}`) : await getListingEntities(
-					distinctEntityIds,
-					`${commuteLocation.lat}, ${commuteLocation.lng}`
-				);
+				let fetchedEntities;
+				if (getListingEntitiesCallback) {
+					fetchedEntities = await getListingEntitiesCallback(`${commuteLocation.lat}, ${commuteLocation.lng}`);
+				} else {
+					fetchedEntities = await getListingEntities(`${commuteLocation.lat}, ${commuteLocation.lng}`);
+				}
 				setListingEntities(fetchedEntities);
-				const newFilteredListings: Listing[] = [...filteredListings] ?? [];
+				// Update travelTime on listings
+				const newFilteredListings: Listing[] = [...filteredListings];
 				for (let i = 0; i < allListings.length; i++) {
 					const listing = newFilteredListings[i];
 					if (
 						listing &&
 						listing.fields &&
-						listing.entityId !== undefined &&
-						listing.entityId !== -1
+						listing.fields.entityKey &&
+						listing.fields.entityKey !== ''
 					) {
-						const entityId = listing.entityId;
-						const travelTime = fetchedEntities[entityId]?.travelTime;
-
+						const entityKey = listing.fields.entityKey;
+						// Try exact match first, then lowercase match for case-insensitive lookup
+						const travelTime = (fetchedEntities[entityKey] || fetchedEntities[entityKey.toLowerCase()])?.travelTime;
 						if (travelTime !== undefined && listing.fields) {
 							listing.fields.travelTime = travelTime;
 						}
@@ -211,35 +216,35 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 		}
 
 		fetchEntities();
-	}, [commuteLocation, allListings, siteConfig.companyId]);
+	}, [commuteLocation, allListings, siteConfig.companyId, getListingEntitiesCallback, noEntities]);
 
 	useEffect(() => {
 		const handleFetchListings = async () => {
-			if (!getStorageObject(localStorageKey + 'listings') ?? [].length) {
-				setLoading(true);
-			}
+		if (!(getStorageObject(localStorageKey + 'listings', []) || []).length) {
+			setLoading(true);
+		}
 
-			try {
-				const {
-					listingsResult,
-					fetchedEntities,
-					distinctItems
-				} = await fetchListings(commuteLocation, entities, listings, getListingEntitiesCallback);
-				if (defaultFilters) {
-					const filteredListings = listingsResult.filter(listing => {
-					if (!listing.fields) return false;
+		try {
+			const {
+				listingsResult,
+				entitiesByKey,
+				distinctItems
+			} = await fetchListings(commuteLocation, entities, listings, getListingEntitiesCallback, noEntities);
+			if (defaultFilters) {
+				const filteredListings = listingsResult.filter(listing => {
+				if (!listing.fields) return false;
 
-					return Object.keys(defaultFilters).every(filterKey => {
-						const filterValues = defaultFilters[filterKey as keyof typeof defaultFilters];
-						const listingValue = listing.fields ? listing.fields[filterKey as keyof typeof listing.fields] : null;
-						return filterValues.includes(listingValue);
-					});
+				return Object.keys(defaultFilters).every(filterKey => {
+					const filterValues = defaultFilters[filterKey as keyof typeof defaultFilters];
+					const listingValue = listing.fields ? listing.fields[filterKey as keyof typeof listing.fields] : null;
+					return filterValues.includes(listingValue);
 				});
-				setAllListings(filteredListings);
-			} else {
-				setAllListings(listingsResult);
-			}
-				setListingEntities(fetchedEntities);
+			});
+			setAllListings(filteredListings);
+		} else {
+			setAllListings(listingsResult);
+		}
+			setListingEntities(entitiesByKey);
 				setMapItems(distinctItems);
 			} catch (error) {
 				console.log(error);
@@ -369,7 +374,8 @@ export const MapListProvider: React.FC<MapListProviderProps> = ({
 			defaultFilters,
 			hiddenFilters,
 			containerStyle,
-			ExpandListComponent
+			ExpandListComponent,
+			noEntities
 		}}>
 			{children}
 		</MapListContext.Provider>

package/src/services/listingAggregatorService.ts

@@ -6,7 +6,8 @@ import { ListingEntity } from '~/types/ListingEntity';
 
 interface FetchListingsResult {
   listingsResult: Listing[];
-  fetchedEntities: Record<number, ListingEntity>;
+   entitiesByKey: Record<string, ListingEntity>;
+
   distinctItems: any; // Update this type based on the return type of getDistinctItemsByProximity
 }
 
@@ -14,39 +15,46 @@ const fetchListings = async (
 	commuteLocation: any | null = null,
 	entities: ListingEntity[] | null,
 	listings: Listing[] | null,
-	getListingEntitiesCallback?: (entityIds: number[], origin?: string) => Promise<ListingEntity[]>,
+	getListingEntitiesCallback?: (origin?: string) => Promise<ListingEntity[]>,
+	noEntities: boolean = false
 ): Promise<FetchListingsResult> => {
 	try {
 		const listingsResult = listings && listings.length > 0 ? listings : await getListings();
-		const distinctEntityIds: number[] = [
-			...new Set(listingsResult.map(listing => listing.entityId))
-		] as number[];
-
-		const fetchedEntities = !commuteLocation
-			? entities && entities.length > 0 ? entities : !getListingEntitiesCallback ? await getListingEntities(distinctEntityIds) : await getListingEntitiesCallback(distinctEntityIds)
-			: !getListingEntitiesCallback ? await getListingEntities(
-				distinctEntityIds,
-				`${commuteLocation.lat}, ${commuteLocation.lng}`
-			) : await getListingEntitiesCallback(	distinctEntityIds,
-				`${commuteLocation.lat}, ${commuteLocation.lng}`);
-		for (let i = 0; i < listingsResult.length; i++) {
-			const listing = listingsResult[i];
-			if (listing.entityId && listing.entityId !== -1 && listing.fields) {
-				const entity = fetchedEntities[listing.entityId];
-				if (entity) {
-					listing.fields.travelTime = entity.travelTime;
+
+		// Only fetch entities if noEntities is false
+		const fetchedEntities = noEntities ? {} : (
+			!commuteLocation
+				? entities && entities.length > 0 ? entities : !getListingEntitiesCallback ? await getListingEntities() : await getListingEntitiesCallback()
+				: !getListingEntitiesCallback ? await getListingEntities(
+					`${commuteLocation.lat}, ${commuteLocation.lng}`
+				) : await getListingEntitiesCallback(
+					`${commuteLocation.lat}, ${commuteLocation.lng}`)
+		);
+		 const entitiesByKey = fetchedEntities;
+		// Update travel time only if entities were fetched
+		if (!noEntities && entitiesByKey) {
+			for (let i = 0; i < listingsResult.length; i++) {
+				const listing = listingsResult[i];
+				if (listing.fields && listing.fields.entityKey && listing.fields.entityKey !== '' && listing.fields) {
+					// Try exact match first, then lowercase match for case-insensitive lookup
+					const entity = entitiesByKey[listing.fields.entityKey] || entitiesByKey[listing.fields.entityKey.toLowerCase()];
+					console.log("Entity for listing with travel time", listing.fields.entityKey, entity);
+
+					if (entity) {
+						listing.fields.travelTime = entity.travelTime;
+					}
 				}
 			}
 		}
 
 		const distinctItems = getDistinctItemsByProximity(
 			listingsResult,
-			fetchedEntities
+			entitiesByKey || {}
 		);
 
 		return {
 			listingsResult,
-			fetchedEntities,
+			entitiesByKey,
 			distinctItems
 		};
 	} catch (error) {

package/src/services/listingEntityService.ts

@@ -1,9 +1,9 @@
 import api from '~/apis/hcApi';
-import { ListingEntity } from '~/types/ListingEntity';
 
-export const getListingEntities = async (entityIds: number[], origin = ''): Promise<ListingEntity[]> => {
+export const getListingEntities = async (origin = ''): Promise<any> => {
 	try {
-		const response = await api.post<ListingEntity[]>(`/ListingEntities?origin=${origin}`, entityIds);
+		//need to update / or add better endpoint fo this to match original functioanlity
+		const response = await api.get<any>(`/listingentities/MapEntities?origin=${origin}`);
 		return response;
 	} catch (error) {
 		console.error("Error fetching listing entities:", error);

package/src/services/listingService.ts

@@ -5,18 +5,8 @@ import { Listing } from '../types/Listings';
 
 export const getListings = async (params?: GetListingsParams): Promise<Listing[]> => {
 	try {
-		const query = new URLSearchParams();
+		const response = await api.get(`/joblistings/maplistings`);
 
-		if (params) {
-			if (params.location) params.location.forEach(loc => query.append('location', loc));
-			if (params.category) params.category.forEach(cat => query.append('category', cat));
-			if (params.categoryClass) params.categoryClass.forEach(catClass => query.append('categoryClass', catClass));
-			if (params.education) params.education.forEach(edu => query.append('education', edu));
-			if (params.city) params.city.forEach(cty => query.append('city', cty));
-			if (params.state) params.state.forEach(st => query.append('state', st));
-		}
-
-		const response = await api.get(`/Listings?${query.toString()}`);
 		return response as Listing[];
 	} catch (error) {
 		console.error(error);

package/src/styles/components.css

@@ -0,0 +1,30 @@
+@config "../../tailwind.config.js";
+
+/* Only include components and utilities - no base styles */
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+	.track * {
+		@apply hc-pointer-events-none;
+	}
+
+	.stretched-link::after {
+		@apply hc-content-[''] hc-absolute hc-inset-0 hc-z-[1] hc-pointer-events-auto hc-bg-transparent;
+	}
+}
+
+/* Component-specific utilities */
+.fit-content {
+	height: fit-content;
+}
+
+/* CSS Variables for theming - these should be set by the consuming app */
+:root {
+	--ui-text: #000000;
+	--ui-accent: #959595;
+	--primary: #959595;
+	--primary-dark: #959595;
+	--secondary: #959595;
+	--secondary-dark: #959595;
+}

package/src/types/GetListingParams.ts

@@ -1,7 +1,7 @@
 export type GetListingsParams = {
 	location?: string[];
 	category?: string[];
-	categoryClass?: string[];
+	subCategory?: string[];
 	education?: string[];
 	city?: string[];
 	state?: string[];

package/src/types/ListingEntity.ts

@@ -1,9 +1,10 @@
 import { Address } from './Address';
 
 export type ListingEntity = {
-  id: number;
+  id: string;
   listingId: number;
   latitude: number;
+	entityKey: string;
   longitude: number;
   entityDisplayName?: string;
   address?: Address;

package/src/types/ListingFields.ts

@@ -2,9 +2,10 @@ export type ListingFields = {
 	posted?: string;
 	subTitle?: string;
 	education?: string;
-	position?: string;
+	title?: string;
 	category?: string;
-	categoryClass?: string;
+	subCategory?: string;
+	applyUrl?: string;
 	shift?: string;
 	custom1?: string;
 	custom2?: string;
@@ -22,5 +23,6 @@ export type ListingFields = {
 	useClientJobUrl?: boolean;
 	dateCreated: Date;
 	dateLastEdited?: Date;
+	entityKey: string;
 	travelTime?: string;
   }

package/src/types/Listings.ts

@@ -7,7 +7,6 @@ import { SimilarListing } from './SimilarListing';
 export type Listing = {
   id: number;
   fields?: ListingFields;
-  entityId?: number;
   applyUrl?: string;
   applyOnline?: number;
   detailsUrl?: string;

package/src/util/filterUtil.js

@@ -82,17 +82,17 @@ export const generateFilterOptions = (
 			if (fieldName === parentField && filterOptions?.filters) {
 				return filterOptions.filters.find(filter => filter.id === fieldName);
 			}
-			if(fieldName == 'categoryClass'){
+			if(fieldName == 'category'){
 				return {
 					id: fieldName,
 					title: siteConfig.fieldNames[fieldName],
 					items: getFilterOptions(allListings, allListings, fieldName)
 				};
 			}
-			if(fieldName == 'category' && selectedFilters.categoryClass){
-				const categoryClassKeys = Object.keys(selectedFilters.categoryClass);
+			if(fieldName == 'subCategory' && selectedFilters.category){
+				const categoryKeys = Object.keys(selectedFilters.category);
 				const filteredListings = allListings.filter(
-					x => categoryClassKeys.includes(x.fields?.categoryClass)
+					x => categoryKeys.includes(x.fields?.category)
 				);
 				return {
 					id: fieldName,
@@ -255,9 +255,9 @@ function searchResults(results, query) {
 		'fields.posted',
 		'fields.subtitle',
 		'fields.education',
-		'fields.position',
+		'fields.title',
 		'fields.category',
-		'fields.categoryclass',
+		'fields.subCategory',
 		'fields.shift',
 		'fields.citystate',
 		'fields.city',

package/src/util/mapUtil.js

@@ -1,54 +1,59 @@
-export const getDistinctItemsByProximity = (items, listingEntitiesDetails) => {
+export const getDistinctItemsByProximity = (items, listingEntitiesDetailsInput) => {
 	const clusters = {};
 
-	if (!listingEntitiesDetails) return [];
+	if (!listingEntitiesDetailsInput) return [];
+
+	const listingEntitiesDetails = Array.isArray(listingEntitiesDetailsInput)
+		? listingEntitiesDetailsInput.reduce((acc, entity) => {
+			if (entity?.entityKey) acc[entity.entityKey.toLowerCase()] = entity;
+			return acc;
+		  }, {})
+		: Object.keys(listingEntitiesDetailsInput).reduce((acc, key) => {
+			acc[key.toLowerCase()] = listingEntitiesDetailsInput[key];
+			return acc;
+		  }, {});
 
 	const closeItemPairs = findCloseItems(listingEntitiesDetails);
 	if (closeItemPairs.length > 0) {
-		listingEntitiesDetails = adjustItemPositions(
-			listingEntitiesDetails,
-			closeItemPairs
-		);
+		const adjusted = adjustItemPositions(listingEntitiesDetails, closeItemPairs);
+		Object.assign(listingEntitiesDetails, adjusted);
 	}
 
 	items?.forEach(item => {
-		if(item.entityId !== -1){
-
-			const entityDetails = listingEntitiesDetails[item.entityId];
-
-			if (!entityDetails) {
-				console.error(`Details not found for entityId: ${item.entityId}`);
-				return;
-			}
+		const entityKey = item?.fields?.entityKey;
+		if (!entityKey || entityKey === '-1') return;
+		const entityDetails = listingEntitiesDetails[entityKey.toLowerCase()];
+		if (!entityDetails) {
+			console.error(`Details not found for entityKey: ${entityKey}`);
+			return;
+		}
 
-			item.mapDetails = entityDetails;
+		item.mapDetails = entityDetails;
 
-			if (!clusters[item.entityId]) {
-				clusters[item.entityId] = {
-					...item.mapDetails,
-					items: { [item.id]: item }
-				};
-			} else {
-				clusters[item.entityId].items[item.id] = item;
-			}}
+		const normalizedEntityKey = entityKey.toLowerCase();
+		if (!clusters[normalizedEntityKey]) {
+			clusters[normalizedEntityKey] = {
+				...entityDetails,
+				items: { [item.id]: item }
+			};
+		} else {
+			clusters[normalizedEntityKey].items[item.id] = item;
+		}
 	});
 
 	return Object.values(clusters);
 };
 
-export const findCloseItems = itemsObj => {
+export const findCloseItems = entitiesByKey => {
 	const closeItems = [];
-	const items = Object.values(itemsObj); // Convert object to array for iteration
+	const items = Object.values(entitiesByKey); // Convert object to array
 	const proximityThreshold = 0.0001;
 
 	for (let i = 0; i < items.length; i++) {
 		for (let j = i + 1; j < items.length; j++) {
 			const distanceLat = Math.abs(items[i].latitude - items[j].latitude);
 			const distanceLng = Math.abs(items[i].longitude - items[j].longitude);
-			if (
-				distanceLat < proximityThreshold &&
-				distanceLng < proximityThreshold
-			) {
+			if (distanceLat < proximityThreshold && distanceLng < proximityThreshold) {
 				closeItems.push({ item1: items[i], item2: items[j] });
 			}
 		}
@@ -57,14 +62,18 @@ export const findCloseItems = itemsObj => {
 	return closeItems;
 };
 
-export const adjustItemPositions = (itemsObj, closeItemPairs) => {
+export const adjustItemPositions = (entitiesByKey, closeItemPairs) => {
 	const adjustmentValue = 0.0001;
-	const adjustedItems = { ...itemsObj }; // Create a shallow copy of the object
+	const adjustedItems = { ...entitiesByKey };
 
 	closeItemPairs.forEach(pair => {
-		if (adjustedItems[pair.item1.id] && adjustedItems[pair.item2.id]) {
-			adjustedItems[pair.item2.id].latitude += adjustmentValue;
-			adjustedItems[pair.item2.id].longitude += adjustmentValue;
+		const key2 = pair.item2.entityKey;
+		if (adjustedItems[key2]) {
+			adjustedItems[key2] = {
+				...adjustedItems[key2],
+				latitude: adjustedItems[key2].latitude + adjustmentValue,
+				longitude: adjustedItems[key2].longitude + adjustmentValue
+			};
 		}
 	});
 
@@ -74,13 +83,15 @@ export const adjustItemPositions = (itemsObj, closeItemPairs) => {
 export const clusterOptions = (clusterGridSize, fillColor) => {
 	return {
 		gridSize: clusterGridSize,
-		maxZoom:15,
-		styles:[{
-			url: createSvgDataUri(fillColor),
-			textColor:'white',
-			height: 40,
-			width: 40
-		}]
+		maxZoom: 15,
+		styles: [
+			{
+				url: createSvgDataUri(fillColor),
+				textColor: 'white',
+				height: 40,
+				width: 40
+			}
+		]
 	};
 };