4008 design implementation is different from the reference design

ketcher-autotests/tests/test-data/KET/simple-objects-with-changes-expected.ket

@@ -10,13 +10,13 @@
                     "mode": "line",
                     "pos": [
                         {
-                            "x": -0.16486111111109558,
-                            "y": -1.1111111111111125,
+                            "x": -0.16486111111109203,
+                            "y": -1.1111111111111134,
                             "z": 0
                         },
                         {
-                            "x": 9.835138888888903,
-                            "y": -1.1611111111111114,
+                            "x": 9.835138888888904,
+                            "y": -1.1611111111111123,
                             "z": 0
                         }
                     ]
@@ -29,11 +29,11 @@
                     "pos": [
                         {
                             "x": 14.935138888888904,
-                            "y": -0.11111111111111249,
+                            "y": -0.11111111111111338,
                             "z": 0
                         },
                         {
-                            "x": 23.960138888888906,
+                            "x": 23.960138888888903,
                             "y": -4.236111111111114,
                             "z": 0
                         }
@@ -46,13 +46,13 @@
                     "mode": "ellipse",
                     "pos": [
                         {
-                            "x": 3.8351388888889044,
-                            "y": -3.8361111111111117,
+                            "x": 3.835138888888906,
+                            "y": -3.836111111111112,
                             "z": 0
                         },
                         {
-                            "x": 12.610138888888901,
-                            "y": -9.611111111111114,
+                            "x": 12.610138888888903,
+                            "y": -9.611111111111112,
                             "z": 0
                         }
                     ]

packages/ketcher-core/src/domain/entities/struct.ts

@@ -806,6 +806,10 @@ export class Struct {
       item.pos = item.pos.map((p) => p.scaled(scale));
       item.position = item.position.scaled(scale);
     });
+
+    this.simpleObjects.forEach((simpleObjects) => {
+      simpleObjects.pos = simpleObjects.pos.map((p) => p.scaled(scale));
+    });
   }
 
   rescale() {

packages/ketcher-react/src/script/ui/utils/fileOpener.js

@@ -76,9 +76,11 @@ function throughFileReader(file) {
           cfb.FullPaths.forEach((path) => {
             if (path.endsWith('.bin')) {
               const ole = CFB.find(cfb, path);
-              const sdf = CFB.find(CFB.parse(ole.content), 'CONTENTS');
-              const base64String = arrayBufferToBase64(sdf.content);
-              structures.push(base64String);
+              const sdf = CFB.find(CFB.parse(ole?.content), 'CONTENTS');
+              const base64String = arrayBufferToBase64(sdf?.content);
+              if (base64String.startsWith('VmpDRDAxMDAEAw')) {
+                structures.push(base64String);
+              }
             }
           });
           content = { structures, isPPTX: true };

packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less

@@ -74,3 +74,8 @@
 .copyButton {
   .button-primary();
 }
+
+.loadingContainer > div{
+  margin: auto;
+  padding: 1em;
+}

packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.tsx

@@ -16,14 +16,13 @@
 
 import { BaseCallProps, BaseProps } from '../../../modal.types';
 import { FC, useEffect, useState } from 'react';
-import { Dialog } from '../../../../components';
+import { Dialog, LoadingCircles } from '../../../../components';
 import classes from './Open.module.less';
 import Recognize from '../../process/Recognize/Recognize';
 import { fileOpener } from '../../../../../utils/';
 import { DialogActionButton } from './components/DialogActionButton';
 import { ViewSwitcher } from './components/ViewSwitcher';
 import { getFormatMimeTypeByFileName } from 'ketcher-core';
-
 interface OpenProps {
   server: any;
   errorHandler: (err: string) => void;
@@ -88,6 +87,7 @@ const Open: FC<Props> = (props) => {
   const [fileName, setFileName] = useState<string>('');
   const [opener, setOpener] = useState<any>();
   const [currentState, setCurrentState] = useState(MODAL_STATES.idle);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (server) {
@@ -98,6 +98,7 @@ const Open: FC<Props> = (props) => {
   }, [server]);
 
   const onFileLoad = (files) => {
+    setIsLoading(true);
     const onLoad = (fileContent) => {
       if (fileContent.isPPTX) {
         setStructStr('');
@@ -107,8 +108,12 @@ const Open: FC<Props> = (props) => {
         setStructStr(fileContent);
         setCurrentState(MODAL_STATES.textEditor);
       }
+      setIsLoading(false);
+    };
+    const onError = () => {
+      setIsLoading(false);
+      errorHandler('Error processing file');
     };
-    const onError = () => errorHandler('Error processing file');
 
     setFileName(files[0].name);
     opener.chosenOpener(files[0]).then(onLoad, onError);
@@ -178,6 +183,11 @@ const Open: FC<Props> = (props) => {
         autoFocus
         structList={structList}
       />
+      {isLoading && (
+        <div className={classes.loadingContainer}>
+          <LoadingCircles />
+        </div>
+      )}
     </Dialog>
   );
 };

packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.module.less

@@ -18,12 +18,13 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  margin: 1em 2em;
+  padding: 1em 2em;
   gap: 1em;
   width: 60vw;
   height: 50vh;
   max-width: 60em;
   max-height: 30em;
+  border-bottom: 1px solid #e1e5ea;
 }
 
 .structuresWrapper {
@@ -35,17 +36,22 @@
 }
 
 .menuListWrapper {
-  background: @gray-background-color;
-  padding: 16px 8px;
+  background: @color-background-panel;
+  padding: 12px 8px;
   border-radius: 8px;
   flex: 1;
-  overflow-y: auto;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
 
   > ul {
+    overflow: auto;
     background: @color-background-primary;
+    height: inherit;
 
     > li {
       padding: 0.5em;
+      font-size: 12px !important;
 
       &:hover {
         background: @color-spec-button-primary-hover !important;
@@ -61,7 +67,6 @@
 
   > .header {
     color: @color-text-secondary;
-    font-size: 1rem;
     margin-bottom: 1em;
   }
 }
@@ -94,7 +99,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border: solid @border-color;
+  border: 1px solid @border-color;
   border-radius: 8px;
   padding: 0.5em;
   width: 100%;

packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { MenuList } from '@mui/material';
 import MenuItem from '@mui/material/MenuItem';
@@ -59,41 +59,42 @@ export const CDXStructuresViewer = ({
     }
   }, [inputHandler, itemsMap, selectedIndex]);
 
-  const getImages = useCallback(() => {
-    const itemsList = {};
+  const getImage = (str, index) => {
     setLoading(true);
-    const promises = structList.map((str) => {
-      return parseStruct(str, server)
-        .then((struct) => {
-          return {
-            base64struct: str,
-            struct,
-          };
-        })
-        .catch((error) => {
-          return {
-            base64struct: str,
-            error: error.message || error,
-          };
-        });
-    });
-    Promise.allSettled(promises).then((values) => {
-      values.forEach((el, index) => {
-        if (el.status === 'fulfilled') {
-          itemsList[index] = el.value;
-        }
+    parseStruct(str, server)
+      .then((struct) => {
+        const object = {
+          base64struct: str,
+          struct,
+        };
+        setItemsMap((state) => ({ ...state, [index]: object }));
+      })
+      .catch((error) => {
+        const object = {
+          base64struct: str,
+          error: error.message || error,
+        };
+        setItemsMap((state) => ({ ...state, [index]: object }));
+      })
+      .finally(() => {
+        setLoading(false);
       });
-      setItemsMap(itemsList);
-      setLoading(false);
-      setSelectedIndex(0);
-    });
-  }, [server, structList]);
+  };
 
   useEffect(() => {
-    getImages();
-  }, [getImages]);
+    if (structList[selectedIndex] && !itemsMap[selectedIndex]) {
+      getImage(structList[selectedIndex], selectedIndex);
+    }
+  }, [itemsMap, selectedIndex]);
 
   const renderStructure = (structure: item) => {
+    if (loading) {
+      return (
+        <div className={styles.centerWrapper}>
+          <LoadingCircles />
+        </div>
+      );
+    }
     if (structure?.error) {
       return <div>Error: {itemsMap[selectedIndex]?.error}</div>;
     }
@@ -116,20 +117,19 @@ export const CDXStructuresViewer = ({
         </div>
       );
     }
-    const menuList = Object.values(itemsMap) || [];
     return (
       <div className={styles.structuresWrapper}>
         <div className={styles.menuListWrapper}>
           <div className={styles.header}>Select structure</div>
           <MenuList>
-            {menuList.map((value, index) => (
+            {structList.map((value, index) => (
               <MenuItem
-                key={value.base64struct + index}
+                key={value + index}
                 selected={index === selectedIndex}
                 onClick={() => setSelectedIndex(index)}
               >
                 {`Structure ${index + 1}`}
-                {value.error && <Icon name="error" />}
+                {itemsMap[index]?.error && <Icon name="error" />}
               </MenuItem>
             ))}
           </MenuList>
@@ -146,13 +146,7 @@ export const CDXStructuresViewer = ({
       <div>
         File: <span className={styles.fileName}>{fileName}</span>
       </div>
-      {loading ? (
-        <div className={styles.centerWrapper}>
-          <LoadingCircles />
-        </div>
-      ) : (
-        renderStructures()
-      )}
+      {renderStructures()}
     </div>
   );
 };

packages/ketcher-react/src/style/variables.less

@@ -61,6 +61,7 @@
 @color-background-canvas: #f2f2f2;
 @color-background-canvas-light: #fcfcfc;
 @color-background-secondary: #f8feff;
+@color-background-panel: #F5F6F7;
 
 // Buttons
 @color-button-primary: #005662;