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/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/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..1d44751caafad5060f8fb04e11880b6a1980497f 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 { 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,14 @@ import { DownloadElements } from './DownloadElements/DownloadElements';
import { ExportContext } from './ExportCompound.context';
import { getNetworkDownloadBodyRequest } from './utils/getNetworkBodyRequest';
import { getDownloadElementsBodyRequest } from './utils/getDownloadElementsBodyRequest';
+import { ELEMENTS_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,23 +28,17 @@ 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,
- ]);
+
+ dispatch(downloadElements(body));
+ }, [modelIds, annotations, includedCompartmentPathways, excludedCompartmentPathways, dispatch]);
const handleDownloadNetwork = useCallback(() => {
getNetworkDownloadBodyRequest();
@@ -52,8 +46,6 @@ export const Export = ({ children }: ExportProps): JSX.Element => {
const globalContextValue = useMemo(
() => ({
- setTypes,
- setColumns,
setAnnotations,
setIncludedCompartmentPathways,
setExcludedCompartmentPathways,
@@ -66,8 +58,6 @@ 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;
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..ea6f50ef6cfd1bc9e5fd3ae6f4d85f64110d4421
--- /dev/null
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/ExportCompound.constant.ts
@@ -0,0 +1,32 @@
+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',
+];
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/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..077e5e608f0cd3766121cb444d92bd5764dd4d1f 100644
--- a/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.ts
+++ b/src/components/Map/Drawer/ExportDrawer/ExportCompound/utils/getDownloadElementsBodyRequest.ts
@@ -1,35 +1,40 @@
import { CheckboxItem } from '../../CheckboxFilter/CheckboxFilter.component';
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[];
excludedCompartmentPathways: CheckboxItem[];
};
+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;
+};
+
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/Network/Network.component.tsx b/src/components/Map/Drawer/ExportDrawer/Network/Network.component.tsx
index 1438a0851f3581298f226532ff874bf44821a1b6..201ab2ba0fcc319c2258527eaef881a16a0bbfa8 100644
--- a/src/components/Map/Drawer/ExportDrawer/Network/Network.component.tsx
+++ b/src/components/Map/Drawer/ExportDrawer/Network/Network.component.tsx
@@ -1,12 +1,11 @@
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 />
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..da309fe92cc35e24158cadfd427599d5c2fb4c2b
--- /dev/null
+++ b/src/models/exportSchema.ts
@@ -0,0 +1,3 @@
+import { z } from 'zod';
+
+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/redux/apiPath.ts b/src/redux/apiPath.ts
index 0e0865418dfa8c9294787e5dd9fba9ed368ae1ea..b5f89ef4c09a2eae9d23efe646a9f6838c073dd3 100644
--- a/src/redux/apiPath.ts
+++ b/src/redux/apiPath.ts
@@ -44,6 +44,8 @@ export const apiPath = {
getCompartmentPathwayDetails: (ids: number[]): string =>
`projects/${PROJECT_ID}/models/*/bioEntities/elements/?id=${ids.join(',')}`,
sendCompartmentPathwaysIds: (): string => `projects/${PROJECT_ID}/models/*/bioEntities/elements/`,
+ 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`,
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..33684ff0044d28bfad2ea5565d1efb5db0fdbac4
--- /dev/null
+++ b/src/redux/export/export.mock.ts
@@ -0,0 +1,11 @@
+import { ExportState } from './export.types';
+
+export const EXPORT_INITIAL_STATE_MOCK: ExportState = {
+ 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..5c31d2291d336562a2d186b297bdf04cb6cb3827
--- /dev/null
+++ b/src/redux/export/export.reducers.test.ts
@@ -0,0 +1,88 @@
+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 { downloadElements } from './export.thunks';
+
+const mockedAxiosClient = mockNetworkNewAPIResponse();
+
+const INITIAL_STATE: ExportState = {
+ 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 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..ee043d29dc7ecd64a51adb35a1cffbed928439af
--- /dev/null
+++ b/src/redux/export/export.reducers.ts
@@ -0,0 +1,16 @@
+import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
+import { downloadElements } from './export.thunks';
+import { ExportState } from './export.types';
+
+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..1195f55f9d5204d66cd2d29c879e3d443812620f
--- /dev/null
+++ b/src/redux/export/export.slice.ts
@@ -0,0 +1,24 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { ExportState } from './export.types';
+import { downloadElementsReducer } from './export.reducers';
+
+const initialState: ExportState = {
+ downloadElements: {
+ error: {
+ message: '',
+ name: '',
+ },
+ loading: 'idle',
+ },
+};
+
+const exportSlice = createSlice({
+ name: 'export',
+ initialState,
+ reducers: {},
+ extraReducers: 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..0d77c9f55c2af9f2944bec93d1bac3ba27a96780
--- /dev/null
+++ b/src/redux/export/export.thunks.test.ts
@@ -0,0 +1,60 @@
+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 { 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('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..4b8559aeb6a76c0b1a9a778d642eff51a4c5ccf8
--- /dev/null
+++ b/src/redux/export/export.thunks.ts
@@ -0,0 +1,45 @@
+/* eslint-disable no-magic-numbers */
+import { axiosInstanceNewAPI } from '@/services/api/utils/axiosInstance';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { PROJECT_ID } from '@/constants';
+import { ExportElements } from '@/types/models';
+import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
+import { exportElementsSchema } from '@/models/exportSchema';
+import { apiPath } from '../apiPath';
+
+type DownloadElementsBodyRequest = {
+ columns: string[];
+ submaps: number[];
+ annotations: string[];
+ includedCompartmentIds: number[];
+ excludedCompartmentIds: number[];
+};
+
+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();
+};
+
+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`);
+ }
+ },
+);
diff --git a/src/redux/export/export.types.ts b/src/redux/export/export.types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35a5704c0d97183c8e129d6cb730c667934dd4d3
--- /dev/null
+++ b/src/redux/export/export.types.ts
@@ -0,0 +1,8 @@
+import { Loading } from '@/types/loadingState';
+
+export type ExportState = {
+ downloadElements: {
+ loading: Loading;
+ error: Error;
+ };
+};
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/types/models.ts b/src/types/models.ts
index 8ad656d412117837bce73441bdc0692900124fc4..63ff252959a080d56554c843e00ef11c4e764556 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 } from '@/models/exportSchema';
import { loginSchema } from '@/models/loginSchema';
import { mapBackground } from '@/models/mapBackground';
import {
@@ -64,6 +65,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 CreatedOverlayFile = z.infer<typeof createdOverlayFileSchema>;
export type UploadedOverlayFileContent = z.infer<typeof uploadedOverlayFileContentSchema>;
@@ -72,3 +74,4 @@ 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 ExportElements = z.infer<typeof exportElementsSchema>;