Skip to content
Snippets Groups Projects
Commit 8245f2cc authored by Mateusz Bolewski's avatar Mateusz Bolewski
Browse files

feat(map): display bioentity details after clicking on map

parent e095cdf5
No related branches found
No related tags found
2 merge requests!223reset the pin numbers before search results are fetch (so the results will be...,!71Feat/bioentity from map
import { DrawerHeading } from '@/shared/DrawerHeading';
// import { bioEnititiesResultListSelector } from '@/redux/drawer/drawer.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { searchedFromMapBioEntityElement } from '@/redux/bioEntity/bioEntity.selectors';
import { Icon } from '@/shared/Icon';
export const BioEntityDrawer = (): React.ReactNode => {
const bioEntityData = useAppSelector(searchedFromMapBioEntityElement);
if (!bioEntityData) {
return null;
}
return (
<div className="h-full max-h-full" data-testid="reaction-drawer">
<DrawerHeading
title={
<>
<span className="font-normal">{bioEntityData.stringType}:</span>&nbsp;
{bioEntityData.name}
</>
}
/>
<div className="flex flex-col gap-6 p-6">
<div className="text-sm font-normal">
Compartment: <b className="font-semibold">{bioEntityData.compartment}</b>
</div>
<div className="text-sm font-normal">
Full name: <b className="font-semibold">{bioEntityData.fullName}</b>
</div>
<h3 className="font-semibold">Annotations:</h3>
{bioEntityData.references.map(reference => {
return (
<a
className="pl-3 text-sm font-normal"
href={reference.link?.toString()}
key={reference.id}
target="_blank"
>
<div className="flex justify-between">
<span>
Source:{' '}
<b className="font-semibold">
{reference?.type} ({reference.resource})
</b>
</span>
<Icon name="arrow" className="h-6 w-6 fill-font-500" />
</div>
</a>
);
})}
</div>
</div>
);
};
......@@ -5,6 +5,7 @@ import { twMerge } from 'tailwind-merge';
import { ReactionDrawer } from './ReactionDrawer';
import { SearchDrawerWrapper as SearchDrawerContent } from './SearchDrawerWrapper';
import { SubmapsDrawer } from './SubmapsDrawer';
import { BioEntityDrawer } from './BioEntityDrawer/BioEntityDrawer.component';
export const Drawer = (): JSX.Element => {
const { isOpen, drawerName } = useAppSelector(drawerSelector);
......@@ -20,6 +21,7 @@ export const Drawer = (): JSX.Element => {
{isOpen && drawerName === 'search' && <SearchDrawerContent />}
{isOpen && drawerName === 'submaps' && <SubmapsDrawer />}
{isOpen && drawerName === 'reaction' && <ReactionDrawer />}
{isOpen && drawerName === 'bio-entity' && <BioEntityDrawer />}
</div>
);
};
import { FIRST_ARRAY_ELEMENT, SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
import { FIRST_ARRAY_ELEMENT, SECOND_ARRAY_ELEMENT, SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
import { bioEntityResponseFixture } from '@/models/fixtures/bioEntityContentsFixture';
import { ELEMENT_SEARCH_RESULT_MOCK_ALIAS } from '@/models/mocks/elementSearchResultMock';
import { apiPath } from '@/redux/apiPath';
......@@ -27,11 +27,19 @@ describe('handleAliasResults - util', () => {
handleAliasResults(dispatch)(ELEMENT_SEARCH_RESULT_MOCK_ALIAS);
});
it('should run getBioEntityAction', async () => {
it('should run openBioEntityDrawerById as first action', async () => {
await waitFor(() => {
const actions = store.getActions();
expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
expect(actions[FIRST_ARRAY_ELEMENT].type).toEqual('project/getMultiBioEntity/pending');
expect(actions[FIRST_ARRAY_ELEMENT].type).toEqual('drawer/openBioEntityDrawerById');
});
});
it('should run getMultiBioEntity as second action', async () => {
await waitFor(() => {
const actions = store.getActions();
expect(actions.length).toBeGreaterThan(SIZE_OF_EMPTY_ARRAY);
expect(actions[SECOND_ARRAY_ELEMENT].type).toEqual('project/getMultiBioEntity/pending');
});
});
});
import { getMultiBioEntity } from '@/redux/bioEntity/bioEntity.thunks';
import { openBioEntityDrawerById } from '@/redux/drawer/drawer.slice';
import { AppDispatch } from '@/redux/store';
import { ElementSearchResult } from '@/types/models';
......@@ -6,6 +7,8 @@ import { ElementSearchResult } from '@/types/models';
export const handleAliasResults =
(dispatch: AppDispatch) =>
async ({ id }: ElementSearchResult): Promise<void> => {
dispatch(openBioEntityDrawerById(id));
dispatch(
getMultiBioEntity({
searchQueries: [id.toString()],
......
......@@ -3,7 +3,10 @@ import { rootSelector } from '@/redux/root/root.selectors';
import { MultiSearchData } from '@/types/fetchDataState';
import { BioEntity, BioEntityContent } from '@/types/models';
import { createSelector } from '@reduxjs/toolkit';
import { currentSelectedSearchElement } from '../drawer/drawer.selectors';
import {
currentSearchedBioEntityId,
currentSelectedSearchElement,
} from '../drawer/drawer.selectors';
import { currentModelIdSelector, modelsDataSelector } from '../models/models.selectors';
export const bioEntitySelector = createSelector(rootSelector, state => state.bioEntity);
......@@ -17,6 +20,17 @@ export const bioEntitiesForSelectedSearchElement = createSelector(
),
);
export const searchedFromMapBioEntityElement = createSelector(
bioEntitiesForSelectedSearchElement,
currentSearchedBioEntityId,
(bioEntitiesState, currentBioEntityId): BioEntity | undefined => {
return (
bioEntitiesState &&
bioEntitiesState.data?.find(({ bioEntity }) => bioEntity.id === currentBioEntityId)?.bioEntity
);
},
);
export const loadingBioEntityStatusSelector = createSelector(
bioEntitiesForSelectedSearchElement,
state => state?.loading,
......
......@@ -11,4 +11,5 @@ export const DRAWER_INITIAL_STATE: DrawerState = {
selectedSearchElement: '',
},
reactionDrawerState: {},
bioEntityDrawerState: {},
};
import { STEP } from '@/constants/searchDrawer';
import type {
DrawerState,
OpenBioEntityDrawerByIdAction,
OpenReactionDrawerByIdAction,
OpenSearchDrawerWithSelectedTabReducerAction,
} from '@/redux/drawer/drawer.types';
......@@ -92,3 +93,13 @@ export const openReactionDrawerByIdReducer = (
state.drawerName = 'reaction';
state.reactionDrawerState.reactionId = action.payload;
};
export const openBioEntityDrawerByIdReducer = (
state: DrawerState,
action: OpenBioEntityDrawerByIdAction,
): void => {
state.isOpen = true;
state.drawerName = 'bio-entity';
state.bioEntityDrawerState.bioentityId = action.payload;
state.searchDrawerState.selectedSearchElement = action.payload.toString();
};
......@@ -36,6 +36,16 @@ export const currentStepTypeSelector = createSelector(
state => state.stepType,
);
export const bioEntityDrawerStateSelector = createSelector(
drawerSelector,
state => state.bioEntityDrawerState,
);
export const currentSearchedBioEntityId = createSelector(
bioEntityDrawerStateSelector,
state => state.bioentityId,
);
export const resultListSelector = createSelector(
rootSelector,
currentStepTypeSelector,
......
......@@ -7,6 +7,7 @@ import {
displayEntityDetailsReducer,
displayGroupedSearchResultsReducer,
displayMirnaListReducer,
openBioEntityDrawerByIdReducer,
openDrawerReducer,
openReactionDrawerByIdReducer,
openSearchDrawerWithSelectedTabReducer,
......@@ -31,6 +32,7 @@ const drawerSlice = createSlice({
displayGroupedSearchResults: displayGroupedSearchResultsReducer,
displayEntityDetails: displayEntityDetailsReducer,
openReactionDrawerById: openReactionDrawerByIdReducer,
openBioEntityDrawerById: openBioEntityDrawerByIdReducer,
},
});
......@@ -47,6 +49,7 @@ export const {
displayGroupedSearchResults,
displayEntityDetails,
openReactionDrawerById,
openBioEntityDrawerById,
} = drawerSlice.actions;
export default drawerSlice.reducer;
......@@ -14,11 +14,16 @@ export type ReactionDrawerState = {
reactionId?: number;
};
export type BioEntityDrawerState = {
bioentityId?: number;
};
export type DrawerState = {
isOpen: boolean;
drawerName: DrawerName;
searchDrawerState: SearchDrawerState;
reactionDrawerState: ReactionDrawerState;
bioEntityDrawerState: BioEntityDrawerState;
};
export type OpenSearchDrawerWithSelectedTabReducerPayload = string;
......@@ -27,3 +32,6 @@ export type OpenSearchDrawerWithSelectedTabReducerAction =
export type OpenReactionDrawerByIdPayload = number;
export type OpenReactionDrawerByIdAction = PayloadAction<OpenReactionDrawerByIdPayload>;
export type OpenBioEntityDrawerByIdPayload = number;
export type OpenBioEntityDrawerByIdAction = PayloadAction<OpenBioEntityDrawerByIdPayload>;
......@@ -6,4 +6,5 @@ export type DrawerName =
| 'export'
| 'legend'
| 'submaps'
| 'reaction';
| 'reaction'
| 'bio-entity';
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment