Merge branch 'MIN-315-summary-overlays-should-list-named-elements' into 'development'

feat: Add summary overlays with named elements (MIN-315)

Closes MIN-315

See merge request !181

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

@@ -82,7 +82,10 @@ export const BioEntityDrawer = (): React.ReactNode => {
             </CollapsibleSection>
           </>
         )}
-        <OverlayData />
+        <OverlayData
+          isShowGroupedOverlays={Boolean(relatedSubmap)}
+          isShowOverlayBioEntityName={Boolean(relatedSubmap)}
+        />
       </div>
     </div>
   );

src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.test.tsx

+import { ZERO } from '@/constants/common';
+import { overlayFixture } from '@/models/fixtures/overlaysFixture';
+import { MapOverlay } from '@/types/models';
+import { render, screen } from '@testing-library/react';
+import { OverlayDataAxis } from '../OverlayData.types';
+import { GroupedOverlayAxes } from './GroupedOverlayAxes.components';
+
+const BASE_AXIS: OverlayDataAxis = {
+  id: 123,
+  title: 'axis title',
+  value: 2137,
+  color: '#FFFFFF',
+  geneVariants: undefined,
+  overlayId: overlayFixture.idObject,
+};
+
+const renderComponent = (axes: OverlayDataAxis[], overlay: MapOverlay): void => {
+  render(<GroupedOverlayAxes axes={axes} overlay={overlay} />);
+};
+
+describe('GroupedOverlayAxes', () => {
+  describe('when axes array is empty', () => {
+    beforeEach(() => {
+      renderComponent([], overlayFixture);
+    });
+
+    it('should not render title', () => {
+      expect(screen.queryAllByText(overlayFixture.name).length).toEqual(ZERO);
+    });
+  });
+
+  describe('when axes array is present', () => {
+    const AXES = [
+      {
+        ...BASE_AXIS,
+        title: 'axis 1',
+      },
+      {
+        ...BASE_AXIS,
+        title: 'axis 2',
+      },
+    ];
+
+    beforeEach(() => {
+      renderComponent(AXES, overlayFixture);
+    });
+    it('should render title', () => {
+      expect(screen.getByText(overlayFixture.name)).toBeInTheDocument();
+    });
+
+    it.each(AXES)('should render overlay axis', ({ title }) => {
+      expect(screen.getByText(title)).toBeInTheDocument();
+    });
+  });
+});

src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.tsx

+import { SIZE_OF_EMPTY_ARRAY } from '@/constants/common';
+import { MapOverlay } from '@/types/models';
+import { useMemo } from 'react';
+import { OverlayAxis } from '../OverlayAxis';
+import { OverlayDataAxis } from '../OverlayData.types';
+import { getAxesSortedByValue } from '../utils/getAxesSortedByValue';
+
+interface Props {
+  overlay: MapOverlay;
+  axes: OverlayDataAxis[];
+}
+
+export const GroupedOverlayAxes = ({ overlay, axes }: Props): JSX.Element | null => {
+  const { idObject, name } = overlay;
+  const overlayAxes = axes.filter(axis => axis.overlayId === idObject);
+  const sortedAxes = useMemo(() => getAxesSortedByValue(overlayAxes), [overlayAxes]);
+
+  if (overlayAxes.length === SIZE_OF_EMPTY_ARRAY) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg border border-divide p-4">
+      <div className="font-bold" data-testid="grouped-overlay-title">
+        {name}
+      </div>
+      <div className="my-1 h-[1px] w-full bg-divide" />
+      {sortedAxes.map(axis => (
+        <OverlayAxis key={axis.title} axis={axis} />
+      ))}
+    </div>
+  );
+};

src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/index.ts

+export { GroupedOverlayAxes } from './GroupedOverlayAxes.components';

src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayAxis/OverlayAxis.component.test.tsx

@@ -15,6 +15,7 @@ const BASE_AXIS: OverlayDataAxis = {
   value: 2137,
   color: '#FFFFFF',
   geneVariants: undefined,
+  overlayId: 1,
 };
 
 describe('OverlayAxis - component', () => {

src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.component.test.tsx

@@ -15,15 +15,18 @@ import { StoreType } from '@/redux/store';
 import { InitialStoreState } from '@/utils/testing/getReduxStoreActionsListener';
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { render, screen } from '@testing-library/react';
-import { OverlayData } from './OverlayData.component';
+import { OverlayData, Props } from './OverlayData.component';
 
-const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+const renderComponent = (
+  initialStoreState: InitialStoreState = {},
+  props: Props = {},
+): { store: StoreType } => {
   const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
 
   return (
     render(
       <Wrapper>
-        <OverlayData />
+        <OverlayData {...props} />
       </Wrapper>,
     ),
     {
@@ -113,4 +116,157 @@ describe('OverlayData - component', () => {
       expect(screen.getByText('axis name')).toBeInTheDocument();
     });
   });
+
+  describe('when axes list is present and isShowGroupedOverlays=true', () => {
+    beforeEach(() => {
+      const OVERLAY_ID = overlayFixture.idObject;
+      const BIO_ENTITY = MOCKED_OVERLAY_BIO_ENTITY_RENDER[0];
+
+      renderComponent(
+        {
+          ...INITIAL_STORE_STATE_MOCK,
+          map: {
+            ...initialMapStateFixture,
+            data: { ...initialMapStateFixture.data, modelId: CORE_PD_MODEL_MOCK.idObject },
+          },
+          overlays: {
+            ...INITIAL_STORE_STATE_MOCK.overlays,
+            data: [{ ...overlayFixture, name: 'overlay name' }],
+          },
+          bioEntity: {
+            data: [
+              {
+                searchQueryElement: '',
+                loading: 'pending',
+                error: { name: '', message: '' },
+                data: [
+                  {
+                    ...bioEntitiesContentFixture[0],
+                    bioEntity: {
+                      ...bioEntitiesContentFixture[0].bioEntity,
+                      id: BIO_ENTITY.id,
+                    },
+                  },
+                ],
+              },
+            ],
+            loading: 'pending',
+            error: { name: '', message: '' },
+          },
+          overlayBioEntity: {
+            ...OVERLAY_BIO_ENTITY_INITIAL_STATE_MOCK,
+            overlaysId: [OVERLAY_ID],
+            data: {
+              [OVERLAY_ID]: {
+                [CORE_PD_MODEL_MOCK.idObject]: [
+                  {
+                    ...BIO_ENTITY,
+                    geneVariants: GENE_VARIANTS_MOCK,
+                    modelId: CORE_PD_MODEL_MOCK.idObject,
+                    overlayId: OVERLAY_ID,
+                  },
+                ],
+              },
+            },
+          },
+          models: { ...MODELS_INITIAL_STATE_MOCK, data: [CORE_PD_MODEL_MOCK] },
+          drawer: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioEntityDrawerState: {
+              ...INITIAL_STORE_STATE_MOCK.drawer.bioEntityDrawerState,
+              bioentityId: BIO_ENTITY.id,
+            },
+          },
+        },
+        {
+          isShowGroupedOverlays: true,
+        },
+      );
+    });
+
+    it('should render title', () => {
+      expect(screen.getByText('Overlay data:')).toBeInTheDocument();
+    });
+
+    it('should render names of two overlays', () => {
+      expect(screen.queryAllByText('overlay name').length).toEqual(2);
+    });
+  });
+
+  describe('when axes list is present and isShowOverlayBioEntityName=true', () => {
+    beforeEach(() => {
+      const OVERLAY_ID = overlayFixture.idObject;
+      const BIO_ENTITY = MOCKED_OVERLAY_BIO_ENTITY_RENDER[0];
+
+      renderComponent(
+        {
+          ...INITIAL_STORE_STATE_MOCK,
+          map: {
+            ...initialMapStateFixture,
+            data: { ...initialMapStateFixture.data, modelId: CORE_PD_MODEL_MOCK.idObject },
+          },
+          overlays: {
+            ...INITIAL_STORE_STATE_MOCK.overlays,
+            data: [{ ...overlayFixture, name: 'overlay name' }],
+          },
+          bioEntity: {
+            data: [
+              {
+                searchQueryElement: '',
+                loading: 'pending',
+                error: { name: '', message: '' },
+                data: [
+                  {
+                    ...bioEntitiesContentFixture[0],
+                    bioEntity: {
+                      ...bioEntitiesContentFixture[0].bioEntity,
+                      id: BIO_ENTITY.id,
+                    },
+                  },
+                ],
+              },
+            ],
+            loading: 'pending',
+            error: { name: '', message: '' },
+          },
+          overlayBioEntity: {
+            ...OVERLAY_BIO_ENTITY_INITIAL_STATE_MOCK,
+            overlaysId: [OVERLAY_ID],
+            data: {
+              [OVERLAY_ID]: {
+                [CORE_PD_MODEL_MOCK.idObject]: [
+                  {
+                    ...BIO_ENTITY,
+                    geneVariants: GENE_VARIANTS_MOCK,
+                    modelId: CORE_PD_MODEL_MOCK.idObject,
+                    overlayId: OVERLAY_ID,
+                    name: 'element name',
+                  },
+                ],
+              },
+            },
+          },
+          models: { ...MODELS_INITIAL_STATE_MOCK, data: [CORE_PD_MODEL_MOCK] },
+          drawer: {
+            ...INITIAL_STORE_STATE_MOCK.drawer,
+            bioEntityDrawerState: {
+              ...INITIAL_STORE_STATE_MOCK.drawer.bioEntityDrawerState,
+              bioentityId: BIO_ENTITY.id,
+            },
+          },
+        },
+        {
+          isShowOverlayBioEntityName: true,
+        },
+      );
+    });
+
+    it('should render title', () => {
+      expect(screen.getByText('Overlay data:')).toBeInTheDocument();
+    });
+
+    it('should render element name', () => {
+      expect(screen.getByText('element name')).toBeInTheDocument();
+    });
+  });
 });

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

 import { ZERO } from '@/constants/common';
+import { overlaysOpenedSelector } from '@/redux/overlayBioEntity/overlayBioEntity.selector';
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { GroupedOverlayAxes } from './GroupedOverlayAxes';
 import { OverlayAxis } from './OverlayAxis';
+import { getAxesSortedByValue } from './utils/getAxesSortedByValue';
+import { getUniqueAxes } from './utils/getUniqueAxes';
 import { useOverlaysAxes } from './utils/useOverlaysAxes';
 
-export const OverlayData = (): JSX.Element | null => {
-  const axes = useOverlaysAxes();
+export interface Props {
+  isShowGroupedOverlays?: boolean;
+  isShowOverlayBioEntityName?: boolean;
+}
 
-  if (axes.length === ZERO) {
+export const OverlayData = ({
+  isShowGroupedOverlays = false,
+  isShowOverlayBioEntityName = false,
+}: Props = {}): JSX.Element | null => {
+  const axes = useOverlaysAxes({ isShowOverlayBioEntityName });
+  const uniqueAxes = getUniqueAxes(axes);
+  const openedOverlays = useSelector(overlaysOpenedSelector);
+  const sortedAxes = useMemo(() => getAxesSortedByValue(uniqueAxes), [uniqueAxes]);
+
+  if (uniqueAxes.length === ZERO) {
     return null;
   }
 
+  const overlaysAxesContent = (
+    <div className="flex flex-col gap-2 rounded-lg border border-divide p-4">
+      {sortedAxes.map(axis => (
+        <OverlayAxis key={axis.title} axis={axis} />
+      ))}
+    </div>
+  );
+
+  const groupedOverlayAxesContent = (
+    <>
+      {openedOverlays.map(overlay => (
+        <GroupedOverlayAxes key={overlay.idObject} overlay={overlay} axes={uniqueAxes} />
+      ))}
+    </>
+  );
+
   return (
-    <div>
+    <div className="flex flex-col gap-2">
       <h3 className="mb-2 font-semibold">Overlay data:</h3>
-      <div className="flex flex-col gap-2 rounded-lg border border-divide p-4">
-        {axes.map(axis => (
-          <OverlayAxis key={axis.title} axis={axis} />
-        ))}
-      </div>
+      {isShowGroupedOverlays ? groupedOverlayAxesContent : overlaysAxesContent}
     </div>
   );
 };

src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.types.ts

@@ -6,4 +6,5 @@ export interface OverlayDataAxis {
   value?: number;
   color: string;
   geneVariants?: GeneVariant[] | null;
+  overlayId: number;
 }

src/components/Map/Drawer/BioEntityDrawer/OverlayData/utils/getAxesSortedByValue.ts

+import { ZERO } from '@/constants/common';
+import { OverlayDataAxis } from '../OverlayData.types';
+
+export const getAxesSortedByValue = (axes: OverlayDataAxis[]): OverlayDataAxis[] =>
+  axes.sort((a, b) => (b?.value || ZERO) - (a?.value || ZERO));

src/components/Map/Drawer/BioEntityDrawer/OverlayData/utils/getUniqueAxes.ts

+import { OverlayDataAxis } from '../OverlayData.types';
+
+const UNIQUE_KEYS: (keyof Pick<OverlayDataAxis, 'title' | 'value'>)[] = ['title', 'value'];
+
+const SEPARATOR = ';';
+
+export const getUniqueAxes = (nonUniqueAxes: OverlayDataAxis[]): OverlayDataAxis[] => {
+  const getUniqueAxesKey = (axis: OverlayDataAxis): string =>
+    UNIQUE_KEYS.map(key => axis[key]).join(SEPARATOR);
+
+  const uniqueAxesObj = nonUniqueAxes.reduce(
+    (obj, axis) => ({
+      ...obj,
+      [getUniqueAxesKey(axis)]: axis,
+    }),
+    {} as Record<string, OverlayDataAxis>,
+  );
+
+  return Object.values(uniqueAxesObj);
+};

src/components/Map/Drawer/BioEntityDrawer/OverlayData/utils/useOverlaysAxes.ts

@@ -8,7 +8,13 @@ import {
 import { useSelector } from 'react-redux';
 import { OverlayDataAxis } from '../OverlayData.types';
 
-export const useOverlaysAxes = (): OverlayDataAxis[] => {
+interface Options {
+  isShowOverlayBioEntityName?: boolean;
+}
+
+export const useOverlaysAxes = ({
+  isShowOverlayBioEntityName = false,
+}: Options = {}): OverlayDataAxis[] => {
   const openedOverlays = useSelector(overlaysOpenedSelector);
   const currentBioEntityOverlaysForCurrentBioEntity = useAppSelector(
     overlaysBioEntityForCurrentBioEntityAndCurrentModelSelector,
@@ -23,10 +29,11 @@ export const useOverlaysAxes = (): OverlayDataAxis[] => {
 
     return {
       id: overlayBioEntity.id,
-      title: overlay?.name || '',
+      title: (isShowOverlayBioEntityName ? overlayBioEntity?.name : '') || overlay?.name || '',
       value: overlayBioEntity.value || undefined,
       color: getOverlayBioEntityColorByAvailableProperties(overlayBioEntity),
       geneVariants: overlayBioEntity?.geneVariants,
+      overlayId: overlayBioEntity.overlayId,
     };
   });
 };

src/redux/overlayBioEntity/overlayBioEntity.utils.ts

@@ -34,6 +34,7 @@ export const parseOverlayBioEntityToOlRenderingFormat = (
         value: entity.right.value,
         overlayId,
         color: entity.right.color,
+        name: entity.right.name,
       });
       return acc;
     }
@@ -53,6 +54,7 @@ export const parseOverlayBioEntityToOlRenderingFormat = (
         overlayId,
         color: entity.right.color,
         geneVariants: entity.right.geneVariants,
+        name: entity.right.name,
       });
     }
 

src/types/OLrendering.ts

@@ -21,6 +21,7 @@ export type OverlayBioEntityRender = {
   hexColor?: string;
   type: OverlayBioEntityRenderType;
   geneVariants?: GeneVariant[] | null;
+  name?: string;
 };
 
 export interface OverlayReactionCoords {