feat(search): 22291 select area when location chosen

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,8 @@ import {
   MCDASuggestionAtom,
 } from '~features/search/searchMcdaAtoms';
 import { SearchInput } from '~components/Search/SearchInput/SearchInput';
+import { searchHighlightedGeometryAtom } from '../../atoms/highlightedGeometry';
+import type { Feature } from 'geojson';
 import { useSearchMenu } from '~utils/hooks/useSearchMenu';
 import style from './SearchBar.module.css';
 import type { AggregatedSearchItem } from '~features/search/searchAtoms';
@@ -33,9 +35,10 @@ 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);
@@ -45,7 +48,13 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
     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({ type: 'FeatureCollection', features: [] });
+    };
+  }, [setHighlightedGeometry]);
 
     const renderError = () => (
       <SelectItem
@@ -91,6 +100,14 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
                     className={style.listItem}
                     itemProps={{
                       onClick: () => handleItemSelect(item),
+                      onMouseEnter: () =>
+                        item.geometry &&
+                        setHighlightedGeometry(item as Feature),
+                      onMouseLeave: () =>
+                        setHighlightedGeometry({
+                          type: 'FeatureCollection',
+                          features: [],
+                        }),
                       role: 'option',
                     }}
                   />
@@ -108,6 +125,16 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
                     highlighted={highlightedIndex === index}
                     itemProps={{
                       onClick: () => handleItemSelect(item),
+                      onMouseEnter: () =>
+                        setHighlightedGeometry({
+                          type: 'FeatureCollection',
+                          features: [],
+                        }),
+                      onMouseLeave: () =>
+                        setHighlightedGeometry({
+                          type: 'FeatureCollection',
+                          features: [],
+                        }),
                       role: 'option',
                     }}
                   />

src/features/search/constants.ts

@@ -0,0 +1,2 @@
+export const SEARCH_HIGHLIGHT_LAYER_ID = 'search-highlight';
+export const SEARCH_HIGHLIGHT_COLOR = '#000000';

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/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) => {

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

@@ -0,0 +1,99 @@
+import { createStore } from '@reatom/core-v2';
+import { test, expect } from 'vitest';
+import { searchHighlightedGeometryAtom } from '../atoms/highlightedGeometry';
+import type { Feature, FeatureCollection } from 'geojson';
+
+const store = createStore();
+
+const ctx = store.v3ctx;
+
+test('searchHighlightedGeometryAtom stores highlighted geometry', () => {
+  expect(ctx.get(searchHighlightedGeometryAtom)).toEqual({
+    type: 'FeatureCollection',
+    features: [],
+  });
+  const geom: Feature = {
+    type: 'Feature',
+    geometry: { type: 'Point', coordinates: [0, 0] },
+    properties: {},
+  };
+  searchHighlightedGeometryAtom(ctx, geom);
+  expect(ctx.get(searchHighlightedGeometryAtom)).toEqual(geom);
+});
+
+test('searchHighlightedGeometryAtom stores various geometry types', () => {
+  const polygon: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [0, 0],
+          [1, 0],
+          [1, 1],
+          [0, 1],
+          [0, 0],
+        ],
+      ],
+    },
+    properties: {},
+  };
+  searchHighlightedGeometryAtom(ctx, polygon);
+  expect(ctx.get(searchHighlightedGeometryAtom)).toEqual(polygon);
+
+  const line: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [0, 0],
+        [1, 1],
+      ],
+    },
+    properties: {},
+  };
+  searchHighlightedGeometryAtom(ctx, line);
+  expect(ctx.get(searchHighlightedGeometryAtom)).toEqual(line);
+});
+
+test('searchHighlightedGeometryAtom handles feature collections and empty geometries', () => {
+  const polygon: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'Polygon',
+      coordinates: [
+        [
+          [0, 0],
+          [1, 0],
+          [1, 1],
+          [0, 1],
+          [0, 0],
+        ],
+      ],
+    },
+    properties: {},
+  };
+  const line: Feature = {
+    type: 'Feature',
+    geometry: {
+      type: 'LineString',
+      coordinates: [
+        [0, 0],
+        [1, 1],
+      ],
+    },
+    properties: {},
+  };
+  const fc: FeatureCollection = { type: 'FeatureCollection', features: [polygon, line] };
+  searchHighlightedGeometryAtom(ctx, fc);
+  expect(ctx.get(searchHighlightedGeometryAtom)).toEqual(fc);
+
+  const emptyFc: FeatureCollection = { type: 'FeatureCollection', features: [] };
+  searchHighlightedGeometryAtom(ctx, emptyFc);
+  expect(ctx.get(searchHighlightedGeometryAtom)).toEqual(emptyFc);
+});
+
+test('searchHighlightedGeometryAtom accepts null values', () => {
+  searchHighlightedGeometryAtom(ctx, null as unknown as Feature);
+  expect(ctx.get(searchHighlightedGeometryAtom)).toBeNull();
+});