WIP: #3618 - display atoms and bonds in macro mode

.github/ISSUE_TEMPLATE/bug_report.md

@@ -3,7 +3,7 @@ name: Bug report
 about: Create a report to help us improve
 title: ''
 labels: bug
-assignees: Nitvex
+assignees: ''
 
 ---
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -3,7 +3,7 @@ name: Feature request
 about: Suggest an idea for this project
 title: ''
 labels: feature request
-assignees: Nitvex
+assignees: ''
 
 ---
 

.github/auto_assign.yml

@@ -4,19 +4,11 @@ useReviewGroups: true
 addAssignees: author
 reviewGroups:
   core:
-    - nitvex
+    - ilya-asiyuk-epam
     - rrodionov91
-    - SashaGraves
   developers:
-    - nanoblit
     - StarlaStarla
     - chgayane
-    - OlgaMazurina
-    - ivan-arkhipov-epam 
   QA:
     - Zhirnoff
-    - MartaWilliams
-    - y-holik
-    - AnastasiyaPiatrovaKlu
-    - ViktoriaTkacheva
-    - urszula-gawlowska
+    - AlexeyGirin

.github/workflows/playwright.yml

@@ -19,7 +19,7 @@ env:
   CI_ENVIRONMENT: true
 jobs:
   playwright_tests:
-    timeout-minutes: 40
+    timeout-minutes: 60
     runs-on: self-hosted
     steps:
       - uses: actions/checkout@v3

.gitignore

@@ -33,7 +33,16 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode
+.history
 /.idea
 
 .pnp.*
 .yarn/*
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

DEVNOTES.md

@@ -15,7 +15,7 @@ rm -rf node_modules
 rm -rf ./packages/ketcher-core/node_modules
 rm -rf ./packages/ketcher-react/node_modules
 rm -rf ./packages/ketcher-standalone/node_modules
-rm -rf ./packages/ketcher-polymer-editor-react/node_modules
+rm -rf ./packages/ketcher-macromolecules/node_modules
 rm -rf ./example/node_modules
 rm -rf ./demo/node_modules
 ```

README.md

@@ -64,6 +64,66 @@ Ketcher uses Miew-React for viewing and editing data in 3D.
 You can find the latest version of Miew-React [here](https://github.com/epam/miew/tree/master/packages/miew-react).
 The last checked version - [1.0.0](https://www.npmjs.com/package/miew-react).
 
+## Ketcher API
+Ketcher can return drawn structures using the following methods:
+
+`getSmiles(isExtended = false): Promise<string>` – returns `string` representation of drawn structure in SMILES format.  
+Parameters: `isExtended: boolean`. By default, `false`. Indicates, whether extended SMILES format needs to be used.
+
+`getMolfile(molfileFormat): Promise<string>` – returns `string` representation of drawn structure in MOL-format.  
+Parameters: `molfileFormat: 'v2000' | 'v3000'`. Optional, by default, 'auto'. Indicates, in which format result will be returned. If no desired format is provided, then it is chosen automatically, depending on drawn structure.
+
+`getRxn(molfileFormat): Promise<string>` – returns `string` representation of drawn structure in RXN-format.  
+Parameters: `molfileFormat: 'v2000' | 'v3000'`. Optional, by default, 'v2000'. Indicates, in which format result will be returned.
+
+`getKet(): Promise<string>` – returns `string` representation of drawn structure in internal Ket-format.
+
+`getSmarts(): Promise<string>` – returns `string` representation of drawn structure in Smarts-format.
+
+`getCml(): Promise<string>` – returns `string` representation of drawn structure in Cml-format.
+
+`getSdf(molfileFormat): Promise<string>` – returns `string` representation of drawn structure in Sdf-format.  
+Parameters: `molfileFormat: 'v2000' | 'v3000'`. Optional, by default, 'v2000'. Indicates, in which format result will be returned.
+
+`getCDXml(): Promise<string>` – returns `string` representation of drawn structure in CDXml-format.
+
+`getCDX(): Promise<string>` – returns `string` representation of drawn structure in CDX-format.
+
+`getInchi(withAuxInfo = false): Promise<string>` – returns `string` representation of drawn structure in Inchi-format.  
+Parameters: `withAuxInfo: boolean`. Optional, by default, `false`.
+
+`getInchiKey(): Promise<string>` – returns `string` representation of drawn structure in InChiKey-format.
+
+`containsReaction(): boolean` – returns `true`, in case drawn structure contains reaction; `false` otherwise.
+
+`isQueryStructureSelected(): boolean` – returns `true`, in case selected structure has query.
+
+`setMolecule(structure: string): Promise<void>` – draws passed structure on the canvas. Before drawing passed structure, current structure is removed.  
+Parameters: `structure: string`. Structure is a string in any supported format.
+
+`addFragment(structure: string): Promise<void>` – adds passed structure on the canvas. Current structure is not changed.  
+Parameters: `structure: string`. Structure is a string in any supported format.
+
+`layout(): Promise<void>` – performs layout algorithm for drawn structure.
+
+`recognize(image: Blob, version?: string): Promise<Struct>` – recognizes a structure from image.  
+Parameters: `image: Blob` – image to recognize. Returns `Struct` – object, which represents recognized structure.
+
+```
+generateImage(data: string, options: {  
+    outputFormat: 'png' | 'svg';
+    backgroundColor: string;
+    bondThickness: number;
+}): Promise<Blob>
+``` 
+Generates image from passed structure.  
+Parameters:  
+    `data` – `string` representation of structure in any supported format.   
+    `options` – object with the following properties:   
+        * `outputFormat` – can be 'png' or 'svg'  
+        * `backgroundColor` – image background color  
+        * `bondThickness` – thickness of bonds in output structure  
+
 ## Settings
 
 You can add extra configuration in editor.setSetting

example/package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "ketcher-core": "*",
-    "ketcher-polymer-editor-react": "*",
+    "ketcher-macromolecules": "*",
     "ketcher-react": "*",
     "ketcher-standalone": "*",
     "normalize.css": "^8.0.1",
@@ -69,7 +69,7 @@
     "source-map-loader": "^3.0.1",
     "stylelint": "13.13.1",
     "typescript": "^4.5.2",
-    "vite": "^4.3.9",
+    "vite": "^4.5.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-raw": "^1.0.3",
     "vite-plugin-svgr": "^2.4.0",

example/src/App.tsx

@@ -44,7 +44,7 @@ type PolymerType = ({
 let PolymerEditor: PolymerType = () => null;
 if (enablePolymerEditor) {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const { Editor } = require('ketcher-polymer-editor-react');
+  const { Editor } = require('ketcher-macromolecules');
   PolymerEditor = Editor as PolymerType;
 }
 

example/src/ModeControl/ModeControl.tsx

@@ -17,7 +17,11 @@
 import { useState, useRef } from 'react';
 import styled from '@emotion/styled';
 import { Button, Popover } from '@mui/material';
-import { Icon } from 'ketcher-react';
+import {
+  Icon,
+  KETCHER_ROOT_NODE_CSS_SELECTOR,
+  KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR,
+} from 'ketcher-react';
 
 interface IStyledIconProps {
   expanded?: boolean;
@@ -30,9 +34,12 @@ const ElementAndDropdown = styled('div')`
   flexgrow: 1;
   display: flex;
   justifycontent: flex-end;
-  @media (min-width: 900px) {
-    width: 162px;
-    padding: 6px 3px;
+
+  @media only screen {
+    @container (min-width: 900px) {
+      width: 162px;
+      padding: 6px 3px;
+    }
   }
 `;
 
@@ -60,8 +67,10 @@ const StyledIcon = styled(Icon)<IStyledIconProps>`
 
 const StyledIconForMacromoleculesToggler = styled(StyledIcon)`
   display: none;
-  @media (min-width: 900px) {
-    display: flex;
+  @media only screen {
+    @container (min-width: 900px) {
+      display: flex;
+    }
   }
 `;
 
@@ -73,8 +82,10 @@ const CornerIcon = styled(Icon)`
   right: 0;
   bottom: 0;
   fill: @main-color;
-  @media (min-width: 900px) {
-    display: none;
+  @media only screen {
+    @container (min-width: 900px) {
+      display: none;
+    }
   }
 `;
 
@@ -84,13 +95,14 @@ const ModeLabel = styled('span')`
   font-size: 12px;
   text-align: left;
   flex-grow: 1;
-  @media (min-width: 900px) {
-    display: inline;
+  @media only screen {
+    @container (min-width: 900px) {
+      display: inline;
+    }
   }
 `;
 
 const ModeControlButton = styled('div')`
-  width: 162px;
   height: 28px;
   display: flex;
   align-items: center;
@@ -176,7 +188,10 @@ export const ModeControl = ({ toggle, isPolymerEditor }: ModeProps) => {
         open={isExpanded}
         onClose={onClose}
         anchorEl={btnRef.current}
-        container={btnRef.current}
+        container={
+          document.querySelector(KETCHER_ROOT_NODE_CSS_SELECTOR) ||
+          document.querySelector(KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR)
+        }
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'left',

example/vite.config.js

@@ -6,8 +6,8 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 import vitePluginRaw from 'vite-plugin-raw';
 import svgr from 'vite-plugin-svgr';
 import ketcherCoreTSConfig from '../packages/ketcher-core/tsconfig.json';
-import { valuesToReplace as polymerEditorValues } from '../packages/ketcher-polymer-editor-react/rollup.config';
-import polymerEditorTSConfig from '../packages/ketcher-polymer-editor-react/tsconfig.json';
+import { valuesToReplace as polymerEditorValues } from '../packages/ketcher-macromolecules/rollup.config';
+import polymerEditorTSConfig from '../packages/ketcher-macromolecules/tsconfig.json';
 import { valuesToReplace as ketcherReactValues } from '../packages/ketcher-react/rollup.config';
 import ketcherReactTSConfig from '../packages/ketcher-react/tsconfig.json';
 import ketcherStandaloneTSConfig from '../packages/ketcher-standalone/tsconfig.json';
@@ -35,7 +35,7 @@ function resolver(source, importer, options) {
 const getTSConfigByPackage = (packageName) => {
   return {
     'ketcher-core': ketcherCoreTSConfig,
-    'ketcher-polymer-editor-react': polymerEditorTSConfig,
+    'ketcher-macromolecules': polymerEditorTSConfig,
     'ketcher-react': ketcherReactTSConfig,
     'ketcher-standalone': ketcherStandaloneTSConfig,
   }[packageName];
@@ -110,7 +110,7 @@ export default defineConfig({
       values: ketcherReactValues,
     }),
     replace({
-      include: '**/ketcher-polymer-editor-react/src/**',
+      include: '**/ketcher-macromolecules/src/**',
       preventAssignment: true,
       values: polymerEditorValues,
     }),
@@ -175,17 +175,17 @@ export default defineConfig({
         ),
       },
       {
-        find: 'ketcher-polymer-editor-react',
+        find: 'ketcher-macromolecules',
         replacement: resolve(
           __dirname,
-          '../packages/ketcher-polymer-editor-react/src/index.tsx',
+          '../packages/ketcher-macromolecules/src/index.tsx',
         ),
       },
 
       /** Get aliases from packages' tsconfig.json */
       ...getAliasesByPackage('ketcher-core'),
       ...getAliasesByPackage('ketcher-react'),
-      ...getAliasesByPackage('ketcher-polymer-editor-react'),
+      ...getAliasesByPackage('ketcher-macromolecules'),
       ...getAliasesByPackage('ketcher-standalone'),
       {
         find: 'src', // every package has this implicit alias

ketcher-autotests/README.md

@@ -142,3 +142,11 @@ Run this command in the directory "ketcher-autotests"
 - `npm run report` show report
 - `npm run docker:update` update all snapshots
 - `npm run docker:update:test -- "test_title"` update only 1 snapshot with test_title
+
+### Known issues
+
+The "file name too long" error in Git is related to the maximum length of file names in the operating system. In most cases, this happens on Windows systems, where the maximum path length to a file is 260 characters.
+
+One way to work around this limitation in Git is to use the command git config --system core.longpaths true. This command allows Git to work with long file names on Windows that exceed the maximum path length.
+
+If you do not have administrator rights, you can try to modify the Git configuration for the current user using the command git config --global core.longpaths true. This command will modify the Git settings only for your user account, and administrator rights are not required to execute it.

ketcher-autotests/constants/testIdConstants.ts

@@ -1,7 +1,7 @@
-const PEPTIDES_TAB = 'PEPTIDES_TAB';
-const RNA_TAB = 'RNA_TAB';
-const CHEM_TAB = 'CHEM_TAB';
-const FAVORITES_TAB = 'FAVORITES_TAB';
+const PEPTIDES_TAB = 'PEPTIDES-TAB';
+const RNA_TAB = 'RNA-TAB';
+const CHEM_TAB = 'CHEM-TAB';
+const FAVORITES_TAB = 'FAVORITES-TAB';
 const POLYMER_TOGGLER = 'polymer-toggler';
 const MACROMOLECULES_MODE = 'macromolecules_mode';
 const MOLECULES_MODE = 'molecules_mode';

ketcher-autotests/package.json

@@ -24,7 +24,7 @@
   "author": "Nitvex",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.37.0",
+    "@playwright/test": "^1.39.0",
     "eslint": "^8.44.0",
     "lint-staged": "^13.1.2",
     "prettier": "2.8.4"

ketcher-autotests/tests/API/api-set-get-molecule.spec.ts

@@ -146,20 +146,24 @@ test.describe('Tests for API setMolecule/getMolecule', () => {
     */
     const ignoredLineIndigo = 1;
     const orEnantiomer = await readFileContents(
-      'tests/test-data/or-enantiomer.mol',
+      'tests/test-data/Molfiles-V3000/or-enantiomer.mol',
     );
     await waitForSpinnerFinishedWork(
       page,
       async () => await setMolecule(page, orEnantiomer),
     );
 
     const expectedFile = await getMolfile(page, 'v3000');
-    await saveToFile('test-data-for-enatiomer.mol', expectedFile);
+    await saveToFile(
+      'Molfiles-V3000/test-data-for-enatiomer.mol',
+      expectedFile,
+    );
 
     const { fileExpected: molFileExpected, file: molFile } =
       await receiveFileComparisonData({
         page,
-        expectedFileName: 'tests/test-data/test-data-for-enatiomer.mol',
+        expectedFileName:
+          'tests/test-data/Molfiles-V3000/test-data-for-enatiomer.mol',
         metaDataIndexes: [ignoredLineIndigo],
         fileFormat: 'v3000',
       });