#5362 - Sending ACS parameters when requesting render to PNG and SVG

packages/ketcher-core/src/domain/services/struct/structService.types.ts

@@ -153,7 +153,6 @@ export type OutputFormatType = 'png' | 'svg';
 export interface GenerateImageOptions extends StructServiceOptions {
   outputFormat: OutputFormatType;
   backgroundColor?: string;
-  bondThickness: number;
 }
 
 export interface StructService {

packages/ketcher-core/src/infrastructure/services/struct/remoteStructService.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { defaultBondThickness, CoreEditor } from 'application/editor';
+import { CoreEditor } from 'application/editor';
 import {
   AromatizeData,
   AromatizeResult,
@@ -131,6 +131,18 @@ function indigoCall(
   };
 }
 
+export function pickStandardServerOptions(options?: StructServiceOptions) {
+  return {
+    'dearomatize-on-load': options?.['dearomatize-on-load'],
+    'smart-layout': options?.['smart-layout'],
+    'ignore-stereochemistry-errors': options?.['ignore-stereochemistry-errors'],
+    'mass-skip-error-on-pseudoatoms':
+      options?.['mass-skip-error-on-pseudoatoms'],
+    'gross-formula-add-rsites': options?.['gross-formula-add-rsites'],
+    'gross-formula-add-isotopes': options?.['gross-formula-add-isotopes'],
+  };
+}
+
 export class RemoteStructService implements StructService {
   private readonly apiPath: string;
   private readonly defaultOptions: StructServiceOptions;
@@ -162,6 +174,14 @@ export class RemoteStructService implements StructService {
     );
   }
 
+  private getStandardServerOptions(options?: StructServiceOptions) {
+    if (!options) {
+      return this.defaultOptions;
+    }
+
+    return pickStandardServerOptions(options);
+  }
+
   async info(): Promise<InfoResult> {
     let indigoVersion: string;
     let imagoVersions: Array<string>;
@@ -196,7 +216,17 @@ export class RemoteStructService implements StructService {
     const monomerLibrary = JSON.stringify(
       CoreEditor.provideEditorInstance()?.monomersLibraryParsedJson,
     );
-    const expandedOptions = { monomerLibrary, ...options };
+    const expandedOptions = {
+      monomerLibrary,
+      ...this.getStandardServerOptions(options),
+      'bond-length-unit': options?.['bond-length-unit'],
+      'bond-length': options?.['bond-length'],
+      'reaction-component-margin-size-unit':
+        options?.['reaction-component-margin-size-unit'],
+      'reaction-component-margin-size':
+        options?.['reaction-component-margin-size'],
+      'image-resolution': options?.['image-resolution'],
+    };
 
     return indigoCall(
       'POST',
@@ -211,13 +241,26 @@ export class RemoteStructService implements StructService {
     data: LayoutData,
     options?: StructServiceOptions,
   ): Promise<LayoutResult> {
+    const expandedOptions = {
+      ...this.getStandardServerOptions(options),
+
+      'output-content-type': 'application/json',
+      'bond-length-unit': options?.['bond-length-unit'],
+      'bond-length': options?.['bond-length'],
+      'reaction-component-margin-size-unit':
+        options?.['reaction-component-margin-size-unit'],
+      'reaction-component-margin-size':
+        options?.['reaction-component-margin-size'],
+      'image-resolution': options?.['image-resolution'],
+    };
+
     return indigoCall(
       'POST',
       'indigo/layout',
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, expandedOptions);
   }
 
   clean(data: CleanData, options?: StructServiceOptions): Promise<CleanResult> {
@@ -227,7 +270,7 @@ export class RemoteStructService implements StructService {
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, this.getStandardServerOptions(options));
   }
 
   aromatize(
@@ -240,7 +283,7 @@ export class RemoteStructService implements StructService {
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, this.getStandardServerOptions(options));
   }
 
   dearomatize(
@@ -253,7 +296,7 @@ export class RemoteStructService implements StructService {
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, this.getStandardServerOptions(options));
   }
 
   calculateCip(
@@ -266,7 +309,7 @@ export class RemoteStructService implements StructService {
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, this.getStandardServerOptions(options));
   }
 
   automap(
@@ -279,7 +322,7 @@ export class RemoteStructService implements StructService {
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, this.getStandardServerOptions(options));
   }
 
   check(data: CheckData, options?: StructServiceOptions): Promise<CheckResult> {
@@ -289,7 +332,7 @@ export class RemoteStructService implements StructService {
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, this.getStandardServerOptions(options));
   }
 
   calculate(
@@ -302,7 +345,7 @@ export class RemoteStructService implements StructService {
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, this.getStandardServerOptions(options));
   }
 
   recognize(blob: Blob, version: string): Promise<RecognizeResult> {
@@ -340,8 +383,6 @@ export class RemoteStructService implements StructService {
     options?: GenerateImageOptions,
   ): Promise<string> {
     const outputFormat: OutputFormatType = options?.outputFormat || 'png';
-    const bondThickness: number =
-      options?.bondThickness || defaultBondThickness;
 
     return indigoCall(
       'POST',
@@ -352,8 +393,26 @@ export class RemoteStructService implements StructService {
     )(
       { struct: data },
       {
+        ...this.getStandardServerOptions(options),
+        'render-coloring': options?.['render-coloring'],
+        'render-font-size': options?.['render-font-size'],
+        'render-font-size-unit': options?.['render-font-size-unit'],
+        'render-font-size-sub': options?.['render-font-size-sub'],
+        'render-font-size-sub-unit': options?.['render-font-size-sub-unit'],
+        'image-resolution': options?.['image-resolution'],
+        'bond-length-unit': options?.['bond-length-unit'],
+        'bond-length': options?.['bond-length'],
+        'render-bond-thickness': options?.['render-bond-thickness'],
+        'render-bond-thickness-unit': options?.['render-bond-thickness-unit'],
+        'render-bond-spacing': options?.['render-bond-spacing'],
+        'render-stereo-bond-width': options?.['render-stereo-bond-width'],
+        'render-stereo-bond-width-unit':
+          options?.['render-stereo-bond-width-unit'],
+        'render-hash-spacing': options?.['render-hash-spacing'],
+        'render-hash-spacing-unit': options?.['render-hash-spacing-unit'],
+        'render-output-sheet-width': options?.['render-output-sheet-width'],
+        'render-output-sheet-height': options?.['render-output-sheet-height'],
         'render-output-format': outputFormat,
-        'render-bond-line-width': bondThickness,
         'render-label-mode': getLabelRenderModeForIndigo(),
       },
       (response) => response.then((resp) => resp.text()),
@@ -370,6 +429,6 @@ export class RemoteStructService implements StructService {
       this.apiPath,
       this.defaultOptions,
       this.customHeaders,
-    )(data, options);
+    )(data, this.getStandardServerOptions(options));
   }
 }

packages/ketcher-react/src/script/ui/state/options/index.js

@@ -64,10 +64,50 @@ export const initOptionsState = {
     validation(storage.getItem(KETCHER_SAVED_OPTIONS_KEY)),
   ),
   getServerSettings() {
-    return pick(SERVER_OPTIONS, this.settings);
+    const seriliazedServerOptions = getSerilizedServerOptions(this.settings);
+    const defaultServerOptions = pick(SERVER_OPTIONS, this.settings);
+
+    return {
+      ...defaultServerOptions,
+      ...seriliazedServerOptions,
+    };
   },
 };
 
+function getSerilizedServerOptions(options) {
+  let newOptions = {
+    'render-coloring': options.atomColoring,
+    'render-font-size': options.fontsz,
+    'render-font-size-unit': options.fontszUnit,
+    'render-font-size-sub': options.fontszsub,
+    'render-font-size-sub-unit': options.fontszsubUnit,
+    'image-resolution': Number(options.imageResolution),
+    'bond-length': options.bondLength,
+    'bond-length-unit': options.bondLengthUnit,
+    'render-bond-thickness': options.bondThickness,
+    'render-bond-thickness-unit': options.bondThicknessUnit,
+    'render-bond-spacing': options.bondSpacing / 100,
+    'render-stereo-bond-width': options.stereoBondWidth,
+    'render-stereo-bond-width-unit': options.stereoBondWidthUnit,
+    'render-hash-spacing': options.hashSpacing,
+    'render-hash-spacing-unit': options.hashSpacingUnit,
+    'reaction-component-margin-size': options.reactionComponentMarginSize,
+    'reaction-component-margin-size-unit':
+      options.reactionComponentMarginSizeUnit,
+  };
+
+  if (options.imageResolution === '600') {
+    newOptions = {
+      ...newOptions,
+      // TODO: change to the values from settings once they are implemented
+      'render-output-sheet-width': 11,
+      'render-output-sheet-height': 8.5,
+    };
+  }
+
+  return newOptions;
+}
+
 export function appUpdate(data) {
   return (dispatch) => {
     dispatch({ type: 'APP_OPTIONS', data });

packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.jsx

@@ -141,14 +141,7 @@ class SaveDialog extends Component {
   };
 
   changeType = (type) => {
-    const {
-      struct,
-      server,
-      options,
-      formState,
-      ignoreChiralFlag,
-      bondThickness,
-    } = this.props;
+    const { struct, server, options, formState, ignoreChiralFlag } = this.props;
 
     const errorHandler = this.context.errorHandler;
     if (this.isImageFormat(type)) {
@@ -161,11 +154,12 @@ class SaveDialog extends Component {
         structStr,
         isLoading: true,
       });
-      const options = {};
-      options.outputFormat = type;
-      options.bondThickness = bondThickness;
+      const serverOptions = { ...options };
+
+      serverOptions.outputFormat = type;
+
       return server
-        .generateImageAsBase64(structStr, options)
+        .generateImageAsBase64(structStr, serverOptions)
         .then((base64) => {
           this.setState({
             disableControls: false,

packages/ketcher-standalone/package.json

@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "indigo-ketcher": "1.24.0-rc.2",
+    "indigo-ketcher": "1.25.0-dev.3",
     "ketcher-core": "*"
   },
   "devDependencies": {

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

@@ -102,8 +102,6 @@ self.onmessage = (e: MessageEvent<InputMessage<CommandData>>) => {
           ...data.options,
           'render-output-format': data.outputFormat,
           'render-background-color': data.backgroundColor,
-          'render-coloring': true,
-          'render-bond-line-width': data.bondThickness,
         },
         Command.GenerateImageAsBase64,
         data.struct,