feat(search): 22291 select area when location chosen (#1194)

* feat(search): 22291 highlight hovered result geometry

* test(search): 22291 add unit test for highlighted atom

* fix(search): 22291 clean highlight layer lifecycle

* fix(search): 22291 clean highlight layer cleanup

* test(search): 22291 broaden highlighted atom cases

* test(search): 22291 add coverage for search features

* fix(search): 22291 clear highlight on selection

* Delete src/features/search/tests/initSearchHighlightLayer.test.ts

* Delete src/features/search/tests/highlightedAtom.test.ts

* Delete src/features/search/tests/searchAtoms.test.ts

* Delete src/features/search/tests/searchLocationAtoms.test.ts

---------

Co-authored-by: VK <112831093+vkozio@users.noreply.github.com>

Author: Komzpa

src/features/search/atoms/highlightedGeometry.ts

@@ -0,0 +1,10 @@
+import { atom } from '@reatom/framework';
+import type { Feature, FeatureCollection } from 'geojson';
+
+export const searchHighlightedGeometryAtom = atom<FeatureCollection | Feature>(
+  {
+    type: 'FeatureCollection',
+    features: [],
+  },
+  'searchHighlightedGeometryAtom',
+);

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 } from 'react';
+import { forwardRef, useEffect } from 'react';
 import { searchLocationsAtom } from '~features/search/searchLocationAtoms';
 import {
   itemSelectAction,
@@ -16,6 +16,9 @@ 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';
@@ -33,19 +36,27 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
       ? i18n.t('search.input_placeholder_mcda')
       : i18n.t('search.input_placeholder');
 
-    const search = useAction(searchAction);
-    const itemSelectActionFn = useAction(itemSelectAction);
-    const reset = useAction(resetSearchAction);
+  const search = useAction(searchAction);
+  const itemSelectActionFn = useAction(itemSelectAction);
+  const reset = useAction(resetSearchAction);
+  const setHighlightedGeometry = useAction(searchHighlightedGeometryAtom);
 
     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);
+  const [aggregatedResults] = useAtom(aggregatedSearchAtom);
+
+  useEffect(() => {
+    return () => {
+      setHighlightedGeometry(EMPTY_HIGHLIGHT);
+    };
+  }, [setHighlightedGeometry]);
 
     const renderError = () => (
       <SelectItem
@@ -91,6 +102,11 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
                     className={style.listItem}
                     itemProps={{
                       onClick: () => handleItemSelect(item),
+                      onMouseEnter: () =>
+                        item.geometry &&
+                        setHighlightedGeometry(item as Feature),
+                      onMouseLeave: () =>
+                        setHighlightedGeometry(EMPTY_HIGHLIGHT),
                       role: 'option',
                     }}
                   />
@@ -108,6 +124,10 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
                     highlighted={highlightedIndex === index}
                     itemProps={{
                       onClick: () => handleItemSelect(item),
+                      onMouseEnter: () =>
+                        setHighlightedGeometry(EMPTY_HIGHLIGHT),
+                      onMouseLeave: () =>
+                        setHighlightedGeometry(EMPTY_HIGHLIGHT),
                       role: 'option',
                     }}
                   />
@@ -147,6 +167,10 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
         emptyLocations,
     });
 
+    useEffect(() => {
+      if (!isMenuOpen) setHighlightedGeometry(EMPTY_HIGHLIGHT);
+    }, [isMenuOpen, setHighlightedGeometry]);
+
     return (
       <>
         <div className={cn(style.searchBar, searchBarClass)} ref={searchBarRef}>

src/features/search/constants.ts

@@ -0,0 +1,8 @@
+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: [],
+};

src/features/search/index.tsx

@@ -7,6 +7,7 @@ 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() {
@@ -18,6 +19,13 @@ export function Search() {
   const inputRef = useRef<HTMLInputElement>(null);
   const isMobile = useMediaQuery(IS_MOBILE_QUERY);
 
+  useEffect(() => {
+    const destroyHighlightLayer = initSearchHighlightLayer();
+    return () => {
+      destroyHighlightLayer?.();
+    };
+  }, []);
+
   useEffect(() => {
     if (isOpen && isMobile) {
       inputRef?.current?.focus(); // triggers phone keyboard

src/features/search/initSearchHighlightLayer.ts

@@ -0,0 +1,74 @@
+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;
+}

src/features/search/readme.md

@@ -0,0 +1,12 @@
+# 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.

src/features/search/renderers/SearchHighlightRenderer.ts

@@ -0,0 +1,3 @@
+import { BoundarySelectorRenderer } from '~features/boundary_selector/renderers/BoundarySelectorRenderer';
+
+export class SearchHighlightRenderer extends BoundarySelectorRenderer {}

src/features/search/searchAtoms.ts

@@ -12,6 +12,8 @@ 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';
@@ -63,6 +65,7 @@ export const itemSelectAction = action((ctx, item: AggregatedSearchItem) => {
   } else if (item.source === 'mcda') {
     selectMCDAItemAction(ctx);
   }
+  searchHighlightedGeometryAtom(ctx, EMPTY_HIGHLIGHT);
 });
 
 export const resetSearchAction = action((ctx) => {

src/features/search/searchLocationAtoms.ts

@@ -8,7 +8,11 @@ import {
   withStatusesAtom,
 } from '@reatom/framework';
 import { getLocations } from '~core/api/search';
-import { setCurrentMapBbox } from '~core/shared_state/currentMapPosition';
+import {
+  setCurrentMapBbox,
+  focusOnGeometry,
+} from '~core/shared_state/currentMapPosition';
+import { focusedGeometryAtom } from '~core/focused_geometry/model';
 
 export const fetchLocationsAsyncResource = reatomAsync(
   (ctx, query: string) => getLocations(query, ctx.controller),
@@ -28,6 +32,13 @@ 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) => {