Skip to content
Snippets Groups Projects
Commit 7e6ed46e authored by Tadeusz Miesiąc's avatar Tadeusz Miesiąc
Browse files

feat(export): prepared network tab and form to send the data to API

parent a85733a9
No related branches found
No related tags found
2 merge requests!223reset the pin numbers before search results are fetch (so the results will be...,!105feat(export): prepared network tab and form to send the data to API
Pipeline #84265 failed
Hide whitespace changes
Inline Side-by-side
Showing
with 71 additions and 237 deletions
package.json
+ 2
− 3
View file @ 7e6ed46e
......@@ -14,9 +14,8 @@
"check-types": "tsc --pretty --noEmit",
"prepare": "husky install",
"postinstall": "husky install",
"test": "jest --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!@toolz/allow-react)/'",
"test:watch": "jest --watch --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|.*\\.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$))'",
"test:watch": "jest --watch --config ./jest.config.ts --transformIgnorePatterns 'node_modules/(?!(ol|geotiff|quick-lru|color-space|color-rgba|color-parse|.*\\.mjs$))'",
"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",
......
src/components/Map/Drawer/ExportDrawer/Annotations/Annotations.component.test.tsx deleted 100644 → 0
+ 0
− 119
View file @ a85733a9
import { render, screen, waitFor } from '@testing-library/react';
import {
InitialStoreState,
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
import { StoreType } from '@/redux/store';
import { statisticsFixture } from '@/models/fixtures/statisticsFixture';
import { act } from 'react-dom/test-utils';
import { Annotations } from './Annotations.component';
const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
return (
render(
<Wrapper>
<Annotations />
</Wrapper>,
),
{
store,
}
);
};
describe('Annotations - component', () => {
it('should display annotations checkboxes when fetching data is successful', async () => {
renderComponent({
statistics: {
data: {
...statisticsFixture,
elementAnnotations: {
compartment: 1,
pathway: 0,
},
},
loading: 'succeeded',
error: {
message: '',
name: '',
},
},
});
const navigationButton = screen.getByTestId('accordion-item-button');
act(() => {
navigationButton.click();
});
expect(screen.getByText('Select annotations')).toBeInTheDocument();
await waitFor(() => {
expect(screen.getByTestId('checkbox-filter')).toBeInTheDocument();
expect(screen.getByLabelText('compartment')).toBeInTheDocument();
expect(screen.getByLabelText('search-input')).toBeInTheDocument();
});
});
it('should not display annotations checkboxes when fetching data fails', async () => {
renderComponent({
statistics: {
data: undefined,
loading: 'failed',
error: {
message: '',
name: '',
},
},
});
expect(screen.getByText('Select annotations')).toBeInTheDocument();
const navigationButton = screen.getByTestId('accordion-item-button');
act(() => {
navigationButton.click();
});
expect(screen.queryByTestId('checkbox-filter')).not.toBeInTheDocument();
});
it('should not display annotations checkboxes when fetched data is empty object', async () => {
renderComponent({
statistics: {
data: {
...statisticsFixture,
elementAnnotations: {},
},
loading: 'failed',
error: {
message: '',
name: '',
},
},
});
expect(screen.getByText('Select annotations')).toBeInTheDocument();
const navigationButton = screen.getByTestId('accordion-item-button');
act(() => {
navigationButton.click();
});
expect(screen.queryByTestId('checkbox-filter')).not.toBeInTheDocument();
});
it('should display loading message when fetching data is pending', async () => {
renderComponent({
statistics: {
data: undefined,
loading: 'pending',
error: {
message: '',
name: '',
},
},
});
expect(screen.getByText('Select annotations')).toBeInTheDocument();
const navigationButton = screen.getByTestId('accordion-item-button');
act(() => {
navigationButton.click();
});
expect(screen.getByText('Loading...')).toBeInTheDocument();
});
});
src/components/Map/Drawer/ExportDrawer/Annotations/Annotations.component.tsx deleted 100644 → 0
+ 0
− 40
View file @ a85733a9
/* eslint-disable no-magic-numbers */
import {
Accordion,
AccordionItem,
AccordionItemButton,
AccordionItemHeading,
AccordionItemPanel,
} from '@/shared/Accordion';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import {
elementAnnotationsSelector,
loadingStatisticsSelector,
} from '@/redux/statistics/statistics.selectors';
import { CheckboxFilter } from '../CheckboxFilter';
export const Annotations = (): React.ReactNode => {
const loadingStatistics = useAppSelector(loadingStatisticsSelector);
const elementAnnotations = useAppSelector(elementAnnotationsSelector);
const isPending = loadingStatistics === 'pending';
const mappedElementAnnotations = elementAnnotations
? Object.keys(elementAnnotations)?.map(el => ({ id: el, label: el }))
: [];
return (
<Accordion allowZeroExpanded>
<AccordionItem>
<AccordionItemHeading>
<AccordionItemButton>Select annotations</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
{isPending && <p>Loading...</p>}
{!isPending && mappedElementAnnotations && mappedElementAnnotations.length > 0 && (
<CheckboxFilter options={mappedElementAnnotations} />
)}
</AccordionItemPanel>
</AccordionItem>
</Accordion>
);
};
src/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.component.tsx
+ 1
− 1
View file @ 7e6ed46e
......@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
import lensIcon from '@/assets/vectors/icons/lens.svg';
import { twMerge } from 'tailwind-merge';
type CheckboxItem = { id: string; label: string };
export type CheckboxItem = { id: string; label: string };
type CheckboxFilterProps = {
options: CheckboxItem[];
......
src/components/Map/Drawer/ExportDrawer/Elements/Annotations/index.ts deleted 100644 → 0
+ 0
− 1
View file @ a85733a9
export { Annotations } from './Annotations.component';
src/components/Map/Drawer/ExportDrawer/Elements/Elements.component.tsx
+ 9
− 24
View file @ 7e6ed46e
import { useEffect } from 'react';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modelsDataSelector } from '@/redux/models/models.selectors';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { getCompartmentPathways } from '@/redux/compartmentPathways/compartmentPathways.thunks';
import { Annotations } from '../Annotations';
import { Types } from './Types';
import { IncludedCompartmentPathways } from './IncludedCompartmentPathways ';
import { ExcludedCompartmentPathways } from './ExcludedCompartmentPathways';
import { Columns } from './Columns';
import { getModelsIds } from './Elements.utils';
import { Export } from '../ExportCompound';
export const Elements = (): React.ReactNode => {
const models = useAppSelector(modelsDataSelector);
const dispatch = useAppDispatch();
useEffect(() => {
const modelsIds = getModelsIds(models);
dispatch(getCompartmentPathways(modelsIds));
}, [dispatch, models]);
return (
<div data-testid="elements-tab">
<Types />
<Columns />
<Annotations />
<IncludedCompartmentPathways />
<ExcludedCompartmentPathways />
<Export>
<Export.Types />
<Export.Columns />
<Export.Annotations />
<Export.IncludedCompartmentPathways />
<Export.ExcludedCompartmentPathways />
<Export.DownloadElements />
</Export>
</div>
);
};
src/components/Map/Drawer/ExportDrawer/Elements/Elements.utils.ts
+ 0
− 42
View file @ 7e6ed46e
/* eslint-disable no-magic-numbers */
import { CompartmentPathwayDetails, MapModel } from '@/types/models';
type AddedNames = { [key: string]: number };
type CheckboxElement = { id: string; label: string };
type CheckboxElements = CheckboxElement[];
export const getCompartmentPathwaysCheckboxElements = (
items: CompartmentPathwayDetails[],
): CheckboxElements => {
const addedNames: AddedNames = {};
const setNameToIdIfUndefined = (item: CompartmentPathwayDetails): void => {
if (addedNames[item.name] === undefined) {
addedNames[item.name] = item.id;
}
};
items.forEach(setNameToIdIfUndefined);
const parseIdAndLabel = ([name, id]: [name: string, id: number]): CheckboxElement => ({
id: id.toString(),
label: name,
});
const sortByLabel = (a: CheckboxElement, b: CheckboxElement): number => {
if (a.label > b.label) return 1;
return -1;
};
const elements = Object.entries(addedNames).map(parseIdAndLabel).sort(sortByLabel);
return elements;
};
export const getModelsIds = (models: MapModel[] | undefined): number[] => {
if (!models) return [];
return models.map(model => model.idObject);
};
src/components/Map/Drawer/ExportDrawer/Elements/Annotations/Annotations.component.tsx → src/components/Map/Drawer/ExportDrawer/ExportCompound/Annotations/Annotations.component.tsx
+ 6
− 3
View file @ 7e6ed46e
/* eslint-disable no-magic-numbers */
import { useContext } from 'react';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import {
elementAnnotationsSelector,
loadingStatisticsSelector,
} from '@/redux/statistics/statistics.selectors';
import { ZERO } from '@/constants/common';
import { CheckboxFilter } from '../../CheckboxFilter';
import { CollapsibleSection } from '../../CollapsibleSection';
import { ExportContext } from '../ExportCompound.context';
export const Annotations = (): React.ReactNode => {
const { setAnnotations } = useContext(ExportContext);
const loadingStatistics = useAppSelector(loadingStatisticsSelector);
const elementAnnotations = useAppSelector(elementAnnotationsSelector);
const isPending = loadingStatistics === 'pending';
......@@ -19,8 +22,8 @@ export const Annotations = (): React.ReactNode => {
return (
<CollapsibleSection title="Select annotations">
{isPending && <p>Loading...</p>}
{!isPending && mappedElementAnnotations && mappedElementAnnotations.length > 0 && (
<CheckboxFilter options={mappedElementAnnotations} />
{!isPending && mappedElementAnnotations && mappedElementAnnotations.length > ZERO && (
<CheckboxFilter options={mappedElementAnnotations} onCheckedChange={setAnnotations} />
)}
</CollapsibleSection>
);
......
src/components/Map/Drawer/ExportDrawer/Elements/Columns/Columns.component.tsx → src/components/Map/Drawer/ExportDrawer/ExportCompound/Columns/Columns.component.tsx
+ 15
− 0
View file @ 7e6ed46e
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 => (
<CollapsibleSection title="Select column">
<CheckboxFilter options={COLUMNS} isSearchEnabled={false} />
</CollapsibleSection>
);
export const Columns = (): React.ReactNode => {
const { setColumns } = useContext(ExportContext);
return (
<CollapsibleSection title="Select column">
<CheckboxFilter options={COLUMNS} isSearchEnabled={false} onCheckedChange={setColumns} />
</CollapsibleSection>
);
};
src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadElements/DownloadElements.tsx 0 → 100644
+ 13
− 0
View file @ 7e6ed46e
import { useContext } from 'react';
import { Button } from '@/shared/Button';
import { ExportContext } from '../ExportCompound.context';
export const DownloadElements = (): React.ReactNode => {
const { handleDownloadElements } = useContext(ExportContext);
return (
<div className="mt-6">
<Button onClick={handleDownloadElements}>Download</Button>
</div>
);
};
src/components/Map/Drawer/ExportDrawer/ExportCompound/DownloadNetwork/DownloadNetwork.tsx 0 → 100644
+ 13
− 0
View file @ 7e6ed46e
import { useContext } from 'react';
import { Button } from '@/shared/Button';
import { ExportContext } from '../ExportCompound.context';
export const DownloadElements = (): React.ReactNode => {
const { handleDownloadNetwork } = useContext(ExportContext);
return (
<div className="mt-6">
<Button onClick={handleDownloadNetwork}>Download</Button>
</div>
);
};
src/components/Map/Drawer/ExportDrawer/Elements/ExcludedCompartmentPathways/ExcludedCompartmentPathways.component.tsx → src/components/Map/Drawer/ExportDrawer/ExportCompound/ExcludedCompartmentPathways/ExcludedCompartmentPathways.component.tsx
+ 12
− 4
View file @ 7e6ed46e
/* eslint-disable no-magic-numbers */
import { useContext } from 'react';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import {
compartmentPathwaysDataSelector,
loadingCompartmentPathwaysSelector,
} from '@/redux/compartmentPathways/compartmentPathways.selectors';
import { ZERO } from '@/constants/common';
import { CheckboxFilter } from '../../CheckboxFilter';
import { CollapsibleSection } from '../../CollapsibleSection';
import { getCompartmentPathwaysCheckboxElements } from '../Elements.utils';
import { ExportContext } from '../ExportCompound.context';
import { getCompartmentPathwaysCheckboxElements } from '../ExportCompound.utils';
export const ExcludedCompartmentPathways = (): React.ReactNode => {
const { setExcludedCompartmentPathways } = useContext(ExportContext);
const loadingCompartmentPathways = useAppSelector(loadingCompartmentPathwaysSelector);
const isPending = loadingCompartmentPathways === 'pending';
const compartmentPathways = useAppSelector(compartmentPathwaysDataSelector);
const checkboxElements = getCompartmentPathwaysCheckboxElements(compartmentPathways);
const isCheckboxFilterVisible = !isPending && checkboxElements && checkboxElements.length > 0;
const isCheckboxFilterVisible = !isPending && checkboxElements && checkboxElements.length > ZERO;
return (
<CollapsibleSection title="Select excluded compartment / pathways">
{isPending && <p>Loading...</p>}
{isCheckboxFilterVisible && <CheckboxFilter options={checkboxElements} />}
{isCheckboxFilterVisible && (
<CheckboxFilter
options={checkboxElements}
onCheckedChange={setExcludedCompartmentPathways}
/>
)}
</CollapsibleSection>
);
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment