From f5a12d6c0b8d799a19027cc1abb4249cdf5c889e Mon Sep 17 00:00:00 2001 From: Jeremy Myers Date: Mon, 10 Nov 2025 10:45:58 -0500 Subject: [PATCH 1/6] Add search input to layer menu --- src/components/BaselayerSections.tsx | 2 + src/components/LayerSelector.tsx | 119 ++++++++++++++++------- src/components/styles/layer-selector.css | 13 +++ 3 files changed, 98 insertions(+), 36 deletions(-) diff --git a/src/components/BaselayerSections.tsx b/src/components/BaselayerSections.tsx index aa1d52d..e638ebe 100644 --- a/src/components/BaselayerSections.tsx +++ b/src/components/BaselayerSections.tsx @@ -7,6 +7,7 @@ type BaselayerSectionsProps = { activeBaselayerId: LayerSelectorProps['activeBaselayerId']; isFlipped: LayerSelectorProps['isFlipped']; onBaselayerChange: LayerSelectorProps['onBaselayerChange']; + searchText: string; }; export function BaselayerSections({ @@ -14,6 +15,7 @@ export function BaselayerSections({ activeBaselayerId, isFlipped, onBaselayerChange, + searchText, }: BaselayerSectionsProps) { return ( <> diff --git a/src/components/LayerSelector.tsx b/src/components/LayerSelector.tsx index 577b908..2418aab 100644 --- a/src/components/LayerSelector.tsx +++ b/src/components/LayerSelector.tsx @@ -1,4 +1,11 @@ -import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react'; +import { + ChangeEvent, + MouseEvent, + useCallback, + useEffect, + useRef, + useState, +} from 'react'; import { SourceGroup } from '../types/maps'; import { LayersIcon } from './icons/LayersIcon'; import './styles/layer-selector.css'; @@ -52,6 +59,7 @@ export function LayerSelector({ const menuRef = useRef(null); const [lockMenu, setLockMenu] = useState(false); const previousLockMenuHandlerRef = useRef<(e: KeyboardEvent) => void>(null); + const [searchText, setSearchText] = useState(''); useEffect(() => { if (previousLockMenuHandlerRef.current) { @@ -105,6 +113,19 @@ export function LayerSelector({ [menuRef.current, lockMenu] ); + const handleFilterChange = useCallback((e: ChangeEvent) => { + setSearchText(e.target.value); + }, []); + + const handleFilterKeyUp = useCallback( + (e: React.KeyboardEvent) => { + if (e.key === 'Escape') { + setSearchText(''); + } + }, + [] + ); + return ( <>
@@ -131,6 +152,16 @@ export function LayerSelector({ goForward={goForward} />
+
+ +
Baselayers @@ -139,51 +170,67 @@ export function LayerSelector({ activeBaselayerId={activeBaselayerId} isFlipped={isFlipped} onBaselayerChange={onBaselayerChange} + searchText={searchText} />
{sourceGroups.length ? (
Source catalogs - {sourceGroups.map((sourceGroup) => ( -
- - -
- ))} + {sourceGroups + .filter((sourceGroup) => + sourceGroup.name + .toLowerCase() + .includes(searchText.toLowerCase()) + ) + .map((sourceGroup) => ( +
+ + +
+ ))}
) : null} {highlightBoxes && highlightBoxes.length ? (
Highlight regions - {highlightBoxes.map((box) => ( -
- - -
- ))} + {highlightBoxes + .filter((box) => + box.name.toLowerCase().includes(searchText.toLowerCase()) + ) + .map((box) => ( +
+ + +
+ ))}
) : null}
diff --git a/src/components/styles/layer-selector.css b/src/components/styles/layer-selector.css index 8780a1c..d93c253 100644 --- a/src/components/styles/layer-selector.css +++ b/src/components/styles/layer-selector.css @@ -10,6 +10,19 @@ border: 1px solid var(--border-color-unhovered); max-height: 90vh; max-width: 400px; + row-gap: 2px; +} + +.layer-filter-container { + display: flex; + justify-content: center; +} + +#layer-filter-input { + width: 60%; + font-size: 10px; + border-radius: 5px; + padding: 1px 5px; } .layers-fieldset-container { From c92ad17f508f2c648163c580969a7a1d63ffd613 Mon Sep 17 00:00:00 2001 From: Jeremy Myers Date: Mon, 10 Nov 2025 14:29:03 -0500 Subject: [PATCH 2/6] Tweak label CSS specificity --- src/components/CenterMapFeature.tsx | 2 +- src/components/CustomColorMapDialog.tsx | 10 +++++----- src/components/styles/color-map-dialog.css | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/CenterMapFeature.tsx b/src/components/CenterMapFeature.tsx index 93f0b0a..5a08bdf 100644 --- a/src/components/CenterMapFeature.tsx +++ b/src/components/CenterMapFeature.tsx @@ -101,7 +101,7 @@ export function CenterMapFeature({ className="center-feature-form generic-form" onSubmit={onSubmit} > -