diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5658068f5953fd41e2e1dc507a6a37a178597ef9
--- /dev/null
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx
@@ -0,0 +1,66 @@
+import { StoreType } from '@/redux/store';
+import {
+ InitialStoreState,
+ getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { bioEntitiesContentFixture } from '@/models/fixtures/bioEntityContentsFixture';
+import { Accordion } from '@/shared/Accordion';
+import { MODELS_MOCK } from '@/models/mocks/modelsMock';
+import { BioEntitiesAccordion } from './BioEntitiesAccordion.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+ return (
+ render(
+ <Wrapper>
+ <Accordion>
+ <BioEntitiesAccordion />
+ </Accordion>
+ </Wrapper>,
+ ),
+ {
+ store,
+ }
+ );
+};
+
+describe('BioEntitiesAccordion - component', () => {
+ it('should display loading indicator when bioEntity search is pending', () => {
+ renderComponent({
+ bioEntity: {
+ data: undefined,
+ loading: 'pending',
+ error: { name: '', message: '' },
+ },
+ models: {
+ data: undefined,
+ loading: 'pending',
+ error: { name: '', message: '' },
+ },
+ });
+
+ expect(screen.getByText('Content (Loading...)')).toBeInTheDocument();
+ });
+
+ it('should render list of maps with number of entities after succeeded bio entity search', () => {
+ renderComponent({
+ bioEntity: {
+ data: bioEntitiesContentFixture,
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ models: {
+ data: MODELS_MOCK,
+ loading: 'succeeded',
+ error: { name: '', message: '' },
+ },
+ });
+
+ expect(screen.getByText('Content (10)')).toBeInTheDocument();
+ expect(screen.getByText('Core PD map (3)')).toBeInTheDocument();
+ expect(screen.getByText('Histamine signaling (4)')).toBeInTheDocument();
+ expect(screen.getByText('PRKN substrates (3)')).toBeInTheDocument();
+ });
+});
diff --git a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx
index 1fecf9a78fc3001ccafb6b6fd2f6c6921df64f61..e22fbd125666cb172457026aa31a97d0f172cfe4 100644
--- a/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx
+++ b/src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx
@@ -6,31 +6,34 @@ import {
} from '@/shared/Accordion';
import { BioEntitiesSubmapItem } from '@/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesSubmapItem';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import {
+ loadingBioEntityStatusSelector,
+ numberOfBioEntitiesPerModelSelector,
+ numberOfBioEntitiesSelector,
+} from '@/redux/bioEntity/bioEntity.selectors';
export const BioEntitiesAccordion = (): JSX.Element => {
- const entity = { mapName: 'main map', numberOfEntities: 21 };
+ const bioEntitiesNumber = useAppSelector(numberOfBioEntitiesSelector);
+ const bioEntitiesState = useAppSelector(loadingBioEntityStatusSelector);
+ const numberOfBioEntitiesPerModel = useAppSelector(numberOfBioEntitiesPerModelSelector);
+
return (
<AccordionItem>
<AccordionItemHeading>
- <AccordionItemButton>Content (2137)</AccordionItemButton>
+ <AccordionItemButton>
+ Content {bioEntitiesState === 'pending' && ' (Loading...)'}
+ {bioEntitiesState === 'succeeded' && ` (${bioEntitiesNumber})`}
+ </AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel className="">
- <BioEntitiesSubmapItem
- mapName={entity.mapName}
- numberOfEntities={entity.numberOfEntities}
- />
- <BioEntitiesSubmapItem
- mapName={entity.mapName}
- numberOfEntities={entity.numberOfEntities}
- />
- <BioEntitiesSubmapItem
- mapName={entity.mapName}
- numberOfEntities={entity.numberOfEntities}
- />
- <BioEntitiesSubmapItem
- mapName={entity.mapName}
- numberOfEntities={entity.numberOfEntities}
- />
+ {numberOfBioEntitiesPerModel.map(model => (
+ <BioEntitiesSubmapItem
+ key={model.modelName}
+ mapName={model.modelName}
+ numberOfEntities={model.numberOfEntities}
+ />
+ ))}
</AccordionItemPanel>
</AccordionItem>
);
diff --git a/src/constants/mocks.ts b/src/constants/mocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0ac3d873445962134f7929cbe477c384c04be75b
--- /dev/null
+++ b/src/constants/mocks.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-magic-numbers
+export const MODEL_IDS = [5052, 5053, 5054];
diff --git a/src/models/bioEntitySchema.ts b/src/models/bioEntitySchema.ts
index fc1e935aeec1d7408bf78e03aba7bb6a16905f64..ae92c4e49cd9d83cd8a312288ea8a31ecb302b38 100644
--- a/src/models/bioEntitySchema.ts
+++ b/src/models/bioEntitySchema.ts
@@ -32,7 +32,7 @@ export const bioEntitySchema = z.object({
transparencyLevel: z.string(),
synonyms: z.array(z.string()),
formerSymbols: z.array(z.string()),
- fullName: z.string(),
+ fullName: z.union([z.string(), z.null()]),
abbreviation: z.union([z.string(), z.null()]),
formula: z.union([z.string(), z.null()]),
glyph: z.union([glyphSchema, z.null()]),
diff --git a/src/models/fixtures/bioEntityContentsFixture.ts b/src/models/fixtures/bioEntityContentsFixture.ts
index 09fc894b35b14f223d06ac99cb43e72f4ff174cb..8c9396548099eeecb25895e0acb2c3a89d564565 100644
--- a/src/models/fixtures/bioEntityContentsFixture.ts
+++ b/src/models/fixtures/bioEntityContentsFixture.ts
@@ -1,14 +1,29 @@
+import { z } from 'zod';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createFixture, Fixture } from 'zod-fixture';
import { ZOD_SEED } from '@/constants';
import { bioEntityContentSchema } from '@/models/bioEntityContentSchema';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { createFixture } from 'zod-fixture';
+import { modelIdGenerator } from '@/models/generators/modelIdGenerator';
import { bioEntityResponseSchema } from '../bioEntityResponseSchema';
export const bioEntityResponseFixture = createFixture(bioEntityResponseSchema, {
seed: ZOD_SEED,
});
-export const bioEntityContentFixture = createFixture(bioEntityContentSchema, {
- seed: ZOD_SEED,
- array: { min: 1, max: 1 },
-});
+const bioEntityFixtureGenerator = new Fixture({ seed: ZOD_SEED }).extend([modelIdGenerator]);
+
+export const bioEntityContentFixture = bioEntityFixtureGenerator.fromSchema(
+ bioEntityContentSchema,
+ {
+ seed: ZOD_SEED,
+ array: { min: 1, max: 1 },
+ },
+);
+
+export const bioEntitiesContentFixture = bioEntityFixtureGenerator.fromSchema(
+ z.array(bioEntityContentSchema),
+ {
+ seed: ZOD_SEED,
+ array: { min: 10, max: 10 },
+ },
+);
diff --git a/src/models/fixtures/modelsFixture.ts b/src/models/fixtures/modelsFixture.ts
index 3d4e39e35e9ec6500ecf7759da7c3fa028f54c09..2911cb9fe70579530d08e7ebefbf7a4f22aa52a1 100644
--- a/src/models/fixtures/modelsFixture.ts
+++ b/src/models/fixtures/modelsFixture.ts
@@ -6,5 +6,5 @@ import { modelSchema } from '@/models/modelSchema';
export const modelsFixture = createFixture(z.array(modelSchema), {
seed: ZOD_SEED,
- array: { min: 2, max: 2 },
+ array: { min: 3, max: 3 },
});
diff --git a/src/models/generators/modelIdGenerator.ts b/src/models/generators/modelIdGenerator.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba143601d26f68375ec74f39a84bcd30b0b4fedc
--- /dev/null
+++ b/src/models/generators/modelIdGenerator.ts
@@ -0,0 +1,12 @@
+import { MODEL_IDS } from '@/constants/mocks';
+import { ZodNumber } from 'zod';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Generator } from 'zod-fixture';
+
+// model in bioEntity model is the same as idObject in model model
+export const modelIdGenerator = Generator({
+ schema: ZodNumber,
+ // eslint-disable-next-line no-magic-numbers
+ filter: ({ context }) => context.path.at(-1) === 'model',
+ output: ({ transform }) => transform.utils.random.from(MODEL_IDS),
+});
diff --git a/src/models/mocks/modelsMock.ts b/src/models/mocks/modelsMock.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8da35db44660f5e35e22bf912c015950a7fd5532
--- /dev/null
+++ b/src/models/mocks/modelsMock.ts
@@ -0,0 +1,405 @@
+import { Model } from '@/types/models';
+
+export const MODELS_MOCK: Model[] = [
+ {
+ idObject: 5053,
+ width: 26779.25,
+ height: 13503.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Core PD map',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 9,
+ },
+ {
+ idObject: 5052,
+ width: 3511.09375,
+ height: 1312.125,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Histamine signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 6,
+ },
+ {
+ idObject: 5054,
+ width: 1652.75,
+ height: 1171.9429798877356,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'PRKN substrates',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 5,
+ },
+ {
+ idObject: 5055,
+ width: 2473.8078571428596,
+ height: 1143.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Ubiquitin-proteasome system',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 6,
+ },
+ {
+ 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,
+ },
+ {
+ idObject: 5057,
+ width: 21838.0,
+ height: 10376.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: 'PI3K AKT signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 9,
+ },
+ {
+ idObject: 5058,
+ width: 5170.0,
+ height: 1535.1097689075634,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Axonal remodeling and CDK5 signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 7,
+ },
+ {
+ idObject: 5059,
+ width: 4556.0,
+ height: 2852.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: 'Cell death',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 7,
+ },
+ {
+ idObject: 5060,
+ width: 2500.0,
+ height: 1238.25,
+ 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: 'Actin filament organization',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 6,
+ },
+ {
+ idObject: 5061,
+ width: 1289.0,
+ height: 1572.2941176470588,
+ 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: 'Wnt signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 5,
+ },
+ {
+ idObject: 5062,
+ width: 1220.0,
+ height: 1395.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: 'Autophagy',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 5,
+ },
+ {
+ idObject: 5063,
+ width: 9215.0,
+ height: 3880.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Mitochondrial and ROS metabolism',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 8,
+ },
+ {
+ idObject: 5064,
+ width: 9102.0,
+ height: 4544.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Iron metabolism',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 8,
+ },
+ {
+ idObject: 5065,
+ width: 1639.0,
+ height: 1814.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: 'FOXO3 activity',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 5,
+ },
+ {
+ idObject: 5066,
+ width: 2823.0,
+ height: 1695.5,
+ 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: 'Inflammation signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 6,
+ },
+ {
+ idObject: 5067,
+ width: 1980.0,
+ height: 1740.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'LRRK2 activity',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 5,
+ },
+ {
+ idObject: 5068,
+ width: 10312.75,
+ height: 4172.15625,
+ 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: 'Neuroinflammation',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 8,
+ },
+ {
+ idObject: 5069,
+ width: 4368.5,
+ height: 1644.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'SHH signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 7,
+ },
+ {
+ idObject: 5070,
+ width: 5092.0,
+ height: 2947.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Glycolysis',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 7,
+ },
+ {
+ idObject: 5071,
+ width: 5497.5,
+ height: 3699.25,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Scrapbook',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 7,
+ },
+ {
+ idObject: 5072,
+ width: 11529.0,
+ height: 6911.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description:
+ 'General location of compartments:\n-Upper left: cortex\n-Middle left: cerebellum\n-Bottom left: PNS\n-Center: subpallium\n-Middle center: hypothalamus\n-Bottom center: liver and pancreas\n-Upper right: Pallium\n-Lower right: hippocampus\nColor compartment/complexes description:\n-green: they are migratory systems instead of compartments.\n-blue: location might be not appropriated.\n-red: it is not the real location. It was used to do not overcross many other parts of the map.\n \nOther remarks:\n1. State transitions were used to represent both state transition and migration.\n2. Empty compartments were placed to better visualized the brain anatomy.\n3. Unknown influence indicates coexpression.\n4. If specific brain developing time was available, it was included as a layer.\n5. If same reactions took place in additional compartments, names of those other compartments were included as a layer.',
+ name: 'NR2F1 signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 8,
+ },
+ {
+ idObject: 5073,
+ width: 8081.0,
+ height: 5096.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'SRR signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 7,
+ },
+ {
+ idObject: 5074,
+ width: 4498.0,
+ height: 2653.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Nicotine signaling',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 7,
+ },
+];
diff --git a/src/redux/bioEntity/bioEntity.selectors.ts b/src/redux/bioEntity/bioEntity.selectors.ts
index b29b13b78a665ebf7bc42a06c58d45312364abdc..43c3002e30980c9f6c09076cb632b6d54fa74bb3 100644
--- a/src/redux/bioEntity/bioEntity.selectors.ts
+++ b/src/redux/bioEntity/bioEntity.selectors.ts
@@ -1,9 +1,33 @@
+import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
import { rootSelector } from '@/redux/root/root.selectors';
import { createSelector } from '@reduxjs/toolkit';
-export const bioEntityContentsSelector = createSelector(rootSelector, state => state.bioEntity);
+export const bioEntitySelector = createSelector(rootSelector, state => state.bioEntity);
export const loadingBioEntityStatusSelector = createSelector(
- bioEntityContentsSelector,
+ bioEntitySelector,
state => state.loading,
);
+
+export const numberOfBioEntitiesSelector = createSelector(bioEntitySelector, state =>
+ state.data ? state.data.length : SIZE_OF_EMPTY_ARRAY,
+);
+
+export const numberOfBioEntitiesPerModelSelector = createSelector(rootSelector, state => {
+ const {
+ models,
+ bioEntity: { data: bioEntities },
+ } = state;
+
+ const numberOfBioEntitiesPerModel = (models.data || []).map(model => {
+ const bioEntitiesInGivenModel = (bioEntities || []).filter(
+ entity => model.idObject === entity.bioEntity.model,
+ );
+
+ return { modelName: model.name, numberOfEntities: bioEntitiesInGivenModel.length };
+ });
+
+ return numberOfBioEntitiesPerModel.filter(
+ model => model.numberOfEntities !== SIZE_OF_EMPTY_ARRAY,
+ );
+});