ketcher-react 2.7.0-rc.2 → 2.7.0-rc.4

package/dist/index.modern.js

@@ -24,7 +24,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
-import { KetSerializer, MolSerializer, Ketcher, FormatterFactory, StereLabelStyleType, StereoColoringType, Bond as Bond$2, Elements, AtomList, StereoLabel, findStereoAtoms, RxnArrowMode, SimpleObjectMode, SGroup, Pile, getStereoAtomsMap, identifyStructFormat, ChemicalMimeType, SdfSerializer, FunctionalGroupsProvider, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, formatProperties, fromAtomsAttrs, Vec2, FunctionalGroup, Fragment as Fragment$1, OperationType, fracAngle, Action, fromSgroupDeletion, fromFragmentDeletion, fromAtomAddition, fromBondAddition, Atom as Atom$2, bondChangingAction, fromBondsAttrs, fromChain, getItemsToFuse, getHoverToFuse, fromItemsFuse, fromStereoFlagUpdate, Scale, checkOverlapping, fromSeveralSgroupAddition, SgContexts, fromSgroupAction, fromSimpleObjectResizing, fromArrowResizing, fromMultipleMove, fromTextDeletion, fromTextUpdating, fromOneAtomDeletion, fromOneBondDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromPaste, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromBondAlign, fromSimpleObjectAddition, fromTemplateOnBondAction, fromTemplateOnCanvas, fromTemplateOnAtom, fromTextCreation, fromHighlightCreate, fromHighlightClear, fromNewCanvas, Struct, Render, fromDescriptorsAlign, setExpandSGroup, SupportedFormat, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, Generics, TextCommand } from 'ketcher-core';
+import { KetSerializer, MolSerializer, Ketcher, FormatterFactory, StereLabelStyleType, StereoColoringType, Bond as Bond$2, Elements, AtomList, StereoLabel, findStereoAtoms, RxnArrowMode, SimpleObjectMode, SGroup, Pile, getStereoAtomsMap, identifyStructFormat, SupportedFormat, ChemicalMimeType, SdfSerializer, FunctionalGroupsProvider, Render, SaltsAndSolventsProvider, KetcherAsyncEvents, ElementColor, formatProperties, fromAtomsAttrs, Vec2, FunctionalGroup, Fragment as Fragment$1, OperationType, fracAngle, Action, fromSgroupDeletion, fromFragmentDeletion, fromAtomAddition, fromBondAddition, Atom as Atom$2, bondChangingAction, fromBondsAttrs, fromChain, getItemsToFuse, getHoverToFuse, fromItemsFuse, fromStereoFlagUpdate, Scale, checkOverlapping, fromSeveralSgroupAddition, SgContexts, fromSgroupAction, fromSimpleObjectResizing, fromArrowResizing, fromMultipleMove, fromTextDeletion, fromTextUpdating, fromOneAtomDeletion, fromOneBondDeletion, fromArrowDeletion, fromPlusDeletion, fromSimpleObjectDeletion, fromPaste, RGroup as RGroup$2, fromRGroupFragment, fromUpdateIfThen, fromRGroupAttrs, fromArrowAddition, fromPlusAddition, fromRotate, fromFlip, fromBondAlign, fromSimpleObjectAddition, fromTemplateOnBondAction, fromTemplateOnCanvas, fromTemplateOnAtom, fromTextCreation, fromHighlightCreate, fromHighlightClear, fromNewCanvas, Struct, fromDescriptorsAlign, setExpandSGroup, getPropertiesByFormat, StereoFlag, getPropertiesByImgFormat, Generics, TextCommand } from 'ketcher-core';
 import * as React from 'react';
 import React__default, { createRef, Component, useState, useEffect, useRef, useMemo, createElement, forwardRef, useCallback, useLayoutEffect, Fragment as Fragment$2 } from 'react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -34,7 +34,7 @@ import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import clsx from 'clsx';
 import _typeof from '@babel/runtime/helpers/typeof';
 import Ajv from 'ajv';
-import { pick, range, capitalize, omit, without, findLastIndex, findIndex, pickBy, isEmpty, isEqual, throttle, debounce, xor, upperFirst, escapeRegExp, flow, filter, reduce } from 'lodash/fp';
+import { pick, range, capitalize, omit, without, findLastIndex, findIndex, pickBy, isEmpty, isEqual, escapeRegExp, flow, filter, reduce, throttle, debounce, xor, upperFirst } from 'lodash/fp';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import ReactDOM from 'react-dom';
 import { connect, useDispatch, useSelector, Provider } from 'react-redux';
@@ -396,8 +396,8 @@ function exec(action) {
   return enabled;
 }
 
-function ownKeys$15(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$15(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$15(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$15(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$16(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$16(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$16(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$16(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var editor = {
   resetToSelect: {
     title: 'Reset to Select Tool',
@@ -645,7 +645,7 @@ var optionsSchema = {
   title: 'Settings',
   type: 'object',
   required: [],
-  properties: _objectSpread$15(_objectSpread$15(_objectSpread$15(_objectSpread$15(_objectSpread$15({}, editor), render), server), debug), miew)
+  properties: _objectSpread$16(_objectSpread$16(_objectSpread$16(_objectSpread$16(_objectSpread$16({}, editor), render), server), debug), miew)
 };
 function getDefaultOptions() {
   if (!optionsSchema.properties) return {};
@@ -706,8 +706,8 @@ var storage = {
   }
 };
 
-function ownKeys$14(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$14(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$14(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$14(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$15(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$15(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$15(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$15(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var initOptionsState = {
   app: {
     server: false,
@@ -804,27 +804,27 @@ function optionsReducer() {
   var action = arguments.length > 1 ? arguments[1] : undefined;
   var type = action.type,
       data = action.data;
-  if (type === 'APP_OPTIONS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
-    app: _objectSpread$14(_objectSpread$14({}, state.app), data)
+  if (type === 'APP_OPTIONS') return _objectSpread$15(_objectSpread$15({}, state), {}, {
+    app: _objectSpread$15(_objectSpread$15({}, state.app), data)
   });
-  if (type === 'SAVE_SETTINGS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
+  if (type === 'SAVE_SETTINGS') return _objectSpread$15(_objectSpread$15({}, state), {}, {
     settings: data
   });
-  if (type === 'SAVE_CHECK_OPTS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
+  if (type === 'SAVE_CHECK_OPTS') return _objectSpread$15(_objectSpread$15({}, state), {}, {
     check: data
   });
-  if (type === 'CHANGE_ANALYSE') return _objectSpread$14(_objectSpread$14({}, state), {}, {
-    analyse: _objectSpread$14(_objectSpread$14(_objectSpread$14({}, state.analyse), data), {}, {
+  if (type === 'CHANGE_ANALYSE') return _objectSpread$15(_objectSpread$15({}, state), {}, {
+    analyse: _objectSpread$15(_objectSpread$15(_objectSpread$15({}, state.analyse), data), {}, {
       loading: false
     })
   });
-  if (type === 'ANALYSE_LOADING') return _objectSpread$14(_objectSpread$14({}, state), {}, {
-    analyse: _objectSpread$14(_objectSpread$14({}, state.analyse), {}, {
+  if (type === 'ANALYSE_LOADING') return _objectSpread$15(_objectSpread$15({}, state), {}, {
+    analyse: _objectSpread$15(_objectSpread$15({}, state.analyse), {}, {
       loading: true
     })
   });
-  if (recognizeActions.includes(type)) return _objectSpread$14(_objectSpread$14({}, state), {}, {
-    recognize: _objectSpread$14(_objectSpread$14({}, state.recognize), data)
+  if (recognizeActions.includes(type)) return _objectSpread$15(_objectSpread$15({}, state), {}, {
+    recognize: _objectSpread$15(_objectSpread$15({}, state.recognize), data)
   });
   return state;
 }
@@ -1127,8 +1127,8 @@ function getSdataDefault() {
   return schema[context][fieldName] ? schema[context][fieldName].properties.fieldValue["default"] : '';
 }
 
-function ownKeys$13(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$13(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$13(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$13(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$14(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$14(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$14(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$14(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var initSdata = function initSdata(schema) {
   var isCustomShema = schema.key === 'Custom';
   var context = isCustomShema ? getSdataDefault(sdataCustomSchema, 'context') : getSdataDefault(sdataSchema);
@@ -1149,7 +1149,7 @@ var initSdata = function initSdata(schema) {
 };
 function sdataReducer(state, action) {
   if (action.data.result.init) {
-    return correctErrors(_objectSpread$13(_objectSpread$13({}, state), {}, {
+    return correctErrors(_objectSpread$14(_objectSpread$14({}, state), {}, {
       result: Object.assign({}, state.result, action.data.result)
     }), action.data);
   }
@@ -1157,7 +1157,7 @@ function sdataReducer(state, action) {
   var actionFieldName = action.data.result.fieldName;
   var newstate = null;
   if (actionContext !== state.result.context) newstate = onContextChange(state, action.data.result);else if (actionFieldName !== state.result.fieldName) newstate = onFieldNameChange(state, action.data.result);
-  newstate = newstate || _objectSpread$13(_objectSpread$13({}, state), {}, {
+  newstate = newstate || _objectSpread$14(_objectSpread$14({}, state), {}, {
     result: Object.assign({}, state.result, action.data.result)
   });
   return correctErrors(newstate, action.data);
@@ -1181,7 +1181,7 @@ var onContextChange = function onContextChange(state, payload) {
   var fValue = fieldValue;
   if (fValue === state.result.fieldValue) fValue = getSdataDefault(sdataCustomSchema, 'fieldValue');
   return {
-    result: _objectSpread$13(_objectSpread$13({}, payload), {}, {
+    result: _objectSpread$14(_objectSpread$14({}, payload), {}, {
       context: context,
       fieldName: fieldName,
       fieldValue: fValue
@@ -1195,7 +1195,7 @@ var onFieldNameChange = function onFieldNameChange(state, payload) {
   if (sdataSchema[context][fieldName]) fieldValue = getSdataDefault(sdataSchema, context, fieldName);
   if (fieldValue === state.result.fieldValue && sdataSchema[context][state.result.fieldName]) fieldValue = '';
   return {
-    result: _objectSpread$13(_objectSpread$13({}, payload), {}, {
+    result: _objectSpread$14(_objectSpread$14({}, payload), {}, {
       fieldName: fieldName,
       fieldValue: fieldValue
     })
@@ -1333,8 +1333,8 @@ function formReducer(state, action, formName) {
 var INDIGO_VERIFICATION = 'INDIGO_VERIFICATION';
 var ANALYZING_FILE = 'ANALYZING_FILE';
 
-function ownKeys$12(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$12(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$12(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$12(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$13(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$13(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$13(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$13(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function indigoVerification(data) {
   return {
     type: INDIGO_VERIFICATION,
@@ -1359,13 +1359,13 @@ function requestReducer () {
   switch (type) {
     case INDIGO_VERIFICATION:
       {
-        return _objectSpread$12(_objectSpread$12({}, state), {}, {
+        return _objectSpread$13(_objectSpread$13({}, state), {}, {
           indigoVerification: data
         });
       }
     case ANALYZING_FILE:
       {
-        return _objectSpread$12(_objectSpread$12({}, state), {}, {
+        return _objectSpread$13(_objectSpread$13({}, state), {}, {
           isAnalyzingFile: data
         });
       }
@@ -1638,12 +1638,12 @@ var attachSchema = {
 };
 
 var _excluded$E = ["type", "radiobuttons"];
-function ownKeys$11(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$11(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$11(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$11(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$12(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$12(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$12(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$12(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DefaultStereoGroupNumber = 1;
 function fromElement(selem) {
   if (selem.label === 'R#') {
-    return _objectSpread$11({
+    return _objectSpread$12({
       type: 'rlabel',
       values: fromRlabel(selem.rglabel)
     }, selem);
@@ -1803,7 +1803,7 @@ function fromBond(sbond) {
   };
 }
 function toBond(bond) {
-  return _objectSpread$11({
+  return _objectSpread$12({
     topology: bond.topology,
     reactingCenterStatus: bond.center
   }, toBondType(bond.type));
@@ -1893,7 +1893,7 @@ function toSgroup(sgroup) {
   var type = sgroup.type,
       radiobuttons = sgroup.radiobuttons,
       props = _objectWithoutProperties(sgroup, _excluded$E);
-  var attrs = _objectSpread$11({}, props);
+  var attrs = _objectSpread$12({}, props);
   var absolute = 'absolute';
   var attached = 'attached';
   switch (radiobuttons) {
@@ -2394,8 +2394,8 @@ var tools$1 = typeSchema$1["enum"].reduce(function (res, type, i) {
 }, toolActions);
 
 var _excluded$D = ["rescale", "fragment"];
-function ownKeys$10(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$10(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$10(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$11(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$11(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$11(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$11(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function onAction(action) {
   if (action && action.dialog) {
     return {
@@ -2422,6 +2422,9 @@ function parseStruct(struct, server, options) {
         _options.fragment;
         var formatterOptions = _objectWithoutProperties(_options, _excluded$D);
     var format = identifyStructFormat(struct);
+    if (format === SupportedFormat.cdx) {
+      struct = "base64::".concat(struct.replace(/\s/g, ''));
+    }
     var factory = new FormatterFactory(server);
     var service = factory.create(format, formatterOptions);
     return service.getStructureFromStringAsync(struct);
@@ -2442,7 +2445,7 @@ function load(struct, options) {
               server = state.server;
               errorHandler = editor.errorHandler;
               options = options || {};
-              options = _objectSpread$10(_objectSpread$10({}, options), {}, {
+              options = _objectSpread$11(_objectSpread$11({}, options), {}, {
                 'dearomatize-on-load': editor.options()['dearomatize-on-load']
               });
               dispatch(setAnalyzingFile(true));
@@ -2870,7 +2873,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.7.0-rc.2\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
+  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.7.0-rc.4\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -2931,9 +2934,9 @@ var fullscreen = {
   }
 };
 
-function ownKeys$$(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$$(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var config = _objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$({
+function ownKeys$10(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$10(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$10(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var config = _objectSpread$10(_objectSpread$10(_objectSpread$10(_objectSpread$10(_objectSpread$10(_objectSpread$10(_objectSpread$10(_objectSpread$10(_objectSpread$10({
   clear: {
     shortcut: 'Mod+Delete',
     title: 'Clear Canvas',
@@ -6839,13 +6842,13 @@ function findIconByName(name) {
 }
 
 var _excluded$C = ["name"];
-function ownKeys$_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$_(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$$(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$$(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function Icon(_ref) {
   var name = _ref.name,
       props = _objectWithoutProperties(_ref, _excluded$C);
   var Component = findIconByName(name);
-  return jsx(Component, _objectSpread$_({}, props));
+  return jsx(Component, _objectSpread$$({}, props));
 }
 
 var classes$N = {"button-common-styles":"ActionButton-module_button-common-styles__y-hng","scrollbar":"ActionButton-module_scrollbar__lD3MH","button":"ActionButton-module_button__nfoWQ","selected":"ActionButton-module_selected__kPCxA"};
@@ -7141,8 +7144,8 @@ function usePortalStyle(_ref) {
   return [portalStyle];
 }
 
-function ownKeys$Z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$_(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
   var id = props.id,
       options = props.options,
@@ -7204,7 +7207,7 @@ var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
   return displayMultiToolItem ? jsxs("div", {
     ref: ref,
     className: classes$L.root,
-    children: [jsx(ActionButton, _objectSpread$Z(_objectSpread$Z({}, actionButtonProps), {}, {
+    children: [jsx(ActionButton, _objectSpread$_(_objectSpread$_({}, actionButtonProps), {}, {
       className: className,
       name: currentId,
       action: config[currentId],
@@ -7304,8 +7307,8 @@ var TemplatesList = function TemplatesList(props) {
 var classes$K = {"button-common-styles":"BottomToolbar-module_button-common-styles__PbtE9","scrollbar":"BottomToolbar-module_scrollbar__i1f8P","group":"BottomToolbar-module_group__b-pGt","root":"BottomToolbar-module_root__kjkSm"};
 
 var _excluded$B = ["className"];
-function ownKeys$Y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$Z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Group$1 = function Group(_ref) {
   var children = _ref.children,
       className = _ref.className;
@@ -7331,7 +7334,7 @@ var BottomToolbar = function BottomToolbar(props) {
         onAction: onAction
       })
     }), jsx(Group$1, {
-      children: jsx(ToolbarGroupItem, _objectSpread$Y({
+      children: jsx(ToolbarGroupItem, _objectSpread$Z({
         id: "template-lib"
       }, rest))
     })]
@@ -7426,15 +7429,15 @@ function prefetchRender(tmpls, baseUrl, cacheEl) {
   });
 }
 
-function ownKeys$X(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$X(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$X(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$X(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$Y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function openDialog(dispatch, dialogName, props) {
   return new Promise(function (resolve, reject) {
     dispatch({
       type: 'MODAL_OPEN',
       data: {
         name: dialogName,
-        prop: _objectSpread$X(_objectSpread$X({}, props), {}, {
+        prop: _objectSpread$Y(_objectSpread$Y({}, props), {}, {
           onResult: resolve,
           onCancel: reject
         })
@@ -7452,7 +7455,7 @@ function modalReducer() {
       return null;
     }
     var formState = formReducer(state.form, action, state.name);
-    return _objectSpread$X(_objectSpread$X({}, state), {}, {
+    return _objectSpread$Y(_objectSpread$Y({}, state), {}, {
       form: formState
     });
   }
@@ -7470,8 +7473,8 @@ function modalReducer() {
   }
 }
 
-function ownKeys$W(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$W(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$W(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$W(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$X(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$X(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$X(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$X(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function selectTmpl(tmpl) {
   return {
     type: 'TMPL_SELECT',
@@ -7571,7 +7574,7 @@ function saveUserTmpl(struct) {
       var name = _ref.name,
           attach = _ref.attach;
       tmpl.struct.name = name.trim();
-      tmpl.props = _objectSpread$W(_objectSpread$W({}, attach), {}, {
+      tmpl.props = _objectSpread$X(_objectSpread$X({}, attach), {}, {
         group: 'User Templates'
       });
       var lib = getState().templates.lib.concat(tmpl);
@@ -7610,7 +7613,7 @@ function templatesReducer() {
   if (tmplActions.includes(action.type)) return Object.assign({}, state, action.data);
   if (attachActions.includes(action.type)) {
     var attach = Object.assign({}, state.attach, action.data);
-    return _objectSpread$W(_objectSpread$W({}, state), {}, {
+    return _objectSpread$X(_objectSpread$X({}, state), {}, {
       attach: attach
     });
   }
@@ -7619,7 +7622,7 @@ function templatesReducer() {
     var lib = currentState.lib.filter(function (value) {
       return value !== action.data.tmpl;
     });
-    return _objectSpread$W(_objectSpread$W({}, currentState), {}, {
+    return _objectSpread$X(_objectSpread$X({}, currentState), {}, {
       lib: lib
     });
   }
@@ -7627,8 +7630,8 @@ function templatesReducer() {
 }
 
 var _excluded$A = ["type", "action"];
-function ownKeys$V(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$V(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$V(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$V(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$W(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$W(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$W(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$W(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function execute(activeTool, _ref) {
   var action = _ref.action,
       editor = _ref.editor,
@@ -7682,7 +7685,7 @@ function actionStateReducer () {
     case 'INIT':
       action = config['select-rectangle'].action;
     case 'ACTION':
-      activeTool = execute(state && state.activeTool, _objectSpread$V(_objectSpread$V({}, params), {}, {
+      activeTool = execute(state && state.activeTool, _objectSpread$W(_objectSpread$W({}, params), {}, {
         action: action
       }));
     case 'UPDATE':
@@ -7698,8 +7701,8 @@ function actionStateReducer () {
   }
 }
 
-function ownKeys$U(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$U(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$U(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$U(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$V(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$V(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$V(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$V(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var initialState$1 = {
   lib: [],
   functionalGroupInfo: null,
@@ -7712,9 +7715,9 @@ var functionalGroupsReducer = function functionalGroupsReducer() {
       payload = _ref.payload;
   switch (type) {
     case 'FG_INIT':
-      return _objectSpread$U(_objectSpread$U({}, state), payload);
+      return _objectSpread$V(_objectSpread$V({}, state), payload);
     case 'FG_HIGHLIGHT':
-      return _objectSpread$U(_objectSpread$U({}, state), {}, {
+      return _objectSpread$V(_objectSpread$V({}, state), {}, {
         functionalGroupInfo: payload
       });
     default:
@@ -7777,6 +7780,148 @@ function initFGTemplates(baseUrl) {
   }();
 }
 
+function ownKeys$U(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$U(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$U(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$U(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var renderCache = new Map();
+var RenderStruct = function () {
+  function RenderStruct() {
+    _classCallCheck(this, RenderStruct);
+  }
+  _createClass(RenderStruct, null, [{
+    key: "prepareStruct",
+    value:
+    function prepareStruct(struct) {
+      if (struct.sgroups.size > 0) {
+        var newStruct = struct.clone();
+        newStruct.sgroups["delete"](0);
+        return newStruct;
+      }
+      return struct;
+    }
+  }, {
+    key: "render",
+    value: function render(el, struct) {
+      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      if (el && struct) {
+        var _options$cachePrefix = options.cachePrefix,
+            cachePrefix = _options$cachePrefix === void 0 ? '' : _options$cachePrefix;
+        var cacheKey = "".concat(cachePrefix).concat(struct.name);
+        if (renderCache.has(cacheKey)) {
+          el.innerHTML = renderCache.get(cacheKey);
+          return;
+        }
+        var preparedStruct = this.prepareStruct(struct);
+        preparedStruct.initHalfBonds();
+        preparedStruct.initNeighbors();
+        preparedStruct.setImplicitHydrogen();
+        preparedStruct.markFragments();
+        var rnd = new Render(el, _objectSpread$U({
+          autoScale: true
+        }, options));
+        rnd.setMolecule(preparedStruct);
+        rnd.update(true, options.viewSz);
+        renderCache.set(cacheKey, rnd.clientArea.innerHTML);
+      }
+    }
+  }]);
+  return RenderStruct;
+}();
+
+function fileOpener(server) {
+  return new Promise(function (resolve, reject) {
+    if (global.FileReader) {
+      resolve(throughFileReader);
+    } else if (global.ActiveXObject) {
+      try {
+        var fso = new ActiveXObject('Scripting.FileSystemObject');
+        resolve(function (file) {
+          return Promise.resolve(throughFileSystemObject(fso, file));
+        });
+      } catch (e) {
+        reject(e);
+      }
+    } else if (server) {
+      resolve(server.then(function () {
+        throw Error("Server doesn't still support echo method");
+      }));
+    } else {
+      reject(new Error('Your browser does not support opening files locally'));
+    }
+  });
+}
+function throughFileReader(file) {
+  var isCDX = file.name.endsWith('cdx');
+  return new Promise(function (resolve, reject) {
+    var rd = new FileReader();
+    rd.onload = function () {
+      var content = isCDX ? rd.result.slice(37) : rd.result;
+      if (file.msClose) file.msClose();
+      resolve(content);
+    };
+    rd.onerror = function (event) {
+      reject(event);
+    };
+    isCDX ? rd.readAsDataURL(file) : rd.readAsText(file, 'UTF-8');
+  });
+}
+function throughFileSystemObject(fso, file) {
+  var fd = fso.OpenTextFile(file.name, 1);
+  var content = fd.ReadAll();
+  fd.Close();
+  return content;
+}
+
+var GREEK_SIMBOLS = {
+  Alpha: 'A',
+  alpha: 'α',
+  Beta: 'B',
+  beta: 'β',
+  Gamma: 'Г',
+  gamma: 'γ'
+};
+var greekRe = new RegExp('\\b' + Object.keys(GREEK_SIMBOLS).join('\\b|\\b') + '\\b', 'g');
+function greekify(str) {
+  return str.replace(greekRe, function (sym) {
+    return GREEK_SIMBOLS[sym];
+  });
+}
+function filterLib(lib, filter$1) {
+  var trimmedFilter = filter$1.trim();
+  var re = new RegExp(escapeRegExp(greekify(trimmedFilter)), 'i');
+  return flow(filter(function (item) {
+    return !trimmedFilter || re.test(greekify(item.struct.name)) || re.test(greekify(item.props.group));
+  }), reduce(function (res, item) {
+    if (!res[item.props.group]) res[item.props.group] = [item];else res[item.props.group].push(item);
+    return res;
+  }, {}))(lib);
+}
+function filterFGLib(lib, filter$1) {
+  var trimmedFilter = filter$1.trim();
+  var re = new RegExp(escapeRegExp(greekify(trimmedFilter)), 'i');
+  var searchFunction = function searchFunction(item) {
+    var fields = [item.struct.name, item.props.abbreviation, item.props.name].filter(Boolean);
+    return fields.some(function (field) {
+      return re.test(greekify(field));
+    });
+  };
+  return flow(filter(function (item) {
+    return !trimmedFilter || searchFunction(item);
+  }), reduce(function (res, item) {
+    if (!res[item.props.group]) res[item.props.group] = [item];else res[item.props.group].push(item);
+    return res;
+  }, {}))(lib);
+}
+var getSelectOptionsFromSchema = function getSelectOptionsFromSchema(schema) {
+  return schema["enum"].reduce(function (options, value, index) {
+    var _schema$enumNames$ind, _schema$enumNames;
+    options.push({
+      value: value,
+      label: (_schema$enumNames$ind = schema === null || schema === void 0 ? void 0 : (_schema$enumNames = schema.enumNames) === null || _schema$enumNames === void 0 ? void 0 : _schema$enumNames[index]) !== null && _schema$enumNames$ind !== void 0 ? _schema$enumNames$ind : value
+    });
+    return options;
+  }, []);
+};
+
 function ownKeys$T(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$T(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$T(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$T(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var initialState = {
@@ -7803,22 +7948,37 @@ var initSaltsAndSolvents = function initSaltsAndSolvents(lib) {
     }
   };
 };
+var prerenderPartOfStructures = function prerenderPartOfStructures(saltsAndSolvents, settings) {
+  var part = saltsAndSolvents.slice(0, 50);
+  part.forEach(function (struct) {
+    var div = document.createElement('div');
+    div.style.width = '100px';
+    div.style.height = '100px';
+    div.style.display = 'none';
+    document.body.appendChild(div);
+    RenderStruct.render(div, struct, _objectSpread$T(_objectSpread$T({}, settings), {}, {
+      autoScaleMargin: 15
+    }));
+    div.remove();
+  });
+};
 function initSaltsAndSolventsTemplates(baseUrl) {
   return function () {
-    var _ref2 = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(dispatch) {
-      var fileName, url, saltsAndSolventsProvider, functionalGroupsProvider, sdfSerializer, text, templates, saltsAndSolvents;
+    var _ref2 = _asyncToGenerator( _regeneratorRuntime.mark(function _callee(dispatch, getState) {
+      var fileName, settings, url, saltsAndSolventsProvider, functionalGroupsProvider, sdfSerializer, text, templates, saltsAndSolvents;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               fileName = 'salts-and-solvents.sdf';
+              settings = getState().options.settings;
               url = "".concat(baseUrl, "/templates/").concat(fileName);
               saltsAndSolventsProvider = SaltsAndSolventsProvider.getInstance();
               functionalGroupsProvider = FunctionalGroupsProvider.getInstance();
               sdfSerializer = new SdfSerializer();
-              _context.next = 7;
+              _context.next = 8;
               return prefetchStatic(url);
-            case 7:
+            case 8:
               text = _context.sent;
               templates = sdfSerializer.deserialize(text);
               saltsAndSolvents = templates.reduce(function (acc, _ref3) {
@@ -7828,20 +7988,21 @@ function initSaltsAndSolventsTemplates(baseUrl) {
                 acc.push(struct);
                 return acc;
               }, []);
+              prerenderPartOfStructures(saltsAndSolvents, settings);
               saltsAndSolventsProvider.setSaltsAndSolventsList(saltsAndSolvents);
               functionalGroupsProvider.addToFunctionalGroupsList(saltsAndSolvents);
               dispatch(initSaltsAndSolvents(templates));
               dispatch(appUpdate({
                 saltsAndSolvents: true
               }));
-            case 14:
+            case 16:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     }));
-    return function (_x) {
+    return function (_x, _x2) {
       return _ref2.apply(this, arguments);
     };
   }();
@@ -15572,42 +15733,10 @@ var Cursor = function Cursor(_ref) {
 };
 
 var _excluded$r = ["struct", "Tag"];
-function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function ownKeys$E(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$E(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$E(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$E(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function prepareStruct(struct) {
-  if (struct.sgroups.size > 0) {
-    var newStruct = struct.clone();
-    newStruct.sgroups["delete"](0);
-    return newStruct;
-  }
-  return struct;
-}
-var renderCache = new Map();
-function renderStruct(el, struct) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (el && struct) {
-    var _options$cachePrefix = options.cachePrefix,
-        cachePrefix = _options$cachePrefix === void 0 ? '' : _options$cachePrefix;
-    var cacheKey = "".concat(cachePrefix).concat(struct.name);
-    if (renderCache.has(cacheKey)) {
-      el.innerHTML = renderCache.get(cacheKey);
-      return;
-    }
-    var preparedStruct = prepareStruct(struct);
-    preparedStruct.initHalfBonds();
-    preparedStruct.initNeighbors();
-    preparedStruct.setImplicitHydrogen();
-    preparedStruct.markFragments();
-    var rnd = new Render(el, _objectSpread$E({
-      autoScale: true
-    }, options));
-    rnd.setMolecule(preparedStruct);
-    rnd.update(true, options.viewSz);
-    renderCache.set(cacheKey, rnd.clientArea.innerHTML);
-  }
-}
+function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var StructRender = function (_Component) {
   _inherits(StructRender, _Component);
   var _super = _createSuper$a(StructRender);
@@ -15644,7 +15773,7 @@ var StructRender = function (_Component) {
       el === null || el === void 0 ? void 0 : el.childNodes.forEach(function (node) {
         node.remove();
       });
-      renderStruct(el, parsedStruct, options);
+      RenderStruct.render(el, parsedStruct, options);
     }
   }, {
     key: "componentDidMount",
@@ -16549,100 +16678,6 @@ var Select = function Select(_ref2) {
 
 var classes$z = {"button-common-styles":"form-module_button-common-styles__BvKSn","scrollbar":"form-module_scrollbar__MgLtc","dataError":"form-module_dataError__IXK1h","inputWrapper":"form-module_inputWrapper__sIDHH"};
 
-function fileOpener(server) {
-  return new Promise(function (resolve, reject) {
-    if (global.FileReader) {
-      resolve(throughFileReader);
-    } else if (global.ActiveXObject) {
-      try {
-        var fso = new ActiveXObject('Scripting.FileSystemObject');
-        resolve(function (file) {
-          return Promise.resolve(throughFileSystemObject(fso, file));
-        });
-      } catch (e) {
-        reject(e);
-      }
-    } else if (server) {
-      resolve(server.then(function () {
-        throw Error("Server doesn't still support echo method");
-      }));
-    } else {
-      reject(new Error('Your browser does not support opening files locally'));
-    }
-  });
-}
-function throughFileReader(file) {
-  return new Promise(function (resolve, reject) {
-    var rd = new FileReader();
-    rd.onload = function () {
-      var content = rd.result;
-      if (file.msClose) file.msClose();
-      resolve(content);
-    };
-    rd.onerror = function (event) {
-      reject(event);
-    };
-    rd.readAsText(file, 'UTF-8');
-  });
-}
-function throughFileSystemObject(fso, file) {
-  var fd = fso.OpenTextFile(file.name, 1);
-  var content = fd.ReadAll();
-  fd.Close();
-  return content;
-}
-
-var GREEK_SIMBOLS = {
-  Alpha: 'A',
-  alpha: 'α',
-  Beta: 'B',
-  beta: 'β',
-  Gamma: 'Г',
-  gamma: 'γ'
-};
-var greekRe = new RegExp('\\b' + Object.keys(GREEK_SIMBOLS).join('\\b|\\b') + '\\b', 'g');
-function greekify(str) {
-  return str.replace(greekRe, function (sym) {
-    return GREEK_SIMBOLS[sym];
-  });
-}
-function filterLib(lib, filter$1) {
-  var trimmedFilter = filter$1.trim();
-  var re = new RegExp(escapeRegExp(greekify(trimmedFilter)), 'i');
-  return flow(filter(function (item) {
-    return !trimmedFilter || re.test(greekify(item.struct.name)) || re.test(greekify(item.props.group));
-  }), reduce(function (res, item) {
-    if (!res[item.props.group]) res[item.props.group] = [item];else res[item.props.group].push(item);
-    return res;
-  }, {}))(lib);
-}
-function filterFGLib(lib, filter$1) {
-  var trimmedFilter = filter$1.trim();
-  var re = new RegExp(escapeRegExp(greekify(trimmedFilter)), 'i');
-  var searchFunction = function searchFunction(item) {
-    var fields = [item.struct.name, item.props.abbreviation, item.props.name].filter(Boolean);
-    return fields.some(function (field) {
-      return re.test(greekify(field));
-    });
-  };
-  return flow(filter(function (item) {
-    return !trimmedFilter || searchFunction(item);
-  }), reduce(function (res, item) {
-    if (!res[item.props.group]) res[item.props.group] = [item];else res[item.props.group].push(item);
-    return res;
-  }, {}))(lib);
-}
-var getSelectOptionsFromSchema = function getSelectOptionsFromSchema(schema) {
-  return schema["enum"].reduce(function (options, value, index) {
-    var _schema$enumNames$ind, _schema$enumNames;
-    options.push({
-      value: value,
-      label: (_schema$enumNames$ind = schema === null || schema === void 0 ? void 0 : (_schema$enumNames = schema.enumNames) === null || _schema$enumNames === void 0 ? void 0 : _schema$enumNames[index]) !== null && _schema$enumNames$ind !== void 0 ? _schema$enumNames$ind : value
-    });
-    return options;
-  }, []);
-};
-
 var _excluded$o = ["schema", "result", "customValid"],
     _excluded2$3 = ["labelPos", "title", "children"],
     _excluded3 = ["name", "onChange", "component", "labelPos", "className"],
@@ -19606,7 +19641,8 @@ var SaveDialog = function (_Component) {
     _this.isRxn = _this.props.struct.hasRxnArrow();
     _this.textAreaRef = createRef();
     var formats = [_this.isRxn ? 'rxn' : 'mol', 'smiles', 'ket'];
-    if (_this.props.server) formats.push(_this.isRxn ? 'rxnV3000' : 'molV3000', 'smilesExt', 'smarts', 'inChI', 'inChIAuxInfo', 'cml', 'svg', 'png', 'cdxml');
+    if (_this.props.server) formats.push(_this.isRxn ? 'rxnV3000' : 'molV3000', 'smilesExt', 'smarts', 'inChI', 'inChIAuxInfo', 'cml', 'svg', 'png', 'cdxml'
+    );
     _this.saveSchema = saveSchema;
     _this.saveSchema.properties.format = Object.assign(_this.saveSchema.properties.format, {
       "enum": formats,
@@ -20779,6 +20815,7 @@ function SData(_ref) {
       init: init
     }, formState), {}, {
       children: jsxs("fieldset", {
+        className: "sdata",
         children: [jsx(Field, {
           name: "context",
           options: getSelectOptionsFromSchema(formSchema.properties.context),
@@ -21207,6 +21244,45 @@ var EmptySearchResult = function EmptySearchResult(_ref) {
   });
 };
 
+var SALTS_AND_SOLVENTS = 'Salts and Solvents';
+var batchDelay = 300;
+function useSaltsAndSolvents(saltsAndSolvents, filter) {
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isFirstRender = _useState2[0],
+      setIsFirstRender = _useState2[1];
+  var timerId = useRef(null);
+  var _useState3 = useState(saltsAndSolvents[SALTS_AND_SOLVENTS]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      filteredSaltsAndSolvents = _useState4[0],
+      setFilteredSaltsAndSolvents = _useState4[1];
+  var addToSaSWithBatches = useCallback(function (fullFilteredArray) {
+    var batchSize = 16;
+    setFilteredSaltsAndSolvents(function (filteredSaltsAndSolvents) {
+      return [].concat(_toConsumableArray(filteredSaltsAndSolvents !== null && filteredSaltsAndSolvents !== void 0 ? filteredSaltsAndSolvents : []), _toConsumableArray(fullFilteredArray.splice(0, batchSize)));
+    });
+    if (fullFilteredArray.length > 0) {
+      timerId.current = setTimeout(function () {
+        return addToSaSWithBatches(fullFilteredArray);
+      }, batchDelay);
+    }
+  }, []);
+  useEffect(function () {
+    var filteredSaS = filterFGLib(saltsAndSolvents, filter)[SALTS_AND_SOLVENTS];
+    addToSaSWithBatches(filteredSaS);
+  }, [saltsAndSolvents, addToSaSWithBatches]);
+  useEffect(function () {
+    if (isFirstRender) {
+      setIsFirstRender(false);
+      return;
+    }
+    clearTimeout(timerId.current);
+    var filteredSaS = filterFGLib(saltsAndSolvents, filter)[SALTS_AND_SOLVENTS];
+    setFilteredSaltsAndSolvents(filteredSaS);
+  }, [saltsAndSolvents, filter]);
+  return filteredSaltsAndSolvents;
+}
+
 var _excluded$1 = ["children", "value", "index"],
     _excluded2 = ["filter", "onFilter", "onChangeGroup", "mode", "initialTab", "functionalGroups", "lib", "saltsAndSolvents"];
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -21244,7 +21320,6 @@ var filterLibSelector = createSelector(function (props) {
   return props.filter;
 }, filterLib);
 var FUNCTIONAL_GROUPS = 'Functional Groups';
-var SALTS_AND_SOLVENTS = 'Salts and Solvents';
 var HeaderContent = function HeaderContent() {
   return jsxs("div", {
     className: classes$8.dialogHeader,
@@ -21298,21 +21373,15 @@ var TemplateDialog = function TemplateDialog(props) {
       _useState4 = _slicedToArray(_useState3, 2),
       expandedAccordions = _useState4[0],
       setExpandedAccordions = _useState4[1];
+  var filteredSaltsAndSolvents = useSaltsAndSolvents(saltsAndSolvents, filter);
   var _useState5 = useState(functionalGroups[FUNCTIONAL_GROUPS]),
       _useState6 = _slicedToArray(_useState5, 2),
       filteredFG = _useState6[0],
       setFilteredFG = _useState6[1];
-  var _useState7 = useState(saltsAndSolvents[SALTS_AND_SOLVENTS]),
-      _useState8 = _slicedToArray(_useState7, 2),
-      filteredSaltsAndSolvents = _useState8[0],
-      setFilteredSaltsAndSolvents = _useState8[1];
   var filteredTemplateLib = filterLibSelector(props);
   useEffect(function () {
     setFilteredFG(filterFGLib(functionalGroups, filter)[FUNCTIONAL_GROUPS]);
   }, [functionalGroups, filter]);
-  useEffect(function () {
-    setFilteredSaltsAndSolvents(filterFGLib(saltsAndSolvents, filter)[SALTS_AND_SOLVENTS]);
-  }, [saltsAndSolvents, filter]);
   var handleTabChange = function handleTabChange(_, tab) {
     setTab(tab);
     props.onSelect(null);
@@ -21450,6 +21519,16 @@ var TemplateDialog = function TemplateDialog(props) {
     })]
   });
 };
+var selectTemplate = function selectTemplate(template, props, dispatch) {
+  dispatch(selectTmpl(null));
+  if (!template) return;
+  dispatch(selectTmpl(template));
+  dispatch(onAction({
+    tool: 'template',
+    opts: template
+  }));
+  props.onOk(template);
+};
 var TemplatesDialog = connect(function (store) {
   var _store$modal, _store$modal$prop;
   return _objectSpread$4(_objectSpread$4({}, omit(['attach'], store.templates)), {}, {
@@ -21463,12 +21542,7 @@ var TemplatesDialog = connect(function (store) {
       return dispatch(changeFilter(filter));
     },
     onSelect: function onSelect(tmpl) {
-      dispatch(selectTmpl(tmpl));
-      dispatch(onAction({
-        tool: 'template',
-        opts: tmpl
-      }));
-      props.onOk(tmpl);
+      return selectTemplate(tmpl, props, dispatch);
     },
     onChangeGroup: function onChangeGroup(group) {
       return dispatch(changeGroup(group));
@@ -22214,8 +22288,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.7.0-rc.2" ,
-                    buildDate: "2022-12-15T15:05:13" ,
+                    version: "2.7.0-rc.4" ,
+                    buildDate: "2022-12-20T17:00:39" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });