#4846 - Make Sequence view default in Macromolecules mode

ketcher-autotests/tests/Macromolecule-editor/Macro-Micro-Switcher/macro-micro-switcher.spec.ts

@@ -481,7 +481,10 @@ test.describe('Macro-Micro-Switcher', () => {
       /* 
       Test case: Macro-Micro-Switcher/#3747
       Description: Switching between Macro and Micro mode not crash application when opened DNA/RNA with modyfied monomer
+      Test fail because we have a bug https://github.com/epam/ketcher/issues/4881
+      After fix we need update snapshots.
       */
+      test.fail();
       await openFileAndAddToCanvasMacro(testInfo.fileName, page);
       await turnOnMicromoleculesEditor(page);
       await takeEditorScreenshot(page);
@@ -553,7 +556,7 @@ test.describe('Macro-Micro-Switcher', () => {
       topLeftCorner.y,
     );
     await turnOnMacromoleculesEditor(page);
-    await page.getByText('F1').locator('..').click();
+    await page.getByText('F1').locator('..').hover();
     await takeEditorScreenshot(page);
   });
 
@@ -770,12 +773,12 @@ test.describe('Macro-Micro-Switcher', () => {
     await takeEditorScreenshot(page);
   });
 
-  test('Open a macro file and put in center of canvas in micro mode then switch to macro, check that structure is in center of canvas', async ({
+  test('Open a macro file and put in center of canvas in micro mode then switch to macro', async ({
     page,
   }) => {
     /* 
     Test case: Macro-Micro-Switcher/#3902
-    Description: Structure is in center of canvas
+    Description: Structure is in left upper corner of canvas
     */
     await openFileAndAddToCanvas('KET/peptides-connected-with-bonds.ket', page);
     await takeEditorScreenshot(page);

ketcher-autotests/tests/Macromolecule-editor/Sequence-Mode/sequence-mode.spec.ts

@@ -581,6 +581,7 @@ test.describe('Sequence Mode', () => {
     await enterSequence(page, 'acgtu');
     await takeEditorScreenshot(page);
     await selectFlexLayoutModeTool(page);
+    await moveMouseAway(page);
     await takeEditorScreenshot(page);
   });
 

packages/ketcher-core/__tests__/application/editor/Editor.test.ts

@@ -1,11 +1,12 @@
-import { CoreEditor } from 'application/editor';
+import { CoreEditor, FlexMode } from 'application/editor';
 import { MonomerTool } from 'application/editor/tools/Monomer';
 import { createPolymerEditorCanvas } from '../../helpers/dom';
 
 describe('CoreEditor', () => {
   it('should track dom events and trigger handlers', () => {
     const canvas = createPolymerEditorCanvas();
-    const editor: CoreEditor = new CoreEditor({ canvas, theme: {} });
+    const mode = new FlexMode();
+    const editor: CoreEditor = new CoreEditor({ canvas, theme: {}, mode });
     const onMousemove = jest.fn();
     jest
       .spyOn(MonomerTool.prototype, 'mousemove')

packages/ketcher-core/__tests__/application/editor/EditorHistory.test.ts

@@ -1,14 +1,17 @@
-import { CoreEditor, EditorHistory } from 'application/editor';
+import { CoreEditor, EditorHistory, FlexMode } from 'application/editor';
 import { createPolymerEditorCanvas } from '../../helpers/dom';
 import { Command } from 'domain/entities/Command';
+import { BaseMode } from 'application/editor/modes/BaseMode';
 
 describe('EditorHistory', () => {
   let canvas;
   let editor: CoreEditor;
   let history: EditorHistory;
+  let mode: BaseMode;
   beforeEach(() => {
+    mode = new FlexMode();
     canvas = createPolymerEditorCanvas();
-    editor = new CoreEditor({ theme: {}, canvas });
+    editor = new CoreEditor({ theme: {}, canvas, mode });
     history = new EditorHistory(editor);
   });
 

packages/ketcher-core/__tests__/application/editor/tools/PeptideTool.test.ts

@@ -1,4 +1,4 @@
-import { CoreEditor } from 'application/editor';
+import { CoreEditor, FlexMode } from 'application/editor';
 import { PeptideRenderer } from 'application/render/renderers/PeptideRenderer';
 import { peptideMonomerItem, polymerEditorTheme } from '../../../mock-data';
 import { createPolymerEditorCanvas } from '../../../helpers/dom';
@@ -9,6 +9,7 @@ describe('PeptideTool', () => {
     const editor: CoreEditor = new CoreEditor({
       canvas,
       theme: polymerEditorTheme,
+      mode: new FlexMode(),
     });
     const onShow = jest.fn();
     jest.spyOn(PeptideRenderer.prototype, 'show').mockImplementation(onShow);
@@ -22,6 +23,7 @@ describe('PeptideTool', () => {
     const editor: CoreEditor = new CoreEditor({
       canvas,
       theme: polymerEditorTheme,
+      mode: new FlexMode(),
     });
     const onShow = jest.fn();
     jest.spyOn(PeptideRenderer.prototype, 'show').mockImplementation(onShow);

packages/ketcher-core/__tests__/application/editor/tools/SelectRectangleTool.test.ts

@@ -1,4 +1,4 @@
-import { CoreEditor } from 'application/editor';
+import { CoreEditor, FlexMode } from 'application/editor';
 import { PeptideRenderer } from 'application/render/renderers/PeptideRenderer';
 import {
   getFinishedPolymerBond,
@@ -104,6 +104,7 @@ describe('Select Rectangle Tool', () => {
       new CoreEditor({
         theme: polymerEditorTheme,
         canvas: createPolymerEditorCanvas(),
+        mode: new FlexMode(),
       }),
     );
 
@@ -114,9 +115,11 @@ describe('Select Rectangle Tool', () => {
 
   it('should initiate the render of peptide mousedown', () => {
     const canvas: SVGSVGElement = createPolymerEditorCanvas();
+    const mode = new FlexMode();
     const editor: CoreEditor = new CoreEditor({
       canvas,
       theme: polymerEditorTheme,
+      mode,
     });
     const onShow = jest.fn();
     jest.spyOn(PeptideRenderer.prototype, 'show').mockImplementation(onShow);
@@ -127,9 +130,11 @@ describe('Select Rectangle Tool', () => {
 
   it('should move selected entity', () => {
     const canvas: SVGSVGElement = createPolymerEditorCanvas();
+    const mode = new FlexMode();
     const editor = new CoreEditor({
       theme: polymerEditorTheme,
       canvas,
+      mode,
     });
     const onMove = jest.fn();
 

packages/ketcher-core/__tests__/application/editor/tools/ZoomTool.test.ts

@@ -1,4 +1,4 @@
-import { CoreEditor } from 'application/editor';
+import { CoreEditor, FlexMode } from 'application/editor';
 import { polymerEditorTheme } from '../../../mock-data';
 import { createPolymerEditorCanvas } from '../../../helpers/dom';
 import ZoomTool from 'application/editor/tools/Zoom';
@@ -40,6 +40,7 @@ describe('Zoom Tool', () => {
     new CoreEditor({
       theme: polymerEditorTheme,
       canvas,
+      mode: new FlexMode(),
     });
     canvas.dispatchEvent(
       new WheelEvent('wheel', { deltaY: 60, ctrlKey: true }),

packages/ketcher-core/src/application/editor/Editor.ts

@@ -28,12 +28,7 @@ import { MacromoleculesConverter } from 'application/editor/MacromoleculesConver
 import { BaseMonomer } from 'domain/entities/BaseMonomer';
 import { ketcherProvider } from 'application/utils';
 import { initHotKeys, keyNorm } from 'utilities';
-import {
-  FlexMode,
-  LayoutMode,
-  modesMap,
-  SequenceMode,
-} from 'application/editor/modes/';
+import { LayoutMode, modesMap, SequenceMode } from 'application/editor/modes/';
 import { BaseMode } from 'application/editor/modes/internal';
 import assert from 'assert';
 import { BaseSequenceItemRenderer } from 'application/render/renderers/sequence/BaseSequenceItemRenderer';
@@ -50,6 +45,7 @@ import monomersDataRaw from './data/monomers.ket';
 interface ICoreEditorConstructorParams {
   theme;
   canvas: SVGSVGElement;
+  mode?: BaseMode;
 }
 
 function isMouseMainButtonPressed(event: MouseEvent) {
@@ -76,17 +72,18 @@ export class CoreEditor {
     return this.tool;
   }
 
-  public mode: BaseMode = new FlexMode();
+  public mode: BaseMode;
   public sequenceTypeEnterMode = SequenceType.RNA;
   private micromoleculesEditor: Editor;
   private hotKeyEventHandler: (event: unknown) => void = () => {};
   private copyEventHandler: (event: ClipboardEvent) => void = () => {};
   private pasteEventHandler: (event: ClipboardEvent) => void = () => {};
   private keydownEventHandler: (event: KeyboardEvent) => void = () => {};
 
-  constructor({ theme, canvas }: ICoreEditorConstructorParams) {
+  constructor({ theme, canvas, mode }: ICoreEditorConstructorParams) {
     this.theme = theme;
     this.canvas = canvas;
+    this.mode = mode ?? new SequenceMode();
     resetEditorEvents();
     this.events = editorEvents;
     this.setMonomersLibrary(monomersDataRaw);
@@ -105,6 +102,7 @@ export class CoreEditor {
     const ketcher = ketcherProvider.getKetcher();
     this.micromoleculesEditor = ketcher?.editor;
     this.switchToMacromolecules();
+    this.rerenderSequenceMode();
   }
 
   static provideEditorInstance(): CoreEditor {
@@ -554,4 +552,17 @@ export class CoreEditor {
     this.renderersContainer.update(modelChanges);
     ketcher?.editor.clear();
   }
+
+  private rerenderSequenceMode() {
+    if (this.mode instanceof SequenceMode) {
+      const modelChanges = this.drawingEntitiesManager.reArrangeChains(
+        this.canvas.width.baseVal.value,
+        true,
+        false,
+      );
+      this.drawingEntitiesManager.clearCanvas();
+      this.renderersContainer.update(modelChanges);
+      this.drawingEntitiesManager.applyMonomersSequenceLayout();
+    }
+  }
 }

packages/ketcher-core/src/application/editor/modes/BaseMode.ts

@@ -1,7 +1,11 @@
 import { Command } from 'domain/entities/Command';
 import { SelectLayoutModeOperation } from '../operations/polymerBond';
 import { CoreEditor, EditorHistory } from '../internal';
-import { LayoutMode, modesMap } from 'application/editor/modes';
+import {
+  DEFAULT_LAYOUT_MODE,
+  LayoutMode,
+  modesMap,
+} from 'application/editor/modes';
 import {
   getStructStringFromClipboardData,
   initHotKeys,
@@ -27,7 +31,7 @@ export abstract class BaseMode {
 
   protected constructor(
     public modeName: LayoutMode,
-    public previousMode: LayoutMode = 'flex-layout-mode',
+    public previousMode: LayoutMode = DEFAULT_LAYOUT_MODE,
   ) {}
 
   private changeMode(editor: CoreEditor, modeName: LayoutMode, isUndo = false) {

packages/ketcher-core/src/application/editor/modes/types.ts

@@ -2,3 +2,5 @@ export type LayoutMode =
   | 'flex-layout-mode'
   | 'snake-layout-mode'
   | 'sequence-layout-mode';
+
+export const DEFAULT_LAYOUT_MODE: LayoutMode = 'sequence-layout-mode';

packages/ketcher-macromolecules/src/components/LayoutModeButton/LayoutModeButton.tsx

@@ -22,9 +22,10 @@ import {
   selectEditor,
   selectIsSequenceEditInRNABuilderMode,
 } from 'state/common';
+import { DEFAULT_LAYOUT_MODE } from 'ketcher-core';
 
 export const LayoutModeButton = () => {
-  const [activeMode, setActiveMode] = useState('flex-layout-mode');
+  const [activeMode, setActiveMode] = useState(DEFAULT_LAYOUT_MODE);
   const editor = useAppSelector(selectEditor);
   const layoutMode = useLayoutMode();
   const isSequenceEditInRNABuilderMode = useAppSelector(
@@ -56,16 +57,16 @@ export const LayoutModeButton = () => {
         needOpenByMenuItemClick={true}
       >
         <Menu.Item
-          itemId="flex-layout-mode"
-          testId="flex-layout-mode"
+          itemId="sequence-layout-mode"
+          testId="sequence-layout-mode"
         ></Menu.Item>
         <Menu.Item
           itemId="snake-layout-mode"
           testId="snake-layout-mode"
         ></Menu.Item>
         <Menu.Item
-          itemId="sequence-layout-mode"
-          testId="sequence-layout-mode"
+          itemId="flex-layout-mode"
+          testId="flex-layout-mode"
         ></Menu.Item>
       </Menu.Submenu>
     </MenuContext.Provider>

packages/ketcher-macromolecules/src/hooks/stateHooks.ts

@@ -21,14 +21,14 @@ import {
   selectEditor,
   selectIsSequenceEditInRNABuilderMode,
 } from 'state/common';
-import { LayoutMode } from 'ketcher-core';
+import { LayoutMode, DEFAULT_LAYOUT_MODE } from 'ketcher-core';
 
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
 export function useLayoutMode() {
   const editor = useAppSelector(selectEditor);
-  const [layoutMode, setLayoutMode] = useState<LayoutMode>('flex-layout-mode');
+  const [layoutMode, setLayoutMode] = useState<LayoutMode>(DEFAULT_LAYOUT_MODE);
 
   const onLayoutModeChange = useCallback(
     (newLayoutMode: LayoutMode) => {