feat: add search and select functionality for crags #1184 #1383

Ilnur-Su · 2025-10-01T22:36:34Z

This Pull request Fixes #1184

Adding rock search and selection functions.

Type of PR.

Description

Added search and selection functionality for crags in the map toolbar:

Input field for searching crags by areaName
Dropdown suggestions with clickable results
Selecting a crag highlights it and moves the map to its position
Improved UX for navigating crags directly from the toolbar

What this PR achieves

Introduced allCrags state populated from map features
Added highlightCrag function to select and fly to a crag
Extended MapToolbar props (cragsList, onSelectCrag)
Implemented search with live suggestions in MapToolbar

Screenshots

Search and Suggestions

Marking a selected crag

Fix a sleepy mistake

fix: bugs fixed after review

mikeschen

Some comments. I will try to test out sometime soonish, I am slammed with day job and contracting job which is why I havent reviewed sooner :(

mikeschen · 2025-10-17T20:27:54Z

src/components/maps/GlobalMap.tsx

+    if (!mapInstance) return
+  const features = mapInstance.querySourceFeatures('crags', { sourceLayer: 'crags' })
+  const cragsFeatures = features
+    .map(f => tileToFeature('crag-name-labels', {x:0,y:0}, f.geometry, f.properties as TileProps, mapInstance))


please use var name as "feature" rather than "f"

mikeschen · 2025-10-17T20:28:44Z

src/components/maps/MapToolbar.tsx

+    }
+
+    const filtered = cragsList.filter(c => 
+      c.data.areaName.toLowerCase().includes(value.toLowerCase())


please use "crag" rather than "c" for var name

mikeschen · 2025-10-17T20:29:13Z

src/components/maps/MapToolbar.tsx

+        />
+        {suggestions.length > 0 && (
+          <ul className='absolute top-full left-0 w-full bg-white shadow-lg rounded-md max-h-48 overflow-y-auto z-50'>
+            {suggestions.map(c => (


please use "suggestion"rather than "c" for var name

mikeschen · 2025-10-17T20:30:13Z

src/components/maps/GlobalMap.tsx

+  const features = mapInstance.querySourceFeatures('crags', { sourceLayer: 'crags' })
+  const cragsFeatures = features
+    .map(f => tileToFeature('crag-name-labels', {x:0,y:0}, f.geometry, f.properties as TileProps, mapInstance))
+    .filter((f): f is ActiveFeature => f !== null) // фильтруем null и сохраняем тип


leftover comment.

Copilot

Pull Request Overview

This PR adds search and selection functionality for crags in the map toolbar, allowing users to quickly find and navigate to specific climbing areas.

Key Changes:

Added search input with live filtering of crags by name
Implemented crag selection that highlights the selected crag and flies the map to its location
Extracted all crags from map features into state for search functionality

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
src/components/maps/MapToolbar.tsx	Added search input, suggestions dropdown, and handlers for filtering and selecting crags
src/components/maps/GlobalMap.tsx	Added state for all crags, extraction logic from map features, and highlight/fly-to function for selected crags

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-10-28T01:49:24Z

src/components/maps/GlobalMap.tsx

+  const features = mapInstance.querySourceFeatures('crags', { sourceLayer: 'crags' })
+  const cragsFeatures = features
+    .map(f => tileToFeature('crag-name-labels', {x:0,y:0}, f.geometry, f.properties as TileProps, mapInstance))
+    .filter((f): f is ActiveFeature => f !== null) // фильтруем null и сохраняем тип


Comment is written in Russian ('фильтруем null и сохраняем тип' means 'filter null and preserve type'). Project comments should be in English for consistency. Replace with: 'filter out null values and preserve type'.

Suggested change

.filter((f): f is ActiveFeature => f !== null) // фильтруем null и сохраняем тип

.filter((f): f is ActiveFeature => f !== null) // filter out null values and preserve type

Copilot · 2025-10-28T01:49:25Z

src/components/maps/MapToolbar.tsx

+              <div className='relative w-64'>
+        <input 
+          type="text"
+          value={search}
+          onChange={handleSearchChange}
+          placeholder="Search crags..."
+          className='input input-bordered w-full'
+        />
+        {suggestions.length > 0 && (
+          <ul className='absolute top-full left-0 w-full bg-white shadow-lg rounded-md max-h-48 overflow-y-auto z-50'>
+            {suggestions.map(c => (
+              <li 
+                key={c.data.id} 
+                onClick={() => handleSelect(c)}
+                className='cursor-pointer p-2 hover:bg-gray-200'
+              >
+                {c.data.areaName}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>


Inconsistent indentation. This div has extra leading spaces compared to surrounding elements. It should align with the Checkbox components at the same nesting level.

Suggested change

<div className='relative w-64'>

<input

type="text"

value={search}

onChange={handleSearchChange}

placeholder="Search crags..."

className='input input-bordered w-full'

/>

{suggestions.length > 0 && (

<ul className='absolute top-full left-0 w-full bg-white shadow-lg rounded-md max-h-48 overflow-y-auto z-50'>

{suggestions.map(c => (

<li

key={c.data.id}

onClick={() => handleSelect(c)}

className='cursor-pointer p-2 hover:bg-gray-200'

>

{c.data.areaName}

</li>

))}

</ul>

)}

</div>

<div className='relative w-64'>

<input

type="text"

value={search}

onChange={handleSearchChange}

placeholder="Search crags..."

className='input input-bordered w-full'

/>

{suggestions.length > 0 && (

<ul className='absolute top-full left-0 w-full bg-white shadow-lg rounded-md max-h-48 overflow-y-auto z-50'>

{suggestions.map(c => (

<li

key={c.data.id}

onClick={() => handleSelect(c)}

className='cursor-pointer p-2 hover:bg-gray-200'

>

{c.data.areaName}

</li>

))}

</ul>

)}

</div>

Copilot · 2025-10-28T01:49:25Z

src/components/maps/GlobalMap.tsx

+    setClickInfo(prev => {
+      if (prev) setActiveFeatureVisual(prev, { selected: false, hover: false })
+      setActiveFeatureVisual(crag, { selected: true, hover: false })
+      return crag
+    })


The setClickInfo callback is using the previous state incorrectly. The callback receives prev but doesn't use it in the return logic - it always returns crag regardless of the previous value. This should likely be a direct call: setClickInfo(crag) followed by the visual state updates, or the callback should properly handle the state transition.

Suggested change

setClickInfo(prev => {

if (prev) setActiveFeatureVisual(prev, { selected: false, hover: false })

setActiveFeatureVisual(crag, { selected: true, hover: false })

return crag

})

if (clickInfo) setActiveFeatureVisual(clickInfo, { selected: false, hover: false })

setActiveFeatureVisual(crag, { selected: true, hover: false })

setClickInfo(crag)

Copilot · 2025-10-28T01:49:25Z

src/components/maps/GlobalMap.tsx

+  const features = mapInstance.querySourceFeatures('crags', { sourceLayer: 'crags' })
+  const cragsFeatures = features
+    .map(f => tileToFeature('crag-name-labels', {x:0,y:0}, f.geometry, f.properties as TileProps, mapInstance))


Magic values {x:0, y:0} are passed to tileToFeature without explanation. Consider extracting this as a named constant (e.g., DEFAULT_TILE_COORDS) or adding a comment explaining why these coordinates are used when querying all crags.

Ilnur-Su added 3 commits October 2, 2025 01:25

feat: add search and select functionality for crags

de6cd3f

Update GlobalMap.tsx

ab57518

Fix a sleepy mistake

Update MapToolbar.tsx

4cbb69c

fix: bugs fixed after review

mikeschen reviewed Oct 17, 2025

View reviewed changes

mikeschen requested review from Copilot and mikeschen October 28, 2025 01:48

Copilot AI reviewed Oct 28, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: add search and select functionality for crags #1184 #1383

feat: add search and select functionality for crags #1184 #1383

Uh oh!

Ilnur-Su commented Oct 1, 2025 •

edited

Loading

Uh oh!

mikeschen left a comment

Uh oh!

mikeschen Oct 17, 2025

Uh oh!

mikeschen Oct 17, 2025

Uh oh!

mikeschen Oct 17, 2025

Uh oh!

mikeschen Oct 17, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 28, 2025

Uh oh!

Copilot AI Oct 28, 2025

Uh oh!

Copilot AI Oct 28, 2025

Uh oh!

Copilot AI Oct 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	.filter((f): f is ActiveFeature => f !== null) // фильтруем null и сохраняем тип
	.filter((f): f is ActiveFeature => f !== null) // filter out null values and preserve type

Uh oh!

feat: add search and select functionality for crags #1184 #1383

Are you sure you want to change the base?

feat: add search and select functionality for crags #1184 #1383

Uh oh!

Conversation

Ilnur-Su commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Adding rock search and selection functions.

Type of PR.

Description

What this PR achieves

Screenshots

Search and Suggestions

Marking a selected crag

Uh oh!

mikeschen left a comment

Choose a reason for hiding this comment

Uh oh!

mikeschen Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

mikeschen Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

mikeschen Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

mikeschen Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Ilnur-Su commented Oct 1, 2025 •

edited

Loading