diff --git a/package-lock.json b/package-lock.json
index 4aad8440554ebbab3ac260423e29db2eb4097bbe..dabf49dce6380c53f944390a58b1d5a32e3ba10b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,8 @@
"query-string": "7.1.3",
"react": "18.2.0",
"react-accessible-accordion": "^5.0.0",
+ "react-dnd": "^16.0.1",
+ "react-dnd-html5-backend": "^16.0.1",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-redux": "^8.1.2",
@@ -1958,6 +1960,21 @@
"url": "https://opencollective.com/unts"
}
},
+ "node_modules/@react-dnd/asap": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+ "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+ },
+ "node_modules/@react-dnd/invariant": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+ "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+ },
+ "node_modules/@react-dnd/shallowequal": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+ "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+ },
"node_modules/@reduxjs/toolkit": {
"version": "1.9.7",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
@@ -4897,6 +4914,16 @@
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
},
+ "node_modules/dnd-core": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+ "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+ "dependencies": {
+ "@react-dnd/asap": "^5.0.1",
+ "@react-dnd/invariant": "^4.0.1",
+ "redux": "^4.2.0"
+ }
+ },
"node_modules/doctrine": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -11527,6 +11554,43 @@
"react-dom": "^16.3.3 || ^17.0.0 || ^18.0.0"
}
},
+ "node_modules/react-dnd": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+ "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+ "dependencies": {
+ "@react-dnd/invariant": "^4.0.1",
+ "@react-dnd/shallowequal": "^4.0.1",
+ "dnd-core": "^16.0.1",
+ "fast-deep-equal": "^3.1.3",
+ "hoist-non-react-statics": "^3.3.2"
+ },
+ "peerDependencies": {
+ "@types/hoist-non-react-statics": ">= 3.3.1",
+ "@types/node": ">= 12",
+ "@types/react": ">= 16",
+ "react": ">= 16.14"
+ },
+ "peerDependenciesMeta": {
+ "@types/hoist-non-react-statics": {
+ "optional": true
+ },
+ "@types/node": {
+ "optional": true
+ },
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/react-dnd-html5-backend": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+ "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+ "dependencies": {
+ "dnd-core": "^16.0.1"
+ }
+ },
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -15293,6 +15357,21 @@
"integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==",
"dev": true
},
+ "@react-dnd/asap": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
+ "integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
+ },
+ "@react-dnd/invariant": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
+ "integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
+ },
+ "@react-dnd/shallowequal": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
+ "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
+ },
"@reduxjs/toolkit": {
"version": "1.9.7",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
@@ -17479,6 +17558,16 @@
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
},
+ "dnd-core": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
+ "integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
+ "requires": {
+ "@react-dnd/asap": "^5.0.1",
+ "@react-dnd/invariant": "^4.0.1",
+ "redux": "^4.2.0"
+ }
+ },
"doctrine": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -22160,6 +22249,26 @@
"integrity": "sha512-MT2obYpTgLIIfPr9d7hEyvPB5rg8uJcHpgA83JSRlEUHvzH48+8HJPvzSs+nM+XprTugDgLfhozO5qyJpBvYRQ==",
"requires": {}
},
+ "react-dnd": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
+ "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
+ "requires": {
+ "@react-dnd/invariant": "^4.0.1",
+ "@react-dnd/shallowequal": "^4.0.1",
+ "dnd-core": "^16.0.1",
+ "fast-deep-equal": "^3.1.3",
+ "hoist-non-react-statics": "^3.3.2"
+ }
+ },
+ "react-dnd-html5-backend": {
+ "version": "16.0.1",
+ "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
+ "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
+ "requires": {
+ "dnd-core": "^16.0.1"
+ }
+ },
"react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
diff --git a/package.json b/package.json
index 4cf34d33a72916303aa6cf834ab8b7e4f1e2a1ba..4fb3ac58884eefadf31d01b6ad6a9b331d450875 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,9 @@
"check-types": "tsc --pretty --noEmit",
"prepare": "husky install",
"postinstall": "husky install",
- "test": "jest --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$))'",
- "test:watch": "jest --watch --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$))'",
- "test:ci": "jest --config ./jest.config.ts --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false --passWithNoTests --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$))'",
+ "test": "jest --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$|@react-dnd|@babel|redux|react-dnd|dnd-core|react-dnd-html5-backend))'",
+ "test:watch": "jest --watch --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$|@react-dnd|@babel|redux|react-dnd|dnd-core|react-dnd-html5-backend))'",
+ "test:ci": "jest --config ./jest.config.ts --collectCoverage --coverageDirectory=\"./coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false --passWithNoTests --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$|@react-dnd|@babel|redux|react-dnd|dnd-core|react-dnd-html5-backend))'",
"test:coverage": "jest --watchAll --coverage --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|.*\\.mjs$))'",
"test:coveragee": "jest --coverage --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|.*\\.mjs$))'",
"coverage": "open ./coverage/lcov-report/index.html",
@@ -41,6 +41,8 @@
"query-string": "7.1.3",
"react": "18.2.0",
"react-accessible-accordion": "^5.0.0",
+ "react-dnd": "^16.0.1",
+ "react-dnd-html5-backend": "^16.0.1",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-redux": "^8.1.2",
diff --git a/src/components/FunctionalArea/Modal/EditOverlayModal/EditOverlayModal.component.test.tsx b/src/components/FunctionalArea/Modal/EditOverlayModal/EditOverlayModal.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f0934d79f6f54d7ea9008e43f5e84ba7f5faac04
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/EditOverlayModal/EditOverlayModal.component.test.tsx
@@ -0,0 +1,159 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { StoreType } from '@/redux/store';
+import {
+ InitialStoreState,
+ getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { overlayFixture } from '@/models/fixtures/overlaysFixture';
+import { mockNetworkResponse } from '@/utils/mockNetworkResponse';
+import { apiPath } from '@/redux/apiPath';
+import { HttpStatusCode } from 'axios';
+import { DEFAULT_ERROR } from '@/constants/errors';
+import { act } from 'react-dom/test-utils';
+import { OVERLAYS_INITIAL_STATE_MOCK } from '@/redux/overlays/overlays.mock';
+import { Modal } from '../Modal.component';
+
+const mockedAxiosClient = mockNetworkResponse();
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+ return (
+ render(
+ <Wrapper>
+ <Modal />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('EditOverlayModal - component', () => {
+ it('should render modal with correct data', () => {
+ renderComponent({
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ });
+
+ expect(screen.getByLabelText('Name')).toBeVisible();
+ expect(screen.getByLabelText('Description')).toBeVisible();
+ expect(screen.getByTestId('overlay-name')).toHaveValue(overlayFixture.name);
+ expect(screen.getByTestId('overlay-description')).toHaveValue(overlayFixture.description);
+ });
+ it('should handle input change correctly', () => {
+ renderComponent({
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ });
+
+ const overlayNameInput: HTMLInputElement = screen.getByTestId('overlay-name');
+ const overlayDescriptionInput: HTMLTextAreaElement = screen.getByTestId('overlay-description');
+
+ fireEvent.change(overlayNameInput, { target: { value: 'Test name' } });
+ fireEvent.change(overlayDescriptionInput, { target: { value: 'Descripiton' } });
+
+ expect(overlayNameInput.value).toBe('Test name');
+ expect(overlayDescriptionInput.value).toBe('Descripiton');
+ });
+ it('should handle remove user overlay', async () => {
+ const { store } = renderComponent({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
+ });
+ mockedAxiosClient
+ .onDelete(apiPath.removeOverlay(overlayFixture.idObject))
+ .reply(HttpStatusCode.Ok, {});
+
+ const removeButton = screen.getByTestId('remove-button');
+ expect(removeButton).toBeVisible();
+ await act(() => {
+ removeButton.click();
+ });
+
+ const { loading } = store.getState().overlays.removeOverlay;
+ expect(loading).toBe('succeeded');
+ expect(removeButton).not.toBeVisible();
+ });
+ it('should handle save edited user overlay', async () => {
+ const { store } = renderComponent({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
+ });
+ mockedAxiosClient
+ .onPatch(apiPath.updateOverlay(overlayFixture.idObject))
+ .reply(HttpStatusCode.Ok, overlayFixture);
+
+ const saveButton = screen.getByTestId('save-button');
+ expect(saveButton).toBeVisible();
+ await act(() => {
+ saveButton.click();
+ });
+
+ const { loading } = store.getState().overlays.updateOverlays;
+ expect(loading).toBe('succeeded');
+ expect(saveButton).not.toBeVisible();
+ });
+
+ it('should handle cancel edit user overlay', async () => {
+ const { store } = renderComponent({
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ });
+
+ const cancelButton = screen.getByTestId('cancel-button');
+ expect(cancelButton).toBeVisible();
+ await act(() => {
+ cancelButton.click();
+ });
+
+ const { isOpen } = store.getState().modal;
+ expect(isOpen).toBe(false);
+ expect(cancelButton).not.toBeVisible();
+ });
+});
diff --git a/src/components/FunctionalArea/Modal/EditOverlayModal/EditOverlayModal.component.tsx b/src/components/FunctionalArea/Modal/EditOverlayModal/EditOverlayModal.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..46091536090665c866f0df6e1c8be6e35590330a
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/EditOverlayModal/EditOverlayModal.component.tsx
@@ -0,0 +1,77 @@
+import { Button } from '@/shared/Button';
+import { Input } from '@/shared/Input';
+import { Textarea } from '@/shared/Textarea';
+import React from 'react';
+import { useEditOverlay } from './hooks/useEditOverlay';
+
+export const EditOverlayModal = (): React.ReactNode => {
+ const {
+ description,
+ name,
+ handleCancelEdit,
+ handleDescriptionChange,
+ handleNameChange,
+ handleRemoveOverlay,
+ handleSaveEditedOverlay,
+ } = useEditOverlay();
+
+ return (
+ <div className="w-full border border-t-[#E1E0E6] bg-white p-[24px]">
+ <form>
+ <label className="text-sm font-semibold" htmlFor="overlayName">
+ Name
+ <Input
+ type="text"
+ value={name}
+ onChange={handleNameChange}
+ name="overlayName"
+ id="overlayName"
+ className="mt-2.5 text-sm font-medium"
+ data-testid="overlay-name"
+ />
+ </label>
+ <label className="mt-5 block text-sm font-semibold" htmlFor="overlayDescription">
+ Description
+ <Textarea
+ rows={4}
+ value={description}
+ onChange={handleDescriptionChange}
+ name="overlayDescription"
+ id="overlayDescription"
+ className="mt-2.5 text-sm font-medium"
+ data-testid="overlay-description"
+ />
+ </label>
+ <div className="mt-10 flex items-center justify-between gap-5 text-center">
+ <Button
+ type="button"
+ variantStyles="ghost"
+ className="flex-1 justify-center"
+ onClick={handleCancelEdit}
+ data-testid="cancel-button"
+ >
+ Cancel
+ </Button>
+ <Button
+ type="button"
+ variantStyles="ghost"
+ className="flex-1 justify-center"
+ onClick={handleRemoveOverlay}
+ data-testid="remove-button"
+ >
+ Remove
+ </Button>
+
+ <Button
+ type="button"
+ className="flex-1 justify-center"
+ onClick={handleSaveEditedOverlay}
+ data-testid="save-button"
+ >
+ Save
+ </Button>
+ </div>
+ </form>
+ </div>
+ );
+};
diff --git a/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.test.ts b/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8fcac18fbda172096b00d88362d8ec73476a098f
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.test.ts
@@ -0,0 +1,175 @@
+/* eslint-disable no-magic-numbers */
+import { DEFAULT_ERROR } from '@/constants/errors';
+import { overlayFixture } from '@/models/fixtures/overlaysFixture';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { renderHook } from '@testing-library/react';
+import { useEditOverlay } from './useEditOverlay';
+
+describe('useEditOverlay', () => {
+ it('should handle cancel edit overlay', () => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ });
+
+ const {
+ result: {
+ current: { handleCancelEdit },
+ },
+ } = renderHook(() => useEditOverlay(), {
+ wrapper: Wrapper,
+ });
+
+ handleCancelEdit();
+
+ const actions = store.getActions();
+
+ expect(actions[0].type).toBe('modal/closeModal');
+ });
+
+ it('should handle handleRemoveOverlay if proper data is provided', () => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ });
+
+ const {
+ result: {
+ current: { handleRemoveOverlay },
+ },
+ } = renderHook(() => useEditOverlay(), {
+ wrapper: Wrapper,
+ });
+
+ handleRemoveOverlay();
+
+ const actions = store.getActions();
+
+ expect(actions[0].type).toBe('overlays/removeOverlay/pending');
+
+ const { login, overlayId } = actions[0].meta.arg;
+ expect(login).toBe('test');
+ expect(overlayId).toBe(overlayFixture.idObject);
+ });
+ it('should not handle handleRemoveOverlay if proper data is not provided', () => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'failed',
+ error: DEFAULT_ERROR,
+ login: null,
+ },
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ });
+
+ const {
+ result: {
+ current: { handleRemoveOverlay },
+ },
+ } = renderHook(() => useEditOverlay(), {
+ wrapper: Wrapper,
+ });
+
+ handleRemoveOverlay();
+
+ const actions = store.getActions();
+
+ expect(actions.length).toBe(0);
+ });
+ it('should handle handleSaveEditedOverlay if proper data is provided', () => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ });
+
+ const {
+ result: {
+ current: { handleSaveEditedOverlay },
+ },
+ } = renderHook(() => useEditOverlay(), {
+ wrapper: Wrapper,
+ });
+
+ handleSaveEditedOverlay();
+
+ const actions = store.getActions();
+
+ expect(actions[0].type).toBe('overlays/updateOverlays/pending');
+ expect(actions[0].meta.arg).toEqual([overlayFixture]);
+ });
+ it('should not handle handleSaveEditedOverlay if proper data is not provided', () => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: null,
+ },
+ modal: {
+ isOpen: true,
+ modalTitle: overlayFixture.name,
+ modalName: 'edit-overlay',
+ editOverlayState: overlayFixture,
+ molArtState: {},
+ overviewImagesState: {},
+ },
+ });
+
+ const {
+ result: {
+ current: { handleSaveEditedOverlay },
+ },
+ } = renderHook(() => useEditOverlay(), {
+ wrapper: Wrapper,
+ });
+
+ handleSaveEditedOverlay();
+
+ const actions = store.getActions();
+
+ expect(actions.length).toBe(0);
+ });
+});
diff --git a/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.ts b/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.ts
new file mode 100644
index 0000000000000000000000000000000000000000..adb7778cddb6a3959480fe319a97ea888efca29a
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/EditOverlayModal/hooks/useEditOverlay.ts
@@ -0,0 +1,100 @@
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { currentEditedOverlaySelector } from '@/redux/modal/modal.selector';
+import { closeModal } from '@/redux/modal/modal.slice';
+import {
+ getAllUserOverlaysByCreator,
+ removeOverlay,
+ updateOverlays,
+} from '@/redux/overlays/overlays.thunks';
+import { loginUserSelector } from '@/redux/user/user.selectors';
+import { MapOverlay } from '@/types/models';
+import { useState } from 'react';
+
+type UseEditOverlayReturn = {
+ name: string | undefined;
+ description: string | undefined;
+ handleCancelEdit: () => void;
+ handleRemoveOverlay: () => void;
+ handleSaveEditedOverlay: () => Promise<void>;
+ handleNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+ handleDescriptionChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+};
+
+type UpdatedOverlay = {
+ editedOverlay: MapOverlay;
+ overlayName: string;
+ overlayDescription: string;
+};
+
+export const useEditOverlay = (): UseEditOverlayReturn => {
+ const currentEditedOverlay = useAppSelector(currentEditedOverlaySelector);
+ const login = useAppSelector(loginUserSelector);
+ const dispatch = useAppDispatch();
+ const [name, setName] = useState(currentEditedOverlay?.name);
+ const [description, setDescription] = useState(currentEditedOverlay?.description);
+
+ const handleCancelEdit = (): void => {
+ dispatch(closeModal());
+ };
+
+ const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+ setName(e.target.value);
+ };
+
+ const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
+ setDescription(e.target.value);
+ };
+
+ const handleRemoveOverlay = (): void => {
+ if (!login || !currentEditedOverlay) return;
+ dispatch(removeOverlay({ overlayId: currentEditedOverlay.idObject, login }));
+ };
+
+ const handleUpdateOverlay = async ({
+ editedOverlay,
+ overlayDescription,
+ overlayName,
+ }: UpdatedOverlay): Promise<void> => {
+ await dispatch(
+ updateOverlays([
+ {
+ ...editedOverlay,
+ name: overlayName,
+ description: overlayDescription,
+ },
+ ]),
+ );
+ };
+
+ const getUserOverlaysByCreator = async (creator: string): Promise<void> => {
+ await dispatch(getAllUserOverlaysByCreator(creator));
+ };
+
+ const handleCloseModal = (): void => {
+ dispatch(closeModal());
+ };
+
+ const handleSaveEditedOverlay = async (): Promise<void> => {
+ if (!currentEditedOverlay || !name || !description || !login) return;
+ await handleUpdateOverlay({
+ editedOverlay: currentEditedOverlay,
+ overlayDescription: description,
+ overlayName: name,
+ });
+
+ await getUserOverlaysByCreator(login);
+
+ handleCloseModal();
+ };
+
+ return {
+ handleCancelEdit,
+ handleRemoveOverlay,
+ handleSaveEditedOverlay,
+ handleNameChange,
+ handleDescriptionChange,
+ name,
+ description,
+ };
+};
diff --git a/src/components/FunctionalArea/Modal/EditOverlayModal/index.ts b/src/components/FunctionalArea/Modal/EditOverlayModal/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f847a6bd48e5dc648bfceb8a6865fb7316394d67
--- /dev/null
+++ b/src/components/FunctionalArea/Modal/EditOverlayModal/index.ts
@@ -0,0 +1 @@
+export { EditOverlayModal } from './EditOverlayModal.component';
diff --git a/src/components/FunctionalArea/Modal/Modal.component.tsx b/src/components/FunctionalArea/Modal/Modal.component.tsx
index 0244ce42dd44e7f82fddf2d2454cb10e989e5679..a96fe3f58dd1ceed2671406345a871ed4c638671 100644
--- a/src/components/FunctionalArea/Modal/Modal.component.tsx
+++ b/src/components/FunctionalArea/Modal/Modal.component.tsx
@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
import { LoginModal } from './LoginModal';
import { MODAL_ROLE } from './Modal.constants';
import { OverviewImagesModal } from './OverviewImagesModal';
+import { EditOverlayModal } from './EditOverlayModal';
const MolArtModal = dynamic(
() => import('./MolArtModal/MolArtModal.component').then(mod => mod.MolArtModal),
@@ -35,6 +36,7 @@ export const Modal = (): React.ReactNode => {
className={twMerge(
'flex h-5/6 w-10/12 flex-col overflow-hidden rounded-lg',
modalName === 'login' && 'h-auto w-[400px]',
+ modalName === 'edit-overlay' && 'h-auto w-[450px]',
)}
>
<div className="flex items-center justify-between bg-white p-[24px] text-xl">
@@ -46,6 +48,7 @@ export const Modal = (): React.ReactNode => {
{isOpen && modalName === 'overview-images' && <OverviewImagesModal />}
{isOpen && modalName === 'mol-art' && <MolArtModal />}
{isOpen && modalName === 'login' && <LoginModal />}
+ {isOpen && modalName === 'edit-overlay' && <EditOverlayModal />}
</div>
</div>
</div>
diff --git a/src/components/Map/Drawer/Drawer.component.test.tsx b/src/components/Map/Drawer/Drawer.component.test.tsx
index fb4be23d8760e48608e43a944bc35515b5d6d739..2499e7f3b459484389a46d4453426b5123cc12ac 100644
--- a/src/components/Map/Drawer/Drawer.component.test.tsx
+++ b/src/components/Map/Drawer/Drawer.component.test.tsx
@@ -104,10 +104,10 @@ describe('Drawer - component', () => {
});
expect(screen.queryByTestId('reaction-drawer')).not.toBeInTheDocument();
-
- store.dispatch(getReactionsByIds([id]));
- store.dispatch(openReactionDrawerById(id));
-
+ await act(() => {
+ store.dispatch(getReactionsByIds([id]));
+ store.dispatch(openReactionDrawerById(id));
+ });
await waitFor(() => expect(screen.getByTestId('reaction-drawer')).toBeInTheDocument());
});
});
diff --git a/src/components/Map/Drawer/Drawer.component.tsx b/src/components/Map/Drawer/Drawer.component.tsx
index b55022ff3b3690835076976d2f7f443cf374689e..098c4f989ec233798af6de0addfbb28fca84b02e 100644
--- a/src/components/Map/Drawer/Drawer.component.tsx
+++ b/src/components/Map/Drawer/Drawer.component.tsx
@@ -8,6 +8,7 @@ import { SubmapsDrawer } from './SubmapsDrawer';
import { OverlaysDrawer } from './OverlaysDrawer';
import { BioEntityDrawer } from './BioEntityDrawer/BioEntityDrawer.component';
import { ExportDrawer } from './ExportDrawer';
+import { ProjectInfoDrawer } from './ProjectInfoDrawer';
export const Drawer = (): JSX.Element => {
const { isOpen, drawerName } = useAppSelector(drawerSelector);
@@ -25,6 +26,7 @@ export const Drawer = (): JSX.Element => {
{isOpen && drawerName === 'reaction' && <ReactionDrawer />}
{isOpen && drawerName === 'overlays' && <OverlaysDrawer />}
{isOpen && drawerName === 'bio-entity' && <BioEntityDrawer />}
+ {isOpen && drawerName === 'project-info' && <ProjectInfoDrawer />}
{isOpen && drawerName === 'export' && <ExportDrawer />}
</div>
);
diff --git a/src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.tsx b/src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.tsx
index 54ac8df4fc0f8634d21a474a3d4cfca07b239434..3075991fcde8eea97215405c1116cf1eabc6832a 100644
--- a/src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.tsx
@@ -39,8 +39,8 @@ export const CheckboxFilter = ({
};
const handleCheckboxChange = (option: CheckboxItem): void => {
- const newCheckedCheckboxes = checkedCheckboxes.includes(option)
- ? checkedCheckboxes.filter(item => item !== option)
+ const newCheckedCheckboxes = checkedCheckboxes.some(item => item.id === option.id)
+ ? checkedCheckboxes.filter(item => item.id !== option.id)
: [...checkedCheckboxes, option];
setCheckedCheckboxes(newCheckedCheckboxes);
diff --git a/src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01d1989e50f63cacf6cc3ec5453cf272bd16d9af
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.test.tsx
@@ -0,0 +1,207 @@
+/* eslint-disable no-magic-numbers */
+import { AppDispatch, RootState } from '@/redux/store';
+import { InitialStoreState } from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { CONFIGURATION_INITIAL_STORE_MOCK } from '@/redux/configuration/configuration.mock';
+import { configurationFixture } from '@/models/fixtures/configurationFixture';
+import { act } from 'react-dom/test-utils';
+import { statisticsFixture } from '@/models/fixtures/statisticsFixture';
+import { compartmentPathwaysDetailsFixture } from '@/models/fixtures/compartmentPathways';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { modelsFixture } from '@/models/fixtures/modelsFixture';
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import { apiPath } from '@/redux/apiPath';
+import { HttpStatusCode } from 'axios';
+import { Elements } from './Elements.component';
+import { ELEMENTS_COLUMNS } from '../ExportCompound/ExportCompound.constant';
+
+const mockedAxiosClient = mockNetworkNewAPIResponse();
+
+const renderComponent = (
+ initialStore?: InitialStoreState,
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener(initialStore);
+ return (
+ render(
+ <Wrapper>
+ <Elements />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('Elements - component', () => {
+ it('should render all elements sections', () => {
+ renderComponent({
+ configuration: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK,
+ main: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK.main,
+ data: {
+ ...configurationFixture,
+ miriamTypes: {
+ compartment_label: {
+ commonName: 'Compartment',
+ homepage: '',
+ registryIdentifier: '',
+ uris: [''],
+ },
+ },
+ },
+ },
+ },
+ statistics: {
+ data: {
+ ...statisticsFixture,
+ elementAnnotations: {
+ compartment_label: 1,
+ pathway: 0,
+ },
+ },
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ compartmentPathways: {
+ data: compartmentPathwaysDetailsFixture,
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ });
+
+ const annotations = screen.getByText('Select annotations');
+ const includedCompartmentPathways = screen.getByText('Select included compartment / pathways');
+ const excludedCompartmentPathways = screen.getByText('Select excluded compartment / pathways');
+ const downloadButton = screen.getByText('Download');
+
+ expect(annotations).toBeVisible();
+ expect(includedCompartmentPathways).toBeVisible();
+ expect(excludedCompartmentPathways).toBeVisible();
+ expect(downloadButton).toBeVisible();
+ });
+ it('should handle download button click and dispatch proper data', async () => {
+ mockedAxiosClient.onPost(apiPath.downloadElementsCsv()).reply(HttpStatusCode.Ok, 'test');
+ const FIRST_COMPARMENT_PATHWAY_NAME = compartmentPathwaysDetailsFixture[0].name;
+ const FIRST_COMPARMENT_PATHWAY_ID = compartmentPathwaysDetailsFixture[0].id;
+ const SECOND_COMPARMENT_PATHWAY_NAME = compartmentPathwaysDetailsFixture[1].name;
+ const SECOND_COMPARMENT_PATHWAY_ID = compartmentPathwaysDetailsFixture[1].id;
+ const { store } = renderComponent({
+ configuration: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK,
+ main: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK.main,
+ data: {
+ ...configurationFixture,
+ miriamTypes: {
+ compartment_label: {
+ commonName: 'Compartment',
+ homepage: '',
+ registryIdentifier: '',
+ uris: [''],
+ },
+ },
+ },
+ },
+ },
+ statistics: {
+ data: {
+ ...statisticsFixture,
+ elementAnnotations: {
+ compartment_label: 1,
+ pathway: 0,
+ },
+ },
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ compartmentPathways: {
+ data: compartmentPathwaysDetailsFixture,
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ models: {
+ data: modelsFixture,
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ });
+
+ const annotations = screen.getByText('Select annotations');
+
+ await act(() => {
+ annotations.click();
+ });
+ const annotationInput = screen.getByLabelText('Compartment');
+
+ await act(() => {
+ annotationInput.click();
+ });
+
+ expect(annotationInput).toBeChecked();
+
+ const includedCompartmentPathways = screen.getByText('Select included compartment / pathways');
+
+ await act(() => {
+ includedCompartmentPathways.click();
+ });
+ const includedCompartmentPathwaysInput = screen.getAllByLabelText(
+ FIRST_COMPARMENT_PATHWAY_NAME,
+ )[0];
+
+ await act(() => {
+ includedCompartmentPathwaysInput.click();
+ });
+
+ expect(includedCompartmentPathwaysInput).toBeChecked();
+
+ const excludedCompartmentPathways = screen.getByText('Select excluded compartment / pathways');
+
+ await act(() => {
+ excludedCompartmentPathways.click();
+ });
+ const excludedCompartmentPathwaysInput = screen.getAllByLabelText(
+ SECOND_COMPARMENT_PATHWAY_NAME,
+ )[1];
+
+ await act(() => {
+ excludedCompartmentPathwaysInput.click();
+ });
+
+ expect(excludedCompartmentPathwaysInput).toBeChecked();
+
+ const downloadButton = screen.getByText('Download');
+
+ await act(() => {
+ downloadButton.click();
+ });
+
+ const actions = store.getActions();
+
+ const firstAction = actions[0];
+ expect(firstAction.meta.arg).toEqual({
+ columns: ELEMENTS_COLUMNS,
+ submaps: modelsFixture.map(item => item.idObject),
+ annotations: ['compartment_label'],
+ includedCompartmentIds: [FIRST_COMPARMENT_PATHWAY_ID],
+ excludedCompartmentIds: [SECOND_COMPARMENT_PATHWAY_ID],
+ });
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.tsx b/src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.tsx
index fcf01b6a0c8fd6cae6b847e245f70e3d072508e7..d8993b4e914f047d36d44732dcfe074c080f90f0 100644
--- a/src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.tsx
@@ -1,12 +1,11 @@
import { Export } from '../ExportCompound';
+import { ANNOTATIONS_TYPE } from '../ExportCompound/ExportCompound.constant';
export const Elements = (): React.ReactNode => {
return (
<div data-testid="elements-tab">
<Export>
- <Export.Types />
- <Export.Columns />
- <Export.Annotations />
+ <Export.Annotations type={ANNOTATIONS_TYPE.ELEMENTS} />
<Export.IncludedCompartmentPathways />
<Export.ExcludedCompartmentPathways />
<Export.DownloadElements />
diff --git a/src/components/Map/Drawer/ExportDrawer/Elements/Elements.utils.ts b/src/components/Map/Drawer/ExportDrawer/Elements/Elements.utils.ts
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.test.tsx
index df19cb66cbdd04c7511105db937cf4f5f41be111..9ce4c9db49f0d1c0fc1619ad8c5d4d1cc13c5eb0 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.test.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.test.tsx
@@ -6,7 +6,10 @@ import {
import { StoreType } from '@/redux/store';
import { statisticsFixture } from '@/models/fixtures/statisticsFixture';
import { act } from 'react-dom/test-utils';
+import { CONFIGURATION_INITIAL_STORE_MOCK } from '@/redux/configuration/configuration.mock';
+import { configurationFixture } from '@/models/fixtures/configurationFixture';
import { Annotations } from './Annotations.component';
+import { ANNOTATIONS_TYPE } from '../ExportCompound.constant';
const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
@@ -14,7 +17,7 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
return (
render(
<Wrapper>
- <Annotations />
+ <Annotations type={ANNOTATIONS_TYPE.ELEMENTS} />
</Wrapper>,
),
{
@@ -26,11 +29,28 @@ const renderComponent = (initialStoreState: InitialStoreState = {}): { store: St
describe('Annotations - component', () => {
it('should display annotations checkboxes when fetching data is successful', async () => {
renderComponent({
+ configuration: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK,
+ main: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK.main,
+ data: {
+ ...configurationFixture,
+ miriamTypes: {
+ compartment_label: {
+ commonName: 'Compartment',
+ homepage: '',
+ registryIdentifier: '',
+ uris: [''],
+ },
+ },
+ },
+ },
+ },
statistics: {
data: {
...statisticsFixture,
elementAnnotations: {
- compartment: 1,
+ compartment_label: 1,
pathway: 0,
},
},
@@ -54,7 +74,7 @@ describe('Annotations - component', () => {
await waitFor(() => {
expect(screen.getByTestId('checkbox-filter')).toBeInTheDocument();
- expect(screen.getByLabelText('compartment')).toBeInTheDocument();
+ expect(screen.getByLabelText('Compartment')).toBeInTheDocument();
expect(screen.getByLabelText('search-input')).toBeInTheDocument();
});
});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.tsx
index 6f7034f871d9034f2a038493d426d6784d552b02..29c91f148dff7d8eed15ac08f1c2ef797798fabe 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.tsx
@@ -1,29 +1,34 @@
import { useContext } from 'react';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import {
- elementAnnotationsSelector,
loadingStatisticsSelector,
+ statisticsDataSelector,
} from '@/redux/statistics/statistics.selectors';
import { ZERO } from '@/constants/common';
+import { miramiTypesSelector } from '@/redux/configuration/configuration.selectors';
import { CheckboxFilter } from '../../CheckboxFilter';
import { CollapsibleSection } from '../../CollapsibleSection';
import { ExportContext } from '../ExportCompound.context';
+import { getAnnotationsCheckboxElements } from './Annotations.utils';
+import { AnnotationsType } from './Annotations.types';
-export const Annotations = (): React.ReactNode => {
+type AnnotationsProps = {
+ type: AnnotationsType;
+};
+
+export const Annotations = ({ type }: AnnotationsProps): React.ReactNode => {
const { setAnnotations } = useContext(ExportContext);
const loadingStatistics = useAppSelector(loadingStatisticsSelector);
- const elementAnnotations = useAppSelector(elementAnnotationsSelector);
+ const statistics = useAppSelector(statisticsDataSelector);
+ const miramiTypes = useAppSelector(miramiTypesSelector);
const isPending = loadingStatistics === 'pending';
-
- const mappedElementAnnotations = elementAnnotations
- ? Object.keys(elementAnnotations)?.map(el => ({ id: el, label: el }))
- : [];
+ const checkboxElements = getAnnotationsCheckboxElements({ type, statistics, miramiTypes });
return (
<CollapsibleSection title="Select annotations">
{isPending && <p>Loading...</p>}
- {!isPending && mappedElementAnnotations && mappedElementAnnotations.length > ZERO && (
- <CheckboxFilter options={mappedElementAnnotations} onCheckedChange={setAnnotations} />
+ {!isPending && checkboxElements && checkboxElements.length > ZERO && (
+ <CheckboxFilter options={checkboxElements} onCheckedChange={setAnnotations} />
)}
</CollapsibleSection>
);
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.types.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15ae345efceb1830a1d3c6ff42533d3dc5feaf58
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.types.ts
@@ -0,0 +1,3 @@
+import { ANNOTATIONS_TYPE } from '../ExportCompound.constant';
+
+export type AnnotationsType = (typeof ANNOTATIONS_TYPE)[keyof typeof ANNOTATIONS_TYPE];
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.utils.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a12c973e87d3148f47bb5ff69612362595c94e6
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.utils.test.ts
@@ -0,0 +1,98 @@
+import { getAnnotationsCheckboxElements } from './Annotations.utils';
+
+describe('getAnnotationsCheckboxElements', () => {
+ const statisticsMock = {
+ elementAnnotations: {
+ chebi: 2,
+ mesh: 0,
+ reactome: 1,
+ },
+ publications: 1234,
+ reactionAnnotations: {
+ brenda: 0,
+ reactome: 3,
+ rhea: 1,
+ },
+ };
+
+ const miramiTypeMock = {
+ commonName: 'Name',
+ homepage: '',
+ registryIdentifier: '',
+ uris: [''],
+ };
+
+ const miramiTypesMock = {
+ chebi: {
+ ...miramiTypeMock,
+ commonName: 'Chebi',
+ },
+ mesh: {
+ ...miramiTypeMock,
+ commonName: 'MeSH',
+ },
+ reactome: {
+ ...miramiTypeMock,
+ commonName: 'Reactome',
+ },
+ rhea: {
+ ...miramiTypeMock,
+ commonName: 'Rhea',
+ },
+ brenda: {
+ ...miramiTypeMock,
+ commonName: 'BRENDA',
+ },
+ gene_ontology: {
+ ...miramiTypeMock,
+ commonName: 'Gene Ontology',
+ },
+ };
+
+ it('returns an empty array when statistics or miramiTypes are undefined', () => {
+ const result = getAnnotationsCheckboxElements({
+ type: 'Elements',
+ statistics: undefined,
+ miramiTypes: undefined,
+ });
+ expect(result).toEqual([]);
+ });
+
+ it('returns checkbox elements for element annotations sorted by label', () => {
+ const result = getAnnotationsCheckboxElements({
+ type: 'Elements',
+ statistics: statisticsMock,
+ miramiTypes: miramiTypesMock,
+ });
+ expect(result).toEqual([
+ { id: 'chebi', label: 'Chebi' },
+ { id: 'reactome', label: 'Reactome' },
+ ]);
+ });
+
+ it('returns checkbox elements for reaction annotations sorted by count', () => {
+ const result = getAnnotationsCheckboxElements({
+ type: 'Network',
+ statistics: statisticsMock,
+ miramiTypes: miramiTypesMock,
+ });
+ expect(result).toEqual([
+ { id: 'reactome', label: 'Reactome' },
+ { id: 'rhea', label: 'Rhea' },
+ ]);
+ });
+
+ it('returns an empty array when no annotations have count greater than 0', () => {
+ const statisticsMockEmpty = {
+ elementAnnotations: { annotation1: 0, annotation2: 0 },
+ publications: 0,
+ reactionAnnotations: { annotation1: 0, annotation2: 0 },
+ };
+ const result = getAnnotationsCheckboxElements({
+ type: 'Elements',
+ statistics: statisticsMockEmpty,
+ miramiTypes: miramiTypesMock,
+ });
+ expect(result).toEqual([]);
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.utils.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35e31e656c3ce6cc7ea1c2e08b8e09e6d9efa004
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.utils.ts
@@ -0,0 +1,51 @@
+/* eslint-disable no-magic-numbers */
+import { ConfigurationMiramiTypes, Statistics } from '@/types/models';
+import { ANNOTATIONS_TYPE } from '../ExportCompound.constant';
+import { AnnotationsType } from './Annotations.types';
+
+type CheckboxElement = { id: string; label: string };
+
+type CheckboxElements = CheckboxElement[];
+
+type GetAnnotationsCheckboxElements = {
+ type: AnnotationsType;
+ statistics: Statistics | undefined;
+ miramiTypes: ConfigurationMiramiTypes | undefined;
+};
+
+const sortByCount = (countA: number, countB: number): number => {
+ return countA > countB ? -1 : 1;
+};
+
+const mapToCheckboxElement = (
+ annotation: string,
+ miramiTypes: ConfigurationMiramiTypes,
+): CheckboxElement => ({
+ id: annotation,
+ label: miramiTypes[annotation].commonName,
+});
+
+const filterAnnotationsByCount = (annotations: Record<string, number>): string[] => {
+ return Object.keys(annotations).filter(annotation => annotations[annotation] > 0);
+};
+
+export const getAnnotationsCheckboxElements = ({
+ type,
+ statistics,
+ miramiTypes,
+}: GetAnnotationsCheckboxElements): CheckboxElements => {
+ if (!statistics || !miramiTypes) return [];
+
+ const annotations =
+ type === ANNOTATIONS_TYPE.ELEMENTS
+ ? statistics.elementAnnotations
+ : statistics.reactionAnnotations;
+
+ const availableAnnotations = filterAnnotationsByCount(annotations);
+
+ return availableAnnotations
+ .sort((firstAnnotation, secondAnnotation) =>
+ sortByCount(annotations[firstAnnotation], annotations[secondAnnotation]),
+ )
+ .map(annotation => mapToCheckboxElement(annotation, miramiTypes));
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.component.test.tsx
deleted file mode 100644
index 381ba5cc9c7fb3f22761c28516e469633a262a85..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.component.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
-import { Columns } from './Columns.component';
-
-describe('Columns - component', () => {
- it('should display select column accordion', async () => {
- render(<Columns />);
-
- expect(screen.getByText('Select column')).toBeInTheDocument();
- expect(screen.queryByTestId('checkbox-filter')).not.toBeVisible();
- });
- it('should display columns checkboxes', async () => {
- render(<Columns />);
-
- expect(screen.getByText('Select column')).toBeInTheDocument();
- expect(screen.queryByTestId('checkbox-filter')).not.toBeVisible();
-
- const navigationButton = screen.getByTestId('accordion-item-button');
- act(() => {
- navigationButton.click();
- });
-
- expect(screen.queryByTestId('checkbox-filter')).toBeVisible();
- expect(screen.queryByLabelText('References')).toBeVisible();
- });
-});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.component.tsx
deleted file mode 100644
index 954a4c60a4354f675d4c7bab265f45d69c384039..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.component.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useContext } from 'react';
-import { CheckboxFilter } from '../../CheckboxFilter';
-import { CollapsibleSection } from '../../CollapsibleSection';
-import { COLUMNS } from './Columns.constants';
-import { ExportContext } from '../ExportCompound.context';
-
-export const Columns = (): React.ReactNode => {
- const { setColumns } = useContext(ExportContext);
-
- return (
- <CollapsibleSection title="Select column">
- <CheckboxFilter options={COLUMNS} isSearchEnabled={false} onCheckedChange={setColumns} />
- </CollapsibleSection>
- );
-};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.constants.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.constants.tsx
deleted file mode 100644
index e2ece6b51ec445bd3c3b172120ce8679d5fe795c..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.constants.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-export const COLUMNS = [
- {
- id: 'id',
- label: 'ID',
- },
- {
- id: 'description',
- label: 'Description',
- },
- {
- id: 'modelId',
- label: 'Map id',
- },
- {
- id: 'mapName',
- label: 'Map name',
- },
- {
- id: 'symbol',
- label: 'Symbol',
- },
- {
- id: 'abbreviation',
- label: 'Abbreviation',
- },
- {
- id: 'synonyms',
- label: 'Synonyms',
- },
- {
- id: 'references',
- label: 'References',
- },
- {
- id: 'name',
- label: 'Name',
- },
- {
- id: 'type',
- label: 'Type',
- },
- {
- id: 'complexId',
- label: 'Complex id',
- },
- {
- id: 'complexName',
- label: 'Complex name',
- },
- {
- id: 'compartmentId',
- label: 'Compartment/Pathway id',
- },
- {
- id: 'compartmentName',
- label: 'Compartment/Pathway name',
- },
- {
- id: 'charge',
- label: 'Charge',
- },
- {
- id: 'fullName',
- label: 'Full name',
- },
- {
- id: 'formula',
- label: 'Formula',
- },
- {
- id: 'formerSymbols',
- label: 'Former symbols',
- },
- {
- id: 'linkedSubmodelId',
- label: 'Linked submap id',
- },
- {
- id: 'elementId',
- label: 'Element external id',
- },
- {
- id: 'ALL',
- label: 'All',
- },
-];
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/index.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/index.ts
deleted file mode 100644
index 167db8672847d14dac8a6cc038be63cfe105a582..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Columns } from './Columns.component';
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx
index fbe769f0877561ab755049749e12577e13c1b005..8e0fb25dd7a80742635bc5039e63a74ceae686cc 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'react';
import { Button } from '@/shared/Button';
import { ExportContext } from '../ExportCompound.context';
-export const DownloadElements = (): React.ReactNode => {
+export const DownloadNetwork = (): React.ReactNode => {
const { handleDownloadNetwork } = useContext(ExportContext);
return (
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExcludedCompartmentPathways/ExcludedCompartmentPathways.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExcludedCompartmentPathways/ExcludedCompartmentPathways.component.tsx
index a1de0816bef5e657fee1ee41ca4ed3f0937d0160..a66fba4e8b3867a8db0c550466eb5e572e210eb3 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExcludedCompartmentPathways/ExcludedCompartmentPathways.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExcludedCompartmentPathways/ExcludedCompartmentPathways.component.tsx
@@ -15,7 +15,7 @@ export const ExcludedCompartmentPathways = (): React.ReactNode => {
const loadingCompartmentPathways = useAppSelector(loadingCompartmentPathwaysSelector);
const isPending = loadingCompartmentPathways === 'pending';
const compartmentPathways = useAppSelector(compartmentPathwaysDataSelector);
- const checkboxElements = getCompartmentPathwaysCheckboxElements(compartmentPathways);
+ const checkboxElements = getCompartmentPathwaysCheckboxElements('excluded', compartmentPathways);
const isCheckboxFilterVisible = !isPending && checkboxElements && checkboxElements.length > ZERO;
return (
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
index 15f4767e22864d74979a577f62314f5af2d828de..4936c27c1dde4cf20a7e4b86504bb457d3fe579a 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.component.tsx
@@ -1,9 +1,9 @@
import { ReactNode, useCallback, useMemo, useState } from 'react';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modelsIdsSelector } from '@/redux/models/models.selectors';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { downloadNetwork, downloadElements } from '@/redux/export/export.thunks';
import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.component';
-import { Types } from './Types';
-import { Columns } from './Columns';
import { Annotations } from './Annotations';
import { ExcludedCompartmentPathways } from './ExcludedCompartmentPathways';
import { IncludedCompartmentPathways } from './IncludedCompartmentPathways ';
@@ -11,14 +11,15 @@ import { DownloadElements } from './DownloadElements/DownloadElements';
import { ExportContext } from './ExportCompound.context';
import { getNetworkDownloadBodyRequest } from './utils/getNetworkBodyRequest';
import { getDownloadElementsBodyRequest } from './utils/getDownloadElementsBodyRequest';
+import { DownloadNetwork } from './DownloadNetwork/DownloadNetwork';
+import { ELEMENTS_COLUMNS, NETWORK_COLUMNS } from './ExportCompound.constant';
type ExportProps = {
children: ReactNode;
};
export const Export = ({ children }: ExportProps): JSX.Element => {
- const [types, setTypes] = useState<CheckboxItem[]>([]);
- const [columns, setColumns] = useState<CheckboxItem[]>([]);
+ const dispatch = useAppDispatch();
const [annotations, setAnnotations] = useState<CheckboxItem[]>([]);
const modelIds = useAppSelector(modelsIdsSelector);
const [includedCompartmentPathways, setIncludedCompartmentPathways] = useState<CheckboxItem[]>(
@@ -28,32 +29,32 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
[],
);
- const handleDownloadElements = useCallback(() => {
- getDownloadElementsBodyRequest({
- types,
- columns,
+ const handleDownloadElements = useCallback(async () => {
+ const body = getDownloadElementsBodyRequest({
+ columns: ELEMENTS_COLUMNS,
modelIds,
annotations,
includedCompartmentPathways,
excludedCompartmentPathways,
});
- }, [
- types,
- columns,
- modelIds,
- annotations,
- includedCompartmentPathways,
- excludedCompartmentPathways,
- ]);
- const handleDownloadNetwork = useCallback(() => {
- getNetworkDownloadBodyRequest();
- }, []);
+ dispatch(downloadElements(body));
+ }, [modelIds, annotations, includedCompartmentPathways, excludedCompartmentPathways, dispatch]);
+
+ const handleDownloadNetwork = useCallback(async () => {
+ const data = getNetworkDownloadBodyRequest({
+ columns: NETWORK_COLUMNS,
+ modelIds,
+ annotations,
+ includedCompartmentPathways,
+ excludedCompartmentPathways,
+ });
+
+ dispatch(downloadNetwork(data));
+ }, [modelIds, annotations, includedCompartmentPathways, excludedCompartmentPathways, dispatch]);
const globalContextValue = useMemo(
() => ({
- setTypes,
- setColumns,
setAnnotations,
setIncludedCompartmentPathways,
setExcludedCompartmentPathways,
@@ -66,9 +67,8 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
return <ExportContext.Provider value={globalContextValue}>{children}</ExportContext.Provider>;
};
-Export.Types = Types;
-Export.Columns = Columns;
Export.Annotations = Annotations;
Export.IncludedCompartmentPathways = IncludedCompartmentPathways;
Export.ExcludedCompartmentPathways = ExcludedCompartmentPathways;
Export.DownloadElements = DownloadElements;
+Export.DownloadNetwork = DownloadNetwork;
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00c556b71ce7fd73f07b0c106c4af87d8c92b32b
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
@@ -0,0 +1,45 @@
+export const ANNOTATIONS_TYPE = {
+ ELEMENTS: 'Elements',
+ NETWORK: 'Network',
+} as const;
+
+export const COLUMNS_TYPE = {
+ ELEMENTS: 'Elements',
+ NETWORK: 'Network',
+} as const;
+
+export const ELEMENTS_COLUMNS = [
+ 'id',
+ 'type',
+ 'name',
+ 'symbol',
+ 'abbreviation',
+ 'fullName',
+ 'synonyms',
+ 'formerSymbols',
+ 'complexId',
+ 'complexName',
+ 'compartmentId',
+ 'compartmentName',
+ 'modelId',
+ 'mapName',
+ 'description',
+ 'references',
+ 'charge',
+ 'formula',
+ 'linkedSubmodelId',
+ 'elementId',
+];
+
+export const NETWORK_COLUMNS = [
+ 'id',
+ 'type',
+ 'reactantIds',
+ 'productIds',
+ 'modifierIds',
+ 'description',
+ 'reactionId',
+ 'references',
+ 'modelId',
+ 'mapName',
+];
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context.ts
index 3490162eb61f13c9ddbf4f2a13d732693e98d003..d7d456bd94402625a34234a8f66e20e7bec1c6ee 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.context.ts
@@ -2,8 +2,6 @@ import { createContext } from 'react';
import { CheckboxItem } from '../CheckboxFilter/CheckboxFilter.component';
export type ExportContextType = {
- setTypes: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
- setColumns: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
setAnnotations: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
setIncludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
setExcludedCompartmentPathways: React.Dispatch<React.SetStateAction<CheckboxItem[]>>;
@@ -12,8 +10,6 @@ export type ExportContextType = {
};
export const ExportContext = createContext<ExportContextType>({
- setTypes: () => {},
- setColumns: () => {},
setAnnotations: () => {},
setIncludedCompartmentPathways: () => {},
setExcludedCompartmentPathways: () => {},
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/IncludedCompartmentPathways /IncludedCompartmentPathways.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/IncludedCompartmentPathways /IncludedCompartmentPathways.component.tsx
index 39164e58904ff7d2667b9573c82ad1d5a38e58f1..40eac4ac4dcc817bff61a92139f7bcb24fba7c5b 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/IncludedCompartmentPathways /IncludedCompartmentPathways.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/IncludedCompartmentPathways /IncludedCompartmentPathways.component.tsx
@@ -15,7 +15,7 @@ export const IncludedCompartmentPathways = (): React.ReactNode => {
const loadingCompartmentPathways = useAppSelector(loadingCompartmentPathwaysSelector);
const isPending = loadingCompartmentPathways === 'pending';
const compartmentPathways = useAppSelector(compartmentPathwaysDataSelector);
- const checkboxElements = getCompartmentPathwaysCheckboxElements(compartmentPathways);
+ const checkboxElements = getCompartmentPathwaysCheckboxElements('included', compartmentPathways);
return (
<CollapsibleSection title="Select included compartment / pathways">
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.component.test.tsx
deleted file mode 100644
index 4d228509706c27621afef1d5620a23dc03d647ab..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.component.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import {
- InitialStoreState,
- getReduxWrapperWithStore,
-} from '@/utils/testing/getReduxWrapperWithStore';
-import { StoreType } from '@/redux/store';
-import { Types } from './Types.component';
-
-const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
- const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
-
- return (
- render(
- <Wrapper>
- <Types />
- </Wrapper>,
- ),
- {
- store,
- }
- );
-};
-
-describe('Types Component', () => {
- test('renders without crashing', () => {
- renderComponent();
- expect(screen.getByText('Select types')).toBeInTheDocument();
- });
-});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.component.tsx b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.component.tsx
deleted file mode 100644
index 9398790028d9a1e60cbaeee9bf85014523839570..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.component.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useContext } from 'react';
-import { elementTypesSelector } from '@/redux/configuration/configuration.selectors';
-import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { getCheckboxElements } from './Types.utils';
-import { CheckboxFilter } from '../../CheckboxFilter';
-import { CollapsibleSection } from '../../CollapsibleSection';
-import { ExportContext } from '../ExportCompound.context';
-
-export const Types = (): React.ReactNode => {
- const { setTypes } = useContext(ExportContext);
- const elementTypes = useAppSelector(elementTypesSelector);
- const checkboxElements = getCheckboxElements(elementTypes);
-
- return (
- <CollapsibleSection title="Select types">
- {checkboxElements && (
- <CheckboxFilter
- options={checkboxElements}
- isSearchEnabled={false}
- onCheckedChange={setTypes}
- />
- )}
- </CollapsibleSection>
- );
-};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.utils.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.utils.test.ts
deleted file mode 100644
index 34e10ae6cf11eba8a045e3929738f636f2a03620..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.utils.test.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { getCheckboxElements } from './Types.utils';
-
-describe('getCheckboxElements', () => {
- it('should return an empty array when elementTypes is undefined', () => {
- const result = getCheckboxElements(undefined);
- expect(result).toEqual([]);
- });
-
- it('should map elementTypes to MappedElementTypes and exclude duplicates based on name and parentClass', () => {
- const elementTypes = [
- { className: 'class1', name: 'type1', parentClass: 'parent1' },
- { className: 'class2', name: 'type2', parentClass: 'parent2' },
- { className: 'class1', name: 'type1', parentClass: 'parent1' },
- { className: 'class3', name: 'type3', parentClass: 'parent3' },
- { className: 'class2', name: 'type2', parentClass: 'parent2' },
- ];
-
- const result = getCheckboxElements(elementTypes);
-
- expect(result).toEqual([
- { id: 'type1', label: 'type1' },
- { id: 'type2', label: 'type2' },
- { id: 'type3', label: 'type3' },
- ]);
- });
-
- it('should handle an empty array of elementTypes', () => {
- const result = getCheckboxElements([]);
- expect(result).toEqual([]);
- });
-
- it('should return an empty array when elementTypes is undefined', () => {
- const result = getCheckboxElements(undefined);
- expect(result).toEqual([]);
- });
-});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.utils.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.utils.ts
deleted file mode 100644
index a8a7cc990d683cad01bd17ca5f8007f4bce4e86b..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/Types.utils.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-type ElementTypes =
- | {
- className: string;
- name: string;
- parentClass: string;
- }[]
- | undefined;
-
-type MappedElementTypes = { id: string; label: string }[];
-
-type PresenceMap = { [key: string]: boolean };
-
-export const getCheckboxElements = (elementTypes: ElementTypes): MappedElementTypes => {
- if (!elementTypes) return [];
-
- const excludedTypes: PresenceMap = {};
- elementTypes?.forEach(type => {
- excludedTypes[type.parentClass] = true;
- });
-
- const mappedElementTypes: MappedElementTypes = [];
- const processedNames: PresenceMap = {};
-
- elementTypes.forEach(elementType => {
- if (excludedTypes[elementType.className] || processedNames[elementType.name]) return;
-
- processedNames[elementType.name] = true;
- mappedElementTypes.push({
- id: elementType.name,
- label: elementType.name,
- });
- });
-
- return mappedElementTypes;
-};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/index.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/index.ts
deleted file mode 100644
index ce8a0cc157c89e6d8b723d3b67d9479b8a1df515..0000000000000000000000000000000000000000
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/Types/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Types } from './Types.component';
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/extractAndParseNumberIdFromCompartment.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/extractAndParseNumberIdFromCompartment.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ea949afd9f0716a6af6aabdc8d2694fe1490f16
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/extractAndParseNumberIdFromCompartment.test.ts
@@ -0,0 +1,26 @@
+/* eslint-disable no-magic-numbers */
+import { extractAndParseNumberIdFromCompartment } from './extractAndParseNumberIdFromCompartment';
+
+describe('extractAndParseNumberIdFromCompartment', () => {
+ it('should extract and parse number id from compartment', () => {
+ const compartment = { id: 'compartment-123', label: 'x' };
+ const result = extractAndParseNumberIdFromCompartment(compartment);
+ expect(result).toBe(123);
+ });
+
+ it('should handle id with non-numeric characters', () => {
+ const compartment = { id: 'compartment-abc', label: 'x' };
+
+ expect(() => extractAndParseNumberIdFromCompartment(compartment)).toThrowError(
+ 'compartment id is not a number',
+ );
+ });
+
+ it('should handle missing id', () => {
+ const compartment = { id: 'compartment-', label: 'x' };
+
+ expect(() => extractAndParseNumberIdFromCompartment(compartment)).toThrowError(
+ 'compartment id is not a number',
+ );
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/extractAndParseNumberIdFromCompartment.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/extractAndParseNumberIdFromCompartment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1994a6654a7d14190c3d170502de718ee4130c09
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/extractAndParseNumberIdFromCompartment.ts
@@ -0,0 +1,10 @@
+import { CheckboxItem } from '../../CheckboxFilter/CheckboxFilter.component';
+
+export const extractAndParseNumberIdFromCompartment = (compartment: CheckboxItem): number => {
+ const [, id] = compartment.id.split('-');
+ const numberId = Number(id);
+
+ if (Number.isNaN(numberId) || id === '') throw new Error('compartment id is not a number');
+
+ return numberId;
+};
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.test.ts
index d0a7806ce4d62ea5210b1249087b97345affa819..6254cd6bd795c47606f394660040e720e61983ea 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.test.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.test.ts
@@ -5,7 +5,7 @@ import { getCompartmentPathwaysCheckboxElements } from './getCompartmentPathways
describe('getCompartmentPathwaysCheckboxElements', () => {
it('should return an empty array when given an empty items array', () => {
const items: CompartmentPathwayDetails[] = [];
- const result = getCompartmentPathwaysCheckboxElements(items);
+ const result = getCompartmentPathwaysCheckboxElements('include', items);
expect(result).toEqual([]);
});
@@ -17,12 +17,12 @@ describe('getCompartmentPathwaysCheckboxElements', () => {
{ id: 4, name: 'Compartment C' },
] as CompartmentPathwayDetails[];
- const result = getCompartmentPathwaysCheckboxElements(items);
+ const result = getCompartmentPathwaysCheckboxElements('test', items);
expect(result).toEqual([
- { id: '1', label: 'Compartment A' },
- { id: '2', label: 'Compartment B' },
- { id: '4', label: 'Compartment C' },
+ { id: 'test-1', label: 'Compartment A' },
+ { id: 'test-2', label: 'Compartment B' },
+ { id: 'test-4', label: 'Compartment C' },
]);
});
it('should correctly extract unique names and corresponding ids from items and sorts them alphabetically', () => {
@@ -34,13 +34,13 @@ describe('getCompartmentPathwaysCheckboxElements', () => {
{ id: 5, name: 'Compartment D' },
] as CompartmentPathwayDetails[];
- const result = getCompartmentPathwaysCheckboxElements(items);
+ const result = getCompartmentPathwaysCheckboxElements('prefix', items);
expect(result).toEqual([
- { id: '2', label: 'Compartment A' },
- { id: '3', label: 'Compartment B' },
- { id: '1', label: 'Compartment C' },
- { id: '5', label: 'Compartment D' },
+ { id: 'prefix-2', label: 'Compartment A' },
+ { id: 'prefix-3', label: 'Compartment B' },
+ { id: 'prefix-1', label: 'Compartment C' },
+ { id: 'prefix-5', label: 'Compartment D' },
]);
});
});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.ts
index e0f4bf81a14c4fece41eff986e4b3685b2506f16..9a807f04e97bc26296e9a4922fd312637bb7e54e 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getCompartmentPathwaysCheckboxElements.ts
@@ -8,6 +8,7 @@ type CheckboxElement = { id: string; label: string };
type CheckboxElements = CheckboxElement[];
export const getCompartmentPathwaysCheckboxElements = (
+ prefix: string,
items: CompartmentPathwayDetails[],
): CheckboxElements => {
const addedNames: AddedNames = {};
@@ -21,7 +22,7 @@ export const getCompartmentPathwaysCheckboxElements = (
items.forEach(setNameToIdIfUndefined);
const parseIdAndLabel = ([name, id]: [name: string, id: number]): CheckboxElement => ({
- id: id.toString(),
+ id: `${prefix}-${id}`,
label: name,
});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.test.ts
index 68d1e8f0ae0858439f4ed21fc681eef713d921b1..6e9dbdac7995fcc6aa82867abf9e5ee6ec6c6546 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.test.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.test.ts
@@ -1,33 +1,25 @@
+/* eslint-disable no-magic-numbers */
import { getDownloadElementsBodyRequest } from './getDownloadElementsBodyRequest';
describe('getDownloadElementsBodyRequest', () => {
it('should return the correct DownloadBodyRequest object', () => {
- const types = [
- { id: '1', label: 'Type 1' },
- { id: '2', label: 'Type 2' },
- ];
- const columns = [
- { id: '1', label: 'Column 1' },
- { id: '2', label: 'Column 2' },
- ];
// eslint-disable-next-line no-magic-numbers
const modelIds = [1, 2, 3];
const annotations = [
- { id: '1', label: 'Annotation 1' },
- { id: '2', label: 'Annotation 2' },
+ { id: 'Annotation 1', label: 'Annotation 1' },
+ { id: 'Annotation 2', label: 'Annotation 2' },
];
const includedCompartmentPathways = [
- { id: '1', label: 'Compartment 1' },
- { id: '2', label: 'Compartment 2' },
+ { id: 'include-7', label: 'Compartment 1' },
+ { id: 'include-8', label: 'Compartment 2' },
];
const excludedCompartmentPathways = [
- { id: '1', label: 'Compartment 3' },
- { id: '2', label: 'Compartment 4' },
+ { id: 'exclude-9', label: 'Compartment 3' },
+ { id: 'exclude-10', label: 'Compartment 4' },
];
const result = getDownloadElementsBodyRequest({
- types,
- columns,
+ columns: ['Column 23', 'Column99'],
modelIds,
annotations,
includedCompartmentPathways,
@@ -35,13 +27,37 @@ describe('getDownloadElementsBodyRequest', () => {
});
expect(result).toEqual({
- types: ['Type 1', 'Type 2'],
- columns: ['Column 1', 'Column 2'],
+ columns: ['Column 23', 'Column99'],
// eslint-disable-next-line no-magic-numbers
submaps: [1, 2, 3],
annotations: ['Annotation 1', 'Annotation 2'],
- includedCompartmentIds: ['Compartment 1', 'Compartment 2'],
- excludedCompartmentIds: ['Compartment 3', 'Compartment 4'],
+ includedCompartmentIds: [7, 8],
+ excludedCompartmentIds: [9, 10],
});
});
+ it('should throw error if compartment id is not a number', () => {
+ const modelIds = [1, 2, 3];
+ const annotations = [
+ { id: 'Annotation 1', label: 'Annotation 1' },
+ { id: 'Annotation 2', label: 'Annotation 2' },
+ ];
+ const includedCompartmentPathways = [
+ { id: '', label: 'Compartment 1' },
+ { id: '', label: 'Compartment 2' },
+ ];
+ const excludedCompartmentPathways = [
+ { id: '', label: 'Compartment 3' },
+ { id: '', label: 'Compartment 4' },
+ ];
+
+ expect(() =>
+ getDownloadElementsBodyRequest({
+ columns: ['Column 23', 'Column99'],
+ modelIds,
+ annotations,
+ includedCompartmentPathways,
+ excludedCompartmentPathways,
+ }),
+ ).toThrow('compartment id is not a number');
+ });
});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.ts
index 1a262a95703df1efc1e0baba873acf11cc50e13a..0da338206a975e41432e619c0d238d9ae6d7f285 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.ts
@@ -1,17 +1,16 @@
import { CheckboxItem } from '../../CheckboxFilter/CheckboxFilter.component';
+import { extractAndParseNumberIdFromCompartment } from './extractAndParseNumberIdFromCompartment';
type DownloadBodyRequest = {
- types: string[];
columns: string[];
submaps: number[];
annotations: string[];
- includedCompartmentIds: string[];
- excludedCompartmentIds: string[];
+ includedCompartmentIds: number[];
+ excludedCompartmentIds: number[];
};
type GetDownloadBodyRequestProps = {
- types: CheckboxItem[];
- columns: CheckboxItem[];
+ columns: string[];
modelIds: number[];
annotations: CheckboxItem[];
includedCompartmentPathways: CheckboxItem[];
@@ -19,17 +18,15 @@ type GetDownloadBodyRequestProps = {
};
export const getDownloadElementsBodyRequest = ({
- types,
columns,
modelIds,
annotations,
includedCompartmentPathways,
excludedCompartmentPathways,
}: GetDownloadBodyRequestProps): DownloadBodyRequest => ({
- types: types.map(type => type.label),
- columns: columns.map(column => column.label),
+ columns,
submaps: modelIds,
- annotations: annotations.map(annotation => annotation.label),
- includedCompartmentIds: includedCompartmentPathways.map(compartment => compartment.label),
- excludedCompartmentIds: excludedCompartmentPathways.map(compartment => compartment.label),
+ annotations: annotations.map(annotation => annotation.id),
+ includedCompartmentIds: includedCompartmentPathways.map(extractAndParseNumberIdFromCompartment),
+ excludedCompartmentIds: excludedCompartmentPathways.map(extractAndParseNumberIdFromCompartment),
});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.test.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.test.ts
index 1aa3d73b227fb3f5ba7ce6a3fd69e70b161ac58e..42f38d9fa45920846738d08a3aec0e79d6bc1d68 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.test.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.test.ts
@@ -1,8 +1,37 @@
+/* eslint-disable no-magic-numbers */
import { getNetworkDownloadBodyRequest } from './getNetworkBodyRequest';
describe('getNetworkDownloadBodyRequest', () => {
- it('should return an empty object', () => {
- const result = getNetworkDownloadBodyRequest();
- expect(result).toEqual({});
+ it('should return the correct DownloadBodyRequest object', () => {
+ const columns = ['column1', 'column2'];
+ const modelIds = [1, 2, 3];
+ const annotations = [
+ { id: 'Annotation 1', label: 'Annotation 1' },
+ { id: 'Annotation 2', label: 'Annotation 2' },
+ ];
+ const includedCompartmentPathways = [
+ { id: 'include-7', label: 'Compartment 1' },
+ { id: 'include-8', label: 'Compartment 2' },
+ ];
+ const excludedCompartmentPathways = [
+ { id: 'exclude-9', label: 'Compartment 3' },
+ { id: 'exclude-10', label: 'Compartment 4' },
+ ];
+
+ const result = getNetworkDownloadBodyRequest({
+ columns,
+ modelIds,
+ annotations,
+ includedCompartmentPathways,
+ excludedCompartmentPathways,
+ });
+
+ expect(result).toEqual({
+ columns: ['column1', 'column2'],
+ submaps: [1, 2, 3],
+ annotations: ['Annotation 1', 'Annotation 2'],
+ includedCompartmentIds: [7, 8],
+ excludedCompartmentIds: [9, 10],
+ });
});
});
diff --git a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.ts b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.ts
index 6613aea72d35cc71d858350896d3d8ea79121e73..9f83d70582058f6d5d5bd6038ec00c3858e5c65b 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getNetworkBodyRequest.ts
@@ -1 +1,32 @@
-export const getNetworkDownloadBodyRequest = (): object => ({});
+import { CheckboxItem } from '../../CheckboxFilter/CheckboxFilter.component';
+import { extractAndParseNumberIdFromCompartment } from './extractAndParseNumberIdFromCompartment';
+
+type DownloadBodyRequest = {
+ columns: string[];
+ submaps: number[];
+ annotations: string[];
+ includedCompartmentIds: number[];
+ excludedCompartmentIds: number[];
+};
+
+type GetDownloadBodyRequestProps = {
+ columns: string[];
+ modelIds: number[];
+ annotations: CheckboxItem[];
+ includedCompartmentPathways: CheckboxItem[];
+ excludedCompartmentPathways: CheckboxItem[];
+};
+
+export const getNetworkDownloadBodyRequest = ({
+ columns,
+ modelIds,
+ annotations,
+ includedCompartmentPathways,
+ excludedCompartmentPathways,
+}: GetDownloadBodyRequestProps): DownloadBodyRequest => ({
+ columns,
+ submaps: modelIds,
+ annotations: annotations.map(annotation => annotation.id),
+ includedCompartmentIds: includedCompartmentPathways.map(extractAndParseNumberIdFromCompartment),
+ excludedCompartmentIds: excludedCompartmentPathways.map(extractAndParseNumberIdFromCompartment),
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/Network/Network.component.test.tsx b/src/components/Map/Drawer/ExportDrawer/Network/Network.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..67321198348d16a13f633d31936ed28329b567f9
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/Network/Network.component.test.tsx
@@ -0,0 +1,210 @@
+/* eslint-disable no-magic-numbers */
+import { AppDispatch, RootState } from '@/redux/store';
+import { InitialStoreState } from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { CONFIGURATION_INITIAL_STORE_MOCK } from '@/redux/configuration/configuration.mock';
+import { configurationFixture } from '@/models/fixtures/configurationFixture';
+import { act } from 'react-dom/test-utils';
+import { statisticsFixture } from '@/models/fixtures/statisticsFixture';
+import { compartmentPathwaysDetailsFixture } from '@/models/fixtures/compartmentPathways';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { modelsFixture } from '@/models/fixtures/modelsFixture';
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import { apiPath } from '@/redux/apiPath';
+import { HttpStatusCode } from 'axios';
+import { NETWORK_COLUMNS } from '../ExportCompound/ExportCompound.constant';
+import { Network } from './Network.component';
+
+const mockedAxiosClient = mockNetworkNewAPIResponse();
+
+const renderComponent = (
+ initialStore?: InitialStoreState,
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener(initialStore);
+ return (
+ render(
+ <Wrapper>
+ <Network />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('Network - component', () => {
+ it('should render all network sections', () => {
+ renderComponent({
+ configuration: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK,
+ main: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK.main,
+ data: {
+ ...configurationFixture,
+ miriamTypes: {
+ compartment_label: {
+ commonName: 'Compartment',
+ homepage: '',
+ registryIdentifier: '',
+ uris: [''],
+ },
+ },
+ },
+ },
+ },
+ statistics: {
+ data: {
+ ...statisticsFixture,
+ reactionAnnotations: {
+ compartment_label: 1,
+ pathway: 0,
+ },
+ },
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ compartmentPathways: {
+ data: compartmentPathwaysDetailsFixture,
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ });
+ const annotations = screen.getByText('Select annotations');
+ const includedCompartmentPathways = screen.getByText('Select included compartment / pathways');
+ const excludedCompartmentPathways = screen.getByText('Select excluded compartment / pathways');
+ const downloadButton = screen.getByText('Download');
+
+ expect(annotations).toBeVisible();
+ expect(includedCompartmentPathways).toBeVisible();
+ expect(excludedCompartmentPathways).toBeVisible();
+ expect(downloadButton).toBeVisible();
+ });
+ it('should handle download button click and dispatch proper data', async () => {
+ mockedAxiosClient.onPost(apiPath.downloadNetworkCsv()).reply(HttpStatusCode.Ok, 'test');
+ const FIRST_COMPARMENT_PATHWAY_NAME = compartmentPathwaysDetailsFixture[0].name;
+ const FIRST_COMPARMENT_PATHWAY_ID = compartmentPathwaysDetailsFixture[0].id;
+ const SECOND_COMPARMENT_PATHWAY_NAME = compartmentPathwaysDetailsFixture[1].name;
+ const SECOND_COMPARMENT_PATHWAY_ID = compartmentPathwaysDetailsFixture[1].id;
+ const { store } = renderComponent({
+ configuration: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK,
+ main: {
+ ...CONFIGURATION_INITIAL_STORE_MOCK.main,
+ data: {
+ ...configurationFixture,
+ miriamTypes: {
+ reaction: {
+ commonName: 'Reaction Label',
+ homepage: '',
+ registryIdentifier: '',
+ uris: [''],
+ },
+ },
+ },
+ },
+ },
+ statistics: {
+ data: {
+ ...statisticsFixture,
+ elementAnnotations: {
+ compartment: 1,
+ pathway: 0,
+ },
+ reactionAnnotations: {
+ reaction: 2,
+ path: 0,
+ },
+ },
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ compartmentPathways: {
+ data: compartmentPathwaysDetailsFixture,
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ models: {
+ data: modelsFixture,
+ loading: 'succeeded',
+ error: {
+ message: '',
+ name: '',
+ },
+ },
+ });
+
+ const annotations = screen.getByText('Select annotations');
+
+ await act(() => {
+ annotations.click();
+ });
+ const annotationInput = screen.getByLabelText('Reaction Label');
+
+ await act(() => {
+ annotationInput.click();
+ });
+
+ expect(annotationInput).toBeChecked();
+
+ const includedCompartmentPathways = screen.getByText('Select included compartment / pathways');
+
+ await act(() => {
+ includedCompartmentPathways.click();
+ });
+ const includedCompartmentPathwaysInput = screen.getAllByLabelText(
+ FIRST_COMPARMENT_PATHWAY_NAME,
+ )[0];
+
+ await act(() => {
+ includedCompartmentPathwaysInput.click();
+ });
+
+ expect(includedCompartmentPathwaysInput).toBeChecked();
+
+ const excludedCompartmentPathways = screen.getByText('Select excluded compartment / pathways');
+
+ await act(() => {
+ excludedCompartmentPathways.click();
+ });
+ const excludedCompartmentPathwaysInput = screen.getAllByLabelText(
+ SECOND_COMPARMENT_PATHWAY_NAME,
+ )[1];
+
+ await act(() => {
+ excludedCompartmentPathwaysInput.click();
+ });
+
+ expect(excludedCompartmentPathwaysInput).toBeChecked();
+
+ const downloadButton = screen.getByText('Download');
+
+ await act(() => {
+ downloadButton.click();
+ });
+
+ const actions = store.getActions();
+
+ const firstAction = actions[0];
+ expect(firstAction.meta.arg).toEqual({
+ columns: NETWORK_COLUMNS,
+ submaps: modelsFixture.map(item => item.idObject),
+ annotations: ['reaction'],
+ includedCompartmentIds: [FIRST_COMPARMENT_PATHWAY_ID],
+ excludedCompartmentIds: [SECOND_COMPARMENT_PATHWAY_ID],
+ });
+ });
+});
diff --git a/src/components/Map/Drawer/ExportDrawer/Network/Network.component.tsx b/src/components/Map/Drawer/ExportDrawer/Network/Network.component.tsx
index 1438a0851f3581298f226532ff874bf44821a1b6..48f87045de1809a1062674b9adcb52d447717d33 100644
--- a/src/components/Map/Drawer/ExportDrawer/Network/Network.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/Network/Network.component.tsx
@@ -1,15 +1,14 @@
import { Export } from '../ExportCompound';
+import { ANNOTATIONS_TYPE } from '../ExportCompound/ExportCompound.constant';
export const Network = (): React.ReactNode => {
return (
<div data-testid="export-tab">
<Export>
- <Export.Types />
- <Export.Columns />
- <Export.Annotations />
+ <Export.Annotations type={ANNOTATIONS_TYPE.NETWORK} />
<Export.IncludedCompartmentPathways />
<Export.ExcludedCompartmentPathways />
- <Export.DownloadElements />
+ <Export.DownloadNetwork />
</Export>
</div>
);
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx
index 37ede68975b5ade8a9631fc4d13d80d1ecfd4d2c..081a86ba29e4f8f4651e67b9dcb412380a21f5d4 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx
@@ -17,6 +17,7 @@ import { apiPath } from '@/redux/apiPath';
import { CORE_PD_MODEL_MOCK } from '@/models/mocks/modelsMock';
import { MODELS_INITIAL_STATE_MOCK } from '@/redux/models/models.mock';
import { parseOverlayBioEntityToOlRenderingFormat } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
+import { BASE_API_URL } from '@/constants';
import { OverlayListItem } from './OverlayListItem.component';
const mockedAxiosNewClient = mockNetworkNewAPIResponse();
@@ -111,6 +112,29 @@ describe('OverlayListItem - component', () => {
});
});
- // TODO implement when connecting logic to component
- it.skip('should trigger download overlay to PC on download button click', () => {});
+ it('should trigger download overlay to PC on download button click', () => {
+ const OVERLAY_ID = 21;
+ renderComponent({
+ map: {
+ ...initialMapStateFixture,
+ data: { ...initialMapStateFixture.data, backgroundId: EMPTY_BACKGROUND_ID },
+ },
+ backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+ overlayBioEntity: { ...OVERLAY_BIO_ENTITY_INITIAL_STATE_MOCK, overlaysId: [OVERLAY_ID] },
+ models: { ...MODELS_INITIAL_STATE_MOCK, data: [CORE_PD_MODEL_MOCK] },
+ });
+
+ const downloadButton = screen.getByText('Download');
+
+ expect(downloadButton).toBeVisible();
+
+ const windowOpenMock = jest.spyOn(window, 'open').mockImplementation();
+
+ downloadButton.click();
+
+ expect(windowOpenMock).toHaveBeenCalledWith(
+ `${BASE_API_URL}/${apiPath.downloadOverlay(OVERLAY_ID)}`,
+ '_blank',
+ );
+ });
});
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx
index 21eefae1d72c6821d494efd7ed29c8b34553bee9..82c5965d44326e1440e1752719094222db49f3b9 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx
@@ -1,7 +1,7 @@
import { Button } from '@/shared/Button';
import Image from 'next/image';
import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
-import { useOverlay } from './hooks/useOverlay';
+import { useOverlay } from '../../hooks/useOverlay';
interface OverlayListItemProps {
name: string;
@@ -9,8 +9,8 @@ interface OverlayListItemProps {
}
export const OverlayListItem = ({ name, overlayId }: OverlayListItemProps): JSX.Element => {
- const onDownloadOverlay = (): void => {};
- const { toggleOverlay, isOverlayActive, isOverlayLoading } = useOverlay(overlayId);
+ const { toggleOverlay, isOverlayActive, isOverlayLoading, downloadOverlay } =
+ useOverlay(overlayId);
return (
<li className="flex flex-row flex-nowrap justify-between pl-5 [&:not(:last-of-type)]:mb-4">
@@ -32,7 +32,7 @@ export const OverlayListItem = ({ name, overlayId }: OverlayListItemProps): JSX.
)}
{isOverlayActive || isOverlayActive ? 'Disable' : 'View'}
</Button>
- <Button className="max-h-8" variantStyles="ghost" onClick={onDownloadOverlay}>
+ <Button className="max-h-8" variantStyles="ghost" onClick={downloadOverlay}>
Download
</Button>
</div>
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx
index b7c754c8f76d782d67e55a0beec1f0c2f1a3021c..9fb75c283445be61f5ea351185806fb7ca790eb1 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlayForm/UserOverlayForm.component.test.tsx
@@ -7,7 +7,6 @@ import {
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { AppDispatch, RootState, StoreType } from '@/redux/store';
-import { DEFAULT_ERROR } from '@/constants/errors';
import { drawerOverlaysStepOneFixture } from '@/redux/drawer/drawerFixture';
import { MockStoreEnhanced } from 'redux-mock-store';
import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
@@ -19,6 +18,7 @@ import {
createdOverlayFixture,
uploadedOverlayFileContentFixture,
} from '@/models/fixtures/overlaysFixture';
+import { OVERLAYS_INITIAL_STATE_MOCK } from '@/redux/overlays/overlays.mock';
import { UserOverlayForm } from './UserOverlayForm.component';
const mockedAxiosClient = mockNetworkResponse();
@@ -81,15 +81,7 @@ describe('UserOverlayForm - Component', () => {
loading: 'succeeded',
error: { message: '', name: '' },
},
- overlays: {
- data: [],
- loading: 'idle',
- error: DEFAULT_ERROR,
- addOverlay: {
- loading: 'idle',
- error: DEFAULT_ERROR,
- },
- },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
});
fireEvent.change(screen.getByTestId('overlay-name'), { target: { value: 'Test Overlay' } });
@@ -112,15 +104,7 @@ describe('UserOverlayForm - Component', () => {
loading: 'succeeded',
error: { message: '', name: '' },
},
- overlays: {
- data: [],
- loading: 'idle',
- error: DEFAULT_ERROR,
- addOverlay: {
- loading: 'idle',
- error: DEFAULT_ERROR,
- },
- },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
});
fireEvent.change(screen.getByTestId('overlay-name'), { target: { value: 'Test Overlay' } });
@@ -139,15 +123,7 @@ describe('UserOverlayForm - Component', () => {
it('should update the form inputs based on overlay content provided by elements list', async () => {
renderComponent({
- overlays: {
- data: [],
- loading: 'idle',
- error: DEFAULT_ERROR,
- addOverlay: {
- loading: 'idle',
- error: DEFAULT_ERROR,
- },
- },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
});
fireEvent.change(screen.getByTestId('overlay-name'), { target: { value: 'Test Overlay' } });
@@ -171,15 +147,7 @@ describe('UserOverlayForm - Component', () => {
type: 'text/plain',
});
renderComponent({
- overlays: {
- data: [],
- loading: 'idle',
- error: DEFAULT_ERROR,
- addOverlay: {
- loading: 'idle',
- error: DEFAULT_ERROR,
- },
- },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
});
fireEvent.change(screen.getByTestId('dropzone-input'), {
@@ -192,15 +160,7 @@ describe('UserOverlayForm - Component', () => {
it('should not submit when form is not filled', async () => {
renderComponent({
- overlays: {
- data: [],
- loading: 'idle',
- error: DEFAULT_ERROR,
- addOverlay: {
- loading: 'idle',
- error: DEFAULT_ERROR,
- },
- },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
});
expect(screen.getByTestId('overlay-description')).toHaveValue('');
fireEvent.click(screen.getByLabelText('upload overlay'));
@@ -214,15 +174,7 @@ describe('UserOverlayForm - Component', () => {
loading: 'succeeded',
error: { message: '', name: '' },
},
- overlays: {
- data: [],
- loading: 'idle',
- error: DEFAULT_ERROR,
- addOverlay: {
- loading: 'idle',
- error: DEFAULT_ERROR,
- },
- },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
});
const backButton = screen.getByRole('back-button');
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.test.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.test.tsx
index e5e7267c317de2608eead6063a5149f397b2dcad..116c9a792f8b7534412468a0631d4cc410ca30a9 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.test.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.test.tsx
@@ -61,6 +61,7 @@ describe('UserOverlays component', () => {
modalTitle: '',
overviewImagesState: {},
molArtState: {},
+ editOverlayState: null,
},
});
screen.getByLabelText('login button').click();
@@ -81,4 +82,16 @@ describe('UserOverlays component', () => {
expect(screen.getByLabelText('add overlay button')).toBeInTheDocument();
});
+ it('renders user overlays section when user is authenticated', () => {
+ renderComponent({
+ user: {
+ loading: 'succeeded',
+ authenticated: true,
+ error: { name: '', message: '' },
+ login: 'test',
+ },
+ });
+
+ expect(screen.getByText('Without group')).toBeInTheDocument();
+ });
});
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx
index 2db18b4201bb8ce15a36ea59994a5238e011cb79..08e161b2cb9ee434c28220c41f7636e56b8fa1e6 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlays.component.tsx
@@ -4,6 +4,7 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { openLoginModal } from '@/redux/modal/modal.slice';
import { authenticatedUserSelector, loadingUserSelector } from '@/redux/user/user.selectors';
import { Button } from '@/shared/Button';
+import { UserOverlaysWithoutGroup } from './UserOverlaysWithoutGroup';
export const UserOverlays = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -20,11 +21,11 @@ export const UserOverlays = (): JSX.Element => {
};
return (
- <div className="p-6">
+ <div className="py-6">
{isPending && <h1>Loading</h1>}
{!isPending && !authenticatedUser && (
- <>
+ <div className="px-6">
<p className="mb-5 font-semibold">User provided overlays:</p>
<p className="mb-5 text-sm">
You are not logged in, please login to upload and view custom overlays
@@ -32,16 +33,19 @@ export const UserOverlays = (): JSX.Element => {
<Button onClick={handleLoginClick} aria-label="login button">
Login
</Button>
- </>
+ </div>
)}
{authenticatedUser && (
- <div className="flex items-center justify-between">
- <p>User provided overlays:</p>
- <Button onClick={handleAddOverlay} aria-label="add overlay button">
- Add overlay
- </Button>
- </div>
+ <>
+ <div className="flex items-center justify-between px-6">
+ <p className="font-semibold">User provided overlays:</p>
+ <Button onClick={handleAddOverlay} aria-label="add overlay button">
+ Add overlay
+ </Button>
+ </div>
+ <UserOverlaysWithoutGroup />
+ </>
)}
</div>
);
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/UserOverlayActions.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/UserOverlayActions.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..16b0cda2c027907d6da026dcddc5d0db25d52a1a
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/UserOverlayActions.component.tsx
@@ -0,0 +1,54 @@
+import { useSelect } from 'downshift';
+import { twMerge } from 'tailwind-merge';
+import React, { useMemo } from 'react';
+import { MapOverlay } from '@/types/models';
+import { Icon } from '@/shared/Icon';
+import { useUserOverlayActions } from './hooks/useUserOverlayActions';
+import { ACTION_TYPES } from './UserOverlayActions.constants';
+
+type UserOverlayActionsProps = {
+ overlay: MapOverlay;
+};
+
+export const UserOverlayActions = ({ overlay }: UserOverlayActionsProps): React.ReactNode => {
+ const actions = useMemo(() => Object.values(ACTION_TYPES), []);
+ const { isOpen, getToggleButtonProps, getMenuProps, getItemProps } = useSelect({
+ items: actions,
+ });
+
+ const { handleActionClick } = useUserOverlayActions(overlay);
+
+ return (
+ <div className="relative">
+ <div
+ className="flex cursor-pointer justify-between bg-white p-2"
+ {...getToggleButtonProps()}
+ data-testid="actions-button"
+ >
+ <Icon name="three-dots" className="h-[22px] w-[4px]" />
+ </div>
+ <ul
+ className={twMerge(
+ `absolute right-0 top-0 z-10 w-28 rounded-lg border border-[#DBD9D9] bg-white px-2.5 text-center shadow-md`,
+ !isOpen && 'hidden',
+ )}
+ {...getMenuProps()}
+ >
+ {isOpen &&
+ actions.map((item, index) => (
+ <li
+ key={item}
+ {...getItemProps({
+ item,
+ index,
+ onClick: () => handleActionClick(item),
+ })}
+ className='relative cursor-pointer px-2.5 py-4 text-xs before:absolute before:bottom-0 before:left-1/2 before:top-full before:block before:h-px before:w-11/12 before:-translate-x-1/2 before:bg-[#E3E3E3] before:content-[""] before:last-of-type:hidden'
+ >
+ {item}
+ </li>
+ ))}
+ </ul>
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/UserOverlayActions.constants.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/UserOverlayActions.constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cf82dee881829f9b3f50100681c434d8b565ab95
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/UserOverlayActions.constants.ts
@@ -0,0 +1,4 @@
+export const ACTION_TYPES = {
+ EDIT: 'Edit',
+ DOWNLOAD: 'Download',
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/hooks/useUserOverlayActions.test.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/hooks/useUserOverlayActions.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b7e7135bb456ff9d20bd35780c9c673bbec2a257
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/hooks/useUserOverlayActions.test.ts
@@ -0,0 +1,68 @@
+/* eslint-disable no-magic-numbers */
+import { overlayFixture } from '@/models/fixtures/overlaysFixture';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { renderHook } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { BASE_API_URL } from '@/constants';
+import { apiPath } from '@/redux/apiPath';
+import { useUserOverlayActions } from './useUserOverlayActions';
+
+describe('useUserOverlayActions', () => {
+ it('should handle handleActionClick based on edit action', async () => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener({});
+
+ const {
+ result: {
+ current: { handleActionClick },
+ },
+ } = renderHook(() => useUserOverlayActions(overlayFixture), {
+ wrapper: Wrapper,
+ });
+
+ await act(() => {
+ handleActionClick('Edit');
+ });
+
+ const actions = store.getActions();
+
+ const FIRST_ACTION = actions[0];
+
+ expect(FIRST_ACTION.payload).toBe(overlayFixture);
+ expect(FIRST_ACTION.type).toBe('modal/openEditOverlayModal');
+ });
+ it('should handle handleActionClick based on download action', async () => {
+ const { Wrapper } = getReduxStoreWithActionsListener({});
+
+ const {
+ result: {
+ current: { handleActionClick },
+ },
+ } = renderHook(() => useUserOverlayActions(overlayFixture), {
+ wrapper: Wrapper,
+ });
+
+ const windowOpenMock = jest.spyOn(window, 'open').mockImplementation();
+
+ await act(() => {
+ handleActionClick('Download');
+ });
+
+ expect(windowOpenMock).toHaveBeenCalledWith(
+ `${BASE_API_URL}/${apiPath.downloadOverlay(overlayFixture.idObject)}`,
+ '_blank',
+ );
+ });
+ it('should throw Error if handleActionClick action is not valid', async () => {
+ const { Wrapper } = getReduxStoreWithActionsListener({});
+
+ const {
+ result: {
+ current: { handleActionClick },
+ },
+ } = renderHook(() => useUserOverlayActions(overlayFixture), {
+ wrapper: Wrapper,
+ });
+
+ expect(() => handleActionClick('Wrong Action')).toThrow('Wrong Action is not valid');
+ });
+});
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/hooks/useUserOverlayActions.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/hooks/useUserOverlayActions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1b10cb09b23152180c8789be7a4dbf37e1ae7a4b
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/hooks/useUserOverlayActions.ts
@@ -0,0 +1,39 @@
+import { BASE_API_URL } from '@/constants';
+import { apiPath } from '@/redux/apiPath';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { openEditOverlayModal } from '@/redux/modal/modal.slice';
+import { MapOverlay } from '@/types/models';
+import { ACTION_TYPES } from '../UserOverlayActions.constants';
+
+type UseUserOverlayActionsReturn = {
+ handleActionClick: (action: string) => void;
+};
+
+export const useUserOverlayActions = (overlay: MapOverlay): UseUserOverlayActionsReturn => {
+ const dispatch = useAppDispatch();
+
+ const handleDownloadOverlay = (): void => {
+ window.open(`${BASE_API_URL}/${apiPath.downloadOverlay(overlay.idObject)}`, '_blank');
+ };
+
+ const handleEditOverlay = (): void => {
+ dispatch(openEditOverlayModal(overlay));
+ };
+
+ const handleActionClick = (action: string): void => {
+ switch (action) {
+ case ACTION_TYPES.DOWNLOAD:
+ handleDownloadOverlay();
+ break;
+ case ACTION_TYPES.EDIT:
+ handleEditOverlay();
+ break;
+ default:
+ throw new Error(`${action} is not valid`);
+ }
+ };
+
+ return {
+ handleActionClick,
+ };
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/index.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ebaabbff8fbc3d71d4f6a9142dcf2ddf3eb8f46
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayActions/index.ts
@@ -0,0 +1 @@
+export { UserOverlayActions } from './UserOverlayActions.component';
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayInfo/UserOverlayInfo.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayInfo/UserOverlayInfo.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..78dff20cd2f87dc290da3ff75d77af02dfa316c6
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayInfo/UserOverlayInfo.component.tsx
@@ -0,0 +1,32 @@
+/* eslint-disable no-magic-numbers */
+import { twMerge } from 'tailwind-merge';
+import React, { useMemo } from 'react';
+import { Icon } from '@/shared/Icon';
+
+type UserOverlayInfoProps = {
+ description: string;
+ name: string;
+};
+
+export const UserOverlayInfo = ({ description, name }: UserOverlayInfoProps): React.ReactNode => {
+ const isOverflowPossibility = useMemo(() => name.length > 25, [name]);
+
+ return (
+ <div className="flex items-center gap-x-2.5">
+ <span className="text-sm">{name}</span>
+
+ <div className="group relative" data-testid="info">
+ <Icon name="info" className="h-4 w-4 fill-black" />
+
+ <div
+ className={twMerge(
+ 'absolute bottom-0 left-0 top-auto z-20 hidden min-w-[200px] max-w-xs rounded-lg bg-white px-3 py-4 drop-shadow-md group-hover:block',
+ isOverflowPossibility && 'min-w-[100px] max-w-[200px]',
+ )}
+ >
+ <p className="text-xs">{description}</p>
+ </div>
+ </div>
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayListItem.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayListItem.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e96e8751115186f741bafd321277d9a0fb993965
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/UserOverlayListItem.component.tsx
@@ -0,0 +1,62 @@
+import { Button } from '@/shared/Button';
+import { MapOverlay } from '@/types/models';
+import { twMerge } from 'tailwind-merge';
+import Image from 'next/image';
+import spinnerIcon from '@/assets/vectors/icons/spinner.svg';
+import { useOverlay } from '../../../hooks/useOverlay';
+import { UserOverlayActions } from './UserOverlayActions';
+import { UserOverlayInfo } from './UserOverlayInfo/UserOverlayInfo.component';
+import { useDragAndDrop } from './hooks/useDragAndDrop';
+
+type OverlayListItemProps = {
+ index: number;
+ moveUserOverlay: (dragIndex: number, hoverIndex: number) => void;
+ userOverlay: MapOverlay;
+ updateUserOverlaysOrder: () => void;
+};
+
+export const UserOverlayListItem = ({
+ index,
+ moveUserOverlay,
+ userOverlay,
+ updateUserOverlaysOrder,
+}: OverlayListItemProps): JSX.Element => {
+ const { toggleOverlay, isOverlayActive, isOverlayLoading } = useOverlay(userOverlay.idObject);
+ const { dragRef, dropRef, isDragging } = useDragAndDrop({
+ onDrop: updateUserOverlaysOrder,
+ onHover: moveUserOverlay,
+ index,
+ });
+
+ return (
+ <li
+ ref={node => dragRef(dropRef(node))}
+ className={twMerge(
+ 'flex flex-row flex-nowrap items-center justify-between overflow-visible py-4 pl-10 pr-5',
+ isDragging ? 'opacity-0' : 'opacity-100',
+ )}
+ >
+ <UserOverlayInfo description={userOverlay.description} name={userOverlay.name} />
+ <div className="flex flex-row flex-nowrap items-center">
+ <Button
+ variantStyles="ghost"
+ className="mr-4 max-h-8 flex-none gap-1.5"
+ onClick={toggleOverlay}
+ data-testid="toggle-overlay-button"
+ >
+ {isOverlayLoading && (
+ <Image
+ src={spinnerIcon}
+ alt="spinner icon"
+ height={12}
+ width={12}
+ className="animate-spin"
+ />
+ )}
+ {isOverlayActive || isOverlayLoading ? 'Disable' : 'View'}
+ </Button>
+ <UserOverlayActions overlay={userOverlay} />
+ </div>
+ </li>
+ );
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/hooks/useDragAndDrop.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/hooks/useDragAndDrop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e3eebc9b1cd5ed60ab25411efb8e581a5161135
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/hooks/useDragAndDrop.ts
@@ -0,0 +1,51 @@
+/* eslint-disable no-param-reassign */
+import { ConnectDragSource, ConnectDropTarget, useDrag, useDrop } from 'react-dnd';
+
+const ITEM_TYPE = 'card';
+
+type UseDragAndDropProps = {
+ index: number;
+ onHover: (dragIndex: number, hoverIndex: number) => void;
+ onDrop: () => void;
+};
+
+type UseDragAndDropReturn = {
+ isDragging: boolean;
+ dragRef: ConnectDragSource;
+ dropRef: ConnectDropTarget;
+};
+
+export const useDragAndDrop = ({
+ index,
+ onDrop,
+ onHover,
+}: UseDragAndDropProps): UseDragAndDropReturn => {
+ const [{ isDragging }, dragRef] = useDrag({
+ type: ITEM_TYPE,
+ item: { index },
+ collect: monitor => ({
+ isDragging: monitor.isDragging(),
+ }),
+ });
+
+ const [, dropRef] = useDrop({
+ accept: ITEM_TYPE,
+ hover: (item: { index: number }) => {
+ const dragIndex = item.index;
+ const hoverIndex = index;
+
+ onHover(dragIndex, hoverIndex);
+
+ item.index = hoverIndex;
+ },
+ drop() {
+ onDrop();
+ },
+ });
+
+ return {
+ isDragging,
+ dragRef,
+ dropRef,
+ };
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/index.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1950f98f4a85ba30819bc6a4a09ee28a4e2e8e43
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlayListItem/index.ts
@@ -0,0 +1 @@
+export { UserOverlayListItem } from './UserOverlayListItem.component';
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.component.test.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1174b330a03faa1d38a7ae3b3fb93b4682bc0b3f
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.component.test.tsx
@@ -0,0 +1,345 @@
+/* eslint-disable no-magic-numbers */
+import { render, screen } from '@testing-library/react';
+import { StoreType } from '@/redux/store';
+import {
+ InitialStoreState,
+ getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { overlayFixture, overlaysFixture } from '@/models/fixtures/overlaysFixture';
+import { apiPath } from '@/redux/apiPath';
+import { DEFAULT_ERROR } from '@/constants/errors';
+import { act } from 'react-dom/test-utils';
+import { BASE_API_URL } from '@/constants';
+import { mockNetworkResponse } from '@/utils/mockNetworkResponse';
+import { HttpStatusCode } from 'axios';
+import { OVERLAYS_INITIAL_STATE_MOCK } from '@/redux/overlays/overlays.mock';
+import { MODAL_INITIAL_STATE_MOCK } from '@/redux/modal/modal.mock';
+import { UserOverlaysWithoutGroup } from './UserOverlaysWithoutGroup.component';
+
+const mockedAxiosClient = mockNetworkResponse();
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+ return (
+ render(
+ <Wrapper>
+ <UserOverlaysWithoutGroup />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('UserOverlaysWithoutGroup - component', () => {
+ it('should render list of overlays', async () => {
+ mockedAxiosClient
+ .onGet(apiPath.getAllUserOverlaysByCreatorQuery({ creator: 'test', publicOverlay: false }))
+ .reply(HttpStatusCode.Ok, overlaysFixture);
+ renderComponent({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: overlaysFixture,
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ });
+
+ const withoutGroupTitle = screen.getByText('Without group');
+
+ expect(withoutGroupTitle).toBeVisible();
+
+ await act(() => {
+ withoutGroupTitle.click();
+ });
+
+ for (let index = 0; index < overlaysFixture.length; index += 1) {
+ const overlay = overlaysFixture[index];
+ expect(screen.getByText(overlay.name)).toBeVisible();
+ }
+ });
+
+ it('should display loading message if fetching user overlays is pending', async () => {
+ mockedAxiosClient
+ .onGet(apiPath.getAllUserOverlaysByCreatorQuery({ creator: 'test', publicOverlay: false }))
+ .reply(HttpStatusCode.Ok, overlaysFixture);
+
+ renderComponent({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
+ });
+
+ expect(screen.getByText('Loading...')).toBeInTheDocument();
+ });
+
+ it('should display functioning action types list after click', async () => {
+ renderComponent({
+ modal: MODAL_INITIAL_STATE_MOCK,
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: overlaysFixture,
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ });
+
+ const withoutGroupTitle = screen.getByText('Without group');
+
+ expect(withoutGroupTitle).toBeVisible();
+
+ await act(() => {
+ withoutGroupTitle.click();
+ });
+
+ const actionsButton = screen.getAllByTestId('actions-button');
+
+ const firstActionsButton = actionsButton[0];
+
+ expect(firstActionsButton).toBeVisible();
+
+ await act(() => {
+ firstActionsButton.click();
+ });
+
+ expect(screen.getByText('Download')).toBeVisible();
+ expect(screen.getByText('Edit')).toBeVisible();
+ });
+ it('should display overlay description on info icon hover/click', async () => {
+ mockedAxiosClient
+ .onGet(apiPath.getAllUserOverlaysByCreatorQuery({ creator: 'test', publicOverlay: false }))
+ .reply(HttpStatusCode.Ok, [overlayFixture]);
+ renderComponent({
+ modal: MODAL_INITIAL_STATE_MOCK,
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: [overlayFixture],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ });
+
+ const withoutGroupTitle = screen.getByText('Without group');
+
+ expect(withoutGroupTitle).toBeVisible();
+
+ await act(() => {
+ withoutGroupTitle.click();
+ });
+
+ const info = screen.getByTestId('info');
+
+ expect(info).toBeVisible();
+
+ await act(() => {
+ info.click();
+ });
+
+ expect(screen.getByText(overlayFixture.description)).toBeVisible();
+ });
+ it('should change state to display edit overlay modal after edit action click', async () => {
+ const { store } = renderComponent({
+ modal: MODAL_INITIAL_STATE_MOCK,
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: overlaysFixture,
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ });
+
+ const withoutGroupTitle = screen.getByText('Without group');
+
+ expect(withoutGroupTitle).toBeVisible();
+
+ await act(() => {
+ withoutGroupTitle.click();
+ });
+
+ const actionsButton = screen.getAllByTestId('actions-button');
+
+ const firstActionsButton = actionsButton[0];
+
+ expect(firstActionsButton).toBeVisible();
+
+ await act(() => {
+ firstActionsButton.click();
+ });
+
+ const editAction = screen.getByText('Edit');
+
+ expect(editAction).toBeVisible();
+
+ await act(() => {
+ editAction.click();
+ });
+
+ const { modalName, isOpen } = store.getState().modal;
+
+ expect(modalName).toBe('edit-overlay');
+ expect(isOpen).toBe(true);
+ });
+ it('should display propert text for toggle overlay button', async () => {
+ renderComponent({
+ modal: MODAL_INITIAL_STATE_MOCK,
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: [overlayFixture],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ overlayBioEntity: {
+ data: [],
+ overlaysId: [],
+ },
+ });
+
+ const withoutGroupTitle = screen.getByText('Without group');
+
+ expect(withoutGroupTitle).toBeVisible();
+
+ await act(() => {
+ withoutGroupTitle.click();
+ });
+
+ const toggleOverlayButton = screen.getByTestId('toggle-overlay-button');
+
+ expect(toggleOverlayButton).toBeVisible();
+
+ await act(() => {
+ toggleOverlayButton.click();
+ });
+
+ expect(screen.getByTestId('toggle-overlay-button')).toHaveTextContent('Disable');
+ });
+ it('should call window.open with download link after download action click', async () => {
+ renderComponent({
+ modal: MODAL_INITIAL_STATE_MOCK,
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: [overlayFixture],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ });
+
+ const withoutGroupTitle = screen.getByText('Without group');
+
+ expect(withoutGroupTitle).toBeVisible();
+
+ await act(() => {
+ withoutGroupTitle.click();
+ });
+
+ const actionButton = screen.getByTestId('actions-button');
+
+ await act(() => {
+ actionButton.click();
+ });
+
+ const windowOpenMock = jest.spyOn(window, 'open').mockImplementation();
+
+ const downloadButton = screen.getByText('Download');
+ expect(downloadButton).toBeVisible();
+
+ await act(() => {
+ downloadButton.click();
+ });
+
+ expect(windowOpenMock).toHaveBeenCalledWith(
+ `${BASE_API_URL}/${apiPath.downloadOverlay(overlayFixture.idObject)}`,
+ '_blank',
+ );
+ });
+ it('should display spinner icon if user overlay is loading', async () => {
+ const OVERLAY_ID = overlayFixture.idObject;
+ renderComponent({
+ modal: MODAL_INITIAL_STATE_MOCK,
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: [overlayFixture],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ overlayBioEntity: {
+ data: {
+ [OVERLAY_ID]: {},
+ },
+ overlaysId: [OVERLAY_ID],
+ },
+ });
+
+ const withoutGroupTitle = screen.getByText('Without group');
+
+ expect(withoutGroupTitle).toBeVisible();
+
+ await act(() => {
+ withoutGroupTitle.click();
+ });
+
+ expect(screen.getByAltText('spinner icon')).toBeVisible();
+ expect(screen.getByText('Disable')).toBeVisible();
+ });
+});
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad61cc51b83e80675de64cddaf2e163b9d9b48c1
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.component.tsx
@@ -0,0 +1,49 @@
+import {
+ Accordion,
+ AccordionItem,
+ AccordionItemButton,
+ AccordionItemHeading,
+ AccordionItemPanel,
+} from '@/shared/Accordion';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { UserOverlayListItem } from './UserOverlayListItem';
+import { useUserOverlays } from './hooks/useUserOverlays';
+
+export const UserOverlaysWithoutGroup = (): React.ReactNode => {
+ const { moveUserOverlayListItem, updateUserOverlaysOrder, isPending, userOverlaysList } =
+ useUserOverlays();
+
+ return (
+ <DndProvider backend={HTML5Backend}>
+ <div className="mt-2.5">
+ <Accordion allowZeroExpanded>
+ <AccordionItem className="border-b-0">
+ <AccordionItemHeading>
+ <AccordionItemButton className="px-6 text-sm font-semibold">
+ Without group
+ </AccordionItemButton>
+ </AccordionItemHeading>
+ <AccordionItemPanel>
+ {isPending ? (
+ <span className="py-4 pl-10 pr-5">Loading...</span>
+ ) : (
+ <ul>
+ {userOverlaysList?.map((userOverlay, index) => (
+ <UserOverlayListItem
+ moveUserOverlay={moveUserOverlayListItem}
+ key={userOverlay.idObject}
+ index={index}
+ userOverlay={userOverlay}
+ updateUserOverlaysOrder={updateUserOverlaysOrder}
+ />
+ ))}
+ </ul>
+ )}
+ </AccordionItemPanel>
+ </AccordionItem>
+ </Accordion>
+ </div>
+ </DndProvider>
+ );
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.utils.test.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c07bab617c8bcb8d8d65ce44031e06f8f6fab6e
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.utils.test.ts
@@ -0,0 +1,230 @@
+/* eslint-disable no-magic-numbers */
+import { MapOverlay } from '@/types/models';
+import { moveArrayElement } from './UserOverlaysWithoutGroup.utils';
+
+const INPUT_ARRAY: MapOverlay[] = [
+ {
+ name: 'Overlay1',
+ description: 'Description1',
+ type: 'Type1',
+ googleLicenseConsent: true,
+ creator: 'Creator1',
+ genomeType: 'GenomeType1',
+ genomeVersion: 'GenomeVersion1',
+ idObject: 1,
+ publicOverlay: false,
+ order: 1,
+ },
+ {
+ name: 'Overlay2',
+ description: 'Description2',
+ type: 'Type2',
+ googleLicenseConsent: false,
+ creator: 'Creator2',
+ genomeType: 'GenomeType2',
+ genomeVersion: 'GenomeVersion2',
+ idObject: 2,
+ publicOverlay: true,
+ order: 2,
+ },
+ {
+ name: 'Overlay3',
+ description: 'Description3',
+ type: 'Type3',
+ googleLicenseConsent: true,
+ creator: 'Creator3',
+ genomeType: 'GenomeType3',
+ genomeVersion: 'GenomeVersion3',
+ idObject: 3,
+ publicOverlay: false,
+ order: 3,
+ },
+];
+
+describe('moveArrayElement', () => {
+ it('should move an element down in the array', () => {
+ const expectedResult: MapOverlay[] = [
+ {
+ name: 'Overlay1',
+ description: 'Description1',
+ type: 'Type1',
+ googleLicenseConsent: true,
+ creator: 'Creator1',
+ genomeType: 'GenomeType1',
+ genomeVersion: 'GenomeVersion1',
+ idObject: 1,
+ publicOverlay: false,
+ order: 1,
+ },
+ {
+ name: 'Overlay3',
+ description: 'Description3',
+ type: 'Type3',
+ googleLicenseConsent: true,
+ creator: 'Creator3',
+ genomeType: 'GenomeType3',
+ genomeVersion: 'GenomeVersion3',
+ idObject: 3,
+ publicOverlay: false,
+ order: 3,
+ },
+ {
+ name: 'Overlay2',
+ description: 'Description2',
+ type: 'Type2',
+ googleLicenseConsent: false,
+ creator: 'Creator2',
+ genomeType: 'GenomeType2',
+ genomeVersion: 'GenomeVersion2',
+ idObject: 2,
+ publicOverlay: true,
+ order: 2,
+ },
+ ];
+
+ const result = moveArrayElement(INPUT_ARRAY, 1, 2);
+
+ expect(result).toEqual(expectedResult);
+ });
+
+ it('should move an element up in the array', () => {
+ const expectedResult: MapOverlay[] = [
+ {
+ name: 'Overlay1',
+ description: 'Description1',
+ type: 'Type1',
+ googleLicenseConsent: true,
+ creator: 'Creator1',
+ genomeType: 'GenomeType1',
+ genomeVersion: 'GenomeVersion1',
+ idObject: 1,
+ publicOverlay: false,
+ order: 1,
+ },
+ {
+ name: 'Overlay3',
+ description: 'Description3',
+ type: 'Type3',
+ googleLicenseConsent: true,
+ creator: 'Creator3',
+ genomeType: 'GenomeType3',
+ genomeVersion: 'GenomeVersion3',
+ idObject: 3,
+ publicOverlay: false,
+ order: 3,
+ },
+ {
+ name: 'Overlay2',
+ description: 'Description2',
+ type: 'Type2',
+ googleLicenseConsent: false,
+ creator: 'Creator2',
+ genomeType: 'GenomeType2',
+ genomeVersion: 'GenomeVersion2',
+ idObject: 2,
+ publicOverlay: true,
+ order: 2,
+ },
+ ];
+
+ const result = moveArrayElement(INPUT_ARRAY, 2, 1);
+
+ expect(result).toEqual(expectedResult);
+ });
+
+ it('should handle moving an element to the beginning of the array', () => {
+ const expectedResult: MapOverlay[] = [
+ {
+ name: 'Overlay3',
+ description: 'Description3',
+ type: 'Type3',
+ googleLicenseConsent: true,
+ creator: 'Creator3',
+ genomeType: 'GenomeType3',
+ genomeVersion: 'GenomeVersion3',
+ idObject: 3,
+ publicOverlay: false,
+ order: 3,
+ },
+ {
+ name: 'Overlay1',
+ description: 'Description1',
+ type: 'Type1',
+ googleLicenseConsent: true,
+ creator: 'Creator1',
+ genomeType: 'GenomeType1',
+ genomeVersion: 'GenomeVersion1',
+ idObject: 1,
+ publicOverlay: false,
+ order: 1,
+ },
+ {
+ name: 'Overlay2',
+ description: 'Description2',
+ type: 'Type2',
+ googleLicenseConsent: false,
+ creator: 'Creator2',
+ genomeType: 'GenomeType2',
+ genomeVersion: 'GenomeVersion2',
+ idObject: 2,
+ publicOverlay: true,
+ order: 2,
+ },
+ ];
+
+ const result = moveArrayElement(INPUT_ARRAY, 2, 0);
+
+ expect(result).toEqual(expectedResult);
+ });
+
+ it('should handle moving an element to the end of the array', () => {
+ const expectedResult: MapOverlay[] = [
+ {
+ name: 'Overlay2',
+ description: 'Description2',
+ type: 'Type2',
+ googleLicenseConsent: false,
+ creator: 'Creator2',
+ genomeType: 'GenomeType2',
+ genomeVersion: 'GenomeVersion2',
+ idObject: 2,
+ publicOverlay: true,
+ order: 2,
+ },
+ {
+ name: 'Overlay3',
+ description: 'Description3',
+ type: 'Type3',
+ googleLicenseConsent: true,
+ creator: 'Creator3',
+ genomeType: 'GenomeType3',
+ genomeVersion: 'GenomeVersion3',
+ idObject: 3,
+ publicOverlay: false,
+ order: 3,
+ },
+ {
+ name: 'Overlay1',
+ description: 'Description1',
+ type: 'Type1',
+ googleLicenseConsent: true,
+ creator: 'Creator1',
+ genomeType: 'GenomeType1',
+ genomeVersion: 'GenomeVersion1',
+ idObject: 1,
+ publicOverlay: false,
+ order: 1,
+ },
+ ];
+
+ const result = moveArrayElement(INPUT_ARRAY, 0, 2);
+
+ expect(result).toEqual(expectedResult);
+ });
+
+ it('should handle out-of-bounds indices gracefully', () => {
+ const result = moveArrayElement(INPUT_ARRAY, 5, 1);
+
+ expect(result).toEqual(INPUT_ARRAY);
+ });
+});
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.utils.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ce68cd3642b76b3c6e63657c40b024772a3f1b6
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/UserOverlaysWithoutGroup.utils.ts
@@ -0,0 +1,19 @@
+/* eslint-disable no-magic-numbers */
+import { MapOverlay } from '@/types/models';
+
+export const moveArrayElement = (
+ arr: MapOverlay[],
+ dragIndex: number,
+ hoverIndex: number,
+): MapOverlay[] => {
+ const arrayClone = [...arr];
+
+ const lastIndex = arr.length - 1;
+ if (hoverIndex > lastIndex || dragIndex > lastIndex) return arrayClone;
+
+ const [removedElement] = arrayClone.splice(dragIndex, 1);
+
+ arrayClone.splice(hoverIndex, 0, removedElement);
+
+ return arrayClone;
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/hooks/useUserOverlays.test.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/hooks/useUserOverlays.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..230d5c13df247dd24c121257ad495dfa93a908f3
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/hooks/useUserOverlays.test.ts
@@ -0,0 +1,204 @@
+/* eslint-disable no-magic-numbers */
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { renderHook, waitFor } from '@testing-library/react';
+import { DEFAULT_ERROR } from '@/constants/errors';
+import { overlayFixture, overlaysFixture } from '@/models/fixtures/overlaysFixture';
+import { mockNetworkResponse } from '@/utils/mockNetworkResponse';
+import { apiPath } from '@/redux/apiPath';
+import { HttpStatusCode } from 'axios';
+import { act } from 'react-dom/test-utils';
+import { OVERLAYS_INITIAL_STATE_MOCK } from '@/redux/overlays/overlays.mock';
+import { useUserOverlays } from './useUserOverlays';
+
+const mockedAxiosClient = mockNetworkResponse();
+
+describe('useUserOverlays', () => {
+ it('should fetch user overlays on mount if login exists', async () => {
+ mockedAxiosClient
+ .onGet(
+ apiPath.getAllUserOverlaysByCreatorQuery({
+ publicOverlay: false,
+ creator: 'test',
+ }),
+ )
+ .reply(HttpStatusCode.Ok, overlaysFixture);
+
+ const { Wrapper, store } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
+ });
+
+ renderHook(() => useUserOverlays(), {
+ wrapper: Wrapper,
+ });
+
+ const actions = store.getActions();
+ const firstAction = actions[0];
+
+ expect(firstAction.meta.arg).toBe('test');
+ expect(firstAction.type).toBe('overlays/getAllUserOverlaysByCreator/pending');
+
+ await waitFor(() => {
+ expect(actions[1].type).toBe('overlays/getAllUserOverlaysByCreator/fulfilled');
+ });
+ });
+ it('should not fetch user overlays on mount if login does not exist', async () => {
+ const { Wrapper, store } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: false,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: null,
+ },
+ overlays: OVERLAYS_INITIAL_STATE_MOCK,
+ });
+
+ const {
+ result: {
+ current: { userOverlaysList },
+ },
+ } = renderHook(() => useUserOverlays(), {
+ wrapper: Wrapper,
+ });
+
+ const actions = store.getActions();
+ const firstAction = actions[0];
+
+ expect(firstAction).toBeUndefined();
+ expect(userOverlaysList).toEqual([]);
+ });
+ it('should store fetched user overlays to userOverlaysList state', () => {
+ mockedAxiosClient
+ .onGet(
+ apiPath.getAllUserOverlaysByCreatorQuery({
+ publicOverlay: false,
+ creator: 'test',
+ }),
+ )
+ .reply(HttpStatusCode.Ok, overlaysFixture);
+
+ const { Wrapper } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: overlaysFixture,
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ });
+
+ const {
+ result: {
+ current: { userOverlaysList },
+ },
+ } = renderHook(() => useUserOverlays(), {
+ wrapper: Wrapper,
+ });
+
+ expect(userOverlaysList).toEqual(overlaysFixture);
+ });
+ it('should move user overlay list item on order change', async () => {
+ const FIRST_USER_OVERLAY = overlayFixture;
+ const SECOND_USER_OVERLAY = overlayFixture;
+ mockedAxiosClient
+ .onGet(
+ apiPath.getAllUserOverlaysByCreatorQuery({
+ publicOverlay: false,
+ creator: 'test',
+ }),
+ )
+ .reply(HttpStatusCode.Ok, [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY]);
+
+ const { Wrapper } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ });
+
+ const {
+ result: {
+ current: { moveUserOverlayListItem, userOverlaysList },
+ },
+ } = renderHook(() => useUserOverlays(), {
+ wrapper: Wrapper,
+ });
+
+ await act(() => {
+ moveUserOverlayListItem(0, 1);
+ });
+
+ expect(userOverlaysList).toEqual([SECOND_USER_OVERLAY, FIRST_USER_OVERLAY]);
+ });
+ it('calls updateOverlays on calling updateUserOverlaysOrder', async () => {
+ const FIRST_USER_OVERLAY = { ...overlayFixture, order: 1, idObject: 12 };
+ const SECOND_USER_OVERLAY = { ...overlayFixture, order: 2, idObject: 92 };
+ mockedAxiosClient
+ .onGet(
+ apiPath.getAllUserOverlaysByCreatorQuery({
+ publicOverlay: false,
+ creator: 'test',
+ }),
+ )
+ .reply(HttpStatusCode.Ok, [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY]);
+
+ const { Wrapper, store } = getReduxStoreWithActionsListener({
+ user: {
+ authenticated: true,
+ loading: 'succeeded',
+ error: DEFAULT_ERROR,
+ login: 'test',
+ },
+ overlays: {
+ ...OVERLAYS_INITIAL_STATE_MOCK,
+ userOverlays: {
+ data: [FIRST_USER_OVERLAY, SECOND_USER_OVERLAY],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ },
+ });
+
+ const {
+ result: {
+ current: { moveUserOverlayListItem, updateUserOverlaysOrder },
+ },
+ } = renderHook(() => useUserOverlays(), {
+ wrapper: Wrapper,
+ });
+
+ await act(() => {
+ moveUserOverlayListItem(0, 1);
+ });
+
+ updateUserOverlaysOrder();
+
+ const actions = store.getActions();
+ expect(actions[1].type).toBe('overlays/getAllUserOverlaysByCreator/fulfilled');
+
+ const secondAction = actions[2];
+ expect(secondAction.type).toBe('overlays/updateOverlays/pending');
+ });
+});
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/hooks/useUserOverlays.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/hooks/useUserOverlays.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2fe3ee559c9022bf6c05bd336dccbba7c8ae8bc2
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/hooks/useUserOverlays.ts
@@ -0,0 +1,71 @@
+/* eslint-disable no-magic-numbers */
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import {
+ loadingUserOverlaysSelector,
+ userOverlaysDataSelector,
+} from '@/redux/overlays/overlays.selectors';
+import { getAllUserOverlaysByCreator, updateOverlays } from '@/redux/overlays/overlays.thunks';
+import { loginUserSelector } from '@/redux/user/user.selectors';
+import { MapOverlay } from '@/types/models';
+import { useEffect, useState } from 'react';
+import { moveArrayElement } from '../UserOverlaysWithoutGroup.utils';
+
+type UseUserOverlaysReturn = {
+ isPending: boolean;
+ userOverlaysList: MapOverlay[];
+ moveUserOverlayListItem: (dragIndex: number, hoverIndex: number) => void;
+ updateUserOverlaysOrder: () => void;
+};
+
+export const useUserOverlays = (): UseUserOverlaysReturn => {
+ const dispatch = useAppDispatch();
+ const login = useAppSelector(loginUserSelector);
+ const [userOverlaysList, setUserOverlaysList] = useState<MapOverlay[]>([]);
+ const userOverlays = useAppSelector(userOverlaysDataSelector);
+ const loadingUserOverlays = useAppSelector(loadingUserOverlaysSelector);
+ const isPending = loadingUserOverlays === 'pending';
+
+ useEffect(() => {
+ if (login) {
+ dispatch(getAllUserOverlaysByCreator(login));
+ }
+ }, [login, dispatch]);
+
+ useEffect(() => {
+ if (userOverlays) {
+ setUserOverlaysList(userOverlays);
+ }
+ }, [userOverlays]);
+
+ const moveUserOverlayListItem = (dragIndex: number, hoverIndex: number): void => {
+ const updatedUserOverlays = moveArrayElement(userOverlaysList, dragIndex, hoverIndex);
+ setUserOverlaysList(updatedUserOverlays);
+ };
+
+ const updateUserOverlaysOrder = (): void => {
+ const reorderedUserOverlays = [];
+ if (!userOverlays) return;
+
+ for (let index = 0; index < userOverlays.length; index += 1) {
+ const userOverlay = userOverlays[index];
+ const newOrderedUserOverlay = {
+ ...userOverlaysList[index],
+ order: index + 1,
+ };
+
+ if (userOverlay.idObject !== newOrderedUserOverlay.idObject) {
+ reorderedUserOverlays.push(newOrderedUserOverlay);
+ }
+ }
+
+ dispatch(updateOverlays(reorderedUserOverlays));
+ };
+
+ return {
+ moveUserOverlayListItem,
+ updateUserOverlaysOrder,
+ isPending,
+ userOverlaysList,
+ };
+};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/index.ts b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8de206dcdfc757c2d7e20091aa14c03f835620f
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/UserOverlays/UserOverlaysWithoutGroup/index.ts
@@ -0,0 +1 @@
+export { UserOverlaysWithoutGroup } from './UserOverlaysWithoutGroup.component';
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.test.ts b/src/components/Map/Drawer/OverlaysDrawer/hooks/useEmptyBackground.test.ts
similarity index 100%
rename from src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.test.ts
rename to src/components/Map/Drawer/OverlaysDrawer/hooks/useEmptyBackground.test.ts
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.ts b/src/components/Map/Drawer/OverlaysDrawer/hooks/useEmptyBackground.ts
similarity index 100%
rename from src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.ts
rename to src/components/Map/Drawer/OverlaysDrawer/hooks/useEmptyBackground.ts
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useOverlay.ts b/src/components/Map/Drawer/OverlaysDrawer/hooks/useOverlay.ts
similarity index 79%
rename from src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useOverlay.ts
rename to src/components/Map/Drawer/OverlaysDrawer/hooks/useOverlay.ts
index d69c8df3d5755a839d24ef06a3cbca6f2d3f3e66..2016e292da4bb59d28659a4a0cff46535b1425a9 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useOverlay.ts
+++ b/src/components/Map/Drawer/OverlaysDrawer/hooks/useOverlay.ts
@@ -6,10 +6,13 @@ import {
} from '@/redux/overlayBioEntity/overlayBioEntity.selector';
import { removeOverlayBioEntityForGivenOverlay } from '@/redux/overlayBioEntity/overlayBioEntity.slice';
import { getOverlayBioEntityForAllModels } from '@/redux/overlayBioEntity/overlayBioEntity.thunk';
+import { BASE_API_URL } from '@/constants';
+import { apiPath } from '@/redux/apiPath';
import { useEmptyBackground } from './useEmptyBackground';
type UseOverlay = {
toggleOverlay: () => void;
+ downloadOverlay: () => void;
isOverlayActive: boolean;
isOverlayLoading: boolean;
};
@@ -29,5 +32,9 @@ export const useOverlay = (overlayId: number): UseOverlay => {
}
};
- return { toggleOverlay, isOverlayActive, isOverlayLoading };
+ const downloadOverlay = (): void => {
+ window.open(`${BASE_API_URL}/${apiPath.downloadOverlay(overlayId)}`, '_blank');
+ };
+
+ return { toggleOverlay, isOverlayActive, isOverlayLoading, downloadOverlay };
};
diff --git a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.test.tsx b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bfad37058b0e1ef0cb5c84863aaba191676735c1
--- /dev/null
+++ b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.test.tsx
@@ -0,0 +1,117 @@
+import { act } from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
+import {
+ InitialStoreState,
+ getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { projectFixture } from '@/models/fixtures/projectFixture';
+import { StoreType } from '@/redux/store';
+import { MODEL_WITH_DESCRIPTION } from '@/models/mocks/modelsMock';
+import { ProjectInfoDrawer } from './ProjectInfoDrawer.component';
+
+const MOCKED_STORE: InitialStoreState = {
+ project: {
+ data: { ...projectFixture },
+ loading: 'idle',
+ error: new Error(),
+ },
+ models: {
+ data: [MODEL_WITH_DESCRIPTION],
+ loading: 'idle',
+ error: new Error(),
+ },
+};
+
+const renderComponent = (initialStore?: InitialStoreState): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore(initialStore);
+ return (
+ render(
+ <Wrapper>
+ <ProjectInfoDrawer />
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('ProjectInfoDrawer', () => {
+ it('should render the project name', () => {
+ renderComponent(MOCKED_STORE);
+
+ expect(screen.getByText(projectFixture.name)).toBeInTheDocument();
+ });
+
+ it('should render the version', () => {
+ renderComponent(MOCKED_STORE);
+
+ expect(screen.getByText(projectFixture.version)).toBeInTheDocument();
+ });
+
+ it.skip('should render number of publications', () => {});
+ it.skip('should open publications modal when publications link is clicked', () => {});
+
+ it('should render the manual link', () => {
+ renderComponent(MOCKED_STORE);
+
+ const manualLink = screen.getByText(/Manual/i);
+ expect(manualLink).toBeInTheDocument();
+ expect(manualLink).toHaveAttribute('href', 'https://minerva.pages.uni.lu/doc/');
+ });
+
+ it('should render the disease link with name and href', async () => {
+ await act(() => {
+ renderComponent(MOCKED_STORE);
+ });
+
+ const diseaseLink = screen.getByText(/Disease:/i);
+ expect(diseaseLink).toBeInTheDocument();
+
+ const linkelement = screen.getByRole('link', { name: projectFixture.diseaseName });
+ expect(linkelement).toBeInTheDocument();
+ expect(linkelement).toHaveAttribute('href', projectFixture.disease.link);
+ });
+
+ it('should fetch diesease name when diseaseId is provided', async () => {
+ await act(() => {
+ renderComponent(MOCKED_STORE);
+ });
+
+ const organismLink = screen.getByText(/Organism:/i);
+ expect(organismLink).toBeInTheDocument();
+
+ const linkelement = screen.getByRole('link', { name: projectFixture.organismName });
+ expect(linkelement).toBeInTheDocument();
+ expect(linkelement).toHaveAttribute('href', projectFixture.organism.link);
+ });
+
+ it('should render the source file download button', () => {
+ renderComponent(MOCKED_STORE);
+
+ const downloadButton = screen.getByRole('link', { name: /Download source file/i });
+ expect(downloadButton).toBeInTheDocument();
+ expect(downloadButton).toHaveAttribute(
+ 'href',
+ 'localhost/projects/pdmap_appu_test:downloadSource',
+ );
+ expect(downloadButton).toHaveAttribute('download', 'sourceFile.txt');
+ });
+
+ it('should render the description when it exists', () => {
+ renderComponent(MOCKED_STORE);
+
+ const desc = screen.getByTestId('project-description');
+
+ expect(desc.innerHTML).toContain(
+ 'For information on content, functionalities and referencing the Parkinson\'s disease map, click <a href="http://pdmap.uni.lu" target="_blank">here</a>',
+ );
+ });
+
+ it.skip('should not render the description when it does not exist', () => {
+ renderComponent();
+
+ const descriptionElement = screen.queryByText('This is the project description.');
+ expect(descriptionElement).not.toBeInTheDocument();
+ });
+});
diff --git a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..318239811d4e068808bcf99f604719c7d577e9a7
--- /dev/null
+++ b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.component.tsx
@@ -0,0 +1,87 @@
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import {
+ diseaseNameSelector,
+ 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';
+
+export const ProjectInfoDrawer = (): JSX.Element => {
+ const diseaseName = useAppSelector(diseaseNameSelector);
+ const diseaseLink = useAppSelector(diseaseLinkSelector);
+ const organismLink = useAppSelector(organismLinkSelector);
+ const organismName = useAppSelector(organismNameSelector);
+ const projectName = useAppSelector(projectNameSelector);
+ const version = useAppSelector(versionSelector);
+ const description = useAppSelector(mainMapModelDescriptionSelector);
+
+ const sourceDownloadLink = window.location.hostname + apiPath.getSourceFile();
+
+ return (
+ <div data-testid="export-drawer" className="h-full max-h-full">
+ <DrawerHeading title="Project info" />
+ <div className="h-[calc(100%-93px)] max-h-[calc(100%-93px)] overflow-y-auto px-6">
+ <p className="mt-6">
+ Name: <span className="font-semibold">{projectName}</span>
+ </p>
+ <p className="mt-4">
+ 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">(21) publications</li>
+ <li className="mt-2 text-hyperlink-blue">
+ <a
+ href="https://minerva.pages.uni.lu/doc/"
+ target="_blank"
+ rel="noopener noreferrer"
+ className="hover:underline"
+ >
+ Manual
+ </a>
+ </li>
+ <li className="mt-2 text-hyperlink-blue">
+ <span className="text-black">Disease: </span>
+ <a
+ href={diseaseLink}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="hover:underline"
+ >
+ {diseaseName}
+ </a>
+ </li>
+ <li className="mt-2 text-hyperlink-blue">
+ <span className="text-black">Organism: </span>
+ <a
+ href={organismLink}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="hover:underline"
+ >
+ {organismName}
+ </a>
+ </li>
+ </ul>
+ <LinkButton className="mt-6" href={sourceDownloadLink} download="sourceFile.txt">
+ Download source file
+ </LinkButton>
+ {description && (
+ <div
+ data-testid="project-description"
+ className="anchor-tag mt-7 rounded-lg bg-cultured px-4 py-2"
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{ __html: description }}
+ />
+ )}
+ </div>
+ </div>
+ );
+};
diff --git a/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.styles.css b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..6713b0feb4859c99256590e371a0c2d36ec61dbc
--- /dev/null
+++ b/src/components/Map/Drawer/ProjectInfoDrawer/ProjectInfoDrawer.styles.css
@@ -0,0 +1,4 @@
+.anchor-tag a {
+ @apply text-hyperlink-blue;
+ @apply hover:underline;
+}
diff --git a/src/components/Map/Drawer/ProjectInfoDrawer/index.ts b/src/components/Map/Drawer/ProjectInfoDrawer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b1f2f893c4b3b2e9db56e5b99a455ce1dd3d084
--- /dev/null
+++ b/src/components/Map/Drawer/ProjectInfoDrawer/index.ts
@@ -0,0 +1 @@
+export { ProjectInfoDrawer } from './ProjectInfoDrawer.component';
diff --git a/src/models/compartmentPathwaySchema.ts b/src/models/compartmentPathwaySchema.ts
index b7f3cdc4e4939565b564c4961086db3f26879bd1..368ff17fc1f0fc77251f2bec1b917ec1f44c2858 100644
--- a/src/models/compartmentPathwaySchema.ts
+++ b/src/models/compartmentPathwaySchema.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-magic-numbers */
import { z } from 'zod';
export const compartmentPathwaySchema = z.object({
@@ -34,7 +35,7 @@ export const compartmentPathwayDetailsSchema = z.object({
hierarchyVisibilityLevel: z.string(),
homomultimer: z.null(),
hypothetical: z.null(),
- id: z.number(),
+ id: z.number().gt(-1),
initialAmount: z.null(),
initialConcentration: z.null(),
linkedSubmodel: z.null(),
diff --git a/src/models/exportSchema.ts b/src/models/exportSchema.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1e01113d88696d3fb4c79183d6d29a1b5c37f869
--- /dev/null
+++ b/src/models/exportSchema.ts
@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const exportNetworkchema = z.string();
+
+export const exportElementsSchema = z.string();
diff --git a/src/models/fixtures/configurationFixture.ts b/src/models/fixtures/configurationFixture.ts
index 56e19f7adcb59678ca144fd6a63bb741c8e51876..c27f2840b8ae3a037decb1b48dd99cce790a3d21 100644
--- a/src/models/fixtures/configurationFixture.ts
+++ b/src/models/fixtures/configurationFixture.ts
@@ -5,5 +5,5 @@ import { configurationSchema } from '../configurationSchema';
export const configurationFixture = createFixture(configurationSchema, {
seed: ZOD_SEED,
- array: { min: 1, max: 1 },
+ array: { min: 3, max: 3 },
});
diff --git a/src/models/fixtures/projectFixture.ts b/src/models/fixtures/projectFixture.ts
index 99e01bb36cb06a4dac15e20fbf116238a398a1f5..06868af6d5692a22d0e0e5d733508cf56357d781 100644
--- a/src/models/fixtures/projectFixture.ts
+++ b/src/models/fixtures/projectFixture.ts
@@ -1,7 +1,7 @@
import { ZOD_SEED } from '@/constants';
// eslint-disable-next-line import/no-extraneous-dependencies
import { createFixture } from 'zod-fixture';
-import { projectSchema } from '../project';
+import { projectSchema } from '../projectSchema';
export const projectFixture = createFixture(projectSchema, {
seed: ZOD_SEED,
diff --git a/src/models/mocks/modelsMock.ts b/src/models/mocks/modelsMock.ts
index 5254ae65fb2158e7e999e4cebce4229742aa139c..1684bf934c71c5ecf6fc05912aa57e41b7fbc1a2 100644
--- a/src/models/mocks/modelsMock.ts
+++ b/src/models/mocks/modelsMock.ts
@@ -475,3 +475,22 @@ export const CORE_PD_MODEL_MOCK: MapModel = {
minZoom: 2,
maxZoom: 9,
};
+
+export const MODEL_WITH_DESCRIPTION: MapModel = {
+ idObject: 5056,
+ width: 1975.0,
+ height: 1950.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description:
+ 'For information on content, functionalities and referencing the Parkinson\'s disease map, click <a href="http://pdmap.uni.lu" target="_blank">here</a>\n\n.',
+ name: 'MTOR AMPK signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 5,
+};
diff --git a/src/models/project.ts b/src/models/projectSchema.ts
similarity index 85%
rename from src/models/project.ts
rename to src/models/projectSchema.ts
index 844fe68047b7407e3a4e17152290f9778905ceb0..517d7b0c52d0684e7f3ef1c29f05955add86ab61 100644
--- a/src/models/project.ts
+++ b/src/models/projectSchema.ts
@@ -6,8 +6,9 @@ import { overviewImageView } from './overviewImageView';
export const projectSchema = z.object({
version: z.string(),
disease,
+ diseaseName: z.string(),
organism,
- idObject: z.number(),
+ organismName: z.string(),
status: z.string(),
directory: z.string(),
progress: z.number(),
@@ -15,7 +16,9 @@ export const projectSchema = z.object({
logEntries: z.boolean(),
name: z.string(),
sharedInMinervaNet: z.boolean(),
- owner: z.string(),
+ owner: z.object({
+ login: z.string(),
+ }),
projectId: z.string(),
creationDate: z.string(),
mapCanvasType: z.string(),
diff --git a/src/redux/apiPath.ts b/src/redux/apiPath.ts
index c417dbca7d69a89873f8726558be45836244617b..212660e5ee66c695f389fd6c49b7168b6ec78ecb 100644
--- a/src/redux/apiPath.ts
+++ b/src/redux/apiPath.ts
@@ -44,4 +44,23 @@ export const apiPath = {
getCompartmentPathwayDetails: (ids: number[]): string =>
`projects/${PROJECT_ID}/models/*/bioEntities/elements/?id=${ids.join(',')}`,
sendCompartmentPathwaysIds: (): string => `projects/${PROJECT_ID}/models/*/bioEntities/elements/`,
+ downloadNetworkCsv: (): string =>
+ `projects/${PROJECT_ID}/models/*/bioEntities/reactions/:downloadCsv`,
+ getAllUserOverlaysByCreatorQuery: ({
+ publicOverlay,
+ creator,
+ }: {
+ publicOverlay: boolean;
+ creator: string;
+ }): string =>
+ `projects/${PROJECT_ID}/overlays/?creator=${creator}&publicOverlay=${String(publicOverlay)}`,
+ updateOverlay: (overlayId: number): string => `projects/${PROJECT_ID}/overlays/${overlayId}/`,
+ removeOverlay: (overlayId: number): string => `projects/pdmap_appu_test/overlays/${overlayId}/`,
+ downloadElementsCsv: (): string =>
+ `projects/${PROJECT_ID}/models/*/bioEntities/elements/:downloadCsv`,
+ downloadOverlay: (overlayId: number): string =>
+ `projects/${PROJECT_ID}/overlays/${overlayId}:downloadSource`,
+ getSourceFile: (): string => `/projects/${PROJECT_ID}:downloadSource`,
+ getMesh: (meshId: string): string => `mesh/${meshId}`,
+ getTaxonomy: (taxonomyId: string): string => `taxonomy/${taxonomyId}`,
};
diff --git a/src/redux/configuration/configuration.selectors.ts b/src/redux/configuration/configuration.selectors.ts
index 451590bbca72cf44ab73bec01501175c15f96612..e4bf178be216aea6ab1233b87fb06b7c2f152d6c 100644
--- a/src/redux/configuration/configuration.selectors.ts
+++ b/src/redux/configuration/configuration.selectors.ts
@@ -88,3 +88,8 @@ export const formatsHandlersSelector = createSelector(
};
},
);
+
+export const miramiTypesSelector = createSelector(
+ configurationMainSelector,
+ state => state?.miriamTypes,
+);
diff --git a/src/redux/export/export.mock.ts b/src/redux/export/export.mock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c17abce73156f1eb8a1ea32c3fda8d2e9fef392f
--- /dev/null
+++ b/src/redux/export/export.mock.ts
@@ -0,0 +1,18 @@
+import { ExportState } from './export.types';
+
+export const EXPORT_INITIAL_STATE_MOCK: ExportState = {
+ downloadNetwork: {
+ error: {
+ message: '',
+ name: '',
+ },
+ loading: 'idle',
+ },
+ downloadElements: {
+ error: {
+ message: '',
+ name: '',
+ },
+ loading: 'idle',
+ },
+};
diff --git a/src/redux/export/export.reducers.test.ts b/src/redux/export/export.reducers.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..894ee98a802339b948da3a12556716284b4aa41d
--- /dev/null
+++ b/src/redux/export/export.reducers.test.ts
@@ -0,0 +1,148 @@
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import {
+ ToolkitStoreWithSingleSlice,
+ createStoreInstanceUsingSliceReducer,
+} from '@/utils/createStoreInstanceUsingSliceReducer';
+import { HttpStatusCode } from 'axios';
+import { ExportState } from './export.types';
+import exportReducer from './export.slice';
+import { apiPath } from '../apiPath';
+import { downloadNetwork, downloadElements } from './export.thunks';
+
+const mockedAxiosClient = mockNetworkNewAPIResponse();
+
+const INITIAL_STATE: ExportState = {
+ downloadNetwork: {
+ loading: 'idle',
+ error: { name: '', message: '' },
+ },
+ downloadElements: {
+ loading: 'idle',
+ error: { name: '', message: '' },
+ },
+};
+
+describe('export reducer', () => {
+ global.URL.createObjectURL = jest.fn();
+ let store = {} as ToolkitStoreWithSingleSlice<ExportState>;
+ beforeEach(() => {
+ store = createStoreInstanceUsingSliceReducer('export', exportReducer);
+ });
+
+ it('should match initial state', () => {
+ const action = { type: 'unknown' };
+ expect(exportReducer(undefined, action)).toEqual(INITIAL_STATE);
+ });
+
+ it('should update store after successful downloadNetwork query', async () => {
+ mockedAxiosClient.onPost(apiPath.downloadNetworkCsv()).reply(HttpStatusCode.Ok, 'test');
+ await store.dispatch(
+ downloadNetwork({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+ const { loading } = store.getState().export.downloadNetwork;
+
+ expect(loading).toEqual('succeeded');
+ });
+
+ it('should update store on loading downloadNetwork query', async () => {
+ mockedAxiosClient.onPost(apiPath.downloadNetworkCsv()).reply(HttpStatusCode.Ok, 'test');
+ const downloadNetworkPromise = store.dispatch(
+ downloadNetwork({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+
+ const { loading } = store.getState().export.downloadNetwork;
+ expect(loading).toEqual('pending');
+
+ await downloadNetworkPromise;
+
+ const { loading: promiseFulfilled } = store.getState().export.downloadNetwork;
+
+ expect(promiseFulfilled).toEqual('succeeded');
+ });
+
+ it('should update store after failed downloadNetwork query', async () => {
+ mockedAxiosClient
+ .onPost(apiPath.downloadNetworkCsv())
+ .reply(HttpStatusCode.NotFound, undefined);
+ await store.dispatch(
+ downloadNetwork({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+ const { loading } = store.getState().export.downloadNetwork;
+
+ expect(loading).toEqual('failed');
+ });
+
+ it('should update store after successful downloadElements query', async () => {
+ mockedAxiosClient.onPost(apiPath.downloadElementsCsv()).reply(HttpStatusCode.Ok, 'test');
+ await store.dispatch(
+ downloadElements({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+ const { loading } = store.getState().export.downloadElements;
+
+ expect(loading).toEqual('succeeded');
+ });
+
+ it('should update store on loading downloadElements query', async () => {
+ mockedAxiosClient.onPost(apiPath.downloadElementsCsv()).reply(HttpStatusCode.Ok, 'test');
+ const downloadElementsPromise = store.dispatch(
+ downloadElements({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+
+ const { loading } = store.getState().export.downloadElements;
+ expect(loading).toEqual('pending');
+
+ await downloadElementsPromise;
+
+ const { loading: promiseFulfilled } = store.getState().export.downloadElements;
+
+ expect(promiseFulfilled).toEqual('succeeded');
+ });
+
+ it('should update store after failed downloadElements query', async () => {
+ mockedAxiosClient
+ .onPost(apiPath.downloadElementsCsv())
+ .reply(HttpStatusCode.NotFound, undefined);
+ await store.dispatch(
+ downloadElements({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+ const { loading } = store.getState().export.downloadElements;
+
+ expect(loading).toEqual('failed');
+ });
+});
diff --git a/src/redux/export/export.reducers.ts b/src/redux/export/export.reducers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..39ea3df45651233260da3b6b1603ce18abf33fa0
--- /dev/null
+++ b/src/redux/export/export.reducers.ts
@@ -0,0 +1,28 @@
+import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
+import { downloadNetwork, downloadElements } from './export.thunks';
+import { ExportState } from './export.types';
+
+export const downloadNetworkReducer = (builder: ActionReducerMapBuilder<ExportState>): void => {
+ builder.addCase(downloadNetwork.pending, state => {
+ state.downloadNetwork.loading = 'pending';
+ });
+ builder.addCase(downloadNetwork.fulfilled, state => {
+ state.downloadNetwork.loading = 'succeeded';
+ });
+ builder.addCase(downloadNetwork.rejected, state => {
+ state.downloadNetwork.loading = 'failed';
+ });
+};
+
+export const downloadElementsReducer = (builder: ActionReducerMapBuilder<ExportState>): void => {
+ builder.addCase(downloadElements.pending, state => {
+ state.downloadElements.loading = 'pending';
+ });
+ builder.addCase(downloadElements.fulfilled, state => {
+ state.downloadElements.loading = 'succeeded';
+ });
+ builder.addCase(downloadElements.rejected, state => {
+ state.downloadElements.loading = 'failed';
+ // TODO to discuss manage state of failure
+ });
+};
diff --git a/src/redux/export/export.slice.ts b/src/redux/export/export.slice.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b0774dd52b3c1ce33507be9366ff636425c02ed
--- /dev/null
+++ b/src/redux/export/export.slice.ts
@@ -0,0 +1,32 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { ExportState } from './export.types';
+import { downloadNetworkReducer, downloadElementsReducer } from './export.reducers';
+
+const initialState: ExportState = {
+ downloadNetwork: {
+ error: {
+ message: '',
+ name: '',
+ },
+ loading: 'idle',
+ },
+ downloadElements: {
+ error: {
+ message: '',
+ name: '',
+ },
+ loading: 'idle',
+ },
+};
+
+const exportSlice = createSlice({
+ name: 'export',
+ initialState,
+ reducers: {},
+ extraReducers: builder => {
+ downloadNetworkReducer(builder);
+ downloadElementsReducer(builder);
+ },
+});
+
+export default exportSlice.reducer;
diff --git a/src/redux/export/export.thunks.test.ts b/src/redux/export/export.thunks.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..baad92cad09cdd06c7b68b7e3929a0d89780bcbe
--- /dev/null
+++ b/src/redux/export/export.thunks.test.ts
@@ -0,0 +1,99 @@
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import { HttpStatusCode } from 'axios';
+import {
+ ToolkitStoreWithSingleSlice,
+ createStoreInstanceUsingSliceReducer,
+} from '@/utils/createStoreInstanceUsingSliceReducer';
+import { apiPath } from '../apiPath';
+import { ExportState } from './export.types';
+import exportReducer from './export.slice';
+import { downloadNetwork, downloadElements } from './export.thunks';
+
+const mockedAxiosClient = mockNetworkNewAPIResponse();
+
+describe('export thunks', () => {
+ let store = {} as ToolkitStoreWithSingleSlice<ExportState>;
+ beforeEach(() => {
+ store = createStoreInstanceUsingSliceReducer('export', exportReducer);
+
+ global.URL.createObjectURL = jest.fn();
+ global.document.body.appendChild = jest.fn();
+ });
+ describe('downloadNetwork', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+ it('should download file when data response from API is valid', async () => {
+ mockedAxiosClient.onPost(apiPath.downloadNetworkCsv()).reply(HttpStatusCode.Ok, 'test');
+
+ await store.dispatch(
+ downloadNetwork({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+ expect(global.URL.createObjectURL).toHaveBeenCalledWith(new Blob(['test']));
+
+ expect(global.document.body.appendChild).toHaveBeenCalled();
+ });
+ it('should not download file when data response from API is not valid', async () => {
+ mockedAxiosClient
+ .onPost(apiPath.downloadNetworkCsv())
+ .reply(HttpStatusCode.NotFound, undefined);
+
+ await store.dispatch(
+ downloadNetwork({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+
+ expect(global.document.body.appendChild).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('downloadElements', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+ it('should download file when data response from API is valid', async () => {
+ mockedAxiosClient.onPost(apiPath.downloadElementsCsv()).reply(HttpStatusCode.Ok, 'test');
+
+ await store.dispatch(
+ downloadElements({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+ expect(global.URL.createObjectURL).toHaveBeenCalledWith(new Blob(['test']));
+
+ expect(global.document.body.appendChild).toHaveBeenCalled();
+ });
+ it('should not download file when data response from API is not valid', async () => {
+ mockedAxiosClient
+ .onPost(apiPath.downloadElementsCsv())
+ .reply(HttpStatusCode.NotFound, undefined);
+
+ await store.dispatch(
+ downloadElements({
+ annotations: [],
+ columns: [],
+ excludedCompartmentIds: [],
+ includedCompartmentIds: [],
+ submaps: [],
+ }),
+ );
+
+ expect(global.document.body.appendChild).not.toHaveBeenCalled();
+ });
+ });
+});
diff --git a/src/redux/export/export.thunks.ts b/src/redux/export/export.thunks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3a25cd8c40f76e9442d43fa354bd7877d29b4306
--- /dev/null
+++ b/src/redux/export/export.thunks.ts
@@ -0,0 +1,63 @@
+/* eslint-disable no-magic-numbers */
+import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { PROJECT_ID } from '@/constants';
+import { ExportNetwork, ExportElements } from '@/types/models';
+import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
+import { exportNetworkchema, exportElementsSchema } from '@/models/exportSchema';
+import { apiPath } from '../apiPath';
+import { downloadFileFromBlob } from './export.utils';
+
+type DownloadElementsBodyRequest = {
+ columns: string[];
+ submaps: number[];
+ annotations: string[];
+ includedCompartmentIds: number[];
+ excludedCompartmentIds: number[];
+};
+
+export const downloadElements = createAsyncThunk(
+ 'export/downloadElements',
+ async (data: DownloadElementsBodyRequest): Promise<void> => {
+ const response = await axiosInstanceNewAPI.post<ExportElements>(
+ apiPath.downloadElementsCsv(),
+ data,
+ {
+ withCredentials: true,
+ },
+ );
+
+ const isDataValid = validateDataUsingZodSchema(response.data, exportElementsSchema);
+
+ if (isDataValid) {
+ downloadFileFromBlob(response.data, `${PROJECT_ID}-elementExport.csv`);
+ }
+ },
+);
+
+type DownloadNetworkBodyRequest = {
+ columns: string[];
+ submaps: number[];
+ annotations: string[];
+ includedCompartmentIds: number[];
+ excludedCompartmentIds: number[];
+};
+
+export const downloadNetwork = createAsyncThunk(
+ 'export/downloadNetwork',
+ async (data: DownloadNetworkBodyRequest): Promise<void> => {
+ const response = await axiosInstanceNewAPI.post<ExportNetwork>(
+ apiPath.downloadNetworkCsv(),
+ data,
+ {
+ withCredentials: true,
+ },
+ );
+
+ const isDataValid = validateDataUsingZodSchema(response.data, exportNetworkchema);
+
+ if (isDataValid) {
+ downloadFileFromBlob(response.data, `${PROJECT_ID}-networkExport.csv`);
+ }
+ },
+);
diff --git a/src/redux/export/export.types.ts b/src/redux/export/export.types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cf53310214bbb1713690081f292f9c85284c5291
--- /dev/null
+++ b/src/redux/export/export.types.ts
@@ -0,0 +1,12 @@
+import { Loading } from '@/types/loadingState';
+
+export type ExportState = {
+ downloadNetwork: {
+ loading: Loading;
+ error: Error;
+ };
+ downloadElements: {
+ loading: Loading;
+ error: Error;
+ };
+};
diff --git a/src/redux/export/export.utils.ts b/src/redux/export/export.utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..60cba1fd90f1fe16a31e44a266f7bc8dd41206a6
--- /dev/null
+++ b/src/redux/export/export.utils.ts
@@ -0,0 +1,9 @@
+export const downloadFileFromBlob = (data: string, filename: string): void => {
+ const url = window.URL.createObjectURL(new Blob([data]));
+ const link = document.createElement('a');
+ link.href = url;
+ link.setAttribute('download', filename);
+ document.body.appendChild(link);
+ link.click();
+ link.remove();
+};
diff --git a/src/redux/modal/modal.constants.ts b/src/redux/modal/modal.constants.ts
index 8d8f27bd056e1fb05496918ffe10dc64725a3cb5..f0df9964801af60a083ceb6a773b4a7c8375c40f 100644
--- a/src/redux/modal/modal.constants.ts
+++ b/src/redux/modal/modal.constants.ts
@@ -11,4 +11,5 @@ export const MODAL_INITIAL_STATE: ModalState = {
molArtState: {
uniprotId: MOL_ART_UNIPROT_ID_DEFAULT,
},
+ editOverlayState: null,
};
diff --git a/src/redux/modal/modal.mock.ts b/src/redux/modal/modal.mock.ts
index 47c46050e50f3f1c4c1257ab11c6aee3315f0fec..22b833031510bdea484a479d1fc43faa52c66c74 100644
--- a/src/redux/modal/modal.mock.ts
+++ b/src/redux/modal/modal.mock.ts
@@ -11,4 +11,5 @@ export const MODAL_INITIAL_STATE_MOCK: ModalState = {
molArtState: {
uniprotId: MOL_ART_UNIPROT_ID_DEFAULT,
},
+ editOverlayState: null,
};
diff --git a/src/redux/modal/modal.reducers.ts b/src/redux/modal/modal.reducers.ts
index 78d5adeaf1cdfce8da14de32fcb17db2828b51a3..9308ed4df46feef22d3fdf449dc9683e81fb12e5 100644
--- a/src/redux/modal/modal.reducers.ts
+++ b/src/redux/modal/modal.reducers.ts
@@ -1,6 +1,6 @@
import { ModalName } from '@/types/modal';
import { PayloadAction } from '@reduxjs/toolkit';
-import { ModalState } from './modal.types';
+import { ModalState, OpenEditOverlayModalAction } from './modal.types';
export const openModalReducer = (state: ModalState, action: PayloadAction<ModalName>): void => {
state.isOpen = true;
@@ -50,3 +50,13 @@ export const setOverviewImageIdReducer = (
imageId: action.payload,
};
};
+
+export const openEditOverlayModalReducer = (
+ state: ModalState,
+ action: OpenEditOverlayModalAction,
+): void => {
+ state.isOpen = true;
+ state.modalName = 'edit-overlay';
+ state.modalTitle = action.payload.name;
+ state.editOverlayState = action.payload;
+};
diff --git a/src/redux/modal/modal.selector.ts b/src/redux/modal/modal.selector.ts
index 3ac54031a23b84c37876e56b2b8b6820da8a6203..c77223ea30f739d335170d382c9ecb524b6b6a49 100644
--- a/src/redux/modal/modal.selector.ts
+++ b/src/redux/modal/modal.selector.ts
@@ -15,3 +15,8 @@ export const currentSelectedBioEntityIdSelector = createSelector(
modalSelector,
modal => modal?.molArtState.uniprotId || MOL_ART_UNIPROT_ID_DEFAULT,
);
+
+export const currentEditedOverlaySelector = createSelector(
+ modalSelector,
+ modal => modal.editOverlayState,
+);
diff --git a/src/redux/modal/modal.slice.ts b/src/redux/modal/modal.slice.ts
index 84f1023141d74c975d7b2d879d9b51641439b344..c7b9feb6dbf9d8f7374ba547cd5277459356d7b5 100644
--- a/src/redux/modal/modal.slice.ts
+++ b/src/redux/modal/modal.slice.ts
@@ -7,6 +7,7 @@ import {
openOverviewImagesModalByIdReducer,
openMolArtModalByIdReducer,
setOverviewImageIdReducer,
+ openEditOverlayModalReducer,
} from './modal.reducers';
const modalSlice = createSlice({
@@ -19,6 +20,7 @@ const modalSlice = createSlice({
openMolArtModalById: openMolArtModalByIdReducer,
setOverviewImageId: setOverviewImageIdReducer,
openLoginModal: openLoginModalReducer,
+ openEditOverlayModal: openEditOverlayModalReducer,
},
});
@@ -29,6 +31,7 @@ export const {
setOverviewImageId,
openMolArtModalById,
openLoginModal,
+ openEditOverlayModal,
} = modalSlice.actions;
export default modalSlice.reducer;
diff --git a/src/redux/modal/modal.types.ts b/src/redux/modal/modal.types.ts
index a6ddf286297afd30e9c97a00edb1b531ad5fccf1..dfb5ca5d5c5a1f7b020b766bed4b7602e9cc2526 100644
--- a/src/redux/modal/modal.types.ts
+++ b/src/redux/modal/modal.types.ts
@@ -1,4 +1,6 @@
import { ModalName } from '@/types/modal';
+import { MapOverlay } from '@/types/models';
+import { PayloadAction } from '@reduxjs/toolkit';
export type OverviewImagesModalState = {
imageId?: number;
@@ -8,10 +10,17 @@ export type MolArtModalState = {
uniprotId?: string | undefined;
};
+export type EditOverlayState = MapOverlay | null;
+
export interface ModalState {
isOpen: boolean;
modalName: ModalName;
modalTitle: string;
overviewImagesState: OverviewImagesModalState;
molArtState: MolArtModalState;
+ editOverlayState: EditOverlayState;
}
+
+export type OpenEditOverlayModalPayload = MapOverlay;
+
+export type OpenEditOverlayModalAction = PayloadAction<OpenEditOverlayModalPayload>;
diff --git a/src/redux/models/models.selectors.ts b/src/redux/models/models.selectors.ts
index ab2cdc1631bc94bc2d67754860bbc2cab3a044ac..c113be0700fcc4be0e946f1e0de3241d04348fe0 100644
--- a/src/redux/models/models.selectors.ts
+++ b/src/redux/models/models.selectors.ts
@@ -34,3 +34,7 @@ export const modelByIdSelector = createSelector(
const MAIN_MAP = 0;
export const mainMapModelSelector = createSelector(modelsDataSelector, models => models[MAIN_MAP]);
+export const mainMapModelDescriptionSelector = createSelector(
+ modelsDataSelector,
+ models => models[MAIN_MAP].description,
+);
diff --git a/src/redux/overlayBioEntity/overlayBioEntity.thunk.ts b/src/redux/overlayBioEntity/overlayBioEntity.thunk.ts
index 8a09ebb08aca68fb46d2bb1a908fceb45c41bd56..555c1c87e768169ccba7b2454b313314320c7c9d 100644
--- a/src/redux/overlayBioEntity/overlayBioEntity.thunk.ts
+++ b/src/redux/overlayBioEntity/overlayBioEntity.thunk.ts
@@ -25,6 +25,9 @@ export const getOverlayBioEntity = createAsyncThunk(
}: GetOverlayBioEntityThunkProps): Promise<OverlayBioEntityRender[] | undefined> => {
const response = await axiosInstanceNewAPI.get<OverlayBioEntity[]>(
apiPath.getOverlayBioEntity({ overlayId, modelId }),
+ {
+ withCredentials: true,
+ },
);
const validOverlayBioEntities = getValidOverlayBioEntities(response.data);
diff --git a/src/redux/overlays/overlays.mock.ts b/src/redux/overlays/overlays.mock.ts
index 3e1557ba4e7604dd58aa294eeba2bd13ebced06e..7942bb040427bcc40b158893a6abab60cbdd27e8 100644
--- a/src/redux/overlays/overlays.mock.ts
+++ b/src/redux/overlays/overlays.mock.ts
@@ -10,6 +10,19 @@ export const OVERLAYS_INITIAL_STATE_MOCK: OverlaysState = {
loading: 'idle',
error: DEFAULT_ERROR,
},
+ userOverlays: {
+ data: [],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ updateOverlays: {
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ removeOverlay: {
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
};
export const PUBLIC_OVERLAYS_MOCK: MapOverlay[] = [
@@ -85,6 +98,19 @@ export const OVERLAYS_PUBLIC_FETCHED_STATE_MOCK: OverlaysState = {
loading: 'idle',
error: DEFAULT_ERROR,
},
+ userOverlays: {
+ data: [],
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ updateOverlays: {
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
+ removeOverlay: {
+ loading: 'idle',
+ error: DEFAULT_ERROR,
+ },
};
export const ADD_OVERLAY_MOCK = {
diff --git a/src/redux/overlays/overlays.reducers.test.ts b/src/redux/overlays/overlays.reducers.test.ts
index 2fe92673346f59194fc6f78a5a85443d31d0b273..90ee7771f73590345e165b792ac9ad5cfd2385f8 100644
--- a/src/redux/overlays/overlays.reducers.test.ts
+++ b/src/redux/overlays/overlays.reducers.test.ts
@@ -3,6 +3,7 @@ import { PROJECT_ID } from '@/constants';
import {
createdOverlayFileFixture,
createdOverlayFixture,
+ overlayFixture,
overlaysFixture,
uploadedOverlayFileContentFixture,
} from '@/models/fixtures/overlaysFixture';
@@ -15,7 +16,13 @@ import { HttpStatusCode } from 'axios';
import { waitFor } from '@testing-library/react';
import { apiPath } from '../apiPath';
import overlaysReducer from './overlays.slice';
-import { addOverlay, getAllPublicOverlaysByProjectId } from './overlays.thunks';
+import {
+ addOverlay,
+ getAllPublicOverlaysByProjectId,
+ getAllUserOverlaysByCreator,
+ removeOverlay,
+ updateOverlays,
+} from './overlays.thunks';
import { OverlaysState } from './overlays.types';
import { ADD_OVERLAY_MOCK } from './overlays.mock';
@@ -29,6 +36,19 @@ const INITIAL_STATE: OverlaysState = {
loading: 'idle',
error: { name: '', message: '' },
},
+ userOverlays: {
+ data: [],
+ loading: 'idle',
+ error: { name: '', message: '' },
+ },
+ updateOverlays: {
+ loading: 'idle',
+ error: { name: '', message: '' },
+ },
+ removeOverlay: {
+ loading: 'idle',
+ error: { name: '', message: '' },
+ },
};
describe('overlays reducer', () => {
@@ -142,4 +162,133 @@ describe('overlays reducer', () => {
expect(loading).toEqual('failed');
});
+
+ it('should update store when getAllUserOverlaysByCreator is pending', async () => {
+ mockedAxiosClient
+ .onGet(apiPath.getAllUserOverlaysByCreatorQuery({ creator: 'test', publicOverlay: false }))
+ .reply(HttpStatusCode.Ok, overlaysFixture);
+
+ await store.dispatch(getAllUserOverlaysByCreator('test'));
+ const { loading } = store.getState().overlays.userOverlays;
+
+ waitFor(() => {
+ expect(loading).toEqual('pending');
+ });
+ });
+
+ it('should update store after successful getAllUserOverlaysByCreator', async () => {
+ mockedAxiosClient
+ .onGet(apiPath.getAllUserOverlaysByCreatorQuery({ creator: 'test', publicOverlay: false }))
+ .reply(HttpStatusCode.Ok, overlaysFixture);
+
+ const getUserOverlaysPromise = store.dispatch(getAllUserOverlaysByCreator('test'));
+ const { loading } = store.getState().overlays.userOverlays;
+ expect(loading).toBe('pending');
+
+ await getUserOverlaysPromise;
+
+ const { loading: loadingFulfilled, error } = store.getState().overlays.userOverlays;
+ expect(loadingFulfilled).toEqual('succeeded');
+ expect(error).toEqual({ message: '', name: '' });
+ });
+ it('should update store after failed getAllUserOverlaysByCreator', async () => {
+ mockedAxiosClient
+ .onGet(apiPath.getAllUserOverlaysByCreatorQuery({ creator: 'test', publicOverlay: false }))
+ .reply(HttpStatusCode.NotFound, {});
+
+ await store.dispatch(getAllUserOverlaysByCreator('test'));
+ const { loading } = store.getState().overlays.userOverlays;
+ expect(loading).toEqual('failed');
+ });
+
+ it('should update store when updateOverlay is pending', async () => {
+ mockedAxiosClient
+ .onPatch(apiPath.updateOverlay(overlayFixture.idObject))
+ .reply(HttpStatusCode.Ok, overlayFixture);
+
+ store.dispatch(updateOverlays([overlayFixture]));
+ const { loading } = store.getState().overlays.updateOverlays;
+ expect(loading).toBe('pending');
+ });
+
+ it('should update store after successful updateOverlay', async () => {
+ mockedAxiosClient
+ .onPatch(apiPath.updateOverlay(overlayFixture.idObject))
+ .reply(HttpStatusCode.Ok, overlayFixture);
+
+ const updateUserOverlaysPromise = store.dispatch(updateOverlays([overlayFixture]));
+ const { loading } = store.getState().overlays.updateOverlays;
+ expect(loading).toBe('pending');
+
+ await updateUserOverlaysPromise;
+
+ const { loading: loadingFulfilled, error } = store.getState().overlays.updateOverlays;
+ expect(loadingFulfilled).toEqual('succeeded');
+ expect(error).toEqual({ message: '', name: '' });
+ });
+ it('should update store after failed updateOverlay', async () => {
+ mockedAxiosClient
+ .onPatch(apiPath.updateOverlay(overlayFixture.idObject))
+ .reply(HttpStatusCode.NotFound, {});
+
+ await store.dispatch(updateOverlays([overlayFixture]));
+
+ const { loading } = store.getState().overlays.updateOverlays;
+ expect(loading).toEqual('failed');
+ });
+
+ it('should update store when removeOverlay is pending', async () => {
+ mockedAxiosClient
+ .onDelete(apiPath.removeOverlay(overlayFixture.idObject))
+ .reply(HttpStatusCode.Ok, {});
+
+ store.dispatch(
+ removeOverlay({
+ login: 'test',
+ overlayId: overlayFixture.idObject,
+ }),
+ );
+ const { loading } = store.getState().overlays.removeOverlay;
+ expect(loading).toBe('pending');
+ });
+
+ it('should update store after successful removeOverlay', async () => {
+ mockedAxiosClient
+ .onDelete(apiPath.removeOverlay(overlayFixture.idObject))
+ .reply(HttpStatusCode.Ok, {});
+
+ const removeUserOverlaysPromise = store.dispatch(
+ removeOverlay({
+ login: 'test',
+ overlayId: overlayFixture.idObject,
+ }),
+ );
+ const { loading } = store.getState().overlays.removeOverlay;
+ expect(loading).toBe('pending');
+
+ await removeUserOverlaysPromise;
+
+ const { loading: loadingFulfilled, error } = store.getState().overlays.removeOverlay;
+ expect(loadingFulfilled).toEqual('succeeded');
+ expect(error).toEqual({ message: '', name: '' });
+ });
+ it('should update store after failed removeOverlay', async () => {
+ mockedAxiosClient
+ .onDelete(apiPath.removeOverlay(overlayFixture.idObject))
+ .reply(HttpStatusCode.NotFound, {});
+
+ const removeUserOverlaysPromise = store.dispatch(
+ removeOverlay({
+ login: 'test',
+ overlayId: overlayFixture.idObject,
+ }),
+ );
+ const { loading } = store.getState().overlays.removeOverlay;
+ expect(loading).toBe('pending');
+
+ await removeUserOverlaysPromise;
+
+ const { loading: loadingRejected } = store.getState().overlays.removeOverlay;
+ expect(loadingRejected).toEqual('failed');
+ });
});
diff --git a/src/redux/overlays/overlays.reducers.ts b/src/redux/overlays/overlays.reducers.ts
index d8f12eef16e426ef9c7aef040030fd20963a1842..50e75caab382672abb4551a077cc93a2f49f2021 100644
--- a/src/redux/overlays/overlays.reducers.ts
+++ b/src/redux/overlays/overlays.reducers.ts
@@ -1,5 +1,11 @@
import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
-import { addOverlay, getAllPublicOverlaysByProjectId } from './overlays.thunks';
+import {
+ addOverlay,
+ getAllPublicOverlaysByProjectId,
+ getAllUserOverlaysByCreator,
+ removeOverlay,
+ updateOverlays,
+} from './overlays.thunks';
import { OverlaysState } from './overlays.types';
export const getAllPublicOverlaysByProjectIdReducer = (
@@ -30,3 +36,45 @@ export const addOverlayReducer = (builder: ActionReducerMapBuilder<OverlaysState
// TODO to discuss manage state of failure
});
};
+
+export const getAllUserOverlaysByCreatorReducer = (
+ builder: ActionReducerMapBuilder<OverlaysState>,
+): void => {
+ builder.addCase(getAllUserOverlaysByCreator.pending, state => {
+ state.userOverlays.loading = 'pending';
+ });
+ builder.addCase(getAllUserOverlaysByCreator.fulfilled, (state, action) => {
+ state.userOverlays.data = action.payload;
+ state.userOverlays.loading = 'succeeded';
+ });
+ builder.addCase(getAllUserOverlaysByCreator.rejected, state => {
+ state.userOverlays.loading = 'failed';
+ // TODO to discuss manage state of failure
+ });
+};
+
+export const updateOverlaysReducer = (builder: ActionReducerMapBuilder<OverlaysState>): void => {
+ builder.addCase(updateOverlays.pending, state => {
+ state.updateOverlays.loading = 'pending';
+ });
+ builder.addCase(updateOverlays.fulfilled, state => {
+ state.updateOverlays.loading = 'succeeded';
+ });
+ builder.addCase(updateOverlays.rejected, state => {
+ state.updateOverlays.loading = 'failed';
+ // TODO to discuss manage state of failure
+ });
+};
+
+export const removeOverlayReducer = (builder: ActionReducerMapBuilder<OverlaysState>): void => {
+ builder.addCase(removeOverlay.pending, state => {
+ state.removeOverlay.loading = 'pending';
+ });
+ builder.addCase(removeOverlay.fulfilled, state => {
+ state.removeOverlay.loading = 'succeeded';
+ });
+ builder.addCase(removeOverlay.rejected, state => {
+ state.removeOverlay.loading = 'failed';
+ // TODO to discuss manage state of failure
+ });
+};
diff --git a/src/redux/overlays/overlays.selectors.ts b/src/redux/overlays/overlays.selectors.ts
index 03ee76e6f318c3e65bba58f0b8902e972eda95a8..38ba856745080b3c00303ddb5d85eb881c1de478 100644
--- a/src/redux/overlays/overlays.selectors.ts
+++ b/src/redux/overlays/overlays.selectors.ts
@@ -16,3 +16,15 @@ export const loadingAddOverlay = createSelector(
overlaysSelector,
state => state.addOverlay.loading,
);
+
+const userOverlaysSelector = createSelector(overlaysSelector, overlays => overlays.userOverlays);
+
+export const loadingUserOverlaysSelector = createSelector(
+ userOverlaysSelector,
+ state => state.loading,
+);
+
+export const userOverlaysDataSelector = createSelector(
+ userOverlaysSelector,
+ overlays => overlays.data,
+);
diff --git a/src/redux/overlays/overlays.slice.ts b/src/redux/overlays/overlays.slice.ts
index 5f49156af3e1b54b2074c7ae9b653e80f7488027..edb5f38140a3522677e9e818f0e545411365450a 100644
--- a/src/redux/overlays/overlays.slice.ts
+++ b/src/redux/overlays/overlays.slice.ts
@@ -1,5 +1,11 @@
import { createSlice } from '@reduxjs/toolkit';
-import { addOverlayReducer, getAllPublicOverlaysByProjectIdReducer } from './overlays.reducers';
+import {
+ addOverlayReducer,
+ getAllPublicOverlaysByProjectIdReducer,
+ getAllUserOverlaysByCreatorReducer,
+ removeOverlayReducer,
+ updateOverlaysReducer,
+} from './overlays.reducers';
import { OverlaysState } from './overlays.types';
const initialState: OverlaysState = {
@@ -10,6 +16,19 @@ const initialState: OverlaysState = {
loading: 'idle',
error: { name: '', message: '' },
},
+ userOverlays: {
+ data: [],
+ loading: 'idle',
+ error: { name: '', message: '' },
+ },
+ updateOverlays: {
+ loading: 'idle',
+ error: { name: '', message: '' },
+ },
+ removeOverlay: {
+ loading: 'idle',
+ error: { name: '', message: '' },
+ },
};
const overlaysState = createSlice({
@@ -19,6 +38,9 @@ const overlaysState = createSlice({
extraReducers: builder => {
getAllPublicOverlaysByProjectIdReducer(builder);
addOverlayReducer(builder);
+ getAllUserOverlaysByCreatorReducer(builder);
+ updateOverlaysReducer(builder);
+ removeOverlayReducer(builder);
},
});
diff --git a/src/redux/overlays/overlays.thunks.ts b/src/redux/overlays/overlays.thunks.ts
index 330e5ee98aba5a26299f21b8d56c9b29e16d2d1e..5335fa4d505dab679eab4e86262746569708c582 100644
--- a/src/redux/overlays/overlays.thunks.ts
+++ b/src/redux/overlays/overlays.thunks.ts
@@ -12,6 +12,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
import { z } from 'zod';
import { apiPath } from '../apiPath';
import { CHUNK_SIZE } from './overlays.constants';
+import { closeModal } from '../modal/modal.slice';
export const getAllPublicOverlaysByProjectId = createAsyncThunk(
'overlays/getAllPublicOverlaysByProjectId',
@@ -158,3 +159,66 @@ export const addOverlay = createAsyncThunk(
});
},
);
+
+export const getAllUserOverlaysByCreator = createAsyncThunk(
+ 'overlays/getAllUserOverlaysByCreator',
+ async (creator: string): Promise<MapOverlay[]> => {
+ const response = await axiosInstance(
+ apiPath.getAllUserOverlaysByCreatorQuery({
+ creator,
+ publicOverlay: false,
+ }),
+ {
+ withCredentials: true,
+ },
+ );
+
+ const isDataValid = validateDataUsingZodSchema(response.data, z.array(mapOverlay));
+
+ const sortByOrder = (userOverlayA: MapOverlay, userOverlayB: MapOverlay): number => {
+ if (userOverlayA.order > userOverlayB.order) return 1;
+ return -1;
+ };
+
+ const sortedUserOverlays = response.data.sort(sortByOrder);
+
+ return isDataValid ? sortedUserOverlays : [];
+ },
+);
+
+export const updateOverlays = createAsyncThunk(
+ 'overlays/updateOverlays',
+ async (userOverlays: MapOverlay[]): Promise<void> => {
+ const userOverlaysPromises = userOverlays.map(userOverlay =>
+ axiosInstance.patch<MapOverlay>(
+ apiPath.updateOverlay(userOverlay.idObject),
+ {
+ overlay: userOverlay,
+ },
+ {
+ withCredentials: true,
+ },
+ ),
+ );
+
+ const userOverlaysResponses = await Promise.all(userOverlaysPromises);
+
+ const updatedUserOverlays = userOverlaysResponses.map(
+ updatedUserOverlay => updatedUserOverlay.data,
+ );
+
+ validateDataUsingZodSchema(updatedUserOverlays, z.array(mapOverlay));
+ },
+);
+
+export const removeOverlay = createAsyncThunk(
+ 'overlays/removeOverlay',
+ async ({ overlayId, login }: { overlayId: number; login: string }, thunkApi): Promise<void> => {
+ await axiosInstance.delete(apiPath.removeOverlay(overlayId), {
+ withCredentials: true,
+ });
+
+ await thunkApi.dispatch(getAllUserOverlaysByCreator(login));
+ thunkApi.dispatch(closeModal());
+ },
+);
diff --git a/src/redux/overlays/overlays.types.ts b/src/redux/overlays/overlays.types.ts
index 15d4d813a5879a8e5986e1daf411eceda9f5ef55..98aabe67dc58dad408fe904006907b8eddcd7eb1 100644
--- a/src/redux/overlays/overlays.types.ts
+++ b/src/redux/overlays/overlays.types.ts
@@ -9,4 +9,26 @@ export type AddOverlayState = {
};
};
-export type OverlaysState = FetchDataState<MapOverlay[] | []> & AddOverlayState;
+export type UpdateOverlaysState = {
+ updateOverlays: {
+ loading: Loading;
+ error: Error;
+ };
+};
+
+export type RemoveOverlayState = {
+ removeOverlay: {
+ loading: Loading;
+ error: Error;
+ };
+};
+
+export type UserOverlays = {
+ userOverlays: FetchDataState<MapOverlay[] | []>;
+};
+
+export type OverlaysState = FetchDataState<MapOverlay[] | []> &
+ AddOverlayState &
+ UserOverlays &
+ UpdateOverlaysState &
+ RemoveOverlayState;
diff --git a/src/redux/project/project.reducers.test.ts b/src/redux/project/project.reducers.test.ts
index 28b9ef70063d829473534c60f51abe85143da8f9..744f725261ca8605d915b0da3474c3300526d24d 100644
--- a/src/redux/project/project.reducers.test.ts
+++ b/src/redux/project/project.reducers.test.ts
@@ -4,14 +4,14 @@ import {
ToolkitStoreWithSingleSlice,
createStoreInstanceUsingSliceReducer,
} from '@/utils/createStoreInstanceUsingSliceReducer';
-import { mockNetworkResponse } from '@/utils/mockNetworkResponse';
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
import { HttpStatusCode } from 'axios';
import { apiPath } from '../apiPath';
import projectReducer from './project.slice';
import { getProjectById } from './project.thunks';
import { ProjectState } from './project.types';
-const mockedAxiosClient = mockNetworkResponse();
+const mockedAxiosClient = mockNetworkNewAPIResponse();
const INITIAL_STATE: ProjectState = {
data: undefined,
diff --git a/src/redux/project/project.selectors.ts b/src/redux/project/project.selectors.ts
index c5ac340314f157036c59a0cc3cd648ae701582bd..6ae2769e7c06400bd86c6df411b73f800bba3d36 100644
--- a/src/redux/project/project.selectors.ts
+++ b/src/redux/project/project.selectors.ts
@@ -36,3 +36,30 @@ export const projectIdSelector = createSelector(
projectDataSelector,
projectData => projectData?.projectId,
);
+
+export const projectNameSelector = createSelector(
+ projectDataSelector,
+ projectData => projectData?.name,
+);
+
+export const diseaseNameSelector = createSelector(
+ projectDataSelector,
+ projectData => projectData?.diseaseName,
+);
+
+export const diseaseLinkSelector = createSelector(
+ projectDataSelector,
+ projectData => projectData?.disease.link,
+);
+
+export const organismLinkSelector = createSelector(
+ projectDataSelector,
+ projectData => projectData?.organism.link,
+);
+
+export const organismNameSelector = createSelector(
+ projectDataSelector,
+ projectData => projectData?.organismName,
+);
+
+export const versionSelector = createSelector(projectDataSelector, state => state?.version);
diff --git a/src/redux/project/project.thunks.ts b/src/redux/project/project.thunks.ts
index f3d9fbe26e2fc0d226a86be7b8762b39a938b777..649f867d87cf8581543559dc5f2c2a2911ea3388 100644
--- a/src/redux/project/project.thunks.ts
+++ b/src/redux/project/project.thunks.ts
@@ -1,5 +1,5 @@
-import { projectSchema } from '@/models/project';
-import { axiosInstance } from '@/services/api/utils/axiosInstance';
+import { projectSchema } from '@/models/projectSchema';
+import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
import { Project } from '@/types/models';
import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
import { createAsyncThunk } from '@reduxjs/toolkit';
@@ -8,7 +8,7 @@ import { apiPath } from '../apiPath';
export const getProjectById = createAsyncThunk(
'project/getProjectById',
async (id: string): Promise<Project | undefined> => {
- const response = await axiosInstance.get<Project>(apiPath.getProjectById(id));
+ const response = await axiosInstanceNewAPI.get<Project>(apiPath.getProjectById(id));
const isDataValid = validateDataUsingZodSchema(response.data, projectSchema);
diff --git a/src/redux/root/root.fixtures.ts b/src/redux/root/root.fixtures.ts
index a8494c467cedda636c3db0f9951d99325a9bc048..c236df284e59fbdba9e80a306213f18410e9cc67 100644
--- a/src/redux/root/root.fixtures.ts
+++ b/src/redux/root/root.fixtures.ts
@@ -19,6 +19,7 @@ import { RootState } from '../store';
import { USER_INITIAL_STATE_MOCK } from '../user/user.mock';
import { STATISTICS_STATE_INITIAL_MOCK } from '../statistics/statistics.mock';
import { COMPARTMENT_PATHWAYS_INITIAL_STATE_MOCK } from '../compartmentPathways/compartmentPathways.mock';
+import { EXPORT_INITIAL_STATE_MOCK } from '../export/export.mock';
export const INITIAL_STORE_STATE_MOCK: RootState = {
search: SEARCH_STATE_INITIAL_MOCK,
@@ -41,4 +42,5 @@ export const INITIAL_STORE_STATE_MOCK: RootState = {
legend: LEGEND_INITIAL_STATE_MOCK,
statistics: STATISTICS_STATE_INITIAL_MOCK,
compartmentPathways: COMPARTMENT_PATHWAYS_INITIAL_STATE_MOCK,
+ export: EXPORT_INITIAL_STATE_MOCK,
};
diff --git a/src/redux/statistics/statistics.selectors.ts b/src/redux/statistics/statistics.selectors.ts
index e0bb325940adba73600a3378ffff6d5ae979df8b..847e042f7d22fff19581cff553e59faf396a54fc 100644
--- a/src/redux/statistics/statistics.selectors.ts
+++ b/src/redux/statistics/statistics.selectors.ts
@@ -9,8 +9,3 @@ export const statisticsDataSelector = createSelector(
statisticsSelector,
statistics => statistics?.data,
);
-
-export const elementAnnotationsSelector = createSelector(
- statisticsDataSelector,
- statistics => statistics?.elementAnnotations,
-);
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 944288e8e5a21d046914ed7ad655a40bcda014f3..a945a7518a65a15740f4922027fc4eb864b3d1cd 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -26,6 +26,7 @@ import legendReducer from './legend/legend.slice';
import { mapListenerMiddleware } from './map/middleware/map.middleware';
import statisticsReducer from './statistics/statistics.slice';
import compartmentPathwaysReducer from './compartmentPathways/compartmentPathways.slice';
+import exportReducer from './export/export.slice';
export const reducers = {
search: searchReducer,
@@ -48,6 +49,7 @@ export const reducers = {
legend: legendReducer,
statistics: statisticsReducer,
compartmentPathways: compartmentPathwaysReducer,
+ export: exportReducer,
};
export const middlewares = [mapListenerMiddleware.middleware];
diff --git a/src/redux/user/user.reducers.ts b/src/redux/user/user.reducers.ts
index 56c847b9497038441472a5afc8bbb7ae5f488bf0..83618692cf8f791128420d955c3f4ae4068dac5c 100644
--- a/src/redux/user/user.reducers.ts
+++ b/src/redux/user/user.reducers.ts
@@ -7,9 +7,10 @@ export const loginReducer = (builder: ActionReducerMapBuilder<UserState>): void
.addCase(login.pending, state => {
state.loading = 'pending';
})
- .addCase(login.fulfilled, state => {
+ .addCase(login.fulfilled, (state, action) => {
state.authenticated = true;
state.loading = 'succeeded';
+ state.login = action.payload?.login || null;
})
.addCase(login.rejected, state => {
state.authenticated = false;
diff --git a/src/redux/user/user.selectors.ts b/src/redux/user/user.selectors.ts
index 5331af9df0173163e2383de42e0a2800a9414b15..026e5631ad9edff0fa196cc011273cf6fe410c45 100644
--- a/src/redux/user/user.selectors.ts
+++ b/src/redux/user/user.selectors.ts
@@ -5,3 +5,4 @@ export const userSelector = createSelector(rootSelector, state => state.user);
export const authenticatedUserSelector = createSelector(userSelector, state => state.authenticated);
export const loadingUserSelector = createSelector(userSelector, state => state.loading);
+export const loginUserSelector = createSelector(userSelector, state => state.login);
diff --git a/src/redux/user/user.thunks.ts b/src/redux/user/user.thunks.ts
index 3f4d97c26e526b7bdd779099340f5adae02231ea..95c567c2af83b31f62eb05c30d219f6f17bdb6af 100644
--- a/src/redux/user/user.thunks.ts
+++ b/src/redux/user/user.thunks.ts
@@ -3,6 +3,7 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
import { loginSchema } from '@/models/loginSchema';
import { sessionSchemaValid } from '@/models/sessionValidSchema';
+import { Login, SessionValid } from '@/types/models';
import { apiPath } from '../apiPath';
import { closeModal } from '../modal/modal.slice';
@@ -10,7 +11,7 @@ export const login = createAsyncThunk(
'user/login',
async (credentials: { login: string; password: string }, { dispatch }) => {
const searchParams = new URLSearchParams(credentials);
- const response = await axiosInstance.post(apiPath.postLogin(), searchParams, {
+ const response = await axiosInstance.post<Login>(apiPath.postLogin(), searchParams, {
withCredentials: true,
});
@@ -22,11 +23,11 @@ export const login = createAsyncThunk(
);
export const getSessionValid = createAsyncThunk('user/getSessionValid', async () => {
- const response = await axiosInstance.get(apiPath.getSessionValid(), {
+ const response = await axiosInstance.get<SessionValid>(apiPath.getSessionValid(), {
withCredentials: true,
});
const isDataValid = validateDataUsingZodSchema(response.data, sessionSchemaValid);
- return isDataValid ? response.data : undefined;
+ return isDataValid ? response.data.login : null;
});
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index 0dae32d43b3d4e3848f0dcbce4bbaebc30e6dab6..dd6d4decfbbe023e069d0ef06b80b088b2e3458d 100644
--- a/src/shared/Icon/Icon.component.tsx
+++ b/src/shared/Icon/Icon.component.tsx
@@ -18,6 +18,7 @@ import type { IconTypes } from '@/types/iconTypes';
import { LocationIcon } from './Icons/LocationIcon';
import { MaginfierZoomInIcon } from './Icons/MagnifierZoomIn';
import { MaginfierZoomOutIcon } from './Icons/MagnifierZoomOut';
+import { ThreeDotsIcon } from './Icons/ThreeDotsIcon';
export interface IconProps {
className?: string;
@@ -43,6 +44,7 @@ const icons = {
location: LocationIcon,
'magnifier-zoom-in': MaginfierZoomInIcon,
'magnifier-zoom-out': MaginfierZoomOutIcon,
+ 'three-dots': ThreeDotsIcon,
} as const;
export const Icon = ({ name, className = '', ...rest }: IconProps): JSX.Element => {
diff --git a/src/shared/Icon/Icons/ThreeDotsIcon.tsx b/src/shared/Icon/Icons/ThreeDotsIcon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..156e41e298f91f041e52b9573c2a3a85cf0e5735
--- /dev/null
+++ b/src/shared/Icon/Icons/ThreeDotsIcon.tsx
@@ -0,0 +1,27 @@
+interface ThreeDotsIconProps {
+ className?: string;
+}
+
+export const ThreeDotsIcon = ({ className }: ThreeDotsIconProps): JSX.Element => (
+ <svg
+ width="4"
+ height="22"
+ viewBox="0 0 4 22"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ className={className}
+ >
+ <path
+ d="M-8.74228e-08 11C-1.35705e-07 12.1046 0.89543 13 2 13C3.10457 13 4 12.1046 4 11C4 9.89543 3.10457 9 2 9C0.895431 9 -3.91405e-08 9.89543 -8.74228e-08 11Z"
+ fill="#070130"
+ />
+ <path
+ d="M-8.74228e-08 2C-1.35705e-07 3.10457 0.89543 4 2 4C3.10457 4 4 3.10457 4 2C4 0.89543 3.10457 -3.91405e-08 2 -8.74228e-08C0.895431 -1.35705e-07 -3.91405e-08 0.89543 -8.74228e-08 2Z"
+ fill="#070130"
+ />
+ <path
+ d="M-8.74228e-08 20C-1.35705e-07 21.1046 0.89543 22 2 22C3.10457 22 4 21.1046 4 20C4 18.8954 3.10457 18 2 18C0.895431 18 -3.91405e-08 18.8954 -8.74228e-08 20Z"
+ fill="#070130"
+ />
+ </svg>
+);
diff --git a/src/shared/LinkButton/LinkButton.component.test.tsx b/src/shared/LinkButton/LinkButton.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..90ecf3330e16275c91c06c1cd52b1ad4ce26ac76
--- /dev/null
+++ b/src/shared/LinkButton/LinkButton.component.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { LinkButton } from './LinkButton.component';
+
+describe('LinkButton', () => {
+ it('renders without crashing', () => {
+ render(<LinkButton>Test</LinkButton>);
+ expect(screen.getByText('Test')).toBeInTheDocument();
+ });
+
+ it('applies the primary variant by default', () => {
+ render(<LinkButton>Test</LinkButton>);
+ const button = screen.getByText('Test');
+ expect(button).toHaveClass(
+ 'bg-primary-500 text-white-pearl hover:bg-primary-600 active:bg-primary-700 disabled:bg-greyscale-700',
+ );
+ });
+
+ it('applies additional classes passed in', () => {
+ // eslint-disable-next-line tailwindcss/no-custom-classname
+ render(<LinkButton className="extra-class">Test</LinkButton>);
+ const button = screen.getByText('Test');
+ expect(button).toHaveClass('extra-class');
+ });
+
+ it('passes through additional props to the anchor element', () => {
+ render(<LinkButton data-testid="my-button">Test</LinkButton>);
+ const button = screen.getByTestId('my-button');
+ expect(button).toBeInTheDocument();
+ });
+});
diff --git a/src/shared/LinkButton/LinkButton.component.tsx b/src/shared/LinkButton/LinkButton.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f54a79ed83fe300e389143dedc87d59b27e8d90
--- /dev/null
+++ b/src/shared/LinkButton/LinkButton.component.tsx
@@ -0,0 +1,34 @@
+import { twMerge } from 'tailwind-merge';
+
+const variants = {
+ primary: {
+ link: 'bg-primary-500 text-white-pearl hover:bg-primary-600 active:bg-primary-700 disabled:bg-greyscale-700',
+ },
+} as const;
+
+type VariantStyle = keyof typeof variants;
+
+type LinkButtonProps = {
+ variant?: VariantStyle;
+ children: React.ReactNode;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export const LinkButton = ({
+ variant = 'primary',
+ className = '',
+ children,
+ ...props
+}: LinkButtonProps): JSX.Element => {
+ return (
+ <a
+ className={twMerge(
+ 'group flex w-fit items-center rounded-e rounded-s px-3 py-2 text-xs font-bold',
+ variants[variant].link,
+ className,
+ )}
+ {...props}
+ >
+ {children}
+ </a>
+ );
+};
diff --git a/src/shared/LinkButton/index.ts b/src/shared/LinkButton/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b57ca5cea9a7871e972b0907c426de44cc208476
--- /dev/null
+++ b/src/shared/LinkButton/index.ts
@@ -0,0 +1 @@
+export { LinkButton } from './LinkButton.component';
diff --git a/src/types/iconTypes.ts b/src/types/iconTypes.ts
index c125f09c0ea0f1cb06bb15da4037fd4d1f8e56bf..3083f71695a3744b6638705a7ec79805bd8703c9 100644
--- a/src/types/iconTypes.ts
+++ b/src/types/iconTypes.ts
@@ -16,4 +16,5 @@ export type IconTypes =
| 'location'
| 'magnifier-zoom-in'
| 'magnifier-zoom-out'
- | 'pin';
+ | 'pin'
+ | 'three-dots';
diff --git a/src/types/modal.ts b/src/types/modal.ts
index 763926937f9de43ed4ae16a957d75fc2a6069684..8afe715f0dbd3802fd30b3b4985721003c628230 100644
--- a/src/types/modal.ts
+++ b/src/types/modal.ts
@@ -1 +1 @@
-export type ModalName = 'none' | 'overview-images' | 'mol-art' | 'login';
+export type ModalName = 'none' | 'overview-images' | 'mol-art' | 'login' | 'edit-overlay';
diff --git a/src/types/models.ts b/src/types/models.ts
index 1504094a6797307b81ec57522cdd627fe7d36c0f..437fa8d6655cbdc71ea1d9ec155d965a20fed0fa 100644
--- a/src/types/models.ts
+++ b/src/types/models.ts
@@ -8,10 +8,11 @@ import {
compartmentPathwaySchema,
} from '@/models/compartmentPathwaySchema';
import { configurationOptionSchema } from '@/models/configurationOptionSchema';
-import { configurationSchema, formatSchema } from '@/models/configurationSchema';
+import { configurationSchema, formatSchema, miriamTypesSchema } from '@/models/configurationSchema';
import { disease } from '@/models/disease';
import { drugSchema } from '@/models/drugSchema';
import { elementSearchResult, elementSearchResultType } from '@/models/elementSearchResult';
+import { exportElementsSchema, exportNetworkchema } from '@/models/exportSchema';
import { lineSchema } from '@/models/lineSchema';
import { loginSchema } from '@/models/loginSchema';
import { mapBackground } from '@/models/mapBackground';
@@ -36,7 +37,7 @@ import {
overviewImageLinkModel,
} from '@/models/overviewImageLink';
import { overviewImageView } from '@/models/overviewImageView';
-import { projectSchema } from '@/models/project';
+import { projectSchema } from '@/models/projectSchema';
import { reactionSchema } from '@/models/reaction';
import { reactionLineSchema } from '@/models/reactionLineSchema';
import { referenceSchema } from '@/models/referenceSchema';
@@ -71,6 +72,7 @@ export type Login = z.infer<typeof loginSchema>;
export type ConfigurationOption = z.infer<typeof configurationOptionSchema>;
export type Configuration = z.infer<typeof configurationSchema>;
export type ConfigurationFormatSchema = z.infer<typeof formatSchema>;
+export type ConfigurationMiramiTypes = z.infer<typeof miriamTypesSchema>;
export type OverlayBioEntity = z.infer<typeof overlayBioEntitySchema>;
export type OverlayElementWithReaction = z.infer<typeof overlayElementWithReactionSchema>;
export type OverlayElementWithBioEntity = z.infer<typeof overlayElementWithBioEntitySchema>;
@@ -84,3 +86,5 @@ export type Color = z.infer<typeof colorSchema>;
export type Statistics = z.infer<typeof statisticsSchema>;
export type CompartmentPathway = z.infer<typeof compartmentPathwaySchema>;
export type CompartmentPathwayDetails = z.infer<typeof compartmentPathwayDetailsSchema>;
+export type ExportNetwork = z.infer<typeof exportNetworkchema>;
+export type ExportElements = z.infer<typeof exportElementsSchema>;
diff --git a/src/utils/initialize/useInitializeStore.test.ts b/src/utils/initialize/useInitializeStore.test.ts
index d1b7da08d0e98f26cc0fc4403efc1c333dfa877b..1a99f715fa58967978dc5b381962a660731e6ebf 100644
--- a/src/utils/initialize/useInitializeStore.test.ts
+++ b/src/utils/initialize/useInitializeStore.test.ts
@@ -9,13 +9,14 @@ import { modelsDataSelector } from '@/redux/models/models.selectors';
import { overlaysDataSelector } from '@/redux/overlays/overlays.selectors';
import { projectDataSelector } from '@/redux/project/project.selectors';
import { initDataLoadingInitialized } from '@/redux/root/init.selectors';
-import { mockNetworkResponse } from '@/utils/mockNetworkResponse';
+import { mockNetworkNewAPIResponse, mockNetworkResponse } from '@/utils/mockNetworkResponse';
import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
import { renderHook, waitFor } from '@testing-library/react';
import { HttpStatusCode } from 'axios';
import * as hook from './useInitializeStore';
const mockedAxiosClient = mockNetworkResponse();
+const mockedAxiosNEWApiClient = mockNetworkNewAPIResponse();
describe('useInitializeStore - hook', () => {
describe('when fired', () => {
@@ -24,7 +25,7 @@ describe('useInitializeStore - hook', () => {
mockedAxiosClient
.onGet(apiPath.getAllOverlaysByProjectIdQuery(PROJECT_ID, { publicOverlay: true }))
.reply(HttpStatusCode.Ok, overlaysFixture);
- mockedAxiosClient
+ mockedAxiosNEWApiClient
.onGet(apiPath.getProjectById(PROJECT_ID))
.reply(HttpStatusCode.Ok, projectFixture);
mockedAxiosClient
diff --git a/src/utils/query-manager/useReduxBusQueryManager.test.ts b/src/utils/query-manager/useReduxBusQueryManager.test.ts
index 77244318601a6d608b143772ca813e7e390e4eaf..c77f8f3fbccbb56fdf3ace53f190b29b6ca62598 100644
--- a/src/utils/query-manager/useReduxBusQueryManager.test.ts
+++ b/src/utils/query-manager/useReduxBusQueryManager.test.ts
@@ -29,6 +29,19 @@ describe('useReduxBusQueryManager - util', () => {
loading: 'idle' as Loading,
error: { name: '', message: '' },
},
+ userOverlays: {
+ data: [],
+ loading: 'idle' as Loading,
+ error: { name: '', message: '' },
+ },
+ updateOverlays: {
+ loading: 'idle' as Loading,
+ error: { name: '', message: '' },
+ },
+ removeOverlay: {
+ loading: 'idle' as Loading,
+ error: { name: '', message: '' },
+ },
};
const { Wrapper } = getReduxWrapperWithStore({
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 80376a72e62b6e23b6a7a7d560dee0650e4d5d92..a41549602c07c850668d40ae4b784fafdfb237bc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -29,6 +29,7 @@ const config: Config = {
purple: '#6400e3',
pink: '#f1009f',
'cetacean-blue': '#070130',
+ 'hyperlink-blue': '#0048ff',
},
height: {
'calc-drawer': 'calc(100% - 104px)',