feat(map): add interactive base layer
Closes MIN-124
Objective:
Implement interactive layer of the map - react on click and fetch data to Redux
How it works?
- Map listens for the click
- Users click on the map
- Algo transforms user click coords (so-called Projection) to pixel position on the original map image (x/y cartesian point)
- IF there are no elements beneath the click position, do nothing
- IF there is a single bioEntity element (type=
ALIAS), fetch it to Redux state (identically as it would be searched) - IF there is a reaction element (type=
REACTION), fetch it to Redux state and THEN fetch all related bioEntites (identically as they would be searched)
BREAKING CHANGE:
The algorithm of converting the lng/lon position to a cartesian point has been fixed. It was done due to the fact that we need a precise click position for the correct map field search. Also now the first load of the map is perfectly centered.
Additional changes:
Merge request reports
Activity
assigned to @AdrianOrlow
added 12 commits
-
b356879e...e8e61c10 - 11 commits from branch
development - 839777c3 - merge development
-
b356879e...e8e61c10 - 11 commits from branch
- src/utils/search/getElementsByCoordinates.ts 0 → 100644
1 import { elementSearchResult } from '@/models/elementSearchResult'; 2 import { apiPath } from '@/redux/apiPath'; 3 import { axiosInstance } from '@/services/api/utils/axiosInstance'; 4 import { Point } from '@/types/map'; 5 import { ElementSearchResult } from '@/types/models'; 6 import { z } from 'zod'; 7 import { validateDataUsingZodSchema } from '../validateDataUsingZodSchema'; 8 9 interface Args { 10 point: Point; 11 currentModelId: number; 12 } 13 14 export const getElementsByPoint = async ({ -
I miss the context why it's not in thunk and it's placed under utills. Could you share reasoning behind it? It might be confusing in the future.
Edit: It might be hard to debug it if thi api call fails. I would add it to redux to dispatch information that action was initialised,fulfilled, or rejected even if you don't want to modify the state.
@teoMiesiac 1. It's done differently because this is only an helper call. We won't do anything else with this data more than just using it to finding the element's ids.
-
This would be an thunk if it was used to modify the redux state directly but that's not the case here
-
I don't see reason behind placing this data in the Redux store. Redux should be used only if a) we want to store the particular data globally b) the data will be reused anytime in the future c) we want to make the changes more traceable
This case covers only the last point but implementing the whole store, selectors, waiters etc. would be an overengineering for such an simple API call
- API call fail prevention should be done via E2E tests in the future
-
-
Idea of the listener is simple. I like it.
PerfectMatch added to query is bothering me - it's a bit messy. Might look for partially implementing solution proposed in PR !59 (merged) -> it's my RFC
mentioned in merge request !58 (merged)
added 4 commits
-
33182c97...9186428d - 3 commits from branch
development - a568507e - Merge branch 'development' into feature/MIN-124-react-on-interactive-map-click
-
33182c97...9186428d - 3 commits from branch
mentioned in commit d9900888