Search favorites or tracks by name

map/src/infoblock/components/InformationBlock.jsx

@@ -23,10 +23,13 @@ import {
     MAIN_URL_WITH_SLASH,
     MENU_INFO_CLOSE_SIZE,
     MENU_INFO_OPEN_SIZE,
+    SEARCH_RESULT_URL,
+    SEARCH_URL,
     SHARE_FILE_MAIN_URL,
     SHARE_MENU_URL,
     TRACKS_URL,
 } from '../../manager/GlobalManager';
+import { buildSearchParamsFromQuery } from '../../util/hooks/search/useSearchNav';
 import { isVisibleTrack } from '../../menu/visibletracks/VisibleTracks';
 import WptDetails from './wpt/WptDetails';
 import WptPhotoList from './wpt/WptPhotoList';
@@ -366,11 +369,13 @@ export default function InformationBlock({
     function handleCloseTrackContextMenu() {
         setShowInfoBlock(false);
 
+        const wasCloudTrack = isCloudTrack(ctx);
+
         if (!isTrackAnalyzer(ctx)) {
             closeTrackAnalyzer();
         }
-        if (ctx.selectedGpxFile.mapObj) {
-            closeMapObjectMenu();
+        if (ctx.selectedGpxFile?.mapObj) {
+            closeMapObjectMenu({ wasCloudTrack });
         } else if (isCloudTrack(ctx)) {
             closeCloudTrack();
         } else if (isLocalTrack(ctx)) {
@@ -381,10 +386,30 @@ export default function InformationBlock({
         }
     }
 
-    function closeMapObjectMenu() {
-        ctx.setCloseMapObj(true);
-        if (!isEmpty(ctx.gpxFiles) && ctx.gpxFiles[ctx.selectedGpxFile.name]) {
-            ctx.mutateGpxFiles((o) => (o[ctx.selectedGpxFile.name].mapObj = null));
+    function closeMapObjectMenu({ wasCloudTrack } = {}) {
+        const name = ctx.selectedGpxFile?.name;
+        if (name && !isEmpty(ctx.gpxFiles) && ctx.gpxFiles[name]) {
+            ctx.mutateGpxFiles((o) => (o[name].mapObj = null));
+        }
+
+        const returnToSearch =
+            wasCloudTrack &&
+            ctx.searchQuery &&
+            (ctx.searchQuery.query || ctx.searchQuery.type) &&
+            ctx.searchResult?.features?.length;
+
+        if (wasCloudTrack) {
+            setTrackName(null);
+        }
+
+        if (returnToSearch) {
+            navigate({
+                pathname: MAIN_URL_WITH_SLASH + SEARCH_URL + SEARCH_RESULT_URL,
+                search: buildSearchParamsFromQuery(ctx.searchQuery),
+                hash: location.hash,
+            });
+        } else {
+            ctx.setCloseMapObj(true);
         }
     }
 

map/src/manager/FavoritesManager.js

@@ -693,6 +693,20 @@ export function getSize(group, t) {
         : 'empty';
 }
 
+export function getFavoriteMenuIconHtml({ wpt = null, icon, color, background } = {}) {
+    const point = wpt ?? {};
+    const rawHtml = createPoiIcon({
+        point,
+        icon: icon ?? wpt?.icon,
+        color: color ?? wpt?.color,
+        background: background ?? wpt?.background,
+        hasBackgroundLight: false,
+    }).options.html;
+    const bg = background ?? wpt?.background;
+
+    return changeIconSizeWpt(removeShadowFromIconWpt(rawHtml), 18, 30, bg);
+}
+
 export function getFavMenuListByLayers({ layers, wpts, currentLoc, pointsGroups = null }) {
     let markerList = [];
     Object.values(layers).forEach((value) => {
@@ -705,14 +719,9 @@ export function getFavMenuListByLayers({ layers, wpts, currentLoc, pointsGroups
             return;
         }
         const appearance = resolveWptAppearance(wpt, pointsGroups);
-        const icon = createPoiIcon({
-            point: wpt,
-            ...appearance,
-            hasBackgroundLight: false,
-        }).options.html;
         const marker = {
             name: value.options.name,
-            icon: changeIconSizeWpt(removeShadowFromIconWpt(icon), 18, 30, appearance.background),
+            icon: getFavoriteMenuIconHtml({ wpt, ...appearance }),
             layer: value,
             color: appearance.color,
             background: appearance.background,
@@ -726,6 +735,31 @@ export function getWptByTitle(title, wpts) {
     return wpts.find((wpt) => wpt.name === title);
 }
 
+/** Build menu marker + group for opening a favorite from search (requires map markers loaded). */
+export function resolveFavoriteMarkerForSearch(ctx, groupId, wptName) {
+    const group = ctx.favorites?.groups?.find((g) => g.id === groupId);
+    const mapObj = ctx.favorites?.mapObjs?.[groupId];
+    if (!group || !mapObj?.wpts || !mapObj?.markers?._layers) {
+        return null;
+    }
+    const wpt = getWptByTitle(wptName, mapObj.wpts);
+    if (!wpt) {
+        return null;
+    }
+    const layer = Object.values(mapObj.markers._layers).find((l) => l.options?.name === wptName);
+    if (!layer) {
+        return null;
+    }
+    const marker = {
+        name: wptName,
+        icon: getFavoriteMenuIconHtml({ wpt }),
+        layer,
+        color: wpt.color,
+        background: wpt.background,
+    };
+    return { group, marker };
+}
+
 export function addLocDist({ location, markers = null, wpts = null }) {
     let res = [];
     if (location && location !== LOCATION_UNAVAILABLE) {

map/src/map/layers/SearchLayer.js

@@ -23,6 +23,8 @@ import {
     POI_NAME,
     TYPE_OSM_TAG,
     TYPE_OSM_VALUE,
+    COLOR_NAME_EXTENSION,
+    BACKGROUND_TYPE_EXTENSION,
 } from '../../infoblock/components/wpt/WptTagsProvider';
 import { changeIconColor, createPoiIcon, DEFAULT_ICON_SIZE } from '../markers/MarkerOptions';
 import i18n from '../../i18n';
@@ -37,6 +39,9 @@ import { hideMarkersNearPin } from '../util/MarkerSelectionService';
 import { POI_OBJECTS_KEY, useRecentDataSaver } from '../../util/hooks/menu/useRecentDataSaver';
 import { useNavigate } from 'react-router-dom';
 import { getCurrentTimeParams } from '../../util/Utils';
+import { getGpxFiles, prepareName, EMPTY_FILE_NAME } from '../../manager/track/TracksManager';
+import { resolveFavoriteMarkerForSearch } from '../../manager/FavoritesManager';
+import { addFavoriteToMap } from '../../menu/favorite/FavoriteItem';
 
 export const SEARCH_TYPE_CATEGORY = 'category';
 export const SEARCH_LAYER_ID = 'search-layer';
@@ -45,6 +50,7 @@ export const SEARCH_ICON_MAP_LOCATION = 'location';
 export const SEARCH_ICON_MAP_BUILDING = 'house';
 export const SEARCH_ICON_MAP_STREET = 'street';
 export const SEARCH_ICON_MAP_INTERSECTION = 'intersection';
+export const SEARCH_ICON_MAP_GPX_TRACK = 'gpx_track';
 
 export const ZOOM_TO_MAP = 17;
 
@@ -58,13 +64,18 @@ export const searchTypeMap = {
     CITY: 'CITY',
     TOWN: 'TOWN',
     VILLAGE: 'VILLAGE',
+    GPX_TRACK: 'GPX_TRACK',
+    FAVORITE: 'FAVORITE',
 };
 
+export const FAVORITE_HIT_GROUP_ID = 'favoriteHitGroupId';
+
 export const typeIconMap = {
     [searchTypeMap.LOCATION]: SEARCH_ICON_MAP_LOCATION,
     [searchTypeMap.HOUSE]: SEARCH_ICON_MAP_BUILDING,
     [searchTypeMap.STREET]: SEARCH_ICON_MAP_STREET,
     [searchTypeMap.INTERSECTION]: SEARCH_ICON_MAP_INTERSECTION,
+    [searchTypeMap.GPX_TRACK]: SEARCH_ICON_MAP_GPX_TRACK,
 };
 
 export function getObjIdSearch(obj) {
@@ -76,6 +87,88 @@ export function getObjIdSearch(obj) {
     return `${obj.geometry.coordinates[1]},${obj.geometry.coordinates[0]}`;
 }
 
+function normalize(s) {
+    return s?.normalize('NFKD').replace(/\p{M}/gu, '').toLowerCase().trim();
+}
+
+export function searchFavoriteFeatures({ favorites, query }) {
+    if (!query || !favorites?.groups?.length || !favorites.mapObjs) {
+        return [];
+    }
+    const q = normalize(query);
+    if (!q) {
+        return [];
+    }
+
+    const features = [];
+
+    for (const group of favorites.groups) {
+        if (!group?.id) {
+            continue;
+        }
+        const mapObj = favorites.mapObjs[group.id];
+        const wpts = mapObj?.wpts;
+        if (!wpts?.length) {
+            continue;
+        }
+
+        for (const wpt of wpts) {
+            if (!wpt?.name) {
+                continue;
+            }
+            const nameNorm = normalize(wpt.name);
+            const descNorm = normalize(wpt.desc ?? '');
+            const textHit = nameNorm.includes(q) || (descNorm && descNorm.includes(q));
+            if (!textHit) {
+                continue;
+            }
+
+            if (wpt.lat == null || wpt.lon == null) {
+                continue;
+            }
+
+            features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: [wpt.lon, wpt.lat],
+                },
+                properties: {
+                    [CATEGORY_TYPE]: searchTypeMap.FAVORITE,
+                    [CATEGORY_NAME]: wpt.name,
+                    [POI_NAME]: wpt.name,
+                    [FAVORITE_HIT_GROUP_ID]: group.id,
+                    [ICON_KEY_NAME]: wpt.icon,
+                    [COLOR_NAME_EXTENSION]: wpt.color,
+                    [BACKGROUND_TYPE_EXTENSION]: wpt.background,
+                    [FINAL_POI_ICON_NAME]: wpt.icon,
+                    ...(wpt.address ? { address: wpt.address } : {}),
+                },
+            });
+        }
+    }
+
+    return features;
+}
+
+function searchCloudTrackFeatures({ listFiles, query }) {
+    if (!query || !listFiles?.uniqueFiles) return [];
+    const q = normalize(query);
+    if (!q) return [];
+
+    return getGpxFiles(listFiles)
+        .filter((f) => !f.name.endsWith(EMPTY_FILE_NAME))
+        .filter((f) => normalize(prepareName(f.name, true)).includes(q))
+        .map((f) => ({
+            type: 'Feature',
+            geometry: { type: 'Point', coordinates: [0, 0] },
+            properties: {
+                [CATEGORY_TYPE]: searchTypeMap.GPX_TRACK,
+                [CATEGORY_NAME]: f.name,
+            },
+        }));
+}
+
 export default function SearchLayer() {
     const ctx = useContext(AppContext);
     const map = useMap();
@@ -186,7 +279,16 @@ export default function SearchLayer() {
             });
             if (response?.ok) {
                 const data = await response.json();
-                ctx.setSearchResult(data);
+                const cloudFeatures = searchCloudTrackFeatures({
+                    listFiles: ctx.listFiles,
+                    query: searchData.query,
+                });
+                const favoriteFeatures = searchFavoriteFeatures({
+                    favorites: ctx.favorites,
+                    query: searchData.query,
+                });
+                const features = [...cloudFeatures, ...favoriteFeatures, ...(data?.features ?? [])];
+                ctx.setSearchResult({ ...data, features });
             } else {
                 ctx.setSearchResult(null);
             }
@@ -229,10 +331,21 @@ export default function SearchLayer() {
     }, [ctx.searchResult]);
 
     function onClick(e) {
+        const opts = e.sourceTarget.options;
+        if (opts[CATEGORY_TYPE] === searchTypeMap.FAVORITE) {
+            const groupId = opts[FAVORITE_HIT_GROUP_ID];
+            const wptName = opts[POI_NAME] ?? opts[CATEGORY_NAME];
+            const resolved = resolveFavoriteMarkerForSearch(ctx, groupId, wptName);
+            if (resolved) {
+                addFavoriteToMap({ group: resolved.group, marker: resolved.marker, ctx, mapObj: true });
+            }
+            return;
+        }
+
         ctx.setCurrentObjectType(OBJECT_SEARCH);
 
         const poi = {
-            options: e.sourceTarget.options,
+            options: opts,
             latlng: e.sourceTarget._latlng,
             mapObj: true,
         };
@@ -274,6 +387,16 @@ export default function SearchLayer() {
                             iconName: obj.properties[POI_ICON_NAME],
                         });
                     icon = await getPoiIcon(obj, innerCache, finalIconName);
+                } else if (objType === searchTypeMap.FAVORITE) {
+                    const p = obj.properties;
+                    icon = createPoiIcon({
+                        point: {},
+                        icon: p[ICON_KEY_NAME],
+                        color: p[COLOR_NAME_EXTENSION],
+                        background: p[BACKGROUND_TYPE_EXTENSION],
+                        hasBackgroundLight: false,
+                    });
+                    finalIconName = p[ICON_KEY_NAME] ?? null;
                 } else {
                     finalIconName = getIconByType(objType);
                     icon = await getSearchIcon(obj, innerCache, finalIconName);

map/src/map/util/Clusterizer.js

@@ -5,6 +5,7 @@ import { createTooltip, TOOLTIP_MAX_LENGTH } from './MapManager';
 import { getObjIdSearch, searchTypeMap } from '../layers/SearchLayer';
 import {
     CATEGORY_TYPE,
+    COLOR_NAME_EXTENSION,
     FINAL_POI_ICON_NAME,
     ICON_KEY_NAME,
     POI_ICON_NAME,
@@ -342,27 +343,35 @@ export function createSecondaryMarker(obj) {
     }
     const latlng = L.latLng(obj.geometry.coordinates[1], obj.geometry.coordinates[0]);
 
-    let finalIconName = obj.properties[FINAL_POI_ICON_NAME];
+    const props = obj.properties;
+    let finalIconName = props[FINAL_POI_ICON_NAME];
     if (!finalIconName) {
-        if (searchTypeMap.POI === obj.properties[CATEGORY_TYPE]) {
+        if (searchTypeMap.POI === props[CATEGORY_TYPE]) {
             finalIconName = PoiManager.getIconNameForPoiType({
-                iconKeyName: obj.properties[ICON_KEY_NAME],
-                typeOsmTag: obj.properties[TYPE_OSM_TAG],
-                typeOsmValue: obj.properties[TYPE_OSM_VALUE],
-                iconName: obj.properties[POI_ICON_NAME],
+                iconKeyName: props[ICON_KEY_NAME],
+                typeOsmTag: props[TYPE_OSM_TAG],
+                typeOsmValue: props[TYPE_OSM_VALUE],
+                iconName: props[POI_ICON_NAME],
             });
+        } else if (searchTypeMap.FAVORITE === props[CATEGORY_TYPE]) {
+            finalIconName = props[ICON_KEY_NAME];
         } else {
-            finalIconName = getIconByType(obj.properties[CATEGORY_TYPE]);
+            finalIconName = getIconByType(props[CATEGORY_TYPE]);
         }
     }
 
-    return new SimpleDotMarker(latlng, obj, {
-        ...obj.properties,
-        id: obj.properties.id,
+    const markerOpts = {
+        ...props,
+        id: props.id,
         idObj: getObjIdSearch(obj),
         simple: true,
         [FINAL_POI_ICON_NAME]: finalIconName,
-    }).build();
+    };
+    if (searchTypeMap.FAVORITE === props[CATEGORY_TYPE]) {
+        markerOpts.fillColor = props[COLOR_NAME_EXTENSION] ?? SimpleDotMarker.defaultOptions.fillColor;
+    }
+
+    return new SimpleDotMarker(latlng, obj, markerOpts).build();
 }
 
 export function addMarkerTooltip({