Merge branch 'MIN-190/overlays-drawer' into 'development'

feat(overlays drawer): initialised overlays drawer and displayed public overlays

Closes MIN-190

See merge request !72

src/components/FunctionalArea/TopBar/TopBar.component.test.tsx

@@ -41,4 +41,16 @@ describe('TopBar - component', () => {
     expect(isOpen).toBe(true);
     expect(drawerName).toBe('submaps');
   });
+
+  it('should open overlays drawer on overlays button click', () => {
+    const { store } = renderComponent({ drawer: initialStateFixture });
+
+    const button = screen.getByRole('button', { name: 'Overlays' });
+    button.click();
+
+    const { isOpen, drawerName } = store.getState().drawer;
+
+    expect(isOpen).toBe(true);
+    expect(drawerName).toBe('overlays');
+  });
 });

src/components/FunctionalArea/TopBar/TopBar.component.tsx

 import { SearchBar } from '@/components/FunctionalArea/TopBar/SearchBar';
 import { UserAvatar } from '@/components/FunctionalArea/TopBar/UserAvatar';
-import { openSubmapsDrawer } from '@/redux/drawer/drawer.slice';
+import { openOverlaysDrawer, openSubmapsDrawer } from '@/redux/drawer/drawer.slice';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { Button } from '@/shared/Button';
 
@@ -11,6 +11,10 @@ export const TopBar = (): JSX.Element => {
     dispatch(openSubmapsDrawer());
   };
 
+  const onOverlaysClick = (): void => {
+    dispatch(openOverlaysDrawer());
+  };
+
   return (
     <div className="flex h-16 w-full flex-row items-center justify-between border-b border-font-500 border-opacity-[0.12] bg-white py-4 pl-7 pr-6">
       <div className="flex flex-row items-center">
@@ -19,7 +23,7 @@ export const TopBar = (): JSX.Element => {
         <Button icon="plus" isIcon isFrontIcon className="ml-8 mr-4" onClick={onSubmapsClick}>
           Submaps
         </Button>
-        <Button icon="plus" isIcon isFrontIcon>
+        <Button icon="plus" isIcon isFrontIcon onClick={onOverlaysClick}>
           Overlays
         </Button>
       </div>

src/components/Map/Drawer/Drawer.component.tsx

@@ -5,6 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { ReactionDrawer } from './ReactionDrawer';
 import { SearchDrawerWrapper as SearchDrawerContent } from './SearchDrawerWrapper';
 import { SubmapsDrawer } from './SubmapsDrawer';
+import { OverlaysDrawer } from './OverlaysDrawer';
 import { BioEntityDrawer } from './BioEntityDrawer/BioEntityDrawer.component';
 
 export const Drawer = (): JSX.Element => {
@@ -21,6 +22,7 @@ export const Drawer = (): JSX.Element => {
       {isOpen && drawerName === 'search' && <SearchDrawerContent />}
       {isOpen && drawerName === 'submaps' && <SubmapsDrawer />}
       {isOpen && drawerName === 'reaction' && <ReactionDrawer />}
+      {isOpen && drawerName === 'overlays' && <OverlaysDrawer />}
       {isOpen && drawerName === 'bio-entity' && <BioEntityDrawer />}
     </div>
   );

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/GeneralOverlays.component.test.tsx

+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { StoreType } from '@/redux/store';
+import {
+  OVERLAYS_PUBLIC_FETCHED_STATE_MOCK,
+  PUBLIC_OVERLAYS_MOCK,
+} from '@/redux/overlays/overlays.mock';
+import { GeneralOverlays } from './GeneralOverlays.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <GeneralOverlays />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('GeneralOverlays - component', () => {
+  describe('render', () => {
+    const publicOverlaysNames = PUBLIC_OVERLAYS_MOCK.map(({ name }) => name);
+
+    it.each(publicOverlaysNames)('should display %s overlay item', source => {
+      renderComponent({ overlays: OVERLAYS_PUBLIC_FETCHED_STATE_MOCK });
+
+      expect(screen.getByText(source)).toBeInTheDocument();
+    });
+  });
+
+  describe('view overlays', () => {
+    // TODO implement when connecting logic to component
+    it.skip('should allow to turn on more then one overlay', () => {});
+  });
+});

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/GeneralOverlays.component.tsx

+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { overlaysDataSelector } from '@/redux/overlays/overlays.selectors';
+import { OverlayListItem } from './OverlayListItem';
+
+export const GeneralOverlays = (): JSX.Element => {
+  const generalPublicOverlays = useAppSelector(overlaysDataSelector);
+
+  return (
+    <div className="border-b border-b-divide p-6">
+      <p className="mb-5 text-sm font-semibold">General Overlays:</p>
+      <ul>
+        {generalPublicOverlays.map(overlay => (
+          <OverlayListItem key={overlay.idObject} name={overlay.name} />
+        ))}
+      </ul>
+    </div>
+  );
+};

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx

+import { StoreType } from '@/redux/store';
+import { render, screen } from '@testing-library/react';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { OverlayListItem } from './OverlayListItem.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <OverlayListItem name="Ageing brain" />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('OverlayListItem - component', () => {
+  it('should render component with correct properties', () => {
+    renderComponent();
+
+    expect(screen.getByText('Ageing brain')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'View' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument();
+  });
+  // TODO implement when connecting logic to component
+  it.skip('should trigger view overlays on view button click', () => {});
+  // TODO implement when connecting logic to component
+  it.skip('should trigger download overlay to PC on download button click', () => {});
+});

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx

+import { Button } from '@/shared/Button';
+
+interface OverlayListItemProps {
+  name: string;
+}
+
+export const OverlayListItem = ({ name }: OverlayListItemProps): JSX.Element => {
+  const onViewOverlay = (): void => {};
+  const onDownloadOverlay = (): void => {};
+
+  return (
+    <li className="flex flex-row flex-nowrap justify-between pl-5 [&:not(:last-of-type)]:mb-4">
+      <span>{name}</span>
+      <div className="flex flex-row flex-nowrap">
+        <Button variantStyles="ghost" className="mr-4 max-h-8" onClick={onViewOverlay}>
+          View
+        </Button>
+        <Button className="max-h-8" variantStyles="ghost" onClick={onDownloadOverlay}>
+          Download
+        </Button>
+      </div>
+    </li>
+  );
+};

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/index.ts

+export { OverlayListItem } from './OverlayListItem.component';

src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/index.ts

+export { GeneralOverlays } from './GeneralOverlays.component';

src/components/Map/Drawer/OverlaysDrawer/OverlaysDrawer.component.tsx

+import { DrawerHeading } from '@/shared/DrawerHeading';
+import { GeneralOverlays } from './GeneralOverlays';
+
+export const OverlaysDrawer = (): JSX.Element => {
+  return (
+    <div data-testid="overlays-drawer">
+      <DrawerHeading title="Overlays" />
+      <GeneralOverlays />
+    </div>
+  );
+};

src/components/Map/Drawer/OverlaysDrawer/index.ts

+export { OverlaysDrawer } from './OverlaysDrawer.component';

src/redux/drawer/drawer.reducers.ts

@@ -28,6 +28,11 @@ export const openSubmapsDrawerReducer = (state: DrawerState): void => {
   state.drawerName = 'submaps';
 };
 
+export const openOverlaysDrawerReducer = (state: DrawerState): void => {
+  state.isOpen = true;
+  state.drawerName = 'overlays';
+};
+
 export const selectTabReducer = (
   state: DrawerState,
   action: OpenSearchDrawerWithSelectedTabReducerAction,

src/redux/drawer/drawer.slice.ts

@@ -7,6 +7,7 @@ import {
   displayEntityDetailsReducer,
   displayGroupedSearchResultsReducer,
   openDrawerReducer,
+  openOverlaysDrawerReducer,
   openBioEntityDrawerByIdReducer,
   openReactionDrawerByIdReducer,
   openSearchDrawerWithSelectedTabReducer,
@@ -22,6 +23,7 @@ const drawerSlice = createSlice({
     openDrawer: openDrawerReducer,
     openSearchDrawerWithSelectedTab: openSearchDrawerWithSelectedTabReducer,
     openSubmapsDrawer: openSubmapsDrawerReducer,
+    openOverlaysDrawer: openOverlaysDrawerReducer,
     selectTab: selectTabReducer,
     closeDrawer: closeDrawerReducer,
     displayDrugsList: displayDrugsListReducer,
@@ -38,6 +40,7 @@ export const {
   openDrawer,
   openSearchDrawerWithSelectedTab,
   openSubmapsDrawer,
+  openOverlaysDrawer,
   selectTab,
   closeDrawer,
   displayDrugsList,

src/redux/overlays/overlays.mock.ts

 import { DEFAULT_ERROR } from '@/constants/errors';
+import { MapOverlay } from '@/types/models';
 import { OverlaysState } from './overlays.types';
 
 export const OVERLAYS_INITIAL_STATE_MOCK: OverlaysState = {
@@ -6,3 +7,74 @@ export const OVERLAYS_INITIAL_STATE_MOCK: OverlaysState = {
   loading: 'idle',
   error: DEFAULT_ERROR,
 };
+
+export const PUBLIC_OVERLAYS_MOCK: MapOverlay[] = [
+  {
+    name: 'PD substantia nigra',
+    googleLicenseConsent: false,
+    creator: 'appu-admin',
+    description:
+      'Differential transcriptome expression from post mortem tissue. Meta-analysis from 8 published datasets, FDR = 0.05, see PMIDs 23832570 and 25447234.',
+    genomeType: null,
+    genomeVersion: null,
+    idObject: 11,
+    publicOverlay: true,
+    type: 'GENERIC',
+    order: 1,
+  },
+  {
+    name: 'Ageing brain',
+    googleLicenseConsent: false,
+    creator: 'appu-admin',
+    description:
+      'Differential transcriptome expression from post mortem tissue. Source: Allen Brain Atlas datasets, see PMID 25447234.',
+    genomeType: null,
+    genomeVersion: null,
+    idObject: 12,
+    publicOverlay: true,
+    type: 'GENERIC',
+    order: 2,
+  },
+  {
+    name: 'PRKN variants example',
+    googleLicenseConsent: false,
+    creator: 'appu-admin',
+    description: 'PRKN variants',
+    genomeType: 'UCSC',
+    genomeVersion: 'hg19',
+    idObject: 17,
+    publicOverlay: true,
+    type: 'GENETIC_VARIANT',
+    order: 3,
+  },
+  {
+    name: 'PRKN variants doubled',
+    googleLicenseConsent: false,
+    creator: 'appu-admin',
+    description: 'PRKN variants',
+    genomeType: 'UCSC',
+    genomeVersion: 'hg19',
+    idObject: 18,
+    publicOverlay: true,
+    type: 'GENETIC_VARIANT',
+    order: 4,
+  },
+  {
+    name: 'Generic advanced format overlay',
+    googleLicenseConsent: false,
+    creator: 'appu-admin',
+    description: 'Data set provided by a user',
+    genomeType: null,
+    genomeVersion: null,
+    idObject: 20,
+    publicOverlay: true,
+    type: 'GENERIC',
+    order: 5,
+  },
+];
+
+export const OVERLAYS_PUBLIC_FETCHED_STATE_MOCK: OverlaysState = {
+  data: PUBLIC_OVERLAYS_MOCK,
+  loading: 'succeeded',
+  error: DEFAULT_ERROR,
+};

src/types/drawerName.ts

@@ -7,4 +7,5 @@ export type DrawerName =
   | 'legend'
   | 'submaps'
   | 'reaction'
+  | 'overlays'
   | 'bio-entity';