diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx index db286ea51db4e64e2793283cb4c29ad8a9d77082..74cd980beb12e03b77a03f42c1eeef0a167e537c 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.test.tsx @@ -1,13 +1,13 @@ /* eslint-disable no-magic-numbers */ -import { drugsFixture } from '@/models/fixtures/drugFixtures'; import { chemicalsFixture } from '@/models/fixtures/chemicalsFixture'; +import { drugsFixture } from '@/models/fixtures/drugFixtures'; import { StoreType } from '@/redux/store'; import { InitialStoreState, getReduxWrapperWithStore, } from '@/utils/testing/getReduxWrapperWithStore'; import { render, screen } from '@testing-library/react'; -import { PinItem, PinType } from '../PinsList/PinsList.types'; +import { PinItem, PinTypeWithNone } from '../PinsList/PinsList.types'; import { AccordionsDetails } from './AccordionsDetails.component'; const DRUGS_PINS_LIST = drugsFixture.map(drug => ({ @@ -24,7 +24,7 @@ const CHEMICALS_PINS_LIST = chemicalsFixture.map(chemical => ({ const renderComponent = ( pinsList: PinItem[], - type: PinType, + type: PinTypeWithNone, initialStoreState: InitialStoreState = {}, ): { store: StoreType } => { const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState); diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx index 0613843ec07bb7763c233b88987ba15d9749a67f..78eab37d3b0c965fd9c71faa5caca4062df8adf2 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.component.tsx @@ -5,7 +5,7 @@ import { AccordionItemHeading, AccordionItemPanel, } from '@/shared/Accordion'; -import { PinItem, PinType } from '../PinsList/PinsList.types'; +import { PinItem, PinTypeWithNone } from '../PinsList/PinsList.types'; import { getAdditionalInfo, getEntityDescriptions, @@ -15,7 +15,7 @@ import { interface AccordionsDetailsProps { pinsList: PinItem[]; - type: PinType; + type: PinTypeWithNone; } export const AccordionsDetails = ({ pinsList, type }: AccordionsDetailsProps): JSX.Element => { diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.utils.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.utils.tsx index 2f29038f2a64d671fa5982fe52de5dc6f24366d7..9c2939a8dcfa855a3d0507518bf12e68050ee85a 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.utils.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/AccordionsDetails/AccordionsDetails.utils.tsx @@ -1,4 +1,4 @@ -import { PinItem, PinType } from '../PinsList/PinsList.types'; +import { PinItem, PinTypeWithNone } from '../PinsList/PinsList.types'; export const getEntityNames = (pinsList: PinItem[]): string => { let name = ''; @@ -34,7 +34,7 @@ export const getEntitySynonyms = (pinsList: PinItem[]): string => { return synonyms; }; -export const getAdditionalInfo = (pinsList: PinItem[], type: PinType): string => { +export const getAdditionalInfo = (pinsList: PinItem[], type: PinTypeWithNone): string => { if (type === 'drugs') { return pinsList .map(element => ('bloodBrainBarrier' in element.data ? element.data.bloodBrainBarrier : '')) diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx index b3b3a7c5459476fdd50e1fdd4e1ba59da7000d59..fa5c0141b7caa2ce0af35bef44dc1573498b8f84 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.component.tsx @@ -1,11 +1,11 @@ import { assertNever } from '@/utils/assertNever'; import { AccordionsDetails } from '../AccordionsDetails/AccordionsDetails.component'; -import { PinItem, PinType } from './PinsList.types'; +import { PinItem, PinTypeWithNone } from './PinsList.types'; import { PinsListItem } from './PinsListItem'; interface PinsListProps { pinsList: PinItem[]; - type: PinType; + type: PinTypeWithNone; } export const PinsList = ({ pinsList, type }: PinsListProps): JSX.Element => { diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types.tsx index 41f82adac04e77088e1614ed6932e04569e2b863..7bd32b0eee554755cd4422f9919e6094279563ce 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types.tsx @@ -1,4 +1,5 @@ -import { Drug, Chemical, Mirna } from '@/types/models'; +import { Chemical, Drug, Mirna } from '@/types/models'; +import { PinType } from '@/types/pin'; export type PinItem = { id: string | number; @@ -6,4 +7,4 @@ export type PinItem = { data: Drug | Chemical | Mirna; }; -export type PinType = 'chemicals' | 'drugs' | 'mirna' | 'bioEntity' | 'none'; +export type PinTypeWithNone = PinType | 'none'; diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.tsx index 6225c84dbc14dd587f243c9b4f65de83a2e7620f..e2f3f6093bb4126a2740858be2b69fbf128021b4 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.tsx +++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.tsx @@ -1,12 +1,12 @@ -import { twMerge } from 'tailwind-merge'; import { Icon } from '@/shared/Icon'; import { PinDetailsItem } from '@/types/models'; +import { twMerge } from 'tailwind-merge'; +import { PinTypeWithNone } from '../PinsList.types'; import { getPinColor } from './PinsListItem.component.utils'; -import { PinType } from '../PinsList.types'; interface MirnaPinsListItemProps { name: string; - type: PinType; + type: PinTypeWithNone; pin: PinDetailsItem; } diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.utils.ts b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.utils.ts index b52721393c14b1acf555abc126477ccfe1fefd27..8cc48465ae344bdf5b4fcce867dd9c217ebe952e 100644 --- a/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.utils.ts +++ b/src/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsListItem/PinsListItem.component.utils.ts @@ -1,7 +1,7 @@ -import { PinType } from '../PinsList.types'; +import { PinTypeWithNone } from '../PinsList.types'; -export const getPinColor = (type: PinType): string => { - const pinColors: Record<PinType, string> = { +export const getPinColor = (type: PinTypeWithNone): string => { + const pinColors: Record<PinTypeWithNone, string> = { bioEntity: 'fill-primary-500', drugs: 'fill-orange', chemicals: 'fill-purple', diff --git a/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitiesFeatures.ts b/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitiesFeatures.ts index 8b9f9178f75ec0851bfd69bd93797d87ce59f12f..674813c32e9490a733afec28ae0b6df6b691de63 100644 --- a/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitiesFeatures.ts +++ b/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitiesFeatures.ts @@ -1,6 +1,6 @@ -import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types'; import { ONE } from '@/constants/common'; import { BioEntity } from '@/types/models'; +import { PinType } from '@/types/pin'; import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection'; import { Feature } from 'ol'; import { getBioEntitySingleFeature } from './getBioEntitySingleFeature'; @@ -19,6 +19,7 @@ export const getBioEntitiesFeatures = ( getBioEntitySingleFeature(bioEntity, { pointToProjection, type, + // pin's index number value: index + ONE, }), ); diff --git a/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntititesFeatures.test.ts b/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntititesFeatures.test.ts index 6c0eb2e3a1619022fd9ef785c0b94d49b011012a..32e40c74b73fd24872b0e04294028fb4d6715b00 100644 --- a/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntititesFeatures.test.ts +++ b/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntititesFeatures.test.ts @@ -1,6 +1,6 @@ -import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types'; import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture'; import { initialMapStateFixture } from '@/redux/map/map.fixtures'; +import { PinType } from '@/types/pin'; import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection'; import { GetReduxWrapperUsingSliceReducer, @@ -29,7 +29,7 @@ describe('getBioEntitiesFeatures - subUtil', () => { const bioEntities = bioEntititesContent.map(({ bioEntity }) => bioEntity); const pointToProjection = getPointToProjection(Wrapper); - const pinTypes: PinType[] = ['bioEntity', 'drugs', 'chemicals', 'mirna', 'none']; + const pinTypes: PinType[] = ['bioEntity', 'drugs', 'chemicals', 'mirna']; it.each(pinTypes)('should return array of instances of Feature with Style type=%s', type => { const result = getBioEntitiesFeatures(bioEntities, { diff --git a/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.test.ts b/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.test.ts index 79d66146891233a301d9528594bc2e8020e8d47e..0f86128585ac85ed1886743528fbcad4b2251754 100644 --- a/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.test.ts +++ b/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.test.ts @@ -1,7 +1,7 @@ -import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types'; import { PINS_COLORS } from '@/constants/canvas'; import { bioEntityContentFixture } from '@/models/fixtures/bioEntityContentsFixture'; import { initialMapStateFixture } from '@/redux/map/map.fixtures'; +import { PinType } from '@/types/pin'; import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection'; import { GetReduxWrapperUsingSliceReducer, @@ -38,7 +38,7 @@ describe('getBioEntitySingleFeature - subUtil', () => { const pointToProjection = getPointToProjection(Wrapper); const value = 1448; - const pinTypes: PinType[] = ['bioEntity', 'drugs', 'chemicals', 'mirna', 'none']; + const pinTypes: PinType[] = ['bioEntity', 'drugs', 'chemicals', 'mirna']; it.each(pinTypes)('should return instance of Feature with Style type=%s', type => { const result = getBioEntitySingleFeature(bioEntity, { @@ -47,8 +47,10 @@ describe('getBioEntitySingleFeature - subUtil', () => { value, }); + const style = result.getStyle() as Style; + expect(result).toBeInstanceOf(Feature); - expect(result.getStyle()).toBeInstanceOf(Style); + expect(style).toBeInstanceOf(Style); }); it.each(pinTypes)('should run getPinStyle with valid args for type=%s', async type => { diff --git a/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.ts b/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.ts index b910627e271eeb0d4ea7717e5ed9ea6bc56aabb3..3290b1a03d80f7a40a7493af7a973f2870a45231 100644 --- a/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.ts +++ b/src/components/Map/MapViewer/utils/config/pinsLayer/getBioEntitySingleFeature.ts @@ -1,6 +1,6 @@ -import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types'; import { PINS_COLORS } from '@/constants/canvas'; import { BioEntity } from '@/types/models'; +import { PinType } from '@/types/pin'; import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection'; import { Feature } from 'ol'; import { getPinFeature } from './getPinFeature'; diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/onMapSingleClick.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/onMapSingleClick.ts index cdd4abbf45f1025b0695c3c40dfb141348fdccbf..6940b226047f357dbbcb9f900c32d78ffafd5934 100644 --- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/onMapSingleClick.ts +++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/onMapSingleClick.ts @@ -10,6 +10,8 @@ import { handleSearchResultAction } from './handleSearchResultAction'; export const onMapSingleClick = (mapSize: MapSize, modelId: number, dispatch: AppDispatch) => async ({ coordinate }: MapBrowserEvent<UIEvent>): Promise<void> => { + // side-effect below is to prevent complications with data update - old data may conflict with new data + // so we need to reset all the data before updating dispatch(handleDataReset); const searchResults = await getSearchResults({ coordinate, mapSize, modelId }); diff --git a/src/constants/canvas.ts b/src/constants/canvas.ts index 31b30eb16de6358c622dcbb10f395bba7fb9556d..8db09cda4f8f0c6f4acf2acb1a12f6a4dcdae02e 100644 --- a/src/constants/canvas.ts +++ b/src/constants/canvas.ts @@ -1,4 +1,4 @@ -import { PinType } from '@/components/Map/Drawer/SearchDrawerWrapper/ResultsList/PinsList/PinsList.types'; +import { PinType } from '@/types/pin'; export const PIN_PATH2D = 'M12.3077 0C6.25641 0 0 4.61538 0 12.3077C0 19.5897 11.0769 30.9744 11.5897 31.4872C11.7949 31.6923 12 31.7949 12.3077 31.7949C12.6154 31.7949 12.8205 31.6923 13.0256 31.4872C13.5385 30.9744 24.6154 19.6923 24.6154 12.3077C24.6154 4.61538 18.359 0 12.3077 0Z'; @@ -13,7 +13,6 @@ export const PINS_COLORS: Record<PinType, string> = { chemicals: '#640CE3', bioEntity: '#106AD7', mirna: '#F1009F', - none: '#000', }; export const LINE_COLOR = '#00AAFF'; diff --git a/src/types/pin.ts b/src/types/pin.ts new file mode 100644 index 0000000000000000000000000000000000000000..031433b9d3de5aed0dd5791f2f19c2051bf53707 --- /dev/null +++ b/src/types/pin.ts @@ -0,0 +1 @@ +export type PinType = 'chemicals' | 'drugs' | 'mirna' | 'bioEntity';