diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts new file mode 100644 index 0000000000..429b637ac6 --- /dev/null +++ b/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('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); + }); +}); diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-empty-pptx-file-1-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-empty-pptx-file-1-chromium-linux.png new file mode 100644 index 0000000000..dd7b855481 Binary files /dev/null and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-empty-pptx-file-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-pptx-file-1-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-pptx-file-1-chromium-linux.png new file mode 100644 index 0000000000..6315336eaf Binary files /dev/null and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-pptx-file-1-chromium-linux.png differ diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-pptx-file-2-chromium-linux.png b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-pptx-file-2-chromium-linux.png new file mode 100644 index 0000000000..4c1585241e Binary files /dev/null and b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PPTX-Files/pptx-files.spec.ts-snapshots/PPTX-files-open-pptx-file-2-chromium-linux.png differ diff --git a/ketcher-autotests/tests/test-data/PPTX/pptx-empty.pptx b/ketcher-autotests/tests/test-data/PPTX/pptx-empty.pptx new file mode 100644 index 0000000000..bc334d1442 Binary files /dev/null and b/ketcher-autotests/tests/test-data/PPTX/pptx-empty.pptx differ diff --git a/ketcher-autotests/tests/test-data/PPTX/pptx-with-chem-draw.pptx b/ketcher-autotests/tests/test-data/PPTX/pptx-with-chem-draw.pptx new file mode 100644 index 0000000000..63b354f85f Binary files /dev/null and b/ketcher-autotests/tests/test-data/PPTX/pptx-with-chem-draw.pptx differ diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.module.less index 7ad6f28c89..db8a21b03d 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.module.less +++ b/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; } } diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.tsx index aa8b44cc9e..dad101004d 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/CDXStructuresViewer/CDXStructuresViewer.tsx +++ b/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 = ({
{`preview
)} diff --git a/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.ts b/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.ts index 03cc07ff56..bbcdfad1c1 100644 --- a/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.ts +++ b/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>) => { 'render-bond-line-width': data.bondThickness, }, Command.GenerateImageAsBase64, + data.struct, ); break; } diff --git a/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.types.ts b/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.types.ts index 07712badb9..78bd459775 100644 --- a/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.types.ts +++ b/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 extends OutputMessageBase { hasError?: false; payload: T; + inputData?: string; } export type OutputMessage = diff --git a/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts b/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts index 5d7c639c6f..853ca83b53 100644 --- a/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts +++ b/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,12 @@ class IndigoService implements StructService { return new Promise((resolve, reject) => { const action = ({ data }: OutputMessageWrapper) => { const msg: OutputMessage = 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 +708,7 @@ class IndigoService implements StructService { }; const commandData: GenerateImageCommandData = { - struct: data, + struct: inputData, outputFormat: outputFormat || 'png', backgroundColor, bondThickness,