#4374 - Macro: RNA builder should be highlighted in Edit mode. Canvas…

… should be disabled.
epam · Apr 9, 2024 · 2dbeedd · 2dbeedd
1 parent ecbed20
commit 2dbeedd
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 9 deletions.
diff --git a/...s/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditor.tsx b/...s/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditor.tsx
@@ -23,7 +23,11 @@ import {
   RnaEditorContainer,
   StyledHeader,
 } from './styles';
-import { useAppDispatch, useAppSelector } from 'hooks';
+import {
+  useAppDispatch,
+  useAppSelector,
+  useSequenceEditInRNABuilderMode,
+} from 'hooks';
 import {
   createNewPreset,
   RnaBuilderPresetsItem,
@@ -46,6 +50,7 @@ export const scrollToSelectedMonomer = (monomerId) => {
 export const RnaEditor = ({ duplicatePreset }) => {
   const activePreset = useAppSelector(selectActivePreset);
   const isEditMode = useAppSelector(selectIsEditMode);
+  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
   const activePresetFullName = selectPresetFullName(activePreset);
 
   const dispatch = useAppDispatch();
@@ -71,7 +76,13 @@ export const RnaEditor = ({ duplicatePreset }) => {
 
   return (
     <RnaEditorContainer>
-      <StyledHeader>
+      <StyledHeader
+        className={
+          isSequenceEditInRNABuilderMode
+            ? 'styled-header--sequence-edit-mode'
+            : ''
+        }
+      >
         RNA Builder
         <ExpandButton onClick={expandEditor}>
           <ExpandIcon expanded={expanded} name="chevron" />

diff --git a/...rc/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/RnaEditorExpanded.tsx b/...rc/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/RnaEditorExpanded.tsx
@@ -318,7 +318,14 @@ export const RnaEditorExpanded = ({
   }
 
   return (
-    <RnaEditorExpandedContainer data-testid="rna-editor-expanded">
+    <RnaEditorExpandedContainer
+      data-testid="rna-editor-expanded"
+      className={
+        isSequenceEditInRNABuilderMode
+          ? 'rna-editor-expanded--sequence-edit-mode'
+          : ''
+      }
+    >
       <NameContainer
         selected={activeMonomerGroup === RnaBuilderPresetsItem.Presets}
         onClick={() => selectGroup(RnaBuilderPresetsItem.Presets)}

diff --git a/...rary/RnaBuilder/RnaEditor/RnaEditorExpanded/__snapshots__/RnaEditorExpanded.test.tsx.snap b/...rary/RnaBuilder/RnaEditor/RnaEditorExpanded/__snapshots__/RnaEditorExpanded.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Test Rna Editor Expanded component should render correctly in edit mode 1`] = `
 <div
-  class="css-zbq0po"
+  class=" css-s8m56i"
   data-testid="rna-editor-expanded"
 >
   <div
@@ -173,7 +173,7 @@ exports[`Test Rna Editor Expanded component should render correctly in edit mode
 
 exports[`Test Rna Editor Expanded component should render correctly in edit mode with modification of sequence 1`] = `
 <div
-  class="css-zbq0po"
+  class="rna-editor-expanded--sequence-edit-mode css-s8m56i"
   data-testid="rna-editor-expanded"
 >
   <div
@@ -346,7 +346,7 @@ exports[`Test Rna Editor Expanded component should render correctly in edit mode
 
 exports[`Test Rna Editor Expanded component should render correctly in view mode 1`] = `
 <div
-  class="css-zbq0po"
+  class="rna-editor-expanded--sequence-edit-mode css-s8m56i"
   data-testid="rna-editor-expanded"
 >
   <div

diff --git a/...omolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/styles.ts b/...omolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/styles.ts
@@ -17,11 +17,19 @@
 import styled from '@emotion/styled';
 import { Button, Input } from 'ketcher-react';
 
-export const RnaEditorExpandedContainer = styled.div({
+export const RnaEditorExpandedContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
   padding: '10px',
-});
+  '&.rna-editor-expanded--sequence-edit-mode': {
+    padding: '8px',
+    paddingTop: '10px',
+    border: `2px ${props.theme.ketcher.color.editMode.sequenceInRNABuilder} solid`,
+    borderTop: 'none',
+    borderBottomRightRadius: '4px',
+    borderBottomLeftRadius: '4px',
+  },
+}));
 
 export const GroupsContainer = styled.div({
   marginTop: '16px',

diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/styles.ts b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/styles.ts
@@ -34,9 +34,13 @@ export const StyledHeader = styled.div((props) => ({
   alignItems: 'center',
   paddingLeft: '10px',
   fontSize: props.theme.ketcher.font.size.regular,
+  '&.styled-header--sequence-edit-mode': {
+    backgroundColor: props.theme.ketcher.color.editMode.sequenceInRNABuilder,
+  },
 }));
 
 export const ExpandButton = styled(Button)({
+  background: 'transparent',
   width: '32px',
   height: '100%',
   outline: 'none',

diff --git a/packages/ketcher-macromolecules/src/state/rna-builder/rnaBuilderSlice.ts b/packages/ketcher-macromolecules/src/state/rna-builder/rnaBuilderSlice.ts
@@ -25,7 +25,6 @@ import {
 } from 'ketcher-core';
 import { localStorageWrapper } from 'helpers/localStorage';
 import { FAVORITE_ITEMS_UNIQUE_KEYS } from 'src/constants';
-import { LabeledNucleotideWithPositionInSequence } from 'ketcher-core/dist/application/editor/tools/Tool';
 
 export enum RnaBuilderPresetsItem {
   Presets = 'Presets',

diff --git a/packages/ketcher-macromolecules/src/theming/defaultTheme/defaultTheme.ts b/packages/ketcher-macromolecules/src/theming/defaultTheme/defaultTheme.ts
@@ -137,6 +137,9 @@ export const defaultTheme: EditorTheme = {
     monomer: {
       default: '#C8C8C8',
     },
+    editMode: {
+      sequenceInRNABuilder: '#99d7dc',
+    },
   },
   font: {
     size: {

diff --git a/packages/ketcher-macromolecules/src/theming/defaultTheme/theme.types.ts b/packages/ketcher-macromolecules/src/theming/defaultTheme/theme.types.ts
@@ -120,6 +120,9 @@ export type EditorTheme = {
     monomer: {
       default: string;
     };
+    editMode: {
+      sequenceInRNABuilder: string;
+    };
   };
   font: {
     size: {