diff --git a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.test.tsx b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.test.tsx
index 82c68ae9fe71a836edf39f23b7435cbc60a4c898..1a76eeeafeb412d06f87a75707d761c221e50289 100644
--- a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.test.tsx
+++ b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.test.tsx
@@ -7,7 +7,6 @@ import {
import { render, screen } from '@testing-library/react';
import { newReactionFixture } from '@/models/fixtures/newReactionFixture';
import { referenceFixture } from '@/models/fixtures/referenceFixture';
-import { DEFAULT_REFERENCE_SOURCE } from './ReactionDrawer.constants';
import { ReactionDrawer } from './ReactionDrawer.component';
const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -61,14 +60,10 @@ describe('ReactionDrawer - component', () => {
);
const referencesTextHref: [string, string][] = filteredReferences.map(ref => [
- `${ref.type} (${ref.id})`,
+ `${ref.type} (${ref.resource})`,
ref.link as string,
]);
- const referencesSources: string[] = filteredReferences.map(
- ref => ref.annotatorClassName || DEFAULT_REFERENCE_SOURCE,
- );
-
beforeEach(() =>
renderComponent({
reactions: {
@@ -99,10 +94,6 @@ describe('ReactionDrawer - component', () => {
expect(screen.getByText('Annotations:')).toBeInTheDocument();
});
- it.each(referencesSources)('should show drawer reaction source for source=%s', source => {
- expect(screen.getByText(`Source: ${source}`, { exact: false })).toBeInTheDocument();
- });
-
it.each(referencesTextHref)(
'should show drawer reaction reference with text=%s, href=%s',
(refText, href) => {
diff --git a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx
index 7f7e8f00be76dee0f34320b08a31654e4fc2e165..3ab0e0dfdc18209acd093d5c80473c56de155ddb 100644
--- a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx
+++ b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.component.tsx
@@ -1,7 +1,4 @@
-import {
- currentDrawerReactionGroupedReferencesSelector,
- currentDrawerReactionSelector,
-} from '@/redux/reactions/reactions.selector';
+import { currentDrawerReactionSelector } from '@/redux/reactions/reactions.selector';
import { DrawerHeading } from '@/shared/DrawerHeading';
import { useSelector } from 'react-redux';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
@@ -10,12 +7,11 @@ import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/Co
import { ZERO } from '@/constants/common';
import ReactionTypeEnum from '@/utils/reaction/ReactionTypeEnum';
import React from 'react';
-import { ReferenceGroup } from './ReferenceGroup';
+import { AnnotationItemList } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItemList.component';
import { ConnectedBioEntitiesList } from './ConnectedBioEntitiesList';
export const ReactionDrawer = (): React.ReactNode => {
const reaction = useSelector(currentDrawerReactionSelector);
- const referencesGrouped = useSelector(currentDrawerReactionGroupedReferencesSelector);
const commentsData = useAppSelector(currentDrawerReactionCommentsSelector);
@@ -48,10 +44,7 @@ export const ReactionDrawer = (): React.ReactNode => {
/>
)}
- <h3 className="font-semibold">Annotations:</h3>
- {referencesGrouped.map(group => (
- <ReferenceGroup key={group.source} group={group} />
- ))}
+ <AnnotationItemList references={reaction.references} />
<hr className="border-b border-b-divide" />
<ConnectedBioEntitiesList />
{isCommentAvailable && <div className="font-bold"> Comments</div>}
diff --git a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.constants.ts b/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.constants.ts
deleted file mode 100644
index 4ea80cbf1cd8944995ff783aa2fd0dd73a3d57c9..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ReactionDrawer/ReactionDrawer.constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const DEFAULT_REFERENCE_SOURCE = 'Annotated by curator';
diff --git a/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/ReferenceGroup.component.test.tsx b/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/ReferenceGroup.component.test.tsx
deleted file mode 100644
index 838f1d50e65f88462e99d31713bcd202b4661dcf..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/ReferenceGroup.component.test.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { StoreType } from '@/redux/store';
-import { ReferenceFiltered } from '@/types/reference';
-import {
- InitialStoreState,
- getReduxWrapperWithStore,
-} from '@/utils/testing/getReduxWrapperWithStore';
-import { render, screen } from '@testing-library/react';
-import { Props, ReferenceGroup } from './ReferenceGroup.component';
-
-const renderComponent = (
- props: Props,
- initialStoreState: InitialStoreState = {},
-): { store: StoreType } => {
- const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
-
- return (
- render(
- <Wrapper>
- <ReferenceGroup {...props} />
- </Wrapper>,
- ),
- {
- store,
- }
- );
-};
-
-describe('ReactionDrawer - component', () => {
- beforeEach(() => {
- jest.resetAllMocks();
- jest.clearAllMocks();
- });
-
- const singleReference = {
- link: 'https://www.ncbi.nlm.nih.gov/pubmed/24448649',
- article: {
- title:
- 'The nutrient-responsive transcription factor TFE3 promotes autophagy, lysosomal biogenesis, and clearance of cellular debris.',
- authors: [
- 'Martina JA',
- ' Diab HI',
- ' Lishu L',
- ' Jeong-A L',
- ' Patange S',
- ' Raben N',
- ' Puertollano R.',
- ],
- journal: 'Science signaling',
- year: 2014,
- link: 'https://www.ncbi.nlm.nih.gov/pubmed/24448649',
- pubmedId: '24448649',
- citationCount: 321,
- },
- type: 'PUBMED',
- resource: '24448649',
- id: 154973,
- annotatorClassName: '',
- };
-
- const cases: [string, ReferenceFiltered[]][] = [
- ['', [singleReference]],
- [
- 'source1',
- [
- {
- ...singleReference,
- annotatorClassName: 'source1',
- id: 1,
- },
- {
- ...singleReference,
- annotatorClassName: 'source1',
- id: 2,
- },
- ],
- ],
- [
- 'source2',
- [
- {
- ...singleReference,
- annotatorClassName: 'source2',
- id: 3,
- },
- ],
- ],
- ];
-
- it.each(cases)('should show reference group with source=%s', (source, references) => {
- const referencesTextHref: [string, string][] = references.map(ref => [
- `${ref.type} (${ref.id})`,
- ref.link as string,
- ]);
-
- renderComponent({
- group: {
- source,
- references,
- },
- });
-
- referencesTextHref.forEach(([refText, href]) => {
- const linkReferenceSpan = screen.getByText(refText, { exact: false });
- const linkReferenceAnchor = linkReferenceSpan.closest('a');
-
- expect(linkReferenceSpan).toBeInTheDocument();
- expect(linkReferenceAnchor).toBeInTheDocument();
- expect(linkReferenceAnchor?.href).toBe(`${href}`);
- });
- });
-});
diff --git a/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/ReferenceGroup.component.tsx b/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/ReferenceGroup.component.tsx
deleted file mode 100644
index aab45512ff1b06cdea9eebca337c83f27082939e..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/ReferenceGroup.component.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Icon } from '@/shared/Icon';
-import { ReferenceGroup as ReferenceGroupType } from '@/types/reference';
-import { DEFAULT_REFERENCE_SOURCE } from '../ReactionDrawer.constants';
-
-export interface Props {
- group: ReferenceGroupType;
-}
-
-export const ReferenceGroup = ({ group: { source, references } }: Props): JSX.Element => (
- <>
- <h3 className="font-semibold">Source: {source || DEFAULT_REFERENCE_SOURCE}</h3>
- {references.map(({ id, link, type }) => (
- <a key={id} href={link} target="_blank">
- <div className="flex justify-between">
- <span>{`${type} (${id})`}</span>
- <Icon name="arrow" className="h-6 w-6 fill-font-500" />
- </div>
- </a>
- ))}
- </>
-);
diff --git a/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/index.ts b/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/index.ts
deleted file mode 100644
index 0ac05ab8eb96c1fdf86a0095257838d8de604991..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ReactionDrawer/ReferenceGroup/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ReferenceGroup } from './ReferenceGroup.component';
diff --git a/src/redux/reactions/reactions.selector.ts b/src/redux/reactions/reactions.selector.ts
index 93a62fed147438094dd78026fef176a071edcede..f21073af5828a3bc0e9b27dc9af6a1e31bfd38cf 100644
--- a/src/redux/reactions/reactions.selector.ts
+++ b/src/redux/reactions/reactions.selector.ts
@@ -4,8 +4,6 @@ import { commentReactionSelector } from '@/redux/comment/comment.selectors';
import { currentDrawerReactionIdSelector } from '../drawer/drawer.selectors';
import { currentModelIdSelector } from '../models/models.selectors';
import { rootSelector } from '../root/root.selectors';
-import { getReferencesWithoutEmptyLink } from './utils/getFilteredReferences';
-import { getReferencesGroupedBySource } from './utils/getGroupedReferences';
export const reactionsSelector = createSelector(rootSelector, state => state.reactions);
@@ -34,11 +32,3 @@ export const currentDrawerReactionSelector = createSelector(
return reactions.find(({ id }) => id === currentDrawerReactionId);
},
);
-
-export const currentDrawerReactionGroupedReferencesSelector = createSelector(
- currentDrawerReactionSelector,
- reaction => {
- const referencesFiltered = getReferencesWithoutEmptyLink(reaction);
- return getReferencesGroupedBySource(referencesFiltered);
- },
-);
diff --git a/src/redux/reactions/utils/getFilteredReferences.test.ts b/src/redux/reactions/utils/getFilteredReferences.test.ts
deleted file mode 100644
index a194ab9e23e5d93bf3c1cd163047009d8686c7f3..0000000000000000000000000000000000000000
--- a/src/redux/reactions/utils/getFilteredReferences.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {
- REFERENCES_MOCK_ALL_INVALID,
- REFERENCES_MOCK_ALL_VALID,
-} from '@/models/mocks/referencesMock';
-import { ReferenceFiltered } from '@/types/reference';
-import { NewReaction } from '@/types/models';
-import { getReferencesWithoutEmptyLink } from './getFilteredReferences';
-
-describe('getFilteredReferences - subUtil', () => {
- const cases: [Pick<NewReaction, 'references'>, ReferenceFiltered[]][] = [
- [
- {
- references: REFERENCES_MOCK_ALL_VALID,
- },
- REFERENCES_MOCK_ALL_VALID as ReferenceFiltered[],
- ],
- [
- {
- references: REFERENCES_MOCK_ALL_INVALID,
- },
- [],
- ],
- [
- {
- references: [...REFERENCES_MOCK_ALL_VALID, ...REFERENCES_MOCK_ALL_INVALID],
- },
- REFERENCES_MOCK_ALL_VALID as ReferenceFiltered[],
- ],
- ];
-
- it.each(cases)('should return valid filtered references', (reaction, result) => {
- expect(getReferencesWithoutEmptyLink(reaction)).toStrictEqual(result);
- });
-});
diff --git a/src/redux/reactions/utils/getFilteredReferences.ts b/src/redux/reactions/utils/getFilteredReferences.ts
deleted file mode 100644
index bdd85d952e3faabdbd2ee8b4bc6ded0d3ac976e2..0000000000000000000000000000000000000000
--- a/src/redux/reactions/utils/getFilteredReferences.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NewReaction } from '@/types/models';
-import { ReferenceFiltered } from '@/types/reference';
-
-type InputReaction = Pick<NewReaction, 'references'>;
-
-export const getReferencesWithoutEmptyLink = (
- reaction: InputReaction | undefined,
-): ReferenceFiltered[] =>
- (reaction?.references || []).filter(
- (ref): ref is ReferenceFiltered => ref.link !== null && ref.link !== undefined,
- );
diff --git a/src/redux/reactions/utils/getGroupedReferences.test.ts b/src/redux/reactions/utils/getGroupedReferences.test.ts
deleted file mode 100644
index 65359741f252355813570b0072b15b268f3a28f8..0000000000000000000000000000000000000000
--- a/src/redux/reactions/utils/getGroupedReferences.test.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { ReferenceFiltered } from '@/types/reference';
-import { getReferencesGroupedBySource } from './getGroupedReferences';
-
-describe('getGroupedReferences - util', () => {
- const singleReference = {
- link: 'https://www.ncbi.nlm.nih.gov/pubmed/24448649',
- article: {
- title:
- 'The nutrient-responsive transcription factor TFE3 promotes autophagy, lysosomal biogenesis, and clearance of cellular debris.',
- authors: [
- 'Martina JA',
- ' Diab HI',
- ' Lishu L',
- ' Jeong-A L',
- ' Patange S',
- ' Raben N',
- ' Puertollano R.',
- ],
- journal: 'Science signaling',
- year: 2014,
- link: 'https://www.ncbi.nlm.nih.gov/pubmed/24448649',
- pubmedId: '24448649',
- citationCount: 321,
- },
- type: 'PUBMED',
- resource: '24448649',
- id: 154973,
- annotatorClassName: '',
- };
-
- const cases = [
- [[], []],
- [
- [singleReference],
- [
- {
- source: '',
- references: [singleReference],
- },
- ],
- ],
- [
- [
- {
- ...singleReference,
- annotatorClassName: 'source1',
- },
- {
- ...singleReference,
- annotatorClassName: 'source1',
- },
- {
- ...singleReference,
- annotatorClassName: 'source2',
- },
- ],
- [
- {
- source: 'source1',
- references: [
- {
- ...singleReference,
- annotatorClassName: 'source1',
- },
- {
- ...singleReference,
- annotatorClassName: 'source1',
- },
- ],
- },
- {
- source: 'source2',
- references: [
- {
- ...singleReference,
- annotatorClassName: 'source2',
- },
- ],
- },
- ],
- ],
- ];
-
- it.each(cases)('should return correct grouped references', (references, referencesGrouped) =>
- expect(getReferencesGroupedBySource(references as ReferenceFiltered[])).toMatchObject(
- referencesGrouped,
- ),
- );
-});
diff --git a/src/redux/reactions/utils/getGroupedReferences.ts b/src/redux/reactions/utils/getGroupedReferences.ts
deleted file mode 100644
index ca09f0a93e4357e4a594c055a7d27ce38f58718c..0000000000000000000000000000000000000000
--- a/src/redux/reactions/utils/getGroupedReferences.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ReferenceFiltered, ReferenceGrouped } from '@/types/reference';
-import { groupBy } from '@/utils/array/groupBy';
-
-export const getReferencesGroupedBySource = (references: ReferenceFiltered[]): ReferenceGrouped => {
- const referencesGroupedObject = groupBy(references, ref => ref.annotatorClassName);
-
- return Object.entries(referencesGroupedObject).map(([source, refs]) => ({
- source,
- references: refs,
- }));
-};