From 6dece2fef23f8e0fa6e419845b1fbf6b5c271aaf Mon Sep 17 00:00:00 2001 From: Aliaksandr Baranau Date: Wed, 27 Aug 2025 13:37:46 +0200 Subject: [PATCH] Revert "feat(search): 22291 select area when location chosen (#1194)" This reverts commit 16eee94a3f1611a7fc3f7ccc90d0b28073be5af3. --- .../search/atoms/highlightedGeometry.ts | 10 --- .../search/componets/SearchBar/SearchBar.tsx | 34 ++------- src/features/search/constants.ts | 8 -- src/features/search/index.tsx | 8 -- .../search/initSearchHighlightLayer.ts | 74 ------------------- src/features/search/readme.md | 12 --- .../renderers/SearchHighlightRenderer.ts | 3 - src/features/search/searchAtoms.ts | 3 - src/features/search/searchLocationAtoms.ts | 13 +--- 9 files changed, 6 insertions(+), 159 deletions(-) delete mode 100644 src/features/search/atoms/highlightedGeometry.ts delete mode 100644 src/features/search/constants.ts delete mode 100644 src/features/search/initSearchHighlightLayer.ts delete mode 100644 src/features/search/readme.md delete mode 100644 src/features/search/renderers/SearchHighlightRenderer.ts diff --git a/src/features/search/atoms/highlightedGeometry.ts b/src/features/search/atoms/highlightedGeometry.ts deleted file mode 100644 index 3956e07e6..000000000 --- a/src/features/search/atoms/highlightedGeometry.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { atom } from '@reatom/framework'; -import type { Feature, FeatureCollection } from 'geojson'; - -export const searchHighlightedGeometryAtom = atom( - { - type: 'FeatureCollection', - features: [], - }, - 'searchHighlightedGeometryAtom', -); diff --git a/src/features/search/componets/SearchBar/SearchBar.tsx b/src/features/search/componets/SearchBar/SearchBar.tsx index aa649dd6f..f780c87af 100644 --- a/src/features/search/componets/SearchBar/SearchBar.tsx +++ b/src/features/search/componets/SearchBar/SearchBar.tsx @@ -1,7 +1,7 @@ import { SelectItem } from '@konturio/ui-kit'; import { useAction, useAtom } from '@reatom/npm-react'; import cn from 'clsx'; -import { forwardRef, useEffect } from 'react'; +import { forwardRef } from 'react'; import { searchLocationsAtom } from '~features/search/searchLocationAtoms'; import { itemSelectAction, @@ -16,9 +16,6 @@ import { MCDASuggestionAtom, } from '~features/search/searchMcdaAtoms'; import { SearchInput } from '~components/Search/SearchInput/SearchInput'; -import { searchHighlightedGeometryAtom } from '../../atoms/highlightedGeometry'; -import type { Feature } from 'geojson'; -import { EMPTY_HIGHLIGHT } from '../../constants'; import { useSearchMenu } from '~utils/hooks/useSearchMenu'; import style from './SearchBar.module.css'; import type { AggregatedSearchItem } from '~features/search/searchAtoms'; @@ -36,27 +33,19 @@ export const SearchBar = forwardRef( ? i18n.t('search.input_placeholder_mcda') : i18n.t('search.input_placeholder'); - const search = useAction(searchAction); - const itemSelectActionFn = useAction(itemSelectAction); - const reset = useAction(resetSearchAction); - const setHighlightedGeometry = useAction(searchHighlightedGeometryAtom); + const search = useAction(searchAction); + const itemSelectActionFn = useAction(itemSelectAction); + const reset = useAction(resetSearchAction); const itemSelect = (item: AggregatedSearchItem) => { itemSelectActionFn(item); - setHighlightedGeometry(EMPTY_HIGHLIGHT); onItemSelect?.(); }; const [{ error, loading, data }] = useAtom(searchLocationsAtom); const emptyLocations = data ? data.length === 0 : false; const [mcdaSearchStatus] = useAtom(MCDASuggestionAtom); - const [aggregatedResults] = useAtom(aggregatedSearchAtom); - - useEffect(() => { - return () => { - setHighlightedGeometry(EMPTY_HIGHLIGHT); - }; - }, [setHighlightedGeometry]); + const [aggregatedResults] = useAtom(aggregatedSearchAtom); const renderError = () => ( ( className={style.listItem} itemProps={{ onClick: () => handleItemSelect(item), - onMouseEnter: () => - item.geometry && - setHighlightedGeometry(item as Feature), - onMouseLeave: () => - setHighlightedGeometry(EMPTY_HIGHLIGHT), role: 'option', }} /> @@ -124,10 +108,6 @@ export const SearchBar = forwardRef( highlighted={highlightedIndex === index} itemProps={{ onClick: () => handleItemSelect(item), - onMouseEnter: () => - setHighlightedGeometry(EMPTY_HIGHLIGHT), - onMouseLeave: () => - setHighlightedGeometry(EMPTY_HIGHLIGHT), role: 'option', }} /> @@ -167,10 +147,6 @@ export const SearchBar = forwardRef( emptyLocations, }); - useEffect(() => { - if (!isMenuOpen) setHighlightedGeometry(EMPTY_HIGHLIGHT); - }, [isMenuOpen, setHighlightedGeometry]); - return ( <>
diff --git a/src/features/search/constants.ts b/src/features/search/constants.ts deleted file mode 100644 index eb0894c9a..000000000 --- a/src/features/search/constants.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { FeatureCollection } from 'geojson'; - -export const SEARCH_HIGHLIGHT_LAYER_ID = 'search-highlight'; -export const SEARCH_HIGHLIGHT_COLOR = '#000000'; -export const EMPTY_HIGHLIGHT: FeatureCollection = { - type: 'FeatureCollection', - features: [], -}; diff --git a/src/features/search/index.tsx b/src/features/search/index.tsx index 0c8a2cbca..d9a947d28 100644 --- a/src/features/search/index.tsx +++ b/src/features/search/index.tsx @@ -7,7 +7,6 @@ import { i18n } from '~core/localization'; import { useShortPanelState } from '~utils/hooks/useShortPanelState'; import { useAutoCollapsePanel } from '~utils/hooks/useAutoCollapsePanel'; import { SearchBar } from '~features/search/componets/SearchBar/SearchBar'; -import { initSearchHighlightLayer } from './initSearchHighlightLayer'; import s from './styles.module.css'; export function Search() { @@ -19,13 +18,6 @@ export function Search() { const inputRef = useRef(null); const isMobile = useMediaQuery(IS_MOBILE_QUERY); - useEffect(() => { - const destroyHighlightLayer = initSearchHighlightLayer(); - return () => { - destroyHighlightLayer?.(); - }; - }, []); - useEffect(() => { if (isOpen && isMobile) { inputRef?.current?.focus(); // triggers phone keyboard diff --git a/src/features/search/initSearchHighlightLayer.ts b/src/features/search/initSearchHighlightLayer.ts deleted file mode 100644 index 193743109..000000000 --- a/src/features/search/initSearchHighlightLayer.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { currentMapAtom } from '~core/shared_state'; -import { store } from '~core/store/store'; -import type { LogicalLayerState } from '~core/logical_layers/types/logicalLayer'; -import type { Feature, FeatureCollection } from 'geojson'; -import { - SEARCH_HIGHLIGHT_LAYER_ID, - SEARCH_HIGHLIGHT_COLOR, -} from './constants'; -import { searchHighlightedGeometryAtom } from './atoms/highlightedGeometry'; -import { SearchHighlightRenderer } from './renderers/SearchHighlightRenderer'; - -let cleanUp: (() => void) | null = null; - -export function initSearchHighlightLayer() { - if (cleanUp) return cleanUp; - - const ctx = store.v3ctx; - const map = ctx.get(currentMapAtom.v3atom); - if (!map) return () => {}; - - const sourceId = `${SEARCH_HIGHLIGHT_LAYER_ID}-source`; - const renderer = new SearchHighlightRenderer({ - layerId: SEARCH_HIGHLIGHT_LAYER_ID, - sourceId, - color: SEARCH_HIGHLIGHT_COLOR, - }); - - const state: LogicalLayerState = { - id: SEARCH_HIGHLIGHT_LAYER_ID, - isDownloadable: false, - isVisible: true, - isLoading: false, - isEnabled: true, - isEditable: false, - isMounted: true, - source: { - id: sourceId, - source: { type: 'geojson', data: { type: 'FeatureCollection', features: [] } }, - }, - legend: null, - meta: null, - settings: null, - error: null, - contextMenu: null, - style: null, - editor: null, - }; - - renderer.willMount({ map, state }); - - const unsubscribe = ctx.subscribe( - searchHighlightedGeometryAtom, - (geometry: FeatureCollection | Feature) => { - renderer.willSourceUpdate({ - map, - state: { - ...state, - source: { - id: sourceId, - source: { type: 'geojson', data: geometry }, - }, - }, - }); - }, - ); - - cleanUp = () => { - unsubscribe(); - renderer.willUnMount({ map }); - cleanUp = null; - }; - - return cleanUp; -} diff --git a/src/features/search/readme.md b/src/features/search/readme.md deleted file mode 100644 index b8859c4a2..000000000 --- a/src/features/search/readme.md +++ /dev/null @@ -1,12 +0,0 @@ -# Search feature - -This feature provides a search bar to find locations or MCDA analysis suggestions. -Selected locations become the focused area on the map. -While hovering over location results the geometry is highlighted on the map with a black outline. - -## Main parts -- `SearchBar` - UI component with dropdown results. -- `searchLocationAtoms.ts` - handles locations fetching and selection. -- `searchAtoms.ts` - aggregates MCDA and location results. -- `atoms/highlightedGeometry.ts` - stores geometry highlighted on hover. -- `initSearchHighlightLayer` - registers temporary map layer for hovered geometries. diff --git a/src/features/search/renderers/SearchHighlightRenderer.ts b/src/features/search/renderers/SearchHighlightRenderer.ts deleted file mode 100644 index e6a74ad77..000000000 --- a/src/features/search/renderers/SearchHighlightRenderer.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { BoundarySelectorRenderer } from '~features/boundary_selector/renderers/BoundarySelectorRenderer'; - -export class SearchHighlightRenderer extends BoundarySelectorRenderer {} diff --git a/src/features/search/searchAtoms.ts b/src/features/search/searchAtoms.ts index b3d34a4c9..6d499ca3b 100644 --- a/src/features/search/searchAtoms.ts +++ b/src/features/search/searchAtoms.ts @@ -12,8 +12,6 @@ import { selectMCDAItemAction, isMCDASearchEnabled, } from '~features/search/searchMcdaAtoms'; -import { searchHighlightedGeometryAtom } from './atoms/highlightedGeometry'; -import { EMPTY_HIGHLIGHT } from './constants'; import type { LocationProperties } from '~core/api/search'; import type { Geometry } from 'geojson'; import type { MCDAConfig } from '~core/logical_layers/renderers/stylesConfigs/mcda/types'; @@ -65,7 +63,6 @@ export const itemSelectAction = action((ctx, item: AggregatedSearchItem) => { } else if (item.source === 'mcda') { selectMCDAItemAction(ctx); } - searchHighlightedGeometryAtom(ctx, EMPTY_HIGHLIGHT); }); export const resetSearchAction = action((ctx) => { diff --git a/src/features/search/searchLocationAtoms.ts b/src/features/search/searchLocationAtoms.ts index 283666933..f8353676d 100644 --- a/src/features/search/searchLocationAtoms.ts +++ b/src/features/search/searchLocationAtoms.ts @@ -8,11 +8,7 @@ import { withStatusesAtom, } from '@reatom/framework'; import { getLocations } from '~core/api/search'; -import { - setCurrentMapBbox, - focusOnGeometry, -} from '~core/shared_state/currentMapPosition'; -import { focusedGeometryAtom } from '~core/focused_geometry/model'; +import { setCurrentMapBbox } from '~core/shared_state/currentMapPosition'; export const fetchLocationsAsyncResource = reatomAsync( (ctx, query: string) => getLocations(query, ctx.controller), @@ -32,13 +28,6 @@ export const searchLocationsAtom = atom((ctx) => { export const selectLocationItemAction = action((ctx, item) => { const bbox = item.properties.bbox; setCurrentMapBbox(ctx, bbox); - if (item.geometry) { - focusedGeometryAtom.setFocusedGeometry.v3action(ctx, { - source: { type: 'custom' }, - geometry: item, - }); - focusOnGeometry(ctx, item); - } }); export const resetLocationSearchAction = action((ctx) => {