diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsModal.tsx b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsModal.tsx
index 0414f4a91080fe9eb5d2f091b2b940ab0662e67b..69cbc09b73c0dc9e31bb8477d9bce62d0a7fa1be 100644
--- a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsModal.tsx
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsModal.tsx
@@ -1,16 +1,16 @@
+import { EMPTY_ARRAY_STRING, FIRST_ARRAY_ELEMENT } from '@/constants/common';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
-import { getPublications } from '@/redux/publications/publications.thunks';
-import { useEffect, useMemo } from 'react';
-import { publicationsListDataSelector } from '@/redux/publications/publications.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modelsNameMapSelector } from '@/redux/models/models.selectors';
-import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { publicationsListDataSelector } from '@/redux/publications/publications.selectors';
+import { getPublications } from '@/redux/publications/publications.thunks';
import { LoadingIndicator } from '@/shared/LoadingIndicator';
+import { useEffect, useMemo } from 'react';
+import { PublicationsModalLayout } from './PublicationsModalLayout';
import {
PublicationsTable,
PublicationsTableData,
} from './PublicationsTable/PublicationsTable.component';
-import { PublicationsModalLayout } from './PublicationsModalLayout';
export const PublicationsModal = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -24,7 +24,7 @@ export const PublicationsModal = (): JSX.Element => {
authors: item.publication.article.authors,
journal: item.publication.article.journal,
year: item.publication.article.year,
- elementsOnMap: '{link to element on map}',
+ elementsOnMap: JSON.stringify(item.elements) || EMPTY_ARRAY_STRING, // table data accepts only string | string[]
submaps: mapsNames[item.elements[FIRST_ARRAY_ELEMENT].modelId],
}));
return dd || [];
diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/ElementLink.component.test.tsx b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/ElementLink.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bb30b23fd6bff11efb14587154f2c69773143f58
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/ElementLink.component.test.tsx
@@ -0,0 +1,267 @@
+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { bioEntityResponseFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { modelsFixture } from '@/models/fixtures/modelsFixture';
+import { apiPath } from '@/redux/apiPath';
+import { DEFAULT_POSITION } from '@/redux/map/map.constants';
+import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
+import { AppDispatch, RootState } from '@/redux/store';
+import { TargetElement } from '@/types/models';
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import {
+ InitialStoreState,
+ getReduxStoreWithActionsListener,
+} from '@/utils/testing/getReduxStoreActionsListener';
+import { render, screen, waitFor } from '@testing-library/react';
+import { HttpStatusCode } from 'axios';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import { ElementLink } from './ElementLink.component';
+
+const mockedAxiosNewClient = mockNetworkNewAPIResponse();
+
+const TARGET_ELEMENT: TargetElement = {
+ id: 123,
+ modelId: 52,
+ type: 'REACTION',
+};
+
+interface Props {
+ target: TargetElement;
+}
+
+const renderComponent = (
+ props: Props,
+ initialStoreState: InitialStoreState = {},
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener(initialStoreState);
+
+ return (
+ render(
+ <Wrapper>
+ <ElementLink target={props.target} />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('ElementLink - component', () => {
+ describe('when initialized', () => {
+ beforeEach(() => {
+ renderComponent({ target: TARGET_ELEMENT }, INITIAL_STORE_STATE_MOCK);
+ });
+
+ it('should show loading indicator', () => {
+ const loadingIndicator = screen.getByAltText('spinner icon');
+
+ expect(loadingIndicator).toBeInTheDocument();
+ });
+ });
+
+ describe('when loaded', () => {
+ mockedAxiosNewClient
+ .onGet(
+ apiPath.getBioEntityContentsStringWithQuery({
+ searchQuery: TARGET_ELEMENT.id.toString(),
+ isPerfectMatch: true,
+ }),
+ )
+ .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+
+ beforeEach(() => {
+ renderComponent({ target: TARGET_ELEMENT }, INITIAL_STORE_STATE_MOCK);
+ });
+
+ it('should not show loading indicator', async () => {
+ const loadingIndicator = screen.getByAltText('spinner icon');
+
+ await waitFor(() => {
+ expect(loadingIndicator).not.toBeInTheDocument();
+ });
+ });
+
+ it('should should show element id', async () => {
+ const { elementId } = bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT].bioEntity;
+
+ await waitFor(() => {
+ expect(screen.getByText(elementId)).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('when clicked (currentModel different than target model)', () => {
+ mockedAxiosNewClient
+ .onGet(
+ apiPath.getBioEntityContentsStringWithQuery({
+ searchQuery: TARGET_ELEMENT.id.toString(),
+ isPerfectMatch: true,
+ }),
+ )
+ .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+
+ it('should close modal, search for element, open drawer and open submap on link click', async () => {
+ const { store } = renderComponent(
+ { target: TARGET_ELEMENT },
+ {
+ ...INITIAL_STORE_STATE_MOCK,
+ models: {
+ ...INITIAL_STORE_STATE_MOCK.models,
+ data: [
+ {
+ ...modelsFixture[FIRST_ARRAY_ELEMENT],
+ idObject: TARGET_ELEMENT.modelId,
+ },
+ ],
+ },
+ },
+ );
+
+ const { elementId } = bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT].bioEntity;
+
+ await waitFor(() => {
+ const link = screen.getByText(elementId);
+ link.click();
+
+ const actions = store.getActions();
+
+ // close modal
+ expect(actions).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ payload: undefined,
+ type: 'modal/closeModal',
+ }),
+ ]),
+ );
+
+ // search for element
+ expect(actions).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ payload: undefined,
+ type: 'project/getSearchData/pending',
+ }),
+ ]),
+ );
+
+ // open drawer
+ expect(actions).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ payload: elementId,
+ type: 'drawer/openSearchDrawerWithSelectedTab',
+ }),
+ ]),
+ );
+
+ // open submap
+ expect(actions).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ payload: {
+ modelId: TARGET_ELEMENT.modelId,
+ modelName: modelsFixture[FIRST_ARRAY_ELEMENT].name,
+ },
+ type: 'map/openMapAndSetActive',
+ }),
+ ]),
+ );
+ });
+ });
+ });
+
+ describe('when clicked (currentModel the same as target model)', () => {
+ mockedAxiosNewClient
+ .onGet(
+ apiPath.getBioEntityContentsStringWithQuery({
+ searchQuery: TARGET_ELEMENT.id.toString(),
+ isPerfectMatch: true,
+ }),
+ )
+ .reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+
+ it('should close modal, search for element, open drawer and set submap on link click', async () => {
+ const { store } = renderComponent(
+ { target: TARGET_ELEMENT },
+ {
+ ...INITIAL_STORE_STATE_MOCK,
+ models: {
+ ...INITIAL_STORE_STATE_MOCK.models,
+ data: [
+ {
+ ...modelsFixture[FIRST_ARRAY_ELEMENT],
+ idObject: TARGET_ELEMENT.modelId,
+ },
+ ],
+ },
+ map: {
+ ...INITIAL_STORE_STATE_MOCK.map,
+ data: {
+ ...INITIAL_STORE_STATE_MOCK.map.data,
+ modelId: modelsFixture[FIRST_ARRAY_ELEMENT].idObject,
+ },
+ openedMaps: [
+ {
+ modelId: TARGET_ELEMENT.modelId,
+ modelName: modelsFixture[FIRST_ARRAY_ELEMENT].name,
+ lastPosition: DEFAULT_POSITION,
+ },
+ ],
+ },
+ },
+ );
+
+ const { elementId } = bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT].bioEntity;
+
+ await waitFor(() => {
+ const link = screen.getByText(elementId);
+ link.click();
+
+ const actions = store.getActions();
+
+ // close modal
+ expect(actions).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ payload: undefined,
+ type: 'modal/closeModal',
+ }),
+ ]),
+ );
+
+ // search for element
+ expect(actions).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ payload: undefined,
+ type: 'project/getSearchData/pending',
+ }),
+ ]),
+ );
+
+ // open drawer
+ expect(actions).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ payload: elementId,
+ type: 'drawer/openSearchDrawerWithSelectedTab',
+ }),
+ ]),
+ );
+
+ // set submap
+ expect(actions).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ payload: {
+ modelId: TARGET_ELEMENT.modelId,
+ },
+ type: 'map/setActiveMap',
+ }),
+ ]),
+ );
+ });
+ });
+ });
+});
diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/ElementLink.component.tsx b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/ElementLink.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..efb424f3b36df1861110b9a3e26f576f3e4e6973
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/ElementLink.component.tsx
@@ -0,0 +1,91 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+import {
+ getDefaultSearchTab,
+ getSearchValuesArrayAndTrimToSeven,
+} from '@/components/FunctionalArea/TopBar/SearchBar/SearchBar.utils';
+import { openSearchDrawerWithSelectedTab } from '@/redux/drawer/drawer.slice';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { mapModelIdSelector, mapOpenedMapsSelector } from '@/redux/map/map.selectors';
+import { openMapAndSetActive, setActiveMap } from '@/redux/map/map.slice';
+import { closeModal } from '@/redux/modal/modal.slice';
+import { modelsNameMapSelector } from '@/redux/models/models.selectors';
+import { getSearchData } from '@/redux/search/search.thunks';
+import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
+import { LoadingIndicator } from '@/shared/LoadingIndicator';
+import { BioEntityContent, TargetElement } from '@/types/models';
+import { useEffect, useState } from 'react';
+import { fetchElementLinkData } from './utils/fetchElementLinkData';
+
+interface Props {
+ target: TargetElement;
+}
+
+export const ElementLink = ({ target }: Props): JSX.Element => {
+ const dispatch = useAppDispatch();
+ const openedMaps = useAppSelector(mapOpenedMapsSelector);
+ const currentModelId = useAppSelector(mapModelIdSelector);
+ const [isLoading, setIsLoading] = useState<boolean>(true);
+ const [data, setData] = useState<BioEntityContent | undefined>(undefined);
+ const elementId = data?.bioEntity.elementId;
+ const mapsNames = useAppSelector(modelsNameMapSelector);
+
+ const isMapAlreadyOpened = (modelId: number): boolean =>
+ openedMaps.some(map => map.modelId === modelId);
+
+ const getElementLinkData = async (searchQuery: string): Promise<void> => {
+ const fetchedData = await fetchElementLinkData(searchQuery).finally(() => setIsLoading(false));
+
+ if (fetchedData) {
+ setData(fetchedData);
+ }
+ };
+
+ const searchForElementAndOpenDrawer = (): void => {
+ if (!elementId) return;
+
+ const searchValues = getSearchValuesArrayAndTrimToSeven(elementId);
+ dispatch(getSearchData({ searchQueries: searchValues, isPerfectMatch: false }));
+ dispatch(openSearchDrawerWithSelectedTab(getDefaultSearchTab(searchValues)));
+ };
+
+ const openSubmap = (): void => {
+ if (isMapAlreadyOpened(target.modelId)) {
+ dispatch(setActiveMap({ modelId: target.modelId }));
+ } else {
+ dispatch(
+ openMapAndSetActive({ modelId: target.modelId, modelName: mapsNames[target.modelId] }),
+ );
+ }
+
+ if (currentModelId !== target.modelId) {
+ PluginsEventBus.dispatchEvent('onSubmapClose', currentModelId);
+ PluginsEventBus.dispatchEvent('onSubmapOpen', target.modelId);
+ }
+ };
+
+ const handleElementLinkClick = (): void => {
+ dispatch(closeModal());
+ searchForElementAndOpenDrawer();
+ openSubmap();
+ };
+
+ useEffect(() => {
+ getElementLinkData(`${target.id}`);
+ }, [target.id]);
+
+ if (isLoading || !elementId) {
+ return <LoadingIndicator />;
+ }
+
+ return (
+ <button
+ type="button"
+ className="inline-block cursor-pointer underline"
+ onClick={handleElementLinkClick}
+ >
+ {elementId}
+ </button>
+ );
+};
diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/index.ts b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36ae649e4cacf725d098da8d4b620db2170a6141
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/index.ts
@@ -0,0 +1 @@
+export { ElementLink } from './ElementLink.component';
diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/utils/fetchElementLinkData.ts b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/utils/fetchElementLinkData.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4d1ed80ab54399adebfb0a8e0ee720b03105df1
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementLink/utils/fetchElementLinkData.ts
@@ -0,0 +1,40 @@
+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { targetElementLeanResponseSchema } from '@/models/targetElementLeanResponseSchema';
+import { apiPath } from '@/redux/apiPath';
+import { BIO_ENTITY_FETCHING_ERROR_PREFIX } from '@/redux/bioEntity/bioEntity.constants';
+import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
+import { BioEntityContent, BioEntityResponse } from '@/types/models';
+import { getErrorMessage } from '@/utils/getErrorMessage';
+import { showToast } from '@/utils/showToast';
+import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
+
+export const fetchElementLinkData = async (
+ searchQuery: string,
+): Promise<BioEntityContent | undefined> => {
+ try {
+ const response = await axiosInstanceNewAPI.get<BioEntityResponse>(
+ apiPath.getBioEntityContentsStringWithQuery({
+ searchQuery,
+ isPerfectMatch: true,
+ }),
+ );
+
+ const isDataValid = validateDataUsingZodSchema(response.data, targetElementLeanResponseSchema);
+
+ if (isDataValid && response.data.content?.[FIRST_ARRAY_ELEMENT]) {
+ return response.data.content[FIRST_ARRAY_ELEMENT];
+ }
+ } catch (error) {
+ const errorMessage = getErrorMessage({
+ error,
+ prefix: BIO_ENTITY_FETCHING_ERROR_PREFIX,
+ });
+
+ showToast({
+ type: 'error',
+ message: errorMessage,
+ });
+ }
+
+ return undefined;
+};
diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementsOnMapCell.component.test.tsx b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementsOnMapCell.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8c8c0fe7e48bb2356fcfbdb662704ec859cb7d97
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementsOnMapCell.component.test.tsx
@@ -0,0 +1,107 @@
+import { FIRST_ARRAY_ELEMENT, SECOND_ARRAY_ELEMENT, THIRD_ARRAY_ELEMENT } from '@/constants/common';
+import { bioEntityResponseFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { apiPath } from '@/redux/apiPath';
+import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
+import { AppDispatch, RootState } from '@/redux/store';
+import { BioEntityContent, TargetElement } from '@/types/models';
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import {
+ InitialStoreState,
+ getReduxStoreWithActionsListener,
+} from '@/utils/testing/getReduxStoreActionsListener';
+import { render, screen, waitFor } from '@testing-library/react';
+import { HttpStatusCode } from 'axios';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import { ElementsOnMapCell } from './ElementsOnMapCell.component';
+
+interface Props {
+ targets: TargetElement[];
+}
+
+const renderComponent = (
+ props: Props,
+ initialStoreState: InitialStoreState = {},
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener(initialStoreState);
+
+ return (
+ render(
+ <Wrapper>
+ <ElementsOnMapCell targets={props.targets} />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+const mockedAxiosNewClient = mockNetworkNewAPIResponse();
+
+const mockTargets = [
+ { id: 1, modelId: 2, type: 'target-1' },
+ { id: 2, modelId: 3, type: 'target-2' },
+ { id: 3, modelId: 4, type: 'target-3' },
+];
+
+const getBioEntityContent = (elementId: string): BioEntityContent[] => [
+ {
+ ...bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT],
+ bioEntity: {
+ ...bioEntityResponseFixture.content[FIRST_ARRAY_ELEMENT].bioEntity,
+ elementId,
+ },
+ },
+];
+
+describe('ElementsOnMapCell - component', () => {
+ mockedAxiosNewClient
+ .onGet(
+ apiPath.getBioEntityContentsStringWithQuery({
+ searchQuery: mockTargets[FIRST_ARRAY_ELEMENT].id.toString(),
+ isPerfectMatch: true,
+ }),
+ )
+ .reply(HttpStatusCode.Ok, {
+ ...bioEntityResponseFixture,
+ content: getBioEntityContent(mockTargets[FIRST_ARRAY_ELEMENT].type),
+ });
+
+ mockedAxiosNewClient
+ .onGet(
+ apiPath.getBioEntityContentsStringWithQuery({
+ searchQuery: mockTargets[SECOND_ARRAY_ELEMENT].id.toString(),
+ isPerfectMatch: true,
+ }),
+ )
+ .reply(HttpStatusCode.Ok, {
+ ...bioEntityResponseFixture,
+ content: getBioEntityContent(mockTargets[SECOND_ARRAY_ELEMENT].type),
+ });
+
+ mockedAxiosNewClient
+ .onGet(
+ apiPath.getBioEntityContentsStringWithQuery({
+ searchQuery: mockTargets[THIRD_ARRAY_ELEMENT].id.toString(),
+ isPerfectMatch: true,
+ }),
+ )
+ .reply(HttpStatusCode.Ok, {
+ ...bioEntityResponseFixture,
+ content: getBioEntityContent(mockTargets[THIRD_ARRAY_ELEMENT].type),
+ });
+
+ test.each(mockTargets)('should render correctly', async ({ type }) => {
+ renderComponent(
+ {
+ targets: mockTargets,
+ },
+ INITIAL_STORE_STATE_MOCK,
+ );
+
+ await waitFor(() => {
+ // type as elementId
+ expect(screen.getByText(type)).toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementsOnMapCell.component.tsx b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementsOnMapCell.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..36cffdd4f6bc59a07030e0509fb5d602ccf6d7a6
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/ElementsOnMapCell.component.tsx
@@ -0,0 +1,24 @@
+import { ONE } from '@/constants/common';
+import { TargetElement } from '@/types/models';
+import { ElementLink } from './ElementLink';
+
+interface Props {
+ targets: TargetElement[];
+}
+
+export const ElementsOnMapCell = ({ targets }: Props): JSX.Element => {
+ return (
+ <div className="inline">
+ {targets.map((target, index) => {
+ const isLastElement = index + ONE === targets.length;
+
+ return (
+ <>
+ <ElementLink key={target.id} target={target} />
+ {isLastElement ? '' : ', '}
+ </>
+ );
+ })}
+ </div>
+ );
+};
diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/index.ts b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5709de98ccb917dbce09e4c7527ae4d185c6d6d
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/ElementsOnMapCell/index.ts
@@ -0,0 +1 @@
+export { ElementsOnMapCell } from './ElementsOnMapCell.component';
diff --git a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/PublicationsTable.component.tsx b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/PublicationsTable.component.tsx
index e71b3bf2a8cb272c0e0f61afc619006120da336c..380d1328735db83b1533d65ec13307d53101ea91 100644
--- a/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/PublicationsTable.component.tsx
+++ b/src/components/FunctionalArea/Modal/PublicationsModal/PublicationsTable/PublicationsTable.component.tsx
@@ -1,29 +1,32 @@
import { ONE, ZERO } from '@/constants/common';
+import { targetElementSchema } from '@/models/targetElementSchema';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import {
- totalSizeSelector,
- paginationSelector,
isLoadingSelector,
+ paginationSelector,
+ searchValueSelector,
+ selectedModelIdSelector,
sortColumnSelector,
sortOrderSelector,
- selectedModelIdSelector,
- searchValueSelector,
+ totalSizeSelector,
} from '@/redux/publications/publications.selectors';
import { getPublications } from '@/redux/publications/publications.thunks';
import { Button } from '@/shared/Button';
import {
+ OnChangeFn,
PaginationState,
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
- OnChangeFn,
} from '@tanstack/react-table';
import { useRef, useState } from 'react';
-import { SortByHeader } from './SortByHeader';
-import { DEFAULT_PAGE_SIZE } from './PublicationsTable.constants';
+import { z } from 'zod';
+import { ElementsOnMapCell } from './ElementsOnMapCell';
import { FilterBySubmapHeader } from './FilterBySubmapHeader/FilterBySubmapHeader.component';
+import { DEFAULT_PAGE_SIZE } from './PublicationsTable.constants';
+import { SortByHeader } from './SortByHeader';
export type PublicationsTableData = {
pubmedId: string;
@@ -64,7 +67,20 @@ const columns = [
size: 80,
}),
// eslint-disable-next-line @typescript-eslint/no-unused-vars
- columnHelper.accessor(row => row.elementsOnMap, { header: 'Elements on map', size: 176 }),
+ columnHelper.accessor(row => row.elementsOnMap, {
+ header: 'Elements on map',
+ size: 176,
+ cell: ({ getValue }): JSX.Element => {
+ try {
+ const valueObject: unknown = JSON.parse(getValue());
+ const targets = z.array(targetElementSchema).parse(valueObject);
+
+ return <ElementsOnMapCell targets={targets} />;
+ } catch (error) {
+ return <div />;
+ }
+ },
+ }),
// eslint-disable-next-line @typescript-eslint/no-unused-vars
columnHelper.accessor(row => row.submaps, {
id: 'submaps',
@@ -125,7 +141,6 @@ export const PublicationsTable = ({ data }: PublicationsTableProps): JSX.Element
getCoreRowModel: getCoreRowModel(),
manualPagination: true,
pageCount: pagesCount,
- // onPaginationChange: setPagination,
onPaginationChange,
});
diff --git a/src/components/FunctionalArea/TopBar/TopBar.component.tsx b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
index 0f94e63c2468aa3f9d426cee43b19a00b696e734..e67e8e4d9f9e88170798973a1f22018b3f7e3eaa 100644
--- a/src/components/FunctionalArea/TopBar/TopBar.component.tsx
+++ b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
@@ -2,11 +2,14 @@ import { SearchBar } from '@/components/FunctionalArea/TopBar/SearchBar';
import { UserAvatar } from '@/components/FunctionalArea/TopBar/UserAvatar';
import { openOverlaysDrawer, openSubmapsDrawer } from '@/redux/drawer/drawer.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { projectDataSelector } from '@/redux/project/project.selectors';
import { Button } from '@/shared/Button';
import { ClearAnchorsButton } from './ClearAnchorsButton';
export const TopBar = (): JSX.Element => {
const dispatch = useAppDispatch();
+ const currentProject = useAppSelector(projectDataSelector);
const onSubmapsClick = (): void => {
dispatch(openSubmapsDrawer());
@@ -37,7 +40,7 @@ export const TopBar = (): JSX.Element => {
</Button>
</div>
<div className="bg-primary-100 px-4 py-1 text-xs leading-6 text-primary-500">
- Parkinson disease map
+ {currentProject?.name || ''}
</div>
</div>
);
diff --git a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx
index 211828b2599c579bccaeec9898495a92bdd8ad61..73894aaf3e30bd33be35ea4d55c02b8d57b0227c 100644
--- a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx
+++ b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx
@@ -1,20 +1,20 @@
+import { apiPath } from '@/redux/apiPath';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { openPublicationsModal } from '@/redux/modal/modal.slice';
+import { mainMapModelDescriptionSelector } from '@/redux/models/models.selectors';
import {
+ diseaseLinkSelector,
diseaseNameSelector,
+ organismLinkSelector,
+ organismNameSelector,
projectNameSelector,
versionSelector,
- organismNameSelector,
- diseaseLinkSelector,
- organismLinkSelector,
} from '@/redux/project/project.selectors';
import { DrawerHeading } from '@/shared/DrawerHeading';
-import { apiPath } from '@/redux/apiPath';
import { LinkButton } from '@/shared/LinkButton';
-import { mainMapModelDescriptionSelector } from '@/redux/models/models.selectors';
-import './ProjectInfoDrawer.styles.css';
-import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useEffect } from 'react';
-import { openPublicationsModal } from '@/redux/modal/modal.slice';
+import './ProjectInfoDrawer.styles.css';
export const ProjectInfoDrawer = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -44,12 +44,12 @@ export const ProjectInfoDrawer = (): JSX.Element => {
Name: <span className="font-semibold">{projectName}</span>
</p>
<p className="mt-4">
- version: <span className="font-semibold">{version}</span>
+ Version: <span className="font-semibold">{version}</span>
</p>
<div className="mt-4">Data:</div>
<ul className="list-disc pl-6 ">
<li className="mt-2 text-hyperlink-blue">
- <button type="button" onClick={onPublicationsClick} className="text-sm font-semibold">
+ <button type="button" onClick={onPublicationsClick} className="text-base font-semibold">
Publications
</button>
</li>
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
index 084bf61124bcb3a98391ce21c10b578ba44a9a5f..6447864167fa0759a12d4ca0c95ca98671a0291b 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.component.test.tsx
@@ -209,7 +209,7 @@ describe('BioEntitiesPinsListItem - component ', () => {
expect(store.getState().map.data.position.last).toEqual({
x: 1,
y: 1,
- z: 3,
+ z: DEFAULT_MAX_ZOOM,
});
});
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.utils.ts b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.utils.ts
index ac04a9083867762cc3aedeabc3804c3c3bccdb03..af28a4c6b83e8b6b1d2ec7dec5f55e2f785b5f02 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.utils.ts
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/BioEntitiesResultsList/BioEntitiesPinsList/BioEntitiesPinsListItem/BioEntitiesPinsListItem.utils.ts
@@ -1,5 +1,5 @@
import { PinListBioEntity, PinListBioEntityWithCoords } from './BioEntitiesPinsListItem.types';
export const isPinWithCoordinates = (pin: PinListBioEntity): pin is PinListBioEntityWithCoords => {
- return Boolean(pin?.x && pin?.y);
+ return Boolean('x' in pin && 'y' in pin);
};
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx
index 33d0635014f9d9140edfadac8c7d75c5b63e8784..2eb6f897def7a8412c5189963957f58e0115327b 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx
@@ -73,8 +73,8 @@ describe('BioEntitiesAccordion - component', () => {
});
expect(screen.getByText('Content (10)')).toBeInTheDocument();
- expect(screen.getByText('Core PD map (5)')).toBeInTheDocument();
- expect(screen.getByText('Histamine signaling (3)')).toBeInTheDocument();
+ expect(screen.getByText('Core PD map (4)')).toBeInTheDocument();
+ expect(screen.getByText('Histamine signaling (4)')).toBeInTheDocument();
expect(screen.getByText('PRKN substrates (2)')).toBeInTheDocument();
});
});
diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/getBioEntitiesIdsFromReaction.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/getBioEntitiesIdsFromReaction.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2707040e2a180a028179d9baeebcdcc4e23c8253
--- /dev/null
+++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/getBioEntitiesIdsFromReaction.ts
@@ -0,0 +1,9 @@
+import { Reaction } from '@/types/models';
+
+export const getBioEntitiesIdsFromReaction = (reaction: Reaction): string[] => {
+ const { products, reactants, modifiers } = reaction;
+ const productsIds = products.map(p => ('aliasId' in p ? p.aliasId : p.element));
+ const reactantsIds = reactants.map(r => ('aliasId' in r ? r.aliasId : r.element));
+ const modifiersIds = modifiers.map(m => ('aliasId' in m ? m.aliasId : m.element));
+ return [...productsIds, ...reactantsIds, ...modifiersIds].map(identifier => String(identifier));
+};
diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts
index 54ead44c2e5fec1dbb16391b9308457962a9653e..e36e92a7b655a1c1b20a77f41effe2707c51fab3 100644
--- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts
+++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleAliasResults.test.ts
@@ -1,18 +1,19 @@
/* eslint-disable no-magic-numbers */
-import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
+import { SIZE_OF_EMPTY_ARRAY, ZERO } from '@/constants/common';
import { bioEntityResponseFixture } from '@/models/fixtures/bioEntityContentsFixture';
import { ELEMENT_SEARCH_RESULT_MOCK_ALIAS } from '@/models/mocks/elementSearchResultMock';
import { apiPath } from '@/redux/apiPath';
-import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import { searchFitBounds } from '@/services/pluginsManager/map/triggerSearch/searchFitBounds';
+import { mockNetworkNewAPIResponse, mockNetworkResponse } from '@/utils/mockNetworkResponse';
import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
import { waitFor } from '@testing-library/react';
import { HttpStatusCode } from 'axios';
-import { searchFitBounds } from '@/services/pluginsManager/map/triggerSearch/searchFitBounds';
import { handleAliasResults } from './handleAliasResults';
jest.mock('../../../../../../services/pluginsManager/map/triggerSearch/searchFitBounds');
const mockedAxiosClient = mockNetworkNewAPIResponse();
+const mockedAxiosOldClient = mockNetworkResponse();
const SEARCH_CONFIG_MOCK = {
point: {
@@ -27,6 +28,14 @@ const SEARCH_CONFIG_MOCK = {
describe('handleAliasResults - util', () => {
beforeEach(() => {
jest.clearAllMocks();
+
+ const bioEntityWithIdReaction = bioEntityResponseFixture.content.find(c =>
+ Boolean(c.bioEntity.idReaction),
+ )?.bioEntity || { id: ZERO };
+
+ mockedAxiosOldClient
+ .onGet(apiPath.getReactionsWithIds([Number(`${bioEntityWithIdReaction.id}`)]))
+ .reply(HttpStatusCode.Ok, []);
});
describe('when matching bioEntity not found', () => {
it('should clear bio entities and do not close drawer if result drawer is not open', async () => {
@@ -38,6 +47,7 @@ describe('handleAliasResults - util', () => {
}),
)
.reply(HttpStatusCode.Ok, bioEntityResponseFixture);
+
const { store } = getReduxStoreWithActionsListener();
const { dispatch } = store;
@@ -57,6 +67,8 @@ describe('handleAliasResults - util', () => {
'project/getBioEntityContents/pending',
'project/getBioEntityContents/fulfilled',
'entityNumber/addNumbersToEntityNumberData',
+ 'reactions/getByIds/pending',
+ 'reactions/getByIds/fulfilled',
'project/getMultiBioEntity/fulfilled',
'bioEntityContents/clearBioEntitiesData',
]);
@@ -91,6 +103,8 @@ describe('handleAliasResults - util', () => {
'project/getBioEntityContents/pending',
'project/getBioEntityContents/fulfilled',
'entityNumber/addNumbersToEntityNumberData',
+ 'reactions/getByIds/pending',
+ 'reactions/getByIds/fulfilled',
'project/getMultiBioEntity/fulfilled',
'drawer/closeDrawer',
'bioEntityContents/clearBioEntitiesData',
@@ -142,6 +156,8 @@ describe('handleAliasResults - util', () => {
'project/getBioEntityContents/pending',
'project/getBioEntityContents/fulfilled',
'entityNumber/addNumbersToEntityNumberData',
+ 'reactions/getByIds/pending',
+ 'reactions/getByIds/fulfilled',
'project/getMultiBioEntity/fulfilled',
'drawer/selectTab',
'drawer/openBioEntityDrawerById',
@@ -179,6 +195,8 @@ describe('handleAliasResults - util', () => {
'project/getBioEntityContents/pending',
'project/getBioEntityContents/fulfilled',
'entityNumber/addNumbersToEntityNumberData',
+ 'reactions/getByIds/pending',
+ 'reactions/getByIds/fulfilled',
'project/getMultiBioEntity/fulfilled',
'drawer/selectTab',
'drawer/openBioEntityDrawerById',
diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.test.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.test.ts
index 00513517da6903efad08644410e298bbc87a78a6..1d754d392306c2af1ddddfe26d96867d4f0ceb1a 100644
--- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.test.ts
+++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.test.ts
@@ -11,8 +11,8 @@ import { INITIAL_STORE_STATE_MOCK } from '@/redux/root/root.fixtures';
import { mockNetworkNewAPIResponse, mockNetworkResponse } from '@/utils/mockNetworkResponse';
import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
import { HttpStatusCode } from 'axios';
-import { handleReactionResults } from './handleReactionResults';
import * as findClosestReactionPoint from './findClosestReactionPoint';
+import { handleReactionResults } from './handleReactionResults';
const mockedAxiosOldClient = mockNetworkResponse();
const mockedAxiosNewClient = mockNetworkNewAPIResponse();
diff --git a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.ts b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.ts
index c9875710bcee631d9cdf9acb7b9aa6ff3f66b457..4a12d522b3cc290d881fd5623d8bdd302c7d6c76 100644
--- a/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.ts
+++ b/src/components/Map/MapViewer/utils/listeners/mapSingleClick/handleReactionResults.ts
@@ -3,12 +3,12 @@ import { getMultiBioEntity } from '@/redux/bioEntity/bioEntity.thunks';
import { openReactionDrawerById, selectTab } from '@/redux/drawer/drawer.slice';
import { getReactionsByIds } from '@/redux/reactions/reactions.thunks';
import { AppDispatch } from '@/redux/store';
-import { ElementSearchResult, Reaction } from '@/types/models';
-import { PayloadAction } from '@reduxjs/toolkit';
+import { searchFitBounds } from '@/services/pluginsManager/map/triggerSearch/searchFitBounds';
import { PluginsEventBus } from '@/services/pluginsManager/pluginsEventBus';
import { Point } from '@/types/map';
-import { searchFitBounds } from '@/services/pluginsManager/map/triggerSearch/searchFitBounds';
+import { ElementSearchResult } from '@/types/models';
import { findClosestReactionPoint } from './findClosestReactionPoint';
+import { getBioEntitiesIdsFromReaction } from './getBioEntitiesIdsFromReaction';
import { handleReactionSearchClickFailure } from './handleReactionSearchClickFailure';
type SearchConfig = {
@@ -24,13 +24,14 @@ type SearchConfig = {
export const handleReactionResults =
(dispatch: AppDispatch, closestSearchResult: ElementSearchResult, searchConfig?: SearchConfig) =>
async ({ id }: ElementSearchResult): Promise<void> => {
- const data = await dispatch(getReactionsByIds([id])) as PayloadAction<Reaction[] | undefined>;
+ const data = await dispatch(getReactionsByIds([id]));
const payload = data?.payload;
- if (!data || !payload || payload.length === SIZE_OF_EMPTY_ARRAY) {
+ if (!data || !payload || typeof payload === "string" || payload.data.length === SIZE_OF_EMPTY_ARRAY) {
return;
}
- const reaction = payload[FIRST_ARRAY_ELEMENT];
+ const reaction = payload.data[FIRST_ARRAY_ELEMENT];
+ const bioEntitiesIds = getBioEntitiesIdsFromReaction(reaction);
if (searchConfig && searchConfig.searchDistance) {
const { maxZoom, point, searchDistance, zoom, isResultDrawerOpen } = searchConfig;
@@ -45,12 +46,6 @@ export const handleReactionResults =
}
}
- const { products, reactants, modifiers } = reaction;
- const productsIds = products.map(p => p.aliasId);
- const reactantsIds = reactants.map(r => r.aliasId);
- const modifiersIds = modifiers.map(m => m.aliasId);
- const bioEntitiesIds = [...productsIds, ...reactantsIds, ...modifiersIds].map(identifier => String(identifier));
-
dispatch(openReactionDrawerById(reaction.id));
dispatch(selectTab(''));
diff --git a/src/constants/common.ts b/src/constants/common.ts
index 092b9fc1b941c501716442b83a8e8a02ed873894..cc5db42a582c323623f57455b262fba83529b98f 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -17,4 +17,5 @@ export const NOOP = (): void => {};
export const ONE_DECIMAL = 0.1;
export const ONE_HUNDRED = 100;
+export const EMPTY_ARRAY_STRING = '[]';
export const ZOOM_FACTOR = 2.0; // Zoom factor indicating doubling the distance for each zoom level
diff --git a/src/models/bioEntitySchema.ts b/src/models/bioEntitySchema.ts
index 6f786cc8d19b2d68458fcc33f6a8dddb117f3415..4fe837ef05f6b9d18e18df2f4e87e940dcf36704 100644
--- a/src/models/bioEntitySchema.ts
+++ b/src/models/bioEntitySchema.ts
@@ -1,3 +1,4 @@
+import { ZERO } from '@/constants/common';
import { z } from 'zod';
import { colorSchema } from './colorSchema';
import { glyphSchema } from './glyphSchema';
@@ -20,23 +21,29 @@ export const bioEntitySchema = z.object({
notes: z.string(),
symbol: z.string().nullable(),
homodimer: z.number().optional(),
- nameX: z.number(),
- nameY: z.number(),
- nameWidth: z.number(),
- nameHeight: z.number(),
- nameVerticalAlign: z.string(),
- nameHorizontalAlign: z.string(),
- width: z.number(),
- height: z.number(),
+ nameX: z.number().nullable().optional(),
+ nameY: z.number().nullable().optional(),
+ nameWidth: z.number().nullable().optional(),
+ nameHeight: z.number().nullable().optional(),
+ nameVerticalAlign: z.string().nullable().optional(),
+ nameHorizontalAlign: z.string().nullable().optional(),
+ width: z
+ .number()
+ .optional()
+ .transform(width => width ?? ZERO),
+ height: z
+ .number()
+ .optional()
+ .transform(height => height ?? ZERO),
visibilityLevel: z.string(),
- transparencyLevel: z.string(),
+ transparencyLevel: z.string().nullable().optional(),
synonyms: z.array(z.string()),
- formerSymbols: z.array(z.string()),
- fullName: z.string().nullable(),
+ formerSymbols: z.array(z.string()).nullable().optional(),
+ fullName: z.string().nullable().nullable().optional(),
compartmentName: z.string().nullable().optional(),
abbreviation: z.string().nullable(),
formula: z.string().nullable(),
- glyph: glyphSchema.nullable(),
+ glyph: glyphSchema.nullable().optional(),
activity: z.boolean().optional(),
structuralState: z.optional(structuralStateSchema.nullable()),
hypothetical: z.boolean().nullable().optional(),
@@ -49,15 +56,21 @@ export const bioEntitySchema = z.object({
onlySubstanceUnits: z.boolean().optional(),
modificationResidues: z.optional(z.array(modificationResiduesSchema)),
complex: z.number().nullable().optional(),
- compartment: z.number().nullable(),
- submodel: submodelSchema.nullable(),
- x: z.number(),
- y: z.number(),
+ compartment: z.number().nullable().optional(),
+ submodel: submodelSchema.nullable().optional(),
+ x: z
+ .number()
+ .optional()
+ .transform(x => x ?? ZERO),
+ y: z
+ .number()
+ .optional()
+ .transform(y => y ?? ZERO),
lineWidth: z.number().optional(),
- fontColor: colorSchema,
- fontSize: z.number(),
- fillColor: colorSchema,
- borderColor: colorSchema,
+ fontColor: colorSchema.nullable().optional(),
+ fontSize: z.number().nullable().optional(),
+ fillColor: colorSchema.nullable().optional(),
+ borderColor: colorSchema.nullable().optional(),
smiles: z.optional(z.string()).nullable(),
inChI: z.optional(z.string().nullable()),
inChIKey: z.optional(z.string().nullable()),
@@ -66,11 +79,11 @@ export const bioEntitySchema = z.object({
innerWidth: z.optional(z.number()),
idReaction: z.optional(z.string()),
reversible: z.optional(z.boolean()),
- mechanicalConfidenceScore: z.optional(z.boolean()),
- lowerBound: z.optional(z.boolean()),
- upperBound: z.optional(z.boolean()),
- subsystem: z.optional(z.string()),
- geneProteinReaction: z.optional(z.string()),
+ mechanicalConfidenceScore: z.optional(z.boolean()).nullable().optional(),
+ lowerBound: z.optional(z.boolean()).nullable().optional(),
+ upperBound: z.optional(z.boolean()).nullable().optional(),
+ subsystem: z.optional(z.string()).nullable().optional(),
+ geneProteinReaction: z.optional(z.string()).nullable().optional(),
kinetics: z.optional(z.null()),
products: z.optional(z.array(productsSchema)),
reactants: z.optional(z.array(productsSchema)),
diff --git a/src/models/operatorSchema.ts b/src/models/operatorSchema.ts
index 20f6305e34862db3cda4e2e4e059e8079f8873de..6a405a86314d848b157dfffd1e808b80a897ee6d 100644
--- a/src/models/operatorSchema.ts
+++ b/src/models/operatorSchema.ts
@@ -5,7 +5,7 @@ export const operatorSchema = z.object({
id: z.number(),
line: lineSchema,
inputs: z.array(z.object({ id: z.number() })),
- outputs: z.undefined(),
+ outputs: z.any().optional(),
operatorText: z.string(),
reactantOperator: z.boolean(),
productOperator: z.boolean(),
diff --git a/src/models/products.ts b/src/models/products.ts
index 4807c4862dbe9be1abe5be98890bcbc5066b3509..56e205fe4b3cbc9c9746edd22f9cd266ab865f3d 100644
--- a/src/models/products.ts
+++ b/src/models/products.ts
@@ -1,7 +1,14 @@
import { z } from 'zod';
-export const productsSchema = z.object({
- aliasId: z.number(),
- stoichiometry: z.number().nullable(),
- type: z.optional(z.string()),
-});
+export const productsSchema = z.union([
+ z.object({
+ aliasId: z.number(),
+ stoichiometry: z.number().nullable(),
+ type: z.optional(z.string()),
+ }),
+ z.object({
+ element: z.number(),
+ stoichiometry: z.number().nullable(),
+ type: z.optional(z.string()),
+ }),
+]);
diff --git a/src/models/targetElementLeanResponseSchema.ts b/src/models/targetElementLeanResponseSchema.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b4d188165cba84bf81d208f4bb1b6f26ae80490b
--- /dev/null
+++ b/src/models/targetElementLeanResponseSchema.ts
@@ -0,0 +1,16 @@
+import { z } from 'zod';
+
+export const targetElementLeanResponseSchema = z.object({
+ content: z.array(
+ z.object({
+ bioEntity: z.object({
+ elementId: z.string(),
+ }),
+ }),
+ ),
+ totalPages: z.number(),
+ totalElements: z.number(),
+ numberOfElements: z.number(),
+ size: z.number(),
+ number: z.number(),
+});
diff --git a/src/redux/bioEntity/bioEntity.thunks.ts b/src/redux/bioEntity/bioEntity.thunks.ts
index bbf1778e7bf8e19f44c84d11e2051b32c2366394..18fa812c93182be6346b9bff5f77a9168308a870 100644
--- a/src/redux/bioEntity/bioEntity.thunks.ts
+++ b/src/redux/bioEntity/bioEntity.thunks.ts
@@ -1,90 +1,4 @@
-import { bioEntityResponseSchema } from '@/models/bioEntityResponseSchema';
-import { apiPath } from '@/redux/apiPath';
-import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
-import { BioEntityContent, BioEntityResponse } from '@/types/models';
-import { PerfectMultiSearchParams, PerfectSearchParams } from '@/types/search';
-import { ThunkConfig } from '@/types/store';
-import { getErrorMessage } from '@/utils/getErrorMessage';
-import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
-import { PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
-import { addNumbersToEntityNumberData } from '../entityNumber/entityNumber.slice';
-import {
- BIO_ENTITY_FETCHING_ERROR_PREFIX,
- MULTI_BIO_ENTITY_FETCHING_ERROR_PREFIX,
-} from './bioEntity.constants';
+import { getBioEntity } from './thunks/getBioEntity';
+import { getMultiBioEntity } from './thunks/getMultiBioEntity';
-type GetBioEntityProps = PerfectSearchParams;
-
-export const getBioEntity = createAsyncThunk<
- BioEntityContent[] | undefined,
- GetBioEntityProps,
- ThunkConfig
->(
- 'project/getBioEntityContents',
- async (
- { searchQuery, isPerfectMatch, addNumbersToEntityNumber = true },
- { rejectWithValue, dispatch },
- ) => {
- try {
- const response = await axiosInstanceNewAPI.get<BioEntityResponse>(
- apiPath.getBioEntityContentsStringWithQuery({ searchQuery, isPerfectMatch }),
- );
-
- const isDataValid = validateDataUsingZodSchema(response.data, bioEntityResponseSchema);
-
- if (addNumbersToEntityNumber && response.data.content) {
- const bioEntityIds = response.data.content.map(b => b.bioEntity.elementId);
- dispatch(addNumbersToEntityNumberData(bioEntityIds));
- }
-
- return isDataValid ? response.data.content : undefined;
- } catch (error) {
- const errorMessage = getErrorMessage({
- error,
- prefix: BIO_ENTITY_FETCHING_ERROR_PREFIX,
- });
- return rejectWithValue(errorMessage);
- }
- },
-);
-
-type GetMultiBioEntityProps = PerfectMultiSearchParams;
-type GetMultiBioEntityActions = PayloadAction<BioEntityContent[] | undefined | string>[]; // if error thrown, string containing error message is returned
-
-export const getMultiBioEntity = createAsyncThunk<
- BioEntityContent[],
- GetMultiBioEntityProps,
- ThunkConfig
->(
- 'project/getMultiBioEntity',
- // eslint-disable-next-line consistent-return
- async ({ searchQueries, isPerfectMatch }, { dispatch, rejectWithValue }) => {
- try {
- const asyncGetBioEntityFunctions = searchQueries.map(searchQuery =>
- dispatch(getBioEntity({ searchQuery, isPerfectMatch, addNumbersToEntityNumber: false })),
- );
-
- const bioEntityContentsActions = (await Promise.all(
- asyncGetBioEntityFunctions,
- )) as GetMultiBioEntityActions;
-
- const bioEntityContents = bioEntityContentsActions
- .map(bioEntityContentsAction => bioEntityContentsAction?.payload || [])
- .flat()
- .filter((payload): payload is BioEntityContent => typeof payload !== 'string')
- .filter(payload => 'bioEntity' in payload || {});
-
- const bioEntityIds = bioEntityContents.map(b => b.bioEntity.elementId);
- dispatch(addNumbersToEntityNumberData(bioEntityIds));
-
- return bioEntityContents;
- } catch (error) {
- const errorMessage = getErrorMessage({
- error,
- prefix: MULTI_BIO_ENTITY_FETCHING_ERROR_PREFIX,
- });
-
- return rejectWithValue(errorMessage);
- }
- },
-);
+export { getBioEntity, getMultiBioEntity };
diff --git a/src/redux/bioEntity/thunks/getBioEntity.ts b/src/redux/bioEntity/thunks/getBioEntity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8a302ee49a3d97ea240da6bbad3f282b0bc0355
--- /dev/null
+++ b/src/redux/bioEntity/thunks/getBioEntity.ts
@@ -0,0 +1,49 @@
+import { bioEntityResponseSchema } from '@/models/bioEntityResponseSchema';
+import { apiPath } from '@/redux/apiPath';
+import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
+import { BioEntityContent, BioEntityResponse } from '@/types/models';
+import { PerfectSearchParams } from '@/types/search';
+import { ThunkConfig } from '@/types/store';
+import { getErrorMessage } from '@/utils/getErrorMessage';
+import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { addNumbersToEntityNumberData } from '../../entityNumber/entityNumber.slice';
+import { BIO_ENTITY_FETCHING_ERROR_PREFIX } from '../bioEntity.constants';
+
+type GetBioEntityProps = PerfectSearchParams;
+
+export const getBioEntity = createAsyncThunk<
+ BioEntityContent[] | undefined,
+ GetBioEntityProps,
+ ThunkConfig
+>(
+ 'project/getBioEntityContents',
+ async (
+ { searchQuery, isPerfectMatch, addNumbersToEntityNumber = true },
+ { rejectWithValue, dispatch },
+ ) => {
+ try {
+ const response = await axiosInstanceNewAPI.get<BioEntityResponse>(
+ apiPath.getBioEntityContentsStringWithQuery({ searchQuery, isPerfectMatch }),
+ );
+
+ const isDataValidBioEnity = validateDataUsingZodSchema(
+ response.data,
+ bioEntityResponseSchema,
+ );
+
+ if (addNumbersToEntityNumber && response.data.content) {
+ const bioEntityIds = response.data.content.map(b => b.bioEntity.elementId);
+ dispatch(addNumbersToEntityNumberData(bioEntityIds));
+ }
+
+ return isDataValidBioEnity ? response.data.content : undefined;
+ } catch (error) {
+ const errorMessage = getErrorMessage({
+ error,
+ prefix: BIO_ENTITY_FETCHING_ERROR_PREFIX,
+ });
+ return rejectWithValue(errorMessage);
+ }
+ },
+);
diff --git a/src/redux/bioEntity/thunks/getMultiBioEntity.ts b/src/redux/bioEntity/thunks/getMultiBioEntity.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c8a38ef3aa39a081bf0351fa166c074b509d5eaf
--- /dev/null
+++ b/src/redux/bioEntity/thunks/getMultiBioEntity.ts
@@ -0,0 +1,61 @@
+import { ZERO } from '@/constants/common';
+import type { AppDispatch, store } from '@/redux/store';
+import { BioEntityContent } from '@/types/models';
+import { PerfectMultiSearchParams } from '@/types/search';
+import { ThunkConfig } from '@/types/store';
+import { getErrorMessage } from '@/utils/getErrorMessage';
+import { PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
+import { addNumbersToEntityNumberData } from '../../entityNumber/entityNumber.slice';
+import { MULTI_BIO_ENTITY_FETCHING_ERROR_PREFIX } from '../bioEntity.constants';
+import { getBioEntity } from './getBioEntity';
+import { fetchReactionsAndGetBioEntitiesIds } from './utils/fetchReactionsAndGetBioEntitiesIds';
+
+type GetMultiBioEntityProps = PerfectMultiSearchParams;
+type GetMultiBioEntityActions = PayloadAction<BioEntityContent[] | undefined | string>[]; // if error thrown, string containing error message is returned
+
+export const getMultiBioEntity = createAsyncThunk<
+ BioEntityContent[],
+ GetMultiBioEntityProps,
+ ThunkConfig
+>(
+ 'project/getMultiBioEntity',
+ // eslint-disable-next-line consistent-return
+ async ({ searchQueries, isPerfectMatch }, { dispatch, rejectWithValue, getState }) => {
+ try {
+ const asyncGetBioEntityFunctions = searchQueries.map(searchQuery =>
+ dispatch(getBioEntity({ searchQuery, isPerfectMatch, addNumbersToEntityNumber: false })),
+ );
+
+ const bioEntityContentsActions = (await Promise.all(
+ asyncGetBioEntityFunctions,
+ )) as GetMultiBioEntityActions;
+
+ const bioEntityContents = bioEntityContentsActions
+ .map(bioEntityContentsAction => bioEntityContentsAction?.payload || [])
+ .flat()
+ .filter((payload): payload is BioEntityContent => typeof payload !== 'string')
+ .filter(payload => 'bioEntity' in payload || {});
+
+ const bioEntityIds = bioEntityContents.map(b => b.bioEntity.elementId);
+ dispatch(addNumbersToEntityNumberData(bioEntityIds));
+
+ const bioEntitiesIds = await fetchReactionsAndGetBioEntitiesIds({
+ bioEntityContents,
+ dispatch: dispatch as AppDispatch,
+ getState: getState as typeof store.getState,
+ });
+ if (bioEntitiesIds.length > ZERO) {
+ await dispatch(getMultiBioEntity({ searchQueries: bioEntitiesIds, isPerfectMatch: true }));
+ }
+
+ return bioEntityContents;
+ } catch (error) {
+ const errorMessage = getErrorMessage({
+ error,
+ prefix: MULTI_BIO_ENTITY_FETCHING_ERROR_PREFIX,
+ });
+
+ return rejectWithValue(errorMessage);
+ }
+ },
+);
diff --git a/src/redux/bioEntity/thunks/utils/fetchReactionsAndGetBioEntitiesIds.ts b/src/redux/bioEntity/thunks/utils/fetchReactionsAndGetBioEntitiesIds.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b8af2061effb0bd7976361c1f3bcb0a6a5fde59
--- /dev/null
+++ b/src/redux/bioEntity/thunks/utils/fetchReactionsAndGetBioEntitiesIds.ts
@@ -0,0 +1,83 @@
+import { getBioEntitiesIdsFromReaction } from '@/components/Map/MapViewer/utils/listeners/mapSingleClick/getBioEntitiesIdsFromReaction';
+import { FIRST_ARRAY_ELEMENT, SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
+import { openReactionDrawerById, selectTab } from '@/redux/drawer/drawer.slice';
+import { openMapAndOrSetActiveIfSelected } from '@/redux/map/map.slice';
+import { modelsNameMapSelector } from '@/redux/models/models.selectors';
+import { getReactionsByIds } from '@/redux/reactions/reactions.thunks';
+import type { AppDispatch, store } from '@/redux/store';
+import type { BioEntityContent, Reaction } from '@/types/models';
+
+interface Args {
+ bioEntityContents: BioEntityContent[];
+ dispatch: AppDispatch;
+ getState: typeof store.getState;
+}
+
+const getReactionsIdsFromBioEntities = (bioEntites: BioEntityContent[]): number[] => {
+ return bioEntites
+ .filter(c => c?.bioEntity?.idReaction)
+ .map(c => c?.bioEntity?.id)
+ .filter((id): id is number => typeof id === 'number');
+};
+
+const fetchReactions = async (
+ reactionsIds: number[],
+ dispatch: AppDispatch,
+): Promise<Reaction[]> => {
+ const result = await dispatch(
+ getReactionsByIds({
+ ids: reactionsIds,
+ shouldConcat: true,
+ }),
+ );
+
+ // if has error (toast show should be handled by getReactionsByIds)
+ if (typeof result.payload === 'string') {
+ return [];
+ }
+
+ const reactions = result.payload?.data;
+ if (!reactions) {
+ return [];
+ }
+
+ return reactions;
+};
+
+const handleReactionShowInfoAndOpenMap = async (
+ { dispatch, getState }: Args,
+ firstReaction: Reaction,
+): Promise<void> => {
+ const modelsNames = modelsNameMapSelector(getState());
+
+ dispatch(openReactionDrawerById(firstReaction.id));
+ dispatch(selectTab(''));
+ dispatch(
+ openMapAndOrSetActiveIfSelected({
+ modelId: firstReaction.modelId,
+ modelName: modelsNames[firstReaction.modelId],
+ }),
+ );
+};
+
+export const fetchReactionsAndGetBioEntitiesIds = async (args: Args): Promise<string[]> => {
+ const { dispatch, bioEntityContents } = args;
+
+ const bioEntityReactionsIds = getReactionsIdsFromBioEntities(bioEntityContents || []);
+ if (bioEntityReactionsIds.length === SIZE_OF_EMPTY_ARRAY) {
+ return [];
+ }
+
+ const reactions = await fetchReactions(bioEntityReactionsIds, dispatch);
+ if (reactions.length === SIZE_OF_EMPTY_ARRAY) {
+ return [];
+ }
+
+ const bioEntitiesIds = reactions.map(reaction => getBioEntitiesIdsFromReaction(reaction)).flat();
+ const firstReaction = reactions[FIRST_ARRAY_ELEMENT];
+ if (firstReaction) {
+ handleReactionShowInfoAndOpenMap(args, firstReaction);
+ }
+
+ return bioEntitiesIds;
+};
diff --git a/src/redux/map/map.reducers.ts b/src/redux/map/map.reducers.ts
index d1562cadbbc7f31647c4baae6d9cd6d3836f17b3..c65bfe9746acc4cd2197cab5200fc891066ba834 100644
--- a/src/redux/map/map.reducers.ts
+++ b/src/redux/map/map.reducers.ts
@@ -127,6 +127,34 @@ export const openMapAndSetActiveReducer = (
state.data.modelId = action.payload.modelId;
};
+export const openMapAndOrSetActiveIfSelectedReducer = (
+ state: MapState,
+ action: OpenMapAndSetActiveAction,
+): void => {
+ const { modelId, modelName } = action.payload;
+ const { openedMaps, data } = state;
+ const isMapAlreadyOpened = openedMaps.some(map => map.modelId === modelId);
+ const currentMapModelId = data.modelId;
+ updateLastPositionOfCurrentlyActiveMap(state);
+
+ if (currentMapModelId !== modelId) {
+ PluginsEventBus.dispatchEvent('onSubmapClose', currentMapModelId);
+ PluginsEventBus.dispatchEvent('onSubmapOpen', modelId);
+ }
+
+ if (isMapAlreadyOpened) {
+ state.data.modelId = modelId;
+ return;
+ }
+
+ state.openedMaps.push({
+ modelId,
+ modelName,
+ lastPosition: { x: 0, y: 0, z: 0 },
+ });
+ state.data.modelId = modelId;
+};
+
export const closeMapReducer = (state: MapState, action: CloseMapAction): void => {
state.openedMaps = state.openedMaps.filter(
openedMap => openedMap.modelId !== action.payload.modelId,
diff --git a/src/redux/map/map.slice.ts b/src/redux/map/map.slice.ts
index 02e8a878292906e9894c26fe8f841dd5219fbbc8..46f68b78379b43eea92e3897455d4ddd82f5668b 100644
--- a/src/redux/map/map.slice.ts
+++ b/src/redux/map/map.slice.ts
@@ -7,6 +7,7 @@ import {
initMapPositionReducers,
initMapSizeAndModelIdReducer,
initOpenedMapsReducer,
+ openMapAndOrSetActiveIfSelectedReducer,
openMapAndSetActiveReducer,
setActiveMapReducer,
setLastPositionZoomReducer,
@@ -28,6 +29,7 @@ const mapSlice = createSlice({
setMapPosition: setMapPositionReducer,
varyPositionZoom: varyPositionZoomReducer,
setMapBackground: setMapBackgroundReducer,
+ openMapAndOrSetActiveIfSelected: openMapAndOrSetActiveIfSelectedReducer,
setLastPositionZoom: setLastPositionZoomReducer,
},
extraReducers: builder => {
@@ -47,6 +49,7 @@ export const {
setMapPosition,
setMapBackground,
varyPositionZoom,
+ openMapAndOrSetActiveIfSelected,
setLastPositionZoom,
} = mapSlice.actions;
diff --git a/src/redux/map/middleware/map.middleware.ts b/src/redux/map/middleware/map.middleware.ts
index 8d0f4b3e54a016ff95899e88f9802a0d70ac9e4b..92fce878e1bd98a817f7004acb633ef24f1f619e 100644
--- a/src/redux/map/middleware/map.middleware.ts
+++ b/src/redux/map/middleware/map.middleware.ts
@@ -5,6 +5,7 @@ import { Action, createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit';
import { mapOpenedMapPositionByIdSelector } from '../map.selectors';
import {
closeMapAndSetMainMapActive,
+ openMapAndOrSetActiveIfSelected,
openMapAndSetActive,
setActiveMap,
setMapBackground,
@@ -49,6 +50,7 @@ startListening({
openMapAndSetActive,
closeMapAndSetMainMapActive,
setMapBackground,
+ openMapAndOrSetActiveIfSelected,
),
effect: mapDataMiddlewareListener,
});
diff --git a/src/redux/reactions/reactions.reducers.ts b/src/redux/reactions/reactions.reducers.ts
index 92ecef9cf7d86e0830255a74b481772e085d52c1..2ef4a163ec4f235e3c0aefbcadeff1f7fc28a7cb 100644
--- a/src/redux/reactions/reactions.reducers.ts
+++ b/src/redux/reactions/reactions.reducers.ts
@@ -8,7 +8,11 @@ export const getReactionsReducer = (builder: ActionReducerMapBuilder<ReactionsSt
state.loading = 'pending';
});
builder.addCase(getReactionsByIds.fulfilled, (state, action) => {
- state.data = action.payload;
+ const { payload } = action;
+ if (!payload) return;
+
+ const newData = payload.shouldConcat ? [...(state.data || []), ...payload.data] : payload.data;
+ state.data = newData;
state.loading = 'succeeded';
});
builder.addCase(getReactionsByIds.rejected, state => {
diff --git a/src/redux/reactions/reactions.thunks.test.ts b/src/redux/reactions/reactions.thunks.test.ts
index 88cfb4c4341bbd5234d8b174e59637f2268a715b..d570a341bf204a66eaf062403f6698da0908b654 100644
--- a/src/redux/reactions/reactions.thunks.test.ts
+++ b/src/redux/reactions/reactions.thunks.test.ts
@@ -28,7 +28,7 @@ describe('reactions thunks', () => {
.reply(HttpStatusCode.Ok, reactionsFixture);
const { payload } = await store.dispatch(getReactionsByIds(ids));
- expect(payload).toEqual(reactionsFixture);
+ expect(payload).toEqual({ data: reactionsFixture, shouldConcat: false });
});
it('should return undefined when data response from API is not valid ', async () => {
@@ -44,7 +44,7 @@ describe('reactions thunks', () => {
mockedAxiosClient.onGet(apiPath.getReactionsWithIds([100])).reply(HttpStatusCode.Ok, []);
const { payload } = await store.dispatch(getReactionsByIds([100]));
- expect(payload).toEqual([]);
+ expect(payload).toEqual({ data: [], shouldConcat: false });
});
});
});
diff --git a/src/redux/reactions/reactions.thunks.ts b/src/redux/reactions/reactions.thunks.ts
index 0614b20694664146b06f15a4b83ecf0e1a42a869..610a83adfced0672fe526d609df7072842e3c264 100644
--- a/src/redux/reactions/reactions.thunks.ts
+++ b/src/redux/reactions/reactions.thunks.ts
@@ -9,21 +9,40 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
import { z } from 'zod';
import { REACTIONS_FETCHING_ERROR_PREFIX } from './reactions.constants';
-export const getReactionsByIds = createAsyncThunk<Reaction[] | undefined, number[], ThunkConfig>(
- 'reactions/getByIds',
- async (ids, { rejectWithValue }) => {
- try {
- const response = await axiosInstance.get<Reaction[]>(apiPath.getReactionsWithIds(ids));
- const isDataValid = validateDataUsingZodSchema(response.data, z.array(reactionSchema));
+type GetReactionsByIdsArgs =
+ | number[]
+ | {
+ ids: number[];
+ shouldConcat?: boolean;
+ };
- if (!isDataValid) {
- return undefined;
- }
+export type GetReactionsByIdsResult = {
+ data: Reaction[];
+ shouldConcat: boolean;
+};
- return response.data;
- } catch (error) {
- const errorMessage = getErrorMessage({ error, prefix: REACTIONS_FETCHING_ERROR_PREFIX });
- return rejectWithValue(errorMessage);
+export const getReactionsByIds = createAsyncThunk<
+ GetReactionsByIdsResult | undefined,
+ GetReactionsByIdsArgs,
+ ThunkConfig
+>('reactions/getByIds', async (args, { rejectWithValue }) => {
+ const ids = args instanceof Array ? args : args.ids;
+ const shouldConcat = args instanceof Array ? false : args.shouldConcat || false;
+
+ try {
+ const response = await axiosInstance.get<Reaction[]>(apiPath.getReactionsWithIds(ids));
+ const isDataValid = validateDataUsingZodSchema(response.data, z.array(reactionSchema));
+
+ if (!isDataValid) {
+ return undefined;
}
- },
-);
+
+ return {
+ data: response.data,
+ shouldConcat,
+ };
+ } catch (error) {
+ const errorMessage = getErrorMessage({ error, prefix: REACTIONS_FETCHING_ERROR_PREFIX });
+ return rejectWithValue(errorMessage);
+ }
+});
diff --git a/src/redux/search/search.thunks.ts b/src/redux/search/search.thunks.ts
index 078947d3586dc7be7319db5b4196992779539f2d..eaa9b6c811b6e2b79b27be9348b550cb25aa8fc4 100644
--- a/src/redux/search/search.thunks.ts
+++ b/src/redux/search/search.thunks.ts
@@ -2,12 +2,13 @@ import { getMultiBioEntity } from '@/redux/bioEntity/bioEntity.thunks';
import { getMultiChemicals } from '@/redux/chemicals/chemicals.thunks';
import { getMultiDrugs } from '@/redux/drugs/drugs.thunks';
import { PerfectMultiSearchParams } from '@/types/search';
-import { createAsyncThunk } from '@reduxjs/toolkit';
-import { getErrorMessage } from '@/utils/getErrorMessage';
import { ThunkConfig } from '@/types/store';
+import { getErrorMessage } from '@/utils/getErrorMessage';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { resetReactionsData } from '../reactions/reactions.slice';
import type { RootState } from '../store';
-import { dispatchPluginsEvents } from './search.thunks.utils';
import { DATA_SEARCHING_ERROR_PREFIX } from './search.constants';
+import { dispatchPluginsEvents } from './search.thunks.utils';
type GetSearchDataProps = PerfectMultiSearchParams;
@@ -20,6 +21,8 @@ export const getSearchData = createAsyncThunk<
// eslint-disable-next-line consistent-return
async ({ searchQueries, isPerfectMatch }, { dispatch, getState, rejectWithValue }) => {
try {
+ dispatch(resetReactionsData());
+
await Promise.all([
dispatch(getMultiBioEntity({ searchQueries, isPerfectMatch })),
dispatch(getMultiDrugs(searchQueries)),
diff --git a/src/types/models.ts b/src/types/models.ts
index df6237adf86972e2f120f9dd8a9e9d1000332e8f..65ea2cf6af5a796f33b25cacb9f9adf8fcf42af3 100644
--- a/src/types/models.ts
+++ b/src/types/models.ts
@@ -47,6 +47,7 @@ import { reactionLineSchema } from '@/models/reactionLineSchema';
import { referenceSchema } from '@/models/referenceSchema';
import { sessionSchemaValid } from '@/models/sessionValidSchema';
import { statisticsSchema } from '@/models/statisticsSchema';
+import { targetElementSchema } from '@/models/targetElementSchema';
import { targetSchema } from '@/models/targetSchema';
import { targetSearchNameResult } from '@/models/targetSearchNameResult';
import { z } from 'zod';
@@ -98,3 +99,4 @@ export type ExportElements = z.infer<typeof exportElementsSchema>;
export type MinervaPlugin = z.infer<typeof pluginSchema>; // Plugin type interfers with global Plugin type
export type GeneVariant = z.infer<typeof geneVariant>;
export type TargetSearchNameResult = z.infer<typeof targetSearchNameResult>;
+export type TargetElement = z.infer<typeof targetElementSchema>;