From f1c572f2fb6f2c72f1c5bb42db4820184eaab8f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20Or=C5=82=C3=B3w?= <adrian.orlow@fishbrain.com> Date: Wed, 29 Nov 2023 12:51:34 +0100 Subject: [PATCH] fix: pr rfc changes --- .../AccordionsDetails.component.test.tsx | 6 +++--- .../AccordionsDetails/AccordionsDetails.component.tsx | 4 ++-- .../AccordionsDetails/AccordionsDetails.utils.tsx | 4 ++-- .../ResultsList/PinsList/PinsList.component.tsx | 4 ++-- .../ResultsList/PinsList/PinsList.types.tsx | 5 +++-- .../PinsList/PinsListItem/PinsListItem.component.tsx | 6 +++--- .../PinsList/PinsListItem/PinsListItem.component.utils.ts | 6 +++--- .../utils/config/pinsLayer/getBioEntitiesFeatures.ts | 3 ++- .../config/pinsLayer/getBioEntititesFeatures.test.ts | 4 ++-- .../config/pinsLayer/getBioEntitySingleFeature.test.ts | 8 +++++--- .../utils/config/pinsLayer/getBioEntitySingleFeature.ts | 2 +- .../utils/listeners/mapSingleClick/onMapSingleClick.ts | 2 ++ src/constants/canvas.ts | 3 +-- src/types/pin.ts | 1 + 14 files changed, 32 insertions(+), 26 deletions(-) create mode 100644 src/types/pin.ts 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 db286ea5..74cd980b 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 0613843e..78eab37d 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 2f29038f..9c2939a8 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 b3b3a7c5..fa5c0141 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 41f82ada..7bd32b0e 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 6225c84d..e2f3f609 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 b5272139..8cc48465 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 8b9f9178..674813c3 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 6c0eb2e3..32e40c74 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 79d66146..0f861285 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 b910627e..3290b1a0 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 cdd4abbf..6940b226 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 31b30eb1..8db09cda 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 00000000..031433b9 --- /dev/null +++ b/src/types/pin.ts @@ -0,0 +1 @@ +export type PinType = 'chemicals' | 'drugs' | 'mirna' | 'bioEntity'; -- GitLab