From e04aa025ea7a2bceea940726f80fde75a1cac579 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Or=C5=82=C3=B3w?= <adrian.orlow@fishbrain.com>
Date: Mon, 11 Mar 2024 15:04:14 +0100
Subject: [PATCH] fix: improve centering on pins selected from search
---
.../BioEntitiesSubmapItem.component.tsx | 13 ++++++++++---
.../MapAdditionalActions.component.tsx | 2 ++
.../MappAdditionalActions.constants.ts | 2 ++
3 files changed, 14 insertions(+), 3 deletions(-)
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx
index 483bf03b..47f2e4b2 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem/BioEntitiesSubmapItem.component.tsx
@@ -1,11 +1,13 @@
-import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { Icon } from '@/shared/Icon';
+import { LOCATION_BTN_ID } from '@/components/Map/MapAdditionalActions/MappAdditionalActions.constants';
+import { ZERO } from '@/constants/common';
import { displayBioEntitiesList } from '@/redux/drawer/drawer.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
-import { BioEntityContent } from '@/types/models';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { mapModelIdSelector, mapOpenedMapsSelector } from '@/redux/map/map.selectors';
import { openMapAndSetActive, setActiveMap } from '@/redux/map/map.slice';
import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
+import { Icon } from '@/shared/Icon';
+import { BioEntityContent } from '@/types/models';
export interface BioEntitiesSubmapItemProps {
mapName: string;
@@ -42,6 +44,11 @@ export const BioEntitiesSubmapItem = ({
const onSubmapClick = (): void => {
openSubmap();
dispatch(displayBioEntitiesList(bioEntities));
+
+ const locationButton = document.querySelector<HTMLButtonElement>(`#${LOCATION_BTN_ID}`);
+ if (locationButton) {
+ setTimeout(() => locationButton?.click(), ZERO);
+ }
};
return (
diff --git a/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.tsx b/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.tsx
index 96f3870a..9faad208 100644
--- a/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.tsx
+++ b/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.tsx
@@ -1,5 +1,6 @@
import { Icon } from '@/shared/Icon';
import { twMerge } from 'tailwind-merge';
+import { LOCATION_BTN_ID } from './MappAdditionalActions.constants';
import { useAddtionalActions } from './utils/useAdditionalActions';
export const MapAdditionalActions = (): JSX.Element => {
@@ -18,6 +19,7 @@ export const MapAdditionalActions = (): JSX.Element => {
onClick={zoomInToBioEntities}
data-testid="location-button"
title="Center map"
+ id={LOCATION_BTN_ID}
>
<Icon className="h-[28px] w-[28px]" name="location" />
</button>
diff --git a/src/components/Map/MapAdditionalActions/MappAdditionalActions.constants.ts b/src/components/Map/MapAdditionalActions/MappAdditionalActions.constants.ts
index 08037944..b56bf65d 100644
--- a/src/components/Map/MapAdditionalActions/MappAdditionalActions.constants.ts
+++ b/src/components/Map/MapAdditionalActions/MappAdditionalActions.constants.ts
@@ -1,3 +1,5 @@
export const MAP_ZOOM_IN_DELTA = 1;
export const MAP_ZOOM_OUT_DELTA = -1;
+
+export const LOCATION_BTN_ID = 'location-button';
--
GitLab