#3914 Add support for opening structures in CDX format embedded into …

…MS PowerPoint fix concurrent generateImageAsBase64 requests, add tests

ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts

@@ -0,0 +1,28 @@
+import { test } from '@playwright/test';
+import {
+  waitForPageInit,
+  selectTopPanelButton,
+  TopPanelButton,
+  openFile,
+  takeEditorScreenshot,
+} from '@utils';
+
+test.describe.only('PPTX files', () => {
+  test.beforeEach(async ({ page }) => {
+    await waitForPageInit(page);
+  });
+
+  test('open pptx file', async ({ page }) => {
+    await selectTopPanelButton(TopPanelButton.Open, page);
+    await openFile('PPTX/pptx-with-chem-draw.pptx', page);
+    await takeEditorScreenshot(page);
+    await page.getByText('Structure 2').click();
+    await takeEditorScreenshot(page);
+  });
+
+  test('open empty pptx file', async ({ page }) => {
+    await selectTopPanelButton(TopPanelButton.Open, page);
+    await openFile('PPTX/pptx-empty.pptx', page);
+    await takeEditorScreenshot(page);
+  });
+});

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

@@ -35,16 +35,27 @@
 }
 
 .menuListWrapper {
-  background: @color-background-canvas;
-  padding: 2em 1em;
+  background: @gray-background-color;
+  padding: 16px 8px;
   border-radius: 8px;
   flex: 1;
+  overflow-y: auto;
 
   > ul {
     background: @color-background-primary;
 
     > li {
       padding: 0.5em;
+
+      &:hover {
+        background: @color-spec-button-primary-hover !important;
+        color: white;
+      }
+    }
+
+    :global(.Mui-selected) {
+      background: @color-button-primary-clicked !important;
+      color: white;
     }
   }
 

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

@@ -59,7 +59,7 @@ export const CDXStructuresViewer = ({
     } else {
       inputHandler(itemsMap[selectedIndex].struct);
     }
-  }, [itemsMap, selectedIndex]);
+  }, [inputHandler, itemsMap, selectedIndex]);
 
   const getImages = useCallback(() => {
     const options = { outputFormat: 'png', bondThickness: 1 };
@@ -84,7 +84,7 @@ export const CDXStructuresViewer = ({
         .catch((error) => {
           return {
             struct: str,
-            error: error.message,
+            error: error.message || error,
           };
         });
     });
@@ -137,7 +137,7 @@ export const CDXStructuresViewer = ({
             <div className={styles.image}>
               <img
                 src={`data:image/png+xml;base64,${itemsMap[selectedIndex]?.imageUrl}`}
-                alt={`preview of a structure #${selectedIndex}`}
+                alt={`preview of a structure #${selectedIndex + 1}`}
               />
             </div>
           )}

packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.ts

@@ -55,6 +55,7 @@ function handle(
   handler: HandlerType,
   options?: CommandOptions,
   messageType?: Command,
+  inputData?: string,
 ) {
   module.then((indigo: IndigoStandalone) => {
     const indigoOptions = new indigo.MapStringString();
@@ -66,12 +67,14 @@ function handle(
         type: messageType,
         payload,
         hasError: false,
+        inputData,
       };
     } catch (error) {
       msg = {
         type: messageType,
         hasError: true,
         error: error as string,
+        inputData,
       };
     }
 
@@ -103,6 +106,7 @@ self.onmessage = (e: MessageEvent<InputMessage<CommandData>>) => {
           'render-bond-line-width': data.bondThickness,
         },
         Command.GenerateImageAsBase64,
+        data.struct,
       );
       break;
     }

packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.types.ts

@@ -165,11 +165,13 @@ interface OutputMessageBase {
 interface OutputMessageWithError extends OutputMessageBase {
   hasError: true;
   error: string;
+  inputData?: string;
 }
 
 interface OutputMessageWithoutError<T> extends OutputMessageBase {
   hasError?: false;
   payload: T;
+  inputData?: string;
 }
 
 export type OutputMessage<T> =

packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts

@@ -681,7 +681,7 @@ class IndigoService implements StructService {
   }
 
   generateImageAsBase64(
-    data: string,
+    inputData: string,
     options: GenerateImageOptions = {
       outputFormat: 'png',
       backgroundColor: '',
@@ -693,10 +693,13 @@ class IndigoService implements StructService {
     return new Promise((resolve, reject) => {
       const action = ({ data }: OutputMessageWrapper) => {
         const msg: OutputMessage<string> = data;
-        if (!msg.hasError) {
-          resolve(msg.payload);
-        } else {
-          reject(msg.error);
+
+        if (msg.inputData === inputData) {
+          if (!msg.hasError) {
+            resolve(msg.payload);
+          } else {
+            reject(msg.error);
+          }
         }
       };
 
@@ -706,7 +709,7 @@ class IndigoService implements StructService {
       };
 
       const commandData: GenerateImageCommandData = {
-        struct: data,
+        struct: inputData,
         outputFormat: outputFormat || 'png',
         backgroundColor,
         bondThickness,