#3174 - RNA Bases are filtered wrong

ketcher-autotests/tests/test-data/Rxn-V2000/rxn-1465-to-open-expected.rxn

@@ -1,11 +1,11 @@
 $RXN
 
- -INDIGO- 0830231810
+ -INDIGO- 0919230835
 
   1  1
 $MOL
 
-  -INDIGO-08302318102D
+  -INDIGO-09192308352D
 
  11 10  0  0  0  0  0  0  0  0999 V2000
    10.7449   -8.0500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
@@ -32,7 +32,7 @@ $MOL
 M  END
 $MOL
 
-  -INDIGO-08302318102D
+  -INDIGO-09192308352D
 
   6  6  0  0  0  0  0  0  0  0999 V2000
    17.9598  -11.5501    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
@@ -42,9 +42,9 @@ $MOL
    17.9598  -12.5550    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    18.8288  -13.0500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   3  1  2  0  0  0  0
-  4  2  2  0  0  0  0
   1  5  1  0  0  0  0
-  2  3  1  0  0  0  0
   5  6  2  0  0  0  0
   6  4  1  0  0  0  0
+  4  2  2  0  0  0  0
+  2  3  1  0  0  0  0
 M  END

packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.test.tsx

@@ -2,10 +2,15 @@ import { render, screen } from '@testing-library/react';
 import { RnaAccordion } from 'components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion';
 import { getMonomerUniqueKey } from 'state/library';
 import { MonomerItemType } from 'ketcher-core';
+import { MONOMER_TYPES } from '../../../../constants';
 
 describe('Test Rna Accordion component', () => {
   it('should render', () => {
-    render(withThemeAndStoreProvider(<RnaAccordion />));
+    render(
+      withThemeAndStoreProvider(
+        <RnaAccordion libraryName={MONOMER_TYPES.RNA} />,
+      ),
+    );
 
     const rnaAccordion = screen.getByTestId('rna-accordion');
 
@@ -26,13 +31,16 @@ describe('Test Rna Accordion component', () => {
       },
     };
     render(
-      withThemeAndStoreProvider(<RnaAccordion />, {
-        library: {
-          searchFilter: '',
-          favorites: {},
-          monomers: [monomerData],
+      withThemeAndStoreProvider(
+        <RnaAccordion libraryName={MONOMER_TYPES.RNA} />,
+        {
+          library: {
+            searchFilter: '',
+            favorites: {},
+            monomers: [monomerData],
+          },
         },
-      }),
+      ),
     );
     const peptidesSummary = screen.getByTestId('summary-Phosphates');
 

packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx

@@ -27,6 +27,7 @@ import {
   getMonomerUniqueKey,
   selectFilteredMonomers,
   selectMonomerGroups,
+  selectMonomersInCategory,
 } from 'state/library';
 import {
   DetailsContainer,
@@ -69,11 +70,12 @@ interface IGroupsDataItem {
   }[];
 }
 
-export const RnaAccordion = () => {
+export const RnaAccordion = ({ libraryName }) => {
   const monomers = useAppSelector(selectFilteredMonomers);
+  const items = selectMonomersInCategory(monomers, libraryName);
   const activeRnaBuilderItem = useAppSelector(selectActiveRnaBuilderItem);
   const activePreset = useAppSelector(selectActivePreset);
-  const groups = selectMonomerGroups(monomers);
+  const groups = selectMonomerGroups(items);
   const presets = useAppSelector(selectPresets);
   const isEditMode = useAppSelector(selectIsEditMode);
   const editor = useAppSelector(selectEditor);

packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/__snapshots__/RnaAccordion.test.tsx.snap

@@ -71,7 +71,7 @@ exports[`Test Rna Accordion component should render 1`] = `
       </div>
     </div>
     <div
-      class="css-1m9d4g"
+      class="css-2kwivx"
     >
       <div
         class="css-9bccu"
@@ -104,18 +104,19 @@ exports[`Test Rna Accordion component should render 1`] = `
         <svg
           class="css-1qr96ji"
           fill="none"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
+          height="20"
+          stroke-width="2"
+          viewBox="0 0 20 20"
+          width="20"
           xmlns="http://www.w3.org/2000/svg"
         >
           <rect
             fill="currentColor"
-            height="13.333"
+            height="18"
             rx="1"
-            width="13.333"
-            x="1.332"
-            y="1.333"
+            width="18"
+            x="1"
+            y="1"
           />
         </svg>
         <span
@@ -142,7 +143,7 @@ exports[`Test Rna Accordion component should render 1`] = `
       </div>
     </div>
     <div
-      class="css-xy55ii"
+      class="css-4wpvad"
     >
       <div
         class="css-9bccu"
@@ -162,18 +163,30 @@ exports[`Test Rna Accordion component should render 1`] = `
         <svg
           class="css-1qr96ji"
           fill="none"
-          height="17"
-          viewBox="0 0 18 17"
-          width="18"
+          height="25"
+          stroke-width="2"
+          transform="translate(-3)"
+          viewBox="0 0 26 25"
+          width="26"
           xmlns="http://www.w3.org/2000/svg"
         >
           <rect
             fill="currentColor"
-            height="12"
+            height="15.013"
             rx="1"
-            transform="rotate(45 9 0)"
-            width="12"
-            x="9"
+            transform="rotate(45 13 1.414)"
+            width="15.013"
+            x="13"
+            y="1.414"
+          />
+          <rect
+            height="15.013"
+            rx="1"
+            stroke="currentColor"
+            transform="rotate(45 13 1.414)"
+            width="15.013"
+            x="13"
+            y="1.414"
           />
         </svg>
         <span
@@ -200,7 +213,7 @@ exports[`Test Rna Accordion component should render 1`] = `
       </div>
     </div>
     <div
-      class="css-xy55ii"
+      class="css-4wpvad"
     >
       <div
         class="css-9bccu"
@@ -221,17 +234,27 @@ exports[`Test Rna Accordion component should render 1`] = `
           class="css-1qr96ji"
           fill="none"
           height="24"
+          stroke-width="2"
+          transform="translate(-2)"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <rect
             fill="currentColor"
-            height="20"
-            rx="10"
-            width="20"
-            x="2"
-            y="2"
+            height="18"
+            rx="9"
+            width="18"
+            x="3"
+            y="3"
+          />
+          <rect
+            height="18"
+            rx="9"
+            stroke="currentColor"
+            width="18"
+            x="3"
+            y="3"
           />
         </svg>
         <span
@@ -258,7 +281,7 @@ exports[`Test Rna Accordion component should render 1`] = `
       </div>
     </div>
     <div
-      class="css-xy55ii"
+      class="css-4wpvad"
     >
       <div
         class="css-9bccu"

packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaBuilder.tsx

@@ -31,7 +31,7 @@ import { getDefaultPresets } from 'src/helpers/getDefaultPreset';
 import { StyledButton } from 'components/monomerLibrary/RnaBuilder/RnaAccordion/styles';
 import { IRnaPreset } from 'components/monomerLibrary/RnaBuilder/types';
 
-export const RnaBuilder = () => {
+export const RnaBuilder = ({ libraryName }) => {
   const dispatch = useAppDispatch();
   const hasError = useAppSelector(selectHasUniqueNameError);
   const monomers = useAppSelector(selectFilteredMonomers);
@@ -48,7 +48,7 @@ export const RnaBuilder = () => {
   return (
     <RnaBuilderContainer>
       <RnaEditor />
-      <RnaAccordion />
+      <RnaAccordion libraryName={libraryName} />
       <Modal isOpen={hasError} title="Error Message" onClose={closeErrorModal}>
         <Modal.Content>
           Preset with name "{activePreset?.name}" already exists. Please choose

packages/ketcher-polymer-editor-react/src/components/monomerLibrary/tabsContent.tsx

@@ -23,6 +23,9 @@ export const tabsContent = [
     caption: 'RNA',
     testId: 'RNA_TAB',
     component: RnaBuilder,
+    props: {
+      libraryName: MONOMER_TYPES.RNA,
+    },
   },
   {
     caption: 'CHEM',