feat: add clusters to inspector panel #283
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request adds support for displaying clusters in the inspector panel. When multiple markers are selected on the map, the inspector now shows a "Cluster" view that displays all selected markers in a list format, rather than showing individual marker details.
Changes:
- Added
LayerType.Clusterenum value to support the cluster inspector type - Modified inspector logic to detect when multiple records are selected and return cluster-specific content
- Implemented UI changes to show only the "Markers" tab for clusters (hiding "Data" and "Config" tabs)
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types.ts | Added Cluster to LayerType enum |
| src/app/map/[id]/hooks/useInspector.ts | Added cluster detection logic for multi-record selection and updated dependency array |
| src/app/map/[id]/components/inspector/InspectorPanel.tsx | Added safeActiveTab logic and conditional rendering for cluster-specific tabs |
| src/app/map/[id]/components/inspector/InspectorMarkersTab.tsx | Added ClusterMarkersList component rendering for cluster type |
| src/app/map/[id]/components/inspector/ClusterMarkersList.tsx | New component to display markers within a cluster |
| src/app/map/[id]/components/inspector/MarkersLists.tsx | Extended areaType to include "cluster" option |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| return { | ||
| type: "Feature", | ||
| geometry: { | ||
| // [0, 0] should never happen because these records are in a cluster on the map | ||
| coordinates: [r.geocodePoint?.lng || 0, r.geocodePoint?.lat || 0], | ||
| type: "Point", | ||
| }, | ||
| properties: { | ||
| id: r.id, | ||
| name: r.name, | ||
| dataSourceId: r.dataSourceId, | ||
| matched: true, | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Records without valid geocodePoints should be filtered out rather than creating markers with coordinates [0, 0]. Consider adding a null check for r.geocodePoint and returning null for records that don't have valid coordinates, or check if both lng and lat exist and are not 0 before creating the feature.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…mapped into feat/inspect-cluster
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| }, | ||
| }; | ||
| }) | ||
| .filter((r) => r !== null); |
There was a problem hiding this comment.
The filter method doesn't properly narrow the TypeScript type from (MarkerFeature | null)[] to MarkerFeature[]. TypeScript's built-in filter doesn't use a type predicate, so markerFeatures will still have type (MarkerFeature | null)[] instead of MarkerFeature[]. This could cause type errors when passing markerFeatures to MembersList or MarkersList components. Consider using a type predicate or type assertion: .filter((r): r is MarkerFeature => r !== null)
| .filter((r) => r !== null); | |
| .filter((r): r is MarkerFeature => r !== null); |
No description provided.